diff --git a/lib/core/src/lib/viewer/components/pdf-viewer-thumb/pdf-viewer-thumb.component.ts b/lib/core/src/lib/viewer/components/pdf-viewer-thumb/pdf-viewer-thumb.component.ts index 9a6ee8a60d..4982b19afd 100644 --- a/lib/core/src/lib/viewer/components/pdf-viewer-thumb/pdf-viewer-thumb.component.ts +++ b/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; - constructor(private sanitizer: DomSanitizer, private element: ElementRef) {} - ngOnInit() { this.image$ = this.page.getPage().then((page) => this.getThumb(page)); } diff --git a/lib/core/src/lib/viewer/components/pdf-viewer-thumbnails/pdf-viewer-thumbnails.component.html b/lib/core/src/lib/viewer/components/pdf-viewer-thumbnails/pdf-viewer-thumbnails.component.html index d19a0cab43..4dde9e5497 100644 --- a/lib/core/src/lib/viewer/components/pdf-viewer-thumbnails/pdf-viewer-thumbnails.component.html +++ b/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)'"> - + @for (page of renderItems; track page.id) { + + } diff --git a/lib/core/src/lib/viewer/components/pdf-viewer-thumbnails/pdf-viewer-thumbnails.component.spec.ts b/lib/core/src/lib/viewer/components/pdf-viewer-thumbnails/pdf-viewer-thumbnails.component.spec.ts index b041637301..a38fa7aed6 100644 --- a/lib/core/src/lib/viewer/components/pdf-viewer-thumbnails/pdf-viewer-thumbnails.component.spec.ts +++ b/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'; diff --git a/lib/core/src/lib/viewer/components/pdf-viewer-thumbnails/pdf-viewer-thumbnails.component.ts b/lib/core/src/lib/viewer/components/pdf-viewer-thumbnails/pdf-viewer-thumbnails.component.ts index 32aa6f082a..7ed949c766 100644 --- a/lib/core/src/lib/viewer/components/pdf-viewer-thumbnails/pdf-viewer-thumbnails.component.ts +++ b/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 margin: number = 15; + private items: any[] = []; + private readonly margin: number = 15; private itemHeight: number = 114 + this.margin; private previouslyFocusedElement: HTMLElement | null = null; private keyManager: FocusKeyManager; @@ -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) { diff --git a/lib/core/src/lib/viewer/components/pdf-viewer/pdf-viewer.component.ts b/lib/core/src/lib/viewer/components/pdf-viewer/pdf-viewer.component.ts index 0b3290a122..480940467c 100644 --- a/lib/core/src/lib/viewer/components/pdf-viewer/pdf-viewer.component.ts +++ b/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';