@progress/kendo-pdfviewer-common 0.6.5-develop.2 → 1.0.0-develop.2

package/dist/es2015/utils.js

@@ -2,6 +2,8 @@ import { saveAs } from '@progress/kendo-file-saver';
 import { detectDesktopBrowser, detectMobileOS } from '@progress/kendo-common';
 import { getDocument, TextLayer } from "pdfjs-dist/legacy/build/pdf.mjs";
 import { LinkAnnotation } from './annotations';
+import { createElement, scrollToPage } from './common/dom';
+export { createElement, scrollToPage };
 const MAX_CANVAS_WIDTH_HEIGHT_CHROME = 65535;
 const MAX_CANVAS_AREA_CHROME_SAFARI = 268435456;
 const MAX_CANVAS_WIDTH_HEIGHT_FIREFOX = 32767;
@@ -217,7 +219,7 @@ const createEmptyPage = (page, zoom, pdfDoc, rootElement) => {
 };
 const renderCanvas = (page, done, error) => {
     const { canvasContext, viewport, scaleNum, canvas, pageElement } = createCanvas(page);
-    page.render({ canvasContext, viewport })
+    page.render({ canvasContext, viewport, canvas })
         .promise.then(() => {
         const printContent = new Image(Math.floor((viewport.width / scaleNum)), Math.floor((viewport.height / scaleNum)));
         printContent.src = canvas.toDataURL();
@@ -230,14 +232,6 @@ const renderCanvas = (page, done, error) => {
         .catch(error);
     return viewport;
 };
-export const createElement = function (name, className, styles) {
-    const element = document.createElement(name);
-    if (className) {
-        element.className = className;
-    }
-    Object.keys(styles).forEach((key) => (element.style[key] = styles[key]));
-    return element;
-};
 export const transforms = {
     '0': '',
     '90': 'rotate(90deg) translateY(-100%)',
@@ -245,9 +239,9 @@ export const transforms = {
     '270': 'rotate(270deg) translateX(-100%)'
 };
 export const renderPage = (page, emptyPage, error) => {
-    const { canvasContext, viewport, pageElement, styles, zoom, pdfDoc, rootElement } = emptyPage;
+    const { canvasContext, viewport, pageElement, styles, zoom, pdfDoc, rootElement, canvas } = emptyPage;
     page._pageInfo.renderInProgress = true;
-    page.render({ canvasContext, viewport })
+    page.render({ canvasContext, viewport, canvas })
         .promise.then(() => {
         page.getTextContent().then((textContent) => {
             const textLayer = createElement('div', 'k-text-layer', styles);
@@ -364,24 +358,6 @@ export const calculateZoomLevel = (zoomLevel, zoomLevelType, currentZoom, dom) =
     }
     return calculatedZoomLevel;
 };
-/**
- * Scrolls the PDFViewer document to the passed page number.
- *
- * @param rootElement The root HTML element of the PDFViewer component.
- * @param pageNumber The page number.
- */
-export const scrollToPage = (rootElement, pageNumber) => {
-    const pages = rootElement.querySelectorAll('.k-page');
-    const page = pages[0];
-    if (page instanceof HTMLDivElement) {
-        const top = (page.offsetHeight + page.offsetTop) *
-            Math.max(0, Math.min(pageNumber, pages.length - 1));
-        const scrollElement = page.closest('.k-pdf-viewer-canvas');
-        if (scrollElement) {
-            scrollElement.scrollTo({ top, behavior: 'auto' });
-        }
-    }
-};
 /**
  * A function which gives you the page number of the document according to the scroll position.
  *

package/dist/es2015/widget/page.js

@@ -572,6 +572,7 @@ export class Page extends Component {
                 canvasContext: canvasContext,
                 // transform,
                 viewport,
+                canvas,
                 annotationMode: __classPrivateFieldGet(this, _Page_annotationMode, "f"),
                 // optionalContentConfigPromise: this._optionalContentConfigPromise,
                 annotationCanvasMap: this._annotationCanvasMap,

package/dist/es2015/widget/pdfviewer.js

@@ -47,6 +47,7 @@ export class PdfViewer extends Component {
             maxZoom: 4,
             zoomRate: 0.25,
             zoomLevel: DEFAULT_ZOOM_LEVEL,
+            pinchToZoom: true,
             zoomBeforePrint: false,
             zoomLevelForPrint: 3,
             renderForms: false,
@@ -148,6 +149,14 @@ export class PdfViewer extends Component {
         this.state = {};
         this.pdfDocument = null;
         this.pages = [];
+        // Pinch-to-zoom state
+        this._isCtrlKeyDown = false;
+        this._isPinching = false;
+        this._touchInfo = null;
+        this._wheelUnusedFactor = 1;
+        this._touchUnusedFactor = 1;
+        this._pendingPinchFactor = 1;
+        this._pinchAC = null;
         this.triggerError = (e) => {
             this.trigger(ERROR, {
                 error: e
@@ -223,6 +232,18 @@ export class PdfViewer extends Component {
             }
             e.preventDefault();
             e.stopPropagation();
+            if (this.options.pinchToZoom && this._isTrackpadPinch(e)) {
+                const scaleFactor = Math.exp(-e.deltaY / 100);
+                const newScaleFactor = this._accumulateFactor(this.state.zoomLevel, scaleFactor, '_wheelUnusedFactor');
+                if (newScaleFactor === 1) {
+                    return;
+                }
+                const zoomLevel = this.state.zoomLevel * newScaleFactor;
+                this.triggerZoomStart({ zoomLevel });
+                this.zoom({ zoomLevel });
+                this.triggerZoomEnd({ zoomLevel });
+                return;
+            }
             const wheelDelta = mousewheelDelta(e);
             const zoomModifier = wheelDelta < 0 ? 1 : -1;
             const zoomLevel = this.state.zoomLevel + (zoomModifier * this.options.zoomRate);
@@ -236,6 +257,102 @@ export class PdfViewer extends Component {
                 zoomLevel: zoomLevel
             });
         };
+        this._onKeyDown = (e) => {
+            if (e.key === 'Control') {
+                this._isCtrlKeyDown = true;
+            }
+        };
+        this._onKeyUp = (e) => {
+            if (e.key === 'Control') {
+                this._isCtrlKeyDown = false;
+            }
+        };
+        this._onGestureEvent = (e) => {
+            e.preventDefault();
+        };
+        this._onTouchStart = (e) => {
+            var _a;
+            if (!this.options.pinchToZoom) {
+                return;
+            }
+            if (e.touches.length !== 2) {
+                return;
+            }
+            // Prevent browser-native pinch-zoom from starting (required for iOS Safari
+            // where the gesture decision is made at touchstart time)
+            e.preventDefault();
+            const touch0 = e.touches[0];
+            const touch1 = e.touches[1];
+            this._touchInfo = {
+                touch0X: touch0.screenX,
+                touch0Y: touch0.screenY,
+                touch1X: touch1.screenX,
+                touch1Y: touch1.screenY
+            };
+            this._pendingPinchFactor = 1;
+            this._touchUnusedFactor = 1;
+            const documentContainer = this.getDocumentContainer();
+            if (!documentContainer) {
+                return;
+            }
+            const signal = (_a = this._pinchAC) === null || _a === void 0 ? void 0 : _a.signal;
+            documentContainer.addEventListener('touchmove', this._onTouchMove, { passive: false, signal });
+            documentContainer.addEventListener('touchend', this._onTouchEnd, { signal });
+            documentContainer.addEventListener('touchcancel', this._onTouchEnd, { signal });
+        };
+        this._onTouchMove = (e) => {
+            if (!this._touchInfo || e.touches.length !== 2) {
+                return;
+            }
+            e.preventDefault();
+            e.stopPropagation();
+            const touch0 = e.touches[0];
+            const touch1 = e.touches[1];
+            const prevGapX = this._touchInfo.touch1X - this._touchInfo.touch0X;
+            const prevGapY = this._touchInfo.touch1Y - this._touchInfo.touch0Y;
+            const currGapX = touch1.screenX - touch0.screenX;
+            const currGapY = touch1.screenY - touch0.screenY;
+            const prevDist = Math.hypot(prevGapX, prevGapY) || 1;
+            const currDist = Math.hypot(currGapX, currGapY) || 1;
+            if (Math.abs(prevDist - currDist) <= this._minTouchDistanceToPinch) {
+                return;
+            }
+            if (!this._isPinching) {
+                this._isPinching = true;
+                // Suppress panning during pinch
+                this.disableScrollerEventsTracking();
+                // Fire zoom start on first pinch movement
+                this.triggerZoomStart({ zoomLevel: this.state.zoomLevel });
+            }
+            this._applyPinchTransform(prevDist, currDist);
+            // Update stored positions for next move
+            this._touchInfo = {
+                touch0X: touch0.screenX,
+                touch0Y: touch0.screenY,
+                touch1X: touch1.screenX,
+                touch1Y: touch1.screenY
+            };
+        };
+        this._onTouchEnd = (e) => {
+            if (e.touches.length >= 2) {
+                return;
+            }
+            const documentContainer = this.getDocumentContainer();
+            if (documentContainer) {
+                documentContainer.removeEventListener('touchmove', this._onTouchMove);
+                documentContainer.removeEventListener('touchend', this._onTouchEnd);
+                documentContainer.removeEventListener('touchcancel', this._onTouchEnd);
+            }
+            if (this._isPinching) {
+                this._clearPinchTransform();
+                const zoomLevel = clamp(this.state.zoomLevel * this._pendingPinchFactor, this.options.minZoom, this.options.maxZoom);
+                this.zoom({ zoomLevel });
+                this.triggerZoomEnd({ zoomLevel });
+                // Re-enable panning
+                this.enableScrollerEventsTracking();
+            }
+            this._resetPinchState();
+        };
         this.extendOptions(options);
         this.throwIfInvalidOptions();
         this.wrapper = this.element;
@@ -362,6 +479,7 @@ export class PdfViewer extends Component {
     }
     bindEvents() {
         this.bindPagesWheel();
+        this.bindPinchToZoomEvents();
     }
     bindPagesWheel() {
         const documentContainer = this.getDocumentContainer();
@@ -381,6 +499,7 @@ export class PdfViewer extends Component {
     }
     unbindEvents() {
         this.unbindPagesWheel();
+        this.unbindPinchToZoomEvents();
     }
     unbindPagesWheel() {
         const documentContainer = this.getDocumentContainer();
@@ -1339,6 +1458,105 @@ export class PdfViewer extends Component {
     }
     setScaleFactor(scaleFactor) {
         this.element.style.setProperty('--scale-factor', String(scaleFactor * PixelsPerInch.PDF_TO_CSS_UNITS));
+        this.element.style.setProperty('--total-scale-factor', String(scaleFactor * PixelsPerInch.PDF_TO_CSS_UNITS));
+        this.element.style.setProperty('--scale-round-x', '1px');
+        this.element.style.setProperty('--scale-round-y', '1px');
+    }
+    _isTrackpadPinch(e) {
+        // Trackpad pinch gestures generate wheel events with synthetic ctrlKey=true.
+        // Real Ctrl+scroll has ctrlKey=true but the physical key is down.
+        // Heuristic: ctrlKey is set, physical Ctrl is NOT pressed, pixel-level delta,
+        // deltaX is 0 (no horizontal scroll), and the scale factor is small.
+        if (this._isCtrlKeyDown) {
+            return false;
+        }
+        if (e.deltaMode !== WheelEvent.DOM_DELTA_PIXEL) {
+            return false;
+        }
+        if (e.deltaX !== 0) {
+            return false;
+        }
+        const scaleFactor = Math.exp(-e.deltaY / 100);
+        if (Math.abs(scaleFactor - 1) >= 0.05) {
+            return false;
+        }
+        return true;
+    }
+    _accumulateFactor(previousScale, factor, prop) {
+        if (factor === 1) {
+            return 1;
+        }
+        if ((this[prop] > 1 && factor < 1) || (this[prop] < 1 && factor > 1)) {
+            this[prop] = 1;
+        }
+        const newFactor = Math.floor(previousScale * factor * this[prop] * 100) / (100 * previousScale);
+        this[prop] = factor / (newFactor || factor);
+        return newFactor || 1;
+    }
+    bindPinchToZoomEvents() {
+        if (!this.options.pinchToZoom) {
+            return;
+        }
+        document.addEventListener('keydown', this._onKeyDown);
+        document.addEventListener('keyup', this._onKeyUp);
+        const documentContainer = this.getDocumentContainer();
+        if (!documentContainer) {
+            return;
+        }
+        this._pinchAC = new AbortController();
+        const signal = this._pinchAC.signal;
+        // Prevent the browser from handling pinch-zoom natively
+        documentContainer.style.touchAction = 'none';
+        documentContainer.addEventListener('touchstart', this._onTouchStart, { passive: false, signal });
+        // iOS Safari fires proprietary GestureEvents for pinch gestures.
+        // Suppressing them prevents the browser from zooming the page.
+        documentContainer.addEventListener('gesturestart', this._onGestureEvent, { signal });
+        documentContainer.addEventListener('gesturechange', this._onGestureEvent, { signal });
+    }
+    unbindPinchToZoomEvents() {
+        document.removeEventListener('keydown', this._onKeyDown);
+        document.removeEventListener('keyup', this._onKeyUp);
+        this._isCtrlKeyDown = false;
+        const documentContainer = this.getDocumentContainer();
+        if (documentContainer) {
+            documentContainer.style.touchAction = '';
+        }
+        if (this._pinchAC) {
+            this._pinchAC.abort();
+            this._pinchAC = null;
+        }
+        this._resetPinchState();
+    }
+    _resetPinchState() {
+        this._isPinching = false;
+        this._touchInfo = null;
+        this._touchUnusedFactor = 1;
+        this._wheelUnusedFactor = 1;
+        this._pendingPinchFactor = 1;
+    }
+    get _minTouchDistanceToPinch() {
+        return 32 / (window.devicePixelRatio || 1);
+    }
+    _applyPinchTransform(prevDist, currDist) {
+        const rawFactor = currDist / prevDist;
+        const newFactor = this._accumulateFactor(this.state.zoomLevel, rawFactor, '_touchUnusedFactor');
+        this._pendingPinchFactor *= newFactor;
+        // Clamp the visual factor to the allowed zoom range
+        const targetZoom = this.state.zoomLevel * this._pendingPinchFactor;
+        const clampedZoom = clamp(targetZoom, this.options.minZoom, this.options.maxZoom);
+        const visualFactor = clampedZoom / this.state.zoomLevel;
+        const pagesContainer = this.getPagesContainer();
+        if (pagesContainer) {
+            pagesContainer.style.transform = `scale(${visualFactor})`;
+            pagesContainer.style.transformOrigin = 'center top';
+        }
+    }
+    _clearPinchTransform() {
+        const pagesContainer = this.getPagesContainer();
+        if (pagesContainer) {
+            pagesContainer.style.transform = '';
+            pagesContainer.style.transformOrigin = '';
+        }
     }
     activatePageNumber(pageNumber) {
         const page = this.getPageByNumber(pageNumber);

package/dist/npm/annotations/annotation-editor-ui-manager.js

@@ -872,7 +872,7 @@ class AnnotationEditorUIManager {
             case pdf_mjs_1.AnnotationEditorParamsType.CREATE:
                 this.currentLayer.addNewEditor();
                 return;
-            case pdf_mjs_1.AnnotationEditorParamsType.HIGHLIGHT_DEFAULT_COLOR:
+            case pdf_mjs_1.AnnotationEditorParamsType.HIGHLIGHT_COLOR:
                 // this.#mainHighlightColorPicker?.updateColor(value);
                 break;
             case pdf_mjs_1.AnnotationEditorParamsType.HIGHLIGHT_SHOW_ALL:

package/dist/npm/annotations/annotation-layer.js

@@ -1920,9 +1920,7 @@ class PopupElement {
         const popup = (tslib_1.__classPrivateFieldSet(this, _PopupElement_popup, document.createElement("div"), "f"));
         popup.className = "popup";
         if (tslib_1.__classPrivateFieldGet(this, _PopupElement_color, "f")) {
-            const baseColor = (popup.style.outlineColor = pdf_mjs_1.Util.makeHexColor(
-            // @ts-expect-error TS(2556):
-            ...tslib_1.__classPrivateFieldGet(this, _PopupElement_color, "f")));
+            const baseColor = (popup.style.outlineColor = pdf_mjs_1.Util.makeHexColor(...tslib_1.__classPrivateFieldGet(this, _PopupElement_color, "f")));
             if (
             // (typeof PDFJSDev !== "undefined" && PDFJSDev.test("MOZCENTRAL")) ||
             CSS.supports("background-color", "color-mix(in srgb, red 30%, white)")) {
@@ -1934,9 +1932,7 @@ class PopupElement {
                 // TODO: Use color-mix when it's supported everywhere.
                 // Enlighten the color.
                 const BACKGROUND_ENLIGHT = 0.7;
-                popup.style.backgroundColor = pdf_mjs_1.Util.makeHexColor(
-                // @ts-expect-error TS(2556):
-                ...tslib_1.__classPrivateFieldGet(this, _PopupElement_color, "f").map(c => Math.floor(BACKGROUND_ENLIGHT * (255 - c) + c)));
+                popup.style.backgroundColor = pdf_mjs_1.Util.makeHexColor(...tslib_1.__classPrivateFieldGet(this, _PopupElement_color, "f").map(c => Math.floor(BACKGROUND_ENLIGHT * (255 - c) + c)));
             }
         }
         const header = document.createElement("span");
@@ -1957,7 +1953,6 @@ class PopupElement {
         }
         const html = tslib_1.__classPrivateFieldGet(this, _PopupElement_instances, "a", _PopupElement_html_get);
         if (html) {
-            // @ts-expect-error TS(2556):
             pdf_mjs_1.XfaLayer.render({
                 xfaHtml: html,
                 intent: "richText",

package/dist/npm/annotations/editors/free-text-editor.js

@@ -533,7 +533,6 @@ class FreeTextEditor extends annotation_editor_1.AnnotationEditor {
         }
         const editor = super.deserialize(data, parent, uiManager);
         tslib_1.__classPrivateFieldSet(editor, _FreeTextEditor_fontSize, data.fontSize, "f");
-        // @ts-expect-error TS(2556):
         tslib_1.__classPrivateFieldSet(editor, _FreeTextEditor_color, pdf_mjs_1.Util.makeHexColor(...data.color), "f");
         tslib_1.__classPrivateFieldSet(editor, _FreeTextEditor_content, tslib_1.__classPrivateFieldGet(_a, _a, "m", _FreeTextEditor_deserializeContent).call(_a, data.value), "f");
         editor.annotationElementId = data.id || null;

package/dist/npm/annotations/editors/highlight-editor.js

@@ -126,7 +126,7 @@ class HighlightEditor extends annotation_editor_1.AnnotationEditor {
     /** @inheritdoc */
     static updateDefaultParams(type, value) {
         switch (type) {
-            case pdf_mjs_1.AnnotationEditorParamsType.HIGHLIGHT_DEFAULT_COLOR:
+            case pdf_mjs_1.AnnotationEditorParamsType.HIGHLIGHT_COLOR:
                 _a._defaultColor = value;
                 break;
             case pdf_mjs_1.AnnotationEditorParamsType.HIGHLIGHT_THICKNESS:
@@ -157,7 +157,7 @@ class HighlightEditor extends annotation_editor_1.AnnotationEditor {
     static get defaultPropertiesToUpdate() {
         return [
             [
-                pdf_mjs_1.AnnotationEditorParamsType.HIGHLIGHT_DEFAULT_COLOR,
+                pdf_mjs_1.AnnotationEditorParamsType.HIGHLIGHT_COLOR,
                 _a._defaultColor
             ],
             [
@@ -404,7 +404,6 @@ class HighlightEditor extends annotation_editor_1.AnnotationEditor {
     static deserialize(data, parent, uiManager) {
         const editor = super.deserialize(data, parent, uiManager);
         const { rect: [blX, blY, trX, trY], color, quadPoints } = data;
-        // @ts-expect-error TS()
         editor.color = pdf_mjs_1.Util.makeHexColor(...color);
         tslib_1.__classPrivateFieldSet(editor, _HighlightEditor_opacity, data.opacity, "f");
         const [pageWidth, pageHeight] = editor.pageDimensions;

package/dist/npm/annotations/editors/outliner.js

@@ -726,9 +726,8 @@ _FreeHighlightOutline_box = new WeakMap(), _FreeHighlightOutline_bbox = new Weak
             }
         }
         else {
-            const bbox = pdf_mjs_1.Util.bezierBoundingBox(lastX, lastY, 
-            // @ts-expect-error(TS:2556)
-            ...outline.slice(i, i + 6));
+            // pdfjs-dist legacy types declare bezierBoundingBox as void/9-arg but it returns the bbox array at runtime
+            const bbox = pdf_mjs_1.Util.bezierBoundingBox(lastX, lastY, ...outline.slice(i, i + 6));
             minX = Math.min(minX, bbox[0]);
             minY = Math.min(minY, bbox[1]);
             maxX = Math.max(maxX, bbox[2]);

package/dist/npm/annotations.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LinkAnnotation = void 0;
-const utils_1 = require("./utils");
+const dom_1 = require("./common/dom");
 class Annotation {
     constructor(container, viewport, annotation, pdfDoc, zoom, rootElement) {
         this.container = container;
@@ -43,7 +43,7 @@ class LinkAnnotation extends Annotation {
         });
     }
     goToPage(pageNumber) {
-        (0, utils_1.scrollToPage)(this.rootElement, pageNumber);
+        (0, dom_1.scrollToPage)(this.rootElement, pageNumber);
     }
     renderAnnotation() {
         const annotation = this.annotation, viewport = this.viewport, rect = annotation.rect, boundingRect = [
@@ -52,12 +52,12 @@ class LinkAnnotation extends Annotation {
         ], rawHeight = viewport.rawDims.pageHeight;
         const left = Math.min(boundingRect[0][0], boundingRect[1][0]) * this.zoom, top = (rawHeight - Math.max(boundingRect[0][1], boundingRect[1][1])) * this.zoom, width = (boundingRect[1][0] - boundingRect[0][0]) * this.zoom, height = (boundingRect[1][1] - boundingRect[0][1]) * this.zoom;
         const url = annotation.url || (annotation.dest && `#${encodeURI(annotation.dest)}`);
-        const annotationElement = (0, utils_1.createElement)('span', '', {
+        const annotationElement = (0, dom_1.createElement)('span', '', {
             position: 'absolute',
             left: left + 'pt',
             top: top + 'pt'
         });
-        const linkElement = this.linkElement = (0, utils_1.createElement)('a', '', {
+        const linkElement = this.linkElement = (0, dom_1.createElement)('a', '', {
             width: width + 'pt',
             height: height + 'pt',
             display: 'inline-block',

package/dist/npm/common/component.d.ts

@@ -1,4 +1,5 @@
 export declare class Component {
+    readonly __isComponent = true;
     element: HTMLElement | null;
     options: any;
     constructor(element: any, options: any);

package/dist/npm/common/component.js

@@ -4,6 +4,7 @@ exports.Component = void 0;
 const core_1 = require("./core");
 class Component {
     constructor(element, options) {
+        this.__isComponent = true;
         this.options = {
             events: {}
         };

package/dist/npm/common/core.js

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createPromise = exports.mousewheelDelta = exports.toClassSelector = exports.toPixel = exports.convertToHtml = exports.noop = exports.hasValue = exports.isNotNull = exports.isDefined = exports.toArray = exports.isString = exports.isFunction = exports.deepExtend = exports.isDotNetObject = exports.isDomElement = exports.isHtmlElement = exports.isObject = exports.extend = void 0;
-const component_1 = require("./component");
 // @ts-expect-error TS(2556): A spread argument must either have a tuple type or... Remove this comment to see the full error message
 const extend = (...args) => Object.assign(...args);
 exports.extend = extend;
@@ -26,7 +25,7 @@ const deepExtend = (target, ...sources) => {
             if (key === '__proto__' || key === 'constructor') {
                 continue;
             }
-            if (source[key] instanceof component_1.Component) {
+            if (source[key] && source[key].__isComponent) {
                 target[key] = source[key];
             }
             else if ((0, exports.isHtmlElement)(source[key])) {

package/dist/npm/common/dom.d.ts

@@ -1,3 +1,13 @@
 export declare const addClass: (className: any, element: any) => void;
 export declare const removeClass: (className: any, element: any) => void;
 export declare const hasClass: (className: any, element: any) => boolean;
+export declare const createElement: <T>(name: string, className: string, styles: {
+    [key: string]: string;
+}) => T;
+/**
+ * Scrolls the PDFViewer document to the passed page number.
+ *
+ * @param rootElement The root HTML element of the PDFViewer component.
+ * @param pageNumber The page number.
+ */
+export declare const scrollToPage: (rootElement: HTMLElement, pageNumber: number) => void;

package/dist/npm/common/dom.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.hasClass = exports.removeClass = exports.addClass = void 0;
+exports.scrollToPage = exports.createElement = exports.hasClass = exports.removeClass = exports.addClass = void 0;
 const addClass = (className, element) => {
     element.classList.add(className);
 };
@@ -15,3 +15,31 @@ const hasClass = (className, element) => {
     }
 };
 exports.hasClass = hasClass;
+const createElement = function (name, className, styles) {
+    const element = document.createElement(name);
+    if (className) {
+        element.className = className;
+    }
+    Object.keys(styles).forEach((key) => (element.style[key] = styles[key]));
+    return element;
+};
+exports.createElement = createElement;
+/**
+ * Scrolls the PDFViewer document to the passed page number.
+ *
+ * @param rootElement The root HTML element of the PDFViewer component.
+ * @param pageNumber The page number.
+ */
+const scrollToPage = (rootElement, pageNumber) => {
+    const pages = rootElement.querySelectorAll('.k-page');
+    const page = pages[0];
+    if (page instanceof HTMLDivElement) {
+        const top = (page.offsetHeight + page.offsetTop) *
+            Math.max(0, Math.min(pageNumber, pages.length - 1));
+        const scrollElement = page.closest('.k-pdf-viewer-canvas');
+        if (scrollElement) {
+            scrollElement.scrollTo({ top, behavior: 'auto' });
+        }
+    }
+};
+exports.scrollToPage = scrollToPage;

package/dist/npm/main.d.ts

@@ -3,5 +3,5 @@ export * from './search';
 export * from './utils';
 export * from './widget/pdfviewer';
 export * from './enums/PdfViewerInteractionMode';
-export { PDFDocumentProxy } from 'pdfjs-dist';
-export { TypedArray } from 'pdfjs-dist/types/src/display/api';
+export type { TypedArray } from "./types";
+export type { PDFDocumentProxy } from 'pdfjs-dist/types/src/display/api';

package/dist/npm/types/index.d.ts

@@ -0,0 +1 @@
+export type TypedArray = Int8Array | Uint8Array | Uint8ClampedArray | Int16Array | Uint16Array | Int32Array | Uint32Array | Float32Array | Float64Array;

package/dist/npm/types/index.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/npm/utils.d.ts

@@ -1,6 +1,8 @@
 import { SaveOptions } from '@progress/kendo-file-saver';
 import { PDFPageProxy, PDFDocumentProxy } from "pdfjs-dist/legacy/build/pdf.mjs";
 import { TypedArray } from "pdfjs-dist/types/src/display/api";
+import { createElement, scrollToPage } from './common/dom';
+export { createElement, scrollToPage };
 /**
  * @hidden
  */
@@ -75,9 +77,6 @@ export declare const reloadDocument: (params: PDFReloadParameters) => void;
  * @hidden
  */
 export declare const print: (pages: PDFPageProxy[], done: () => void, error: ErrorFn) => void;
-export declare const createElement: <T>(name: string, className: string, styles: {
-    [key: string]: string;
-}) => T;
 export declare const transforms: {
     [rotation: string]: string;
 };
@@ -94,13 +93,6 @@ export declare const goToPreviousSearchMatch: (ref: any) => void;
  * @hidden
  */
 export declare const calculateZoomLevel: (zoomLevel: number, zoomLevelType: string, currentZoom: number, dom: HTMLDivElement) => number;
-/**
- * Scrolls the PDFViewer document to the passed page number.
- *
- * @param rootElement The root HTML element of the PDFViewer component.
- * @param pageNumber The page number.
- */
-export declare const scrollToPage: (rootElement: HTMLElement, pageNumber: number) => void;
 /**
  * A function which gives you the page number of the document according to the scroll position.
  *