cat-documents-ng 0.5.16 → 0.5.17

package/fesm2022/cat-documents-ng.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, EventEmitter, Output, ViewChild, Input, ViewEncapsulation, Component, HostListener, ChangeDetectionStrategy, Directive, NgModule, APP_INITIALIZER, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { Injectable, EventEmitter, Output, ViewChild, Input, ViewEncapsulation, Component, ChangeDetectionStrategy, HostListener, Directive, NgModule, APP_INITIALIZER, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import * as i5 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { firstValueFrom, EMPTY, tap, catchError, throwError, of, combineLatest, Subject, Observable, takeUntil, Subscription, debounceTime as debounceTime$1, distinctUntilChanged as distinctUntilChanged$1, BehaviorSubject } from 'rxjs';
@@ -4119,10 +4119,12 @@ class RequestDocumentComponent {
             : this.contextId;
         const requesterId = this.sessionService.getUserSession()?.accountId;
         const requestPayload = {
-            RequestedDocumentForId: requestedDocumentForId,
-            RequestedDocumentType: this.selectedDocumentType,
-            RequesterId: requesterId,
-            Description: this.description.trim()
+            applicationId: this.contextId,
+            requestedDocumentForId: requestedDocumentForId,
+            requestedDocumentType: this.selectedDocumentType,
+            requesterId: requesterId,
+            selectedAssignmentType: this.selectedAssignmentType,
+            description: this.description.trim()
         };
         this.isSaving = true;
         this.documentHttpService.documentRequest(requestPayload).subscribe({
@@ -4241,334 +4243,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 type: Output
             }] } });
 
