@progress/kendo-angular-pdfviewer 16.9.0-develop.1 → 16.9.0-develop.11

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: 1724748682,
-    version: '16.9.0-develop.1',
+    publishDate: 1725288183,
+    version: '16.9.0-develop.11',
     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,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 { 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, zoomToFitOptions } from './util';
@@ -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.
@@ -322,16 +323,17 @@ export class PDFViewerComponent {
      * @hidden
      */
     onZoomLevelChange(zoomLevel, emit = true) {
-        if (typeof zoomLevel === 'string') {
-            const parsedValue = parseFloat(zoomLevel);
-            zoomLevel = { value: Number.isNaN(parsedValue) ? 1 : parsedValue / 100 };
-        }
         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 (emit && hasObservers(this.zoomLevelChange)) {
+        const sameZoom = this.zoom === newZoom;
+        if (!sameZoom && emit && hasObservers(this.zoomLevelChange)) {
             this.zoomLevelChange.emit({
                 previousZoomLevel: this.zoom,
                 currentZoomLevel: newZoom
@@ -416,12 +418,14 @@ export class PDFViewerComponent {
                         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();
@@ -456,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) => {
@@ -480,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)}%`
@@ -500,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,
         {
@@ -790,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/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: 1724748682,
-    version: '16.9.0-develop.1',
+    publishDate: 1725288183,
+    version: '16.9.0-develop.11',
     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',
 };
 
@@ -463,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);
@@ -565,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 }}
@@ -735,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 }}
@@ -1141,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.
@@ -1441,16 +1456,17 @@ class PDFViewerComponent {
      * @hidden
      */
     onZoomLevelChange(zoomLevel, emit = true) {
-        if (typeof zoomLevel === 'string') {
-            const parsedValue = parseFloat(zoomLevel);
-            zoomLevel = { value: Number.isNaN(parsedValue) ? 1 : parsedValue / 100 };
-        }
         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 (emit && hasObservers(this.zoomLevelChange)) {
+        const sameZoom = this.zoom === newZoom;
+        if (!sameZoom && emit && hasObservers(this.zoomLevelChange)) {
             this.zoomLevelChange.emit({
                 previousZoomLevel: this.zoom,
                 currentZoomLevel: newZoom
@@ -1536,12 +1552,14 @@ class PDFViewerComponent {
                         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();
@@ -1577,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) => {
@@ -1601,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)}%`
@@ -1621,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,
         {
@@ -1911,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: 1724748682,
-    version: '16.9.0-develop.1',
+    publishDate: 1725288183,
+    version: '16.9.0-develop.11',
     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',
 };
 
@@ -463,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);
@@ -565,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 }}
@@ -735,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 }}
@@ -1141,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.
@@ -1438,16 +1453,17 @@ class PDFViewerComponent {
      * @hidden
      */
     onZoomLevelChange(zoomLevel, emit = true) {
-        if (typeof zoomLevel === 'string') {
-            const parsedValue = parseFloat(zoomLevel);
-            zoomLevel = { value: Number.isNaN(parsedValue) ? 1 : parsedValue / 100 };
-        }
         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 (emit && hasObservers(this.zoomLevelChange)) {
+        const sameZoom = this.zoom === newZoom;
+        if (!sameZoom && emit && hasObservers(this.zoomLevelChange)) {
             this.zoomLevelChange.emit({
                 previousZoomLevel: this.zoom,
                 currentZoomLevel: newZoom
@@ -1532,12 +1548,14 @@ class PDFViewerComponent {
                         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();
@@ -1572,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) => {
@@ -1596,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)}%`
@@ -1616,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,
         {
@@ -1906,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.9.0-develop.1",
+  "version": "16.9.0-develop.11",
   "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.9.0-develop.1",
-    "@progress/kendo-angular-common": "16.9.0-develop.1",
-    "@progress/kendo-angular-dropdowns": "16.9.0-develop.1",
-    "@progress/kendo-angular-inputs": "16.9.0-develop.1",
-    "@progress/kendo-angular-intl": "16.9.0-develop.1",
-    "@progress/kendo-angular-l10n": "16.9.0-develop.1",
-    "@progress/kendo-angular-icons": "16.9.0-develop.1",
-    "@progress/kendo-angular-indicators": "16.9.0-develop.1",
-    "@progress/kendo-angular-pager": "16.9.0-develop.1",
-    "@progress/kendo-angular-popup": "16.9.0-develop.1",
+    "@progress/kendo-angular-buttons": "16.9.0-develop.11",
+    "@progress/kendo-angular-common": "16.9.0-develop.11",
+    "@progress/kendo-angular-dropdowns": "16.9.0-develop.11",
+    "@progress/kendo-angular-inputs": "16.9.0-develop.11",
+    "@progress/kendo-angular-intl": "16.9.0-develop.11",
+    "@progress/kendo-angular-l10n": "16.9.0-develop.11",
+    "@progress/kendo-angular-icons": "16.9.0-develop.11",
+    "@progress/kendo-angular-indicators": "16.9.0-develop.11",
+    "@progress/kendo-angular-pager": "16.9.0-develop.11",
+    "@progress/kendo-angular-popup": "16.9.0-develop.11",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "16.9.0-develop.1",
+    "@progress/kendo-angular-schematics": "16.9.0-develop.11",
     "@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;
     /**
@@ -160,7 +161,7 @@ export declare class PDFViewerComponent implements OnInit, AfterViewInit, OnDest
     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;
@@ -196,7 +197,7 @@ export declare class PDFViewerComponent implements OnInit, AfterViewInit, OnDest
     /**
      * @hidden
      */
-    onZoomLevelChange(zoomLevel: ZoomLevel | string, emit?: boolean): 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.9.0-develop.1',
-            '@progress/kendo-angular-treeview': '16.9.0-develop.1'
+            '@progress/kendo-angular-navigation': '16.9.0-develop.11',
+            '@progress/kendo-angular-treeview': '16.9.0-develop.11'
         } });
     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>;
 }