@progress/kendo-react-pdf-viewer 5.16.1 → 5.16.2-dev.202308021222

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-react-pdf-viewer",
-  "version": "5.16.1",
+  "version": "5.16.2-dev.202308021222",
   "description": "KendoReact PDFViewer package",
   "repository": {
     "type": "git",
@@ -51,9 +51,9 @@
   },
   "dependencies": {
     "@progress/kendo-draggable": "^3.0.0",
-    "@progress/kendo-react-common": "5.16.1",
+    "@progress/kendo-pdfviewer-common": "0.2.1",
+    "@progress/kendo-react-common": "5.16.2-dev.202308021222",
     "@typescript/lib-dom": "npm:@types/web",
-    "pdfjs-dist": "3.7.107",
     "prop-types": "^15.6.0"
   },
   "devDependencies": {
@@ -62,17 +62,17 @@
     "@progress/kendo-drawing": "^1.17.2",
     "@progress/kendo-file-saver": "^1.1.1",
     "@progress/kendo-licensing": "^1.3.0",
-    "@progress/kendo-react-animation": "5.16.1",
-    "@progress/kendo-react-buttons": "5.16.1",
-    "@progress/kendo-react-data-tools": "5.16.1",
-    "@progress/kendo-react-dateinputs": "5.16.1",
-    "@progress/kendo-react-dropdowns": "5.16.1",
-    "@progress/kendo-react-indicators": "5.16.1",
-    "@progress/kendo-react-inputs": "5.16.1",
-    "@progress/kendo-react-intl": "5.16.1",
-    "@progress/kendo-react-progressbars": "5.16.1",
-    "@progress/kendo-react-treeview": "5.16.1",
-    "@progress/kendo-react-upload": "5.16.1",
+    "@progress/kendo-react-animation": "5.16.2-dev.202308021222",
+    "@progress/kendo-react-buttons": "5.16.2-dev.202308021222",
+    "@progress/kendo-react-data-tools": "5.16.2-dev.202308021222",
+    "@progress/kendo-react-dateinputs": "5.16.2-dev.202308021222",
+    "@progress/kendo-react-dropdowns": "5.16.2-dev.202308021222",
+    "@progress/kendo-react-indicators": "5.16.2-dev.202308021222",
+    "@progress/kendo-react-inputs": "5.16.2-dev.202308021222",
+    "@progress/kendo-react-intl": "5.16.2-dev.202308021222",
+    "@progress/kendo-react-progressbars": "5.16.2-dev.202308021222",
+    "@progress/kendo-react-treeview": "5.16.2-dev.202308021222",
+    "@progress/kendo-react-upload": "5.16.2-dev.202308021222",
     "@progress/kendo-svg-icons": "^1.0.0"
   },
   "@progress": {

package/dist/es/scroller.d.ts

@@ -1,34 +0,0 @@
-/**
- * @hidden
- */
-export declare class Scroller {
-    options: any;
-    state: any;
-    element: any;
-    throttledOnDrag: any;
-    draggable: any;
-    throttledOnElementScroll: any;
-    constructor(element: any, options: any);
-    destroy(): void;
-    initDraggable(): void;
-    destroyDraggable(): void;
-    bindEvents(): void;
-    bindDraggableEvents(): void;
-    bindElementScroll(): void;
-    unbindEvents(): void;
-    unbindDraggableEvents(): void;
-    unbindElementScroll(): void;
-    setState(newState: any): void;
-    resetState(): void;
-    enablePanEventsTracking(): void;
-    disablePanEventsTracking(): void;
-    shouldTrackPanEvents(): any;
-    onElementScroll: () => void;
-    onDragStart: (e: any) => void;
-    onDrag: (e: any) => void;
-    onDragEnd: () => void;
-    calculateEventLocationDelta(e: any): void;
-    scrollTo(x: any, y: any, options?: {
-        trackScrollEvent: boolean;
-    }): void;
-}

package/dist/es/scroller.js

@@ -1,226 +0,0 @@
-import Draggable from '@progress/kendo-draggable';
-const throttle = function (func, wait, options = {}) {
-    let timeout, context, args, result;
-    let previous = 0;
-    options = options || {};
-    const later = function () {
-        previous = options.leading === false ? 0 : new Date().getTime();
-        timeout = undefined;
-        result = func.apply(context, args);
-        if (!timeout) {
-            context = args = null;
-        }
-    };
-    const throttled = function () {
-        const now = new Date().getTime();
-        if (!previous && options.leading === false) {
-            previous = now;
-        }
-        const remaining = wait - (now - previous);
-        context = undefined; // this
-        args = arguments;
-        if (remaining <= 0 || remaining > wait) {
-            if (timeout) {
-                clearTimeout(timeout);
-                timeout = undefined;
-            }
-            previous = now;
-            result = func.apply(context, args);
-            if (!timeout) {
-                context = args = null;
-            }
-        }
-        else if (!timeout && options.trailing !== false) {
-            timeout = window.setTimeout(later, remaining);
-        }
-        return result;
-    };
-    return throttled;
-};
-const preventDefault = (e) => {
-    if (e.preventDefault) {
-        e.preventDefault();
-    }
-    if (e.originalEvent) {
-        e.originalEvent.preventDefault();
-    }
-};
-const matchesElementSelector = (element, selector) => {
-    if (!element || !selector) {
-        return false;
-    }
-    return element.closest(selector);
-};
-const FRAMES_PER_SECOND = 1000 / 60;
-const SCROLL = 'scroll';
-/**
- * @hidden
- */
-export class Scroller {
-    constructor(element, options) {
-        this.options = {
-            // the drag directions are actually reversed, e.g.
-            // dragging to the right actually moves the document to the left
-            scrollDirectionModifier: -1,
-            // throttle the scroll events to get a more similar experience
-            // to the scrolling behavior in Adobe Acrobat Reader
-            // as well as allow a way to improve the scrolling performance for large files
-            panScrollThrottleDelay: FRAMES_PER_SECOND,
-            scrollThrottleDelay: FRAMES_PER_SECOND,
-            filter: '',
-            events: {
-                [SCROLL]: () => { }
-            }
-        };
-        this.onElementScroll = () => {
-            const element = this.element;
-            if (this.state.trackNextElementScroll) {
-                this.scrollTo(element.scrollLeft, element.scrollTop);
-            }
-            else {
-                // reset the state, so that consecutive scroll events can be handled
-                this.state.trackNextElementScroll = true;
-            }
-        };
-        this.onDragStart = (e) => {
-            this.state.dragStarted = false;
-            if (!this.shouldTrackPanEvents()) {
-                return;
-            }
-            const target = e.target || (e.originalEvent || {}).target;
-            if (this.options.filter && !matchesElementSelector(target, this.options.filter)) {
-                return;
-            }
-            preventDefault(e);
-            this.setState({
-                dragStarted: true,
-                location: {
-                    pageX: e.pageX,
-                    pageY: e.pageY
-                },
-                locationDelta: {
-                    x: 0,
-                    y: 0
-                }
-            });
-        };
-        this.onDrag = (e) => {
-            if (!this.shouldTrackPanEvents() || !this.state.dragStarted) {
-                return;
-            }
-            this.calculateEventLocationDelta(e);
-            this.setState({
-                location: {
-                    pageX: e.pageX,
-                    pageY: e.pageY
-                }
-            });
-            const directionModifier = this.options.scrollDirectionModifier;
-            const scrollLeft = this.element.scrollLeft + (directionModifier * this.state.locationDelta.x);
-            const scrollTop = this.element.scrollTop + (directionModifier * this.state.locationDelta.y);
-            this.scrollTo(scrollLeft, scrollTop);
-        };
-        this.onDragEnd = () => {
-            if (!this.shouldTrackPanEvents()) {
-                return;
-            }
-        };
-        this.element = element;
-        this.options = Object.assign({}, this.options, options);
-        this.resetState();
-        this.bindEvents();
-    }
-    destroy() {
-        this.unbindEvents();
-    }
-    initDraggable() {
-        this.destroyDraggable();
-        if (this.options.panScrollThrottleDelay > 0) {
-            this.throttledOnDrag = throttle(this.onDrag, this.options.panScrollThrottleDelay);
-        }
-        else {
-            this.throttledOnDrag = this.onDrag;
-        }
-        this.draggable = new Draggable({
-            mouseOnly: false,
-            press: this.onDragStart,
-            drag: this.throttledOnDrag,
-            release: this.onDragEnd
-        });
-        this.draggable.bindTo(this.element);
-    }
-    destroyDraggable() {
-        if (this.draggable && this.draggable.destroy) {
-            this.draggable.destroy();
-            if (this.throttledOnDrag && this.throttledOnDrag.cancel) {
-                this.throttledOnDrag.cancel();
-                this.throttledOnDrag = null;
-            }
-        }
-    }
-    bindEvents() {
-        this.bindDraggableEvents();
-        this.bindElementScroll();
-    }
-    bindDraggableEvents() {
-        this.initDraggable();
-    }
-    bindElementScroll() {
-        if (this.options.scrollThrottleDelay > 0) {
-            this.throttledOnElementScroll = throttle(this.onElementScroll, this.options.scrollThrottleDelay);
-        }
-        else {
-            this.throttledOnElementScroll = this.onElementScroll;
-        }
-        this.element.addEventListener(SCROLL, this.throttledOnElementScroll);
-    }
-    unbindEvents() {
-        this.unbindElementScroll();
-        this.unbindDraggableEvents();
-    }
-    unbindDraggableEvents() {
-        this.destroyDraggable();
-    }
-    unbindElementScroll() {
-        if (this.throttledOnElementScroll && this.throttledOnElementScroll.cancel) {
-            this.throttledOnElementScroll.cancel();
-            this.throttledOnElementScroll = null;
-        }
-        this.element.removeEventListener(SCROLL, this.throttledOnElementScroll);
-    }
-    setState(newState) {
-        this.state = Object.assign({}, this.state || {}, newState);
-    }
-    resetState() {
-        this.setState({
-            trackPanEvents: false,
-            trackNextElementScroll: false,
-            location: { pageX: 0, pageY: 0 },
-            locationDelta: { x: 0, y: 0 }
-        });
-    }
-    enablePanEventsTracking() {
-        this.state.trackPanEvents = true;
-        this.bindDraggableEvents();
-    }
-    disablePanEventsTracking() {
-        this.unbindDraggableEvents();
-        this.state.trackPanEvents = false;
-    }
-    shouldTrackPanEvents() {
-        return this.state.trackPanEvents;
-    }
-    calculateEventLocationDelta(e) {
-        this.state.locationDelta = {
-            x: e.pageX - this.state.location.pageX,
-            y: e.pageY - this.state.location.pageY
-        };
-    }
-    scrollTo(x, y, options = { trackScrollEvent: true }) {
-        if (!options.trackScrollEvent) {
-            this.state.trackNextElementScroll = false;
-        }
-        this.element.scrollLeft = x;
-        this.element.scrollTop = y;
-    }
-}

package/dist/es/search.d.ts

@@ -1,42 +0,0 @@
-/**
- * @hidden
- */
-export declare class SearchService {
-    options: {
-        highlightClass: string;
-        highlightMarkClass: string;
-        charClass: string;
-        textContainers: never[];
-    };
-    state: any;
-    constructor(options: any);
-    destroy(): void;
-    extendOptions(options: any): void;
-    setState(newState: any): void;
-    resetState(): void;
-    search({ text, matchCase }: any): {
-        startOffset: number;
-        endOffset: number;
-    }[];
-    clearSearch(): void;
-    restoreOriginalText(): void;
-    shouldTransformText(): boolean;
-    transformTextForSearch(): void;
-    extractTextNodes(node: any): void;
-    transformTextNodesForSearch(textNodes: any): void;
-    transformTextNodeForSearch(node: any): void;
-    splitTextByChars(text: any): string;
-    forEachTextContainer(callback: any): void;
-    highlightAllMatches(): void;
-    addMatchHighlight(matchStartOffset: number, matchEndOffset: number, matchIndex: number): void;
-    removeMatchHighlights(): void;
-    addActiveMatchMark(): void;
-    removeActiveMatchMark(): void;
-    removeIndicators(): void;
-    markNextMatch(): void;
-    markPreviousMatch(): void;
-    markNextMatchIndex(): void;
-    markPreviousMatchIndex(): void;
-    moveActiveMatchIndex(delta: any): void;
-    getActiveMatchElement(): undefined;
-}

package/dist/es/search.js

@@ -1,249 +0,0 @@
-const unwrapElement = (element) => {
-    const parentElement = element.parentElement;
-    if (!element || !parentElement) {
-        return;
-    }
-    parentElement.replaceWith(...Array.from(parentElement.childNodes));
-};
-const unwrapElements = (elements) => {
-    if (!elements || !elements.length || elements.length <= 0) {
-        return;
-    }
-    for (let i = 0; i < elements.length; i++) {
-        unwrapElement(elements[i]);
-    }
-};
-const wrapElement = (element, wrapper) => {
-    if (element.parentNode) {
-        element.parentNode.insertBefore(wrapper, element);
-        wrapper.appendChild(element);
-    }
-};
-const wrapInnerElement = (element, wrapper) => {
-    if (!element || !element.parentNode || !wrapper) {
-        return;
-    }
-    element.appendChild(wrapper);
-    while (element.firstChild && element.firstChild !== wrapper) {
-        wrapper.appendChild(element.firstChild);
-    }
-};
-const addClass = (className, element) => { element.classList.add(className); };
-const removeClass = (className, element) => { element.classList.remove(className); };
-const toClassSelector = (className) => `.${className}`;
-const CHAR_INDEX_DATA_ATTR = 'data-char-index';
-const MATCH_INDEX_DATA_ATTR = 'data-match-index';
-/**
- * @hidden
- */
-export class SearchService {
-    constructor(options) {
-        this.options = {
-            highlightClass: 'k-search-highlight',
-            highlightMarkClass: 'k-search-highlight-mark',
-            charClass: 'k-text-char',
-            textContainers: []
-        };
-        this.extendOptions(options);
-        this.resetState();
-    }
-    destroy() {
-        this.clearSearch();
-    }
-    extendOptions(options) {
-        this.options = Object.assign({}, this.options, options);
-    }
-    setState(newState) {
-        this.state = Object.assign({}, this.state || {}, newState);
-    }
-    resetState() {
-        this.setState({
-            text: '',
-            textNodes: [],
-            charIndex: 0,
-            activeMatchIndex: 0,
-            matches: []
-        });
-    }
-    search({ text, matchCase }) {
-        let searchRegex = new RegExp(text, matchCase ? 'g' : 'ig');
-        let match;
-        if (this.shouldTransformText()) {
-            this.transformTextForSearch();
-        }
-        this.state.matches = [];
-        this.state.activeMatchIndex = 0;
-        this.removeIndicators();
-        if (text === '') {
-            return [];
-        }
-        match = searchRegex.exec(this.state.text);
-        while (match) {
-            this.state.matches.push({
-                startOffset: match.index,
-                endOffset: match.index + match[0].length
-            });
-            match = searchRegex.exec(this.state.text);
-        }
-        this.highlightAllMatches();
-        this.addActiveMatchMark();
-        return this.state.matches;
-    }
-    clearSearch() {
-        this.removeIndicators();
-        this.restoreOriginalText();
-    }
-    restoreOriginalText() {
-        this.forEachTextContainer((textContainer) => {
-            const nodes = Array.from(textContainer.querySelectorAll('span:not(.' + this.options.charClass + ')'));
-            nodes.forEach((node) => {
-                node.innerHTML = node.textContent;
-            });
-        });
-    }
-    shouldTransformText() {
-        return !this.state.text;
-    }
-    transformTextForSearch() {
-        this.state.textNodes = [];
-        this.state.charIndex = 0;
-        this.state.text = '';
-        this.forEachTextContainer((textContainer) => {
-            this.extractTextNodes(textContainer);
-        });
-        this.transformTextNodesForSearch(this.state.textNodes);
-    }
-    extractTextNodes(node) {
-        if (node.nodeType === Node.TEXT_NODE) {
-            this.state.textNodes.push(node);
-        }
-        else {
-            for (let i = 0; i < node.childNodes.length; i++) {
-                this.extractTextNodes(node.childNodes[i]);
-            }
-        }
-    }
-    transformTextNodesForSearch(textNodes) {
-        for (let i = 0; i < textNodes.length; i++) {
-            this.transformTextNodeForSearch(textNodes[i]);
-        }
-    }
-    transformTextNodeForSearch(node) {
-        const text = node.textContent;
-        if (text.length <= 0) {
-            return;
-        }
-        this.state.text = this.state.text + text;
-        const span = document.createElement('span');
-        wrapElement(node, span);
-        const splittedHtml = this.splitTextByChars(text);
-        span.innerHTML = splittedHtml;
-        unwrapElement(span.childNodes[0]);
-    }
-    splitTextByChars(text) {
-        let splittedTextHtml = '';
-        for (let i = 0; i < text.length; i++) {
-            splittedTextHtml +=
-                '<span class=\'' + this.options.charClass + '\' ' + CHAR_INDEX_DATA_ATTR + '=' + this.state.charIndex + '>' +
-                    text[i] +
-                    '</span>';
-            this.state.charIndex++;
-        }
-        return splittedTextHtml;
-    }
-    forEachTextContainer(callback) {
-        for (let i = 0; i < this.options.textContainers.length; i++) {
-            const textContainer = this.options.textContainers[i];
-            callback(textContainer, i);
-        }
-    }
-    highlightAllMatches() {
-        this.state.matches.forEach((match, matchIndex) => {
-            this.addMatchHighlight(match.startOffset, match.endOffset, matchIndex);
-        });
-    }
-    addMatchHighlight(matchStartOffset, matchEndOffset, matchIndex) {
-        for (let i = matchStartOffset; i < matchEndOffset; i++) {
-            this.forEachTextContainer((textContainer) => {
-                const highlights = Array.from(textContainer.querySelectorAll(toClassSelector(this.options.charClass + '[' + CHAR_INDEX_DATA_ATTR + '=\'' + i + '\'' + ']')));
-                highlights.forEach((highlight) => {
-                    addClass(this.options.highlightClass, highlight);
-                    highlight.setAttribute(MATCH_INDEX_DATA_ATTR, matchIndex);
-                });
-            });
-        }
-    }
-    removeMatchHighlights() {
-        this.forEachTextContainer((textContainer) => {
-            const highlights = Array.from(textContainer.querySelectorAll(toClassSelector(this.options.highlightClass)));
-            highlights.forEach((highlight) => {
-                removeClass(this.options.highlightClass, highlight);
-                highlight.removeAttribute(MATCH_INDEX_DATA_ATTR);
-            });
-        });
-    }
-    addActiveMatchMark() {
-        if (!this.state.activeMatchIndex && this.state.activeMatchIndex !== 0) {
-            this.state.activeMatchIndex = 0;
-        }
-        else if (this.state.activeMatchIndex > this.state.matches.length) {
-            this.state.activeMatchIndex = this.state.matches.length;
-        }
-        else {
-            this.removeActiveMatchMark();
-        }
-        const mark = document.createElement('span');
-        mark.classList.add(this.options.highlightMarkClass);
-        this.forEachTextContainer((textContainer) => {
-            const matches = Array.from(textContainer.querySelectorAll(toClassSelector(this.options.charClass + '[' + MATCH_INDEX_DATA_ATTR + '=\'' + this.state.activeMatchIndex + '\']')));
-            matches.forEach((match) => {
-                wrapInnerElement(match, mark.cloneNode(true));
-            });
-        });
-    }
-    removeActiveMatchMark() {
-        this.forEachTextContainer((textContainer) => {
-            const marks = Array.from(textContainer.querySelectorAll(toClassSelector(this.options.highlightMarkClass)));
-            const childNodes = marks.flatMap((x) => Array.from(x.childNodes));
-            unwrapElements(childNodes);
-        });
-    }
-    removeIndicators() {
-        this.removeActiveMatchMark();
-        this.removeMatchHighlights();
-    }
-    markNextMatch() {
-        this.markNextMatchIndex();
-        this.addActiveMatchMark();
-    }
-    markPreviousMatch() {
-        this.markPreviousMatchIndex();
-        this.addActiveMatchMark();
-    }
-    markNextMatchIndex() {
-        this.moveActiveMatchIndex(1);
-    }
-    markPreviousMatchIndex() {
-        this.moveActiveMatchIndex(-1);
-    }
-    moveActiveMatchIndex(delta) {
-        this.state.activeMatchIndex += delta;
-        if (this.state.activeMatchIndex < 0) {
-            this.state.activeMatchIndex = Math.max(this.state.matches.length - 1, 0);
-        }
-        else if (this.state.activeMatchIndex > this.state.matches.length - 1) {
-            this.state.activeMatchIndex = 0;
-        }
-    }
-    getActiveMatchElement() {
-        let markedMatch;
-        this.forEachTextContainer((textContainer) => {
-            const mark = textContainer.querySelector(toClassSelector(this.options.highlightMarkClass));
-            if (mark) {
-                markedMatch = mark;
-                return;
-            }
-        });
-        return markedMatch;
-    }
-}

package/dist/es/utils.d.ts

@@ -1,96 +0,0 @@
-import { SaveOptions } from '@progress/kendo-file-saver';
-import { PDFPageProxy, PDFDocumentProxy } from 'pdfjs-dist';
-import { TypedArray } from 'pdfjs-dist/types/src/display/api';
-/**
- * @hidden
- */
-export declare type DoneFn = (result: {
-    pdfPages: PDFPageProxy[];
-    pdfDoc: PDFDocumentProxy;
-    zoom: number;
-}) => void;
-/**
- * @hidden
- */
-export declare type ErrorFn = (e?: any) => void;
-/**
- * @hidden
- */
-export interface PDFReadParameters {
-    url?: string;
-    data?: string;
-    arrayBuffer?: ArrayBuffer;
-    typedArray?: TypedArray;
-    error: ErrorFn;
-}
-/**
- * @hidden
- */
-export interface PDFReadOptions extends PDFReadParameters {
-    dom: HTMLDivElement;
-    zoom: number;
-    done: DoneFn;
-}
-/**
- * @hidden
- */
-export interface PDFReloadParameters {
-    pdfDoc: PDFDocumentProxy;
-    zoom: number;
-    dom: HTMLElement;
-    done: (pdfPages: PDFPageProxy[]) => void;
-    error: ErrorFn;
-}
-/**
- * @hidden
- */
-export declare const DEFAULT_ZOOM_LEVEL = 1.25;
-/**
- * @hidden
- */
-export declare const removeChildren: (dom: HTMLElement) => void;
-/**
- * @hidden
- */
-export declare const download: (options: {
-    pdf: PDFDocumentProxy | null;
-    error: ErrorFn;
-}, fileName: string | undefined, saveOptions: SaveOptions | undefined, onDownload: (blob: Blob, fileName: string, saveOptions: SaveOptions) => boolean) => void;
-/**
- * @hidden
- */
-export declare const loadPDF: (options: PDFReadOptions) => void;
-/**
- * @hidden
- */
-export declare const reloadDocument: (params: PDFReloadParameters) => void;
-/**
- * @hidden
- */
-export declare const print: (pages: PDFPageProxy[], done: () => void, error: ErrorFn) => void;
-/**
- * @hidden
- */
-export declare const goToNextSearchMatch: (ref: any) => void;
-/**
- * @hidden
- */
-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.
- *
- * @param rootElement The root HTML element of the PDFViewer component.
- * @returns The page number.
- */
-export declare const currentPage: (rootElement: HTMLElement) => number;