ng2-pdfjs-viewer 25.0.10 → 25.0.12

package/README.md

@@ -219,16 +219,32 @@ Add PDF.js assets to your `angular.json`:
 
 #### Nginx Configuration
 
-For production deployments using nginx, you may need to configure MIME types for PDF.js ES modules (`.mjs` files):
+For production deployments using nginx, configure MIME types for PDF.js ES modules:
 
 ```nginx
 # Add to your nginx.conf or site configuration
 types {
     application/javascript  js mjs;
+    text/plain             ftl;
 }
 ```
 
-**Why this is needed**: PDF.js v5+ uses `.mjs` files (ES modules). Without proper MIME type configuration, nginx serves these files with incorrect content-type headers, causing the PDF viewer to crash during loading in production environments.
+#### IIS Configuration (Windows Server)
+
+For production deployments using IIS, add to your `web.config`:
+
+```xml
+<configuration>
+  <system.webServer>
+    <staticContent>
+      <mimeMap fileExtension=".mjs" mimeType="application/javascript" />
+      <mimeMap fileExtension=".ftl" mimeType="text/plain" />
+    </staticContent>
+  </system.webServer>
+</configuration>
+```
+
+**Why this is needed**: PDF.js v5+ uses `.mjs` files (ES modules) and `.ftl` files (localization). Without proper MIME type configuration, web servers serve these files with incorrect content-type headers, causing the PDF viewer to crash during loading in production environments.
 
 ### Angular Version Support
 

package/fesm2022/ng2-pdfjs-viewer.mjs

@@ -861,6 +861,10 @@ class PdfJsViewerComponent {
         if (changes['pdfSrc'] && !changes['pdfSrc'].firstChange) {
             // pdfSrc changed after initialization - reload the PDF
             if (!this.externalWindow) {
+                // Show spinner immediately when PDF source changes (Issue #275)
+                this.isLoading = true;
+                this.hasError = false;
+                this.currentErrorMessage = "";
                 // Reset configuration queuing since iframe will reload fresh
                 this.initialConfigQueued = false;
                 this.isPostMessageReady = false;
@@ -1605,6 +1609,10 @@ class PdfJsViewerComponent {
     loadPdf() {
         if (!this.validatePdfSource())
             return;
+        // Show spinner immediately when PDF loading starts (Issue #275)
+        this.isLoading = true;
+        this.hasError = false;
+        this.currentErrorMessage = "";
         this.setupExternalWindow();
         const fileUrl = this.createFileUrl();
         const viewerUrl = this.buildViewerUrl(fileUrl);
@@ -1877,10 +1885,7 @@ class PdfJsViewerComponent {
     }
     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", urlValidation: "urlValidation", customSecurityTpl: "customSecurityTpl", theme: "theme", primaryColor: "primaryColor", backgroundColor: "backgroundColor", pageBorderColor: "pageBorderColor", pageSpacing: "pageSpacing", toolbarColor: "toolbarColor", textColor: "textColor", borderRadius: "borderRadius", customCSS: "customCSS", cspNonce: "cspNonce", iframeTitle: "iframeTitle", 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", iframeBorder: "iframeBorder", 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%;"
-    >
+    <div class="ng2-pdfjs-viewer-container">
       <iframe
         [title]="iframeTitle || 'PDF document viewer'"
         [hidden]="externalWindow || (!externalWindow && !pdfSrc)"
@@ -1895,18 +1900,15 @@ class PdfJsViewerComponent {
         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;">
+          <div class="ng2-pdfjs-spinner-content">
+            <div class="ng2-pdfjs-spinner-icon"></div>
+            <div class="ng2-pdfjs-spinner-text">
               Loading PDF...
             </div>
           </div>
@@ -1917,7 +1919,6 @@ class PdfJsViewerComponent {
         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"
@@ -1925,31 +1926,26 @@ class PdfJsViewerComponent {
           [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 class="ng2-pdfjs-error-content">
+            <div class="ng2-pdfjs-error-icon">
               ⚠️
             </div>
-            <div
-              style="color:#333;font-size:18px;font-weight:500;margin-bottom:8px;"
-            >
+            <div class="ng2-pdfjs-error-title">
               Error Loading PDF
             </div>
-            <div style="color:#666;font-size:14px;line-height:1.4;">
+            <div class="ng2-pdfjs-error-message">
               {{ 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"] }] });
+  `, isInline: true, styles: [".ng2-pdfjs-viewer-container{position:relative;width:100%;height:100%}.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-spinner-content{text-align:center}.ng2-pdfjs-spinner-icon{display:inline-block;width:40px;height:40px;border:4px solid #f3f3f3;border-top:4px solid #2196F3;border-radius:50%;animation:spin 1s linear infinite}.ng2-pdfjs-spinner-text{margin-top:16px;color:#666;font-size:16px}.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)}.ng2-pdfjs-error-content{text-align:center;max-width:400px;padding:20px}.ng2-pdfjs-error-icon{font-size:48px;color:#f44336;margin-bottom:16px}.ng2-pdfjs-error-title{color:#333;font-size:18px;font-weight:500;margin-bottom:8px}.ng2-pdfjs-error-message{color:#666;font-size:14px;line-height:1.4}@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.6", ngImport: i0, type: PdfJsViewerComponent, decorators: [{
             type: Component,
             args: [{ selector: "ng2-pdfjs-viewer", standalone: false, template: `
-    <div
-      class="ng2-pdfjs-viewer-container"
-      style="position:relative;width:100%;height:100%;"
-    >
+    <div class="ng2-pdfjs-viewer-container">
       <iframe
         [title]="iframeTitle || 'PDF document viewer'"
         [hidden]="externalWindow || (!externalWindow && !pdfSrc)"
@@ -1964,18 +1960,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
         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;">
+          <div class="ng2-pdfjs-spinner-content">
+            <div class="ng2-pdfjs-spinner-icon"></div>
+            <div class="ng2-pdfjs-spinner-text">
               Loading PDF...
             </div>
           </div>
@@ -1986,7 +1979,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
         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"
@@ -1994,23 +1986,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
           [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 class="ng2-pdfjs-error-content">
+            <div class="ng2-pdfjs-error-icon">
               ⚠️
             </div>
-            <div
-              style="color:#333;font-size:18px;font-weight:500;margin-bottom:8px;"
-            >
+            <div class="ng2-pdfjs-error-title">
               Error Loading PDF
             </div>
-            <div style="color:#666;font-size:14px;line-height:1.4;">
+            <div class="ng2-pdfjs-error-message">
               {{ 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"] }]
+  `, styles: [".ng2-pdfjs-viewer-container{position:relative;width:100%;height:100%}.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-spinner-content{text-align:center}.ng2-pdfjs-spinner-icon{display:inline-block;width:40px;height:40px;border:4px solid #f3f3f3;border-top:4px solid #2196F3;border-radius:50%;animation:spin 1s linear infinite}.ng2-pdfjs-spinner-text{margin-top:16px;color:#666;font-size:16px}.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)}.ng2-pdfjs-error-content{text-align:center;max-width:400px;padding:20px}.ng2-pdfjs-error-icon{font-size:48px;color:#f44336;margin-bottom:16px}.ng2-pdfjs-error-title{color:#333;font-size:18px;font-weight:500;margin-bottom:8px}.ng2-pdfjs-error-message{color:#666;font-size:14px;line-height:1.4}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
         }], propDecorators: { iframe: [{
                 type: ViewChild,
                 args: ["iframe", { static: true }]