refactor: update PDF viewer component imports and types for better compatibility (#11686)

lib/core/src/lib/viewer/components/pdf-viewer-thumb/pdf-viewer-thumb.component.ts

@@ -20,7 +20,6 @@ import { AsyncPipe, NgIf } from '@angular/common';
 import { Component, ElementRef, Input, OnInit, ViewEncapsulation, inject } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import { TranslatePipe } from '@ngx-translate/core';
-import { PdfThumbnailPage } from '../pdf-viewer/pdf-viewer.component';
 
 @Component({
     selector: 'adf-pdf-thumb',
@@ -34,7 +33,7 @@ export class PdfThumbComponent implements OnInit, FocusableOption {
     private readonly element = inject(ElementRef);
 
     @Input()
-    page: PdfThumbnailPage = null;
+    page: any;
 
     image$: Promise<string>;
 

lib/core/src/lib/viewer/components/pdf-viewer-thumbnails/pdf-viewer-thumbnails.component.html

@@ -2,10 +2,12 @@
      data-automation-id='adf-thumbnails-content'
      [style.height.px]="virtualHeight"
      [style.transform]="'translate(-50%, ' + translateY + 'px)'">
-    <adf-pdf-thumb *ngFor="let page of renderItems; trackBy: trackByFn"
-                   class="adf-pdf-thumbnails__thumb"
-                   [id]="page.id"
-                   [ngClass]="{'adf-pdf-thumbnails__thumb--selected' : isSelected(page.id)}"
-                   [page]="page"
-                   (click)="goTo(page.id)" />
+     @for (page of renderItems; track page.id) {
+        <adf-pdf-thumb
+            class="adf-pdf-thumbnails__thumb"
+            [id]="page.id"
+            [ngClass]="{'adf-pdf-thumbnails__thumb--selected' : isSelected(page.id)}"
+            [page]="page"
+            (click)="goTo(page.id)" />
+    }
 </div>

lib/core/src/lib/viewer/components/pdf-viewer-thumbnails/pdf-viewer-thumbnails.component.spec.ts

@@ -19,9 +19,8 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { PdfThumbListComponent } from './pdf-viewer-thumbnails.component';
 import { UnitTestingUtils } from '../../../testing';
 import { DOWN_ARROW, ESCAPE, UP_ARROW } from '@angular/cdk/keycodes';
-import { PDFViewer } from 'pdfjs-dist/web/pdf_viewer.mjs';
 
-declare const pdfjsViewer: { EventBus: new () => { dispatch: (event: string, data: unknown) => void } };
+declare const pdfjsViewer: any;
 
 describe('PdfThumbListComponent', () => {
     let fixture: ComponentFixture<PdfThumbListComponent>;
@@ -78,7 +77,7 @@ describe('PdfThumbListComponent', () => {
         fixture = TestBed.createComponent(PdfThumbListComponent);
         testingUtils = new UnitTestingUtils(fixture.debugElement);
         component = fixture.componentInstance;
-        component.pdfViewer = viewerMock as unknown as PDFViewer;
+        component.pdfViewer = viewerMock as any;
 
         // provide scrollable container
         fixture.nativeElement.style.display = 'block';

lib/core/src/lib/viewer/components/pdf-viewer-thumbnails/pdf-viewer-thumbnails.component.ts

@@ -17,7 +17,7 @@
 
 import { FocusKeyManager } from '@angular/cdk/a11y';
 import { DOWN_ARROW, ESCAPE, TAB, UP_ARROW } from '@angular/cdk/keycodes';
-import { DOCUMENT, NgClass, NgForOf } from '@angular/common';
+import { DOCUMENT, NgClass } from '@angular/common';
 import {
     AfterViewInit,
     Component,
@@ -36,9 +36,6 @@ import {
     inject
 } from '@angular/core';
 import { delay } from 'rxjs/operators';
-import { PDFViewer } from 'pdfjs-dist/web/pdf_viewer.mjs';
-import { PDFPageProxy } from 'pdfjs-dist/types/src/display/api';
-import { PageChangingEvent, PdfThumbnailPage } from '../pdf-viewer/pdf-viewer.component';
 import { PdfThumbComponent } from '../pdf-viewer-thumb/pdf-viewer-thumb.component';
 
 @Component({
@@ -46,25 +43,25 @@ import { PdfThumbComponent } from '../pdf-viewer-thumb/pdf-viewer-thumb.componen
     templateUrl: './pdf-viewer-thumbnails.component.html',
     styleUrls: ['./pdf-viewer-thumbnails.component.scss'],
     host: { class: 'adf-pdf-thumbnails' },
-    imports: [PdfThumbComponent, NgClass, NgForOf],
+    imports: [PdfThumbComponent, NgClass],
     encapsulation: ViewEncapsulation.None
 })
 export class PdfThumbListComponent implements OnInit, AfterViewInit, OnDestroy {
     private readonly element = inject(ElementRef);
     private readonly document = inject(DOCUMENT);
 
-    @Input({ required: true }) pdfViewer: PDFViewer;
+    @Input({ required: true }) pdfViewer: any;
 
     @Output()
     close = new EventEmitter<void>();
 
     virtualHeight: number = 0;
     translateY: number = 0;
-    renderItems: PdfThumbnailPage[] = [];
+    renderItems: any[] = [];
     width: number = 91;
     currentHeight: number = 0;
 
-    private items: PdfThumbnailPage[] = [];
+    private items: any[] = [];
     private readonly margin: number = 15;
     private itemHeight: number = 114 + this.margin;
     private previouslyFocusedElement: HTMLElement | null = null;
@@ -148,10 +145,6 @@ export class PdfThumbListComponent implements OnInit, AfterViewInit, OnDestroy {
         }
     }
 
-    trackByFn(_: number, item: PdfThumbnailPage): number {
-        return item.id;
-    }
-
     isSelected(pageNumber: number) {
         return this.pdfViewer.currentPageNumber === pageNumber;
     }
@@ -174,7 +167,7 @@ export class PdfThumbListComponent implements OnInit, AfterViewInit, OnDestroy {
         }
     }
 
-    getPages(): PdfThumbnailPage[] {
+    getPages(): any[] {
         // eslint-disable-next-line no-underscore-dangle
         return this.pdfViewer._pages.map((page) => ({
             id: page.id,
@@ -188,7 +181,7 @@ export class PdfThumbListComponent implements OnInit, AfterViewInit, OnDestroy {
         return this.pdfViewer.pdfDocument.getPage(id).then((page) => this.calculateHeight(page));
     }
 
-    private calculateHeight(page: PDFPageProxy) {
+    private calculateHeight(page) {
         const viewport = page.getViewport({ scale: 1 });
         const pageRatio = viewport.width / viewport.height;
         const height = Math.floor(this.width / pageRatio);
@@ -224,7 +217,7 @@ export class PdfThumbListComponent implements OnInit, AfterViewInit, OnDestroy {
         };
     }
 
-    private onPageChange(event: PageChangingEvent) {
+    private onPageChange(event: any) {
         const index = this.renderItems.findIndex((element) => element.id === event.pageNumber);
 
         if (index < 0) {

lib/core/src/lib/viewer/components/pdf-viewer/pdf-viewer.component.ts

@@ -45,11 +45,11 @@ import { ToolbarComponent, ToolbarDividerComponent } from '../../../toolbar';
 import { RenderingQueueServices } from '../../services/rendering-queue.services';
 import { PdfPasswordDialogComponent } from '../pdf-viewer-password-dialog/pdf-viewer-password-dialog';
 import { PdfThumbListComponent } from '../pdf-viewer-thumbnails/pdf-viewer-thumbnails.component';
-import * as pdfjsLib from 'pdfjs-dist';
+import * as pdfjsLib from 'pdfjs-dist/build/pdf.min.mjs';
+import { PDFDateString } from 'pdfjs-dist/build/pdf.min.mjs';
 import { EventBus, PDFViewer } from 'pdfjs-dist/web/pdf_viewer.mjs';
 import { OnProgressParameters, PDFDocumentLoadingTask, PDFDocumentProxy, PDFPageProxy } from 'pdfjs-dist/types/src/display/api';
 import { IconModule } from '../../../icon/icon.module';
-import { PDFDateString } from 'pdfjs-dist';
 
 export type PdfScaleMode = 'init' | 'page-actual' | 'page-width' | 'page-height' | 'page-fit' | 'auto';