ng2-pdfjs-viewer 20.0.0 → 25.0.0

package/fesm2022/ng2-pdfjs-viewer.mjs

@@ -1,65 +1,758 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, ViewChild, Input, Output, NgModule } from '@angular/core';
+import { EventEmitter, Input, Output, ViewChild, Component, NgModule } from '@angular/core';
+import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 
+// Simplified Action Queue Manager - Single queue with readiness-based execution
+class ActionQueueManager {
+    actionQueue = [];
+    executedActions = new Map();
+    isDocumentLoaded = false;
+    isPostMessageReady = false;
+    postMessageReadiness = 0;
+    diagnosticLogs = false;
+    postMessageExecutor;
+    constructor(diagnosticLogs = false) {
+        this.diagnosticLogs = diagnosticLogs;
+    }
+    setPostMessageReady(ready, readiness = 0) {
+        this.isPostMessageReady = ready;
+        this.postMessageReadiness = readiness;
+        if (ready) {
+            this.processQueuedActions();
+        }
+    }
+    updateReadiness(readiness) {
+        if (this.postMessageReadiness !== readiness) {
+            this.postMessageReadiness = readiness;
+        }
+    }
+    // Simplified queue management - single queue with readiness levels
+    queueAction(action, readinessLevel) {
+        this.actionQueue.push({ action, readinessLevel });
+    }
+    // Legacy methods for backward compatibility - now just delegate to main queue
+    queueImmediateAction(action) {
+        this.queueAction(action, 3);
+    }
+    queueViewerReadyAction(action) {
+        this.queueAction(action, 4);
+    }
+    queueDocumentLoadedAction(action) {
+        this.queueAction(action, 5);
+    }
+    queueOnDemandAction(action) {
+        return this.executeAction(action);
+    }
+    onDocumentLoaded() {
+        this.isDocumentLoaded = true;
+        this.processQueuedActions();
+    }
+    // Process all queued actions that now meet readiness requirements
+    processQueuedActions() {
+        const executableActions = this.actionQueue.filter((item) => {
+            const canExecute = this.postMessageReadiness >= item.readinessLevel &&
+                (item.readinessLevel < 5 || this.isDocumentLoaded);
+            return canExecute;
+        });
+        // Remove executable actions from queue
+        this.actionQueue = this.actionQueue.filter((item) => {
+            return !(this.postMessageReadiness >= item.readinessLevel &&
+                (item.readinessLevel < 5 || this.isDocumentLoaded));
+        });
+        // Execute all ready actions
+        executableActions.forEach((item) => {
+            this.executeAction(item.action);
+        });
+    }
+    async executeAction(action) {
+        const result = {
+            actionId: action.id,
+            success: false,
+            timestamp: Date.now(),
+        };
+        try {
+            if (action.condition && !action.condition(null)) {
+                result.error = "Condition not met";
+                this.executedActions.set(action.id, result);
+                return result;
+            }
+            const success = await this.executeActionViaPostMessage(action);
+            result.success = success;
+            // If action has a resolver (from user interaction), call it
+            if (action.resolver) {
+                action.resolver(result);
+            }
+        }
+        catch (error) {
+            result.error = error instanceof Error ? error.message : String(error);
+            if (this.diagnosticLogs) {
+                console.error(`🔍 ActionQueueManager: Error executing action ${action.action}:`, error);
+            }
+            // If action has a resolver (from user interaction), call it with error
+            if (action.resolver) {
+                action.resolver(result);
+            }
+        }
+        this.executedActions.set(action.id, result);
+        return result;
+    }
+    async executeActionViaPostMessage(action) {
+        if (!this.postMessageExecutor) {
+            throw new Error("PostMessage executor not set");
+        }
+        await this.postMessageExecutor(action.action, action.payload);
+        return true;
+    }
+    setPostMessageExecutor(executor) {
+        this.postMessageExecutor = executor;
+    }
+    getActionStatus(actionId) {
+        const result = this.executedActions.get(actionId);
+        if (!result) {
+            const inQueue = this.actionQueue.some((item) => item.action.id === actionId);
+            return inQueue ? "pending" : "not-found";
+        }
+        return result.success ? "completed" : "failed";
+    }
+    clearQueues() {
+        this.actionQueue = [];
+        this.executedActions.clear();
+    }
+    getQueueStatus() {
+        return {
+            queuedActions: this.actionQueue.length,
+            executedActions: this.executedActions.size,
+        };
+    }
+}
+
+// Property transformation utilities
+class PropertyTransformers {
+    static transformZoom = {
+        toViewer: (zoom) => {
+            if (!zoom)
+                return "auto";
+            // Convert common zoom values to PDF.js format
+            const zoomMappings = {
+                auto: "auto",
+                "page-fit": "page-fit",
+                "page-width": "page-width",
+                "page-actual": "page-actual",
+            };
+            return zoomMappings[zoom.toLowerCase()] || zoom;
+        },
+        fromViewer: (viewerZoom) => {
+            if (typeof viewerZoom === "string")
+                return viewerZoom;
+            if (typeof viewerZoom === "number") {
+                // Convert numeric zoom to string without % to avoid feedback loop
+                // PDF.js accepts numeric strings like "1.25" directly
+                return viewerZoom.toString();
+            }
+            return "auto";
+        },
+    };
+    static transformRotation = {
+        toViewer: (rotation) => {
+            // Normalize rotation to 0, 90, 180, 270
+            return ((rotation % 360) + 360) % 360;
+        },
+        fromViewer: (viewerRotation) => {
+            return typeof viewerRotation === "number" ? viewerRotation : 0;
+        },
+    };
+    static transformCursor = {
+        toViewer: (cursor) => {
+            if (!cursor)
+                return "select";
+            const cursorMappings = {
+                select: "select",
+                hand: "hand",
+                zoom: "zoom",
+            };
+            return cursorMappings[cursor.toLowerCase()] || "select";
+        },
+        fromViewer: (viewerCursor) => {
+            return typeof viewerCursor === "string" ? viewerCursor : "select";
+        },
+    };
+    static transformScroll = {
+        toViewer: (scroll) => {
+            if (!scroll)
+                return "vertical";
+            const scrollMappings = {
+                vertical: "vertical",
+                horizontal: "horizontal",
+                wrapped: "wrapped",
+                page: "page",
+            };
+            return scrollMappings[scroll.toLowerCase()] || "vertical";
+        },
+        fromViewer: (viewerScroll) => {
+            const scrollModes = ["vertical", "horizontal", "wrapped", "page"];
+            if (typeof viewerScroll === "number") {
+                return scrollModes[viewerScroll] || "vertical";
+            }
+            return typeof viewerScroll === "string" ? viewerScroll : "vertical";
+        },
+    };
+    static transformSpread = {
+        toViewer: (spread) => {
+            if (!spread)
+                return "none";
+            const spreadMappings = {
+                none: "none",
+                odd: "odd",
+                even: "even",
+            };
+            return spreadMappings[spread.toLowerCase()] || "none";
+        },
+        fromViewer: (viewerSpread) => {
+            const spreadModes = ["none", "odd", "even"];
+            if (typeof viewerSpread === "number") {
+                return spreadModes[viewerSpread] || "none";
+            }
+            return typeof viewerSpread === "string" ? viewerSpread : "none";
+        },
+    };
+    static transformPageMode = {
+        toViewer: (pageMode) => {
+            if (!pageMode)
+                return "none";
+            const pageModeMapping = {
+                none: "none",
+                thumbs: "thumbs",
+                bookmarks: "bookmarks",
+                attachments: "attachments",
+            };
+            return pageModeMapping[pageMode.toLowerCase()] || "none";
+        },
+        fromViewer: (viewerPageMode) => {
+            return typeof viewerPageMode === "string" ? viewerPageMode : "none";
+        },
+    };
+}
+
+// Common utility functions for the PDF viewer component
+class ComponentUtils {
+    // Common PostMessage action mapping
+    static getActionForProperty(propertyName) {
+        const propertyActionMap = {
+            // Control visibility
+            showOpenFile: "show-openfile",
+            showDownload: "show-download",
+            showPrint: "show-print",
+            showFullScreen: "show-fullscreen",
+            showFind: "show-find",
+            showViewBookmark: "show-bookmark",
+            showAnnotations: "show-annotations",
+            // Mode controls
+            cursor: "set-cursor",
+            scroll: "set-scroll",
+            spread: "set-spread",
+            zoom: "set-zoom",
+            pageMode: "update-page-mode",
+            // Navigation
+            page: "set-page",
+            rotation: "set-rotation",
+            namedDest: "go-to-named-dest",
+            // Auto-actions
+            downloadOnLoad: "trigger-download",
+            printOnLoad: "trigger-print",
+            showLastPageOnLoad: "go-to-last-page",
+            rotateCW: "trigger-rotate-cw",
+            rotateCCW: "trigger-rotate-ccw",
+            // Error handling
+            errorMessage: "set-error-message",
+            errorOverride: "set-error-override",
+            errorAppend: "set-error-append",
+            // Configuration
+            locale: "set-locale",
+            useOnlyCssZoom: "set-css-zoom",
+            downloadFileName: "set-download-filename",
+            // Theme & Visual Customization
+            theme: "set-theme",
+            primaryColor: "set-primary-color",
+            backgroundColor: "set-background-color",
+            pageBorderColor: "set-page-border-color",
+            toolbarColor: "set-toolbar-color",
+            textColor: "set-text-color",
+            borderRadius: "set-border-radius",
+            customCSS: "set-custom-css",
+        };
+        // Toolbar/Sidebar group visibility
+        const groupVisibilityMap = {
+            showToolbarLeft: "show-toolbar-left",
+            showToolbarMiddle: "show-toolbar-middle",
+            showToolbarRight: "show-toolbar-right",
+            showSecondaryToolbarToggle: "show-secondary-toolbar-toggle",
+            showSidebar: "show-sidebar",
+            showSidebarLeft: "show-sidebar-left",
+            showSidebarRight: "show-sidebar-right",
+        };
+        // Layout & responsive customization
+        const layoutMap = {
+            toolbarDensity: "set-toolbar-density",
+            sidebarWidth: "set-sidebar-width",
+            toolbarPosition: "set-toolbar-position",
+            sidebarPosition: "set-sidebar-position",
+            responsiveBreakpoint: "set-responsive-breakpoint",
+        };
+        return (propertyActionMap[propertyName] ||
+            groupVisibilityMap[propertyName] ||
+            layoutMap[propertyName] ||
+            null);
+    }
+    // Event handler cleanup utility
+    static cleanupEventHandlers(component) {
+        // Clean up webviewerloaded handler
+        if (component._webviewerLoadedHandler) {
+            document.removeEventListener("webviewerloaded", component._webviewerLoadedHandler);
+        }
+        // Clean up PDF.js event handlers
+        if (component._pdfEventHandlers) {
+            const handlers = component._pdfEventHandlers;
+            const eventBus = component.PDFViewerApplication?.eventBus;
+            if (eventBus) {
+                Object.keys(handlers).forEach((eventName) => {
+                    eventBus.off(eventName, handlers[eventName]);
+                });
+            }
+        }
+    }
+}
+
+// Change origin tracking for two-way binding circular update prevention
+class ChangeOriginTracker {
+    userInitiatedChanges = new Set();
+    programmaticChanges = new Set();
+    markUserInitiated(property) {
+        this.userInitiatedChanges.add(property);
+        setTimeout(() => this.userInitiatedChanges.delete(property), 0);
+    }
+    markProgrammatic(property) {
+        this.programmaticChanges.add(property);
+        setTimeout(() => this.programmaticChanges.delete(property), 0);
+    }
+    isUserInitiated(property) {
+        return this.userInitiatedChanges.has(property);
+    }
+    isProgrammatic(property) {
+        return this.programmaticChanges.has(property);
+    }
+}
+
 class PdfJsViewerComponent {
+    // #region Component Properties
     iframe;
     static lastID = 0;
     viewerId = `ng2-pdfjs-viewer-ID${++PdfJsViewerComponent.lastID}`;
+    // #region Event Outputs
     onBeforePrint = new EventEmitter();
     onAfterPrint = new EventEmitter();
     onDocumentLoad = new EventEmitter();
     onPageChange = new EventEmitter();
+    onScaleChange = new EventEmitter();
+    onRotationChange = new EventEmitter();
+    // New high-value events for enhanced PDF viewer functionality
+    onDocumentError = new EventEmitter();
+    onDocumentInit = new EventEmitter();
+    onPagesInit = new EventEmitter();
+    onPresentationModeChanged = new EventEmitter();
+    onOpenFile = new EventEmitter();
+    onFind = new EventEmitter();
+    onUpdateFindMatchesCount = new EventEmitter();
+    onMetadataLoaded = new EventEmitter();
+    onOutlineLoaded = new EventEmitter();
+    onPageRendered = new EventEmitter();
+    // New high-value events
+    onAnnotationLayerRendered = new EventEmitter();
+    onBookmarkClick = new EventEmitter();
+    onIdle = new EventEmitter();
+    // #endregion
+    // #region Basic Configuration Properties
     viewerFolder;
     externalWindow = false;
-    target = '_blank';
+    target = "_blank";
     showSpinner = true;
     downloadFileName;
-    openFile = true;
-    download = true;
-    startDownload;
-    viewBookmark = true;
-    print = true;
-    startPrint;
-    fullScreen = true;
-    //@Input() public showFullScreen: boolean;
-    find = true;
-    zoom;
-    nameddest;
-    pagemode;
-    lastPage;
-    rotatecw;
-    rotateccw;
-    cursor;
-    scroll;
-    spread;
     locale;
     useOnlyCssZoom = false;
+    diagnosticLogs = false;
+    // #endregion
+    // #region Control Visibility Properties
+    showOpenFile = true;
+    showAnnotations = false;
+    showDownload = true;
+    showViewBookmark = true;
+    showPrint = true;
+    showFullScreen = true;
+    showFind = true;
+    // #endregion
+    // #region Auto-Action Properties
+    downloadOnLoad = false;
+    printOnLoad = false;
+    rotateCW = false;
+    rotateCCW = false;
+    showLastPageOnLoad = false;
+    // #endregion
+    // #region Navigation Properties
+    namedDest;
+    // #endregion
+    // #region Error Handling Properties
     errorOverride = false;
     errorAppend = true;
     errorMessage;
-    diagnosticLogs = true;
+    // #endregion
+    // #region Theme & Visual Customization Properties
+    theme = "light";
+    primaryColor;
+    backgroundColor;
+    pageBorderColor;
+    toolbarColor;
+    textColor;
+    borderRadius;
+    customCSS;
+    // #endregion
+    // #region Loading & Spinner Customization
+    customSpinnerTpl;
+    spinnerClass;
+    // #endregion
+    // #region Error Display Customization
+    customErrorTpl;
+    errorClass;
+    // #endregion
+    // #region Toolbar/Sidebar Group Visibility
+    showToolbarLeft = true;
+    showToolbarMiddle = true;
+    showToolbarRight = true;
+    showSecondaryToolbarToggle = true;
+    showSidebar = true;
+    showSidebarLeft = true;
+    showSidebarRight = true;
+    // #endregion
+    // #region Layout & Responsive Customization
+    toolbarDensity = "default";
+    sidebarWidth; // e.g., '280px'
+    toolbarPosition = "top";
+    sidebarPosition = "left";
+    responsiveBreakpoint;
+    // #endregion
+    // Internal loading state for overlay control
+    isLoading = true;
+    hasFirstRender = false;
+    // Internal error state for error display
+    hasError = false;
+    currentErrorMessage = "";
+    errorTemplateData = {};
+    // Helper method to get error template data
+    getErrorTemplateData() {
+        return {
+            errorMessage: this.currentErrorMessage,
+            errorClass: this.errorClass,
+            ...this.errorTemplateData,
+        };
+    }
+    // Error template button actions
+    reloadViewer() {
+        this.refresh();
+    }
+    goBack() {
+        if (window.history.length > 1) {
+            window.history.back();
+        }
+        else {
+            window.close();
+        }
+    }
+    closeViewer() {
+        window.close();
+    }
+    // #region Convenience Configuration Setters
+    set controlVisibility(config) {
+        if (config.download !== undefined)
+            this.showDownload = config.download;
+        if (config.print !== undefined)
+            this.showPrint = config.print;
+        if (config.find !== undefined)
+            this.showFind = config.find;
+        if (config.fullScreen !== undefined)
+            this.showFullScreen = config.fullScreen;
+        if (config.openFile !== undefined)
+            this.showOpenFile = config.openFile;
+        if (config.viewBookmark !== undefined)
+            this.showViewBookmark = config.viewBookmark;
+        if (config.annotations !== undefined)
+            this.showAnnotations = config.annotations;
+    }
+    set autoActions(config) {
+        if (config.downloadOnLoad !== undefined)
+            this.downloadOnLoad = config.downloadOnLoad;
+        if (config.printOnLoad !== undefined)
+            this.printOnLoad = config.printOnLoad;
+        if (config.showLastPageOnLoad !== undefined)
+            this.showLastPageOnLoad = config.showLastPageOnLoad;
+        if (config.rotateCW !== undefined)
+            this.rotateCW = config.rotateCW;
+        if (config.rotateCCW !== undefined)
+            this.rotateCCW = config.rotateCCW;
+    }
+    set errorHandling(config) {
+        if (config.override !== undefined)
+            this.errorOverride = config.override;
+        if (config.append !== undefined)
+            this.errorAppend = config.append;
+        if (config.message !== undefined)
+            this.errorMessage = config.message;
+    }
+    set viewerConfig(config) {
+        if (config.showSpinner !== undefined)
+            this.showSpinner = config.showSpinner;
+        if (config.useOnlyCssZoom !== undefined)
+            this.useOnlyCssZoom = config.useOnlyCssZoom;
+        if (config.diagnosticLogs !== undefined)
+            this.diagnosticLogs = config.diagnosticLogs;
+        if (config.locale !== undefined)
+            this.locale = config.locale;
+    }
+    set themeConfig(config) {
+        if (config.theme !== undefined)
+            this.theme = config.theme;
+        if (config.primaryColor !== undefined)
+            this.primaryColor = config.primaryColor;
+        if (config.backgroundColor !== undefined)
+            this.backgroundColor = config.backgroundColor;
+        if (config.pageBorderColor !== undefined)
+            this.pageBorderColor = config.pageBorderColor;
+        if (config.toolbarColor !== undefined)
+            this.toolbarColor = config.toolbarColor;
+        if (config.textColor !== undefined)
+            this.textColor = config.textColor;
+        if (config.borderRadius !== undefined)
+            this.borderRadius = config.borderRadius;
+        if (config.customCSS !== undefined)
+            this.customCSS = config.customCSS;
+    }
+    set groupVisibility(config) {
+        if (config.toolbarLeft !== undefined)
+            this.showToolbarLeft = config.toolbarLeft;
+        if (config.toolbarMiddle !== undefined)
+            this.showToolbarMiddle = config.toolbarMiddle;
+        if (config.toolbarRight !== undefined)
+            this.showToolbarRight = config.toolbarRight;
+        if (config.secondaryToolbarToggle !== undefined)
+            this.showSecondaryToolbarToggle = config.secondaryToolbarToggle;
+        if (config.sidebar !== undefined)
+            this.showSidebar = config.sidebar;
+        if (config.sidebarLeft !== undefined)
+            this.showSidebarLeft = config.sidebarLeft;
+        if (config.sidebarRight !== undefined)
+            this.showSidebarRight = config.sidebarRight;
+    }
+    set layoutConfig(config) {
+        if (config.toolbarDensity !== undefined)
+            this.toolbarDensity = config.toolbarDensity;
+        if (config.sidebarWidth !== undefined)
+            this.sidebarWidth = config.sidebarWidth;
+        if (config.toolbarPosition !== undefined)
+            this.toolbarPosition = config.toolbarPosition;
+        if (config.sidebarPosition !== undefined)
+            this.sidebarPosition = config.sidebarPosition;
+        if (config.responsiveBreakpoint !== undefined)
+            this.responsiveBreakpoint = config.responsiveBreakpoint;
+    }
+    // #endregion
+    // #region Helper function for deprecated properties
+    setDeprecatedProperty(oldName, newProperty, value) {
+        console.warn(`⚠️ DEPRECATED: Property "${oldName}" is deprecated. Use "${newProperty}" instead.`);
+        this[newProperty] = value;
+    }
+    // #endregion
+    // #region Deprecated Properties (Simplified)
+    /** @deprecated Use `downloadOnLoad` instead. This property will be removed in a future version. */
+    set startDownload(value) {
+        this.setDeprecatedProperty("startDownload", "downloadOnLoad", value);
+    }
+    /** @deprecated Use `printOnLoad` instead. This property will be removed in a future version. */
+    set startPrint(value) {
+        this.setDeprecatedProperty("startPrint", "printOnLoad", value);
+    }
+    /** @deprecated Use `showOpenFile` instead. This property will be removed in a future version. */
+    set openFile(value) {
+        this.setDeprecatedProperty("openFile", "showOpenFile", value);
+    }
+    /** @deprecated Use `showDownload` instead. This property will be removed in a future version. */
+    set download(value) {
+        this.setDeprecatedProperty("download", "showDownload", value);
+    }
+    /** @deprecated Use `showPrint` instead. This property will be removed in a future version. */
+    set print(value) {
+        this.setDeprecatedProperty("print", "showPrint", value);
+    }
+    /** @deprecated Use `showFullScreen` instead. This property will be removed in a future version. */
+    set fullScreen(value) {
+        this.setDeprecatedProperty("fullScreen", "showFullScreen", value);
+    }
+    /** @deprecated Use `showFind` instead. This property will be removed in a future version. */
+    set find(value) {
+        this.setDeprecatedProperty("find", "showFind", value);
+    }
+    /** @deprecated Use `showViewBookmark` instead. This property will be removed in a future version. */
+    set viewBookmark(value) {
+        this.setDeprecatedProperty("viewBookmark", "showViewBookmark", value);
+    }
+    /** @deprecated Use `showLastPageOnLoad` instead. This property will be removed in a future version. */
+    set lastPage(value) {
+        this.setDeprecatedProperty("lastPage", "showLastPageOnLoad", value);
+    }
+    // #endregion
+    // #region External Window Properties
     externalWindowOptions;
     viewerTab;
+    // #endregion
+    // #region Private Properties
     _src;
     _page;
+    isPostMessageReady = false;
+    postMessageReadiness = 0;
+    pendingInitialConfig = true;
+    initialConfigQueued = false;
+    actionQueueManager;
+    changeOriginTracker = new ChangeOriginTracker();
+    messageIdCounter = 0;
+    pendingMessages = new Map();
+    pendingChanges = [];
+    relaseUrl;
+    // #endregion
+    // #region Two-Way Binding Properties
+    // Private backing fields for two-way binding properties
+    _zoom = "auto";
+    _rotation = 0;
+    _cursor = "select";
+    _scroll = "vertical";
+    _spread = "none";
+    _pageMode = "none";
+    // Two-way binding Output events
+    zoomChange = new EventEmitter();
+    cursorChange = new EventEmitter();
+    scrollChange = new EventEmitter();
+    spreadChange = new EventEmitter();
+    pageModeChange = new EventEmitter();
+    /**
+     * Two-way binding for zoom level
+     * Supports: auto, page-fit, page-width, page-actual, percentage values (e.g., "150%")
+     */
+    get zoom() {
+        return this._zoom;
+    }
+    set zoom(value) {
+        const normalizedValue = PropertyTransformers.transformZoom.toViewer(value);
+        if (this._zoom !== normalizedValue) {
+            this.changeOriginTracker.markProgrammatic("zoom");
+            this._zoom = normalizedValue;
+            this.applyZoomToViewer(this._zoom);
+            this.zoomChange.emit(this._zoom);
+        }
+    }
+    /**
+     * One-way binding for document rotation
+     * Supports: 0, 90, 180, 270 degrees
+     */
+    set rotation(value) {
+        const normalizedValue = PropertyTransformers.transformRotation.toViewer(value);
+        if (this._rotation !== normalizedValue) {
+            this._rotation = normalizedValue;
+            this.applyRotationToViewer(this._rotation);
+        }
+    }
+    get rotation() {
+        return this._rotation;
+    }
+    /**
+     * Two-way binding for cursor mode
+     * Supports: select, hand, zoom
+     */
+    get cursor() {
+        return this._cursor;
+    }
+    set cursor(value) {
+        const normalizedValue = PropertyTransformers.transformCursor.toViewer(value);
+        if (this._cursor !== normalizedValue) {
+            this.changeOriginTracker.markProgrammatic("cursor");
+            this._cursor = normalizedValue;
+            this.applyCursorToViewer(this._cursor);
+            this.cursorChange.emit(this._cursor);
+        }
+    }
+    /**
+     * Two-way binding for scroll mode
+     * Supports: vertical, horizontal, wrapped, page
+     */
+    get scroll() {
+        return this._scroll;
+    }
+    set scroll(value) {
+        const normalizedValue = PropertyTransformers.transformScroll.toViewer(value);
+        if (this._scroll !== normalizedValue) {
+            this.changeOriginTracker.markProgrammatic("scroll");
+            this._scroll = normalizedValue;
+            this.applyScrollToViewer(this._scroll);
+            this.scrollChange.emit(this._scroll);
+        }
+    }
+    /**
+     * Two-way binding for spread mode
+     * Supports: none, odd, even
+     */
+    get spread() {
+        return this._spread;
+    }
+    set spread(value) {
+        const normalizedValue = PropertyTransformers.transformSpread.toViewer(value);
+        if (this._spread !== normalizedValue) {
+            this.changeOriginTracker.markProgrammatic("spread");
+            this._spread = normalizedValue;
+            this.applySpreadToViewer(this._spread);
+            this.spreadChange.emit(this._spread);
+        }
+    }
+    /**
+     * Two-way binding for page mode (sidebar state)
+     * Supports: none, thumbs, bookmarks, attachments
+     */
+    get pageMode() {
+        return this._pageMode;
+    }
+    set pageMode(value) {
+        const normalizedValue = PropertyTransformers.transformPageMode.toViewer(value);
+        if (this._pageMode !== normalizedValue) {
+            this.changeOriginTracker.markProgrammatic("pageMode");
+            this._pageMode = normalizedValue;
+            this.applyPageModeToViewer(this._pageMode);
+            this.pageModeChange.emit(this._pageMode);
+        }
+    }
     set page(_page) {
         this._page = _page;
-        if (this.PDFViewerApplication) {
+        if (this.PDFViewerApplication && this.PDFViewerApplication.initialized) {
             this.PDFViewerApplication.page = this._page;
         }
         else {
-            if (this.diagnosticLogs)
+            if (this.diagnosticLogs) {
                 console.warn("Document is not loaded yet!!!. Try to set page# after full load. Ignore this warning if you are not setting page# using '.' notation. (E.g. pdfViewer.page = 5;)");
+            }
         }
     }
     get page() {
-        if (this.PDFViewerApplication) {
+        if (this.PDFViewerApplication && this.PDFViewerApplication.initialized) {
             return this.PDFViewerApplication.page;
         }
         else {
-            if (this.diagnosticLogs)
+            if (this.diagnosticLogs) {
                 console.warn("Document is not loaded yet!!!. Try to retrieve page# after full load.");
+            }
+            return this._page || 1;
         }
     }
     set pdfSrc(_src) {
@@ -68,6 +761,8 @@ class PdfJsViewerComponent {
     get pdfSrc() {
         return this._src;
     }
+    // #endregion
+    // #region PDF.js Application Access Properties
     get PDFViewerApplicationOptions() {
         let pdfViewerOptions = null;
         if (this.externalWindow) {
@@ -77,7 +772,8 @@ class PdfJsViewerComponent {
         }
         else {
             if (this.iframe.nativeElement.contentWindow) {
-                pdfViewerOptions = this.iframe.nativeElement.contentWindow.PDFViewerApplicationOptions;
+                pdfViewerOptions =
+                    this.iframe.nativeElement.contentWindow.PDFViewerApplicationOptions;
             }
         }
         return pdfViewerOptions;
@@ -91,59 +787,767 @@ class PdfJsViewerComponent {
         }
         else {
             if (this.iframe.nativeElement.contentWindow) {
-                pdfViewer = this.iframe.nativeElement.contentWindow.PDFViewerApplication;
+                pdfViewer =
+                    this.iframe.nativeElement.contentWindow.PDFViewerApplication;
             }
         }
+        if (this.diagnosticLogs)
+            console.debug("PdfJsViewer: Viewer ->", pdfViewer);
         return pdfViewer;
     }
-    receiveMessage(viewerEvent) {
-        if (viewerEvent.data && viewerEvent.data.viewerId && viewerEvent.data.event) {
-            let viewerId = viewerEvent.data.viewerId;
-            let event = viewerEvent.data.event;
-            let param = viewerEvent.data.param;
-            if (this.viewerId == viewerId) {
-                if (this.onBeforePrint && event == "beforePrint") {
-                    this.onBeforePrint.emit();
+    // #endregion
+    // #endregion
+    // #region Lifecycle Methods
+    ngOnInit() {
+        // 🟢 TEST LOG - Build verification (BUILD_ID from separate file)
+        console.log("🟢 ng2-pdfjs-viewer.component.ts: TEST LOG - BUILD_ID:", window.NG2_PDF_VIEWER_BUILD_ID || "BUILD_ID_NOT_LOADED");
+        // Configure action queue manager with diagnostic logs
+        this.actionQueueManager = new ActionQueueManager(this.diagnosticLogs);
+        // Connect action queue manager to PostMessage system
+        this.actionQueueManager.setPostMessageExecutor((action, payload) => this.sendControlMessage(action, payload));
+        // Set up PostMessage listener
+        this.setupMessageListener();
+        // Load PDF for embedded views.
+        if (!this.externalWindow) {
+            this.loadPdf();
+        }
+        // Bind events.
+        this.bindToPdfJsEventBus();
+    }
+    ngAfterViewInit() {
+        // Minimal initialization - rely on event-driven readiness notifications
+    }
+    ngOnChanges(changes) {
+        if (this.PDFViewerApplication) {
+            // Only apply changes if PostMessage API is ready and viewer is initialized
+            if (this.isPostMessageReady && this.PDFViewerApplication.initialized) {
+                this.applyChanges(changes);
+            }
+            else {
+                this.pendingChanges.push(changes);
+            }
+        }
+        else {
+            this.pendingChanges.push(changes);
+        }
+    }
+    ngOnDestroy() {
+        // Clean up pending messages
+        this.pendingMessages.clear();
+        // Clean up event listeners
+        ComponentUtils.cleanupEventHandlers(this);
+        // Reset state flags
+        this.initialConfigQueued = false;
+        // Clean up URL
+        this.relaseUrl?.();
+    }
+    // #endregion
+    // #region Message Handling Methods
+    generateMessageId() {
+        return `msg_${++this.messageIdCounter}_${Date.now()}`;
+    }
+    sendControlMessage(action, payload) {
+        return new Promise((resolve, reject) => {
+            const messageId = this.generateMessageId();
+            const message = {
+                type: "control-update",
+                action,
+                payload,
+                id: messageId,
+                timestamp: Date.now(),
+            };
+            this.pendingMessages.set(messageId, { resolve, reject });
+            // Send message to iframe
+            if (this.iframe &&
+                this.iframe.nativeElement &&
+                this.iframe.nativeElement.contentWindow) {
+                this.iframe.nativeElement.contentWindow.postMessage(message, "*");
+            }
+            else {
+                this.pendingMessages.delete(messageId);
+                reject(new Error("Iframe not available"));
+            }
+        });
+    }
+    handleControlResponse(response) {
+        const pendingMessage = this.pendingMessages.get(response.id);
+        if (pendingMessage) {
+            this.pendingMessages.delete(response.id);
+            if (response.success) {
+                pendingMessage.resolve(response);
+            }
+            else {
+                pendingMessage.reject(new Error(response.error || "Unknown error"));
+            }
+        }
+    }
+    setupMessageListener() {
+        window.addEventListener("message", (event) => {
+            // Handle control responses from the viewer
+            if (event.data && event.data.type === "control-response") {
+                this.handleControlResponse(event.data);
+                return;
+            }
+            // Handle PostMessage API ready notification
+            if (event.data && event.data.type === "postmessage-ready") {
+                this.isPostMessageReady = true;
+                this.postMessageReadiness = event.data.readiness || 0;
+                // CRITICAL FIX: Process queued actions when readiness level increases
+                if (this.actionQueueManager) {
+                    this.actionQueueManager.updateReadiness(this.postMessageReadiness);
+                    this.actionQueueManager.processQueuedActions();
                 }
-                else if (this.onAfterPrint && event == "afterPrint") {
-                    this.onAfterPrint.emit();
+                // Queue all initial configurations now that PostMessage API is ready (only once)
+                if (!this.initialConfigQueued) {
+                    this.queueAllConfigurations();
+                    this.initialConfigQueued = true;
                 }
-                else if (this.onDocumentLoad && event == "pagesLoaded") {
-                    this.onDocumentLoad.emit(param);
+                // Apply any pending changes that occurred before PostMessage API was ready
+                this.applyPendingChanges();
+                return;
+            }
+            // Handle state change notifications from PostMessage wrapper
+            if (event.data && event.data.type === "state-change") {
+                this.handleStateChangeNotification(event.data);
+                return;
+            }
+            // Handle event notifications from PostMessage wrapper
+            if (event.data && event.data.type === "event-notification") {
+                this.handleEventNotification(event.data);
+                return;
+            }
+        });
+    }
+    handleStateChangeNotification(notification) {
+        const { property, value, source } = notification;
+        // Internal loading overlay control is system-driven and must be handled unconditionally
+        if (property === "loading") {
+            this.isLoading = !!value;
+            // Clear error state when loading starts
+            if (value) {
+                this.hasError = false;
+                this.currentErrorMessage = "";
+            }
+            return;
+        }
+        // Internal error state management
+        if (property === "error") {
+            this.hasError = !!value;
+            if (value && typeof value === "string") {
+                this.currentErrorMessage = value;
+                this.errorTemplateData = this.getErrorTemplateData();
+            }
+            return;
+        }
+        // Only process user-initiated changes to avoid infinite loops
+        if (source === "user" &&
+            !this.changeOriginTracker.isProgrammatic(property)) {
+            this.changeOriginTracker.markUserInitiated(property);
+            switch (property) {
+                case "cursor":
+                    if (this._cursor !== value) {
+                        this._cursor =
+                            PropertyTransformers.transformCursor.fromViewer(value);
+                        this.cursorChange.emit(this._cursor);
+                    }
+                    break;
+                case "scroll":
+                    if (this._scroll !== value) {
+                        this._scroll =
+                            PropertyTransformers.transformScroll.fromViewer(value);
+                        this.scrollChange.emit(this._scroll);
+                    }
+                    break;
+                case "spread":
+                    if (this._spread !== value) {
+                        this._spread =
+                            PropertyTransformers.transformSpread.fromViewer(value);
+                        this.spreadChange.emit(this._spread);
+                    }
+                    break;
+                case "pageMode":
+                    if (this._pageMode !== value) {
+                        this._pageMode =
+                            PropertyTransformers.transformPageMode.fromViewer(value);
+                        this.pageModeChange.emit(this._pageMode);
+                    }
+                    break;
+                case "zoom":
+                    if (this._zoom !== value) {
+                        this._zoom = PropertyTransformers.transformZoom.fromViewer(value);
+                        this.zoomChange.emit(this._zoom);
+                    }
+                    break;
+                case "rotation":
+                    if (this._rotation !== value) {
+                        this._rotation =
+                            PropertyTransformers.transformRotation.fromViewer(value);
+                    }
+                    break;
+                // Note: namedDest is now a simple input property, not a two-way binding
+                default:
+                    if (this.diagnosticLogs) {
+                        console.log(`🔍 PdfJsViewer: Unknown state change property: ${property}`);
+                    }
+            }
+        }
+    }
+    handleEventNotification(notification) {
+        const { eventName, eventData } = notification;
+        // Emit the appropriate event based on the event name
+        switch (eventName) {
+            case "documentError":
+                this.onDocumentError.emit(eventData);
+                break;
+            case "documentInit":
+                this.onDocumentInit.emit();
+                break;
+            case "pagesInit":
+                this.onPagesInit.emit(eventData);
+                break;
+            case "presentationModeChanged":
+                this.onPresentationModeChanged.emit(eventData);
+                break;
+            case "openFile":
+                this.onOpenFile.emit();
+                break;
+            case "find":
+                this.onFind.emit(eventData);
+                break;
+            case "updateFindMatchesCount":
+                this.onUpdateFindMatchesCount.emit(eventData);
+                break;
+            case "metadataLoaded":
+                this.onMetadataLoaded.emit(eventData);
+                break;
+            case "outlineLoaded":
+                this.onOutlineLoaded.emit(eventData);
+                break;
+            case "pageRendered":
+                this.onPageRendered.emit(eventData);
+                break;
+            case "annotationLayerRendered":
+                this.onAnnotationLayerRendered.emit(eventData);
+                break;
+            case "bookmarkClick":
+                this.onBookmarkClick.emit(eventData);
+                break;
+            case "idle":
+                this.onIdle.emit();
+                break;
+            default:
+                if (this.diagnosticLogs) {
+                    console.log(`🔍 PdfJsViewer: Unknown event notification: ${eventName}`);
+                }
+        }
+    }
+    // #endregion
+    // #region Property Mapping and Update Methods
+    mapPropertyToAction(propertyName) {
+        return ComponentUtils.getActionForProperty(propertyName);
+    }
+    updateViewerControl(propertyName, value) {
+        const action = this.mapPropertyToAction(propertyName);
+        if (action) {
+            // Use universal dispatcher instead of direct PostMessage
+            this.dispatchAction(action, value, "property-change");
+        }
+        else {
+            // Property is intentionally not mapped (handled via query parameters or direct API)
+        }
+    }
+    applyChanges(changes) {
+        Object.keys(changes).forEach((propertyName) => {
+            const change = changes[propertyName];
+            if (change.currentValue !== change.previousValue) {
+                // Handle auto-actions - queue for document load, don't execute immediately
+                const autoActions = [
+                    "downloadOnLoad",
+                    "printOnLoad",
+                    "showLastPageOnLoad",
+                    "rotateCW",
+                    "rotateCCW",
+                ];
+                if (autoActions.includes(propertyName)) {
+                    // Re-queue all configurations when auto-actions change
+                    this.initialConfigQueued = false;
+                    if (this.isPostMessageReady) {
+                        this.queueAllConfigurations();
+                        this.initialConfigQueued = true;
+                    }
+                    return;
                 }
-                else if (this.onPageChange && event == "pageChange") {
-                    this.onPageChange.emit(param);
+                // Use universal dispatcher for ALL actions - pure event-driven approach
+                const action = this.mapPropertyToAction(propertyName);
+                if (action) {
+                    this.dispatchAction(action, change.currentValue, "property-change");
                 }
             }
+        });
+    }
+    applyPendingChanges() {
+        // Only apply pending changes if PostMessage API is ready
+        if (!this.isPostMessageReady) {
+            return;
+        }
+        if (this.pendingChanges.length > 0) {
+            this.pendingChanges.forEach((changes, index) => {
+                this.processChangesForQueuing(changes);
+            });
+            this.pendingChanges = [];
+        }
+        else {
         }
     }
-    ngOnInit() {
-        window.addEventListener("message", this.receiveMessage.bind(this), false);
-        if (!this.externalWindow) { // Load pdf for embedded views
-            this.loadPdf();
+    processChangesForQueuing(changes) {
+        Object.keys(changes).forEach((propertyName) => {
+            const change = changes[propertyName];
+            if (change.currentValue !== change.previousValue) {
+                // Handle auto-actions - queue for document load, don't execute immediately
+                const autoActions = [
+                    "downloadOnLoad",
+                    "printOnLoad",
+                    "showLastPageOnLoad",
+                    "rotateCW",
+                    "rotateCCW",
+                ];
+                if (autoActions.includes(propertyName)) {
+                    // Re-queue all configurations when auto-actions change
+                    this.initialConfigQueued = false;
+                    if (this.isPostMessageReady) {
+                        this.queueAllConfigurations();
+                        this.initialConfigQueued = true;
+                    }
+                    return;
+                }
+                // Use universal dispatcher for ALL actions - pure event-driven approach
+                const action = this.mapPropertyToAction(propertyName);
+                if (action) {
+                    this.dispatchAction(action, change.currentValue, "property-change");
+                }
+            }
+        });
+    }
+    // #endregion
+    // #region PDF.js Event Binding Methods
+    /**
+     * Waits for the PDF.js viewer to be ready, and binds the the event bus.
+     */
+    bindToPdfJsEventBus() {
+        // Store the event listener reference so we can remove it later
+        const webviewerLoadedHandler = () => {
+            if (this.diagnosticLogs)
+                console.debug("PdfJsViewer: webviewerloaded event received");
+            // Set locale immediately when PDF.js is loaded but before it initializes
+            // https://github.com/mozilla/pdf.js/issues/11829#issuecomment-617668679
+            if (this.locale && this.iframe?.nativeElement?.contentWindow) {
+                try {
+                    const iframeWindow = this.iframe.nativeElement.contentWindow;
+                    if (iframeWindow.PDFViewerApplicationOptions) {
+                        iframeWindow.PDFViewerApplicationOptions.set("localeProperties", {
+                            lang: this.locale,
+                        });
+                        if (this.diagnosticLogs)
+                            console.debug(`PdfJsViewer: Locale set to ${this.locale} before initialization`);
+                    }
+                }
+                catch (error) {
+                    if (this.diagnosticLogs)
+                        console.debug("PdfJsViewer: Could not set locale before initialization:", error);
+                }
+            }
+            if (!this.PDFViewerApplication) {
+                if (this.diagnosticLogs)
+                    console.debug("PdfJsViewer: Viewer not yet (or no longer) available, events can not yet be bound.");
+                return;
+            }
+            // https://github.com/mozilla/pdf.js/issues/9527
+            this.PDFViewerApplication.initializedPromise.then(() => {
+                // All configurations are now handled via PostMessage system
+                // No need to call configureVisibleFeatures() anymore
+                // Apply any pending changes that occurred before initialization
+                this.applyPendingChanges();
+                const app = this.PDFViewerApplication;
+                const eventBus = app.eventBus;
+                // Store event handler references for cleanup
+                const documentLoadedHandler = () => {
+                    if (this.diagnosticLogs)
+                        console.debug("PdfJsViewer: The document has now been loaded!");
+                    this.onDocumentLoad.emit();
+                    // Queue auto-actions for this document load (not from component initialization)
+                    this.queueAutoActionsForDocumentLoad();
+                    // Execute all queued auto-actions
+                    this.actionQueueManager.onDocumentLoaded();
+                };
+                // Note: pagesInit event is now handled via the PostMessage wrapper event system
+                const pagesLoadedHandler = () => {
+                    if (this.diagnosticLogs)
+                        console.debug("PdfJsViewer: All pages have been fully loaded!");
+                    // Execute auto-print on pages loaded (ensures PDF is fully ready for printing)
+                    if (this.printOnLoad === true) {
+                        this.dispatchAction("trigger-print", true, "initial-load");
+                    }
+                };
+                const beforePrintHandler = () => {
+                    if (this.diagnosticLogs)
+                        console.debug("PdfJsViewer: The document is about to be printed!");
+                    this.onBeforePrint.emit();
+                };
+                const afterPrintHandler = () => {
+                    if (this.diagnosticLogs)
+                        console.debug("PdfJsViewer: The document has been printed!");
+                    this.onAfterPrint.emit();
+                };
+                const pageChangingHandler = (event) => {
+                    if (this.diagnosticLogs)
+                        console.debug("PdfJsViewer: The page has changed:", event.pageNumber);
+                    // Update two-way binding for page
+                    if (this._page !== event.pageNumber &&
+                        !this.changeOriginTracker.isProgrammatic("page")) {
+                        this.changeOriginTracker.markUserInitiated("page");
+                        this._page = event.pageNumber;
+                        // Note: page property uses existing setter/getter, no need to emit pageChange here
+                    }
+                    this.onPageChange.emit(event.pageNumber);
+                };
+                const rotationChangingHandler = (event) => {
+                    const newRotation = {
+                        rotation: event.pagesRotation,
+                        page: event.pageNumber,
+                    };
+                    if (this.diagnosticLogs)
+                        console.debug("PdfJsViewer: The rotation has changed!", event);
+                    // Update two-way binding for rotation
+                    const normalizedRotation = PropertyTransformers.transformRotation.fromViewer(event.pagesRotation);
+                    if (this._rotation !== normalizedRotation &&
+                        !this.changeOriginTracker.isProgrammatic("rotation")) {
+                        this.changeOriginTracker.markUserInitiated("rotation");
+                        this._rotation = normalizedRotation;
+                    }
+                    this.onRotationChange.emit(newRotation);
+                };
+                const scaleChangingHandler = (event) => {
+                    const newScale = event.scale;
+                    if (this.diagnosticLogs)
+                        console.debug("PdfJsViewer: The document has scale has changed!", newScale);
+                    // Update two-way binding for zoom
+                    const normalizedZoom = PropertyTransformers.transformZoom.fromViewer(event.scale);
+                    if (this._zoom !== normalizedZoom &&
+                        !this.changeOriginTracker.isProgrammatic("zoom")) {
+                        this.changeOriginTracker.markUserInitiated("zoom");
+                        this._zoom = normalizedZoom;
+                        this.zoomChange.emit(normalizedZoom);
+                    }
+                    this.onScaleChange.emit(newScale);
+                };
+                // Store handlers for cleanup
+                this._pdfEventHandlers = {
+                    documentloaded: documentLoadedHandler,
+                    pagesloaded: pagesLoadedHandler,
+                    beforeprint: beforePrintHandler,
+                    afterprint: afterPrintHandler,
+                    pagechanging: pageChangingHandler,
+                    rotationchanging: rotationChangingHandler,
+                    scalechanging: scaleChangingHandler,
+                };
+                // Attach event listeners
+                eventBus.on("documentloaded", documentLoadedHandler);
+                eventBus.on("pagesloaded", pagesLoadedHandler);
+                eventBus.on("beforeprint", beforePrintHandler);
+                eventBus.on("afterprint", afterPrintHandler);
+                eventBus.on("pagechanging", pageChangingHandler);
+                eventBus.on("rotationchanging", rotationChangingHandler);
+                eventBus.on("scalechanging", scaleChangingHandler);
+            });
+        };
+        // Store the handler reference for cleanup
+        this._webviewerLoadedHandler = webviewerLoadedHandler;
+        document.addEventListener("webviewerloaded", webviewerLoadedHandler);
+    }
+    // #endregion
+    // #region Configuration and Action Queue Methods
+    queueAllConfigurations() {
+        // Queue control visibility configurations (immediate actions)
+        this.queueConfiguration("showOpenFile", this.showOpenFile, "show-openfile");
+        this.queueConfiguration("showDownload", this.showDownload, "show-download");
+        this.queueConfiguration("showPrint", this.showPrint, "show-print");
+        this.queueConfiguration("showFullScreen", this.showFullScreen, "show-fullscreen");
+        this.queueConfiguration("showFind", this.showFind, "show-find");
+        this.queueConfiguration("showViewBookmark", this.showViewBookmark, "show-bookmark");
+        this.queueConfiguration("showAnnotations", this.showAnnotations, "show-annotations");
+        // Toolbar/Sidebar group visibility
+        this.queueConfiguration("showToolbarLeft", this.showToolbarLeft, "show-toolbar-left");
+        this.queueConfiguration("showToolbarMiddle", this.showToolbarMiddle, "show-toolbar-middle");
+        this.queueConfiguration("showToolbarRight", this.showToolbarRight, "show-toolbar-right");
+        this.queueConfiguration("showSecondaryToolbarToggle", this.showSecondaryToolbarToggle, "show-secondary-toolbar-toggle");
+        this.queueConfiguration("showSidebar", this.showSidebar, "show-sidebar");
+        this.queueConfiguration("showSidebarLeft", this.showSidebarLeft, "show-sidebar-left");
+        this.queueConfiguration("showSidebarRight", this.showSidebarRight, "show-sidebar-right");
+        // Layout customization
+        this.queueConfiguration("toolbarDensity", this.toolbarDensity, "set-toolbar-density");
+        if (this.sidebarWidth) {
+            this.queueConfiguration("sidebarWidth", this.sidebarWidth, "set-sidebar-width");
+        }
+        this.queueConfiguration("toolbarPosition", this.toolbarPosition, "set-toolbar-position");
+        this.queueConfiguration("sidebarPosition", this.sidebarPosition, "set-sidebar-position");
+        if (this.responsiveBreakpoint !== undefined) {
+            this.queueConfiguration("responsiveBreakpoint", this.responsiveBreakpoint, "set-responsive-breakpoint");
+        }
+        // Queue mode configurations (immediate actions)
+        if (this.cursor) {
+            this.queueConfiguration("cursor", this.cursor, "set-cursor");
+        }
+        if (this.scroll) {
+            this.queueConfiguration("scroll", this.scroll, "set-scroll");
+        }
+        if (this.spread) {
+            this.queueConfiguration("spread", this.spread, "set-spread");
+        }
+        // Queue navigation configurations (immediate actions)
+        if (this._page) {
+            this.queueConfiguration("page", this._page, "set-page");
+        }
+        if (this.zoom) {
+            this.queueConfiguration("zoom", this.zoom, "set-zoom");
+        }
+        // Note: zoom is now handled by two-way binding [(zoom)]
+        // Queue navigation configuration if specified
+        if (this.namedDest && this.namedDest.trim() !== "") {
+            this.queueConfiguration("namedDest", this.namedDest, "go-to-named-dest");
+        }
+        if (this.pageMode) {
+            this.queueConfiguration("pageMode", this.pageMode, "update-page-mode");
+        }
+        // Queue rotation configurations (immediate actions)
+        if (this.rotateCW === true) {
+            this.queueConfiguration("rotateCW", this.rotateCW, "trigger-rotate-cw");
+        }
+        if (this.rotateCCW === true) {
+            this.queueConfiguration("rotateCCW", this.rotateCCW, "trigger-rotate-ccw");
+        }
+        // Queue error handling configurations (non-auto-actions)
+        if (this.errorMessage) {
+            this.queueConfiguration("errorMessage", this.errorMessage, "set-error-message");
+        }
+        if (this.errorOverride !== undefined) {
+            this.queueConfiguration("errorOverride", this.errorOverride, "set-error-override");
+        }
+        if (this.errorAppend !== undefined) {
+            this.queueConfiguration("errorAppend", this.errorAppend, "set-error-append");
+        }
+        // Queue theme and visual customization configurations
+        // Always queue theme to ensure initial styles are applied
+        this.queueConfiguration("theme", this.theme || "light", "set-theme");
+        if (this.primaryColor) {
+            this.queueConfiguration("primaryColor", this.primaryColor, "set-primary-color");
+        }
+        if (this.backgroundColor) {
+            this.queueConfiguration("backgroundColor", this.backgroundColor, "set-background-color");
+        }
+        if (this.pageBorderColor) {
+            this.queueConfiguration("pageBorderColor", this.pageBorderColor, "set-page-border-color");
+        }
+        if (this.toolbarColor) {
+            this.queueConfiguration("toolbarColor", this.toolbarColor, "set-toolbar-color");
+        }
+        if (this.textColor) {
+            this.queueConfiguration("textColor", this.textColor, "set-text-color");
+        }
+        if (this.borderRadius) {
+            this.queueConfiguration("borderRadius", this.borderRadius, "set-border-radius");
+        }
+        if (this.customCSS) {
+            this.queueConfiguration("customCSS", this.customCSS, "set-custom-css");
+        }
+        // Queue CSS zoom configurations (immediate actions)
+        // Note: Locale is now set via URL parameter, not PostMessage
+        if (this.useOnlyCssZoom !== undefined) {
+            this.queueConfiguration("useOnlyCssZoom", this.useOnlyCssZoom, "set-css-zoom");
+        }
+        // Queue event configurations (non-auto-actions)
+        if (this.onBeforePrint) {
+            this.queueConfiguration("beforePrint", true, "enable-before-print");
+        }
+        if (this.onAfterPrint) {
+            this.queueConfiguration("afterPrint", true, "enable-after-print");
+        }
+        if (this.onDocumentLoad) {
+            this.queueConfiguration("pagesLoaded", true, "enable-pages-loaded");
+        }
+        if (this.onPageChange) {
+            this.queueConfiguration("pageChange", true, "enable-page-change");
         }
+        // Queue new high-value event configurations
+        if (this.onDocumentError) {
+            this.queueConfiguration("documentError", true, "enable-document-error");
+        }
+        if (this.onDocumentInit) {
+            this.queueConfiguration("documentInit", true, "enable-document-init");
+        }
+        if (this.onPagesInit) {
+            this.queueConfiguration("pagesInit", true, "enable-pages-init");
+        }
+        if (this.onPresentationModeChanged) {
+            this.queueConfiguration("presentationModeChanged", true, "enable-presentation-mode-changed");
+        }
+        if (this.onOpenFile) {
+            this.queueConfiguration("openFile", true, "enable-open-file");
+        }
+        if (this.onFind) {
+            this.queueConfiguration("find", true, "enable-find");
+        }
+        if (this.onUpdateFindMatchesCount) {
+            this.queueConfiguration("updateFindMatchesCount", true, "enable-update-find-matches-count");
+        }
+        if (this.onMetadataLoaded) {
+            this.queueConfiguration("metadataLoaded", true, "enable-metadata-loaded");
+        }
+        if (this.onOutlineLoaded) {
+            this.queueConfiguration("outlineLoaded", true, "enable-outline-loaded");
+        }
+        if (this.onPageRendered) {
+            this.queueConfiguration("pageRendered", true, "enable-page-rendered");
+        }
+        // New high-value events
+        if (this.onAnnotationLayerRendered) {
+            this.queueConfiguration("annotationLayerRendered", true, "enable-annotation-layer-rendered");
+        }
+        if (this.onBookmarkClick) {
+            this.queueConfiguration("bookmarkClick", true, "enable-bookmark-click");
+        }
+        if (this.onIdle) {
+            this.queueConfiguration("idle", true, "enable-idle");
+        }
+        // Note: Auto-actions are now queued when the document loads, not during component initialization
+        // This ensures they use the current property values at the time of document load
+    }
+    queueAutoActionsForDocumentLoad() {
+        // Use universal dispatcher for auto-actions
+        if (this.downloadOnLoad === true) {
+            this.dispatchAction("trigger-download", true, "initial-load");
+        }
+        if (this.showLastPageOnLoad === true) {
+            this.dispatchAction("go-to-last-page", true, "initial-load");
+        }
+        // Auto-print is handled in pagesLoadedHandler for timing reasons
+    }
+    queueConfiguration(propertyName, value, action) {
+        // Use universal dispatcher for all configuration actions
+        this.dispatchAction(action, value, "initial-load");
     }
     refresh() {
+        // Needs to be invoked for external window or when needs to reload pdf
+        // Clean up existing event listeners
+        ComponentUtils.cleanupEventHandlers(this);
+        // Clear the action queue to ensure clean state
+        if (this.actionQueueManager) {
+            this.actionQueueManager.clearQueues();
+        }
+        // Reset PostMessage readiness state
+        this.isPostMessageReady = false;
+        this.postMessageReadiness = 0;
+        this.pendingInitialConfig = true;
+        this.initialConfigQueued = false; // Reset initial config flag
+        // Reload the PDF - this will trigger queueAllConfigurations() when PostMessage API is ready
         this.loadPdf();
     }
-    relaseUrl; // Avoid memory leask with `URL.createObjectURL`
+    // Public method for external control messages
+    sendViewerControlMessage(action, payload) {
+        return this.sendControlMessage(action, payload);
+    }
+    // #region Public Methods for On-Demand Actions
+    triggerDownload() {
+        // Use universal dispatcher for user interactions - now always returns Promise<ActionExecutionResult>
+        return this.dispatchAction("trigger-download", true, "user-interaction");
+    }
+    triggerPrint() {
+        // Use universal dispatcher for user interactions - now always returns Promise<ActionExecutionResult>
+        return this.dispatchAction("trigger-print", true, "user-interaction");
+    }
+    setPage(page) {
+        // Use universal dispatcher for user interactions - now always returns Promise<ActionExecutionResult>
+        return this.dispatchAction("set-page", page, "user-interaction");
+    }
+    setZoom(zoom) {
+        // Use universal dispatcher for user interactions - now always returns Promise<ActionExecutionResult>
+        return this.dispatchAction("set-zoom", zoom, "user-interaction");
+    }
+    goToLastPage() {
+        // Use universal dispatcher for user interactions - now always returns Promise<ActionExecutionResult>
+        return this.dispatchAction("go-to-last-page", true, "user-interaction");
+    }
+    setCursor(cursor) {
+        // Use universal dispatcher for user interactions
+        return this.dispatchAction("set-cursor", cursor, "user-interaction");
+    }
+    setScroll(scroll) {
+        // Use universal dispatcher for user interactions
+        return this.dispatchAction("set-scroll", scroll, "user-interaction");
+    }
+    setSpread(spread) {
+        // Use universal dispatcher for user interactions
+        return this.dispatchAction("set-spread", spread, "user-interaction");
+    }
+    triggerRotation(direction) {
+        // Use universal dispatcher for user interactions
+        const action = direction === "cw" ? "trigger-rotate-cw" : "trigger-rotate-ccw";
+        return this.dispatchAction(action, true, "user-interaction");
+    }
+    goToPage(page) {
+        // Alias for setPage for backward compatibility
+        return this.setPage(page);
+    }
+    // #endregion
+    // Action queue management methods
+    getActionStatus(actionId) {
+        if (!this.actionQueueManager) {
+            return "not-found";
+        }
+        return this.actionQueueManager.getActionStatus(actionId);
+    }
+    getQueueStatus() {
+        if (!this.actionQueueManager) {
+            return {
+                queuedActions: 0,
+                executedActions: 0,
+            };
+        }
+        return this.actionQueueManager.getQueueStatus();
+    }
+    clearActionQueue() {
+        if (this.actionQueueManager) {
+            this.actionQueueManager.clearQueues();
+        }
+    }
+    // #endregion
+    // #region PDF Loading and URL Handling
     loadPdf() {
-        if (!this._src) {
+        if (!this.validatePdfSource())
             return;
-        }
-        // console.log(`Tab is - ${this.viewerTab}`);
-        // if (this.viewerTab) {
-        //   console.log(`Status of window - ${this.viewerTab.closed}`);
-        // }
-        if (this.externalWindow && (typeof this.viewerTab === 'undefined' || this.viewerTab.closed)) {
-            this.viewerTab = window.open('', this.target, this.externalWindowOptions || '');
+        this.setupExternalWindow();
+        const fileUrl = this.createFileUrl();
+        const viewerUrl = this.buildViewerUrl(fileUrl);
+        this.navigateToViewer(viewerUrl);
+    }
+    validatePdfSource() {
+        return !!this._src;
+    }
+    setupExternalWindow() {
+        if (!this.externalWindow)
+            return;
+        if (typeof this.viewerTab === "undefined" || this.viewerTab.closed) {
+            this.viewerTab = window.open("", this.target, this.externalWindowOptions || "");
             if (this.viewerTab == null) {
-                if (this.diagnosticLogs)
-                    console.error("ng2-pdfjs-viewer: For 'externalWindow = true'. i.e opening in new tab to work, pop-ups should be enabled.");
+                console.error("ng2-pdfjs-viewer: For 'externalWindow = true'. i.e opening in new tab to work, pop-ups should be enabled.");
                 return;
             }
             if (this.showSpinner) {
-                this.viewerTab.document.write(`
+                this.renderLoadingSpinner();
+            }
+        }
+    }
+    renderLoadingSpinner() {
+        this.viewerTab.document.write(`
           <style>
           .loader {
             position: fixed;
@@ -167,181 +1571,362 @@ class PdfJsViewerComponent {
           </style>
           <div class="loader"></div>
         `);
-            }
-        }
+    }
+    createFileUrl() {
         this.relaseUrl?.();
-        let fileUrl;
-        //if (typeof this.src === "string") {
-        //  fileUrl = this.src;
-        //}
         if (this._src instanceof Blob) {
             const url = URL.createObjectURL(this._src);
-            fileUrl = encodeURIComponent(url);
             this.relaseUrl = () => URL.revokeObjectURL(url);
+            return encodeURIComponent(url);
         }
         else if (this._src instanceof Uint8Array) {
             let blob = new Blob([this._src], { type: "application/pdf" });
             const url = URL.createObjectURL(blob);
             this.relaseUrl = () => URL.revokeObjectURL(url);
-            fileUrl = encodeURIComponent(url);
+            return encodeURIComponent(url);
         }
         else {
-            fileUrl = this._src;
+            return this._src;
         }
-        let viewerUrl;
-        if (this.viewerFolder) {
-            viewerUrl = `${this.viewerFolder}/web/viewer.html`;
+    }
+    buildViewerUrl(fileUrl) {
+        let viewerUrl = this.getBaseViewerUrl();
+        viewerUrl = this.addFileParameter(viewerUrl, fileUrl);
+        viewerUrl = this.addViewerIdParameter(viewerUrl);
+        viewerUrl = this.addCacheBustingIfNeeded(viewerUrl);
+        return viewerUrl;
+    }
+    getBaseViewerUrl() {
+        return this.viewerFolder
+            ? `${this.viewerFolder}/web/viewer.html`
+            : `assets/pdfjs/web/viewer.html`;
+    }
+    addFileParameter(viewerUrl, fileUrl) {
+        return `${viewerUrl}?file=${fileUrl}`;
+    }
+    addViewerIdParameter(viewerUrl) {
+        return typeof this.viewerId !== "undefined"
+            ? `${viewerUrl}&viewerId=${this.viewerId}`
+            : viewerUrl;
+    }
+    addCacheBustingIfNeeded(viewerUrl) {
+        if (this.isDevelopmentMode()) {
+            const cacheBuster = Date.now();
+            return `${viewerUrl}&_t=${cacheBuster}`;
         }
         else {
-            viewerUrl = `assets/pdfjs/web/viewer.html`;
-        }
-        viewerUrl += `?file=${fileUrl}`;
-        if (typeof this.viewerId !== 'undefined') {
-            viewerUrl += `&viewerId=${this.viewerId}`;
+            return viewerUrl;
         }
-        if (typeof this.onBeforePrint !== 'undefined') {
-            viewerUrl += `&beforePrint=true`;
-        }
-        if (typeof this.onAfterPrint !== 'undefined') {
-            viewerUrl += `&afterPrint=true`;
-        }
-        if (typeof this.onDocumentLoad !== 'undefined') {
-            viewerUrl += `&pagesLoaded=true`;
-        }
-        if (typeof this.onPageChange !== 'undefined') {
-            viewerUrl += `&pageChange=true`;
-        }
-        if (this.downloadFileName) {
-            if (!this.downloadFileName.endsWith(".pdf")) {
-                this.downloadFileName += ".pdf";
-            }
-            viewerUrl += `&fileName=${this.downloadFileName}`;
-        }
-        if (typeof this.openFile !== 'undefined') {
-            viewerUrl += `&openFile=${this.openFile}`;
-        }
-        if (typeof this.download !== 'undefined') {
-            viewerUrl += `&download=${this.download}`;
-        }
-        if (this.startDownload) {
-            viewerUrl += `&startDownload=${this.startDownload}`;
-        }
-        if (typeof this.viewBookmark !== 'undefined') {
-            viewerUrl += `&viewBookmark=${this.viewBookmark}`;
-        }
-        if (typeof this.print !== 'undefined') {
-            viewerUrl += `&print=${this.print}`;
-        }
-        if (this.startPrint) {
-            viewerUrl += `&startPrint=${this.startPrint}`;
-        }
-        if (typeof this.fullScreen !== 'undefined') {
-            viewerUrl += `&fullScreen=${this.fullScreen}`;
-        }
-        // if (this.showFullScreen) {
-        //   viewerUrl += `&showFullScreen=${this.showFullScreen}`;
-        // }
-        if (typeof this.find !== 'undefined') {
-            viewerUrl += `&find=${this.find}`;
-        }
-        if (this.lastPage) {
-            viewerUrl += `&lastpage=${this.lastPage}`;
-        }
-        if (this.rotatecw) {
-            viewerUrl += `&rotatecw=${this.rotatecw}`;
-        }
-        if (this.rotateccw) {
-            viewerUrl += `&rotateccw=${this.rotateccw}`;
-        }
-        if (this.cursor) {
-            viewerUrl += `&cursor=${this.cursor}`;
-        }
-        if (this.scroll) {
-            viewerUrl += `&scroll=${this.scroll}`;
-        }
-        if (this.spread) {
-            viewerUrl += `&spread=${this.spread}`;
-        }
-        if (this.locale) {
-            viewerUrl += `&locale=${this.locale}`;
-        }
-        if (this.useOnlyCssZoom) {
-            viewerUrl += `&useOnlyCssZoom=${this.useOnlyCssZoom}`;
-        }
-        if (this._page || this.zoom || this.nameddest || this.pagemode)
-            viewerUrl += "#";
-        if (this._page) {
-            viewerUrl += `&page=${this._page}`;
-        }
-        if (this.zoom) {
-            viewerUrl += `&zoom=${this.zoom}`;
-        }
-        if (this.nameddest) {
-            viewerUrl += `&nameddest=${this.nameddest}`;
+    }
+    isDevelopmentMode() {
+        return (window.location.hostname === "localhost" ||
+            window.location.hostname === "127.0.0.1" ||
+            window.location.port === "4200" ||
+            window.location.href.includes("localhost:4200"));
+    }
+    navigateToViewer(viewerUrl) {
+        if (this.externalWindow) {
+            this.viewerTab.location.href = viewerUrl;
         }
-        if (this.pagemode) {
-            viewerUrl += `&pagemode=${this.pagemode}`;
+        else {
+            this.iframe.nativeElement.contentWindow.location.replace(viewerUrl);
         }
-        if (this.errorOverride || this.errorAppend) {
-            viewerUrl += `&errorMessage=${this.errorMessage}`;
-            if (this.errorOverride) {
-                viewerUrl += `&errorOverride=${this.errorOverride}`;
-            }
-            if (this.errorAppend) {
-                viewerUrl += `&errorAppend=${this.errorAppend}`;
-            }
+        if (this.diagnosticLogs) {
+            this.logViewerConfiguration(viewerUrl);
         }
-        if (this.externalWindow) {
-            this.viewerTab.location.href = viewerUrl;
+    }
+    logViewerConfiguration(viewerUrl) {
+        console.debug(`PdfJsViewer: Minimal URL configuration:
+        pdfSrc = ${this.pdfSrc}
+        externalWindow = ${this.externalWindow}
+        viewerFolder = ${this.viewerFolder}
+        viewerId = ${this.viewerId}
+      finalUrl = ${viewerUrl}
+        
+        All other configurations handled via PostMessage system:
+        showOpenFile = ${this.showOpenFile}
+        showDownload = ${this.showDownload}
+        showViewBookmark = ${this.showViewBookmark}
+        showPrint = ${this.showPrint}
+        showFullScreen = ${this.showFullScreen}
+        showFind = ${this.showFind}
+        cursor = ${this.cursor}
+        scroll = ${this.scroll}
+        spread = ${this.spread}
+        page = ${this.page}
+        zoom = ${this.zoom}
+        namedDest = ${this.namedDest}
+        pageMode = ${this.pageMode}
+        errorOverride = ${this.errorOverride}
+        errorAppend = ${this.errorAppend}
+        errorMessage = ${this.errorMessage}
+        locale = ${this.locale}
+        useOnlyCssZoom = ${this.useOnlyCssZoom}
+        
+        Auto-actions (handled by action queue):
+        downloadOnLoad = ${this.downloadOnLoad}
+        printOnLoad = ${this.printOnLoad}
+        showLastPageOnLoad = ${this.showLastPageOnLoad}
+      `);
+    }
+    // #endregion
+    // #region Two-Way Binding Helper Methods
+    applyZoomToViewer(zoom) {
+        // Use universal dispatcher - it will handle readiness checking and queuing
+        this.dispatchAction("set-zoom", zoom, "property-change");
+    }
+    applyRotationToViewer(rotation) {
+        // Use universal dispatcher - it will handle readiness checking and queuing
+        this.dispatchAction("set-rotation", rotation, "property-change");
+    }
+    applyCursorToViewer(cursor) {
+        // Use universal dispatcher - it will handle readiness checking and queuing
+        this.dispatchAction("set-cursor", cursor, "property-change");
+    }
+    applyScrollToViewer(scroll) {
+        // Use universal dispatcher - it will handle readiness checking and queuing
+        this.dispatchAction("set-scroll", scroll, "property-change");
+    }
+    applySpreadToViewer(spread) {
+        // Use universal dispatcher - it will handle readiness checking and queuing
+        this.dispatchAction("set-spread", spread, "property-change");
+    }
+    applyPageModeToViewer(pageMode) {
+        // Use universal dispatcher - it will handle readiness checking and queuing
+        this.dispatchAction("update-page-mode", pageMode, "property-change");
+    }
+    // #endregion
+    // Universal Action Dispatcher - ALL actions go through readiness-based queuing
+    dispatchAction(action, payload, source = "property-change") {
+        const requiredReadiness = this.getRequiredReadinessLevel(action);
+        const actionObj = {
+            id: `${source}-${action}-${Date.now()}`,
+            action: action,
+            payload: payload,
+        };
+        // Check if we have sufficient readiness to execute immediately
+        if (this.hasRequiredReadiness(requiredReadiness)) {
+            return this.actionQueueManager.executeAction(actionObj);
         }
         else {
-            this.iframe.nativeElement.contentWindow ? this.iframe.nativeElement.contentWindow.location.replace(viewerUrl) : this.iframe.nativeElement.src = viewerUrl;
-        }
-        // console.log(`
-        //   pdfSrc = ${this.pdfSrc}
-        //   fileUrl = ${fileUrl}
-        //   externalWindow = ${this.externalWindow}
-        //   downloadFileName = ${this.downloadFileName}
-        //   viewerFolder = ${this.viewerFolder}
-        //   openFile = ${this.openFile}
-        //   download = ${this.download}
-        //   startDownload = ${this.startDownload}
-        //   viewBookmark = ${this.viewBookmark}
-        //   print = ${this.print}
-        //   startPrint = ${this.startPrint}
-        //   fullScreen = ${this.fullScreen}
-        //   find = ${this.find}
-        //   lastPage = ${this.lastPage}
-        //   rotatecw = ${this.rotatecw}
-        //   rotateccw = ${this.rotateccw}
-        //   cursor = ${this.cursor}
-        //   scrollMode = ${this.scroll}
-        //   spread = ${this.spread}
-        //   page = ${this.page}
-        //   zoom = ${this.zoom}
-        //   nameddest = ${this.nameddest}
-        //   pagemode = ${this.pagemode}
-        //   pagemode = ${this.errorOverride}
-        //   pagemode = ${this.errorAppend}
-        //   pagemode = ${this.errorMessage}
-        // `);
+            // Queue action to execute when readiness is achieved
+            this.actionQueueManager.queueAction(actionObj, requiredReadiness);
+            // Return a promise that resolves when the action eventually executes
+            return Promise.resolve({
+                actionId: actionObj.id,
+                success: true,
+                timestamp: Date.now(),
+            });
+        }
     }
-    ngOnDestroy() {
-        this.relaseUrl?.();
+    getRequiredReadinessLevel(action) {
+        // Define readiness requirements for all actions
+        const level1Actions = [
+            "set-theme",
+            "set-primary-color",
+            "set-background-color",
+            "set-page-border-color",
+            "set-toolbar-color",
+            "set-text-color",
+            "set-border-radius",
+            "set-custom-css",
+        ];
+        const level3Actions = [
+            "show-download",
+            "show-print",
+            "show-fullscreen",
+            "show-find",
+            "show-bookmark",
+            "show-openfile",
+            "show-annotations",
+            "set-error-message",
+            "set-error-override",
+            "set-error-append",
+            "set-css-zoom",
+            // DOM visibility toggles
+            "show-toolbar-left",
+            "show-toolbar-middle",
+            "show-toolbar-right",
+            "show-secondary-toolbar-toggle",
+            "show-sidebar",
+            "show-sidebar-left",
+            "show-sidebar-right",
+        ];
+        const level4Actions = [
+            "set-cursor",
+            "set-scroll",
+            "set-spread",
+            "set-zoom",
+            "update-page-mode",
+            // Layout actions require components ready to measure
+            "set-toolbar-density",
+            "set-sidebar-width",
+            "set-toolbar-position",
+            "set-sidebar-position",
+            "set-responsive-breakpoint",
+        ];
+        const level5Actions = [
+            "set-page",
+            "set-rotation",
+            "go-to-last-page",
+            "go-to-named-dest",
+            "trigger-download",
+            "trigger-print",
+            "trigger-rotate-cw",
+            "trigger-rotate-ccw",
+        ];
+        if (level1Actions.includes(action))
+            return 1; // VIEWER_LOADED - DOM access only
+        if (level3Actions.includes(action))
+            return 3; // EVENTBUS_READY
+        if (level4Actions.includes(action))
+            return 4; // COMPONENTS_READY
+        if (level5Actions.includes(action))
+            return 5; // DOCUMENT_LOADED
+        return 3; // Default to EVENTBUS_READY
+    }
+    hasRequiredReadiness(requiredLevel) {
+        if (!this.isPostMessageReady)
+            return false;
+        if (requiredLevel === 5 && !this.actionQueueManager?.isDocumentLoaded)
+            return false;
+        return this.postMessageReadiness >= requiredLevel;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: PdfJsViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.0", type: PdfJsViewerComponent, isStandalone: false, selector: "ng2-pdfjs-viewer", inputs: { viewerId: "viewerId", viewerFolder: "viewerFolder", externalWindow: "externalWindow", target: "target", showSpinner: "showSpinner", downloadFileName: "downloadFileName", openFile: "openFile", download: "download", startDownload: "startDownload", viewBookmark: "viewBookmark", print: "print", startPrint: "startPrint", fullScreen: "fullScreen", find: "find", zoom: "zoom", nameddest: "nameddest", pagemode: "pagemode", lastPage: "lastPage", rotatecw: "rotatecw", rotateccw: "rotateccw", cursor: "cursor", scroll: "scroll", spread: "spread", locale: "locale", useOnlyCssZoom: "useOnlyCssZoom", errorOverride: "errorOverride", errorAppend: "errorAppend", errorMessage: "errorMessage", diagnosticLogs: "diagnosticLogs", externalWindowOptions: "externalWindowOptions", page: "page", pdfSrc: "pdfSrc" }, outputs: { onBeforePrint: "onBeforePrint", onAfterPrint: "onAfterPrint", onDocumentLoad: "onDocumentLoad", onPageChange: "onPageChange" }, viewQueries: [{ propertyName: "iframe", first: true, predicate: ["iframe"], descendants: true, static: true }], ngImport: i0, template: `<iframe title="ng2-pdfjs-viewer" [hidden]="externalWindow || (!externalWindow && !pdfSrc)" #iframe width="100%" height="100%"></iframe>`, isInline: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: PdfJsViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", type: PdfJsViewerComponent, isStandalone: false, selector: "ng2-pdfjs-viewer", inputs: { viewerId: "viewerId", viewerFolder: "viewerFolder", externalWindow: "externalWindow", target: "target", showSpinner: "showSpinner", downloadFileName: "downloadFileName", locale: "locale", useOnlyCssZoom: "useOnlyCssZoom", diagnosticLogs: "diagnosticLogs", showOpenFile: "showOpenFile", showAnnotations: "showAnnotations", showDownload: "showDownload", showViewBookmark: "showViewBookmark", showPrint: "showPrint", showFullScreen: "showFullScreen", showFind: "showFind", downloadOnLoad: "downloadOnLoad", printOnLoad: "printOnLoad", rotateCW: "rotateCW", rotateCCW: "rotateCCW", showLastPageOnLoad: "showLastPageOnLoad", namedDest: "namedDest", errorOverride: "errorOverride", errorAppend: "errorAppend", errorMessage: "errorMessage", theme: "theme", primaryColor: "primaryColor", backgroundColor: "backgroundColor", pageBorderColor: "pageBorderColor", toolbarColor: "toolbarColor", textColor: "textColor", borderRadius: "borderRadius", customCSS: "customCSS", customSpinnerTpl: "customSpinnerTpl", spinnerClass: "spinnerClass", customErrorTpl: "customErrorTpl", errorClass: "errorClass", showToolbarLeft: "showToolbarLeft", showToolbarMiddle: "showToolbarMiddle", showToolbarRight: "showToolbarRight", showSecondaryToolbarToggle: "showSecondaryToolbarToggle", showSidebar: "showSidebar", showSidebarLeft: "showSidebarLeft", showSidebarRight: "showSidebarRight", toolbarDensity: "toolbarDensity", sidebarWidth: "sidebarWidth", toolbarPosition: "toolbarPosition", sidebarPosition: "sidebarPosition", responsiveBreakpoint: "responsiveBreakpoint", controlVisibility: "controlVisibility", autoActions: "autoActions", errorHandling: "errorHandling", viewerConfig: "viewerConfig", themeConfig: "themeConfig", groupVisibility: "groupVisibility", layoutConfig: "layoutConfig", startDownload: "startDownload", startPrint: "startPrint", openFile: "openFile", download: "download", print: "print", fullScreen: "fullScreen", find: "find", viewBookmark: "viewBookmark", lastPage: "lastPage", externalWindowOptions: "externalWindowOptions", zoom: "zoom", rotation: "rotation", cursor: "cursor", scroll: "scroll", spread: "spread", pageMode: "pageMode", page: "page", pdfSrc: "pdfSrc" }, outputs: { onBeforePrint: "onBeforePrint", onAfterPrint: "onAfterPrint", onDocumentLoad: "onDocumentLoad", onPageChange: "onPageChange", onScaleChange: "onScaleChange", onRotationChange: "onRotationChange", onDocumentError: "onDocumentError", onDocumentInit: "onDocumentInit", onPagesInit: "onPagesInit", onPresentationModeChanged: "onPresentationModeChanged", onOpenFile: "onOpenFile", onFind: "onFind", onUpdateFindMatchesCount: "onUpdateFindMatchesCount", onMetadataLoaded: "onMetadataLoaded", onOutlineLoaded: "onOutlineLoaded", onPageRendered: "onPageRendered", onAnnotationLayerRendered: "onAnnotationLayerRendered", onBookmarkClick: "onBookmarkClick", onIdle: "onIdle", zoomChange: "zoomChange", cursorChange: "cursorChange", scrollChange: "scrollChange", spreadChange: "spreadChange", pageModeChange: "pageModeChange" }, viewQueries: [{ propertyName: "iframe", first: true, predicate: ["iframe"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `
+    <div
+      class="ng2-pdfjs-viewer-container"
+      style="position:relative;width:100%;height:100%;"
+    >
+      <iframe
+        title="ng2-pdfjs-viewer"
+        [hidden]="externalWindow || (!externalWindow && !pdfSrc)"
+        #iframe
+        width="100%"
+        height="100%"
+      ></iframe>
+
+      <div
+        class="ng2-pdfjs-loading-overlay"
+        *ngIf="showSpinner && isLoading && !externalWindow"
+        [ngClass]="spinnerClass"
+        style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.6);backdrop-filter:saturate(120%) blur(1px);"
+      >
+        <ng-container
+          *ngIf="customSpinnerTpl; else defaultSpinner"
+          [ngTemplateOutlet]="customSpinnerTpl"
+        ></ng-container>
+        <ng-template #defaultSpinner>
+          <div style="text-align:center;">
+            <div
+              style="display:inline-block;width:40px;height:40px;border:4px solid #f3f3f3;border-top:4px solid #2196F3;border-radius:50%;animation:spin 1s linear infinite;"
+            ></div>
+            <div style="margin-top:16px;color:#666;font-size:16px;">
+              Loading PDF...
+            </div>
+          </div>
+        </ng-template>
+      </div>
+
+      <div
+        class="ng2-pdfjs-error-overlay"
+        *ngIf="errorOverride && hasError && !externalWindow"
+        [ngClass]="errorClass"
+        style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.9);backdrop-filter:saturate(120%) blur(1px);"
+      >
+        <ng-container
+          *ngIf="customErrorTpl; else defaultError"
+          [ngTemplateOutlet]="customErrorTpl"
+          [ngTemplateOutletContext]="getErrorTemplateData()"
+        ></ng-container>
+        <ng-template #defaultError>
+          <div style="text-align:center;max-width:400px;padding:20px;">
+            <div style="font-size:48px;color:#f44336;margin-bottom:16px;">
+              ⚠️
+            </div>
+            <div
+              style="color:#333;font-size:18px;font-weight:500;margin-bottom:8px;"
+            >
+              Error Loading PDF
+            </div>
+            <div style="color:#666;font-size:14px;line-height:1.4;">
+              {{ currentErrorMessage }}
+            </div>
+          </div>
+        </ng-template>
+      </div>
+    </div>
+  `, isInline: true, styles: [".ng2-pdfjs-loading-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#fff9;-webkit-backdrop-filter:saturate(120%) blur(1px);backdrop-filter:saturate(120%) blur(1px)}.ng2-pdfjs-error-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#ffffffe6;-webkit-backdrop-filter:saturate(120%) blur(1px);backdrop-filter:saturate(120%) blur(1px)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: PdfJsViewerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: PdfJsViewerComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'ng2-pdfjs-viewer',
-                    standalone: false,
-                    template: `<iframe title="ng2-pdfjs-viewer" [hidden]="externalWindow || (!externalWindow && !pdfSrc)" #iframe width="100%" height="100%"></iframe>`
-                }]
+            args: [{ selector: "ng2-pdfjs-viewer", standalone: false, template: `
+    <div
+      class="ng2-pdfjs-viewer-container"
+      style="position:relative;width:100%;height:100%;"
+    >
+      <iframe
+        title="ng2-pdfjs-viewer"
+        [hidden]="externalWindow || (!externalWindow && !pdfSrc)"
+        #iframe
+        width="100%"
+        height="100%"
+      ></iframe>
+
+      <div
+        class="ng2-pdfjs-loading-overlay"
+        *ngIf="showSpinner && isLoading && !externalWindow"
+        [ngClass]="spinnerClass"
+        style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.6);backdrop-filter:saturate(120%) blur(1px);"
+      >
+        <ng-container
+          *ngIf="customSpinnerTpl; else defaultSpinner"
+          [ngTemplateOutlet]="customSpinnerTpl"
+        ></ng-container>
+        <ng-template #defaultSpinner>
+          <div style="text-align:center;">
+            <div
+              style="display:inline-block;width:40px;height:40px;border:4px solid #f3f3f3;border-top:4px solid #2196F3;border-radius:50%;animation:spin 1s linear infinite;"
+            ></div>
+            <div style="margin-top:16px;color:#666;font-size:16px;">
+              Loading PDF...
+            </div>
+          </div>
+        </ng-template>
+      </div>
+
+      <div
+        class="ng2-pdfjs-error-overlay"
+        *ngIf="errorOverride && hasError && !externalWindow"
+        [ngClass]="errorClass"
+        style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.9);backdrop-filter:saturate(120%) blur(1px);"
+      >
+        <ng-container
+          *ngIf="customErrorTpl; else defaultError"
+          [ngTemplateOutlet]="customErrorTpl"
+          [ngTemplateOutletContext]="getErrorTemplateData()"
+        ></ng-container>
+        <ng-template #defaultError>
+          <div style="text-align:center;max-width:400px;padding:20px;">
+            <div style="font-size:48px;color:#f44336;margin-bottom:16px;">
+              ⚠️
+            </div>
+            <div
+              style="color:#333;font-size:18px;font-weight:500;margin-bottom:8px;"
+            >
+              Error Loading PDF
+            </div>
+            <div style="color:#666;font-size:14px;line-height:1.4;">
+              {{ currentErrorMessage }}
+            </div>
+          </div>
+        </ng-template>
+      </div>
+    </div>
+  `, styles: [".ng2-pdfjs-loading-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#fff9;-webkit-backdrop-filter:saturate(120%) blur(1px);backdrop-filter:saturate(120%) blur(1px)}.ng2-pdfjs-error-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#ffffffe6;-webkit-backdrop-filter:saturate(120%) blur(1px);backdrop-filter:saturate(120%) blur(1px)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
         }], propDecorators: { iframe: [{
                 type: ViewChild,
-                args: ['iframe', { static: true }]
+                args: ["iframe", { static: true }]
             }], viewerId: [{
                 type: Input
             }], onBeforePrint: [{
@@ -352,6 +1937,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
                 type: Output
             }], onPageChange: [{
                 type: Output
+            }], onScaleChange: [{
+                type: Output
+            }], onRotationChange: [{
+                type: Output
+            }], onDocumentError: [{
+                type: Output
+            }], onDocumentInit: [{
+                type: Output
+            }], onPagesInit: [{
+                type: Output
+            }], onPresentationModeChanged: [{
+                type: Output
+            }], onOpenFile: [{
+                type: Output
+            }], onFind: [{
+                type: Output
+            }], onUpdateFindMatchesCount: [{
+                type: Output
+            }], onMetadataLoaded: [{
+                type: Output
+            }], onOutlineLoaded: [{
+                type: Output
+            }], onPageRendered: [{
+                type: Output
+            }], onAnnotationLayerRendered: [{
+                type: Output
+            }], onBookmarkClick: [{
+                type: Output
+            }], onIdle: [{
+                type: Output
             }], viewerFolder: [{
                 type: Input
             }], externalWindow: [{
@@ -362,43 +1977,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
                 type: Input
             }], downloadFileName: [{
                 type: Input
-            }], openFile: [{
-                type: Input
-            }], download: [{
-                type: Input
-            }], startDownload: [{
-                type: Input
-            }], viewBookmark: [{
+            }], locale: [{
                 type: Input
-            }], print: [{
+            }], useOnlyCssZoom: [{
                 type: Input
-            }], startPrint: [{
+            }], diagnosticLogs: [{
                 type: Input
-            }], fullScreen: [{
+            }], showOpenFile: [{
                 type: Input
-            }], find: [{
+            }], showAnnotations: [{
                 type: Input
-            }], zoom: [{
+            }], showDownload: [{
                 type: Input
-            }], nameddest: [{
+            }], showViewBookmark: [{
                 type: Input
-            }], pagemode: [{
+            }], showPrint: [{
                 type: Input
-            }], lastPage: [{
+            }], showFullScreen: [{
                 type: Input
-            }], rotatecw: [{
+            }], showFind: [{
                 type: Input
-            }], rotateccw: [{
+            }], downloadOnLoad: [{
                 type: Input
-            }], cursor: [{
+            }], printOnLoad: [{
                 type: Input
-            }], scroll: [{
+            }], rotateCW: [{
                 type: Input
-            }], spread: [{
+            }], rotateCCW: [{
                 type: Input
-            }], locale: [{
+            }], showLastPageOnLoad: [{
                 type: Input
-            }], useOnlyCssZoom: [{
+            }], namedDest: [{
                 type: Input
             }], errorOverride: [{
                 type: Input
@@ -406,10 +2015,110 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
                 type: Input
             }], errorMessage: [{
                 type: Input
-            }], diagnosticLogs: [{
+            }], theme: [{
+                type: Input
+            }], primaryColor: [{
+                type: Input
+            }], backgroundColor: [{
+                type: Input
+            }], pageBorderColor: [{
+                type: Input
+            }], toolbarColor: [{
+                type: Input
+            }], textColor: [{
+                type: Input
+            }], borderRadius: [{
+                type: Input
+            }], customCSS: [{
+                type: Input
+            }], customSpinnerTpl: [{
+                type: Input
+            }], spinnerClass: [{
+                type: Input
+            }], customErrorTpl: [{
+                type: Input
+            }], errorClass: [{
+                type: Input
+            }], showToolbarLeft: [{
+                type: Input
+            }], showToolbarMiddle: [{
+                type: Input
+            }], showToolbarRight: [{
+                type: Input
+            }], showSecondaryToolbarToggle: [{
+                type: Input
+            }], showSidebar: [{
+                type: Input
+            }], showSidebarLeft: [{
+                type: Input
+            }], showSidebarRight: [{
+                type: Input
+            }], toolbarDensity: [{
+                type: Input
+            }], sidebarWidth: [{
+                type: Input
+            }], toolbarPosition: [{
+                type: Input
+            }], sidebarPosition: [{
+                type: Input
+            }], responsiveBreakpoint: [{
+                type: Input
+            }], controlVisibility: [{
+                type: Input
+            }], autoActions: [{
+                type: Input
+            }], errorHandling: [{
+                type: Input
+            }], viewerConfig: [{
+                type: Input
+            }], themeConfig: [{
+                type: Input
+            }], groupVisibility: [{
+                type: Input
+            }], layoutConfig: [{
+                type: Input
+            }], startDownload: [{
+                type: Input
+            }], startPrint: [{
+                type: Input
+            }], openFile: [{
+                type: Input
+            }], download: [{
+                type: Input
+            }], print: [{
+                type: Input
+            }], fullScreen: [{
+                type: Input
+            }], find: [{
+                type: Input
+            }], viewBookmark: [{
+                type: Input
+            }], lastPage: [{
                 type: Input
             }], externalWindowOptions: [{
                 type: Input
+            }], zoomChange: [{
+                type: Output
+            }], cursorChange: [{
+                type: Output
+            }], scrollChange: [{
+                type: Output
+            }], spreadChange: [{
+                type: Output
+            }], pageModeChange: [{
+                type: Output
+            }], zoom: [{
+                type: Input
+            }], rotation: [{
+                type: Input
+            }], cursor: [{
+                type: Input
+            }], scroll: [{
+                type: Input
+            }], spread: [{
+                type: Input
+            }], pageMode: [{
+                type: Input
             }], page: [{
                 type: Input
             }], pdfSrc: [{
@@ -422,11 +2131,11 @@ class PdfJsViewerModule {
             ngModule: PdfJsViewerModule,
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: PdfJsViewerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.0", ngImport: i0, type: PdfJsViewerModule, declarations: [PdfJsViewerComponent], imports: [CommonModule], exports: [PdfJsViewerComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: PdfJsViewerModule, imports: [CommonModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: PdfJsViewerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.6", ngImport: i0, type: PdfJsViewerModule, declarations: [PdfJsViewerComponent], imports: [CommonModule], exports: [PdfJsViewerComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: PdfJsViewerModule, imports: [CommonModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: PdfJsViewerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: PdfJsViewerModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule],