@progress/kendo-angular-pdfviewer 18.5.0-develop.8 → 18.5.0-develop.9

package/esm2022/package-metadata.mjs

@@ -10,7 +10,7 @@ export const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1744029261,
-    version: '18.5.0-develop.8',
+    publishDate: 1744039419,
+    version: '18.5.0-develop.9',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning',
 };

package/esm2022/pdfviewer.component.mjs

@@ -6,8 +6,8 @@ import { ChangeDetectorRef, Component, ElementRef, EventEmitter, HostBinding, In
 import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from './package-metadata';
 import { INITIAL_ZOOM_LEVEL, zoomOptionsData, zoomToFitOptions } from './util';
-import { scrollToPage, Scroller, SearchService, goToNextSearchMatch, goToPreviousSearchMatch, calculateZoomLevel, removeChildren, print, loadPDF, reloadDocument, currentPage } from '@progress/kendo-pdfviewer-common';
-import { hasObservers, shouldShowValidationUI, WatermarkOverlayComponent } from '@progress/kendo-angular-common';
+import { PdfViewer, removeChildren, } from '@progress/kendo-pdfviewer-common';
+import { EventsOutsideAngularDirective, hasObservers, shouldShowValidationUI, WatermarkOverlayComponent } from '@progress/kendo-angular-common';
 import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { PDFViewerDownloadEvent } from './models/events';
 import { saveAs } from '@progress/kendo-file-saver';
@@ -29,6 +29,7 @@ export class PDFViewerComponent {
     renderer;
     localizationService;
     cdr;
+    host;
     hostClass = true;
     direction;
     /**
@@ -95,7 +96,7 @@ export class PDFViewerComponent {
             this.setZoomLevel(value);
         }
         else {
-            this._zoom = 1;
+            this._zoom = INITIAL_ZOOM_LEVEL;
             this._fitType = zoomToFitOptions[value];
         }
         this._zoomToFit = typeof value !== 'number';
@@ -118,6 +119,18 @@ export class PDFViewerComponent {
      * @default 4
      */
     maxZoom = 4;
+    /**
+     * Determines whether all PDF document pages will be initially loaded or new pages will be loaded on demand when needed.
+     *
+     * @default false
+     */
+    loadOnDemand = false;
+    /**
+     * The number of pages that will be loaded on demand.
+     *
+     * @default 1
+     */
+    loadOnDemandPageSize = 1;
     /**
      * The event fired when a PDF document is successfully loaded in the `PDFViewer` component.
      */
@@ -182,8 +195,8 @@ export class PDFViewerComponent {
      * @hidden
      */
     set enabledSelection(value) {
-        if (this.pdfScroller) {
-            value ? this.pdfScroller.disablePanEventsTracking() : this.pdfScroller.enablePanEventsTracking();
+        if (this.pdfViewerWidget) {
+            value ? this.pdfViewerWidget.documentScroller.disablePanEventsTracking() : this.pdfViewerWidget.documentScroller.enablePanEventsTracking();
         }
         this._enabledSelection = value;
     }
@@ -205,14 +218,14 @@ export class PDFViewerComponent {
     _zoom = INITIAL_ZOOM_LEVEL;
     _fitType;
     _zoomToFit = false;
-    pdfScroller;
-    searchService;
     subs = new Subscription();
-    constructor(ngZone, renderer, localizationService, cdr) {
+    emitLoad = true;
+    constructor(ngZone, renderer, localizationService, cdr, host) {
         this.ngZone = ngZone;
         this.renderer = renderer;
         this.localizationService = localizationService;
         this.cdr = cdr;
+        this.host = host;
         const isValid = validatePackage(packageMetadata);
         this.showLicenseWatermark = shouldShowValidationUI(isValid);
         this.direction = localizationService.rtl ? 'rtl' : 'ltr';
@@ -221,21 +234,9 @@ export class PDFViewerComponent {
     ngOnInit() {
         this.subs.add(this.localizationService.changes.subscribe(({ rtl }) => this.direction = rtl ? 'rtl' : 'ltr'));
     }
-    ngAfterViewInit() {
-        const pagesContainer = this.pagesContainer.nativeElement.parentNode;
-        this.ngZone.runOutsideAngular(() => this.subs.add(this.renderer.listen(pagesContainer, 'scroll', this.scrollListener)));
-    }
     ngOnDestroy() {
         this.subs.unsubscribe();
-        removeChildren(this.pagesContainer.nativeElement);
-        if (this.pdfScroller) {
-            this.pdfScroller.destroy();
-            this.pdfScroller = null;
-        }
-        if (this.searchService) {
-            this.searchService.destroy();
-            this.searchService = null;
-        }
+        this.pdfViewerWidget?.destroy();
         this.pdfContext = null;
     }
     ngOnChanges(changes) {
@@ -256,7 +257,7 @@ export class PDFViewerComponent {
      * ([see example](slug:tools_pdfviewer#programmatically-scrolling-the-pdfviewer)).
      */
     scrollToPage(page) {
-        scrollToPage(this.pagesContainer.nativeElement, page);
+        this.pdfViewerWidget?.scrollToPage({ pageNumber: page });
     }
     /**
      * @hidden
@@ -268,18 +269,13 @@ export class PDFViewerComponent {
      * @hidden
      */
     onFileSelectError(e) {
-        hasObservers(this.error) && this.error.emit({ error: e, context: this.pdfContext });
+        this.zoneAwareEmitter('error', { error: e, context: this.pdfContext });
     }
     /**
      * @hidden
      */
     onPageChange(e) {
-        this.scrollToPage(e.skip);
-        hasObservers(this.pageChange) && this.pageChange.emit({
-            previousPage: this.skip + 1,
-            currentPage: e.skip + 1
-        });
-        this.skip = e.skip;
+        this.scrollToPage(e.skip + 1);
     }
     /**
      * @hidden
@@ -289,52 +285,49 @@ export class PDFViewerComponent {
             .then((data) => new Blob([data], { type: 'application/pdf' }))
             .then((blob) => {
             const downloadEvent = new PDFViewerDownloadEvent(blob, this.saveFileName, this.saveOptions, this.pdfContext);
-            this.ngZone.run(() => this.download.emit(downloadEvent));
+            this.zoneAwareEmitter('download', downloadEvent);
             if (!downloadEvent.isDefaultPrevented()) {
                 saveAs(blob, this.saveFileName, this.saveOptions);
             }
         })
             .catch((reason) => {
-            if (hasObservers(this.error)) {
-                this.ngZone.run(() => this.error.emit({
-                    error: reason,
-                    context: this.pdfContext
-                }));
-            }
+            this.zoneAwareEmitter('error', { error: reason, context: this.pdfContext });
         }));
     }
+    /**
+     * @hidden
+     */
+    stopPropagation = (e) => {
+        if (e.ctrlKey || e.metaKey) {
+            e.preventDefault();
+        }
+    };
     /**
      * @hidden
      */
     onZoomIn() {
-        const newZoom = Math.min(this.pdfContext.zoom + this.zoomRate, this.maxZoom);
-        if (newZoom !== this.pdfContext.zoom && this.pdfContext.pdfDoc) {
-            if (hasObservers(this.zoomLevelChange)) {
-                this.zoomLevelChange.emit({
-                    previousZoomLevel: this.zoom,
-                    currentZoomLevel: newZoom
-                });
-            }
+        const newZoom = Math.min(this.zoom + this.zoomRate, this.maxZoom);
+        if (newZoom !== this.zoom && this.pdfContext.pdfDoc) {
+            this.zoneAwareEmitter('zoomLevelChange', {
+                previousZoomLevel: this.zoom,
+                currentZoomLevel: newZoom
+            });
             this.zoom = this.pdfContext.zoom = newZoom;
             this.setZoomLevel(newZoom);
-            this.ngZone.runOutsideAngular(() => this.reloadDocument());
         }
     }
     /**
      * @hidden
      */
     onZoomOut() {
-        const newZoom = Math.max(this.pdfContext.zoom - this.zoomRate, this.minZoom);
-        if (newZoom !== this.pdfContext.zoom && this.pdfContext.pdfDoc) {
-            if (hasObservers(this.zoomLevelChange)) {
-                this.zoomLevelChange.emit({
-                    previousZoomLevel: this.zoom,
-                    currentZoomLevel: newZoom
-                });
-            }
+        const newZoom = Math.max(this.zoom - this.zoomRate, this.minZoom);
+        if (newZoom !== this.zoom && this.pdfContext.pdfDoc) {
+            this.zoneAwareEmitter('zoomLevelChange', {
+                previousZoomLevel: this.zoom,
+                currentZoomLevel: newZoom
+            });
             this.zoom = this.pdfContext.zoom = newZoom;
             this.setZoomLevel(newZoom);
-            this.ngZone.runOutsideAngular(() => this.reloadDocument());
         }
     }
     /**
@@ -348,55 +341,40 @@ export class PDFViewerComponent {
                 text: '100%'
             };
         }
-        let newZoom = calculateZoomLevel(zoomLevel.value, zoomLevel.type, this.pdfContext.zoom, this.pagesContainer.nativeElement);
-        newZoom = Math.round(newZoom * 100) / 100;
+        let newZoom = zoomLevel.type ? this.pdfViewerWidget?.calculateZoomLevel({
+            zoomLevel: zoomLevel.value,
+            zoomLevelType: zoomLevel.type,
+            currentZoom: this.zoom
+        }) : Math.min(Math.max(zoomLevel.value, this.minZoom), this.maxZoom);
+        newZoom = Math.floor(newZoom * 100) / 100;
         const sameZoom = this.zoom === newZoom;
-        if (!sameZoom && emit && hasObservers(this.zoomLevelChange)) {
-            this.zoomLevelChange.emit({
+        if (!sameZoom) {
+            emit && this.zoneAwareEmitter('zoomLevelChange', {
                 previousZoomLevel: this.zoom,
                 currentZoomLevel: newZoom
             });
+            this.zoom = this.pdfContext.zoom = newZoom;
         }
-        this.zoom = this.pdfContext.zoom = newZoom;
-        this.setZoomLevel(newZoom);
-        this.ngZone.runOutsideAngular(() => this.reloadDocument());
+        this.setZoomLevel(newZoom, zoomLevel.type);
     }
     /**
      * @hidden
      */
     onSearch() {
         this.searchActive = true;
-        this.ngZone.runOutsideAngular(() => {
-            const pagesTextLayers = Array.from(this.pagesContainer.nativeElement.querySelectorAll('.k-text-layer'));
-            this.searchService = new SearchService({
-                textContainers: pagesTextLayers || [],
-                highlightClass: 'k-search-highlight',
-                highlightMarkClass: 'k-search-highlight-mark',
-                charClass: 'k-text-char'
-            });
-        });
     }
     /**
      * @hidden
      */
     onPrint() {
         this.loading = true;
-        const onError = (e) => {
-            this.loading = false;
-            if (hasObservers(this.error)) {
-                this.error.emit(e);
-            }
-        };
-        const onDone = () => {
-            this.loading = false;
-        };
-        print(this.pdfContext.pdfPages, onDone, onError);
+        this.pdfViewerWidget?.printFile();
     }
     /**
      * @hidden
      */
     onSearchChange(e) {
-        this.currentMatches = this.searchService.search({ ...e });
+        this.currentMatches = this.pdfViewerWidget.searchService.search({ ...e });
         this.currentMatch = this.currentMatches.length ? 1 : 0;
     }
     /**
@@ -404,7 +382,7 @@ export class PDFViewerComponent {
      */
     closeSearch(toolbar) {
         this.searchActive = false;
-        this.searchService.destroy();
+        this.pdfViewerWidget.searchService.destroy();
         this.currentMatches = [];
         this.currentMatch = null;
         toolbar.focus();
@@ -413,57 +391,45 @@ export class PDFViewerComponent {
      * @hidden
      */
     onNextMatch() {
-        goToNextSearchMatch({ search: this.searchService, scroller: this.pdfScroller });
+        this.pdfViewerWidget?.goToNextSearchMatch();
         this.currentMatch = this.currentMatch + 1 > this.currentMatches.length ? 1 : this.currentMatch + 1;
     }
     /**
      * @hidden
      */
     onPreviousMatch() {
-        goToPreviousSearchMatch({ search: this.searchService, scroller: this.pdfScroller });
+        this.pdfViewerWidget?.goToPreviousSearchMatch();
         this.currentMatch = this.currentMatch - 1 < 1 ? this.currentMatches.length : this.currentMatch - 1;
     }
+    pdfViewerWidget;
     loadPdf(dataType, data) {
+        this.pdfViewerWidget?.destroy();
         this.loading = true;
+        this.emitLoad = true;
         this.ngZone.runOutsideAngular(() => setTimeout(() => {
+            // try to destroy if new dynamic data source
             removeChildren(this.pagesContainer.nativeElement);
-            loadPDF({
-                [dataType]: data,
-                dom: this.pagesContainer.nativeElement,
-                zoom: this.pdfContext?.zoom || this.zoom,
-                done: this.loadHandler,
-                error: this.errorHandler
-            });
-        }));
-    }
-    reloadDocument() {
-        if (this.pagesContainer?.nativeElement) {
-            this.ngZone.run(() => this.loading = true);
-            removeChildren(this.pagesContainer.nativeElement);
-            reloadDocument({
-                pdfDoc: this.pdfContext?.pdfDoc,
-                zoom: this.zoom,
-                dom: this.pagesContainer.nativeElement,
-                done: (pdfPages) => {
-                    this.pdfContext.pdfPages = pdfPages;
-                    this.ngZone.run(() => {
+            const file = dataType === 'src' || dataType === 'data' ? { [dataType]: data } : { data };
+            this.pdfViewerWidget = new PdfViewer(this.host.nativeElement, {
+                loadOnDemand: this.loadOnDemand,
+                loadOnDemandPageSize: this.loadOnDemandPageSize,
+                zoomLevel: this.zoom,
+                scaleFactor: 1,
+                fileDescriptor: file,
+                events: {
+                    pagesLoad: this.loadHandler,
+                    zoomStart: () => {
+                        this.skip = this.pdfViewerWidget.getCurrentPageIndex();
+                    },
+                    zoomEnd: this.zoomEndHandler,
+                    printEnd: () => {
                         this.loading = false;
-                        this.cdr.markForCheck();
-                    });
-                    this.assignPageIds();
-                },
-                error: (e) => {
-                    if (this.pdfScroller) {
-                        this.pdfScroller.destroy();
-                        this.pdfScroller = null;
-                    }
-                    this.pdfContext = null;
-                    if (hasObservers(this.error)) {
-                        this.ngZone.run(() => this.error.emit({ error: e, context: this.pdfContext }));
-                    }
+                    },
+                    scroll: this.scrollHandler,
+                    error: this.errorHandler
                 }
             });
-        }
+        }));
     }
     assignPageIds() {
         this.pagesContainer.nativeElement.querySelectorAll('.k-page').forEach((pageElement, index) => {
@@ -471,13 +437,15 @@ export class PDFViewerComponent {
             this.renderer.setAttribute(pageElement, 'id', id);
         });
     }
-    setZoomLevel(zoom) {
-        const option = this.zoomOptionsData.find(item => !item.type && item.value === zoom);
-        this.zoomLevel = option ? { ...option } : {
+    setZoomLevel(zoom, type) {
+        const option = this.zoomOptionsData.find(item => (!item.type && item.value === zoom) || (item.type && item.type === type));
+        this.zoomLevel = structuredClone(option) ?? {
             value: zoom,
             displayValue: `${Math.round(zoom * 100)}%`,
             text: `${Math.round(zoom * 100)}%`
         };
+        this.pdfViewerWidget?.setState({ zoomLevel: zoom });
+        this.pdfViewerWidget?.reloadFile(this.pdfContext.pdfDoc);
     }
     verifySettings(changes) {
         const sourceTypes = ['url', 'arrayBuffer', 'data', 'typedArray'];
@@ -492,54 +460,61 @@ export class PDFViewerComponent {
     isSet(changes, source) {
         return this[source] || changes[source]?.currentValue;
     }
-    scrollListener = (e) => {
-        const nextPage = currentPage(e.target.parentNode);
-        if (nextPage !== this.skip) {
-            this.ngZone.run(() => {
-                hasObservers(this.pageChange) && this.pageChange.emit({
-                    previousPage: this.currentPage,
-                    currentPage: nextPage + 1
-                });
-                this.skip = nextPage;
+    scrollHandler = (e) => {
+        const currentPage = this.currentPage;
+        this.skip = e.pageNumber - 1;
+        this.cdr.markForCheck();
+        if (e.isPageChanged) {
+            this.zoneAwareEmitter('pageChange', {
+                previousPage: currentPage,
+                currentPage: e.pageNumber
             });
         }
     };
     loadHandler = (e) => {
+        if (!this.pdfContext) {
+            this.pdfViewerWidget.documentScroller.enablePanEventsTracking();
+        }
         if (!this._zoomToFit) {
             this.ngZone.run(() => {
-                this.pdfContext = { ...e, element: this.pagesContainer.nativeElement };
+                this.pdfContext = { ...e, element: this.pagesContainer.nativeElement, zoom: e.sender.state.zoomLevel };
                 this.loading = false;
-                this.cdr.markForCheck();
+                if (this.emitLoad) {
+                    this.zoneAwareEmitter('load', { context: this.pdfContext });
+                    this.emitLoad = false;
+                }
             });
         }
         else {
             const zoomLevelOption = this.zoomOptionsData.find(item => item.type === this._fitType);
             this.pdfContext = { ...e, element: this.pagesContainer.nativeElement };
             this.onZoomLevelChange(zoomLevelOption, false);
-            this.cdr.markForCheck();
+            this.pdfViewerWidget.reloadFile(this.pdfContext.pdfDoc);
         }
-        if (this.pdfScroller) {
-            this.pdfScroller.destroy();
-        }
-        this.pdfScroller = this.pdfScroller = new Scroller(this.pagesContainer.nativeElement.parentNode, {
-            filter: '.k-page',
-            events: {}
-        });
-        this.pdfScroller.enablePanEventsTracking();
+        this.cdr.markForCheck();
         this.assignPageIds();
-        if (hasObservers(this.load)) {
-            this.ngZone.run(() => this.load.emit({ context: this.pdfContext }));
-        }
+    };
+    zoomEndHandler = (e) => {
+        const zoom = Math.min(Math.max(e.zoomLevel, this.minZoom), this.maxZoom);
+        this.zoneAwareEmitter('zoomLevelChange', {
+            currentZoomLevel: zoom,
+            previousZoomLevel: this.zoom
+        });
+        this.zoom = zoom;
+        this.setZoomLevel(zoom);
     };
     errorHandler = (e) => {
         this.ngZone.run(() => this.loading = false);
         this.pdfContext = null;
-        if (hasObservers(this.error)) {
-            this.ngZone.run(() => this.error.emit({ error: e, context: this.pdfContext }));
+        this.zoneAwareEmitter('error', { error: e, context: this.pdfContext });
+    };
+    zoneAwareEmitter = (eventName, eventData) => {
+        if (hasObservers(this[eventName])) {
+            this.ngZone.run(() => this[eventName].emit(eventData));
         }
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PDFViewerComponent, deps: [{ token: i0.NgZone }, { token: i0.Renderer2 }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PDFViewerComponent, isStandalone: true, selector: "kendo-pdfviewer", inputs: { tools: "tools", loaderSettings: "loaderSettings", saveFileName: "saveFileName", saveOptions: "saveOptions", url: "url", data: "data", arrayBuffer: "arrayBuffer", typedArray: "typedArray", zoom: "zoom", zoomRate: "zoomRate", minZoom: "minZoom", maxZoom: "maxZoom" }, outputs: { load: "load", error: "error", download: "download", pageChange: "pageChange", zoomLevelChange: "zoomLevelChange" }, host: { properties: { "class.k-pdf-viewer": "this.hostClass", "attr.dir": "this.direction" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PDFViewerComponent, deps: [{ token: i0.NgZone }, { token: i0.Renderer2 }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PDFViewerComponent, isStandalone: true, selector: "kendo-pdfviewer", inputs: { tools: "tools", loaderSettings: "loaderSettings", saveFileName: "saveFileName", saveOptions: "saveOptions", url: "url", data: "data", arrayBuffer: "arrayBuffer", typedArray: "typedArray", zoom: "zoom", zoomRate: "zoomRate", minZoom: "minZoom", maxZoom: "maxZoom", loadOnDemand: "loadOnDemand", loadOnDemandPageSize: "loadOnDemandPageSize" }, outputs: { load: "load", error: "error", download: "download", pageChange: "pageChange", zoomLevelChange: "zoomLevelChange" }, host: { properties: { "class.k-pdf-viewer": "this.hostClass", "attr.dir": "this.direction" } }, providers: [
             LocalizationService,
             {
                 provide: L10N_PREFIX,
@@ -668,17 +643,15 @@ export class PDFViewerComponent {
                 (close)="closeSearch(toolbar)"></div>
             <div 
                 #pagesContainer
+                [kendoEventsOutsideAngular]="{
+                    wheel: stopPropagation
+                }"
                 class="k-pdf-viewer-pages"
-                [style.--scale-factor]="zoom"
-                [attr.id]="pagesContainerId">
-                <div class="k-page">
-                    <div class="k-text-layer"></div>
-                </div>
-            </div>
+                [attr.id]="pagesContainerId"></div>
         </div>
 
         <div kendoWatermarkOverlay *ngIf="showLicenseWatermark"></div>
-    `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedPDFViewerMessagesDirective, selector: "[kendoPDFViewerLocalizedMessages]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LoaderComponent, selector: "[kendoPDFViewerLoader]", inputs: ["settings"] }, { kind: "component", type: ToolbarComponent, selector: "[kendoPDFViewerToolbar]", inputs: ["zoomLevel", "calculatedComboBoxValue", "skip", "pageSize", "total", "zoomInDisabled", "zoomOutDisabled", "disabledTools", "zoomLevelChooserValue", "zoomOptionsData", "pagesContainerId", "tools"], outputs: ["fileSelect", "fileSelectStart", "fileSelectError", "download", "selectionEnabled", "panningEnabled", "pageChange", "zoomIn", "zoomOut", "zoomLevelChange", "print", "search"] }, { kind: "component", type: PDFViewerSearchComponent, selector: "[kendoPDFViewerSearch]", inputs: ["matches", "currentMatch"], outputs: ["searchChange", "prevMatch", "nextMatch", "close"] }, { kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]" }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedPDFViewerMessagesDirective, selector: "[kendoPDFViewerLocalizedMessages]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: LoaderComponent, selector: "[kendoPDFViewerLoader]", inputs: ["settings"] }, { kind: "component", type: ToolbarComponent, selector: "[kendoPDFViewerToolbar]", inputs: ["zoomLevel", "calculatedComboBoxValue", "skip", "pageSize", "total", "zoomInDisabled", "zoomOutDisabled", "disabledTools", "zoomLevelChooserValue", "zoomOptionsData", "pagesContainerId", "tools"], outputs: ["fileSelect", "fileSelectStart", "fileSelectError", "download", "selectionEnabled", "panningEnabled", "pageChange", "zoomIn", "zoomOut", "zoomLevelChange", "print", "search"] }, { kind: "component", type: PDFViewerSearchComponent, selector: "[kendoPDFViewerSearch]", inputs: ["matches", "currentMatch"], outputs: ["searchChange", "prevMatch", "nextMatch", "close"] }, { kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PDFViewerComponent, decorators: [{
             type: Component,
@@ -815,21 +788,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 (close)="closeSearch(toolbar)"></div>
             <div 
                 #pagesContainer
+                [kendoEventsOutsideAngular]="{
+                    wheel: stopPropagation
+                }"
                 class="k-pdf-viewer-pages"
-                [style.--scale-factor]="zoom"
-                [attr.id]="pagesContainerId">
-                <div class="k-page">
-                    <div class="k-text-layer"></div>
-                </div>
-            </div>
+                [attr.id]="pagesContainerId"></div>
         </div>
 
         <div kendoWatermarkOverlay *ngIf="showLicenseWatermark"></div>
     `,
                     standalone: true,
-                    imports: [LocalizedPDFViewerMessagesDirective, NgIf, LoaderComponent, ToolbarComponent, PDFViewerSearchComponent, WatermarkOverlayComponent]
+                    imports: [LocalizedPDFViewerMessagesDirective, NgIf, EventsOutsideAngularDirective, LoaderComponent, ToolbarComponent, PDFViewerSearchComponent, WatermarkOverlayComponent]
                 }]
-        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.Renderer2 }, { type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { hostClass: [{
+        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.Renderer2 }, { type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }]; }, propDecorators: { hostClass: [{
                 type: HostBinding,
                 args: ['class.k-pdf-viewer']
             }], direction: [{
@@ -859,6 +830,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], maxZoom: [{
                 type: Input
+            }], loadOnDemand: [{
+                type: Input
+            }], loadOnDemandPageSize: [{
+                type: Input
             }], load: [{
                 type: Output
             }], error: [{

package/esm2022/util.mjs

@@ -21,13 +21,13 @@ export const zoomOptionsData = [{
         id: 1,
         text: 'Fit to width',
         type: 'FitToWidth',
-        displayValue: '',
+        displayValue: 'Fit to width',
         value: 1
     }, {
         id: 2,
         text: 'Fit to page',
         type: 'FitToPage',
-        displayValue: '',
+        displayValue: 'Fit to page',
         value: 1
     }, {
         id: 3,

package/fesm2022/progress-kendo-angular-pdfviewer.mjs

@@ -7,8 +7,8 @@ import { Directive, Input, forwardRef, Component, Injectable, HostBinding, Event
 import * as i1 from '@progress/kendo-angular-l10n';
 import { ComponentMessages, LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { validatePackage } from '@progress/kendo-licensing';
-import { removeChildren, scrollToPage, calculateZoomLevel, SearchService, print, goToNextSearchMatch, goToPreviousSearchMatch, loadPDF, reloadDocument, currentPage, Scroller } from '@progress/kendo-pdfviewer-common';
-import { PreventableEvent, Keys, focusableSelector, shouldShowValidationUI, hasObservers, WatermarkOverlayComponent, ResizeBatchService } from '@progress/kendo-angular-common';
+import { removeChildren, PdfViewer } from '@progress/kendo-pdfviewer-common';
+import { PreventableEvent, Keys, focusableSelector, shouldShowValidationUI, hasObservers, EventsOutsideAngularDirective, WatermarkOverlayComponent, ResizeBatchService } from '@progress/kendo-angular-common';
 import { saveAs } from '@progress/kendo-file-saver';
 import { Subscription } from 'rxjs';
 import { PagerComponent, CustomMessagesComponent } from '@progress/kendo-angular-pager';
@@ -228,8 +228,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1744029261,
-    version: '18.5.0-develop.8',
+    publishDate: 1744039419,
+    version: '18.5.0-develop.9',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning',
 };
 
@@ -252,13 +252,13 @@ const zoomOptionsData = [{
         id: 1,
         text: 'Fit to width',
         type: 'FitToWidth',
-        displayValue: '',
+        displayValue: 'Fit to width',
         value: 1
     }, {
         id: 2,
         text: 'Fit to page',
         type: 'FitToPage',
-        displayValue: '',
+        displayValue: 'Fit to page',
         value: 1
     }, {
         id: 3,
@@ -1339,6 +1339,7 @@ class PDFViewerComponent {
     renderer;
     localizationService;
     cdr;
+    host;
     hostClass = true;
     direction;
     /**
@@ -1405,7 +1406,7 @@ class PDFViewerComponent {
             this.setZoomLevel(value);
         }
         else {
-            this._zoom = 1;
+            this._zoom = INITIAL_ZOOM_LEVEL;
             this._fitType = zoomToFitOptions[value];
         }
         this._zoomToFit = typeof value !== 'number';
@@ -1428,6 +1429,18 @@ class PDFViewerComponent {
      * @default 4
      */
     maxZoom = 4;
+    /**
+     * Determines whether all PDF document pages will be initially loaded or new pages will be loaded on demand when needed.
+     *
+     * @default false
+     */
+    loadOnDemand = false;
+    /**
+     * The number of pages that will be loaded on demand.
+     *
+     * @default 1
+     */
+    loadOnDemandPageSize = 1;
     /**
      * The event fired when a PDF document is successfully loaded in the `PDFViewer` component.
      */
@@ -1492,8 +1505,8 @@ class PDFViewerComponent {
      * @hidden
      */
     set enabledSelection(value) {
-        if (this.pdfScroller) {
-            value ? this.pdfScroller.disablePanEventsTracking() : this.pdfScroller.enablePanEventsTracking();
+        if (this.pdfViewerWidget) {
+            value ? this.pdfViewerWidget.documentScroller.disablePanEventsTracking() : this.pdfViewerWidget.documentScroller.enablePanEventsTracking();
         }
         this._enabledSelection = value;
     }
@@ -1515,14 +1528,14 @@ class PDFViewerComponent {
     _zoom = INITIAL_ZOOM_LEVEL;
     _fitType;
     _zoomToFit = false;
-    pdfScroller;
-    searchService;
     subs = new Subscription();
-    constructor(ngZone, renderer, localizationService, cdr) {
+    emitLoad = true;
+    constructor(ngZone, renderer, localizationService, cdr, host) {
         this.ngZone = ngZone;
         this.renderer = renderer;
         this.localizationService = localizationService;
         this.cdr = cdr;
+        this.host = host;
         const isValid = validatePackage(packageMetadata);
         this.showLicenseWatermark = shouldShowValidationUI(isValid);
         this.direction = localizationService.rtl ? 'rtl' : 'ltr';
@@ -1531,21 +1544,9 @@ class PDFViewerComponent {
     ngOnInit() {
         this.subs.add(this.localizationService.changes.subscribe(({ rtl }) => this.direction = rtl ? 'rtl' : 'ltr'));
     }
-    ngAfterViewInit() {
-        const pagesContainer = this.pagesContainer.nativeElement.parentNode;
-        this.ngZone.runOutsideAngular(() => this.subs.add(this.renderer.listen(pagesContainer, 'scroll', this.scrollListener)));
-    }
     ngOnDestroy() {
         this.subs.unsubscribe();
-        removeChildren(this.pagesContainer.nativeElement);
-        if (this.pdfScroller) {
-            this.pdfScroller.destroy();
-            this.pdfScroller = null;
-        }
-        if (this.searchService) {
-            this.searchService.destroy();
-            this.searchService = null;
-        }
+        this.pdfViewerWidget?.destroy();
         this.pdfContext = null;
     }
     ngOnChanges(changes) {
@@ -1566,7 +1567,7 @@ class PDFViewerComponent {
      * ([see example](slug:tools_pdfviewer#programmatically-scrolling-the-pdfviewer)).
      */
     scrollToPage(page) {
-        scrollToPage(this.pagesContainer.nativeElement, page);
+        this.pdfViewerWidget?.scrollToPage({ pageNumber: page });
     }
     /**
      * @hidden
@@ -1578,18 +1579,13 @@ class PDFViewerComponent {
      * @hidden
      */
     onFileSelectError(e) {
-        hasObservers(this.error) && this.error.emit({ error: e, context: this.pdfContext });
+        this.zoneAwareEmitter('error', { error: e, context: this.pdfContext });
     }
     /**
      * @hidden
      */
     onPageChange(e) {
-        this.scrollToPage(e.skip);
-        hasObservers(this.pageChange) && this.pageChange.emit({
-            previousPage: this.skip + 1,
-            currentPage: e.skip + 1
-        });
-        this.skip = e.skip;
+        this.scrollToPage(e.skip + 1);
     }
     /**
      * @hidden
@@ -1599,52 +1595,49 @@ class PDFViewerComponent {
             .then((data) => new Blob([data], { type: 'application/pdf' }))
             .then((blob) => {
             const downloadEvent = new PDFViewerDownloadEvent(blob, this.saveFileName, this.saveOptions, this.pdfContext);
-            this.ngZone.run(() => this.download.emit(downloadEvent));
+            this.zoneAwareEmitter('download', downloadEvent);
             if (!downloadEvent.isDefaultPrevented()) {
                 saveAs(blob, this.saveFileName, this.saveOptions);
             }
         })
             .catch((reason) => {
-            if (hasObservers(this.error)) {
-                this.ngZone.run(() => this.error.emit({
-                    error: reason,
-                    context: this.pdfContext
-                }));
-            }
+            this.zoneAwareEmitter('error', { error: reason, context: this.pdfContext });
         }));
     }
+    /**
+     * @hidden
+     */
+    stopPropagation = (e) => {
+        if (e.ctrlKey || e.metaKey) {
+            e.preventDefault();
+        }
+    };
     /**
      * @hidden
      */
     onZoomIn() {
-        const newZoom = Math.min(this.pdfContext.zoom + this.zoomRate, this.maxZoom);
-        if (newZoom !== this.pdfContext.zoom && this.pdfContext.pdfDoc) {
-            if (hasObservers(this.zoomLevelChange)) {
-                this.zoomLevelChange.emit({
-                    previousZoomLevel: this.zoom,
-                    currentZoomLevel: newZoom
-                });
-            }
+        const newZoom = Math.min(this.zoom + this.zoomRate, this.maxZoom);
+        if (newZoom !== this.zoom && this.pdfContext.pdfDoc) {
+            this.zoneAwareEmitter('zoomLevelChange', {
+                previousZoomLevel: this.zoom,
+                currentZoomLevel: newZoom
+            });
             this.zoom = this.pdfContext.zoom = newZoom;
             this.setZoomLevel(newZoom);
-            this.ngZone.runOutsideAngular(() => this.reloadDocument());
         }
     }
     /**
      * @hidden
      */
     onZoomOut() {
-        const newZoom = Math.max(this.pdfContext.zoom - this.zoomRate, this.minZoom);
-        if (newZoom !== this.pdfContext.zoom && this.pdfContext.pdfDoc) {
-            if (hasObservers(this.zoomLevelChange)) {
-                this.zoomLevelChange.emit({
-                    previousZoomLevel: this.zoom,
-                    currentZoomLevel: newZoom
-                });
-            }
+        const newZoom = Math.max(this.zoom - this.zoomRate, this.minZoom);
+        if (newZoom !== this.zoom && this.pdfContext.pdfDoc) {
+            this.zoneAwareEmitter('zoomLevelChange', {
+                previousZoomLevel: this.zoom,
+                currentZoomLevel: newZoom
+            });
             this.zoom = this.pdfContext.zoom = newZoom;
             this.setZoomLevel(newZoom);
-            this.ngZone.runOutsideAngular(() => this.reloadDocument());
         }
     }
     /**
@@ -1658,55 +1651,40 @@ class PDFViewerComponent {
                 text: '100%'
             };
         }
-        let newZoom = calculateZoomLevel(zoomLevel.value, zoomLevel.type, this.pdfContext.zoom, this.pagesContainer.nativeElement);
-        newZoom = Math.round(newZoom * 100) / 100;
+        let newZoom = zoomLevel.type ? this.pdfViewerWidget?.calculateZoomLevel({
+            zoomLevel: zoomLevel.value,
+            zoomLevelType: zoomLevel.type,
+            currentZoom: this.zoom
+        }) : Math.min(Math.max(zoomLevel.value, this.minZoom), this.maxZoom);
+        newZoom = Math.floor(newZoom * 100) / 100;
         const sameZoom = this.zoom === newZoom;
-        if (!sameZoom && emit && hasObservers(this.zoomLevelChange)) {
-            this.zoomLevelChange.emit({
+        if (!sameZoom) {
+            emit && this.zoneAwareEmitter('zoomLevelChange', {
                 previousZoomLevel: this.zoom,
                 currentZoomLevel: newZoom
             });
+            this.zoom = this.pdfContext.zoom = newZoom;
         }
-        this.zoom = this.pdfContext.zoom = newZoom;
-        this.setZoomLevel(newZoom);
-        this.ngZone.runOutsideAngular(() => this.reloadDocument());
+        this.setZoomLevel(newZoom, zoomLevel.type);
     }
     /**
      * @hidden
      */
     onSearch() {
         this.searchActive = true;
-        this.ngZone.runOutsideAngular(() => {
-            const pagesTextLayers = Array.from(this.pagesContainer.nativeElement.querySelectorAll('.k-text-layer'));
-            this.searchService = new SearchService({
-                textContainers: pagesTextLayers || [],
-                highlightClass: 'k-search-highlight',
-                highlightMarkClass: 'k-search-highlight-mark',
-                charClass: 'k-text-char'
-            });
-        });
     }
     /**
      * @hidden
      */
     onPrint() {
         this.loading = true;
-        const onError = (e) => {
-            this.loading = false;
-            if (hasObservers(this.error)) {
-                this.error.emit(e);
-            }
-        };
-        const onDone = () => {
-            this.loading = false;
-        };
-        print(this.pdfContext.pdfPages, onDone, onError);
+        this.pdfViewerWidget?.printFile();
     }
     /**
      * @hidden
      */
     onSearchChange(e) {
-        this.currentMatches = this.searchService.search({ ...e });
+        this.currentMatches = this.pdfViewerWidget.searchService.search({ ...e });
         this.currentMatch = this.currentMatches.length ? 1 : 0;
     }
     /**
@@ -1714,7 +1692,7 @@ class PDFViewerComponent {
      */
     closeSearch(toolbar) {
         this.searchActive = false;
-        this.searchService.destroy();
+        this.pdfViewerWidget.searchService.destroy();
         this.currentMatches = [];
         this.currentMatch = null;
         toolbar.focus();
@@ -1723,57 +1701,45 @@ class PDFViewerComponent {
      * @hidden
      */
     onNextMatch() {
-        goToNextSearchMatch({ search: this.searchService, scroller: this.pdfScroller });
+        this.pdfViewerWidget?.goToNextSearchMatch();
         this.currentMatch = this.currentMatch + 1 > this.currentMatches.length ? 1 : this.currentMatch + 1;
     }
     /**
      * @hidden
      */
     onPreviousMatch() {
-        goToPreviousSearchMatch({ search: this.searchService, scroller: this.pdfScroller });
+        this.pdfViewerWidget?.goToPreviousSearchMatch();
         this.currentMatch = this.currentMatch - 1 < 1 ? this.currentMatches.length : this.currentMatch - 1;
     }
+    pdfViewerWidget;
     loadPdf(dataType, data) {
+        this.pdfViewerWidget?.destroy();
         this.loading = true;
+        this.emitLoad = true;
         this.ngZone.runOutsideAngular(() => setTimeout(() => {
+            // try to destroy if new dynamic data source
             removeChildren(this.pagesContainer.nativeElement);
-            loadPDF({
-                [dataType]: data,
-                dom: this.pagesContainer.nativeElement,
-                zoom: this.pdfContext?.zoom || this.zoom,
-                done: this.loadHandler,
-                error: this.errorHandler
-            });
-        }));
-    }
-    reloadDocument() {
-        if (this.pagesContainer?.nativeElement) {
-            this.ngZone.run(() => this.loading = true);
-            removeChildren(this.pagesContainer.nativeElement);
-            reloadDocument({
-                pdfDoc: this.pdfContext?.pdfDoc,
-                zoom: this.zoom,
-                dom: this.pagesContainer.nativeElement,
-                done: (pdfPages) => {
-                    this.pdfContext.pdfPages = pdfPages;
-                    this.ngZone.run(() => {
+            const file = dataType === 'src' || dataType === 'data' ? { [dataType]: data } : { data };
+            this.pdfViewerWidget = new PdfViewer(this.host.nativeElement, {
+                loadOnDemand: this.loadOnDemand,
+                loadOnDemandPageSize: this.loadOnDemandPageSize,
+                zoomLevel: this.zoom,
+                scaleFactor: 1,
+                fileDescriptor: file,
+                events: {
+                    pagesLoad: this.loadHandler,
+                    zoomStart: () => {
+                        this.skip = this.pdfViewerWidget.getCurrentPageIndex();
+                    },
+                    zoomEnd: this.zoomEndHandler,
+                    printEnd: () => {
                         this.loading = false;
-                        this.cdr.markForCheck();
-                    });
-                    this.assignPageIds();
-                },
-                error: (e) => {
-                    if (this.pdfScroller) {
-                        this.pdfScroller.destroy();
-                        this.pdfScroller = null;
-                    }
-                    this.pdfContext = null;
-                    if (hasObservers(this.error)) {
-                        this.ngZone.run(() => this.error.emit({ error: e, context: this.pdfContext }));
-                    }
+                    },
+                    scroll: this.scrollHandler,
+                    error: this.errorHandler
                 }
             });
-        }
+        }));
     }
     assignPageIds() {
         this.pagesContainer.nativeElement.querySelectorAll('.k-page').forEach((pageElement, index) => {
@@ -1781,13 +1747,15 @@ class PDFViewerComponent {
             this.renderer.setAttribute(pageElement, 'id', id);
         });
     }
-    setZoomLevel(zoom) {
-        const option = this.zoomOptionsData.find(item => !item.type && item.value === zoom);
-        this.zoomLevel = option ? { ...option } : {
+    setZoomLevel(zoom, type) {
+        const option = this.zoomOptionsData.find(item => (!item.type && item.value === zoom) || (item.type && item.type === type));
+        this.zoomLevel = structuredClone(option) ?? {
             value: zoom,
             displayValue: `${Math.round(zoom * 100)}%`,
             text: `${Math.round(zoom * 100)}%`
         };
+        this.pdfViewerWidget?.setState({ zoomLevel: zoom });
+        this.pdfViewerWidget?.reloadFile(this.pdfContext.pdfDoc);
     }
     verifySettings(changes) {
         const sourceTypes = ['url', 'arrayBuffer', 'data', 'typedArray'];
@@ -1802,54 +1770,61 @@ class PDFViewerComponent {
     isSet(changes, source) {
         return this[source] || changes[source]?.currentValue;
     }
-    scrollListener = (e) => {
-        const nextPage = currentPage(e.target.parentNode);
-        if (nextPage !== this.skip) {
-            this.ngZone.run(() => {
-                hasObservers(this.pageChange) && this.pageChange.emit({
-                    previousPage: this.currentPage,
-                    currentPage: nextPage + 1
-                });
-                this.skip = nextPage;
+    scrollHandler = (e) => {
+        const currentPage = this.currentPage;
+        this.skip = e.pageNumber - 1;
+        this.cdr.markForCheck();
+        if (e.isPageChanged) {
+            this.zoneAwareEmitter('pageChange', {
+                previousPage: currentPage,
+                currentPage: e.pageNumber
             });
         }
     };
     loadHandler = (e) => {
+        if (!this.pdfContext) {
+            this.pdfViewerWidget.documentScroller.enablePanEventsTracking();
+        }
         if (!this._zoomToFit) {
             this.ngZone.run(() => {
-                this.pdfContext = { ...e, element: this.pagesContainer.nativeElement };
+                this.pdfContext = { ...e, element: this.pagesContainer.nativeElement, zoom: e.sender.state.zoomLevel };
                 this.loading = false;
-                this.cdr.markForCheck();
+                if (this.emitLoad) {
+                    this.zoneAwareEmitter('load', { context: this.pdfContext });
+                    this.emitLoad = false;
+                }
             });
         }
         else {
             const zoomLevelOption = this.zoomOptionsData.find(item => item.type === this._fitType);
             this.pdfContext = { ...e, element: this.pagesContainer.nativeElement };
             this.onZoomLevelChange(zoomLevelOption, false);
-            this.cdr.markForCheck();
-        }
-        if (this.pdfScroller) {
-            this.pdfScroller.destroy();
+            this.pdfViewerWidget.reloadFile(this.pdfContext.pdfDoc);
         }
-        this.pdfScroller = this.pdfScroller = new Scroller(this.pagesContainer.nativeElement.parentNode, {
-            filter: '.k-page',
-            events: {}
-        });
-        this.pdfScroller.enablePanEventsTracking();
+        this.cdr.markForCheck();
         this.assignPageIds();
-        if (hasObservers(this.load)) {
-            this.ngZone.run(() => this.load.emit({ context: this.pdfContext }));
-        }
+    };
+    zoomEndHandler = (e) => {
+        const zoom = Math.min(Math.max(e.zoomLevel, this.minZoom), this.maxZoom);
+        this.zoneAwareEmitter('zoomLevelChange', {
+            currentZoomLevel: zoom,
+            previousZoomLevel: this.zoom
+        });
+        this.zoom = zoom;
+        this.setZoomLevel(zoom);
     };
     errorHandler = (e) => {
         this.ngZone.run(() => this.loading = false);
         this.pdfContext = null;
-        if (hasObservers(this.error)) {
-            this.ngZone.run(() => this.error.emit({ error: e, context: this.pdfContext }));
+        this.zoneAwareEmitter('error', { error: e, context: this.pdfContext });
+    };
+    zoneAwareEmitter = (eventName, eventData) => {
+        if (hasObservers(this[eventName])) {
+            this.ngZone.run(() => this[eventName].emit(eventData));
         }
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PDFViewerComponent, deps: [{ token: i0.NgZone }, { token: i0.Renderer2 }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PDFViewerComponent, isStandalone: true, selector: "kendo-pdfviewer", inputs: { tools: "tools", loaderSettings: "loaderSettings", saveFileName: "saveFileName", saveOptions: "saveOptions", url: "url", data: "data", arrayBuffer: "arrayBuffer", typedArray: "typedArray", zoom: "zoom", zoomRate: "zoomRate", minZoom: "minZoom", maxZoom: "maxZoom" }, outputs: { load: "load", error: "error", download: "download", pageChange: "pageChange", zoomLevelChange: "zoomLevelChange" }, host: { properties: { "class.k-pdf-viewer": "this.hostClass", "attr.dir": "this.direction" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PDFViewerComponent, deps: [{ token: i0.NgZone }, { token: i0.Renderer2 }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PDFViewerComponent, isStandalone: true, selector: "kendo-pdfviewer", inputs: { tools: "tools", loaderSettings: "loaderSettings", saveFileName: "saveFileName", saveOptions: "saveOptions", url: "url", data: "data", arrayBuffer: "arrayBuffer", typedArray: "typedArray", zoom: "zoom", zoomRate: "zoomRate", minZoom: "minZoom", maxZoom: "maxZoom", loadOnDemand: "loadOnDemand", loadOnDemandPageSize: "loadOnDemandPageSize" }, outputs: { load: "load", error: "error", download: "download", pageChange: "pageChange", zoomLevelChange: "zoomLevelChange" }, host: { properties: { "class.k-pdf-viewer": "this.hostClass", "attr.dir": "this.direction" } }, providers: [
             LocalizationService,
             {
                 provide: L10N_PREFIX,
@@ -1978,17 +1953,15 @@ class PDFViewerComponent {
                 (close)="closeSearch(toolbar)"></div>
             <div 
                 #pagesContainer
+                [kendoEventsOutsideAngular]="{
+                    wheel: stopPropagation
+                }"
                 class="k-pdf-viewer-pages"
-                [style.--scale-factor]="zoom"
-                [attr.id]="pagesContainerId">
-                <div class="k-page">
-                    <div class="k-text-layer"></div>
-                </div>
-            </div>
+                [attr.id]="pagesContainerId"></div>
         </div>
 
         <div kendoWatermarkOverlay *ngIf="showLicenseWatermark"></div>
-    `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedPDFViewerMessagesDirective, selector: "[kendoPDFViewerLocalizedMessages]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LoaderComponent, selector: "[kendoPDFViewerLoader]", inputs: ["settings"] }, { kind: "component", type: ToolbarComponent, selector: "[kendoPDFViewerToolbar]", inputs: ["zoomLevel", "calculatedComboBoxValue", "skip", "pageSize", "total", "zoomInDisabled", "zoomOutDisabled", "disabledTools", "zoomLevelChooserValue", "zoomOptionsData", "pagesContainerId", "tools"], outputs: ["fileSelect", "fileSelectStart", "fileSelectError", "download", "selectionEnabled", "panningEnabled", "pageChange", "zoomIn", "zoomOut", "zoomLevelChange", "print", "search"] }, { kind: "component", type: PDFViewerSearchComponent, selector: "[kendoPDFViewerSearch]", inputs: ["matches", "currentMatch"], outputs: ["searchChange", "prevMatch", "nextMatch", "close"] }, { kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]" }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedPDFViewerMessagesDirective, selector: "[kendoPDFViewerLocalizedMessages]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: LoaderComponent, selector: "[kendoPDFViewerLoader]", inputs: ["settings"] }, { kind: "component", type: ToolbarComponent, selector: "[kendoPDFViewerToolbar]", inputs: ["zoomLevel", "calculatedComboBoxValue", "skip", "pageSize", "total", "zoomInDisabled", "zoomOutDisabled", "disabledTools", "zoomLevelChooserValue", "zoomOptionsData", "pagesContainerId", "tools"], outputs: ["fileSelect", "fileSelectStart", "fileSelectError", "download", "selectionEnabled", "panningEnabled", "pageChange", "zoomIn", "zoomOut", "zoomLevelChange", "print", "search"] }, { kind: "component", type: PDFViewerSearchComponent, selector: "[kendoPDFViewerSearch]", inputs: ["matches", "currentMatch"], outputs: ["searchChange", "prevMatch", "nextMatch", "close"] }, { kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PDFViewerComponent, decorators: [{
             type: Component,
@@ -2125,21 +2098,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 (close)="closeSearch(toolbar)"></div>
             <div 
                 #pagesContainer
+                [kendoEventsOutsideAngular]="{
+                    wheel: stopPropagation
+                }"
                 class="k-pdf-viewer-pages"
-                [style.--scale-factor]="zoom"
-                [attr.id]="pagesContainerId">
-                <div class="k-page">
-                    <div class="k-text-layer"></div>
-                </div>
-            </div>
+                [attr.id]="pagesContainerId"></div>
         </div>
 
         <div kendoWatermarkOverlay *ngIf="showLicenseWatermark"></div>
     `,
                     standalone: true,
-                    imports: [LocalizedPDFViewerMessagesDirective, NgIf, LoaderComponent, ToolbarComponent, PDFViewerSearchComponent, WatermarkOverlayComponent]
+                    imports: [LocalizedPDFViewerMessagesDirective, NgIf, EventsOutsideAngularDirective, LoaderComponent, ToolbarComponent, PDFViewerSearchComponent, WatermarkOverlayComponent]
                 }]
-        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.Renderer2 }, { type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { hostClass: [{
+        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.Renderer2 }, { type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }]; }, propDecorators: { hostClass: [{
                 type: HostBinding,
                 args: ['class.k-pdf-viewer']
             }], direction: [{
@@ -2169,6 +2140,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], maxZoom: [{
                 type: Input
+            }], loadOnDemand: [{
+                type: Input
+            }], loadOnDemandPageSize: [{
+                type: Input
             }], load: [{
                 type: Output
             }], error: [{

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-pdfviewer",
-  "version": "18.5.0-develop.8",
+  "version": "18.5.0-develop.9",
   "description": "Kendo UI PDFViewer for Angular",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -19,7 +19,7 @@
     "package": {
       "productName": "Kendo UI for Angular",
       "productCode": "KENDOUIANGULAR",
-      "publishDate": 1744029261,
+      "publishDate": 1744039419,
       "licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning"
     }
   },
@@ -29,21 +29,21 @@
     "@angular/core": "16 - 19",
     "@angular/platform-browser": "16 - 19",
     "@progress/kendo-licensing": "^1.5.0",
-    "@progress/kendo-angular-buttons": "18.5.0-develop.8",
-    "@progress/kendo-angular-common": "18.5.0-develop.8",
-    "@progress/kendo-angular-dropdowns": "18.5.0-develop.8",
-    "@progress/kendo-angular-inputs": "18.5.0-develop.8",
-    "@progress/kendo-angular-intl": "18.5.0-develop.8",
-    "@progress/kendo-angular-l10n": "18.5.0-develop.8",
-    "@progress/kendo-angular-icons": "18.5.0-develop.8",
-    "@progress/kendo-angular-indicators": "18.5.0-develop.8",
-    "@progress/kendo-angular-pager": "18.5.0-develop.8",
-    "@progress/kendo-angular-popup": "18.5.0-develop.8",
+    "@progress/kendo-angular-buttons": "18.5.0-develop.9",
+    "@progress/kendo-angular-common": "18.5.0-develop.9",
+    "@progress/kendo-angular-dropdowns": "18.5.0-develop.9",
+    "@progress/kendo-angular-inputs": "18.5.0-develop.9",
+    "@progress/kendo-angular-intl": "18.5.0-develop.9",
+    "@progress/kendo-angular-l10n": "18.5.0-develop.9",
+    "@progress/kendo-angular-icons": "18.5.0-develop.9",
+    "@progress/kendo-angular-indicators": "18.5.0-develop.9",
+    "@progress/kendo-angular-pager": "18.5.0-develop.9",
+    "@progress/kendo-angular-popup": "18.5.0-develop.9",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "18.5.0-develop.8",
+    "@progress/kendo-angular-schematics": "18.5.0-develop.9",
     "@progress/kendo-file-saver": "^1.0.1",
     "@progress/kendo-pdfviewer-common": "0.4.1"
   },

package/pdfviewer.component.d.ts

@@ -2,7 +2,7 @@
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { AfterViewInit, ChangeDetectorRef, EventEmitter, NgZone, OnDestroy, OnInit, Renderer2, SimpleChanges } from '@angular/core';
+import { ChangeDetectorRef, ElementRef, EventEmitter, NgZone, OnDestroy, OnInit, Renderer2, SimpleChanges } from '@angular/core';
 import { LoaderSettings } from './models/loader-settings';
 import { TypedArray } from '@progress/kendo-pdfviewer-common';
 import { PDFViewerContext } from './models/pdfviewer-context';
@@ -18,11 +18,12 @@ import * as i0 from "@angular/core";
 /**
  * Represents the [Kendo UI PDFViewer component for Angular]({% slug overview_pdfviewer %}).
  */
-export declare class PDFViewerComponent implements OnInit, AfterViewInit, OnDestroy {
+export declare class PDFViewerComponent implements OnInit, OnDestroy {
     private ngZone;
     private renderer;
     private localizationService;
     private cdr;
+    private host;
     hostClass: boolean;
     direction: string;
     /**
@@ -84,6 +85,18 @@ export declare class PDFViewerComponent implements OnInit, AfterViewInit, OnDest
      * @default 4
      */
     maxZoom: number;
+    /**
+     * Determines whether all PDF document pages will be initially loaded or new pages will be loaded on demand when needed.
+     *
+     * @default false
+     */
+    loadOnDemand: boolean;
+    /**
+     * The number of pages that will be loaded on demand.
+     *
+     * @default 1
+     */
+    loadOnDemandPageSize: number;
     /**
      * The event fired when a PDF document is successfully loaded in the `PDFViewer` component.
      */
@@ -159,12 +172,10 @@ export declare class PDFViewerComponent implements OnInit, AfterViewInit, OnDest
     private _zoom;
     private _fitType;
     private _zoomToFit;
-    private pdfScroller;
-    private searchService;
     private subs;
-    constructor(ngZone: NgZone, renderer: Renderer2, localizationService: LocalizationService, cdr: ChangeDetectorRef);
+    private emitLoad;
+    constructor(ngZone: NgZone, renderer: Renderer2, localizationService: LocalizationService, cdr: ChangeDetectorRef, host: ElementRef);
     ngOnInit(): void;
-    ngAfterViewInit(): void;
     ngOnDestroy(): void;
     ngOnChanges(changes: SimpleChanges): void;
     /**
@@ -188,6 +199,10 @@ export declare class PDFViewerComponent implements OnInit, AfterViewInit, OnDest
      * @hidden
      */
     onDownload(): void;
+    /**
+     * @hidden
+     */
+    stopPropagation: (e: any) => void;
     /**
      * @hidden
      */
@@ -227,15 +242,17 @@ export declare class PDFViewerComponent implements OnInit, AfterViewInit, OnDest
      * @hidden
      */
     onPreviousMatch(): void;
+    private pdfViewerWidget;
     private loadPdf;
-    private reloadDocument;
     private assignPageIds;
     private setZoomLevel;
     private verifySettings;
     private isSet;
-    private scrollListener;
+    private scrollHandler;
     private loadHandler;
+    private zoomEndHandler;
     private errorHandler;
+    private zoneAwareEmitter;
     static ɵfac: i0.ɵɵFactoryDeclaration<PDFViewerComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PDFViewerComponent, "kendo-pdfviewer", ["kendo-pdfviewer"], { "tools": { "alias": "tools"; "required": false; }; "loaderSettings": { "alias": "loaderSettings"; "required": false; }; "saveFileName": { "alias": "saveFileName"; "required": false; }; "saveOptions": { "alias": "saveOptions"; "required": false; }; "url": { "alias": "url"; "required": false; }; "data": { "alias": "data"; "required": false; }; "arrayBuffer": { "alias": "arrayBuffer"; "required": false; }; "typedArray": { "alias": "typedArray"; "required": false; }; "zoom": { "alias": "zoom"; "required": false; }; "zoomRate": { "alias": "zoomRate"; "required": false; }; "minZoom": { "alias": "minZoom"; "required": false; }; "maxZoom": { "alias": "maxZoom"; "required": false; }; }, { "load": "load"; "error": "error"; "download": "download"; "pageChange": "pageChange"; "zoomLevelChange": "zoomLevelChange"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PDFViewerComponent, "kendo-pdfviewer", ["kendo-pdfviewer"], { "tools": { "alias": "tools"; "required": false; }; "loaderSettings": { "alias": "loaderSettings"; "required": false; }; "saveFileName": { "alias": "saveFileName"; "required": false; }; "saveOptions": { "alias": "saveOptions"; "required": false; }; "url": { "alias": "url"; "required": false; }; "data": { "alias": "data"; "required": false; }; "arrayBuffer": { "alias": "arrayBuffer"; "required": false; }; "typedArray": { "alias": "typedArray"; "required": false; }; "zoom": { "alias": "zoom"; "required": false; }; "zoomRate": { "alias": "zoomRate"; "required": false; }; "minZoom": { "alias": "minZoom"; "required": false; }; "maxZoom": { "alias": "maxZoom"; "required": false; }; "loadOnDemand": { "alias": "loadOnDemand"; "required": false; }; "loadOnDemandPageSize": { "alias": "loadOnDemandPageSize"; "required": false; }; }, { "load": "load"; "error": "error"; "download": "download"; "pageChange": "pageChange"; "zoomLevelChange": "zoomLevelChange"; }, never, never, true, never>;
 }

package/schematics/ngAdd/index.js

@@ -4,8 +4,8 @@ const schematics_1 = require("@angular-devkit/schematics");
 function default_1(options) {
     const finalOptions = Object.assign(Object.assign({}, options), { mainNgModule: 'PDFViewerModule', package: 'pdfviewer', peerDependencies: {
             // peers of the dropdowns
-            '@progress/kendo-angular-navigation': '18.5.0-develop.8',
-            '@progress/kendo-angular-treeview': '18.5.0-develop.8'
+            '@progress/kendo-angular-navigation': '18.5.0-develop.9',
+            '@progress/kendo-angular-treeview': '18.5.0-develop.9'
         } });
     return (0, schematics_1.externalSchematic)('@progress/kendo-angular-schematics', 'ng-add', finalOptions);
 }