@progress/kendo-angular-pdfviewer 13.0.0-develop.10

package/esm2020/pdfviewer.component.mjs

@@ -0,0 +1,801 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 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 { validatePackage } from '@progress/kendo-licensing';
+import { packageMetadata } from './package-metadata';
+import { INITIAL_ZOOM_LEVEL, zoomOptionsData } from './util';
+import { loadPDF, removeChildren, currentPage, scrollToPage, Scroller, reloadDocument, print, calculateZoomLevel, SearchService, goToNextSearchMatch, goToPreviousSearchMatch } from '@progress/kendo-pdfviewer-common';
+import { hasObservers } from '@progress/kendo-angular-common';
+import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
+import { PDFViewerDownloadEvent } from './models/events';
+import { saveAs } from '@progress/kendo-file-saver';
+import { Subscription } from 'rxjs';
+import 'pdfjs-dist/build/pdf.worker.entry';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-l10n";
+import * as i2 from "./loader/loader.component";
+import * as i3 from "./toolbar/toolbar.component";
+import * as i4 from "./toolbar/search.component";
+import * as i5 from "./localization/localized-messages.directive";
+import * as i6 from "@angular/common";
+let counter = 0;
+/**
+ * Represents the [Kendo UI PDFViewer component for Angular]({% slug overview_pdfviewer %}).
+ */
+export class PDFViewerComponent {
+    constructor(ngZone, renderer, localizationService) {
+        this.ngZone = ngZone;
+        this.renderer = renderer;
+        this.localizationService = localizationService;
+        this.hostClass = true;
+        /**
+         * Represents the tools collection rendered in the toolbar.
+         * @default ['pager', 'spacer', 'zoomInOut', 'zoom', 'selection', 'spacer', 'search', 'open', 'download', 'print' ]
+         */
+        this.tools = [
+            'pager',
+            'spacer',
+            'zoomInOut',
+            'zoom',
+            'selection',
+            'spacer',
+            'search',
+            'open',
+            'download',
+            'print'
+        ];
+        /**
+         * The configuration of the internal Loader component.
+         * @default { size: 'large', type: 'pulsing', themeColor: 'primary' }
+         */
+        this.loaderSettings = {
+            size: 'large',
+            type: 'pulsing',
+            themeColor: 'primary'
+        };
+        /**
+         * The name of the file that will be saved when the end user clicks the Download tool.
+         * @default 'Download'
+         */
+        this.saveFileName = 'Download';
+        /**
+         * Represents the options for saving the file when the end user clicks the Download tool.
+         * @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
+         */
+        this.zoomRate = 0.25;
+        /**
+         * Represents minimum allowed zoom value.
+         * @default 0.5
+         */
+        this.minZoom = 0.5;
+        /**
+         * Represents maximum allowed zoom value.
+         * @default 4
+         */
+        this.maxZoom = 4;
+        /**
+         * The event fired when a PDF document is successfully loaded in the `PDFViewer` component.
+         */
+        this.load = new EventEmitter();
+        /**
+         * The event fired when an error occurs during the loading or downloading of the PDF document.
+         */
+        this.error = new EventEmitter();
+        /**
+         * The event fired when an error occurs during the loading of the PDF document.
+         */
+        this.download = new EventEmitter();
+        /**
+         * The event fired when the end user changes the page of the loaded PDF document.
+         */
+        this.pageChange = new EventEmitter();
+        /**
+         * The event fired when the end user changes the zoom level of the loaded PDF document.
+         */
+        this.zoomLevelChange = new EventEmitter();
+        this.loading = false;
+        this.searchActive = false;
+        this.matchCase = false;
+        this.currentMatches = [];
+        this.skip = 0;
+        this.zoomOptionsData = zoomOptionsData;
+        this.zoomLevel = this.zoomOptionsData[5];
+        this._pdfContext = null;
+        this._enabedSelection = false;
+        this.subs = new Subscription();
+        this.scrollListener = (e) => {
+            const nextPage = currentPage(e.target.parentNode);
+            if (nextPage !== this.skip) {
+                this.ngZone.run(() => {
+                    hasObservers(this.pageChange) && this.pageChange.emit({
+                        previousPage: this.currentPage,
+                        currentPage: nextPage + 1
+                    });
+                    this.skip = nextPage;
+                });
+            }
+        };
+        validatePackage(packageMetadata);
+        this.direction = localizationService.rtl ? 'rtl' : 'ltr';
+        counter++;
+    }
+    /**
+     * Returns the current page number of the loaded PDF document.
+     */
+    get currentPage() {
+        const isDocumentLoaded = this.pagesContainer && this.pdfContext?.pdfDoc;
+        return isDocumentLoaded ? this.skip + 1 : null;
+    }
+    set pdfContext(doc) {
+        this._pdfContext = doc;
+    }
+    /**
+     * Exposes the currently loaded `PDF.js` document, its pages, and their DOM element wrapper.
+     */
+    get pdfContext() {
+        return this._pdfContext;
+    }
+    /**
+     * @hidden
+     */
+    get activePageId() {
+        if (!this.pdfContext?.pdfPages.length) {
+            return;
+        }
+        return this.pagesContainer.nativeElement.querySelectorAll('.k-page')[this.skip]?.getAttribute('id');
+    }
+    /**
+     * @hidden
+     */
+    get pagesContainerId() {
+        if (!this.pdfContext?.pdfPages.length) {
+            return;
+        }
+        return `k-pdfviewer-${counter}-pages-container`;
+    }
+    /**
+     * @hidden
+     */
+    set enabledSelection(value) {
+        if (this.pdfScroller) {
+            value ? this.pdfScroller.disablePanEventsTracking() : this.pdfScroller.enablePanEventsTracking();
+        }
+        this._enabedSelection = value;
+    }
+    /**
+     * @hidden
+     */
+    get enabledSelection() {
+        return this._enabedSelection;
+    }
+    ngOnInit() {
+        this.subs.add(this.localizationService.changes.subscribe(({ rtl }) => this.direction = rtl ? 'rtl' : 'ltr'));
+    }
+    ngAfterViewInit() {
+        const pagesContainer = this.pagesContainer.nativeElement.parentNode;
+        this.ngZone.runOutsideAngular(() => this.subs.add(this.renderer.listen(pagesContainer, 'scroll', this.scrollListener)));
+    }
+    ngOnDestroy() {
+        this.subs.unsubscribe();
+        removeChildren(this.pagesContainer.nativeElement);
+        if (this.pdfScroller) {
+            this.pdfScroller.destroy();
+            this.pdfScroller = null;
+        }
+        if (this.searchService) {
+            this.searchService.destroy();
+            this.searchService = null;
+        }
+        this.pdfContext = null;
+    }
+    ngOnChanges(changes) {
+        const newBase64Data = changes['data'] && this.data;
+        const newUrl = changes['url'] && this.url;
+        const newArrayBuffer = changes['arrayBuffer'] && this.arrayBuffer;
+        const newTypedArray = changes['typedArray'] && this.typedArray;
+        this.verifySettings(changes);
+        const source = newUrl ? 'url' : newArrayBuffer ? 'arrayBuffer' : newBase64Data ? 'data' : 'typedArray';
+        if (newUrl || newArrayBuffer || newBase64Data || newTypedArray) {
+            this.loadPdf(source, this[source]);
+        }
+    }
+    /**
+     * Scrolls the PDFViewer document to the passed page number.
+     */
+    scrollToPage(page) {
+        scrollToPage(this.pagesContainer.nativeElement, page);
+    }
+    /**
+     * @hidden
+     */
+    onFileSelect(e) {
+        this.loadPdf('data', e);
+    }
+    /**
+     * @hidden
+     */
+    onFileSelectError(e) {
+        hasObservers(this.error) && this.error.emit({ error: e, context: this.pdfContext });
+    }
+    /**
+     * @hidden
+     */
+    onPageChange(e) {
+        this.scrollToPage(e.skip);
+        hasObservers(this.pageChange) && this.pageChange.emit({
+            previousPage: this.skip,
+            currentPage: e.skip
+        });
+        this.skip = e.skip;
+    }
+    /**
+     * @hidden
+     */
+    onDownload() {
+        this.ngZone.runOutsideAngular(() => this.pdfContext.pdfDoc.getData()
+            .then((data) => new Blob([data], { type: 'application/pdf' }))
+            .then((blob) => {
+            const downloadEvent = new PDFViewerDownloadEvent(blob, this.saveFileName, this.saveOptions, this.pdfContext);
+            this.ngZone.run(() => this.download.emit(downloadEvent));
+            if (!downloadEvent.isDefaultPrevented()) {
+                saveAs(blob, this.saveFileName, this.saveOptions);
+            }
+        })
+            .catch((reason) => {
+            if (hasObservers(this.error)) {
+                this.ngZone.run(() => this.error.emit({
+                    error: reason,
+                    context: this.pdfContext
+                }));
+            }
+        }));
+    }
+    /**
+     * @hidden
+     */
+    onZoomIn() {
+        const newZoom = Math.min(this.pdfContext.zoom + this.zoomRate, this.maxZoom);
+        if (newZoom !== this.pdfContext.zoom && this.pdfContext.pdfDoc) {
+            if (hasObservers(this.zoomLevelChange)) {
+                this.zoomLevelChange.emit({
+                    previousZoomLevel: this.zoom,
+                    currentZoomLevel: newZoom
+                });
+            }
+            this.zoom = this.pdfContext.zoom = newZoom;
+            this.setZoomLevel(newZoom);
+            this.ngZone.runOutsideAngular(() => this.reloadDocument());
+        }
+    }
+    /**
+     * @hidden
+     */
+    onZoomOut() {
+        const newZoom = Math.max(this.pdfContext.zoom - this.zoomRate, this.minZoom);
+        if (newZoom !== this.pdfContext.zoom && this.pdfContext.pdfDoc) {
+            if (hasObservers(this.zoomLevelChange)) {
+                this.zoomLevelChange.emit({
+                    previousZoomLevel: this.zoom,
+                    currentZoomLevel: newZoom
+                });
+            }
+            this.zoom = this.pdfContext.zoom = newZoom;
+            this.setZoomLevel(newZoom);
+            this.ngZone.runOutsideAngular(() => this.reloadDocument());
+        }
+    }
+    /**
+     * @hidden
+     */
+    onZoomLevelChange(zoomLevel) {
+        if (typeof zoomLevel === 'string') {
+            const parsedValue = parseFloat(zoomLevel);
+            zoomLevel = { value: Number.isNaN(parsedValue) ? 1 : parsedValue / 100 };
+        }
+        if (!zoomLevel) {
+            zoomLevel = { value: 1 };
+        }
+        let newZoom = calculateZoomLevel(zoomLevel.value, zoomLevel.type, this.pdfContext.zoom, this.pagesContainer.nativeElement);
+        newZoom = Math.round(newZoom * 100) / 100;
+        if (hasObservers(this.zoomLevelChange)) {
+            this.zoomLevelChange.emit({
+                previousZoomLevel: this.zoom,
+                currentZoomLevel: newZoom
+            });
+        }
+        this.zoom = this.pdfContext.zoom = newZoom;
+        this.setZoomLevel(newZoom);
+        this.ngZone.runOutsideAngular(() => this.reloadDocument());
+    }
+    /**
+     * @hidden
+     */
+    onSearch() {
+        this.searchActive = true;
+        this.ngZone.runOutsideAngular(() => {
+            const pagesTextLayers = Array.from(this.pagesContainer.nativeElement.querySelectorAll('.k-text-layer'));
+            this.searchService = new SearchService({
+                textContainers: pagesTextLayers || [],
+                highlightClass: 'k-search-highlight',
+                highlightMarkClass: 'k-search-highlight-mark',
+                charClass: 'k-text-char'
+            });
+        });
+    }
+    /**
+     * @hidden
+     */
+    onPrint() {
+        this.loading = true;
+        const onError = (e) => {
+            this.loading = false;
+            if (hasObservers(this.error)) {
+                this.error.emit(e);
+            }
+            ;
+        };
+        const onDone = () => {
+            this.loading = false;
+        };
+        print(this.pdfContext.pdfPages, onDone, onError);
+    }
+    /**
+     * @hidden
+     */
+    onSearchChange(e) {
+        this.currentMatches = this.searchService.search({ ...e });
+        this.currentMatch = this.currentMatches.length ? 1 : 0;
+    }
+    /**
+     * @hidden
+     */
+    closeSearch(toolbar) {
+        this.searchActive = false;
+        this.searchService.destroy();
+        this.currentMatches = [];
+        this.currentMatch = null;
+        toolbar.focus();
+    }
+    /**
+     * @hidden
+     */
+    onNextMatch() {
+        goToNextSearchMatch({ search: this.searchService, scroller: this.pdfScroller });
+        this.currentMatch = this.currentMatch + 1 > this.currentMatches.length ? 1 : this.currentMatch + 1;
+    }
+    /**
+     * @hidden
+     */
+    onPreviousMatch() {
+        goToPreviousSearchMatch({ search: this.searchService, scroller: this.pdfScroller });
+        this.currentMatch = this.currentMatch - 1 < 1 ? this.currentMatches.length : this.currentMatch - 1;
+    }
+    loadPdf(dataType, data) {
+        this.loading = true;
+        this.ngZone.runOutsideAngular(() => setTimeout(() => {
+            removeChildren(this.pagesContainer.nativeElement);
+            loadPDF({
+                [dataType]: data,
+                dom: this.pagesContainer.nativeElement,
+                zoom: this.pdfContext?.zoom || this.zoom,
+                done: (e) => {
+                    this.ngZone.run(() => {
+                        this.loading = false;
+                        this.pdfContext = { ...e, element: this.pagesContainer.nativeElement };
+                    });
+                    if (this.pdfScroller) {
+                        this.pdfScroller.destroy();
+                    }
+                    this.pdfScroller = this.pdfScroller = new Scroller(this.pagesContainer.nativeElement.parentNode, {
+                        filter: '.k-page',
+                        events: {}
+                    });
+                    this.pdfScroller.enablePanEventsTracking();
+                    this.assignPageIds();
+                    if (hasObservers(this.load)) {
+                        this.ngZone.run(() => this.load.emit({ context: this.pdfContext }));
+                    }
+                },
+                error: (e) => {
+                    this.ngZone.run(() => this.loading = false);
+                    this.pdfContext = null;
+                    if (hasObservers(this.error)) {
+                        this.ngZone.run(() => this.error.emit({ error: e, context: this.pdfContext }));
+                    }
+                }
+            });
+        }));
+    }
+    reloadDocument() {
+        if (this.pagesContainer?.nativeElement) {
+            this.ngZone.run(() => this.loading = true);
+            removeChildren(this.pagesContainer.nativeElement);
+            reloadDocument({
+                pdfDoc: this.pdfContext?.pdfDoc,
+                zoom: this.zoom,
+                dom: this.pagesContainer.nativeElement,
+                done: (pdfPages) => {
+                    this.pdfContext.pdfPages = pdfPages;
+                    this.ngZone.run(() => this.loading = false);
+                    this.assignPageIds();
+                },
+                error: (e) => {
+                    if (this.pdfScroller) {
+                        this.pdfScroller.destroy();
+                        this.pdfScroller = null;
+                    }
+                    this.pdfContext = null;
+                    if (hasObservers(this.error)) {
+                        this.ngZone.run(() => this.error.emit({ error: e, context: this.pdfContext }));
+                    }
+                }
+            });
+        }
+    }
+    assignPageIds() {
+        this.pagesContainer.nativeElement.querySelectorAll('.k-page').forEach((pageElement, index) => {
+            const id = `k-pdfviewer-${counter}-page-${index + 1}`;
+            this.renderer.setAttribute(pageElement, 'id', id);
+        });
+    }
+    setZoomLevel(zoom) {
+        const option = this.zoomOptionsData.find(item => !item.type && item.value === zoom);
+        this.zoomLevel = option || {
+            value: zoom,
+            displayValue: `${Math.round(zoom * 100)}%`,
+            text: `${Math.round(zoom * 100)}%`
+        };
+    }
+    verifySettings(changes) {
+        const sourceTypes = ['url', 'arrayBuffer', 'data', 'typedArray'];
+        const setTypes = sourceTypes.map(item => this.isSet(changes, item)).filter(item => item);
+        if (isDevMode() && setTypes.length > 1) {
+            console.warn(`
+                Setting more than one source of data simultaneously is not supported.
+                Only one of 'url', 'arrayBuffer', 'data', or 'typedArray' can be set.
+            `);
+        }
+    }
+    isSet(changes, source) {
+        return this[source] || (changes[source] && changes[source].currentValue);
+    }
+}
+PDFViewerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PDFViewerComponent, deps: [{ token: i0.NgZone }, { token: i0.Renderer2 }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+PDFViewerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: PDFViewerComponent, 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,
+        {
+            provide: L10N_PREFIX,
+            useValue: 'kendo.pdfviewer'
+        }
+    ], viewQueries: [{ propertyName: "pagesContainer", first: true, predicate: ["pagesContainer"], descendants: true }], exportAs: ["kendo-pdfviewer"], usesOnChanges: true, ngImport: i0, template: `
+        <ng-container kendoPDFViewerLocalizedMessages
+            i18n-pagerFirstPage="kendo.pdfviewer.pagerFirstPage|The label for the first page button in the Pager"
+            pagerFirstPage="Go to the first page"
+
+            i18n-pagerPreviousPage="kendo.pdfviewer.pagerPreviousPage|The label for the previous page button in the Pager"
+            pagerPreviousPage="Go to the previous page"
+
+            i18n-pagerNextPage="kendo.pdfviewer.pagerNextPage|The label for the next page button in the Pager"
+            pagerNextPage="Go to the next page"
+
+            i18n-pagerLastPage="kendo.pdfviewer.pagerLastPage|The label for the last page button in the Pager"
+            pagerLastPage="Go to the last page"
+
+            i18n-pagerPage="kendo.pdfviewer.pagerPage|The text before the current page number in the Pager"
+            pagerPage="Page"
+
+            i18n-pagerOf="kendo.pdfviewer.pagerOf|The text before the total pages number in the Pager"
+            pagerOf="of"
+
+            i18n-pagerInputTitle="kendo.pdfviewer.pagerInputTitle|The label of the pager input element"
+            pagerInputTitle="Page Number"
+
+            i18n-pagerInputLabel="kendo.pdfviewer.pagerInputLabel|The text of the aria-label attribute applied to the input element for entering the page number."
+            pagerInputLabel="Type a page number"
+            
+            i18n-zoomInTitle="kendo.pdfviewer.zoomInTitle|The ZoomIn tool title and label."
+            zoomInTitle="Zoom in"
+            
+            i18n-zoomOutTitle="kendo.pdfviewer.zoomOutTitle|The ZoomOut tool title and label."
+            zoomOutTitle="Zoom out"
+            
+            i18n-selectionTitle="kendo.pdfviewer.selectionTitle|The Selection tool title and label."
+            selectionTitle="Enable selection"
+            
+            i18n-panningTitle="kendo.pdfviewer.panningTitle|The Panning tool title and label."
+            panningTitle="Enable panning"
+            
+            i18n-searchTitle="kendo.pdfviewer.searchTitle|The Search tool title and label."
+            searchTitle="Search"
+            
+            i18n-openTitle="kendo.pdfviewer.openTitle|The Open tool title and label."
+            openTitle="Open"
+            
+            i18n-downloadTitle="kendo.pdfviewer.downloadTitle|The Download tool title and label."
+            downloadTitle="Download"
+            
+            i18n-printTitle="kendo.pdfviewer.printTitle|The Print tool title and label."
+            printTitle="Print"
+            
+            i18n-fitToPage="kendo.pdfviewer.fitToPage|The text for the zoom level chooser Fit to page option."
+            fitToPage="Fit to page"
+            
+            i18n-fitToWidth="kendo.pdfviewer.fitToWidth|The text for the zoom level chooser Fit to width option."
+            fitToWidth="Fit to width"
+            
+            i18n-searchInputPlaceholder="kendo.pdfviewer.searchInputPlaceholder|The text for the search input placeholder."
+            searchInputPlaceholder="Search"
+            
+            i18n-searchMatchesOf="kendo.pdfviewer.searchMatchesOf|The text before the total number of matches in the Search tool."
+            searchMatchesOf="of"
+            
+            i18n-searchPreviousMatchTitle="kendo.pdfviewer.searchPreviousMatchTitle|The title of the Search tool previous match button."
+            searchPreviousMatchTitle="Previous match"
+            
+            i18n-searchNextMatchTitle="kendo.pdfviewer.searchNextMatchTitle|The title of the Search tool next match button."
+            searchNextMatchTitle="Next match"
+            
+            i18n-searchCloseTitle="kendo.pdfviewer.searchCloseTitle|The title of the Search tool close button."
+            searchCloseTitle="Close"
+            
+            i18n-searchMatchCaseTitle="kendo.pdfviewer.searchMatchCaseTitle|The title of the Search tool match case button."
+            searchMatchCaseTitle="Match case"
+            
+            i18n-zoomInputPlaceholder="kendo.pdfviewer.zoomInputPlaceholder|The text for the zoom tool input placeholder."
+            zoomInputPlaceholder="Choose zoom level">
+        </ng-container>
+        <div loader 
+            *ngIf="loading"
+            [settings]="loaderSettings"></div>
+        <div toolbar
+            #toolbar
+            role="toolbar"
+            [attr.aria-controls]="pagesContainerId"
+            [tools]="tools"
+            [skip]="skip"
+            [total]="pdfContext?.pdfPages.length ? pdfContext?.pdfPages.length : 1"
+            [pageSize]="1"
+            [zoomInDisabled]="zoom >= maxZoom || !pdfContext?.pdfDoc"
+            [zoomOutDisabled]="zoom <= minZoom || !pdfContext?.pdfDoc"
+            [zoomOptionsData]="zoomOptionsData"
+            [zoomLevelChooserValue]="zoomLevel"
+            [disabledTools]="!pdfContext?.pdfDoc"
+            (pageChange)="onPageChange($event)"
+            (fileSelect)="onFileSelect($event)"
+            (fileSelectError)="onFileSelectError($event)"
+            (download)="onDownload()"
+            (panningEnabled)="enabledSelection = false;"
+            (selectionEnabled)="enabledSelection = true;"
+            (zoomIn)="onZoomIn()"
+            (zoomOut)="onZoomOut()"
+            (zoomLevelChange)="onZoomLevelChange($event)"
+            (print)="onPrint()"
+            (search)="onSearch()"></div>
+        <div
+            class="k-canvas k-pdf-viewer-canvas k-pos-relative k-overflow-auto"
+            [class.k-enable-text-select]="enabledSelection"
+            [class.k-enable-panning]="!enabledSelection"
+            [attr.aria-describedby]="activePageId"
+            tabindex="0">
+            <div
+                kendoPDFViewerSearch
+                *ngIf="searchActive"
+                [currentMatch]="currentMatch"
+                [matches]="currentMatches.length"
+                class="k-search-panel k-pos-sticky k-top-center"
+                (searchChange)="onSearchChange($event)"
+                (prevMatch)="onPreviousMatch()"
+                (nextMatch)="onNextMatch()"
+                (close)="closeSearch(toolbar)"></div>
+            <div 
+                #pagesContainer
+                class="k-pdf-viewer-pages"
+                [style.--scale-factor]="zoom"
+                [attr.id]="pagesContainerId">
+                <div class="k-page">
+                    <div class="k-text-layer"></div>
+                </div>
+            </div>
+        </div>
+    `, isInline: true, components: [{ type: i2.LoaderComponent, selector: "[loader]", inputs: ["settings"] }, { type: i3.ToolbarComponent, selector: "[toolbar]", inputs: ["zoomLevel", "calculatedComboBoxValue", "skip", "pageSize", "total", "zoomInDisabled", "zoomOutDisabled", "disabledTools", "zoomLevelChooserValue", "zoomOptionsData", "pagesContainerId", "tools"], outputs: ["fileSelect", "fileSelectError", "download", "selectionEnabled", "panningEnabled", "pageChange", "zoomIn", "zoomOut", "zoomLevelChange", "print", "search"] }, { type: i4.PDFViewerSearchComponent, selector: "[kendoPDFViewerSearch]", inputs: ["matches", "currentMatch"], outputs: ["searchChange", "prevMatch", "nextMatch", "close"] }], directives: [{ type: i5.LocalizedPDFViewerMessagesDirective, selector: "[kendoPDFViewerLocalizedMessages]" }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PDFViewerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    exportAs: 'kendo-pdfviewer',
+                    selector: 'kendo-pdfviewer',
+                    providers: [
+                        LocalizationService,
+                        {
+                            provide: L10N_PREFIX,
+                            useValue: 'kendo.pdfviewer'
+                        }
+                    ],
+                    template: `
+        <ng-container kendoPDFViewerLocalizedMessages
+            i18n-pagerFirstPage="kendo.pdfviewer.pagerFirstPage|The label for the first page button in the Pager"
+            pagerFirstPage="Go to the first page"
+
+            i18n-pagerPreviousPage="kendo.pdfviewer.pagerPreviousPage|The label for the previous page button in the Pager"
+            pagerPreviousPage="Go to the previous page"
+
+            i18n-pagerNextPage="kendo.pdfviewer.pagerNextPage|The label for the next page button in the Pager"
+            pagerNextPage="Go to the next page"
+
+            i18n-pagerLastPage="kendo.pdfviewer.pagerLastPage|The label for the last page button in the Pager"
+            pagerLastPage="Go to the last page"
+
+            i18n-pagerPage="kendo.pdfviewer.pagerPage|The text before the current page number in the Pager"
+            pagerPage="Page"
+
+            i18n-pagerOf="kendo.pdfviewer.pagerOf|The text before the total pages number in the Pager"
+            pagerOf="of"
+
+            i18n-pagerInputTitle="kendo.pdfviewer.pagerInputTitle|The label of the pager input element"
+            pagerInputTitle="Page Number"
+
+            i18n-pagerInputLabel="kendo.pdfviewer.pagerInputLabel|The text of the aria-label attribute applied to the input element for entering the page number."
+            pagerInputLabel="Type a page number"
+            
+            i18n-zoomInTitle="kendo.pdfviewer.zoomInTitle|The ZoomIn tool title and label."
+            zoomInTitle="Zoom in"
+            
+            i18n-zoomOutTitle="kendo.pdfviewer.zoomOutTitle|The ZoomOut tool title and label."
+            zoomOutTitle="Zoom out"
+            
+            i18n-selectionTitle="kendo.pdfviewer.selectionTitle|The Selection tool title and label."
+            selectionTitle="Enable selection"
+            
+            i18n-panningTitle="kendo.pdfviewer.panningTitle|The Panning tool title and label."
+            panningTitle="Enable panning"
+            
+            i18n-searchTitle="kendo.pdfviewer.searchTitle|The Search tool title and label."
+            searchTitle="Search"
+            
+            i18n-openTitle="kendo.pdfviewer.openTitle|The Open tool title and label."
+            openTitle="Open"
+            
+            i18n-downloadTitle="kendo.pdfviewer.downloadTitle|The Download tool title and label."
+            downloadTitle="Download"
+            
+            i18n-printTitle="kendo.pdfviewer.printTitle|The Print tool title and label."
+            printTitle="Print"
+            
+            i18n-fitToPage="kendo.pdfviewer.fitToPage|The text for the zoom level chooser Fit to page option."
+            fitToPage="Fit to page"
+            
+            i18n-fitToWidth="kendo.pdfviewer.fitToWidth|The text for the zoom level chooser Fit to width option."
+            fitToWidth="Fit to width"
+            
+            i18n-searchInputPlaceholder="kendo.pdfviewer.searchInputPlaceholder|The text for the search input placeholder."
+            searchInputPlaceholder="Search"
+            
+            i18n-searchMatchesOf="kendo.pdfviewer.searchMatchesOf|The text before the total number of matches in the Search tool."
+            searchMatchesOf="of"
+            
+            i18n-searchPreviousMatchTitle="kendo.pdfviewer.searchPreviousMatchTitle|The title of the Search tool previous match button."
+            searchPreviousMatchTitle="Previous match"
+            
+            i18n-searchNextMatchTitle="kendo.pdfviewer.searchNextMatchTitle|The title of the Search tool next match button."
+            searchNextMatchTitle="Next match"
+            
+            i18n-searchCloseTitle="kendo.pdfviewer.searchCloseTitle|The title of the Search tool close button."
+            searchCloseTitle="Close"
+            
+            i18n-searchMatchCaseTitle="kendo.pdfviewer.searchMatchCaseTitle|The title of the Search tool match case button."
+            searchMatchCaseTitle="Match case"
+            
+            i18n-zoomInputPlaceholder="kendo.pdfviewer.zoomInputPlaceholder|The text for the zoom tool input placeholder."
+            zoomInputPlaceholder="Choose zoom level">
+        </ng-container>
+        <div loader 
+            *ngIf="loading"
+            [settings]="loaderSettings"></div>
+        <div toolbar
+            #toolbar
+            role="toolbar"
+            [attr.aria-controls]="pagesContainerId"
+            [tools]="tools"
+            [skip]="skip"
+            [total]="pdfContext?.pdfPages.length ? pdfContext?.pdfPages.length : 1"
+            [pageSize]="1"
+            [zoomInDisabled]="zoom >= maxZoom || !pdfContext?.pdfDoc"
+            [zoomOutDisabled]="zoom <= minZoom || !pdfContext?.pdfDoc"
+            [zoomOptionsData]="zoomOptionsData"
+            [zoomLevelChooserValue]="zoomLevel"
+            [disabledTools]="!pdfContext?.pdfDoc"
+            (pageChange)="onPageChange($event)"
+            (fileSelect)="onFileSelect($event)"
+            (fileSelectError)="onFileSelectError($event)"
+            (download)="onDownload()"
+            (panningEnabled)="enabledSelection = false;"
+            (selectionEnabled)="enabledSelection = true;"
+            (zoomIn)="onZoomIn()"
+            (zoomOut)="onZoomOut()"
+            (zoomLevelChange)="onZoomLevelChange($event)"
+            (print)="onPrint()"
+            (search)="onSearch()"></div>
+        <div
+            class="k-canvas k-pdf-viewer-canvas k-pos-relative k-overflow-auto"
+            [class.k-enable-text-select]="enabledSelection"
+            [class.k-enable-panning]="!enabledSelection"
+            [attr.aria-describedby]="activePageId"
+            tabindex="0">
+            <div
+                kendoPDFViewerSearch
+                *ngIf="searchActive"
+                [currentMatch]="currentMatch"
+                [matches]="currentMatches.length"
+                class="k-search-panel k-pos-sticky k-top-center"
+                (searchChange)="onSearchChange($event)"
+                (prevMatch)="onPreviousMatch()"
+                (nextMatch)="onNextMatch()"
+                (close)="closeSearch(toolbar)"></div>
+            <div 
+                #pagesContainer
+                class="k-pdf-viewer-pages"
+                [style.--scale-factor]="zoom"
+                [attr.id]="pagesContainerId">
+                <div class="k-page">
+                    <div class="k-text-layer"></div>
+                </div>
+            </div>
+        </div>
+    `,
+                }]
+        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.Renderer2 }, { type: i1.LocalizationService }]; }, propDecorators: { hostClass: [{
+                type: HostBinding,
+                args: ['class.k-pdf-viewer']
+            }], direction: [{
+                type: HostBinding,
+                args: ['attr.dir']
+            }], tools: [{
+                type: Input
+            }], loaderSettings: [{
+                type: Input
+            }], saveFileName: [{
+                type: Input
+            }], saveOptions: [{
+                type: Input
+            }], url: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], arrayBuffer: [{
+                type: Input
+            }], typedArray: [{
+                type: Input
+            }], zoom: [{
+                type: Input
+            }], zoomRate: [{
+                type: Input
+            }], minZoom: [{
+                type: Input
+            }], maxZoom: [{
+                type: Input
+            }], load: [{
+                type: Output
+            }], error: [{
+                type: Output
+            }], download: [{
+                type: Output
+            }], pageChange: [{
+                type: Output
+            }], zoomLevelChange: [{
+                type: Output
+            }], pagesContainer: [{
+                type: ViewChild,
+                args: ['pagesContainer']
+            }] } });