Release 8.0.3 - Fix PNG signature images in PDF viewer

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

@@ -17,7 +17,7 @@
 
 import { FocusableOption } from '@angular/cdk/a11y';
 import { AsyncPipe, NgIf } from '@angular/common';
-import { Component, ElementRef, Input, OnInit, ViewEncapsulation } from '@angular/core';
+import { Component, ElementRef, Input, OnInit, ViewEncapsulation, inject } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import { TranslatePipe } from '@ngx-translate/core';
 
@@ -29,13 +29,14 @@ import { TranslatePipe } from '@ngx-translate/core';
     host: { tabindex: '0' }
 })
 export class PdfThumbComponent implements OnInit, FocusableOption {
+    private readonly sanitizer = inject(DomSanitizer);
+    private readonly element = inject(ElementRef);
+
     @Input()
-    page: any = null;
+    page: any;
 
     image$: Promise<string>;
 
-    constructor(private sanitizer: DomSanitizer, private element: ElementRef) {}
-
     ngOnInit() {
         this.image$ = this.page.getPage().then((page) => this.getThumb(page));
     }

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"
+     @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

@@ -77,7 +77,7 @@ describe('PdfThumbListComponent', () => {
         fixture = TestBed.createComponent(PdfThumbListComponent);
         testingUtils = new UnitTestingUtils(fixture.debugElement);
         component = fixture.componentInstance;
-        component.pdfViewer = viewerMock;
+        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,
@@ -33,7 +33,8 @@ import {
     QueryList,
     TemplateRef,
     ViewChildren,
-    ViewEncapsulation
+    ViewEncapsulation,
+    inject
 } from '@angular/core';
 import { delay } from 'rxjs/operators';
 import { PdfThumbComponent } from '../pdf-viewer-thumb/pdf-viewer-thumb.component';
@@ -43,10 +44,13 @@ 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: any;
 
     @Output()
@@ -54,12 +58,12 @@ export class PdfThumbListComponent implements OnInit, AfterViewInit, OnDestroy {
 
     virtualHeight: number = 0;
     translateY: number = 0;
-    renderItems = [];
+    renderItems: any[] = [];
     width: number = 91;
     currentHeight: number = 0;
 
-    private items = [];
+    private items: any[] = [];
-    private margin: number = 15;
+    private readonly margin: number = 15;
     private itemHeight: number = 114 + this.margin;
     private previouslyFocusedElement: HTMLElement | null = null;
     private keyManager: FocusKeyManager<PdfThumbComponent>;
@@ -103,12 +107,10 @@ export class PdfThumbListComponent implements OnInit, AfterViewInit, OnDestroy {
         this.calculateItems();
     }
 
-    constructor(private element: ElementRef, @Inject(DOCUMENT) private document: any) {
+    ngOnInit() {
         this.calculateItems = this.calculateItems.bind(this);
         this.onPageChange = this.onPageChange.bind(this);
-    }
 
-    ngOnInit() {
         /* cspell:disable-next-line */
         this.pdfViewer.eventBus.on('pagechanging', this.onPageChange);
         this.element.nativeElement.addEventListener('scroll', this.calculateItems, true);
@@ -142,10 +144,6 @@ export class PdfThumbListComponent implements OnInit, AfterViewInit, OnDestroy {
         }
     }
 
-    trackByFn(_: number, item: any): number {
-        return item.id;
-    }
-
     isSelected(pageNumber: number) {
         return this.pdfViewer.currentPageNumber === pageNumber;
     }
@@ -168,7 +166,7 @@ export class PdfThumbListComponent implements OnInit, AfterViewInit, OnDestroy {
         }
     }
 
-    getPages() {
+    getPages(): any[] {
         // eslint-disable-next-line no-underscore-dangle
         return this.pdfViewer._pages.map((page) => ({
             id: page.id,
@@ -219,7 +217,7 @@ export class PdfThumbListComponent implements OnInit, AfterViewInit, OnDestroy {
         };
     }
 
-    private onPageChange(event) {
+    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

@@ -47,8 +47,10 @@ 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/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 } from 'pdfjs-dist/types/src/display/api';
+import { OnProgressParameters, PDFDocumentLoadingTask, PDFDocumentProxy, PDFPageProxy } from 'pdfjs-dist/types/src/display/api';
+import { IconModule } from '../../../icon/icon.module';
 
 export type PdfScaleMode = 'init' | 'page-actual' | 'page-width' | 'page-height' | 'page-fit' | 'auto';