-class ConfirmationDialogComponent {
-    confirmationService;
-    confirmationOptions = {
-        message: 'Are you sure that you want to proceed?',
-        header: '',
-        icon: '',
-        acceptLabel: 'Yes',
-        rejectLabel: 'No',
-        acceptIcon: 'pi pi-check',
-        rejectIcon: 'pi pi-times',
-        acceptButtonClass: 'btn-danger',
-        rejectButtonClass: 'btn-secondary'
-    };
-    constructor(confirmationService) {
-        this.confirmationService = confirmationService;
-    }
-    /**
-     * Shows the confirmation dialog with the specified options
-     * @param options - Configuration options for the confirmation dialog
-     * @param acceptCallback - Function to execute when user accepts
-     * @param rejectCallback - Function to execute when user rejects
-     */
-    confirm(options, acceptCallback, rejectCallback) {
-        const confirmation = {
-            message: options.message || this.confirmationOptions.message,
-            header: options.header || this.confirmationOptions.header,
-            icon: options.icon || this.confirmationOptions.icon,
-            acceptLabel: options.acceptLabel || this.confirmationOptions.acceptLabel,
-            rejectLabel: options.rejectLabel || this.confirmationOptions.rejectLabel,
-            acceptIcon: options.acceptIcon || this.confirmationOptions.acceptIcon,
-            rejectIcon: options.rejectIcon || this.confirmationOptions.rejectIcon,
-            accept: acceptCallback,
-            reject: rejectCallback
-        };
-        this.confirmationService.confirm(confirmation);
-    }
-    /**
-     * Static method to show a confirmation dialog (for components that don't want to inject this component)
-     * @param confirmationService - The ConfirmationService instance
-     * @param options - Configuration options for the confirmation dialog
-     * @param acceptCallback - Function to execute when user accepts
-     * @param rejectCallback - Function to execute when user rejects
-     */
-    static confirm(confirmationService, options, acceptCallback, rejectCallback) {
-        const defaultOptions = {
-            message: 'Are you sure that you want to proceed?',
-            header: '',
-            icon: '',
-            acceptLabel: 'Yes',
-            rejectLabel: 'No',
-            acceptIcon: 'pi pi-check',
-            rejectIcon: 'pi pi-times',
-            acceptButtonClass: 'btn-success',
-            rejectButtonClass: 'btn-secondary'
-        };
-        const confirmation = {
-            message: options.message || defaultOptions.message,
-            header: options.header || defaultOptions.header,
-            icon: options.icon || defaultOptions.icon,
-            acceptLabel: options.acceptLabel || defaultOptions.acceptLabel,
-            rejectLabel: options.rejectLabel || defaultOptions.rejectLabel,
-            acceptIcon: options.acceptIcon || defaultOptions.acceptIcon,
-            rejectIcon: options.rejectIcon || defaultOptions.rejectIcon,
-            accept: acceptCallback,
-            reject: rejectCallback
-        };
-        confirmationService.confirm(confirmation);
-    }
-    /**
-     * Static method to show a delete confirmation dialog
-     * @param confirmationService - The ConfirmationService instance
-     * @param itemName - Name of the item to be deleted
-     * @param acceptCallback - Function to execute when user accepts deletion
-     * @param rejectCallback - Function to execute when user rejects deletion
-     */
-    static confirmDelete(confirmationService, itemName, acceptCallback, rejectCallback) {
-        ConfirmationDialogComponent.confirm(confirmationService, {
-            message: `Are you sure you want to delete "${itemName}"?`,
-            header: 'Delete Confirmation',
-            acceptLabel: 'Delete',
-            rejectLabel: 'Cancel',
-            acceptButtonClass: 'btn-danger'
-        }, acceptCallback, rejectCallback);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ConfirmationDialogComponent, deps: [{ token: i3.ConfirmationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: ConfirmationDialogComponent, isStandalone: false, selector: "app-confirmation-dialog", inputs: { confirmationOptions: "confirmationOptions" }, ngImport: i0, template: "<!-- This component no longer renders a p-confirmDialog element -->\r\n<!-- The p-confirmDialog should be placed only once in the main app component -->\r\n<!-- This component now only provides methods to trigger confirmations via ConfirmationService -->\r\n", styles: [".btn-danger{background-color:#ef4444;color:#fff;border-color:#e53e3e;max-width:100px}.btn-secondary{background-color:#f3f4f6;color:#000;max-width:100px}\n"] });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ConfirmationDialogComponent, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ConfirmationDialogComponent, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }, {
-            type: Component,
-            args: [{ selector: 'app-confirmation-dialog', standalone: false, template: "<!-- This component no longer renders a p-confirmDialog element -->\r\n<!-- The p-confirmDialog should be placed only once in the main app component -->\r\n<!-- This component now only provides methods to trigger confirmations via ConfirmationService -->\r\n", styles: [".btn-danger{background-color:#ef4444;color:#fff;border-color:#e53e3e;max-width:100px}.btn-secondary{background-color:#f3f4f6;color:#000;max-width:100px}\n"] }]
-        }], ctorParameters: () => [{ type: i3.ConfirmationService }], propDecorators: { confirmationOptions: [{
-                type: Input
-            }] } });
-
-class SidebarComponent {
-    confirmationService;
-    // Flag to prevent multiple confirmations
-    isShowingConfirmation = false;
-    set visible(value) {
-        this._visible = value;
-    }
-    get visible() {
-        return this._visible;
-    }
-    _visible = false;
-    position = 'right';
-    width = SHARED.WIDTH;
-    title = SHARED.EMPTY;
-    showCloseButton = true;
-    modal = true;
-    dismissible = true;
-    styleClass = SHARED.EMPTY;
-    appendTo = 'body';
-    blockScroll = true;
-    closeIcon = SHARED.CLOSE_ICON;
-    showSaveButton = false;
-    saveButtonText = SHARED.SAVE;
-    saveButtonDisabled = false;
-    successMessage = SHARED.SUCCESS_MESSAGE;
-    errorMessage = SHARED.EMPTY;
-    hasUnsavedChanges = false;
-    visibleChange = new EventEmitter();
-    onShow = new EventEmitter();
-    onHide = new EventEmitter();
-    onSave = new EventEmitter();
-    onClose = new EventEmitter();
-    showSuccessMessage = false;
-    showErrorMessage = false;
-    destroy$ = new Subject();
-    unsavedChangesConfirmationOptions = {
-        message: SHARED.UNSAVED_CHANGES_MESSAGE,
-        acceptLabel: SHARED.YES,
-        rejectLabel: SHARED.NO,
-        acceptIcon: SHARED.ACCEPT_ICON,
-        rejectIcon: SHARED.REJECT_ICON,
-        acceptButtonClass: SHARED.ACCEPT_BUTTON_STYLE_CLASS,
-        rejectButtonClass: SHARED.REJECT_BUTTON_STYLE_CLASS
-    };
-    constructor(confirmationService) {
-        this.confirmationService = confirmationService;
-    }
-    /**
-     * Handles the onHide event from PrimeNG sidebar
-     * Only emits when actually closing, not when showing confirmation
-     */
-    onSidebarHide() {
-        if (!this.isShowingConfirmation) {
-            this.onHide.emit();
-        }
-    }
-    /**
-     * Handles the visibleChange event from PrimeNG sidebar
-     * Intercepts automatic closing to show confirmation if needed
-     */
-    onVisibleChange(value) {
-        if (!value && this.hasUnsavedChanges && !this.isShowingConfirmation) {
-            this._visible = true;
-            this.showUnsavedChangesConfirmation();
-            return;
-        }
-        this.visibleChange.emit(value);
-    }
-    /**
-     * Opens the sidebar
-     */
-    open() {
-        this._visible = true;
-        this.clearMessages();
-        this.visibleChange.emit(this._visible);
-        this.onShow.emit();
-    }
-    /**
-     * Closes the sidebar
-     */
-    close() {
-        this._visible = false;
-        this.clearMessages();
-        this.visibleChange.emit(this._visible);
-        this.onHide.emit();
-    }
-    /**
-     * Handles escape key press
-     * Shows confirmation if there are unsaved changes
-     */
-    handleEscapeKey(event) {
-        if (this.visible) {
-            event.preventDefault();
-            this.handleClose();
-        }
-    }
-    /**
-     * Handles backdrop click events
-     * Prevents default PrimeNG behavior and shows confirmation if needed
-     */
-    handleBackdropClick(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        this.handleClose();
-    }
-    /**
-     * Handles all closing scenarios (backdrop click, escape key, close button, etc.)
-     * This is the single entry point for all closing logic
-     */
-    handleClose() {
-        if (this.hasUnsavedChanges && !this.isShowingConfirmation) {
-            this.showUnsavedChangesConfirmation();
-        }
-        else {
-            this.close();
-        }
-    }
-    /**
-     * Shows confirmation dialog for unsaved changes
-     */
-    showUnsavedChangesConfirmation() {
-        if (this.isShowingConfirmation) {
-            return;
-        }
-        this.isShowingConfirmation = true;
-        ConfirmationDialogComponent.confirm(this.confirmationService, this.unsavedChangesConfirmationOptions, () => {
-            this.isShowingConfirmation = false;
-            this.close();
-            this.onClose.emit();
-        }, () => {
-            this.isShowingConfirmation = false;
-        });
-    }
-    /**
-     * Shows success message and closes sidebar after delay
-     */
-    showSuccess() {
-        this.showSuccessMessage = true;
-        this.showErrorMessage = false;
-        setTimeout(() => {
-            this.close();
-        }, 2000);
-    }
-    /**
-     * Shows error message
-     */
-    showError(message) {
-        this.showErrorMessage = true;
-        this.showSuccessMessage = false;
-        this.errorMessage = message || SHARED.EMPTY;
-    }
-    /**
-     * Clears all messages
-     */
-    clearMessages() {
-        this.showSuccessMessage = false;
-        this.showErrorMessage = false;
-    }
-    /**
-     * Checks if there are unsaved changes
-     * @returns True if there are unsaved changes, false otherwise
-     */
-    checkForUnsavedChanges() {
-        return this.hasUnsavedChanges;
-    }
-    /**
-     * Lifecycle hook that is called when component is destroyed.
-     * Cleans up subscriptions.
-     */
-    ngOnDestroy() {
-        this.destroy$.next();
-        this.destroy$.complete();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SidebarComponent, deps: [{ token: i3.ConfirmationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: SidebarComponent, isStandalone: false, selector: "lib-sidebar", inputs: { visible: "visible", position: "position", width: "width", title: "title", showCloseButton: "showCloseButton", modal: "modal", dismissible: "dismissible", styleClass: "styleClass", appendTo: "appendTo", blockScroll: "blockScroll", closeIcon: "closeIcon", showSaveButton: "showSaveButton", saveButtonText: "saveButtonText", saveButtonDisabled: "saveButtonDisabled", successMessage: "successMessage", errorMessage: "errorMessage", hasUnsavedChanges: "hasUnsavedChanges" }, outputs: { visibleChange: "visibleChange", onShow: "onShow", onHide: "onHide", onSave: "onSave", onClose: "onClose" }, host: { listeners: { "document:keydown.escape": "handleEscapeKey($event)" } }, ngImport: i0, template: "<!-- PrimeNG Sidebar with proper backdrop handling -->\r\n<div *ngIf=\"visible\" class=\"backdrop-shadow\" (click)=\"handleClose()\"></div>\r\n\r\n<p-sidebar \r\n  [(visible)]=\"visible\"\r\n  [position]=\"position\"\r\n  [style]=\"{width: width}\"\r\n  [dismissible]=\"true\"\r\n  [showCloseIcon]=\"false\"\r\n  [appendTo]=\"'body'\"\r\n  [blockScroll]=\"blockScroll\"\r\n  (visibleChange)=\"onVisibleChange($event)\"\r\n  (onShow)=\"onShow.emit()\"\r\n  (onHide)=\"onSidebarHide()\"\r\n>\r\n  <ng-template pTemplate=\"header\" *ngIf=\"title || showCloseButton || showSaveButton\">\r\n    <div class=\"sidebar-header\">\r\n      <h3 *ngIf=\"title\" class=\"sidebar-title\">{{ title }}</h3>\r\n      <div class=\"header-content\">\r\n        <ng-content select=\"[header]\"></ng-content>\r\n        \r\n        <p-messages \r\n          *ngIf=\"showSuccessMessage\"\r\n          severity=\"success\"\r\n          [closable]=\"false\"\r\n          [style]=\"{'margin-bottom': '0.5rem'}\"\r\n          class=\"ml-3\"\r\n        >\r\n          <ng-template pTemplate=\"message\">\r\n            <span>{{ successMessage }}</span>\r\n          </ng-template>\r\n        </p-messages>\r\n        \r\n        <p-messages \r\n          *ngIf=\"showErrorMessage\"\r\n          severity=\"error\"\r\n          [closable]=\"false\"\r\n          [style]=\"{'margin-bottom': '0.5rem'}\"\r\n          class=\"ml-3\"\r\n        >\r\n          <ng-template pTemplate=\"message\">\r\n            <span>{{ errorMessage }}</span>\r\n          </ng-template>\r\n        </p-messages>\r\n\r\n        <div class=\"header-actions mr-3\">\r\n          <button \r\n            *ngIf=\"showSaveButton\"\r\n            pButton \r\n            type=\"button\" \r\n            [label]=\"saveButtonText\"\r\n            [disabled]=\"saveButtonDisabled\"\r\n            class=\"p-button-primary\"\r\n            (click)=\"onSave.emit()\"\r\n          ></button>\r\n\r\n          <button \r\n            *ngIf=\"showCloseButton\"\r\n            pButton \r\n            type=\"button\" \r\n            icon=\"pi pi-times\"\r\n            class=\"p-button-text p-button-rounded\"\r\n            (click)=\"handleClose()\"\r\n          ></button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n\r\n  <ng-template pTemplate=\"content\">\r\n    <div class=\"sidebar-content\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </ng-template>\r\n</p-sidebar>\r\n", styles: [":host{display:block}.backdrop-shadow{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;z-index:1000}.sidebar-header{display:flex;justify-content:flex-end;align-items:center;padding:0;width:100%;gap:1rem}.sidebar-header ::ng-deep .p-messages .p-message-success{margin-left:2rem;font-size:15px}.sidebar-header ::ng-deep .p-messages .p-message-wrapper{padding:1rem}.sidebar-title{margin:0;font-size:1.25rem;font-weight:600;color:#212529;flex:0 1 auto;white-space:nowrap;min-width:0}.header-content{display:flex;align-items:center;gap:1rem;justify-content:space-between;width:100%}.header-actions{display:flex;align-items:center;gap:.5rem;margin-left:auto;margin-right:0}.close-button{background:none;border:none;color:#6c757d;cursor:pointer;padding:.5rem;border-radius:.375rem;transition:all .2s ease;display:flex;align-items:center;justify-content:center;min-width:2rem;min-height:2rem;margin-right:.5rem}.close-button:hover{background-color:#e9ecef;color:#495057}.close-button:focus{outline:none;box-shadow:0 0 0 3px #0f8bfd4d}.close-button i{font-size:1rem}.sidebar-content{height:100%;overflow-y:auto;padding:0}.header-actions .p-button-text.p-button-rounded{width:2rem;height:2rem;border-radius:50%}.header-actions .p-button-text.p-button-rounded:hover{background-color:#0000001a}::ng-deep .p-sidebar .p-sidebar-header{border-bottom:1px solid #e9ecef;margin-bottom:1rem;background-color:#f8f9fa}::ng-deep .p-sidebar .p-sidebar-content{padding:0 1.5rem 1.5rem;height:calc(100% - 80px);overflow-y:auto}::ng-deep .p-sidebar.p-sidebar-right .p-sidebar-content{padding-left:1.5rem;padding-right:1.5rem}::ng-deep .p-sidebar.p-sidebar-left .p-sidebar-content{padding-left:1.5rem;padding-right:1.5rem}@media (max-width: 768px){::ng-deep .p-sidebar{width:100%!important;max-width:100%!important}::ng-deep .p-sidebar .p-sidebar-header{padding:1rem 1rem 0}::ng-deep .p-sidebar .p-sidebar-content{padding:0 1rem 1rem}}\n"], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: i4.Sidebar, selector: "p-sidebar", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "component", type: i5$1.Messages, selector: "p-messages", inputs: ["value", "closable", "style", "styleClass", "enableService", "key", "escape", "severity", "showTransitionOptions", "hideTransitionOptions"], outputs: ["valueChange", "onClose"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SidebarComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-sidebar', standalone: false, template: "<!-- PrimeNG Sidebar with proper backdrop handling -->\r\n<div *ngIf=\"visible\" class=\"backdrop-shadow\" (click)=\"handleClose()\"></div>\r\n\r\n<p-sidebar \r\n  [(visible)]=\"visible\"\r\n  [position]=\"position\"\r\n  [style]=\"{width: width}\"\r\n  [dismissible]=\"true\"\r\n  [showCloseIcon]=\"false\"\r\n  [appendTo]=\"'body'\"\r\n  [blockScroll]=\"blockScroll\"\r\n  (visibleChange)=\"onVisibleChange($event)\"\r\n  (onShow)=\"onShow.emit()\"\r\n  (onHide)=\"onSidebarHide()\"\r\n>\r\n  <ng-template pTemplate=\"header\" *ngIf=\"title || showCloseButton || showSaveButton\">\r\n    <div class=\"sidebar-header\">\r\n      <h3 *ngIf=\"title\" class=\"sidebar-title\">{{ title }}</h3>\r\n      <div class=\"header-content\">\r\n        <ng-content select=\"[header]\"></ng-content>\r\n        \r\n        <p-messages \r\n          *ngIf=\"showSuccessMessage\"\r\n          severity=\"success\"\r\n          [closable]=\"false\"\r\n          [style]=\"{'margin-bottom': '0.5rem'}\"\r\n          class=\"ml-3\"\r\n        >\r\n          <ng-template pTemplate=\"message\">\r\n            <span>{{ successMessage }}</span>\r\n          </ng-template>\r\n        </p-messages>\r\n        \r\n        <p-messages \r\n          *ngIf=\"showErrorMessage\"\r\n          severity=\"error\"\r\n          [closable]=\"false\"\r\n          [style]=\"{'margin-bottom': '0.5rem'}\"\r\n          class=\"ml-3\"\r\n        >\r\n          <ng-template pTemplate=\"message\">\r\n            <span>{{ errorMessage }}</span>\r\n          </ng-template>\r\n        </p-messages>\r\n\r\n        <div class=\"header-actions mr-3\">\r\n          <button \r\n            *ngIf=\"showSaveButton\"\r\n            pButton \r\n            type=\"button\" \r\n            [label]=\"saveButtonText\"\r\n            [disabled]=\"saveButtonDisabled\"\r\n            class=\"p-button-primary\"\r\n            (click)=\"onSave.emit()\"\r\n          ></button>\r\n\r\n          <button \r\n            *ngIf=\"showCloseButton\"\r\n            pButton \r\n            type=\"button\" \r\n            icon=\"pi pi-times\"\r\n            class=\"p-button-text p-button-rounded\"\r\n            (click)=\"handleClose()\"\r\n          ></button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n\r\n  <ng-template pTemplate=\"content\">\r\n    <div class=\"sidebar-content\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </ng-template>\r\n</p-sidebar>\r\n", styles: [":host{display:block}.backdrop-shadow{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;z-index:1000}.sidebar-header{display:flex;justify-content:flex-end;align-items:center;padding:0;width:100%;gap:1rem}.sidebar-header ::ng-deep .p-messages .p-message-success{margin-left:2rem;font-size:15px}.sidebar-header ::ng-deep .p-messages .p-message-wrapper{padding:1rem}.sidebar-title{margin:0;font-size:1.25rem;font-weight:600;color:#212529;flex:0 1 auto;white-space:nowrap;min-width:0}.header-content{display:flex;align-items:center;gap:1rem;justify-content:space-between;width:100%}.header-actions{display:flex;align-items:center;gap:.5rem;margin-left:auto;margin-right:0}.close-button{background:none;border:none;color:#6c757d;cursor:pointer;padding:.5rem;border-radius:.375rem;transition:all .2s ease;display:flex;align-items:center;justify-content:center;min-width:2rem;min-height:2rem;margin-right:.5rem}.close-button:hover{background-color:#e9ecef;color:#495057}.close-button:focus{outline:none;box-shadow:0 0 0 3px #0f8bfd4d}.close-button i{font-size:1rem}.sidebar-content{height:100%;overflow-y:auto;padding:0}.header-actions .p-button-text.p-button-rounded{width:2rem;height:2rem;border-radius:50%}.header-actions .p-button-text.p-button-rounded:hover{background-color:#0000001a}::ng-deep .p-sidebar .p-sidebar-header{border-bottom:1px solid #e9ecef;margin-bottom:1rem;background-color:#f8f9fa}::ng-deep .p-sidebar .p-sidebar-content{padding:0 1.5rem 1.5rem;height:calc(100% - 80px);overflow-y:auto}::ng-deep .p-sidebar.p-sidebar-right .p-sidebar-content{padding-left:1.5rem;padding-right:1.5rem}::ng-deep .p-sidebar.p-sidebar-left .p-sidebar-content{padding-left:1.5rem;padding-right:1.5rem}@media (max-width: 768px){::ng-deep .p-sidebar{width:100%!important;max-width:100%!important}::ng-deep .p-sidebar .p-sidebar-header{padding:1rem 1rem 0}::ng-deep .p-sidebar .p-sidebar-content{padding:0 1rem 1rem}}\n"] }]
-        }], ctorParameters: () => [{ type: i3.ConfirmationService }], propDecorators: { visible: [{
-                type: Input
-            }], position: [{
-                type: Input
-            }], width: [{
-                type: Input
-            }], title: [{
-                type: Input
-            }], showCloseButton: [{
-                type: Input
-            }], modal: [{
-                type: Input
-            }], dismissible: [{
-                type: Input
-            }], styleClass: [{
-                type: Input
-            }], appendTo: [{
-                type: Input
-            }], blockScroll: [{
-                type: Input
-            }], closeIcon: [{
-                type: Input
-            }], showSaveButton: [{
-                type: Input
-            }], saveButtonText: [{
-                type: Input
-            }], saveButtonDisabled: [{
-                type: Input
-            }], successMessage: [{
-                type: Input
-            }], errorMessage: [{
-                type: Input
-            }], hasUnsavedChanges: [{
-                type: Input
-            }], visibleChange: [{
-                type: Output
-            }], onShow: [{
-                type: Output
-            }], onHide: [{
-                type: Output
-            }], onSave: [{
-                type: Output
-            }], onClose: [{
-                type: Output
-            }], handleEscapeKey: [{
-                type: HostListener,
-                args: ['document:keydown.escape', ['$event']]
-            }] } });
-
 class UserListService {
     documentStore;
     documentQuery;
@@ -4746,267 +4420,595 @@ class UserListComponent {
             this.userSelected.emit(username);
         }
     }
-    getAvatarColor(color) {
-        if (!color) {
-            return SHARED.DEFAULT_COLOR;
-        }
-        return SHARED.COLOR_MAP[color] || SHARED.DEFAULT_COLOR;
+    getAvatarColor(color) {
+        if (!color) {
+            return SHARED.DEFAULT_COLOR;
+        }
+        return SHARED.COLOR_MAP[color] || SHARED.DEFAULT_COLOR;
+    }
+    ngOnDestroy() {
+        this.userListSubscription.unsubscribe();
+        this.categoriesSubscription.unsubscribe();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UserListComponent, deps: [{ token: DocumentHelperService }, { token: DocumentStore }, { token: DocumentQuery }, { token: UserListService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UserListComponent, isStandalone: false, selector: "lib-user-list", inputs: { userList: "userList", categories: "categories" }, outputs: { userSelected: "userSelected" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"user-list-container\" [@slideInFromTop]>\r\n  <div class=\"user-cards\">\r\n    <div \r\n      *ngFor=\"let user of filteredUserData\" \r\n      class=\"user-card\"\r\n      [class.selected]=\"selectedUser === user.name\"\r\n      [style.border-color]=\"selectedUser === user.name ? getAvatarColor(user.color) : 'transparent'\"\r\n      (click)=\"onUserSelect(user.name, user._id)\"\r\n    >\r\n      @if(user.name === \"Application Docs\"){\r\n        <div class=\"user-avatar\" [ngClass]=\"'avatar-' + user.color\">\r\n          <span class=\"initials\"><i class=\"pi pi-user\"></i></span>\r\n        </div>\r\n      }@else {\r\n        <div class=\"user-avatar\" [ngClass]=\"'avatar-' + user.color\">\r\n          <span class=\"initials\">{{ user.initials }}</span>\r\n        </div>\r\n      }\r\n      <div class=\"user-info\">\r\n        <div class=\"username\">{{ user.name }}</div>\r\n        <div class=\"document-counts\">\r\n        <span style=\"color : #16A34A;\"> {{ user.approved }} approved </span><span>/ {{ user.pending }} outstanding</span>\r\n        </div>\r\n      </div>\r\n     \r\n    </div>\r\n    \r\n    <!-- Show message when filtered list is empty -->\r\n    <div *ngIf=\"filteredUserData.length === 0 && shouldShowContainer\" class=\"no-users-message\" [@slideInFromTop]>\r\n      <p>No users available for this category.</p>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".user-list-container{padding:1rem 1rem .5rem}.user-cards{display:flex;flex-wrap:wrap;transition:all .3s ease-in-out}.user-card{display:flex;align-items:center;gap:.75rem;padding:1rem;border:2px solid transparent;border-radius:8px;cursor:pointer;transition:all .2s ease;background:#fff;min-width:140px;max-width:240px;height:70px;position:relative;flex-shrink:0}.user-card:hover{box-shadow:0 4px 8px #00000026}.user-card.selected{background-color:#f8fafc;box-shadow:0 4px 8px #00000026;border-width:2px}.user-avatar{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;font-size:14px;flex-shrink:0;font-weight:400}.avatar-orange{background-color:#fef3c7;color:#b45309}.avatar-blue{background-color:#dbeafe;color:#1d4ed8}.avatar-green{background-color:#22c55e1a;color:#36aa86}.avatar-grey{background-color:#ebeced;color:#5b6676}.avatar-purple{background-color:#3b82f61a;color:#3b82f6}.user-info{flex:1;min-width:0;overflow:hidden}.username{font-weight:600;color:#1f2937;margin-bottom:.25rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}.document-counts{font-size:.875rem;color:#6b7280;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}.selection-indicator{position:absolute;top:8px;right:8px;width:20px;height:20px;background-color:#10b981;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;flex-shrink:0}.no-users-message{display:flex;justify-content:center;align-items:center;padding:2rem;background:#f8fafc;border-radius:8px;border:2px dashed #d1d5db;margin:1rem 0}.no-users-message p{color:#6b7280;font-size:.875rem;font-weight:500;margin:0;text-align:center}\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"] }], animations: [
+            trigger('slideInFromTop', [
+                state('void', style({
+                    opacity: 0,
+                    transform: 'translateY(-10px)'
+                })),
+                state('*', style({
+                    opacity: 1,
+                    transform: 'translateY(0)'
+                })),
+                transition('void => *', [
+                    animate('300ms ease-out')
+                ])
+            ]),
+            trigger('fadeIn', [
+                state('void', style({
+                    opacity: 0,
+                    transform: 'scale(0.8)'
+                })),
+                state('*', style({
+                    opacity: 1,
+                    transform: 'scale(1)'
+                })),
+                transition('void => *', [
+                    animate('200ms ease-in-out')
+                ])
+            ])
+        ], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UserListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-user-list', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, animations: [
+                        trigger('slideInFromTop', [
+                            state('void', style({
+                                opacity: 0,
+                                transform: 'translateY(-10px)'
+                            })),
+                            state('*', style({
+                                opacity: 1,
+                                transform: 'translateY(0)'
+                            })),
+                            transition('void => *', [
+                                animate('300ms ease-out')
+                            ])
+                        ]),
+                        trigger('fadeIn', [
+                            state('void', style({
+                                opacity: 0,
+                                transform: 'scale(0.8)'
+                            })),
+                            state('*', style({
+                                opacity: 1,
+                                transform: 'scale(1)'
+                            })),
+                            transition('void => *', [
+                                animate('200ms ease-in-out')
+                            ])
+                        ])
+                    ], template: "<div class=\"user-list-container\" [@slideInFromTop]>\r\n  <div class=\"user-cards\">\r\n    <div \r\n      *ngFor=\"let user of filteredUserData\" \r\n      class=\"user-card\"\r\n      [class.selected]=\"selectedUser === user.name\"\r\n      [style.border-color]=\"selectedUser === user.name ? getAvatarColor(user.color) : 'transparent'\"\r\n      (click)=\"onUserSelect(user.name, user._id)\"\r\n    >\r\n      @if(user.name === \"Application Docs\"){\r\n        <div class=\"user-avatar\" [ngClass]=\"'avatar-' + user.color\">\r\n          <span class=\"initials\"><i class=\"pi pi-user\"></i></span>\r\n        </div>\r\n      }@else {\r\n        <div class=\"user-avatar\" [ngClass]=\"'avatar-' + user.color\">\r\n          <span class=\"initials\">{{ user.initials }}</span>\r\n        </div>\r\n      }\r\n      <div class=\"user-info\">\r\n        <div class=\"username\">{{ user.name }}</div>\r\n        <div class=\"document-counts\">\r\n        <span style=\"color : #16A34A;\"> {{ user.approved }} approved </span><span>/ {{ user.pending }} outstanding</span>\r\n        </div>\r\n      </div>\r\n     \r\n    </div>\r\n    \r\n    <!-- Show message when filtered list is empty -->\r\n    <div *ngIf=\"filteredUserData.length === 0 && shouldShowContainer\" class=\"no-users-message\" [@slideInFromTop]>\r\n      <p>No users available for this category.</p>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".user-list-container{padding:1rem 1rem .5rem}.user-cards{display:flex;flex-wrap:wrap;transition:all .3s ease-in-out}.user-card{display:flex;align-items:center;gap:.75rem;padding:1rem;border:2px solid transparent;border-radius:8px;cursor:pointer;transition:all .2s ease;background:#fff;min-width:140px;max-width:240px;height:70px;position:relative;flex-shrink:0}.user-card:hover{box-shadow:0 4px 8px #00000026}.user-card.selected{background-color:#f8fafc;box-shadow:0 4px 8px #00000026;border-width:2px}.user-avatar{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;font-size:14px;flex-shrink:0;font-weight:400}.avatar-orange{background-color:#fef3c7;color:#b45309}.avatar-blue{background-color:#dbeafe;color:#1d4ed8}.avatar-green{background-color:#22c55e1a;color:#36aa86}.avatar-grey{background-color:#ebeced;color:#5b6676}.avatar-purple{background-color:#3b82f61a;color:#3b82f6}.user-info{flex:1;min-width:0;overflow:hidden}.username{font-weight:600;color:#1f2937;margin-bottom:.25rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}.document-counts{font-size:.875rem;color:#6b7280;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}.selection-indicator{position:absolute;top:8px;right:8px;width:20px;height:20px;background-color:#10b981;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;flex-shrink:0}.no-users-message{display:flex;justify-content:center;align-items:center;padding:2rem;background:#f8fafc;border-radius:8px;border:2px dashed #d1d5db;margin:1rem 0}.no-users-message p{color:#6b7280;font-size:.875rem;font-weight:500;margin:0;text-align:center}\n"] }]
+        }], ctorParameters: () => [{ type: DocumentHelperService }, { type: DocumentStore }, { type: DocumentQuery }, { type: UserListService }, { type: i0.ChangeDetectorRef }], propDecorators: { userList: [{
+                type: Input
+            }], categories: [{
+                type: Input
+            }], userSelected: [{
+                type: Output
+            }] } });
+
+class StatusCalculatorService {
+    calculateTotalCount(statusData) {
+        return statusData?.reduce((total, status) => total + (status.count ?? 0), 0) || 0;
+    }
+    calculateStatusDataWithPercentages(statusData, selectedStatus) {
+        if (!statusData)
+            return [];
+        const totalCount = this.calculateTotalCount(statusData);
+        return statusData.map((status) => ({
+            ...status,
+            percentage: totalCount > 0 ? (status.count ?? 0) / totalCount * 100 : 0,
+            isSelected: selectedStatus === status.status,
+            statusClass: status.status ? SHARED.STATUS_WITH_DASH + status.status.toLowerCase() : SHARED.EMPTY,
+            iconClass: SHARED.ICON_WITH_DASH + (status?.status?.toLowerCase() || SHARED.EMPTY)
+        }));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: StatusCalculatorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: StatusCalculatorService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: StatusCalculatorService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class DocumentStatusComponent {
+    documentQuery;
+    documentService;
+    statusCalculatorService;
+    contextId = SHARED.EMPTY;
+    statusData;
+    selectedStatus = null;
+    statusDataWithPercentages = [];
+    subscription = new Subscription();
+    constructor(documentQuery, documentService, statusCalculatorService) {
+        this.documentQuery = documentQuery;
+        this.documentService = documentService;
+        this.statusCalculatorService = statusCalculatorService;
+    }
+    ngOnChanges(changes) {
+        if (changes['contextId'] && !changes['contextId'].firstChange) {
+            // When contextId changes, refetch status data for the new context
+            this.refetchStatusData();
+        }
+    }
+    ngOnInit() {
+        this.subscription.add(this.documentQuery.selectSelectedStatus().subscribe(status => {
+            this.selectedStatus = status;
+            this.updateCalculatedStatusData();
+        }));
+        this.subscription.add(this.documentQuery.selectStatusData().subscribe(statusData => {
+            if (statusData && statusData.length > 0) {
+                this.statusData = statusData;
+                this.updateCalculatedStatusData();
+            }
+        }));
+        if (this.contextId && this.contextId !== SHARED.EMPTY) {
+            this.refetchStatusData();
+        }
+    }
+    refetchStatusData() {
+        if (this.contextId && this.contextId !== SHARED.EMPTY) {
+            const currentState = this.documentQuery.getSelectionState();
+            const statusContextId = currentState.userId || null;
+            const categoryId = currentState.menuItem || null;
+            // Use the document service to refresh status data for the new context
+            this.documentService.refreshStatusData(this.contextId, statusContextId, categoryId);
+        }
+    }
+    selectStatus(status) {
+        const newStatus = this.selectedStatus === status ? null : status;
+        this.documentService.setSelectedStatus(newStatus);
+    }
+    updateCalculatedStatusData() {
+        this.statusDataWithPercentages = this.statusCalculatorService.calculateStatusDataWithPercentages(this.statusData, this.selectedStatus);
+    }
+    ngOnDestroy() {
+        this.subscription.unsubscribe();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentStatusComponent, deps: [{ token: DocumentQuery }, { token: DocumentHelperService }, { token: StatusCalculatorService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DocumentStatusComponent, isStandalone: false, selector: "lib-document-status", inputs: { contextId: "contextId", statusData: "statusData" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"status-summary-container\">\r\n  <div class=\"status-cards\">\r\n    \r\n    <div \r\n      *ngFor=\"let status of statusDataWithPercentages\" \r\n      class=\"status-card {{ status.statusClass }}\"\r\n      [class.selected]=\"status.isSelected\"\r\n      (click)=\"selectStatus(status.status || '')\"\r\n    >\r\n      <div class=\"status-icon {{ status.iconClass }}\">\r\n        <i [class]=\"status.icon\"></i>\r\n      </div>\r\n      <div class=\"status-info\">\r\n          <div class=\"status-count\">{{ status.count }}</div>\r\n          <div class=\"status-name\">{{ status.status }}</div>\r\n          \r\n      </div>\r\n    </div>\r\n  </div>\r\n  \r\n  <div class=\"progress-bar-container\">\r\n    <div class=\"progress-bar\">\r\n      <div \r\n        *ngFor=\"let status of statusDataWithPercentages\" \r\n        class=\"progress-segment\"\r\n        [style.width.%]=\"status.percentage\"\r\n        [style.background-color]=\"status.color\"\r\n      ></div>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".status-summary-container{padding:1rem;padding-top:0}.status-cards{display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:1.5rem}.status-card{display:flex;align-items:center;gap:.75rem;padding:.7rem;border-radius:8px;background:#fff;box-shadow:0 2px 4px #0000001a;min-width:150px;flex:1;cursor:pointer;transition:all .2s ease;border:2px solid transparent}.status-card:hover{transform:translateY(-2px);box-shadow:0 4px 8px #00000026}.status-card.selected{border-width:3px!important;border-style:solid!important;box-shadow:0 4px 12px #0003}.status-card.selected.status-approved,.status-card.selected.status-uploaded{border-color:#10b981!important;background:#ecfdf5!important}.status-card.selected.status-pending{border-color:#6b7280!important;background:#f8fafc!important}.status-card.selected.status-reviewing{border-color:#f59e0b!important;background:#fffbeb!important}.status-card.selected.status-rejected{border-color:#ef4444!important;background:#fff1f2!important}.status-card.selected.status-alert{border-color:#dc2626!important;background:#ef4444!important}.status-card.status-approved{background:#ecfdf5}.status-card.status-approved .status-name{color:#065f46}.status-card.status-approved .status-count{color:#047857}.status-card.status-uploaded{background:#ecfdf5}.status-card.status-uploaded .status-name{color:#065f46}.status-card.status-uploaded .status-count{color:#047857}.status-card.status-pending{background:#f8fafc}.status-card.status-pending .status-name{color:#475569}.status-card.status-pending .status-count{color:#334155}.status-card.status-reviewing{background:#fffbeb}.status-card.status-reviewing .status-name{color:#92400e}.status-card.status-reviewing .status-count{color:#a16207}.status-card.status-rejected{background:#fff1f2}.status-card.status-rejected .status-name{color:#be123c}.status-card.status-rejected .status-count{color:#e11d48}.status-card.status-alert{background:#ef4444}.status-card.status-alert .status-name,.status-card.status-alert .status-count{color:#fff}.status-icon{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;color:#fff}.icon-approved,.icon-uploaded{background-color:#10b981}.icon-pending{background-color:#6b7280}.icon-reviewing{background-color:#f59e0b}.icon-rejected{background-color:#ef4444}.icon-alert{background-color:#dc2626}.status-info{flex:1}.status-name{font-weight:600;color:#1f2937;margin-bottom:.25rem}.status-count{font-size:1.2rem;font-weight:700;color:#374151}.progress-bar-container{margin-top:1rem}.progress-bar{height:8px;background-color:#e5e7eb;border-radius:4px;overflow:hidden;display:flex}.progress-segment{height:100%;transition:width .3s ease}\n"], dependencies: [{ kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentStatusComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-document-status', standalone: false, template: "<div class=\"status-summary-container\">\r\n  <div class=\"status-cards\">\r\n    \r\n    <div \r\n      *ngFor=\"let status of statusDataWithPercentages\" \r\n      class=\"status-card {{ status.statusClass }}\"\r\n      [class.selected]=\"status.isSelected\"\r\n      (click)=\"selectStatus(status.status || '')\"\r\n    >\r\n      <div class=\"status-icon {{ status.iconClass }}\">\r\n        <i [class]=\"status.icon\"></i>\r\n      </div>\r\n      <div class=\"status-info\">\r\n          <div class=\"status-count\">{{ status.count }}</div>\r\n          <div class=\"status-name\">{{ status.status }}</div>\r\n          \r\n      </div>\r\n    </div>\r\n  </div>\r\n  \r\n  <div class=\"progress-bar-container\">\r\n    <div class=\"progress-bar\">\r\n      <div \r\n        *ngFor=\"let status of statusDataWithPercentages\" \r\n        class=\"progress-segment\"\r\n        [style.width.%]=\"status.percentage\"\r\n        [style.background-color]=\"status.color\"\r\n      ></div>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".status-summary-container{padding:1rem;padding-top:0}.status-cards{display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:1.5rem}.status-card{display:flex;align-items:center;gap:.75rem;padding:.7rem;border-radius:8px;background:#fff;box-shadow:0 2px 4px #0000001a;min-width:150px;flex:1;cursor:pointer;transition:all .2s ease;border:2px solid transparent}.status-card:hover{transform:translateY(-2px);box-shadow:0 4px 8px #00000026}.status-card.selected{border-width:3px!important;border-style:solid!important;box-shadow:0 4px 12px #0003}.status-card.selected.status-approved,.status-card.selected.status-uploaded{border-color:#10b981!important;background:#ecfdf5!important}.status-card.selected.status-pending{border-color:#6b7280!important;background:#f8fafc!important}.status-card.selected.status-reviewing{border-color:#f59e0b!important;background:#fffbeb!important}.status-card.selected.status-rejected{border-color:#ef4444!important;background:#fff1f2!important}.status-card.selected.status-alert{border-color:#dc2626!important;background:#ef4444!important}.status-card.status-approved{background:#ecfdf5}.status-card.status-approved .status-name{color:#065f46}.status-card.status-approved .status-count{color:#047857}.status-card.status-uploaded{background:#ecfdf5}.status-card.status-uploaded .status-name{color:#065f46}.status-card.status-uploaded .status-count{color:#047857}.status-card.status-pending{background:#f8fafc}.status-card.status-pending .status-name{color:#475569}.status-card.status-pending .status-count{color:#334155}.status-card.status-reviewing{background:#fffbeb}.status-card.status-reviewing .status-name{color:#92400e}.status-card.status-reviewing .status-count{color:#a16207}.status-card.status-rejected{background:#fff1f2}.status-card.status-rejected .status-name{color:#be123c}.status-card.status-rejected .status-count{color:#e11d48}.status-card.status-alert{background:#ef4444}.status-card.status-alert .status-name,.status-card.status-alert .status-count{color:#fff}.status-icon{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;color:#fff}.icon-approved,.icon-uploaded{background-color:#10b981}.icon-pending{background-color:#6b7280}.icon-reviewing{background-color:#f59e0b}.icon-rejected{background-color:#ef4444}.icon-alert{background-color:#dc2626}.status-info{flex:1}.status-name{font-weight:600;color:#1f2937;margin-bottom:.25rem}.status-count{font-size:1.2rem;font-weight:700;color:#374151}.progress-bar-container{margin-top:1rem}.progress-bar{height:8px;background-color:#e5e7eb;border-radius:4px;overflow:hidden;display:flex}.progress-segment{height:100%;transition:width .3s ease}\n"] }]
+        }], ctorParameters: () => [{ type: DocumentQuery }, { type: DocumentHelperService }, { type: StatusCalculatorService }], propDecorators: { contextId: [{
+                type: Input
+            }], statusData: [{
+                type: Input
+            }] } });
+
+class DocumentSearchComponent {
+    documentHelperService;
+    documentQuery;
+    SHARED = SHARED;
+    contextId = SHARED.EMPTY;
+    onActionClick = new EventEmitter();
+    onRequestClick = new EventEmitter();
+    searchTerm = SHARED.EMPTY;
+    destroy$ = new Subject();
+    searchSubject = new Subject();
+    hasActiveFilters = false;
+    constructor(documentHelperService, documentQuery) {
+        this.documentHelperService = documentHelperService;
+        this.documentQuery = documentQuery;
+    }
+    ngOnInit() {
+        this.setupSearchSubscription();
+        this.setupFilterSubscription();
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    /**
+     * Sets up the search input subscription with debouncing
+     */
+    setupSearchSubscription() {
+        const searchSubject = new Subject();
+        searchSubject.pipe(takeUntil(this.destroy$), debounceTime$1(500), distinctUntilChanged$1()).subscribe(searchTerm => {
+            this.onSearchChange(searchTerm);
+        });
+        this.searchSubject = searchSubject;
+    }
+    /**
+     * Sets up subscription to monitor all filter states
+     */
+    setupFilterSubscription() {
+        this.documentQuery.selectSelectionState().pipe(takeUntil(this.destroy$)).subscribe(selectionState => {
+            this.hasActiveFilters = Boolean(selectionState.searchKey ||
+                selectionState.userId ||
+                selectionState.status ||
+                selectionState.menuItem);
+        });
+    }
+    /**
+     * Handles search term changes from ngModel
+     * @param searchTerm - The search term entered by the user
+     */
+    onSearchInputChange(searchTerm) {
+        this.searchSubject.next(searchTerm);
+    }
+    /**
+     * Handles search term changes
+     * @param searchTerm - The search term entered by the user
+     */
+    onSearchChange(searchTerm) {
+        const normalizedSearchTerm = searchTerm?.trim() || null;
+        this.documentHelperService.setSearchKey(normalizedSearchTerm);
+    }
+    /**
+     * Clears the search input
+     */
+    onClearSearch() {
+        this.searchTerm = SHARED.EMPTY;
+        this.documentHelperService.setSearchKey(null);
     }
-    ngOnDestroy() {
-        this.userListSubscription.unsubscribe();
-        this.categoriesSubscription.unsubscribe();
+    /**
+     * Clears all filters including search, menu item, user, and status selections
+     */
+    onClearAllFilters() {
+        this.searchTerm = SHARED.EMPTY;
+        this.documentHelperService.clearSelectionState();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UserListComponent, deps: [{ token: DocumentHelperService }, { token: DocumentStore }, { token: DocumentQuery }, { token: UserListService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UserListComponent, isStandalone: false, selector: "lib-user-list", inputs: { userList: "userList", categories: "categories" }, outputs: { userSelected: "userSelected" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"user-list-container\" [@slideInFromTop]>\r\n  <div class=\"user-cards\">\r\n    <div \r\n      *ngFor=\"let user of filteredUserData\" \r\n      class=\"user-card\"\r\n      [class.selected]=\"selectedUser === user.name\"\r\n      [style.border-color]=\"selectedUser === user.name ? getAvatarColor(user.color) : 'transparent'\"\r\n      (click)=\"onUserSelect(user.name, user._id)\"\r\n    >\r\n      @if(user.name === \"Application Docs\"){\r\n        <div class=\"user-avatar\" [ngClass]=\"'avatar-' + user.color\">\r\n          <span class=\"initials\"><i class=\"pi pi-user\"></i></span>\r\n        </div>\r\n      }@else {\r\n        <div class=\"user-avatar\" [ngClass]=\"'avatar-' + user.color\">\r\n          <span class=\"initials\">{{ user.initials }}</span>\r\n        </div>\r\n      }\r\n      <div class=\"user-info\">\r\n        <div class=\"username\">{{ user.name }}</div>\r\n        <div class=\"document-counts\">\r\n        <span style=\"color : #16A34A;\"> {{ user.approved }} approved </span><span>/ {{ user.pending }} outstanding</span>\r\n        </div>\r\n      </div>\r\n     \r\n    </div>\r\n    \r\n    <!-- Show message when filtered list is empty -->\r\n    <div *ngIf=\"filteredUserData.length === 0 && shouldShowContainer\" class=\"no-users-message\" [@slideInFromTop]>\r\n      <p>No users available for this category.</p>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".user-list-container{padding:1rem 1rem .5rem}.user-cards{display:flex;flex-wrap:wrap;transition:all .3s ease-in-out}.user-card{display:flex;align-items:center;gap:.75rem;padding:1rem;border:2px solid transparent;border-radius:8px;cursor:pointer;transition:all .2s ease;background:#fff;min-width:140px;max-width:240px;height:70px;position:relative;flex-shrink:0}.user-card:hover{box-shadow:0 4px 8px #00000026}.user-card.selected{background-color:#f8fafc;box-shadow:0 4px 8px #00000026;border-width:2px}.user-avatar{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;font-size:14px;flex-shrink:0;font-weight:400}.avatar-orange{background-color:#fef3c7;color:#b45309}.avatar-blue{background-color:#dbeafe;color:#1d4ed8}.avatar-green{background-color:#22c55e1a;color:#36aa86}.avatar-grey{background-color:#ebeced;color:#5b6676}.avatar-purple{background-color:#3b82f61a;color:#3b82f6}.user-info{flex:1;min-width:0;overflow:hidden}.username{font-weight:600;color:#1f2937;margin-bottom:.25rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}.document-counts{font-size:.875rem;color:#6b7280;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}.selection-indicator{position:absolute;top:8px;right:8px;width:20px;height:20px;background-color:#10b981;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;flex-shrink:0}.no-users-message{display:flex;justify-content:center;align-items:center;padding:2rem;background:#f8fafc;border-radius:8px;border:2px dashed #d1d5db;margin:1rem 0}.no-users-message p{color:#6b7280;font-size:.875rem;font-weight:500;margin:0;text-align:center}\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"] }], animations: [
-            trigger('slideInFromTop', [
-                state('void', style({
-                    opacity: 0,
-                    transform: 'translateY(-10px)'
-                })),
-                state('*', style({
-                    opacity: 1,
-                    transform: 'translateY(0)'
-                })),
-                transition('void => *', [
-                    animate('300ms ease-out')
-                ])
-            ]),
-            trigger('fadeIn', [
-                state('void', style({
-                    opacity: 0,
-                    transform: 'scale(0.8)'
-                })),
-                state('*', style({
-                    opacity: 1,
-                    transform: 'scale(1)'
-                })),
-                transition('void => *', [
-                    animate('200ms ease-in-out')
-                ])
-            ])
-        ], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    /**
+     * Determines if the Clear All button should be visible
+     */
+    get shouldShowClearAll() {
+        return this.hasActiveFilters;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentSearchComponent, deps: [{ token: DocumentHelperService }, { token: DocumentQuery }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DocumentSearchComponent, isStandalone: false, selector: "document-search", inputs: { contextId: "contextId" }, outputs: { onActionClick: "onActionClick", onRequestClick: "onRequestClick" }, ngImport: i0, template: "<div class=\"search-container\">\r\n  <div class=\"search-header\">\r\n    <h2 class=\"ml-3\">Documents</h2>  \r\n  </div>\r\n  <div class=\"search-input-wrapper\">\r\n    <i class=\"pi pi-search search-icon\"></i>\r\n    <input \r\n      type=\"text\" \r\n      [(ngModel)]=\"searchTerm\"\r\n      (ngModelChange)=\"onSearchInputChange($event)\"\r\n      class=\"search-input\"\r\n      placeholder=\"Search by document name, category, type, status or applicant name...\"\r\n      [attr.aria-label]=\"'Search documents'\"\r\n    />\r\n    <button \r\n      *ngIf=\"searchTerm\"\r\n      type=\"button\"\r\n      class=\"clear-button\"\r\n      (click)=\"onClearSearch()\"\r\n      [attr.aria-label]=\"'Clear search'\"\r\n    >\r\n      <i class=\"pi pi-times\"></i>\r\n    </button>\r\n  </div>\r\n\r\n  <button \r\n    *ngIf=\"shouldShowClearAll\"\r\n    type=\"button\"\r\n    class=\"clear-all-filters-link\"\r\n    (click)=\"onClearAllFilters()\"\r\n    [attr.aria-label]=\"'Clear all'\"\r\n  >\r\n  Clear All\r\n  <i class=\"pi pi-times\"></i>\r\n  </button>\r\n\r\n  <div class=\"filters-section\">\r\n    <button \r\n      type=\"button\"\r\n      class=\"action-button\"\r\n      (click)=\"onActionClick.emit()\"\r\n      [attr.aria-label]=\"'Open actions menu'\"\r\n    >\r\n      Upload Document\r\n    </button>\r\n    <button \r\n      type=\"button\"\r\n      class=\"action-button ml-2\"\r\n      (click)=\"onRequestClick.emit()\"\r\n      [attr.aria-label]=\"'Open request document sidebar'\"\r\n    >\r\n      Request Document\r\n    </button>\r\n  </div>\r\n</div> ", styles: [".search-container{display:flex;align-items:center;gap:1rem;width:100%;justify-content:flex-start;padding:10px}.search-input-wrapper{position:relative;flex:1;display:flex;align-items:center;max-width:50%;min-width:300px}.clear-all-filters-link{background:none;border:none;color:#0f8bfd;cursor:pointer;padding:8px 12px;border-radius:4px;font-size:16px;font-weight:500;text-decoration:none!important;transition:background-color .2s ease,color .2s ease;white-space:nowrap;flex-shrink:0;display:flex;justify-content:center;align-items:center;gap:4px}.filters-section{display:flex;align-items:center;gap:1rem;flex-shrink:0;margin-left:auto}.search-icon{position:absolute;left:12px;color:#6c757d;z-index:1}.search-input{width:100%;padding:12px 40px;border:1px solid #dee2e6;border-radius:8px;font-size:14px;outline:none;transition:border-color .2s ease,box-shadow .2s ease}.search-input:focus{border-color:#0f8bfd;box-shadow:0 0 0 3px #0f8bfd1a}.search-input::placeholder{color:#6c757d}.clear-button{position:absolute;right:12px;background:none;border:none;color:#6c757d;cursor:pointer;padding:4px;border-radius:4px;transition:background-color .2s ease,color .2s ease}.clear-button:hover{background-color:#f8f9fa;color:#495057}.action-button{background-color:#0f8bfd;color:#fff;border:none;padding:12px 24px;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:background-color .2s ease,transform .1s ease;white-space:nowrap}.action-button:hover{background-color:#0d7ae6;transform:translateY(-1px)}.action-button:active{transform:translateY(0)}.action-button:focus{outline:none;box-shadow:0 0 0 3px #0f8bfd4d}@media (max-width: 768px){.search-container{flex-direction:column;gap:.75rem}.search-input-wrapper{max-width:100%}.filters-section{width:100%;justify-content:center;gap:.5rem}.action-button{width:auto;justify-content:center}}\n"], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i9$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: i9$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i9$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UserListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentSearchComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-user-list', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, animations: [
-                        trigger('slideInFromTop', [
-                            state('void', style({
-                                opacity: 0,
-                                transform: 'translateY(-10px)'
-                            })),
-                            state('*', style({
-                                opacity: 1,
-                                transform: 'translateY(0)'
-                            })),
-                            transition('void => *', [
-                                animate('300ms ease-out')
-                            ])
-                        ]),
-                        trigger('fadeIn', [
-                            state('void', style({
-                                opacity: 0,
-                                transform: 'scale(0.8)'
-                            })),
-                            state('*', style({
-                                opacity: 1,
-                                transform: 'scale(1)'
-                            })),
-                            transition('void => *', [
-                                animate('200ms ease-in-out')
-                            ])
-                        ])
-                    ], template: "<div class=\"user-list-container\" [@slideInFromTop]>\r\n  <div class=\"user-cards\">\r\n    <div \r\n      *ngFor=\"let user of filteredUserData\" \r\n      class=\"user-card\"\r\n      [class.selected]=\"selectedUser === user.name\"\r\n      [style.border-color]=\"selectedUser === user.name ? getAvatarColor(user.color) : 'transparent'\"\r\n      (click)=\"onUserSelect(user.name, user._id)\"\r\n    >\r\n      @if(user.name === \"Application Docs\"){\r\n        <div class=\"user-avatar\" [ngClass]=\"'avatar-' + user.color\">\r\n          <span class=\"initials\"><i class=\"pi pi-user\"></i></span>\r\n        </div>\r\n      }@else {\r\n        <div class=\"user-avatar\" [ngClass]=\"'avatar-' + user.color\">\r\n          <span class=\"initials\">{{ user.initials }}</span>\r\n        </div>\r\n      }\r\n      <div class=\"user-info\">\r\n        <div class=\"username\">{{ user.name }}</div>\r\n        <div class=\"document-counts\">\r\n        <span style=\"color : #16A34A;\"> {{ user.approved }} approved </span><span>/ {{ user.pending }} outstanding</span>\r\n        </div>\r\n      </div>\r\n     \r\n    </div>\r\n    \r\n    <!-- Show message when filtered list is empty -->\r\n    <div *ngIf=\"filteredUserData.length === 0 && shouldShowContainer\" class=\"no-users-message\" [@slideInFromTop]>\r\n      <p>No users available for this category.</p>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".user-list-container{padding:1rem 1rem .5rem}.user-cards{display:flex;flex-wrap:wrap;transition:all .3s ease-in-out}.user-card{display:flex;align-items:center;gap:.75rem;padding:1rem;border:2px solid transparent;border-radius:8px;cursor:pointer;transition:all .2s ease;background:#fff;min-width:140px;max-width:240px;height:70px;position:relative;flex-shrink:0}.user-card:hover{box-shadow:0 4px 8px #00000026}.user-card.selected{background-color:#f8fafc;box-shadow:0 4px 8px #00000026;border-width:2px}.user-avatar{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;font-size:14px;flex-shrink:0;font-weight:400}.avatar-orange{background-color:#fef3c7;color:#b45309}.avatar-blue{background-color:#dbeafe;color:#1d4ed8}.avatar-green{background-color:#22c55e1a;color:#36aa86}.avatar-grey{background-color:#ebeced;color:#5b6676}.avatar-purple{background-color:#3b82f61a;color:#3b82f6}.user-info{flex:1;min-width:0;overflow:hidden}.username{font-weight:600;color:#1f2937;margin-bottom:.25rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}.document-counts{font-size:.875rem;color:#6b7280;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}.selection-indicator{position:absolute;top:8px;right:8px;width:20px;height:20px;background-color:#10b981;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;flex-shrink:0}.no-users-message{display:flex;justify-content:center;align-items:center;padding:2rem;background:#f8fafc;border-radius:8px;border:2px dashed #d1d5db;margin:1rem 0}.no-users-message p{color:#6b7280;font-size:.875rem;font-weight:500;margin:0;text-align:center}\n"] }]
-        }], ctorParameters: () => [{ type: DocumentHelperService }, { type: DocumentStore }, { type: DocumentQuery }, { type: UserListService }, { type: i0.ChangeDetectorRef }], propDecorators: { userList: [{
-                type: Input
-            }], categories: [{
+            args: [{ selector: 'document-search', standalone: false, template: "<div class=\"search-container\">\r\n  <div class=\"search-header\">\r\n    <h2 class=\"ml-3\">Documents</h2>  \r\n  </div>\r\n  <div class=\"search-input-wrapper\">\r\n    <i class=\"pi pi-search search-icon\"></i>\r\n    <input \r\n      type=\"text\" \r\n      [(ngModel)]=\"searchTerm\"\r\n      (ngModelChange)=\"onSearchInputChange($event)\"\r\n      class=\"search-input\"\r\n      placeholder=\"Search by document name, category, type, status or applicant name...\"\r\n      [attr.aria-label]=\"'Search documents'\"\r\n    />\r\n    <button \r\n      *ngIf=\"searchTerm\"\r\n      type=\"button\"\r\n      class=\"clear-button\"\r\n      (click)=\"onClearSearch()\"\r\n      [attr.aria-label]=\"'Clear search'\"\r\n    >\r\n      <i class=\"pi pi-times\"></i>\r\n    </button>\r\n  </div>\r\n\r\n  <button \r\n    *ngIf=\"shouldShowClearAll\"\r\n    type=\"button\"\r\n    class=\"clear-all-filters-link\"\r\n    (click)=\"onClearAllFilters()\"\r\n    [attr.aria-label]=\"'Clear all'\"\r\n  >\r\n  Clear All\r\n  <i class=\"pi pi-times\"></i>\r\n  </button>\r\n\r\n  <div class=\"filters-section\">\r\n    <button \r\n      type=\"button\"\r\n      class=\"action-button\"\r\n      (click)=\"onActionClick.emit()\"\r\n      [attr.aria-label]=\"'Open actions menu'\"\r\n    >\r\n      Upload Document\r\n    </button>\r\n    <button \r\n      type=\"button\"\r\n      class=\"action-button ml-2\"\r\n      (click)=\"onRequestClick.emit()\"\r\n      [attr.aria-label]=\"'Open request document sidebar'\"\r\n    >\r\n      Request Document\r\n    </button>\r\n  </div>\r\n</div> ", styles: [".search-container{display:flex;align-items:center;gap:1rem;width:100%;justify-content:flex-start;padding:10px}.search-input-wrapper{position:relative;flex:1;display:flex;align-items:center;max-width:50%;min-width:300px}.clear-all-filters-link{background:none;border:none;color:#0f8bfd;cursor:pointer;padding:8px 12px;border-radius:4px;font-size:16px;font-weight:500;text-decoration:none!important;transition:background-color .2s ease,color .2s ease;white-space:nowrap;flex-shrink:0;display:flex;justify-content:center;align-items:center;gap:4px}.filters-section{display:flex;align-items:center;gap:1rem;flex-shrink:0;margin-left:auto}.search-icon{position:absolute;left:12px;color:#6c757d;z-index:1}.search-input{width:100%;padding:12px 40px;border:1px solid #dee2e6;border-radius:8px;font-size:14px;outline:none;transition:border-color .2s ease,box-shadow .2s ease}.search-input:focus{border-color:#0f8bfd;box-shadow:0 0 0 3px #0f8bfd1a}.search-input::placeholder{color:#6c757d}.clear-button{position:absolute;right:12px;background:none;border:none;color:#6c757d;cursor:pointer;padding:4px;border-radius:4px;transition:background-color .2s ease,color .2s ease}.clear-button:hover{background-color:#f8f9fa;color:#495057}.action-button{background-color:#0f8bfd;color:#fff;border:none;padding:12px 24px;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:background-color .2s ease,transform .1s ease;white-space:nowrap}.action-button:hover{background-color:#0d7ae6;transform:translateY(-1px)}.action-button:active{transform:translateY(0)}.action-button:focus{outline:none;box-shadow:0 0 0 3px #0f8bfd4d}@media (max-width: 768px){.search-container{flex-direction:column;gap:.75rem}.search-input-wrapper{max-width:100%}.filters-section{width:100%;justify-content:center;gap:.5rem}.action-button{width:auto;justify-content:center}}\n"] }]
+        }], ctorParameters: () => [{ type: DocumentHelperService }, { type: DocumentQuery }], propDecorators: { contextId: [{
                 type: Input
-            }], userSelected: [{
+            }], onActionClick: [{
+                type: Output
+            }], onRequestClick: [{
                 type: Output
             }] } });
 
-class StatusCalculatorService {
-    calculateTotalCount(statusData) {
-        return statusData?.reduce((total, status) => total + (status.count ?? 0), 0) || 0;
+class ConfirmationDialogComponent {
+    confirmationService;
+    confirmationOptions = {
+        message: 'Are you sure that you want to proceed?',
+        header: '',
+        icon: '',
+        acceptLabel: 'Yes',
+        rejectLabel: 'No',
+        acceptIcon: 'pi pi-check',
+        rejectIcon: 'pi pi-times',
+        acceptButtonClass: 'btn-danger',
+        rejectButtonClass: 'btn-secondary'
+    };
+    constructor(confirmationService) {
+        this.confirmationService = confirmationService;
     }
-    calculateStatusDataWithPercentages(statusData, selectedStatus) {
-        if (!statusData)
-            return [];
-        const totalCount = this.calculateTotalCount(statusData);
-        return statusData.map((status) => ({
-            ...status,
-            percentage: totalCount > 0 ? (status.count ?? 0) / totalCount * 100 : 0,
-            isSelected: selectedStatus === status.status,
-            statusClass: status.status ? SHARED.STATUS_WITH_DASH + status.status.toLowerCase() : SHARED.EMPTY,
-            iconClass: SHARED.ICON_WITH_DASH + (status?.status?.toLowerCase() || SHARED.EMPTY)
-        }));
+    /**
+     * Shows the confirmation dialog with the specified options
+     * @param options - Configuration options for the confirmation dialog
+     * @param acceptCallback - Function to execute when user accepts
+     * @param rejectCallback - Function to execute when user rejects
+     */
+    confirm(options, acceptCallback, rejectCallback) {
+        const confirmation = {
+            message: options.message || this.confirmationOptions.message,
+            header: options.header || this.confirmationOptions.header,
+            icon: options.icon || this.confirmationOptions.icon,
+            acceptLabel: options.acceptLabel || this.confirmationOptions.acceptLabel,
+            rejectLabel: options.rejectLabel || this.confirmationOptions.rejectLabel,
+            acceptIcon: options.acceptIcon || this.confirmationOptions.acceptIcon,
+            rejectIcon: options.rejectIcon || this.confirmationOptions.rejectIcon,
+            accept: acceptCallback,
+            reject: rejectCallback
+        };
+        this.confirmationService.confirm(confirmation);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: StatusCalculatorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: StatusCalculatorService, providedIn: 'root' });
+    /**
+     * Static method to show a confirmation dialog (for components that don't want to inject this component)
+     * @param confirmationService - The ConfirmationService instance
+     * @param options - Configuration options for the confirmation dialog
+     * @param acceptCallback - Function to execute when user accepts
+     * @param rejectCallback - Function to execute when user rejects
+     */
+    static confirm(confirmationService, options, acceptCallback, rejectCallback) {
+        const defaultOptions = {
+            message: 'Are you sure that you want to proceed?',
+            header: '',
+            icon: '',
+            acceptLabel: 'Yes',
+            rejectLabel: 'No',
+            acceptIcon: 'pi pi-check',
+            rejectIcon: 'pi pi-times',
+            acceptButtonClass: 'btn-success',
+            rejectButtonClass: 'btn-secondary'
+        };
+        const confirmation = {
+            message: options.message || defaultOptions.message,
+            header: options.header || defaultOptions.header,
+            icon: options.icon || defaultOptions.icon,
+            acceptLabel: options.acceptLabel || defaultOptions.acceptLabel,
+            rejectLabel: options.rejectLabel || defaultOptions.rejectLabel,
+            acceptIcon: options.acceptIcon || defaultOptions.acceptIcon,
+            rejectIcon: options.rejectIcon || defaultOptions.rejectIcon,
+            accept: acceptCallback,
+            reject: rejectCallback
+        };
+        confirmationService.confirm(confirmation);
+    }
+    /**
+     * Static method to show a delete confirmation dialog
+     * @param confirmationService - The ConfirmationService instance
+     * @param itemName - Name of the item to be deleted
+     * @param acceptCallback - Function to execute when user accepts deletion
+     * @param rejectCallback - Function to execute when user rejects deletion
+     */
+    static confirmDelete(confirmationService, itemName, acceptCallback, rejectCallback) {
+        ConfirmationDialogComponent.confirm(confirmationService, {
+            message: `Are you sure you want to delete "${itemName}"?`,
+            header: 'Delete Confirmation',
+            acceptLabel: 'Delete',
+            rejectLabel: 'Cancel',
+            acceptButtonClass: 'btn-danger'
+        }, acceptCallback, rejectCallback);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ConfirmationDialogComponent, deps: [{ token: i3.ConfirmationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: ConfirmationDialogComponent, isStandalone: false, selector: "app-confirmation-dialog", inputs: { confirmationOptions: "confirmationOptions" }, ngImport: i0, template: "<!-- This component no longer renders a p-confirmDialog element -->\r\n<!-- The p-confirmDialog should be placed only once in the main app component -->\r\n<!-- This component now only provides methods to trigger confirmations via ConfirmationService -->\r\n", styles: [".btn-danger{background-color:#ef4444;color:#fff;border-color:#e53e3e;max-width:100px}.btn-secondary{background-color:#f3f4f6;color:#000;max-width:100px}\n"] });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ConfirmationDialogComponent, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: StatusCalculatorService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ConfirmationDialogComponent, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
-        }] });
+        }, {
+            type: Component,
+            args: [{ selector: 'app-confirmation-dialog', standalone: false, template: "<!-- This component no longer renders a p-confirmDialog element -->\r\n<!-- The p-confirmDialog should be placed only once in the main app component -->\r\n<!-- This component now only provides methods to trigger confirmations via ConfirmationService -->\r\n", styles: [".btn-danger{background-color:#ef4444;color:#fff;border-color:#e53e3e;max-width:100px}.btn-secondary{background-color:#f3f4f6;color:#000;max-width:100px}\n"] }]
+        }], ctorParameters: () => [{ type: i3.ConfirmationService }], propDecorators: { confirmationOptions: [{
+                type: Input
+            }] } });
 
-class DocumentStatusComponent {
-    documentQuery;
-    documentService;
-    statusCalculatorService;
-    contextId = SHARED.EMPTY;
-    statusData;
-    selectedStatus = null;
-    statusDataWithPercentages = [];
-    subscription = new Subscription();
-    constructor(documentQuery, documentService, statusCalculatorService) {
-        this.documentQuery = documentQuery;
-        this.documentService = documentService;
-        this.statusCalculatorService = statusCalculatorService;
+class SidebarComponent {
+    confirmationService;
+    // Flag to prevent multiple confirmations
+    isShowingConfirmation = false;
+    set visible(value) {
+        this._visible = value;
     }
-    ngOnChanges(changes) {
-        if (changes['contextId'] && !changes['contextId'].firstChange) {
-            // When contextId changes, refetch status data for the new context
-            this.refetchStatusData();
-        }
+    get visible() {
+        return this._visible;
+    }
+    _visible = false;
+    position = 'right';
+    width = SHARED.WIDTH;
+    title = SHARED.EMPTY;
+    showCloseButton = true;
+    modal = true;
+    dismissible = true;
+    styleClass = SHARED.EMPTY;
+    appendTo = 'body';
+    blockScroll = true;
+    closeIcon = SHARED.CLOSE_ICON;
+    showSaveButton = false;
+    saveButtonText = SHARED.SAVE;
+    saveButtonDisabled = false;
+    successMessage = SHARED.SUCCESS_MESSAGE;
+    errorMessage = SHARED.EMPTY;
+    hasUnsavedChanges = false;
+    visibleChange = new EventEmitter();
+    onShow = new EventEmitter();
+    onHide = new EventEmitter();
+    onSave = new EventEmitter();
+    onClose = new EventEmitter();
+    showSuccessMessage = false;
+    showErrorMessage = false;
+    destroy$ = new Subject();
+    unsavedChangesConfirmationOptions = {
+        message: SHARED.UNSAVED_CHANGES_MESSAGE,
+        acceptLabel: SHARED.YES,
+        rejectLabel: SHARED.NO,
+        acceptIcon: SHARED.ACCEPT_ICON,
+        rejectIcon: SHARED.REJECT_ICON,
+        acceptButtonClass: SHARED.ACCEPT_BUTTON_STYLE_CLASS,
+        rejectButtonClass: SHARED.REJECT_BUTTON_STYLE_CLASS
+    };
+    constructor(confirmationService) {
+        this.confirmationService = confirmationService;
     }
-    ngOnInit() {
-        this.subscription.add(this.documentQuery.selectSelectedStatus().subscribe(status => {
-            this.selectedStatus = status;
-            this.updateCalculatedStatusData();
-        }));
-        this.subscription.add(this.documentQuery.selectStatusData().subscribe(statusData => {
-            if (statusData && statusData.length > 0) {
-                this.statusData = statusData;
-                this.updateCalculatedStatusData();
-            }
-        }));
-        if (this.contextId && this.contextId !== SHARED.EMPTY) {
-            this.refetchStatusData();
+    /**
+     * Handles the onHide event from PrimeNG sidebar
+     * Only emits when actually closing, not when showing confirmation
+     */
+    onSidebarHide() {
+        if (!this.isShowingConfirmation) {
+            this.onHide.emit();
         }
     }
-    refetchStatusData() {
-        if (this.contextId && this.contextId !== SHARED.EMPTY) {
-            const currentState = this.documentQuery.getSelectionState();
-            const statusContextId = currentState.userId || null;
-            const categoryId = currentState.menuItem || null;
-            // Use the document service to refresh status data for the new context
-            this.documentService.refreshStatusData(this.contextId, statusContextId, categoryId);
+    /**
+     * Handles the visibleChange event from PrimeNG sidebar
+     * Intercepts automatic closing to show confirmation if needed
+     */
+    onVisibleChange(value) {
+        if (!value && this.hasUnsavedChanges && !this.isShowingConfirmation) {
+            this._visible = true;
+            this.showUnsavedChangesConfirmation();
+            return;
         }
+        this.visibleChange.emit(value);
     }
-    selectStatus(status) {
-        const newStatus = this.selectedStatus === status ? null : status;
-        this.documentService.setSelectedStatus(newStatus);
-    }
-    updateCalculatedStatusData() {
-        this.statusDataWithPercentages = this.statusCalculatorService.calculateStatusDataWithPercentages(this.statusData, this.selectedStatus);
-    }
-    ngOnDestroy() {
-        this.subscription.unsubscribe();
+    /**
+     * Opens the sidebar
+     */
+    open() {
+        this._visible = true;
+        this.clearMessages();
+        this.visibleChange.emit(this._visible);
+        this.onShow.emit();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentStatusComponent, deps: [{ token: DocumentQuery }, { token: DocumentHelperService }, { token: StatusCalculatorService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DocumentStatusComponent, isStandalone: false, selector: "lib-document-status", inputs: { contextId: "contextId", statusData: "statusData" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"status-summary-container\">\r\n  <div class=\"status-cards\">\r\n    \r\n    <div \r\n      *ngFor=\"let status of statusDataWithPercentages\" \r\n      class=\"status-card {{ status.statusClass }}\"\r\n      [class.selected]=\"status.isSelected\"\r\n      (click)=\"selectStatus(status.status || '')\"\r\n    >\r\n      <div class=\"status-icon {{ status.iconClass }}\">\r\n        <i [class]=\"status.icon\"></i>\r\n      </div>\r\n      <div class=\"status-info\">\r\n          <div class=\"status-count\">{{ status.count }}</div>\r\n          <div class=\"status-name\">{{ status.status }}</div>\r\n          \r\n      </div>\r\n    </div>\r\n  </div>\r\n  \r\n  <div class=\"progress-bar-container\">\r\n    <div class=\"progress-bar\">\r\n      <div \r\n        *ngFor=\"let status of statusDataWithPercentages\" \r\n        class=\"progress-segment\"\r\n        [style.width.%]=\"status.percentage\"\r\n        [style.background-color]=\"status.color\"\r\n      ></div>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".status-summary-container{padding:1rem;padding-top:0}.status-cards{display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:1.5rem}.status-card{display:flex;align-items:center;gap:.75rem;padding:.7rem;border-radius:8px;background:#fff;box-shadow:0 2px 4px #0000001a;min-width:150px;flex:1;cursor:pointer;transition:all .2s ease;border:2px solid transparent}.status-card:hover{transform:translateY(-2px);box-shadow:0 4px 8px #00000026}.status-card.selected{border-width:3px!important;border-style:solid!important;box-shadow:0 4px 12px #0003}.status-card.selected.status-approved,.status-card.selected.status-uploaded{border-color:#10b981!important;background:#ecfdf5!important}.status-card.selected.status-pending{border-color:#6b7280!important;background:#f8fafc!important}.status-card.selected.status-reviewing{border-color:#f59e0b!important;background:#fffbeb!important}.status-card.selected.status-rejected{border-color:#ef4444!important;background:#fff1f2!important}.status-card.selected.status-alert{border-color:#dc2626!important;background:#ef4444!important}.status-card.status-approved{background:#ecfdf5}.status-card.status-approved .status-name{color:#065f46}.status-card.status-approved .status-count{color:#047857}.status-card.status-uploaded{background:#ecfdf5}.status-card.status-uploaded .status-name{color:#065f46}.status-card.status-uploaded .status-count{color:#047857}.status-card.status-pending{background:#f8fafc}.status-card.status-pending .status-name{color:#475569}.status-card.status-pending .status-count{color:#334155}.status-card.status-reviewing{background:#fffbeb}.status-card.status-reviewing .status-name{color:#92400e}.status-card.status-reviewing .status-count{color:#a16207}.status-card.status-rejected{background:#fff1f2}.status-card.status-rejected .status-name{color:#be123c}.status-card.status-rejected .status-count{color:#e11d48}.status-card.status-alert{background:#ef4444}.status-card.status-alert .status-name,.status-card.status-alert .status-count{color:#fff}.status-icon{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;color:#fff}.icon-approved,.icon-uploaded{background-color:#10b981}.icon-pending{background-color:#6b7280}.icon-reviewing{background-color:#f59e0b}.icon-rejected{background-color:#ef4444}.icon-alert{background-color:#dc2626}.status-info{flex:1}.status-name{font-weight:600;color:#1f2937;margin-bottom:.25rem}.status-count{font-size:1.2rem;font-weight:700;color:#374151}.progress-bar-container{margin-top:1rem}.progress-bar{height:8px;background-color:#e5e7eb;border-radius:4px;overflow:hidden;display:flex}.progress-segment{height:100%;transition:width .3s ease}\n"], dependencies: [{ kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentStatusComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-document-status', standalone: false, template: "<div class=\"status-summary-container\">\r\n  <div class=\"status-cards\">\r\n    \r\n    <div \r\n      *ngFor=\"let status of statusDataWithPercentages\" \r\n      class=\"status-card {{ status.statusClass }}\"\r\n      [class.selected]=\"status.isSelected\"\r\n      (click)=\"selectStatus(status.status || '')\"\r\n    >\r\n      <div class=\"status-icon {{ status.iconClass }}\">\r\n        <i [class]=\"status.icon\"></i>\r\n      </div>\r\n      <div class=\"status-info\">\r\n          <div class=\"status-count\">{{ status.count }}</div>\r\n          <div class=\"status-name\">{{ status.status }}</div>\r\n          \r\n      </div>\r\n    </div>\r\n  </div>\r\n  \r\n  <div class=\"progress-bar-container\">\r\n    <div class=\"progress-bar\">\r\n      <div \r\n        *ngFor=\"let status of statusDataWithPercentages\" \r\n        class=\"progress-segment\"\r\n        [style.width.%]=\"status.percentage\"\r\n        [style.background-color]=\"status.color\"\r\n      ></div>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".status-summary-container{padding:1rem;padding-top:0}.status-cards{display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:1.5rem}.status-card{display:flex;align-items:center;gap:.75rem;padding:.7rem;border-radius:8px;background:#fff;box-shadow:0 2px 4px #0000001a;min-width:150px;flex:1;cursor:pointer;transition:all .2s ease;border:2px solid transparent}.status-card:hover{transform:translateY(-2px);box-shadow:0 4px 8px #00000026}.status-card.selected{border-width:3px!important;border-style:solid!important;box-shadow:0 4px 12px #0003}.status-card.selected.status-approved,.status-card.selected.status-uploaded{border-color:#10b981!important;background:#ecfdf5!important}.status-card.selected.status-pending{border-color:#6b7280!important;background:#f8fafc!important}.status-card.selected.status-reviewing{border-color:#f59e0b!important;background:#fffbeb!important}.status-card.selected.status-rejected{border-color:#ef4444!important;background:#fff1f2!important}.status-card.selected.status-alert{border-color:#dc2626!important;background:#ef4444!important}.status-card.status-approved{background:#ecfdf5}.status-card.status-approved .status-name{color:#065f46}.status-card.status-approved .status-count{color:#047857}.status-card.status-uploaded{background:#ecfdf5}.status-card.status-uploaded .status-name{color:#065f46}.status-card.status-uploaded .status-count{color:#047857}.status-card.status-pending{background:#f8fafc}.status-card.status-pending .status-name{color:#475569}.status-card.status-pending .status-count{color:#334155}.status-card.status-reviewing{background:#fffbeb}.status-card.status-reviewing .status-name{color:#92400e}.status-card.status-reviewing .status-count{color:#a16207}.status-card.status-rejected{background:#fff1f2}.status-card.status-rejected .status-name{color:#be123c}.status-card.status-rejected .status-count{color:#e11d48}.status-card.status-alert{background:#ef4444}.status-card.status-alert .status-name,.status-card.status-alert .status-count{color:#fff}.status-icon{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;color:#fff}.icon-approved,.icon-uploaded{background-color:#10b981}.icon-pending{background-color:#6b7280}.icon-reviewing{background-color:#f59e0b}.icon-rejected{background-color:#ef4444}.icon-alert{background-color:#dc2626}.status-info{flex:1}.status-name{font-weight:600;color:#1f2937;margin-bottom:.25rem}.status-count{font-size:1.2rem;font-weight:700;color:#374151}.progress-bar-container{margin-top:1rem}.progress-bar{height:8px;background-color:#e5e7eb;border-radius:4px;overflow:hidden;display:flex}.progress-segment{height:100%;transition:width .3s ease}\n"] }]
-        }], ctorParameters: () => [{ type: DocumentQuery }, { type: DocumentHelperService }, { type: StatusCalculatorService }], propDecorators: { contextId: [{
-                type: Input
-            }], statusData: [{
-                type: Input
-            }] } });
-
-class DocumentSearchComponent {
-    documentHelperService;
-    documentQuery;
-    SHARED = SHARED;
-    contextId = SHARED.EMPTY;
-    onActionClick = new EventEmitter();
-    onRequestClick = new EventEmitter();
-    searchTerm = SHARED.EMPTY;
-    destroy$ = new Subject();
-    searchSubject = new Subject();
-    hasActiveFilters = false;
-    constructor(documentHelperService, documentQuery) {
-        this.documentHelperService = documentHelperService;
-        this.documentQuery = documentQuery;
+    /**
+     * Closes the sidebar
+     */
+    close() {
+        this._visible = false;
+        this.clearMessages();
+        this.visibleChange.emit(this._visible);
+        this.onHide.emit();
     }
-    ngOnInit() {
-        this.setupSearchSubscription();
-        this.setupFilterSubscription();
+    /**
+     * Handles escape key press
+     * Shows confirmation if there are unsaved changes
+     */
+    handleEscapeKey(event) {
+        if (this.visible) {
+            event.preventDefault();
+            this.handleClose();
+        }
     }
-    ngOnDestroy() {
-        this.destroy$.next();
-        this.destroy$.complete();
+    /**
+     * Handles backdrop click events
+     * Prevents default PrimeNG behavior and shows confirmation if needed
+     */
+    handleBackdropClick(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.handleClose();
     }
     /**
-     * Sets up the search input subscription with debouncing
+     * Handles all closing scenarios (backdrop click, escape key, close button, etc.)
+     * This is the single entry point for all closing logic
      */
-    setupSearchSubscription() {
-        const searchSubject = new Subject();
-        searchSubject.pipe(takeUntil(this.destroy$), debounceTime$1(500), distinctUntilChanged$1()).subscribe(searchTerm => {
-            this.onSearchChange(searchTerm);
-        });
-        this.searchSubject = searchSubject;
+    handleClose() {
+        if (this.hasUnsavedChanges && !this.isShowingConfirmation) {
+            this.showUnsavedChangesConfirmation();
+        }
+        else {
+            this.close();
+        }
     }
     /**
-     * Sets up subscription to monitor all filter states
+     * Shows confirmation dialog for unsaved changes
      */
-    setupFilterSubscription() {
-        this.documentQuery.selectSelectionState().pipe(takeUntil(this.destroy$)).subscribe(selectionState => {
-            this.hasActiveFilters = Boolean(selectionState.searchKey ||
-                selectionState.userId ||
-                selectionState.status ||
-                selectionState.menuItem);
+    showUnsavedChangesConfirmation() {
+        if (this.isShowingConfirmation) {
+            return;
+        }
+        this.isShowingConfirmation = true;
+        ConfirmationDialogComponent.confirm(this.confirmationService, this.unsavedChangesConfirmationOptions, () => {
+            this.isShowingConfirmation = false;
+            this.close();
+            this.onClose.emit();
+        }, () => {
+            this.isShowingConfirmation = false;
         });
     }
     /**
-     * Handles search term changes from ngModel
-     * @param searchTerm - The search term entered by the user
+     * Shows success message and closes sidebar after delay
      */
-    onSearchInputChange(searchTerm) {
-        this.searchSubject.next(searchTerm);
+    showSuccess() {
+        this.showSuccessMessage = true;
+        this.showErrorMessage = false;
+        setTimeout(() => {
+            this.close();
+        }, 2000);
     }
     /**
-     * Handles search term changes
-     * @param searchTerm - The search term entered by the user
+     * Shows error message
      */
-    onSearchChange(searchTerm) {
-        const normalizedSearchTerm = searchTerm?.trim() || null;
-        this.documentHelperService.setSearchKey(normalizedSearchTerm);
+    showError(message) {
+        this.showErrorMessage = true;
+        this.showSuccessMessage = false;
+        this.errorMessage = message || SHARED.EMPTY;
     }
     /**
-     * Clears the search input
+     * Clears all messages
      */
-    onClearSearch() {
-        this.searchTerm = SHARED.EMPTY;
-        this.documentHelperService.setSearchKey(null);
+    clearMessages() {
+        this.showSuccessMessage = false;
+        this.showErrorMessage = false;
     }
     /**
-     * Clears all filters including search, menu item, user, and status selections
+     * Checks if there are unsaved changes
+     * @returns True if there are unsaved changes, false otherwise
      */
-    onClearAllFilters() {
-        this.searchTerm = SHARED.EMPTY;
-        this.documentHelperService.clearSelectionState();
+    checkForUnsavedChanges() {
+        return this.hasUnsavedChanges;
     }
     /**
-     * Determines if the Clear All button should be visible
+     * Lifecycle hook that is called when component is destroyed.
+     * Cleans up subscriptions.
      */
-    get shouldShowClearAll() {
-        return this.hasActiveFilters;
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentSearchComponent, deps: [{ token: DocumentHelperService }, { token: DocumentQuery }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DocumentSearchComponent, isStandalone: false, selector: "document-search", inputs: { contextId: "contextId" }, outputs: { onActionClick: "onActionClick", onRequestClick: "onRequestClick" }, ngImport: i0, template: "<div class=\"search-container\">\r\n  <div class=\"search-input-wrapper\">\r\n    <i class=\"pi pi-search search-icon\"></i>\r\n    <input \r\n      type=\"text\" \r\n      [(ngModel)]=\"searchTerm\"\r\n      (ngModelChange)=\"onSearchInputChange($event)\"\r\n      class=\"search-input\"\r\n      placeholder=\"Search by document name, category, type, status or applicant name...\"\r\n      [attr.aria-label]=\"'Search documents'\"\r\n    />\r\n    <button \r\n      *ngIf=\"searchTerm\"\r\n      type=\"button\"\r\n      class=\"clear-button\"\r\n      (click)=\"onClearSearch()\"\r\n      [attr.aria-label]=\"'Clear search'\"\r\n    >\r\n      <i class=\"pi pi-times\"></i>\r\n    </button>\r\n  </div>\r\n\r\n  <button \r\n    *ngIf=\"shouldShowClearAll\"\r\n    type=\"button\"\r\n    class=\"clear-all-filters-link\"\r\n    (click)=\"onClearAllFilters()\"\r\n    [attr.aria-label]=\"'Clear all'\"\r\n  >\r\n  Clear All\r\n  <i class=\"pi pi-times\"></i>\r\n  </button>\r\n\r\n  <div class=\"filters-section\">\r\n    <button \r\n      type=\"button\"\r\n      class=\"action-button\"\r\n      (click)=\"onActionClick.emit()\"\r\n      [attr.aria-label]=\"'Open actions menu'\"\r\n    >\r\n      Upload Document\r\n    </button>\r\n    <button \r\n      type=\"button\"\r\n      class=\"action-button ml-2\"\r\n      (click)=\"onRequestClick.emit()\"\r\n      [attr.aria-label]=\"'Open request document sidebar'\"\r\n    >\r\n      Request Document\r\n    </button>\r\n  </div>\r\n</div> ", styles: [".search-container{display:flex;align-items:center;gap:1rem;width:100%;justify-content:flex-start;padding:10px}.search-input-wrapper{position:relative;flex:1;display:flex;align-items:center;max-width:50%;min-width:300px}.clear-all-filters-link{background:none;border:none;color:#0f8bfd;cursor:pointer;padding:8px 12px;border-radius:4px;font-size:16px;font-weight:500;text-decoration:none!important;transition:background-color .2s ease,color .2s ease;white-space:nowrap;flex-shrink:0;display:flex;justify-content:center;align-items:center;gap:4px}.filters-section{display:flex;align-items:center;gap:1rem;flex-shrink:0;margin-left:auto}.search-icon{position:absolute;left:12px;color:#6c757d;z-index:1}.search-input{width:100%;padding:12px 40px;border:1px solid #dee2e6;border-radius:8px;font-size:14px;outline:none;transition:border-color .2s ease,box-shadow .2s ease}.search-input:focus{border-color:#0f8bfd;box-shadow:0 0 0 3px #0f8bfd1a}.search-input::placeholder{color:#6c757d}.clear-button{position:absolute;right:12px;background:none;border:none;color:#6c757d;cursor:pointer;padding:4px;border-radius:4px;transition:background-color .2s ease,color .2s ease}.clear-button:hover{background-color:#f8f9fa;color:#495057}.action-button{background-color:#0f8bfd;color:#fff;border:none;padding:12px 24px;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:background-color .2s ease,transform .1s ease;white-space:nowrap}.action-button:hover{background-color:#0d7ae6;transform:translateY(-1px)}.action-button:active{transform:translateY(0)}.action-button:focus{outline:none;box-shadow:0 0 0 3px #0f8bfd4d}@media (max-width: 768px){.search-container{flex-direction:column;gap:.75rem}.search-input-wrapper{max-width:100%}.filters-section{width:100%;justify-content:center;gap:.5rem}.action-button{width:auto;justify-content:center}}\n"], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i9$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: i9$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i9$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SidebarComponent, deps: [{ token: i3.ConfirmationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: SidebarComponent, isStandalone: false, selector: "lib-sidebar", inputs: { visible: "visible", position: "position", width: "width", title: "title", showCloseButton: "showCloseButton", modal: "modal", dismissible: "dismissible", styleClass: "styleClass", appendTo: "appendTo", blockScroll: "blockScroll", closeIcon: "closeIcon", showSaveButton: "showSaveButton", saveButtonText: "saveButtonText", saveButtonDisabled: "saveButtonDisabled", successMessage: "successMessage", errorMessage: "errorMessage", hasUnsavedChanges: "hasUnsavedChanges" }, outputs: { visibleChange: "visibleChange", onShow: "onShow", onHide: "onHide", onSave: "onSave", onClose: "onClose" }, host: { listeners: { "document:keydown.escape": "handleEscapeKey($event)" } }, ngImport: i0, template: "<!-- PrimeNG Sidebar with proper backdrop handling -->\r\n<div *ngIf=\"visible\" class=\"backdrop-shadow\" (click)=\"handleClose()\"></div>\r\n\r\n<p-sidebar \r\n  [(visible)]=\"visible\"\r\n  [position]=\"position\"\r\n  [style]=\"{width: width}\"\r\n  [dismissible]=\"true\"\r\n  [showCloseIcon]=\"false\"\r\n  [appendTo]=\"'body'\"\r\n  [blockScroll]=\"blockScroll\"\r\n  (visibleChange)=\"onVisibleChange($event)\"\r\n  (onShow)=\"onShow.emit()\"\r\n  (onHide)=\"onSidebarHide()\"\r\n>\r\n  <ng-template pTemplate=\"header\" *ngIf=\"title || showCloseButton || showSaveButton\">\r\n    <div class=\"sidebar-header\">\r\n      <h3 *ngIf=\"title\" class=\"sidebar-title\">{{ title }}</h3>\r\n      <div class=\"header-content\">\r\n        <ng-content select=\"[header]\"></ng-content>\r\n        \r\n        <p-messages \r\n          *ngIf=\"showSuccessMessage\"\r\n          severity=\"success\"\r\n          [closable]=\"false\"\r\n          [style]=\"{'margin-bottom': '0.5rem'}\"\r\n          class=\"ml-3\"\r\n        >\r\n          <ng-template pTemplate=\"message\">\r\n            <span>{{ successMessage }}</span>\r\n          </ng-template>\r\n        </p-messages>\r\n        \r\n        <p-messages \r\n          *ngIf=\"showErrorMessage\"\r\n          severity=\"error\"\r\n          [closable]=\"false\"\r\n          [style]=\"{'margin-bottom': '0.5rem'}\"\r\n          class=\"ml-3\"\r\n        >\r\n          <ng-template pTemplate=\"message\">\r\n            <span>{{ errorMessage }}</span>\r\n          </ng-template>\r\n        </p-messages>\r\n\r\n        <div class=\"header-actions mr-3\">\r\n          <button \r\n            *ngIf=\"showSaveButton\"\r\n            pButton \r\n            type=\"button\" \r\n            [label]=\"saveButtonText\"\r\n            [disabled]=\"saveButtonDisabled\"\r\n            class=\"p-button-primary\"\r\n            (click)=\"onSave.emit()\"\r\n          ></button>\r\n\r\n          <button \r\n            *ngIf=\"showCloseButton\"\r\n            pButton \r\n            type=\"button\" \r\n            icon=\"pi pi-times\"\r\n            class=\"p-button-text p-button-rounded\"\r\n            (click)=\"handleClose()\"\r\n          ></button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n\r\n  <ng-template pTemplate=\"content\">\r\n    <div class=\"sidebar-content\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </ng-template>\r\n</p-sidebar>\r\n", styles: [":host{display:block}.backdrop-shadow{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;z-index:1000}.sidebar-header{display:flex;justify-content:flex-end;align-items:center;padding:0;width:100%;gap:1rem}.sidebar-header ::ng-deep .p-messages .p-message-success{margin-left:2rem;font-size:15px}.sidebar-header ::ng-deep .p-messages .p-message-wrapper{padding:1rem}.sidebar-title{margin:0;font-size:1.25rem;font-weight:600;color:#212529;flex:0 1 auto;white-space:nowrap;min-width:0}.header-content{display:flex;align-items:center;gap:1rem;justify-content:space-between;width:100%}.header-actions{display:flex;align-items:center;gap:.5rem;margin-left:auto;margin-right:0}.close-button{background:none;border:none;color:#6c757d;cursor:pointer;padding:.5rem;border-radius:.375rem;transition:all .2s ease;display:flex;align-items:center;justify-content:center;min-width:2rem;min-height:2rem;margin-right:.5rem}.close-button:hover{background-color:#e9ecef;color:#495057}.close-button:focus{outline:none;box-shadow:0 0 0 3px #0f8bfd4d}.close-button i{font-size:1rem}.sidebar-content{height:100%;overflow-y:auto;padding:0}.header-actions .p-button-text.p-button-rounded{width:2rem;height:2rem;border-radius:50%}.header-actions .p-button-text.p-button-rounded:hover{background-color:#0000001a}::ng-deep .p-sidebar .p-sidebar-header{border-bottom:1px solid #e9ecef;margin-bottom:1rem;background-color:#f8f9fa}::ng-deep .p-sidebar .p-sidebar-content{padding:0 1.5rem 1.5rem;height:calc(100% - 80px);overflow-y:auto}::ng-deep .p-sidebar.p-sidebar-right .p-sidebar-content{padding-left:1.5rem;padding-right:1.5rem}::ng-deep .p-sidebar.p-sidebar-left .p-sidebar-content{padding-left:1.5rem;padding-right:1.5rem}@media (max-width: 768px){::ng-deep .p-sidebar{width:100%!important;max-width:100%!important}::ng-deep .p-sidebar .p-sidebar-header{padding:1rem 1rem 0}::ng-deep .p-sidebar .p-sidebar-content{padding:0 1rem 1rem}}\n"], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: i4.Sidebar, selector: "p-sidebar", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "component", type: i5$1.Messages, selector: "p-messages", inputs: ["value", "closable", "style", "styleClass", "enableService", "key", "escape", "severity", "showTransitionOptions", "hideTransitionOptions"], outputs: ["valueChange", "onClose"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentSearchComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SidebarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'document-search', standalone: false, template: "<div class=\"search-container\">\r\n  <div class=\"search-input-wrapper\">\r\n    <i class=\"pi pi-search search-icon\"></i>\r\n    <input \r\n      type=\"text\" \r\n      [(ngModel)]=\"searchTerm\"\r\n      (ngModelChange)=\"onSearchInputChange($event)\"\r\n      class=\"search-input\"\r\n      placeholder=\"Search by document name, category, type, status or applicant name...\"\r\n      [attr.aria-label]=\"'Search documents'\"\r\n    />\r\n    <button \r\n      *ngIf=\"searchTerm\"\r\n      type=\"button\"\r\n      class=\"clear-button\"\r\n      (click)=\"onClearSearch()\"\r\n      [attr.aria-label]=\"'Clear search'\"\r\n    >\r\n      <i class=\"pi pi-times\"></i>\r\n    </button>\r\n  </div>\r\n\r\n  <button \r\n    *ngIf=\"shouldShowClearAll\"\r\n    type=\"button\"\r\n    class=\"clear-all-filters-link\"\r\n    (click)=\"onClearAllFilters()\"\r\n    [attr.aria-label]=\"'Clear all'\"\r\n  >\r\n  Clear All\r\n  <i class=\"pi pi-times\"></i>\r\n  </button>\r\n\r\n  <div class=\"filters-section\">\r\n    <button \r\n      type=\"button\"\r\n      class=\"action-button\"\r\n      (click)=\"onActionClick.emit()\"\r\n      [attr.aria-label]=\"'Open actions menu'\"\r\n    >\r\n      Upload Document\r\n    </button>\r\n    <button \r\n      type=\"button\"\r\n      class=\"action-button ml-2\"\r\n      (click)=\"onRequestClick.emit()\"\r\n      [attr.aria-label]=\"'Open request document sidebar'\"\r\n    >\r\n      Request Document\r\n    </button>\r\n  </div>\r\n</div> ", styles: [".search-container{display:flex;align-items:center;gap:1rem;width:100%;justify-content:flex-start;padding:10px}.search-input-wrapper{position:relative;flex:1;display:flex;align-items:center;max-width:50%;min-width:300px}.clear-all-filters-link{background:none;border:none;color:#0f8bfd;cursor:pointer;padding:8px 12px;border-radius:4px;font-size:16px;font-weight:500;text-decoration:none!important;transition:background-color .2s ease,color .2s ease;white-space:nowrap;flex-shrink:0;display:flex;justify-content:center;align-items:center;gap:4px}.filters-section{display:flex;align-items:center;gap:1rem;flex-shrink:0;margin-left:auto}.search-icon{position:absolute;left:12px;color:#6c757d;z-index:1}.search-input{width:100%;padding:12px 40px;border:1px solid #dee2e6;border-radius:8px;font-size:14px;outline:none;transition:border-color .2s ease,box-shadow .2s ease}.search-input:focus{border-color:#0f8bfd;box-shadow:0 0 0 3px #0f8bfd1a}.search-input::placeholder{color:#6c757d}.clear-button{position:absolute;right:12px;background:none;border:none;color:#6c757d;cursor:pointer;padding:4px;border-radius:4px;transition:background-color .2s ease,color .2s ease}.clear-button:hover{background-color:#f8f9fa;color:#495057}.action-button{background-color:#0f8bfd;color:#fff;border:none;padding:12px 24px;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:background-color .2s ease,transform .1s ease;white-space:nowrap}.action-button:hover{background-color:#0d7ae6;transform:translateY(-1px)}.action-button:active{transform:translateY(0)}.action-button:focus{outline:none;box-shadow:0 0 0 3px #0f8bfd4d}@media (max-width: 768px){.search-container{flex-direction:column;gap:.75rem}.search-input-wrapper{max-width:100%}.filters-section{width:100%;justify-content:center;gap:.5rem}.action-button{width:auto;justify-content:center}}\n"] }]
-        }], ctorParameters: () => [{ type: DocumentHelperService }, { type: DocumentQuery }], propDecorators: { contextId: [{
+            args: [{ selector: 'lib-sidebar', standalone: false, template: "<!-- PrimeNG Sidebar with proper backdrop handling -->\r\n<div *ngIf=\"visible\" class=\"backdrop-shadow\" (click)=\"handleClose()\"></div>\r\n\r\n<p-sidebar \r\n  [(visible)]=\"visible\"\r\n  [position]=\"position\"\r\n  [style]=\"{width: width}\"\r\n  [dismissible]=\"true\"\r\n  [showCloseIcon]=\"false\"\r\n  [appendTo]=\"'body'\"\r\n  [blockScroll]=\"blockScroll\"\r\n  (visibleChange)=\"onVisibleChange($event)\"\r\n  (onShow)=\"onShow.emit()\"\r\n  (onHide)=\"onSidebarHide()\"\r\n>\r\n  <ng-template pTemplate=\"header\" *ngIf=\"title || showCloseButton || showSaveButton\">\r\n    <div class=\"sidebar-header\">\r\n      <h3 *ngIf=\"title\" class=\"sidebar-title\">{{ title }}</h3>\r\n      <div class=\"header-content\">\r\n        <ng-content select=\"[header]\"></ng-content>\r\n        \r\n        <p-messages \r\n          *ngIf=\"showSuccessMessage\"\r\n          severity=\"success\"\r\n          [closable]=\"false\"\r\n          [style]=\"{'margin-bottom': '0.5rem'}\"\r\n          class=\"ml-3\"\r\n        >\r\n          <ng-template pTemplate=\"message\">\r\n            <span>{{ successMessage }}</span>\r\n          </ng-template>\r\n        </p-messages>\r\n        \r\n        <p-messages \r\n          *ngIf=\"showErrorMessage\"\r\n          severity=\"error\"\r\n          [closable]=\"false\"\r\n          [style]=\"{'margin-bottom': '0.5rem'}\"\r\n          class=\"ml-3\"\r\n        >\r\n          <ng-template pTemplate=\"message\">\r\n            <span>{{ errorMessage }}</span>\r\n          </ng-template>\r\n        </p-messages>\r\n\r\n        <div class=\"header-actions mr-3\">\r\n          <button \r\n            *ngIf=\"showSaveButton\"\r\n            pButton \r\n            type=\"button\" \r\n            [label]=\"saveButtonText\"\r\n            [disabled]=\"saveButtonDisabled\"\r\n            class=\"p-button-primary\"\r\n            (click)=\"onSave.emit()\"\r\n          ></button>\r\n\r\n          <button \r\n            *ngIf=\"showCloseButton\"\r\n            pButton \r\n            type=\"button\" \r\n            icon=\"pi pi-times\"\r\n            class=\"p-button-text p-button-rounded\"\r\n            (click)=\"handleClose()\"\r\n          ></button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n\r\n  <ng-template pTemplate=\"content\">\r\n    <div class=\"sidebar-content\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </ng-template>\r\n</p-sidebar>\r\n", styles: [":host{display:block}.backdrop-shadow{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;z-index:1000}.sidebar-header{display:flex;justify-content:flex-end;align-items:center;padding:0;width:100%;gap:1rem}.sidebar-header ::ng-deep .p-messages .p-message-success{margin-left:2rem;font-size:15px}.sidebar-header ::ng-deep .p-messages .p-message-wrapper{padding:1rem}.sidebar-title{margin:0;font-size:1.25rem;font-weight:600;color:#212529;flex:0 1 auto;white-space:nowrap;min-width:0}.header-content{display:flex;align-items:center;gap:1rem;justify-content:space-between;width:100%}.header-actions{display:flex;align-items:center;gap:.5rem;margin-left:auto;margin-right:0}.close-button{background:none;border:none;color:#6c757d;cursor:pointer;padding:.5rem;border-radius:.375rem;transition:all .2s ease;display:flex;align-items:center;justify-content:center;min-width:2rem;min-height:2rem;margin-right:.5rem}.close-button:hover{background-color:#e9ecef;color:#495057}.close-button:focus{outline:none;box-shadow:0 0 0 3px #0f8bfd4d}.close-button i{font-size:1rem}.sidebar-content{height:100%;overflow-y:auto;padding:0}.header-actions .p-button-text.p-button-rounded{width:2rem;height:2rem;border-radius:50%}.header-actions .p-button-text.p-button-rounded:hover{background-color:#0000001a}::ng-deep .p-sidebar .p-sidebar-header{border-bottom:1px solid #e9ecef;margin-bottom:1rem;background-color:#f8f9fa}::ng-deep .p-sidebar .p-sidebar-content{padding:0 1.5rem 1.5rem;height:calc(100% - 80px);overflow-y:auto}::ng-deep .p-sidebar.p-sidebar-right .p-sidebar-content{padding-left:1.5rem;padding-right:1.5rem}::ng-deep .p-sidebar.p-sidebar-left .p-sidebar-content{padding-left:1.5rem;padding-right:1.5rem}@media (max-width: 768px){::ng-deep .p-sidebar{width:100%!important;max-width:100%!important}::ng-deep .p-sidebar .p-sidebar-header{padding:1rem 1rem 0}::ng-deep .p-sidebar .p-sidebar-content{padding:0 1rem 1rem}}\n"] }]
+        }], ctorParameters: () => [{ type: i3.ConfirmationService }], propDecorators: { visible: [{
                 type: Input
-            }], onActionClick: [{
+            }], position: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], showCloseButton: [{
+                type: Input
+            }], modal: [{
+                type: Input
+            }], dismissible: [{
+                type: Input
+            }], styleClass: [{
+                type: Input
+            }], appendTo: [{
+                type: Input
+            }], blockScroll: [{
+                type: Input
+            }], closeIcon: [{
+                type: Input
+            }], showSaveButton: [{
+                type: Input
+            }], saveButtonText: [{
+                type: Input
+            }], saveButtonDisabled: [{
+                type: Input
+            }], successMessage: [{
+                type: Input
+            }], errorMessage: [{
+                type: Input
+            }], hasUnsavedChanges: [{
+                type: Input
+            }], visibleChange: [{
                 type: Output
-            }], onRequestClick: [{
+            }], onShow: [{
+                type: Output
+            }], onHide: [{
                 type: Output
+            }], onSave: [{
+                type: Output
+            }], onClose: [{
+                type: Output
+            }], handleEscapeKey: [{
+                type: HostListener,
+                args: ['document:keydown.escape', ['$event']]
             }] } });
 
 /**
@@ -5069,9 +5071,10 @@ class FolderContainerComponent {
      */
     documentUploadComponent;
     /**
-     * Reference to the sidebar component
+     * References to the sidebars
      */
-    sidebarComponent;
+    uploadSidebarComponent;
+    requestSidebarComponent;
     requestDocumentComponent;
     /**
      * Tracks whether the save button should be disabled
@@ -5214,15 +5217,15 @@ class FolderContainerComponent {
     /** Request success handler */
     onRequestDocumentSuccess() {
         this.documentHelperService.refreshAllDataWithCurrentFilters(this.contextId);
-        if (this.sidebarComponent) {
-            this.sidebarComponent.showSuccess();
+        if (this.requestSidebarComponent) {
+            this.requestSidebarComponent.showSuccess();
         }
     }
     /** Request error handler */
     onRequestDocumentError(error) {
-        if (this.sidebarComponent) {
+        if (this.requestSidebarComponent) {
             const errorMessage = error?.message || SHARED.UPLOAD_FAILED;
-            this.sidebarComponent.showError(errorMessage);
+            this.requestSidebarComponent.showError(errorMessage);
         }
     }
     /** Handle unsaved changes state from request form */
@@ -5244,21 +5247,21 @@ class FolderContainerComponent {
     onDocumentUploadSuccess() {
         this.documentHelperService.refreshAllDataWithCurrentFilters(this.contextId);
         this.hasUnsavedChanges = false; // Reset after successful upload
-        if (this.sidebarComponent) {
-            this.sidebarComponent.showSuccess();
+        if (this.uploadSidebarComponent) {
+            this.uploadSidebarComponent.showSuccess();
         }
     }
     /**
      * Handles document upload error
      */
     onDocumentUploadError(error) {
-        if (this.sidebarComponent) {
+        if (this.uploadSidebarComponent) {
             const errorMessage = error?.message || SHARED.UPLOAD_FAILED;
-            this.sidebarComponent.showError(errorMessage);
+            this.uploadSidebarComponent.showError(errorMessage);
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FolderContainerComponent, deps: [{ token: DocumentQuery }, { token: DocumentHelperService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: FolderContainerComponent, isStandalone: false, selector: "lib-folder-container", inputs: { documentList: "documentList", folderList: "folderList", contextId: "contextId", userList: "userList", statusData: "statusData", categories: "categories" }, viewQueries: [{ propertyName: "documentUploadComponent", first: true, predicate: DocumentUploadComponent, descendants: true }, { propertyName: "sidebarComponent", first: true, predicate: SidebarComponent, descendants: true }, { propertyName: "requestDocumentComponent", first: true, predicate: RequestDocumentComponent, descendants: true }], ngImport: i0, template: "\r\n<document-search [contextId]=\"contextId\" (onActionClick)=\"openDocumentUploadSidebar()\" (onRequestClick)=\"openRequestDocumentSidebar()\"></document-search>\r\n<div class=\"user-list-wrapper\" [@slideInOut]=\"userListAnimationState\">\r\n  <lib-user-list [userList]=\"userList\" [categories]=\"categories\"></lib-user-list>\r\n</div>\r\n<lib-document-status [contextId]=\"contextId\" [statusData]=\"statusData\"></lib-document-status>\r\n\r\n<!-- Document Upload Sidebar -->\r\n<lib-sidebar\r\n  [(visible)]=\"isDocumentUploadSidebarOpen\"\r\n  position=\"right\"\r\n  width=\"600px\"\r\n  title=\"Upload Documents\"\r\n  [showCloseButton]=\"true\"\r\n  [showSaveButton]=\"true\"\r\n  [saveButtonText]=\"'Save'\"\r\n  [saveButtonDisabled]=\"isSaveButtonDisabled\"\r\n  [successMessage]=\"'Document Saved Successfully'\"\r\n  [hasUnsavedChanges]=\"hasUnsavedChanges\"\r\n  (onHide)=\"onDocumentUploadSidebarHide()\"\r\n  (onSave)=\"onDocumentUploadSave()\"\r\n  (onClose)=\"onDocumentUploadSidebarCloseWithUnsavedChanges()\"\r\n>\r\n  <lib-document-upload \r\n    [contextId]=\"contextId\" \r\n    (onFormValidationChange)=\"onFormValidationChange()\" \r\n    (onUploadSuccess)=\"onDocumentUploadSuccess()\"\r\n    (onUploadError)=\"onDocumentUploadError($event)\"\r\n  ></lib-document-upload>\r\n</lib-sidebar>\r\n\r\n<lib-sidebar\r\n  [(visible)]=\"isRequestDocumentSidebarOpen\"\r\n  position=\"right\"\r\n  width=\"600px\"\r\n  title=\"Request Document\"\r\n  [showCloseButton]=\"true\"\r\n  [showSaveButton]=\"true\"\r\n  [saveButtonText]=\"'Save'\"\r\n  [saveButtonDisabled]=\"isRequestSaveButtonDisabled\"\r\n  [hasUnsavedChanges]=\"requestHasUnsavedChanges\"\r\n  (onHide)=\"onRequestDocumentSidebarHide()\"\r\n  (onSave)=\"onRequestDocumentSave()\"\r\n  (onClose)=\"onRequestDocumentSidebarCloseWithUnsavedChanges()\"\r\n>\r\n  <lib-request-document\r\n    [contextId]=\"contextId\"\r\n    (onFormValidationChange)=\"onRequestFormValidationChange()\"\r\n    (onRequestSuccess)=\"onRequestDocumentSuccess()\"\r\n    (onRequestError)=\"onRequestDocumentError($event)\"\r\n    (hasUnsavedChangesChange)=\"onRequestUnsavedChange($event)\"\r\n  ></lib-request-document>\r\n</lib-sidebar>", styles: [".user-list-wrapper{overflow:hidden;margin-bottom:1rem}.user-list-wrapper ::ng-deep *{transition:opacity .2s ease-in-out}.user-list-wrapper.ng-animating{pointer-events:none}::ng-deep lib-user-list{display:block;width:100%}\n"], dependencies: [{ kind: "component", type: DocumentUploadComponent, selector: "lib-document-upload", inputs: ["contextId", "isDocumentSaveBtnClicked", "isDocumentSidebarClosed", "isFormHide", "isMultiAttachmentHidden"], outputs: ["onFormValidationChange", "onUploadSuccess", "onFilesUploaded", "hasUnsavedChangesChange", "onFileRemoved"] }, { kind: "component", type: UserListComponent, selector: "lib-user-list", inputs: ["userList", "categories"], outputs: ["userSelected"] }, { kind: "component", type: DocumentStatusComponent, selector: "lib-document-status", inputs: ["contextId", "statusData"] }, { kind: "component", type: DocumentSearchComponent, selector: "document-search", inputs: ["contextId"], outputs: ["onActionClick", "onRequestClick"] }, { kind: "component", type: SidebarComponent, selector: "lib-sidebar", inputs: ["visible", "position", "width", "title", "showCloseButton", "modal", "dismissible", "styleClass", "appendTo", "blockScroll", "closeIcon", "showSaveButton", "saveButtonText", "saveButtonDisabled", "successMessage", "errorMessage", "hasUnsavedChanges"], outputs: ["visibleChange", "onShow", "onHide", "onSave", "onClose"] }, { kind: "component", type: RequestDocumentComponent, selector: "lib-request-document", inputs: ["contextId", "isRequestSaveBtnClicked", "isRequestSidebarClosed"], outputs: ["onFormValidationChange", "onRequestSuccess", "onRequestError", "hasUnsavedChangesChange"] }], animations: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: FolderContainerComponent, isStandalone: false, selector: "lib-folder-container", inputs: { documentList: "documentList", folderList: "folderList", contextId: "contextId", userList: "userList", statusData: "statusData", categories: "categories" }, viewQueries: [{ propertyName: "documentUploadComponent", first: true, predicate: DocumentUploadComponent, descendants: true }, { propertyName: "uploadSidebarComponent", first: true, predicate: ["uploadSidebar"], descendants: true }, { propertyName: "requestSidebarComponent", first: true, predicate: ["requestSidebar"], descendants: true }, { propertyName: "requestDocumentComponent", first: true, predicate: RequestDocumentComponent, descendants: true }], ngImport: i0, template: "\r\n<document-search [contextId]=\"contextId\" (onActionClick)=\"openDocumentUploadSidebar()\" (onRequestClick)=\"openRequestDocumentSidebar()\"></document-search>\r\n<div class=\"user-list-wrapper\" [@slideInOut]=\"userListAnimationState\">\r\n  <lib-user-list [userList]=\"userList\" [categories]=\"categories\"></lib-user-list>\r\n</div>\r\n<lib-document-status [contextId]=\"contextId\" [statusData]=\"statusData\"></lib-document-status>\r\n\r\n<!-- Document Upload Sidebar -->\r\n<lib-sidebar\r\n  #uploadSidebar\r\n  [(visible)]=\"isDocumentUploadSidebarOpen\"\r\n  position=\"right\"\r\n  width=\"600px\"\r\n  title=\"Upload Documents\"\r\n  [showCloseButton]=\"true\"\r\n  [showSaveButton]=\"true\"\r\n  [saveButtonText]=\"'Save'\"\r\n  [saveButtonDisabled]=\"isSaveButtonDisabled\"\r\n  [successMessage]=\"'Document Saved Successfully'\"\r\n  [hasUnsavedChanges]=\"hasUnsavedChanges\"\r\n  (onHide)=\"onDocumentUploadSidebarHide()\"\r\n  (onSave)=\"onDocumentUploadSave()\"\r\n  (onClose)=\"onDocumentUploadSidebarCloseWithUnsavedChanges()\"\r\n>\r\n  <lib-document-upload \r\n    [contextId]=\"contextId\" \r\n    (onFormValidationChange)=\"onFormValidationChange()\" \r\n    (onUploadSuccess)=\"onDocumentUploadSuccess()\"\r\n    (onUploadError)=\"onDocumentUploadError($event)\"\r\n  ></lib-document-upload>\r\n</lib-sidebar>\r\n\r\n<lib-sidebar\r\n  #requestSidebar\r\n  [(visible)]=\"isRequestDocumentSidebarOpen\"\r\n  position=\"right\"\r\n  width=\"600px\"\r\n  title=\"Request Document\"\r\n  [showCloseButton]=\"true\"\r\n  [showSaveButton]=\"true\"\r\n  [saveButtonText]=\"'Save'\"\r\n  [successMessage]=\"'Document Requested'\"\r\n  [saveButtonDisabled]=\"isRequestSaveButtonDisabled\"\r\n  [hasUnsavedChanges]=\"requestHasUnsavedChanges\"\r\n  (onHide)=\"onRequestDocumentSidebarHide()\"\r\n  (onSave)=\"onRequestDocumentSave()\"\r\n  (onClose)=\"onRequestDocumentSidebarCloseWithUnsavedChanges()\"\r\n>\r\n  <lib-request-document\r\n    [contextId]=\"contextId\"\r\n    (onFormValidationChange)=\"onRequestFormValidationChange()\"\r\n    (onRequestSuccess)=\"onRequestDocumentSuccess()\"\r\n    (onRequestError)=\"onRequestDocumentError($event)\"\r\n    (hasUnsavedChangesChange)=\"onRequestUnsavedChange($event)\"\r\n  ></lib-request-document>\r\n</lib-sidebar>", styles: [".user-list-wrapper{overflow:hidden;margin-bottom:1rem}.user-list-wrapper ::ng-deep *{transition:opacity .2s ease-in-out}.user-list-wrapper.ng-animating{pointer-events:none}::ng-deep lib-user-list{display:block;width:100%}\n"], dependencies: [{ kind: "component", type: DocumentUploadComponent, selector: "lib-document-upload", inputs: ["contextId", "isDocumentSaveBtnClicked", "isDocumentSidebarClosed", "isFormHide", "isMultiAttachmentHidden"], outputs: ["onFormValidationChange", "onUploadSuccess", "onFilesUploaded", "hasUnsavedChangesChange", "onFileRemoved"] }, { kind: "component", type: UserListComponent, selector: "lib-user-list", inputs: ["userList", "categories"], outputs: ["userSelected"] }, { kind: "component", type: DocumentStatusComponent, selector: "lib-document-status", inputs: ["contextId", "statusData"] }, { kind: "component", type: DocumentSearchComponent, selector: "document-search", inputs: ["contextId"], outputs: ["onActionClick", "onRequestClick"] }, { kind: "component", type: SidebarComponent, selector: "lib-sidebar", inputs: ["visible", "position", "width", "title", "showCloseButton", "modal", "dismissible", "styleClass", "appendTo", "blockScroll", "closeIcon", "showSaveButton", "saveButtonText", "saveButtonDisabled", "successMessage", "errorMessage", "hasUnsavedChanges"], outputs: ["visibleChange", "onShow", "onHide", "onSave", "onClose"] }, { kind: "component", type: RequestDocumentComponent, selector: "lib-request-document", inputs: ["contextId", "isRequestSaveBtnClicked", "isRequestSidebarClosed"], outputs: ["onFormValidationChange", "onRequestSuccess", "onRequestError", "hasUnsavedChangesChange"] }], animations: [
             trigger('slideInOut', [
                 state('visible', style({
                     height: '*',
@@ -5312,7 +5315,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                                 animate('300ms cubic-bezier(0.0, 0.0, 0.2, 1)')
                             ])
                         ])
-                    ], template: "\r\n<document-search [contextId]=\"contextId\" (onActionClick)=\"openDocumentUploadSidebar()\" (onRequestClick)=\"openRequestDocumentSidebar()\"></document-search>\r\n<div class=\"user-list-wrapper\" [@slideInOut]=\"userListAnimationState\">\r\n  <lib-user-list [userList]=\"userList\" [categories]=\"categories\"></lib-user-list>\r\n</div>\r\n<lib-document-status [contextId]=\"contextId\" [statusData]=\"statusData\"></lib-document-status>\r\n\r\n<!-- Document Upload Sidebar -->\r\n<lib-sidebar\r\n  [(visible)]=\"isDocumentUploadSidebarOpen\"\r\n  position=\"right\"\r\n  width=\"600px\"\r\n  title=\"Upload Documents\"\r\n  [showCloseButton]=\"true\"\r\n  [showSaveButton]=\"true\"\r\n  [saveButtonText]=\"'Save'\"\r\n  [saveButtonDisabled]=\"isSaveButtonDisabled\"\r\n  [successMessage]=\"'Document Saved Successfully'\"\r\n  [hasUnsavedChanges]=\"hasUnsavedChanges\"\r\n  (onHide)=\"onDocumentUploadSidebarHide()\"\r\n  (onSave)=\"onDocumentUploadSave()\"\r\n  (onClose)=\"onDocumentUploadSidebarCloseWithUnsavedChanges()\"\r\n>\r\n  <lib-document-upload \r\n    [contextId]=\"contextId\" \r\n    (onFormValidationChange)=\"onFormValidationChange()\" \r\n    (onUploadSuccess)=\"onDocumentUploadSuccess()\"\r\n    (onUploadError)=\"onDocumentUploadError($event)\"\r\n  ></lib-document-upload>\r\n</lib-sidebar>\r\n\r\n<lib-sidebar\r\n  [(visible)]=\"isRequestDocumentSidebarOpen\"\r\n  position=\"right\"\r\n  width=\"600px\"\r\n  title=\"Request Document\"\r\n  [showCloseButton]=\"true\"\r\n  [showSaveButton]=\"true\"\r\n  [saveButtonText]=\"'Save'\"\r\n  [saveButtonDisabled]=\"isRequestSaveButtonDisabled\"\r\n  [hasUnsavedChanges]=\"requestHasUnsavedChanges\"\r\n  (onHide)=\"onRequestDocumentSidebarHide()\"\r\n  (onSave)=\"onRequestDocumentSave()\"\r\n  (onClose)=\"onRequestDocumentSidebarCloseWithUnsavedChanges()\"\r\n>\r\n  <lib-request-document\r\n    [contextId]=\"contextId\"\r\n    (onFormValidationChange)=\"onRequestFormValidationChange()\"\r\n    (onRequestSuccess)=\"onRequestDocumentSuccess()\"\r\n    (onRequestError)=\"onRequestDocumentError($event)\"\r\n    (hasUnsavedChangesChange)=\"onRequestUnsavedChange($event)\"\r\n  ></lib-request-document>\r\n</lib-sidebar>", styles: [".user-list-wrapper{overflow:hidden;margin-bottom:1rem}.user-list-wrapper ::ng-deep *{transition:opacity .2s ease-in-out}.user-list-wrapper.ng-animating{pointer-events:none}::ng-deep lib-user-list{display:block;width:100%}\n"] }]
+                    ], template: "\r\n<document-search [contextId]=\"contextId\" (onActionClick)=\"openDocumentUploadSidebar()\" (onRequestClick)=\"openRequestDocumentSidebar()\"></document-search>\r\n<div class=\"user-list-wrapper\" [@slideInOut]=\"userListAnimationState\">\r\n  <lib-user-list [userList]=\"userList\" [categories]=\"categories\"></lib-user-list>\r\n</div>\r\n<lib-document-status [contextId]=\"contextId\" [statusData]=\"statusData\"></lib-document-status>\r\n\r\n<!-- Document Upload Sidebar -->\r\n<lib-sidebar\r\n  #uploadSidebar\r\n  [(visible)]=\"isDocumentUploadSidebarOpen\"\r\n  position=\"right\"\r\n  width=\"600px\"\r\n  title=\"Upload Documents\"\r\n  [showCloseButton]=\"true\"\r\n  [showSaveButton]=\"true\"\r\n  [saveButtonText]=\"'Save'\"\r\n  [saveButtonDisabled]=\"isSaveButtonDisabled\"\r\n  [successMessage]=\"'Document Saved Successfully'\"\r\n  [hasUnsavedChanges]=\"hasUnsavedChanges\"\r\n  (onHide)=\"onDocumentUploadSidebarHide()\"\r\n  (onSave)=\"onDocumentUploadSave()\"\r\n  (onClose)=\"onDocumentUploadSidebarCloseWithUnsavedChanges()\"\r\n>\r\n  <lib-document-upload \r\n    [contextId]=\"contextId\" \r\n    (onFormValidationChange)=\"onFormValidationChange()\" \r\n    (onUploadSuccess)=\"onDocumentUploadSuccess()\"\r\n    (onUploadError)=\"onDocumentUploadError($event)\"\r\n  ></lib-document-upload>\r\n</lib-sidebar>\r\n\r\n<lib-sidebar\r\n  #requestSidebar\r\n  [(visible)]=\"isRequestDocumentSidebarOpen\"\r\n  position=\"right\"\r\n  width=\"600px\"\r\n  title=\"Request Document\"\r\n  [showCloseButton]=\"true\"\r\n  [showSaveButton]=\"true\"\r\n  [saveButtonText]=\"'Save'\"\r\n  [successMessage]=\"'Document Requested'\"\r\n  [saveButtonDisabled]=\"isRequestSaveButtonDisabled\"\r\n  [hasUnsavedChanges]=\"requestHasUnsavedChanges\"\r\n  (onHide)=\"onRequestDocumentSidebarHide()\"\r\n  (onSave)=\"onRequestDocumentSave()\"\r\n  (onClose)=\"onRequestDocumentSidebarCloseWithUnsavedChanges()\"\r\n>\r\n  <lib-request-document\r\n    [contextId]=\"contextId\"\r\n    (onFormValidationChange)=\"onRequestFormValidationChange()\"\r\n    (onRequestSuccess)=\"onRequestDocumentSuccess()\"\r\n    (onRequestError)=\"onRequestDocumentError($event)\"\r\n    (hasUnsavedChangesChange)=\"onRequestUnsavedChange($event)\"\r\n  ></lib-request-document>\r\n</lib-sidebar>", styles: [".user-list-wrapper{overflow:hidden;margin-bottom:1rem}.user-list-wrapper ::ng-deep *{transition:opacity .2s ease-in-out}.user-list-wrapper.ng-animating{pointer-events:none}::ng-deep lib-user-list{display:block;width:100%}\n"] }]
         }], ctorParameters: () => [{ type: DocumentQuery }, { type: DocumentHelperService }], propDecorators: { documentList: [{
                 type: Input
             }], folderList: [{
@@ -5328,9 +5331,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
             }], documentUploadComponent: [{
                 type: ViewChild,
                 args: [DocumentUploadComponent]
-            }], sidebarComponent: [{
+            }], uploadSidebarComponent: [{
+                type: ViewChild,
+                args: ['uploadSidebar']
+            }], requestSidebarComponent: [{
                 type: ViewChild,
-                args: [SidebarComponent]
+                args: ['requestSidebar']
             }], requestDocumentComponent: [{
                 type: ViewChild,
                 args: [RequestDocumentComponent]
@@ -9941,11 +9947,11 @@ class DocumentsMenuComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentsMenuComponent, deps: [{ token: DocumentStore }, { token: DocumentQuery }, { token: DocumentMenuService }, { token: DocumentHelperService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: DocumentsMenuComponent, isStandalone: false, selector: "lib-documents-menu", inputs: { catagories: "catagories", applicationNumber: "applicationNumber", contextId: "contextId" }, outputs: { menuItemSelected: "menuItemSelected" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"document-sidebar-container h-full\">\r\n  <!-- Menu items are now used for navigation to specific sections, not for filtering documents -->\r\n  <p-card class=\"widget-menu-wrapper h-full\">\r\n    @if(applicationNumber){\r\n      <div class=\"flex align-items-center justify-content-between widget-menu-header-wrapper\">\r\n        <p class=\"mb-0 application-title-wrapper\">ID - {{applicationNumber}}</p>\r\n        <div class=\"expand-icon-wrapper\">\r\n          <i class=\"ri-arrow-left-s-line text-primary flex align-items-center justify-content-center w-full h-full\"></i>\r\n        </div>\r\n      </div>\r\n    }\r\n\r\n    <div class=\"widget-menu-container\" >\r\n      <div class=\"widget-menu-wrapper h-ful l custom-scroll\">\r\n       <p-menu [model]=\"categories\" styleClass=\"w-full md:w-15rem\">\r\n            <ng-template pTemplate=\"submenuheader\" let-item>\r\n                <span [style]=\"{\r\n                    color : '#9EA0B3'\r\n                }\">{{  item.label }} Documents</span>\r\n            </ng-template>\r\n            <ng-template pTemplate=\"item\" let-item>\r\n                <a pRipple \r\n                   class=\"flex align-items-center p-menuitem-link\"\r\n                   [class.selected-menu-item]=\"selectedMenuItemId === item._id\"\r\n                   [class.disabled-menu-item]=\"item.isSelectable === false\"\r\n                   [class.pointer-events-none]=\"item.isSelectable === false\"\r\n                   [style.opacity]=\"item.isSelectable === false ? '0.5' : '1'\"\r\n                   [style.cursor]=\"item.isSelectable === false ? 'not-allowed' : 'pointer'\"\r\n                   (click)=\"onMenuItemClick($event, item)\">\r\n                    <span [class]=\"item.icon\" class=\"text-xl\"></span>\r\n                    <span class=\"ml-2\">{{ item.label }}</span>\r\n                    <p-badge *ngIf=\"item.menuData?.shouldShowBadge\" \r\n                           class=\"ml-auto\" \r\n                           [severity]=\"item.menuData?.badgeSeverity\" \r\n                           [value]=\"item.menuData?.badgeValue\" />\r\n                </a>\r\n            </ng-template>\r\n        </p-menu>\r\n      </div>\r\n    </div>\r\n  </p-card>\r\n</div>\r\n\r\n  ", styles: [".expand-icon-wrapper{border:1px solid var(--primary-color);height:24px;width:24px;border-radius:50%;background:var(--blue-bg-light)}::ng-deep .p-badge.p-badge-success{background-color:#dcfce7;color:#16a34a;font-family:inherit;font-size:12px;font-weight:400;font-style:inherit}::ng-deep .p-badge.p-badge-danger{background-color:#fee2e2;color:#dc2626;font-family:inherit;font-size:12px;font-weight:400;font-style:inherit}::ng-deep .p-badge.p-badge-warning{background-color:#fef3c7;color:#d97706;font-family:inherit;font-size:12px;font-weight:400;font-style:inherit}::ng-deep .p-badge.p-badge-info{background-color:#e5e7eb;color:#000;font-family:inherit;font-size:12px;font-weight:400;font-style:inherit}::ng-deep .p-menu .p-menuitem>.p-menuitem-content .p-menuitem-link{color:#1f2937}@media screen and (min-width: 768px){::ng-deep .md\\:w-15rem{width:100%!important}}::ng-deep .p-menu{border:none}::ng-deep .custom-scroll{scrollbar-gutter:inherit}::ng-deep .selected-menu-item{background-color:#0066ff1a!important;color:var(--primary-color)!important;border:1px solid rgba(68,72,109,.1)!important;border-radius:10px!important}::ng-deep .selected-menu-item .text-xl{color:var(--primary-color)!important}::ng-deep .disabled-menu-item{opacity:.5!important;cursor:not-allowed!important;pointer-events:none!important}::ng-deep .disabled-menu-item .text-xl{color:#9ea0b3!important}::ng-deep .disabled-menu-item .ml-2{color:#9ea0b3!important}::ng-deep .disabled-menu-item .p-badge{opacity:.5!important}::ng-deep .p-menuitem-link:not(.selected-menu-item){background-color:#fff!important;border:none!important;border-radius:0!important}::ng-deep .p-menuitem-link:not(.selected-menu-item) .text-xl{color:var(--text-color)!important}::ng-deep .p-panelmenu .p-panelmenu-content{border:none!important}.application-title-wrapper{color:#9ea0b3;font-weight:500}.widget-menu-wrapper{margin-top:8px}.widget-menu-header-wrapper{padding:4px 4px 4px 16px}.widget-menu-container{overflow-y:auto;overflow-x:hidden}.custom-scroll{overflow-y:hidden;scrollbar-gutter:stable}.custom-scroll:hover{overflow-y:auto}::ng-deep .document-sidebar-container .p-card{height:100%;box-shadow:none}::ng-deep .document-sidebar-container .p-card .p-card-content{height:100%;padding:0!important}::ng-deep .document-sidebar-container .p-card .p-card-body{height:100%;width:100%;padding:12px 8px;border-radius:10px;border:1px solid #e5e7eb}::ng-deep .document-sidebar-container .widget-menu-wrapper .p-panelmenu-panel .p-panelmenu-expanded .p-panelmenu-content{border:none!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content{border:none;color:var(--text-color);font-weight:400!important;background-color:var(--surface-0)!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action{color:var(--text-color);font-weight:400!important;position:relative;padding:12px}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-icon-wrapper{position:absolute;right:0;top:16px;margin-right:7px;transform:rotate(90deg)!important;transition:none!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-text{max-width:75%;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal;word-break:break-all}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-menuitem-link-active{border:1px solid rgba(68,72,109,.1);border-radius:10px;padding:12px;color:var(--primary-color);background-color:#0066ff1a!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-menuitem-link-active .p-menuitem-icon{color:var(--primary-color)}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-menuitem-link-active .p-menuitem-text{color:var(--primary-color)}::ng-deep .widget-menu-wrapper .p-panelmenu .company-action-wrapper:not(.p-disabled).p-highlight .p-panelmenu-header-content{margin:12px 0!important}::ng-deep .widget-menu-wrapper .p-panelmenu .no-highlight.p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content{background-color:transparent!important;border-radius:10px;padding:12px;border-bottom:0!important;border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}::ng-deep .widget-menu-wrapper .p-panelmenu .no-highlight.p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content .p-panelmenu-header-action{padding:0!important}::ng-deep .widget-menu-wrapper .p-panelmenu .no-highlight.p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content .p-panelmenu-header-action .p-icon-wrapper{transform:rotate(180deg)!important;transition:none!important;top:0!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-content .p-menuitem>.p-menuitem-content .p-menuitem-link{background-color:#fff!important;color:var(--text-color);padding:12px 6px!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-content .p-menuitem>.p-menuitem-content .p-menuitem-link .p-menuitem-text{max-width:75%;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal;word-break:break-all}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-content .p-menuitem>.p-menuitem-content .p-menuitem-link-active{border:1px solid rgba(68,72,109,.1);border-radius:10px;padding:12px;color:var(--primary-color);box-shadow:none!important;background-color:#0066ff1a!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-content .p-menuitem>.p-menuitem-content .p-menuitem-link-active .p-menuitem-icon{color:var(--primary-color)}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-content .p-menuitem>.p-menuitem-content .p-menuitem-link-active .p-menuitem-text{color:var(--primary-color)}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-content .p-menuitem.p-focus>.p-menuitem-content{background-color:#fff!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-focus)>.p-menuitem-content .p-menuitem-link{background-color:#fff!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-content .p-menuitem>.p-menuitem-content .p-menuitem-link:not(.selected-menu-item){background-color:#fff!important;border:none!important;border-radius:0!important;color:var(--text-color)!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-content .p-menuitem>.p-menuitem-content .p-menuitem-link:not(.selected-menu-item) .p-menuitem-icon{color:var(--text-color)!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-content .p-menuitem>.p-menuitem-content .p-menuitem-link:not(.selected-menu-item) .p-menuitem-text{color:var(--text-color)!important}::ng-deep .widget-menu-wrapper .p-panelmenu-panel .p-panelmenu-expanded .p-panelmenu-content{border:1px solid rgba(68,72,109,.1)!important;border-top:0!important;border-bottom-left-radius:10px;border-bottom-right-radius:10px}::ng-deep .widget-menu-wrapper .p-panelmenu-panel .widget-separator{border-top:1px solid rgba(68,72,109,.1)!important}::ng-deep .widget-menu-wrapper .p-panelmenu-panel .widget-separator .p-panelmenu-header-content .p-panelmenu-header-action{padding:0!important}.no-documents-message{padding:12px 16px;text-align:center}.no-documents-message .text-muted{color:#9ea0b3;font-size:14px;font-style:italic}\n"], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i9$3.Badge, selector: "p-badge", inputs: ["styleClass", "style", "badgeSize", "severity", "value", "badgeDisabled", "size"] }, { kind: "component", type: i8$2.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "component", type: i9$4.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: DocumentsMenuComponent, isStandalone: false, selector: "lib-documents-menu", inputs: { catagories: "catagories", applicationNumber: "applicationNumber", contextId: "contextId" }, outputs: { menuItemSelected: "menuItemSelected" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"document-sidebar-container\">\r\n  <!-- Menu items are now used for navigation to specific sections, not for filtering documents -->\r\n  <p-card class=\"widget-menu-wrapper h-full\">\r\n    @if(applicationNumber){\r\n      <div class=\"flex align-items-center justify-content-between widget-menu-header-wrapper\">\r\n        <p class=\"mb-0 application-title-wrapper\">ID - {{applicationNumber}}</p>\r\n        <div class=\"expand-icon-wrapper\">\r\n          <i class=\"ri-arrow-left-s-line text-primary flex align-items-center justify-content-center w-full h-full\"></i>\r\n        </div>\r\n      </div>\r\n    }\r\n\r\n    <div class=\"widget-menu-container\" >\r\n      <div class=\"widget-menu-wrapper h-ful l custom-scroll\">\r\n       <p-menu [model]=\"categories\" styleClass=\"w-full md:w-15rem\">\r\n            <ng-template pTemplate=\"submenuheader\" let-item>\r\n                <span [style]=\"{\r\n                    color : '#9EA0B3'\r\n                }\">{{  item.label }} Documents</span>\r\n            </ng-template>\r\n            <ng-template pTemplate=\"item\" let-item>\r\n                <a pRipple \r\n                   class=\"flex align-items-center p-menuitem-link\"\r\n                   [class.selected-menu-item]=\"selectedMenuItemId === item._id\"\r\n                   [class.disabled-menu-item]=\"item.isSelectable === false\"\r\n                   [class.pointer-events-none]=\"item.isSelectable === false\"\r\n                   [style.opacity]=\"item.isSelectable === false ? '0.5' : '1'\"\r\n                   [style.cursor]=\"item.isSelectable === false ? 'not-allowed' : 'pointer'\"\r\n                   (click)=\"onMenuItemClick($event, item)\">\r\n                    <span [class]=\"item.icon\" class=\"text-xl\"></span>\r\n                    <span class=\"ml-2\">{{ item.label }}</span>\r\n                    <p-badge *ngIf=\"item.menuData?.shouldShowBadge\" \r\n                           class=\"ml-auto\" \r\n                           [severity]=\"item.menuData?.badgeSeverity\" \r\n                           [value]=\"item.menuData?.badgeValue\" />\r\n                </a>\r\n            </ng-template>\r\n        </p-menu>\r\n      </div>\r\n    </div>\r\n  </p-card>\r\n</div>\r\n\r\n  ", styles: [".expand-icon-wrapper{border:1px solid var(--primary-color);height:24px;width:24px;border-radius:50%;background:var(--blue-bg-light)}::ng-deep .p-badge.p-badge-success{background-color:#dcfce7;color:#16a34a;font-family:inherit;font-size:12px;font-weight:400;font-style:inherit}::ng-deep .p-badge.p-badge-danger{background-color:#fee2e2;color:#dc2626;font-family:inherit;font-size:12px;font-weight:400;font-style:inherit}::ng-deep .p-badge.p-badge-warning{background-color:#fef3c7;color:#d97706;font-family:inherit;font-size:12px;font-weight:400;font-style:inherit}::ng-deep .p-badge.p-badge-info{background-color:#e5e7eb;color:#000;font-family:inherit;font-size:12px;font-weight:400;font-style:inherit}::ng-deep .p-menu .p-menuitem>.p-menuitem-content .p-menuitem-link{color:#1f2937}@media screen and (min-width: 768px){::ng-deep .md\\:w-15rem{width:100%!important}}::ng-deep .p-menu{border:none}::ng-deep .custom-scroll{scrollbar-gutter:inherit}::ng-deep .selected-menu-item{background-color:#0066ff1a!important;color:var(--primary-color)!important;border:1px solid rgba(68,72,109,.1)!important;border-radius:10px!important}::ng-deep .selected-menu-item .text-xl{color:var(--primary-color)!important}::ng-deep .disabled-menu-item{opacity:.5!important;cursor:not-allowed!important;pointer-events:none!important}::ng-deep .disabled-menu-item .text-xl{color:#9ea0b3!important}::ng-deep .disabled-menu-item .ml-2{color:#9ea0b3!important}::ng-deep .disabled-menu-item .p-badge{opacity:.5!important}::ng-deep .p-menuitem-link:not(.selected-menu-item){background-color:#fff!important;border:none!important;border-radius:0!important}::ng-deep .p-menuitem-link:not(.selected-menu-item) .text-xl{color:var(--text-color)!important}::ng-deep .p-panelmenu .p-panelmenu-content{border:none!important}.application-title-wrapper{color:#9ea0b3;font-weight:500}.widget-menu-wrapper{margin-top:8px}.widget-menu-header-wrapper{padding:4px 4px 4px 16px}.widget-menu-container{overflow-y:auto;overflow-x:hidden}.custom-scroll{overflow-y:hidden;scrollbar-gutter:stable}.custom-scroll:hover{overflow-y:auto}::ng-deep .document-sidebar-container .p-card{height:100%;box-shadow:none}::ng-deep .document-sidebar-container .p-card .p-card-content{height:100%;padding:0!important}::ng-deep .document-sidebar-container .p-card .p-card-body{height:100%;width:100%;padding:12px 8px;border-radius:10px;border:1px solid #e5e7eb}::ng-deep .document-sidebar-container .widget-menu-wrapper .p-panelmenu-panel .p-panelmenu-expanded .p-panelmenu-content{border:none!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content{border:none;color:var(--text-color);font-weight:400!important;background-color:var(--surface-0)!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action{color:var(--text-color);font-weight:400!important;position:relative;padding:12px}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-icon-wrapper{position:absolute;right:0;top:16px;margin-right:7px;transform:rotate(90deg)!important;transition:none!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-text{max-width:75%;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal;word-break:break-all}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-menuitem-link-active{border:1px solid rgba(68,72,109,.1);border-radius:10px;padding:12px;color:var(--primary-color);background-color:#0066ff1a!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-menuitem-link-active .p-menuitem-icon{color:var(--primary-color)}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-menuitem-link-active .p-menuitem-text{color:var(--primary-color)}::ng-deep .widget-menu-wrapper .p-panelmenu .company-action-wrapper:not(.p-disabled).p-highlight .p-panelmenu-header-content{margin:12px 0!important}::ng-deep .widget-menu-wrapper .p-panelmenu .no-highlight.p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content{background-color:transparent!important;border-radius:10px;padding:12px;border-bottom:0!important;border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}::ng-deep .widget-menu-wrapper .p-panelmenu .no-highlight.p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content .p-panelmenu-header-action{padding:0!important}::ng-deep .widget-menu-wrapper .p-panelmenu .no-highlight.p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content .p-panelmenu-header-action .p-icon-wrapper{transform:rotate(180deg)!important;transition:none!important;top:0!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-content .p-menuitem>.p-menuitem-content .p-menuitem-link{background-color:#fff!important;color:var(--text-color);padding:12px 6px!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-content .p-menuitem>.p-menuitem-content .p-menuitem-link .p-menuitem-text{max-width:75%;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal;word-break:break-all}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-content .p-menuitem>.p-menuitem-content .p-menuitem-link-active{border:1px solid rgba(68,72,109,.1);border-radius:10px;padding:12px;color:var(--primary-color);box-shadow:none!important;background-color:#0066ff1a!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-content .p-menuitem>.p-menuitem-content .p-menuitem-link-active .p-menuitem-icon{color:var(--primary-color)}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-content .p-menuitem>.p-menuitem-content .p-menuitem-link-active .p-menuitem-text{color:var(--primary-color)}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-content .p-menuitem.p-focus>.p-menuitem-content{background-color:#fff!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-focus)>.p-menuitem-content .p-menuitem-link{background-color:#fff!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-content .p-menuitem>.p-menuitem-content .p-menuitem-link:not(.selected-menu-item){background-color:#fff!important;border:none!important;border-radius:0!important;color:var(--text-color)!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-content .p-menuitem>.p-menuitem-content .p-menuitem-link:not(.selected-menu-item) .p-menuitem-icon{color:var(--text-color)!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-content .p-menuitem>.p-menuitem-content .p-menuitem-link:not(.selected-menu-item) .p-menuitem-text{color:var(--text-color)!important}::ng-deep .widget-menu-wrapper .p-panelmenu-panel .p-panelmenu-expanded .p-panelmenu-content{border:1px solid rgba(68,72,109,.1)!important;border-top:0!important;border-bottom-left-radius:10px;border-bottom-right-radius:10px}::ng-deep .widget-menu-wrapper .p-panelmenu-panel .widget-separator{border-top:1px solid rgba(68,72,109,.1)!important}::ng-deep .widget-menu-wrapper .p-panelmenu-panel .widget-separator .p-panelmenu-header-content .p-panelmenu-header-action{padding:0!important}.no-documents-message{padding:12px 16px;text-align:center}.no-documents-message .text-muted{color:#9ea0b3;font-size:14px;font-style:italic}\n"], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i9$3.Badge, selector: "p-badge", inputs: ["styleClass", "style", "badgeSize", "severity", "value", "badgeDisabled", "size"] }, { kind: "component", type: i8$2.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "component", type: i9$4.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentsMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-documents-menu', standalone: false, template: "<div class=\"document-sidebar-container h-full\">\r\n  <!-- Menu items are now used for navigation to specific sections, not for filtering documents -->\r\n  <p-card class=\"widget-menu-wrapper h-full\">\r\n    @if(applicationNumber){\r\n      <div class=\"flex align-items-center justify-content-between widget-menu-header-wrapper\">\r\n        <p class=\"mb-0 application-title-wrapper\">ID - {{applicationNumber}}</p>\r\n        <div class=\"expand-icon-wrapper\">\r\n          <i class=\"ri-arrow-left-s-line text-primary flex align-items-center justify-content-center w-full h-full\"></i>\r\n        </div>\r\n      </div>\r\n    }\r\n\r\n    <div class=\"widget-menu-container\" >\r\n      <div class=\"widget-menu-wrapper h-ful l custom-scroll\">\r\n       <p-menu [model]=\"categories\" styleClass=\"w-full md:w-15rem\">\r\n            <ng-template pTemplate=\"submenuheader\" let-item>\r\n                <span [style]=\"{\r\n                    color : '#9EA0B3'\r\n                }\">{{  item.label }} Documents</span>\r\n            </ng-template>\r\n            <ng-template pTemplate=\"item\" let-item>\r\n                <a pRipple \r\n                   class=\"flex align-items-center p-menuitem-link\"\r\n                   [class.selected-menu-item]=\"selectedMenuItemId === item._id\"\r\n                   [class.disabled-menu-item]=\"item.isSelectable === false\"\r\n                   [class.pointer-events-none]=\"item.isSelectable === false\"\r\n                   [style.opacity]=\"item.isSelectable === false ? '0.5' : '1'\"\r\n                   [style.cursor]=\"item.isSelectable === false ? 'not-allowed' : 'pointer'\"\r\n                   (click)=\"onMenuItemClick($event, item)\">\r\n                    <span [class]=\"item.icon\" class=\"text-xl\"></span>\r\n                    <span class=\"ml-2\">{{ item.label }}</span>\r\n                    <p-badge *ngIf=\"item.menuData?.shouldShowBadge\" \r\n                           class=\"ml-auto\" \r\n                           [severity]=\"item.menuData?.badgeSeverity\" \r\n                           [value]=\"item.menuData?.badgeValue\" />\r\n                </a>\r\n            </ng-template>\r\n        </p-menu>\r\n      </div>\r\n    </div>\r\n  </p-card>\r\n</div>\r\n\r\n  ", styles: [".expand-icon-wrapper{border:1px solid var(--primary-color);height:24px;width:24px;border-radius:50%;background:var(--blue-bg-light)}::ng-deep .p-badge.p-badge-success{background-color:#dcfce7;color:#16a34a;font-family:inherit;font-size:12px;font-weight:400;font-style:inherit}::ng-deep .p-badge.p-badge-danger{background-color:#fee2e2;color:#dc2626;font-family:inherit;font-size:12px;font-weight:400;font-style:inherit}::ng-deep .p-badge.p-badge-warning{background-color:#fef3c7;color:#d97706;font-family:inherit;font-size:12px;font-weight:400;font-style:inherit}::ng-deep .p-badge.p-badge-info{background-color:#e5e7eb;color:#000;font-family:inherit;font-size:12px;font-weight:400;font-style:inherit}::ng-deep .p-menu .p-menuitem>.p-menuitem-content .p-menuitem-link{color:#1f2937}@media screen and (min-width: 768px){::ng-deep .md\\:w-15rem{width:100%!important}}::ng-deep .p-menu{border:none}::ng-deep .custom-scroll{scrollbar-gutter:inherit}::ng-deep .selected-menu-item{background-color:#0066ff1a!important;color:var(--primary-color)!important;border:1px solid rgba(68,72,109,.1)!important;border-radius:10px!important}::ng-deep .selected-menu-item .text-xl{color:var(--primary-color)!important}::ng-deep .disabled-menu-item{opacity:.5!important;cursor:not-allowed!important;pointer-events:none!important}::ng-deep .disabled-menu-item .text-xl{color:#9ea0b3!important}::ng-deep .disabled-menu-item .ml-2{color:#9ea0b3!important}::ng-deep .disabled-menu-item .p-badge{opacity:.5!important}::ng-deep .p-menuitem-link:not(.selected-menu-item){background-color:#fff!important;border:none!important;border-radius:0!important}::ng-deep .p-menuitem-link:not(.selected-menu-item) .text-xl{color:var(--text-color)!important}::ng-deep .p-panelmenu .p-panelmenu-content{border:none!important}.application-title-wrapper{color:#9ea0b3;font-weight:500}.widget-menu-wrapper{margin-top:8px}.widget-menu-header-wrapper{padding:4px 4px 4px 16px}.widget-menu-container{overflow-y:auto;overflow-x:hidden}.custom-scroll{overflow-y:hidden;scrollbar-gutter:stable}.custom-scroll:hover{overflow-y:auto}::ng-deep .document-sidebar-container .p-card{height:100%;box-shadow:none}::ng-deep .document-sidebar-container .p-card .p-card-content{height:100%;padding:0!important}::ng-deep .document-sidebar-container .p-card .p-card-body{height:100%;width:100%;padding:12px 8px;border-radius:10px;border:1px solid #e5e7eb}::ng-deep .document-sidebar-container .widget-menu-wrapper .p-panelmenu-panel .p-panelmenu-expanded .p-panelmenu-content{border:none!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content{border:none;color:var(--text-color);font-weight:400!important;background-color:var(--surface-0)!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action{color:var(--text-color);font-weight:400!important;position:relative;padding:12px}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-icon-wrapper{position:absolute;right:0;top:16px;margin-right:7px;transform:rotate(90deg)!important;transition:none!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-text{max-width:75%;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal;word-break:break-all}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-menuitem-link-active{border:1px solid rgba(68,72,109,.1);border-radius:10px;padding:12px;color:var(--primary-color);background-color:#0066ff1a!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-menuitem-link-active .p-menuitem-icon{color:var(--primary-color)}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-menuitem-link-active .p-menuitem-text{color:var(--primary-color)}::ng-deep .widget-menu-wrapper .p-panelmenu .company-action-wrapper:not(.p-disabled).p-highlight .p-panelmenu-header-content{margin:12px 0!important}::ng-deep .widget-menu-wrapper .p-panelmenu .no-highlight.p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content{background-color:transparent!important;border-radius:10px;padding:12px;border-bottom:0!important;border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}::ng-deep .widget-menu-wrapper .p-panelmenu .no-highlight.p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content .p-panelmenu-header-action{padding:0!important}::ng-deep .widget-menu-wrapper .p-panelmenu .no-highlight.p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content .p-panelmenu-header-action .p-icon-wrapper{transform:rotate(180deg)!important;transition:none!important;top:0!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-content .p-menuitem>.p-menuitem-content .p-menuitem-link{background-color:#fff!important;color:var(--text-color);padding:12px 6px!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-content .p-menuitem>.p-menuitem-content .p-menuitem-link .p-menuitem-text{max-width:75%;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal;word-break:break-all}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-content .p-menuitem>.p-menuitem-content .p-menuitem-link-active{border:1px solid rgba(68,72,109,.1);border-radius:10px;padding:12px;color:var(--primary-color);box-shadow:none!important;background-color:#0066ff1a!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-content .p-menuitem>.p-menuitem-content .p-menuitem-link-active .p-menuitem-icon{color:var(--primary-color)}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-content .p-menuitem>.p-menuitem-content .p-menuitem-link-active .p-menuitem-text{color:var(--primary-color)}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-content .p-menuitem.p-focus>.p-menuitem-content{background-color:#fff!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-focus)>.p-menuitem-content .p-menuitem-link{background-color:#fff!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-content .p-menuitem>.p-menuitem-content .p-menuitem-link:not(.selected-menu-item){background-color:#fff!important;border:none!important;border-radius:0!important;color:var(--text-color)!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-content .p-menuitem>.p-menuitem-content .p-menuitem-link:not(.selected-menu-item) .p-menuitem-icon{color:var(--text-color)!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-content .p-menuitem>.p-menuitem-content .p-menuitem-link:not(.selected-menu-item) .p-menuitem-text{color:var(--text-color)!important}::ng-deep .widget-menu-wrapper .p-panelmenu-panel .p-panelmenu-expanded .p-panelmenu-content{border:1px solid rgba(68,72,109,.1)!important;border-top:0!important;border-bottom-left-radius:10px;border-bottom-right-radius:10px}::ng-deep .widget-menu-wrapper .p-panelmenu-panel .widget-separator{border-top:1px solid rgba(68,72,109,.1)!important}::ng-deep .widget-menu-wrapper .p-panelmenu-panel .widget-separator .p-panelmenu-header-content .p-panelmenu-header-action{padding:0!important}.no-documents-message{padding:12px 16px;text-align:center}.no-documents-message .text-muted{color:#9ea0b3;font-size:14px;font-style:italic}\n"] }]
+            args: [{ selector: 'lib-documents-menu', standalone: false, template: "<div class=\"document-sidebar-container\">\r\n  <!-- Menu items are now used for navigation to specific sections, not for filtering documents -->\r\n  <p-card class=\"widget-menu-wrapper h-full\">\r\n    @if(applicationNumber){\r\n      <div class=\"flex align-items-center justify-content-between widget-menu-header-wrapper\">\r\n        <p class=\"mb-0 application-title-wrapper\">ID - {{applicationNumber}}</p>\r\n        <div class=\"expand-icon-wrapper\">\r\n          <i class=\"ri-arrow-left-s-line text-primary flex align-items-center justify-content-center w-full h-full\"></i>\r\n        </div>\r\n      </div>\r\n    }\r\n\r\n    <div class=\"widget-menu-container\" >\r\n      <div class=\"widget-menu-wrapper h-ful l custom-scroll\">\r\n       <p-menu [model]=\"categories\" styleClass=\"w-full md:w-15rem\">\r\n            <ng-template pTemplate=\"submenuheader\" let-item>\r\n                <span [style]=\"{\r\n                    color : '#9EA0B3'\r\n                }\">{{  item.label }} Documents</span>\r\n            </ng-template>\r\n            <ng-template pTemplate=\"item\" let-item>\r\n                <a pRipple \r\n                   class=\"flex align-items-center p-menuitem-link\"\r\n                   [class.selected-menu-item]=\"selectedMenuItemId === item._id\"\r\n                   [class.disabled-menu-item]=\"item.isSelectable === false\"\r\n                   [class.pointer-events-none]=\"item.isSelectable === false\"\r\n                   [style.opacity]=\"item.isSelectable === false ? '0.5' : '1'\"\r\n                   [style.cursor]=\"item.isSelectable === false ? 'not-allowed' : 'pointer'\"\r\n                   (click)=\"onMenuItemClick($event, item)\">\r\n                    <span [class]=\"item.icon\" class=\"text-xl\"></span>\r\n                    <span class=\"ml-2\">{{ item.label }}</span>\r\n                    <p-badge *ngIf=\"item.menuData?.shouldShowBadge\" \r\n                           class=\"ml-auto\" \r\n                           [severity]=\"item.menuData?.badgeSeverity\" \r\n                           [value]=\"item.menuData?.badgeValue\" />\r\n                </a>\r\n            </ng-template>\r\n        </p-menu>\r\n      </div>\r\n    </div>\r\n  </p-card>\r\n</div>\r\n\r\n  ", styles: [".expand-icon-wrapper{border:1px solid var(--primary-color);height:24px;width:24px;border-radius:50%;background:var(--blue-bg-light)}::ng-deep .p-badge.p-badge-success{background-color:#dcfce7;color:#16a34a;font-family:inherit;font-size:12px;font-weight:400;font-style:inherit}::ng-deep .p-badge.p-badge-danger{background-color:#fee2e2;color:#dc2626;font-family:inherit;font-size:12px;font-weight:400;font-style:inherit}::ng-deep .p-badge.p-badge-warning{background-color:#fef3c7;color:#d97706;font-family:inherit;font-size:12px;font-weight:400;font-style:inherit}::ng-deep .p-badge.p-badge-info{background-color:#e5e7eb;color:#000;font-family:inherit;font-size:12px;font-weight:400;font-style:inherit}::ng-deep .p-menu .p-menuitem>.p-menuitem-content .p-menuitem-link{color:#1f2937}@media screen and (min-width: 768px){::ng-deep .md\\:w-15rem{width:100%!important}}::ng-deep .p-menu{border:none}::ng-deep .custom-scroll{scrollbar-gutter:inherit}::ng-deep .selected-menu-item{background-color:#0066ff1a!important;color:var(--primary-color)!important;border:1px solid rgba(68,72,109,.1)!important;border-radius:10px!important}::ng-deep .selected-menu-item .text-xl{color:var(--primary-color)!important}::ng-deep .disabled-menu-item{opacity:.5!important;cursor:not-allowed!important;pointer-events:none!important}::ng-deep .disabled-menu-item .text-xl{color:#9ea0b3!important}::ng-deep .disabled-menu-item .ml-2{color:#9ea0b3!important}::ng-deep .disabled-menu-item .p-badge{opacity:.5!important}::ng-deep .p-menuitem-link:not(.selected-menu-item){background-color:#fff!important;border:none!important;border-radius:0!important}::ng-deep .p-menuitem-link:not(.selected-menu-item) .text-xl{color:var(--text-color)!important}::ng-deep .p-panelmenu .p-panelmenu-content{border:none!important}.application-title-wrapper{color:#9ea0b3;font-weight:500}.widget-menu-wrapper{margin-top:8px}.widget-menu-header-wrapper{padding:4px 4px 4px 16px}.widget-menu-container{overflow-y:auto;overflow-x:hidden}.custom-scroll{overflow-y:hidden;scrollbar-gutter:stable}.custom-scroll:hover{overflow-y:auto}::ng-deep .document-sidebar-container .p-card{height:100%;box-shadow:none}::ng-deep .document-sidebar-container .p-card .p-card-content{height:100%;padding:0!important}::ng-deep .document-sidebar-container .p-card .p-card-body{height:100%;width:100%;padding:12px 8px;border-radius:10px;border:1px solid #e5e7eb}::ng-deep .document-sidebar-container .widget-menu-wrapper .p-panelmenu-panel .p-panelmenu-expanded .p-panelmenu-content{border:none!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content{border:none;color:var(--text-color);font-weight:400!important;background-color:var(--surface-0)!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action{color:var(--text-color);font-weight:400!important;position:relative;padding:12px}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-icon-wrapper{position:absolute;right:0;top:16px;margin-right:7px;transform:rotate(90deg)!important;transition:none!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-text{max-width:75%;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal;word-break:break-all}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-menuitem-link-active{border:1px solid rgba(68,72,109,.1);border-radius:10px;padding:12px;color:var(--primary-color);background-color:#0066ff1a!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-menuitem-link-active .p-menuitem-icon{color:var(--primary-color)}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-menuitem-link-active .p-menuitem-text{color:var(--primary-color)}::ng-deep .widget-menu-wrapper .p-panelmenu .company-action-wrapper:not(.p-disabled).p-highlight .p-panelmenu-header-content{margin:12px 0!important}::ng-deep .widget-menu-wrapper .p-panelmenu .no-highlight.p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content{background-color:transparent!important;border-radius:10px;padding:12px;border-bottom:0!important;border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}::ng-deep .widget-menu-wrapper .p-panelmenu .no-highlight.p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content .p-panelmenu-header-action{padding:0!important}::ng-deep .widget-menu-wrapper .p-panelmenu .no-highlight.p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content .p-panelmenu-header-action .p-icon-wrapper{transform:rotate(180deg)!important;transition:none!important;top:0!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-content .p-menuitem>.p-menuitem-content .p-menuitem-link{background-color:#fff!important;color:var(--text-color);padding:12px 6px!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-content .p-menuitem>.p-menuitem-content .p-menuitem-link .p-menuitem-text{max-width:75%;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal;word-break:break-all}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-content .p-menuitem>.p-menuitem-content .p-menuitem-link-active{border:1px solid rgba(68,72,109,.1);border-radius:10px;padding:12px;color:var(--primary-color);box-shadow:none!important;background-color:#0066ff1a!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-content .p-menuitem>.p-menuitem-content .p-menuitem-link-active .p-menuitem-icon{color:var(--primary-color)}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-content .p-menuitem>.p-menuitem-content .p-menuitem-link-active .p-menuitem-text{color:var(--primary-color)}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-content .p-menuitem.p-focus>.p-menuitem-content{background-color:#fff!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-focus)>.p-menuitem-content .p-menuitem-link{background-color:#fff!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-content .p-menuitem>.p-menuitem-content .p-menuitem-link:not(.selected-menu-item){background-color:#fff!important;border:none!important;border-radius:0!important;color:var(--text-color)!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-content .p-menuitem>.p-menuitem-content .p-menuitem-link:not(.selected-menu-item) .p-menuitem-icon{color:var(--text-color)!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-content .p-menuitem>.p-menuitem-content .p-menuitem-link:not(.selected-menu-item) .p-menuitem-text{color:var(--text-color)!important}::ng-deep .widget-menu-wrapper .p-panelmenu-panel .p-panelmenu-expanded .p-panelmenu-content{border:1px solid rgba(68,72,109,.1)!important;border-top:0!important;border-bottom-left-radius:10px;border-bottom-right-radius:10px}::ng-deep .widget-menu-wrapper .p-panelmenu-panel .widget-separator{border-top:1px solid rgba(68,72,109,.1)!important}::ng-deep .widget-menu-wrapper .p-panelmenu-panel .widget-separator .p-panelmenu-header-content .p-panelmenu-header-action{padding:0!important}.no-documents-message{padding:12px 16px;text-align:center}.no-documents-message .text-muted{color:#9ea0b3;font-size:14px;font-style:italic}\n"] }]
         }], ctorParameters: () => [{ type: DocumentStore }, { type: DocumentQuery }, { type: DocumentMenuService }, { type: DocumentHelperService }], propDecorators: { catagories: [{
                 type: Input
             }], applicationNumber: [{