@progress/kendo-angular-pdfviewer 16.8.0 → 16.9.0-develop.10

package/esm2020/package-metadata.mjs

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-pdfviewer',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1724742168,
-    version: '16.8.0',
+    publishDate: 1724927490,
+    version: '16.9.0-develop.10',
     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/esm2020/pdfviewer.component.mjs

@@ -2,10 +2,10 @@
 * Copyright © 2024 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Component, ElementRef, EventEmitter, HostBinding, Input, NgZone, Output, Renderer2, ViewChild, isDevMode } from '@angular/core';
+import { ChangeDetectorRef, Component, ElementRef, EventEmitter, HostBinding, Input, NgZone, Output, Renderer2, ViewChild, isDevMode } from '@angular/core';
 import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from './package-metadata';
-import { INITIAL_ZOOM_LEVEL, zoomOptionsData } from './util';
+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 { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
@@ -25,10 +25,11 @@ let counter = 0;
  * Represents the [Kendo UI PDFViewer component for Angular]({% slug overview_pdfviewer %}).
  */
 export class PDFViewerComponent {
-    constructor(ngZone, renderer, localizationService) {
+    constructor(ngZone, renderer, localizationService, cdr) {
         this.ngZone = ngZone;
         this.renderer = renderer;
         this.localizationService = localizationService;
+        this.cdr = cdr;
         this.hostClass = true;
         /**
          * Represents the tools collection rendered in the toolbar.
@@ -65,12 +66,6 @@ export class PDFViewerComponent {
          * @default {}
          */
         this.saveOptions = {};
-        /**
-         * The initial zoom level of the PDF document.
-         *
-         * @default 1.25
-         */
-        this.zoom = INITIAL_ZOOM_LEVEL;
         /**
          * Represents the step the zoom level will be changed with when using the ZoomIn and ZoomOut tools.
          * @default 0.25
@@ -118,7 +113,9 @@ export class PDFViewerComponent {
         this.zoomOptionsData = zoomOptionsData;
         this.zoomLevel = this.zoomOptionsData[5];
         this._pdfContext = null;
-        this._enabedSelection = false;
+        this._enabledSelection = false;
+        this._zoom = INITIAL_ZOOM_LEVEL;
+        this._zoomToFit = false;
         this.subs = new Subscription();
         this.scrollListener = (e) => {
             const nextPage = currentPage(e.target.parentNode);
@@ -137,6 +134,26 @@ export class PDFViewerComponent {
         this.direction = localizationService.rtl ? 'rtl' : 'ltr';
         counter++;
     }
+    /**
+     * The initial zoom level of the PDF document.
+     *
+     * @default 1.25
+     */
+    set zoom(value) {
+        if (typeof value === 'number') {
+            this._zoom = value;
+            this._fitType = null;
+            this.setZoomLevel(value);
+        }
+        else {
+            this._zoom = 1;
+            this._fitType = zoomToFitOptions[value];
+        }
+        this._zoomToFit = typeof value !== 'number';
+    }
+    get zoom() {
+        return this._zoom;
+    }
     /**
      * Returns the current page number of the loaded PDF document.
      */
@@ -178,13 +195,13 @@ export class PDFViewerComponent {
         if (this.pdfScroller) {
             value ? this.pdfScroller.disablePanEventsTracking() : this.pdfScroller.enablePanEventsTracking();
         }
-        this._enabedSelection = value;
+        this._enabledSelection = value;
     }
     /**
      * @hidden
      */
     get enabledSelection() {
-        return this._enabedSelection;
+        return this._enabledSelection;
     }
     ngOnInit() {
         this.subs.add(this.localizationService.changes.subscribe(({ rtl }) => this.direction = rtl ? 'rtl' : 'ltr'));
@@ -216,9 +233,6 @@ export class PDFViewerComponent {
         if (newUrl || newArrayBuffer || newBase64Data || newTypedArray) {
             this.loadPdf(source, this[source]);
         }
-        if (changes['zoom']) {
-            this.setZoomLevel(changes['zoom'].currentValue);
-        }
     }
     /**
      * Scrolls the PDFViewer document to the specified page number, treating 0 as the first page.
@@ -308,17 +322,18 @@ export class PDFViewerComponent {
     /**
      * @hidden
      */
-    onZoomLevelChange(zoomLevel) {
-        if (typeof zoomLevel === 'string') {
-            const parsedValue = parseFloat(zoomLevel);
-            zoomLevel = { value: Number.isNaN(parsedValue) ? 1 : parsedValue / 100 };
-        }
+    onZoomLevelChange(zoomLevel, emit = true) {
         if (!zoomLevel) {
-            zoomLevel = { value: 1 };
+            zoomLevel = {
+                value: 1,
+                displayValue: '100%',
+                text: '100%'
+            };
         }
         let newZoom = calculateZoomLevel(zoomLevel.value, zoomLevel.type, this.pdfContext.zoom, this.pagesContainer.nativeElement);
         newZoom = Math.round(newZoom * 100) / 100;
-        if (hasObservers(this.zoomLevelChange)) {
+        const sameZoom = this.zoom === newZoom;
+        if (!sameZoom && emit && hasObservers(this.zoomLevelChange)) {
             this.zoomLevelChange.emit({
                 previousZoomLevel: this.zoom,
                 currentZoomLevel: newZoom
@@ -399,10 +414,19 @@ export class PDFViewerComponent {
                 dom: this.pagesContainer.nativeElement,
                 zoom: this.pdfContext?.zoom || this.zoom,
                 done: (e) => {
-                    this.ngZone.run(() => {
-                        this.loading = false;
+                    if (!this._zoomToFit) {
+                        this.ngZone.run(() => {
+                            this.pdfContext = { ...e, element: this.pagesContainer.nativeElement };
+                            this.loading = false;
+                            this.cdr.markForCheck();
+                        });
+                    }
+                    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();
                     }
@@ -436,7 +460,10 @@ export class PDFViewerComponent {
                 dom: this.pagesContainer.nativeElement,
                 done: (pdfPages) => {
                     this.pdfContext.pdfPages = pdfPages;
-                    this.ngZone.run(() => this.loading = false);
+                    this.ngZone.run(() => {
+                        this.loading = false;
+                        this.cdr.markForCheck();
+                    });
                     this.assignPageIds();
                 },
                 error: (e) => {
@@ -460,7 +487,7 @@ export class PDFViewerComponent {
     }
     setZoomLevel(zoom) {
         const option = this.zoomOptionsData.find(item => !item.type && item.value === zoom);
-        this.zoomLevel = option || {
+        this.zoomLevel = option ? { ...option } : {
             value: zoom,
             displayValue: `${Math.round(zoom * 100)}%`,
             text: `${Math.round(zoom * 100)}%`
@@ -480,7 +507,7 @@ export class PDFViewerComponent {
         return this[source] || (changes[source] && changes[source].currentValue);
     }
 }
-PDFViewerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PDFViewerComponent, deps: [{ token: i0.NgZone }, { token: i0.Renderer2 }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+PDFViewerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PDFViewerComponent, deps: [{ token: i0.NgZone }, { token: i0.Renderer2 }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 PDFViewerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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: [
         LocalizationService,
         {
@@ -770,7 +797,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     standalone: true,
                     imports: [LocalizedPDFViewerMessagesDirective, NgIf, LoaderComponent, ToolbarComponent, PDFViewerSearchComponent, WatermarkOverlayComponent]
                 }]
-        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.Renderer2 }, { type: i1.LocalizationService }]; }, propDecorators: { hostClass: [{
+        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.Renderer2 }, { type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { hostClass: [{
                 type: HostBinding,
                 args: ['class.k-pdf-viewer']
             }], direction: [{

package/esm2020/toolbar/toolbar.component.mjs

@@ -14,6 +14,7 @@ import { ButtonComponent, ButtonGroupComponent } from '@progress/kendo-angular-b
 import { ToolbarFocusableDirective } from './toolbar-focusable.directive';
 import { ToolbarInputWrapperComponent } from './input-wrapper.component';
 import { NgFor, NgSwitch, NgSwitchCase, NgIf } from '@angular/common';
+import { map } from 'rxjs/operators';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
 import * as i2 from "./toolbar-navigation.service";
@@ -59,6 +60,15 @@ export class ToolbarComponent {
         this.downloadIcon = downloadIcon;
         this.printIcon = printIcon;
         this.pagerType = 'input';
+        this.valueNormalizer = (text) => text.pipe(map((value) => {
+            const parsedValue = parseFloat(value);
+            const newValue = Number.isNaN(parsedValue) ? 1 : parsedValue / 100;
+            return {
+                value: newValue,
+                displayValue: `${Math.round(newValue * 100)}%`,
+                text: `${Math.round(newValue * 100)}%`
+            };
+        }));
     }
     messageFor(key) {
         return this.localization.get(key);
@@ -161,6 +171,8 @@ ToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versi
                         valueField="id"
                         [value]="zoomLevelChooserValue"
                         [allowCustom]="true"
+                        [valueNormalizer]="valueNormalizer"
+                        [clearButton]="false"
                         (valueChange)="onZoomLevelChooserValueChange($event)">
                         <ng-template kendoComboBoxItemTemplate let-dataItem>
                             {{ dataItem.type ? messageFor('f' + dataItem.type.slice(1)) : dataItem.text }}
@@ -331,6 +343,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         valueField="id"
                         [value]="zoomLevelChooserValue"
                         [allowCustom]="true"
+                        [valueNormalizer]="valueNormalizer"
+                        [clearButton]="false"
                         (valueChange)="onZoomLevelChooserValueChange($event)">
                         <ng-template kendoComboBoxItemTemplate let-dataItem>
                             {{ dataItem.type ? messageFor('f' + dataItem.type.slice(1)) : dataItem.text }}

package/esm2020/util.mjs

@@ -70,3 +70,10 @@ export const zoomOptionsData = [{
         displayValue: '400%',
         value: 4
     }];
+/**
+ * @hidden
+ */
+export const zoomToFitOptions = {
+    'fitToPage': 'FitToPage',
+    'fitToWidth': 'FitToWidth'
+};

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

@@ -17,6 +17,7 @@ import * as i1$1 from '@progress/kendo-angular-dropdowns';
 import { ComboBoxComponent, ItemTemplateDirective } from '@progress/kendo-angular-dropdowns';
 import { ButtonGroupComponent, ButtonComponent } from '@progress/kendo-angular-buttons';
 import { NgFor, NgSwitch, NgSwitchCase, NgIf } from '@angular/common';
+import { map } from 'rxjs/operators';
 import { TextBoxComponent, TextBoxSuffixTemplateDirective } from '@progress/kendo-angular-inputs';
 import { LoaderComponent as LoaderComponent$1 } from '@progress/kendo-angular-indicators';
 import 'pdfjs-dist/build/pdf.worker.entry';
@@ -125,8 +126,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-pdfviewer',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1724742168,
-    version: '16.8.0',
+    publishDate: 1724927490,
+    version: '16.9.0-develop.10',
     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',
 };
 
@@ -198,6 +199,13 @@ const zoomOptionsData = [{
         displayValue: '400%',
         value: 4
     }];
+/**
+ * @hidden
+ */
+const zoomToFitOptions = {
+    'fitToPage': 'FitToPage',
+    'fitToWidth': 'FitToWidth'
+};
 
 /**
  * Arguments for the `download` event. The event fires when the end user clicks the Download tool.
@@ -456,6 +464,15 @@ class ToolbarComponent {
         this.downloadIcon = downloadIcon;
         this.printIcon = printIcon;
         this.pagerType = 'input';
+        this.valueNormalizer = (text) => text.pipe(map((value) => {
+            const parsedValue = parseFloat(value);
+            const newValue = Number.isNaN(parsedValue) ? 1 : parsedValue / 100;
+            return {
+                value: newValue,
+                displayValue: `${Math.round(newValue * 100)}%`,
+                text: `${Math.round(newValue * 100)}%`
+            };
+        }));
     }
     messageFor(key) {
         return this.localization.get(key);
@@ -558,6 +575,8 @@ ToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versi
                         valueField="id"
                         [value]="zoomLevelChooserValue"
                         [allowCustom]="true"
+                        [valueNormalizer]="valueNormalizer"
+                        [clearButton]="false"
                         (valueChange)="onZoomLevelChooserValueChange($event)">
                         <ng-template kendoComboBoxItemTemplate let-dataItem>
                             {{ dataItem.type ? messageFor('f' + dataItem.type.slice(1)) : dataItem.text }}
@@ -728,6 +747,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         valueField="id"
                         [value]="zoomLevelChooserValue"
                         [allowCustom]="true"
+                        [valueNormalizer]="valueNormalizer"
+                        [clearButton]="false"
                         (valueChange)="onZoomLevelChooserValueChange($event)">
                         <ng-template kendoComboBoxItemTemplate let-dataItem>
                             {{ dataItem.type ? messageFor('f' + dataItem.type.slice(1)) : dataItem.text }}
@@ -1134,10 +1155,11 @@ let counter = 0;
  * Represents the [Kendo UI PDFViewer component for Angular]({% slug overview_pdfviewer %}).
  */
 class PDFViewerComponent {
-    constructor(ngZone, renderer, localizationService) {
+    constructor(ngZone, renderer, localizationService, cdr) {
         this.ngZone = ngZone;
         this.renderer = renderer;
         this.localizationService = localizationService;
+        this.cdr = cdr;
         this.hostClass = true;
         /**
          * Represents the tools collection rendered in the toolbar.
@@ -1174,12 +1196,6 @@ class PDFViewerComponent {
          * @default {}
          */
         this.saveOptions = {};
-        /**
-         * The initial zoom level of the PDF document.
-         *
-         * @default 1.25
-         */
-        this.zoom = INITIAL_ZOOM_LEVEL;
         /**
          * Represents the step the zoom level will be changed with when using the ZoomIn and ZoomOut tools.
          * @default 0.25
@@ -1227,7 +1243,9 @@ class PDFViewerComponent {
         this.zoomOptionsData = zoomOptionsData;
         this.zoomLevel = this.zoomOptionsData[5];
         this._pdfContext = null;
-        this._enabedSelection = false;
+        this._enabledSelection = false;
+        this._zoom = INITIAL_ZOOM_LEVEL;
+        this._zoomToFit = false;
         this.subs = new Subscription();
         this.scrollListener = (e) => {
             const nextPage = currentPage(e.target.parentNode);
@@ -1246,6 +1264,26 @@ class PDFViewerComponent {
         this.direction = localizationService.rtl ? 'rtl' : 'ltr';
         counter++;
     }
+    /**
+     * The initial zoom level of the PDF document.
+     *
+     * @default 1.25
+     */
+    set zoom(value) {
+        if (typeof value === 'number') {
+            this._zoom = value;
+            this._fitType = null;
+            this.setZoomLevel(value);
+        }
+        else {
+            this._zoom = 1;
+            this._fitType = zoomToFitOptions[value];
+        }
+        this._zoomToFit = typeof value !== 'number';
+    }
+    get zoom() {
+        return this._zoom;
+    }
     /**
      * Returns the current page number of the loaded PDF document.
      */
@@ -1290,13 +1328,13 @@ class PDFViewerComponent {
         if (this.pdfScroller) {
             value ? this.pdfScroller.disablePanEventsTracking() : this.pdfScroller.enablePanEventsTracking();
         }
-        this._enabedSelection = value;
+        this._enabledSelection = value;
     }
     /**
      * @hidden
      */
     get enabledSelection() {
-        return this._enabedSelection;
+        return this._enabledSelection;
     }
     ngOnInit() {
         this.subs.add(this.localizationService.changes.subscribe(({ rtl }) => this.direction = rtl ? 'rtl' : 'ltr'));
@@ -1328,9 +1366,6 @@ class PDFViewerComponent {
         if (newUrl || newArrayBuffer || newBase64Data || newTypedArray) {
             this.loadPdf(source, this[source]);
         }
-        if (changes['zoom']) {
-            this.setZoomLevel(changes['zoom'].currentValue);
-        }
     }
     /**
      * Scrolls the PDFViewer document to the specified page number, treating 0 as the first page.
@@ -1420,17 +1455,18 @@ class PDFViewerComponent {
     /**
      * @hidden
      */
-    onZoomLevelChange(zoomLevel) {
-        if (typeof zoomLevel === 'string') {
-            const parsedValue = parseFloat(zoomLevel);
-            zoomLevel = { value: Number.isNaN(parsedValue) ? 1 : parsedValue / 100 };
-        }
+    onZoomLevelChange(zoomLevel, emit = true) {
         if (!zoomLevel) {
-            zoomLevel = { value: 1 };
+            zoomLevel = {
+                value: 1,
+                displayValue: '100%',
+                text: '100%'
+            };
         }
         let newZoom = calculateZoomLevel(zoomLevel.value, zoomLevel.type, this.pdfContext.zoom, this.pagesContainer.nativeElement);
         newZoom = Math.round(newZoom * 100) / 100;
-        if (hasObservers(this.zoomLevelChange)) {
+        const sameZoom = this.zoom === newZoom;
+        if (!sameZoom && emit && hasObservers(this.zoomLevelChange)) {
             this.zoomLevelChange.emit({
                 previousZoomLevel: this.zoom,
                 currentZoomLevel: newZoom
@@ -1512,10 +1548,19 @@ class PDFViewerComponent {
                 dom: this.pagesContainer.nativeElement,
                 zoom: ((_a = this.pdfContext) === null || _a === void 0 ? void 0 : _a.zoom) || this.zoom,
                 done: (e) => {
-                    this.ngZone.run(() => {
-                        this.loading = false;
+                    if (!this._zoomToFit) {
+                        this.ngZone.run(() => {
+                            this.pdfContext = Object.assign(Object.assign({}, e), { element: this.pagesContainer.nativeElement });
+                            this.loading = false;
+                            this.cdr.markForCheck();
+                        });
+                    }
+                    else {
+                        const zoomLevelOption = this.zoomOptionsData.find(item => item.type === this._fitType);
                         this.pdfContext = Object.assign(Object.assign({}, e), { element: this.pagesContainer.nativeElement });
-                    });
+                        this.onZoomLevelChange(zoomLevelOption, false);
+                        this.cdr.markForCheck();
+                    }
                     if (this.pdfScroller) {
                         this.pdfScroller.destroy();
                     }
@@ -1550,7 +1595,10 @@ class PDFViewerComponent {
                 dom: this.pagesContainer.nativeElement,
                 done: (pdfPages) => {
                     this.pdfContext.pdfPages = pdfPages;
-                    this.ngZone.run(() => this.loading = false);
+                    this.ngZone.run(() => {
+                        this.loading = false;
+                        this.cdr.markForCheck();
+                    });
                     this.assignPageIds();
                 },
                 error: (e) => {
@@ -1574,7 +1622,7 @@ class PDFViewerComponent {
     }
     setZoomLevel(zoom) {
         const option = this.zoomOptionsData.find(item => !item.type && item.value === zoom);
-        this.zoomLevel = option || {
+        this.zoomLevel = option ? Object.assign({}, option) : {
             value: zoom,
             displayValue: `${Math.round(zoom * 100)}%`,
             text: `${Math.round(zoom * 100)}%`
@@ -1594,7 +1642,7 @@ class PDFViewerComponent {
         return this[source] || (changes[source] && changes[source].currentValue);
     }
 }
-PDFViewerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PDFViewerComponent, deps: [{ token: i0.NgZone }, { token: i0.Renderer2 }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+PDFViewerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PDFViewerComponent, deps: [{ token: i0.NgZone }, { token: i0.Renderer2 }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 PDFViewerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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: [
         LocalizationService,
         {
@@ -1884,7 +1932,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     standalone: true,
                     imports: [LocalizedPDFViewerMessagesDirective, NgIf, LoaderComponent, ToolbarComponent, PDFViewerSearchComponent, WatermarkOverlayComponent]
                 }]
-        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.Renderer2 }, { type: i1.LocalizationService }]; }, propDecorators: { hostClass: [{
+        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.Renderer2 }, { type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { hostClass: [{
                 type: HostBinding,
                 args: ['class.k-pdf-viewer']
             }], direction: [{

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

@@ -17,6 +17,7 @@ import * as i1$1 from '@progress/kendo-angular-dropdowns';
 import { ComboBoxComponent, ItemTemplateDirective } from '@progress/kendo-angular-dropdowns';
 import { ButtonGroupComponent, ButtonComponent } from '@progress/kendo-angular-buttons';
 import { NgFor, NgSwitch, NgSwitchCase, NgIf } from '@angular/common';
+import { map } from 'rxjs/operators';
 import { TextBoxComponent, TextBoxSuffixTemplateDirective } from '@progress/kendo-angular-inputs';
 import { LoaderComponent as LoaderComponent$1 } from '@progress/kendo-angular-indicators';
 import 'pdfjs-dist/build/pdf.worker.entry';
@@ -125,8 +126,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-pdfviewer',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1724742168,
-    version: '16.8.0',
+    publishDate: 1724927490,
+    version: '16.9.0-develop.10',
     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',
 };
 
@@ -198,6 +199,13 @@ const zoomOptionsData = [{
         displayValue: '400%',
         value: 4
     }];
+/**
+ * @hidden
+ */
+const zoomToFitOptions = {
+    'fitToPage': 'FitToPage',
+    'fitToWidth': 'FitToWidth'
+};
 
 /**
  * Arguments for the `download` event. The event fires when the end user clicks the Download tool.
@@ -456,6 +464,15 @@ class ToolbarComponent {
         this.downloadIcon = downloadIcon;
         this.printIcon = printIcon;
         this.pagerType = 'input';
+        this.valueNormalizer = (text) => text.pipe(map((value) => {
+            const parsedValue = parseFloat(value);
+            const newValue = Number.isNaN(parsedValue) ? 1 : parsedValue / 100;
+            return {
+                value: newValue,
+                displayValue: `${Math.round(newValue * 100)}%`,
+                text: `${Math.round(newValue * 100)}%`
+            };
+        }));
     }
     messageFor(key) {
         return this.localization.get(key);
@@ -558,6 +575,8 @@ ToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versi
                         valueField="id"
                         [value]="zoomLevelChooserValue"
                         [allowCustom]="true"
+                        [valueNormalizer]="valueNormalizer"
+                        [clearButton]="false"
                         (valueChange)="onZoomLevelChooserValueChange($event)">
                         <ng-template kendoComboBoxItemTemplate let-dataItem>
                             {{ dataItem.type ? messageFor('f' + dataItem.type.slice(1)) : dataItem.text }}
@@ -728,6 +747,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         valueField="id"
                         [value]="zoomLevelChooserValue"
                         [allowCustom]="true"
+                        [valueNormalizer]="valueNormalizer"
+                        [clearButton]="false"
                         (valueChange)="onZoomLevelChooserValueChange($event)">
                         <ng-template kendoComboBoxItemTemplate let-dataItem>
                             {{ dataItem.type ? messageFor('f' + dataItem.type.slice(1)) : dataItem.text }}
@@ -1134,10 +1155,11 @@ let counter = 0;
  * Represents the [Kendo UI PDFViewer component for Angular]({% slug overview_pdfviewer %}).
  */
 class PDFViewerComponent {
-    constructor(ngZone, renderer, localizationService) {
+    constructor(ngZone, renderer, localizationService, cdr) {
         this.ngZone = ngZone;
         this.renderer = renderer;
         this.localizationService = localizationService;
+        this.cdr = cdr;
         this.hostClass = true;
         /**
          * Represents the tools collection rendered in the toolbar.
@@ -1174,12 +1196,6 @@ class PDFViewerComponent {
          * @default {}
          */
         this.saveOptions = {};
-        /**
-         * The initial zoom level of the PDF document.
-         *
-         * @default 1.25
-         */
-        this.zoom = INITIAL_ZOOM_LEVEL;
         /**
          * Represents the step the zoom level will be changed with when using the ZoomIn and ZoomOut tools.
          * @default 0.25
@@ -1227,7 +1243,9 @@ class PDFViewerComponent {
         this.zoomOptionsData = zoomOptionsData;
         this.zoomLevel = this.zoomOptionsData[5];
         this._pdfContext = null;
-        this._enabedSelection = false;
+        this._enabledSelection = false;
+        this._zoom = INITIAL_ZOOM_LEVEL;
+        this._zoomToFit = false;
         this.subs = new Subscription();
         this.scrollListener = (e) => {
             const nextPage = currentPage(e.target.parentNode);
@@ -1246,6 +1264,26 @@ class PDFViewerComponent {
         this.direction = localizationService.rtl ? 'rtl' : 'ltr';
         counter++;
     }
+    /**
+     * The initial zoom level of the PDF document.
+     *
+     * @default 1.25
+     */
+    set zoom(value) {
+        if (typeof value === 'number') {
+            this._zoom = value;
+            this._fitType = null;
+            this.setZoomLevel(value);
+        }
+        else {
+            this._zoom = 1;
+            this._fitType = zoomToFitOptions[value];
+        }
+        this._zoomToFit = typeof value !== 'number';
+    }
+    get zoom() {
+        return this._zoom;
+    }
     /**
      * Returns the current page number of the loaded PDF document.
      */
@@ -1287,13 +1325,13 @@ class PDFViewerComponent {
         if (this.pdfScroller) {
             value ? this.pdfScroller.disablePanEventsTracking() : this.pdfScroller.enablePanEventsTracking();
         }
-        this._enabedSelection = value;
+        this._enabledSelection = value;
     }
     /**
      * @hidden
      */
     get enabledSelection() {
-        return this._enabedSelection;
+        return this._enabledSelection;
     }
     ngOnInit() {
         this.subs.add(this.localizationService.changes.subscribe(({ rtl }) => this.direction = rtl ? 'rtl' : 'ltr'));
@@ -1325,9 +1363,6 @@ class PDFViewerComponent {
         if (newUrl || newArrayBuffer || newBase64Data || newTypedArray) {
             this.loadPdf(source, this[source]);
         }
-        if (changes['zoom']) {
-            this.setZoomLevel(changes['zoom'].currentValue);
-        }
     }
     /**
      * Scrolls the PDFViewer document to the specified page number, treating 0 as the first page.
@@ -1417,17 +1452,18 @@ class PDFViewerComponent {
     /**
      * @hidden
      */
-    onZoomLevelChange(zoomLevel) {
-        if (typeof zoomLevel === 'string') {
-            const parsedValue = parseFloat(zoomLevel);
-            zoomLevel = { value: Number.isNaN(parsedValue) ? 1 : parsedValue / 100 };
-        }
+    onZoomLevelChange(zoomLevel, emit = true) {
         if (!zoomLevel) {
-            zoomLevel = { value: 1 };
+            zoomLevel = {
+                value: 1,
+                displayValue: '100%',
+                text: '100%'
+            };
         }
         let newZoom = calculateZoomLevel(zoomLevel.value, zoomLevel.type, this.pdfContext.zoom, this.pagesContainer.nativeElement);
         newZoom = Math.round(newZoom * 100) / 100;
-        if (hasObservers(this.zoomLevelChange)) {
+        const sameZoom = this.zoom === newZoom;
+        if (!sameZoom && emit && hasObservers(this.zoomLevelChange)) {
             this.zoomLevelChange.emit({
                 previousZoomLevel: this.zoom,
                 currentZoomLevel: newZoom
@@ -1508,10 +1544,19 @@ class PDFViewerComponent {
                 dom: this.pagesContainer.nativeElement,
                 zoom: this.pdfContext?.zoom || this.zoom,
                 done: (e) => {
-                    this.ngZone.run(() => {
-                        this.loading = false;
+                    if (!this._zoomToFit) {
+                        this.ngZone.run(() => {
+                            this.pdfContext = { ...e, element: this.pagesContainer.nativeElement };
+                            this.loading = false;
+                            this.cdr.markForCheck();
+                        });
+                    }
+                    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();
                     }
@@ -1545,7 +1590,10 @@ class PDFViewerComponent {
                 dom: this.pagesContainer.nativeElement,
                 done: (pdfPages) => {
                     this.pdfContext.pdfPages = pdfPages;
-                    this.ngZone.run(() => this.loading = false);
+                    this.ngZone.run(() => {
+                        this.loading = false;
+                        this.cdr.markForCheck();
+                    });
                     this.assignPageIds();
                 },
                 error: (e) => {
@@ -1569,7 +1617,7 @@ class PDFViewerComponent {
     }
     setZoomLevel(zoom) {
         const option = this.zoomOptionsData.find(item => !item.type && item.value === zoom);
-        this.zoomLevel = option || {
+        this.zoomLevel = option ? { ...option } : {
             value: zoom,
             displayValue: `${Math.round(zoom * 100)}%`,
             text: `${Math.round(zoom * 100)}%`
@@ -1589,7 +1637,7 @@ class PDFViewerComponent {
         return this[source] || (changes[source] && changes[source].currentValue);
     }
 }
-PDFViewerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PDFViewerComponent, deps: [{ token: i0.NgZone }, { token: i0.Renderer2 }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+PDFViewerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PDFViewerComponent, deps: [{ token: i0.NgZone }, { token: i0.Renderer2 }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 PDFViewerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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: [
         LocalizationService,
         {
@@ -1879,7 +1927,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     standalone: true,
                     imports: [LocalizedPDFViewerMessagesDirective, NgIf, LoaderComponent, ToolbarComponent, PDFViewerSearchComponent, WatermarkOverlayComponent]
                 }]
-        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.Renderer2 }, { type: i1.LocalizationService }]; }, propDecorators: { hostClass: [{
+        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.Renderer2 }, { type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { hostClass: [{
                 type: HostBinding,
                 args: ['class.k-pdf-viewer']
             }], direction: [{

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-pdfviewer",
-  "version": "16.8.0",
+  "version": "16.9.0-develop.10",
   "description": "Kendo UI PDFViewer for Angular",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -23,21 +23,21 @@
     "@angular/core": "15 - 18",
     "@angular/platform-browser": "15 - 18",
     "@progress/kendo-licensing": "^1.0.2",
-    "@progress/kendo-angular-buttons": "16.8.0",
-    "@progress/kendo-angular-common": "16.8.0",
-    "@progress/kendo-angular-dropdowns": "16.8.0",
-    "@progress/kendo-angular-inputs": "16.8.0",
-    "@progress/kendo-angular-intl": "16.8.0",
-    "@progress/kendo-angular-l10n": "16.8.0",
-    "@progress/kendo-angular-icons": "16.8.0",
-    "@progress/kendo-angular-indicators": "16.8.0",
-    "@progress/kendo-angular-pager": "16.8.0",
-    "@progress/kendo-angular-popup": "16.8.0",
+    "@progress/kendo-angular-buttons": "16.9.0-develop.10",
+    "@progress/kendo-angular-common": "16.9.0-develop.10",
+    "@progress/kendo-angular-dropdowns": "16.9.0-develop.10",
+    "@progress/kendo-angular-inputs": "16.9.0-develop.10",
+    "@progress/kendo-angular-intl": "16.9.0-develop.10",
+    "@progress/kendo-angular-l10n": "16.9.0-develop.10",
+    "@progress/kendo-angular-icons": "16.9.0-develop.10",
+    "@progress/kendo-angular-indicators": "16.9.0-develop.10",
+    "@progress/kendo-angular-pager": "16.9.0-develop.10",
+    "@progress/kendo-angular-popup": "16.9.0-develop.10",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "16.8.0",
+    "@progress/kendo-angular-schematics": "16.9.0-develop.10",
     "@progress/kendo-file-saver": "^1.0.1",
     "@progress/kendo-pdfviewer-common": "0.2.10"
   },

package/pdfviewer.component.d.ts

@@ -2,7 +2,7 @@
 * Copyright © 2024 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { AfterViewInit, EventEmitter, NgZone, OnDestroy, OnInit, Renderer2, SimpleChanges } from '@angular/core';
+import { AfterViewInit, ChangeDetectorRef, 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';
@@ -22,6 +22,7 @@ export declare class PDFViewerComponent implements OnInit, AfterViewInit, OnDest
     private ngZone;
     private renderer;
     private localizationService;
+    private cdr;
     hostClass: boolean;
     direction: string;
     /**
@@ -65,7 +66,8 @@ export declare class PDFViewerComponent implements OnInit, AfterViewInit, OnDest
      *
      * @default 1.25
      */
-    zoom: number;
+    set zoom(value: number | 'fitToPage' | 'fitToWidth');
+    get zoom(): number;
     /**
      * Represents the step the zoom level will be changed with when using the ZoomIn and ZoomOut tools.
      * @default 0.25
@@ -152,11 +154,14 @@ export declare class PDFViewerComponent implements OnInit, AfterViewInit, OnDest
     })[];
     zoomLevel: ZoomLevel;
     private _pdfContext;
-    private _enabedSelection;
+    private _enabledSelection;
+    private _zoom;
+    private _fitType;
+    private _zoomToFit;
     private pdfScroller;
     private searchService;
     private subs;
-    constructor(ngZone: NgZone, renderer: Renderer2, localizationService: LocalizationService);
+    constructor(ngZone: NgZone, renderer: Renderer2, localizationService: LocalizationService, cdr: ChangeDetectorRef);
     ngOnInit(): void;
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
@@ -192,7 +197,7 @@ export declare class PDFViewerComponent implements OnInit, AfterViewInit, OnDest
     /**
      * @hidden
      */
-    onZoomLevelChange(zoomLevel: ZoomLevel | string): void;
+    onZoomLevelChange(zoomLevel: ZoomLevel, emit?: boolean): void;
     /**
      * @hidden
      */

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': '16.8.0',
-            '@progress/kendo-angular-treeview': '16.8.0'
+            '@progress/kendo-angular-navigation': '16.9.0-develop.10',
+            '@progress/kendo-angular-treeview': '16.9.0-develop.10'
         } });
     return (0, schematics_1.externalSchematic)('@progress/kendo-angular-schematics', 'ng-add', finalOptions);
 }

package/toolbar/toolbar.component.d.ts

@@ -9,6 +9,7 @@ import { SVGIcon } from '@progress/kendo-svg-icons';
 import { ToolbarNavigationService } from './toolbar-navigation.service';
 import { PDFViewerTool } from '../models/toolbar-tool';
 import { ZoomLevel } from '../models/zoom-level';
+import { Observable } from 'rxjs';
 import * as i0 from "@angular/core";
 /**
  * @hidden
@@ -61,6 +62,11 @@ export declare class ToolbarComponent {
     onFileSelect(e: any): void;
     onZoomLevelChooserValueChange(zoomLevel: ZoomLevel): void;
     focus(): void;
+    valueNormalizer: (text: Observable<string>) => Observable<{
+        value: number;
+        displayValue: string;
+        text: string;
+    }>;
     static ɵfac: i0.ɵɵFactoryDeclaration<ToolbarComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<ToolbarComponent, "[kendoPDFViewerToolbar]", never, { "zoomLevel": "zoomLevel"; "calculatedComboBoxValue": "calculatedComboBoxValue"; "skip": "skip"; "pageSize": "pageSize"; "total": "total"; "zoomInDisabled": "zoomInDisabled"; "zoomOutDisabled": "zoomOutDisabled"; "disabledTools": "disabledTools"; "zoomLevelChooserValue": "zoomLevelChooserValue"; "zoomOptionsData": "zoomOptionsData"; "pagesContainerId": "pagesContainerId"; "tools": "tools"; }, { "fileSelect": "fileSelect"; "fileSelectStart": "fileSelectStart"; "fileSelectError": "fileSelectError"; "download": "download"; "selectionEnabled": "selectionEnabled"; "panningEnabled": "panningEnabled"; "pageChange": "pageChange"; "zoomIn": "zoomIn"; "zoomOut": "zoomOut"; "zoomLevelChange": "zoomLevelChange"; "print": "print"; "search": "search"; }, never, never, true, never>;
 }

package/util.d.ts

@@ -30,3 +30,10 @@ export declare const zoomOptionsData: ({
     value: number;
     type?: undefined;
 })[];
+/**
+ * @hidden
+ */
+export declare const zoomToFitOptions: {
+    fitToPage: string;
+    fitToWidth: string;
+};