@progress/kendo-angular-pdfviewer 19.3.0-develop.8 → 19.3.0

package/esm2022/pdfviewer.component.mjs

@@ -2,15 +2,14 @@
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { ChangeDetectorRef, Component, ElementRef, EventEmitter, HostBinding, Input, NgZone, Output, Renderer2, ViewChild, isDevMode } from '@angular/core';
+import { ChangeDetectorRef, Component, ElementRef, EventEmitter, HostBinding, Input, NgZone, Output, Renderer2, ViewChild, ViewContainerRef, isDevMode } from '@angular/core';
 import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from './package-metadata';
 import { INITIAL_ZOOM_LEVEL, zoomOptionsData, zoomToFitOptions } from './util';
-import { PdfViewer, removeChildren, } from '@progress/kendo-pdfviewer-common';
-import { EventsOutsideAngularDirective, hasObservers, shouldShowValidationUI, WatermarkOverlayComponent } from '@progress/kendo-angular-common';
+import { PdfViewer, removeChildren, PdfViewerInteractionMode, } from '@progress/kendo-pdfviewer-common';
+import { EventsOutsideAngularDirective, hasObservers, shouldShowValidationUI, getLicenseMessage, WatermarkOverlayComponent } 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 { ToolbarComponent } from './toolbar/toolbar.component';
 import { PDFViewerSearchComponent } from './toolbar/search.component';
@@ -18,8 +17,12 @@ import { LoaderComponent } from './loader/loader.component';
 import { NgIf } from '@angular/common';
 import { LocalizedPDFViewerMessagesDirective } from './localization/localized-messages.directive';
 import 'pdfjs-dist/build/pdf.worker.min.mjs';
+import { AnnotationEditorTypes } from './models/annotation-editor.type';
+import { PopupService } from '@progress/kendo-angular-popup';
+import { AnnotationPopupToolbarContentComponent } from './annotations/annotation-editor';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
+import * as i2 from "@progress/kendo-angular-popup";
 let counter = 0;
 /**
  * Represents the [Kendo UI PDFViewer component for Angular](slug:overview_pdfviewer).
@@ -42,11 +45,13 @@ export class PDFViewerComponent {
     localizationService;
     cdr;
     host;
+    popupService;
     hostClass = true;
     direction;
+    display = 'flex';
     /**
      * Represents the tools collection rendered in the toolbar.
-     * @default ['pager', 'spacer', 'zoomInOut', 'zoom', 'selection', 'spacer', 'search', 'open', 'download', 'print' ]
+     * @default ['pager', 'spacer', 'zoomInOut', 'zoom', 'selection', 'spacer', 'search', 'open', 'download', 'print', 'annotations' ]
      */
     tools = [
         'pager',
@@ -58,7 +63,8 @@ export class PDFViewerComponent {
         'search',
         'open',
         'download',
-        'print'
+        'print',
+        'annotations'
     ];
     /**
      * The configuration of the internal Loader component.
@@ -143,6 +149,12 @@ export class PDFViewerComponent {
      * @default 1
      */
     loadOnDemandPageSize = 1;
+    /**
+     * Determines whether a confirmation dialog is shown when the user tries to delete an annotation.
+     *
+     * @default true
+     */
+    removeAnnotationConfirmation = true;
     /**
      * Fires when the component loads a PDF document successfully.
      */
@@ -164,6 +176,8 @@ export class PDFViewerComponent {
      */
     zoomLevelChange = new EventEmitter();
     pagesContainer;
+    pagesContainerViewContainerRef;
+    dialogContainerViewContainerRef;
     /**
      * Returns the current page number of the loaded PDF document.
      */
@@ -198,17 +212,30 @@ export class PDFViewerComponent {
         }
         return `k-pdfviewer-${counter}-pages-container`;
     }
+    /**
+     * @hidden
+     */
+    get annotationsToolbarId() {
+        return `k-pdfviewer-${counter}-annotations-toolbar`;
+    }
+    /**
+     * @hidden
+     */
+    get annotationsToolId() {
+        return `k-pdfviewer-${counter}-annotations-button`;
+    }
     loading = false;
     searchActive = false;
     matchCase = false;
     currentMatches = [];
     currentMatch;
+    showAnnotationsToolbar = false;
     /**
      * @hidden
      */
     set enabledSelection(value) {
         if (this.pdfViewerWidget) {
-            value ? this.pdfViewerWidget.documentScroller.disablePanEventsTracking() : this.pdfViewerWidget.documentScroller.enablePanEventsTracking();
+            this.ngZone.runOutsideAngular(() => this.pdfViewerWidget.setInteractionMode({ mode: value ? PdfViewerInteractionMode.TextSelection : PdfViewerInteractionMode.Pan }));
         }
         this._enabledSelection = value;
     }
@@ -218,10 +245,22 @@ export class PDFViewerComponent {
     get enabledSelection() {
         return this._enabledSelection;
     }
+    /**
+     * @hidden
+     */
+    onSetAnnotationMode(mode) {
+        this.pdfViewerWidget?.resetAnnotationEditorMode();
+        this.pdfViewerWidget?.setInteractionMode({ mode: PdfViewerInteractionMode.TextSelection });
+        this.pdfViewerWidget?.setAnnotationEditorMode({ mode: AnnotationEditorTypes[mode], interactionMode: PdfViewerInteractionMode.TextSelection });
+    }
     /**
      * @hidden
      */
     showLicenseWatermark = false;
+    /**
+     * @hidden
+     */
+    licenseMessage;
     skip = 0;
     zoomOptionsData = zoomOptionsData;
     zoomLevel = this.zoomOptionsData[5];
@@ -231,14 +270,18 @@ export class PDFViewerComponent {
     _fitType;
     _zoomToFit = false;
     subs = new Subscription();
+    popupSub = new Subscription();
     emitLoad = true;
-    constructor(ngZone, renderer, localizationService, cdr, host) {
+    pdfViewerWidget;
+    constructor(ngZone, renderer, localizationService, cdr, host, popupService) {
         this.ngZone = ngZone;
         this.renderer = renderer;
         this.localizationService = localizationService;
         this.cdr = cdr;
         this.host = host;
+        this.popupService = popupService;
         const isValid = validatePackage(packageMetadata);
+        this.licenseMessage = getLicenseMessage(packageMetadata);
         this.showLicenseWatermark = shouldShowValidationUI(isValid);
         this.direction = localizationService.rtl ? 'rtl' : 'ltr';
         counter++;
@@ -248,8 +291,11 @@ export class PDFViewerComponent {
     }
     ngOnDestroy() {
         this.subs.unsubscribe();
+        this.popupSub?.unsubscribe();
         this.pdfViewerWidget?.destroy();
         this.pdfContext = null;
+        this.observer?.disconnect();
+        this.observer = null;
     }
     ngOnChanges(changes) {
         const newBase64Data = changes['data'] && this.data;
@@ -289,22 +335,40 @@ export class PDFViewerComponent {
     onPageChange(e) {
         this.ngZone.runOutsideAngular(() => this.scrollToPage(e.skip + 1));
     }
+    /**
+     * @hidden
+     */
+    onPanningEnabled() {
+        this.enabledSelection = false;
+        this.showAnnotationsToolbar = false;
+        this.ngZone.runOutsideAngular(() => {
+            this.pdfViewerWidget?.resetAnnotationEditorMode();
+            this.pdfViewerWidget?.setInteractionMode({ mode: PdfViewerInteractionMode.Pan });
+        });
+    }
+    /**
+    * @hidden
+    */
+    onSelectionEnabled() {
+        this.enabledSelection = true;
+        this.ngZone.runOutsideAngular(() => {
+            this.pdfViewerWidget?.resetAnnotationEditorMode();
+            this.pdfViewerWidget?.setInteractionMode({ mode: PdfViewerInteractionMode.TextSelection });
+        });
+    }
     /**
      * @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.zoneAwareEmitter('download', downloadEvent);
-            if (!downloadEvent.isDefaultPrevented()) {
-                saveAs(blob, this.saveFileName, this.saveOptions);
-            }
-        })
-            .catch((reason) => {
-            this.zoneAwareEmitter('error', { error: reason, context: this.pdfContext });
-        }));
+        if (!this.pdfContext?.pdfDoc) {
+            this.zoneAwareEmitter('error', { error: 'No document to export.', context: this.pdfContext });
+            return;
+        }
+        const downloadEvent = new PDFViewerDownloadEvent(this.saveFileName, this.saveOptions, this.pdfContext);
+        this.zoneAwareEmitter('download', downloadEvent);
+        if (!downloadEvent.isDefaultPrevented()) {
+            this.ngZone.runOutsideAngular(() => this.pdfViewerWidget?.downloadFile({ fileName: this.saveFileName, saveOptions: this.saveOptions }));
+        }
     }
     /**
      * @hidden
@@ -413,7 +477,16 @@ export class PDFViewerComponent {
         this.pdfViewerWidget?.goToPreviousSearchMatch();
         this.currentMatch = this.currentMatch - 1 < 1 ? this.currentMatches.length : this.currentMatch - 1;
     }
-    pdfViewerWidget;
+    /**
+     * @hidden
+     */
+    toggleAnnotationsToolbar() {
+        this.showAnnotationsToolbar = !this.showAnnotationsToolbar;
+        this.host.nativeElement.querySelector(`#${this.annotationsToolId}`)?.focus();
+        if (!this.showAnnotationsToolbar) {
+            this.pdfViewerWidget?.resetAnnotationEditorMode();
+        }
+    }
     loadPdf(dataType, data) {
         this.pdfViewerWidget?.destroy();
         this.loading = true;
@@ -438,7 +511,9 @@ export class PDFViewerComponent {
                         this.loading = false;
                     },
                     scroll: this.scrollHandler,
-                    error: this.errorHandler
+                    error: this.errorHandler,
+                    annotationEditorToolBarShow: this.onAnnotationEditorToolBarShowHandler,
+                    annotationEditorToolBarHide: this.onAnnotationEditorToolBarHideHandler,
                 }
             });
         });
@@ -486,6 +561,7 @@ export class PDFViewerComponent {
         if (!this.pdfContext) {
             this.pdfViewerWidget.documentScroller.enablePanEventsTracking();
         }
+        this.pdfViewerWidget.setInteractionMode({ mode: PdfViewerInteractionMode.Pan });
         if (!this._zoomToFit) {
             this.pdfContext = { ...e, element: this.pagesContainer.nativeElement, zoom: e.sender.state.zoomLevel };
             if (this.emitLoad) {
@@ -498,6 +574,7 @@ export class PDFViewerComponent {
             this.pdfContext = { ...e, element: this.pagesContainer.nativeElement };
             this.onZoomLevelChange(zoomLevelOption, false);
         }
+        this.pdfViewerWidget.activatePageNumber(1);
         this.cdr.markForCheck();
         this.assignPageIds();
         this.ngZone.run(() => this.loading = false);
@@ -515,19 +592,80 @@ export class PDFViewerComponent {
         this.pdfContext = null;
         this.zoneAwareEmitter('error', { error: e, context: this.pdfContext });
     };
+    annotationPopup = null;
+    observer;
+    onAnnotationEditorToolBarShowHandler = (e) => {
+        this.cdr.markForCheck();
+        this.observer?.disconnect();
+        const type = e.annotationEditorMode;
+        const anchor = e.anchor;
+        const editor = e.source.firstSelectedEditor;
+        const popup = this.annotationPopup?.popup;
+        // Do not continue if popup is already visible for this annotation.
+        if (popup && popup.instance.anchor === anchor && type === "freeText") {
+            return;
+        }
+        if (this.annotationPopup) {
+            this.annotationPopup.close();
+            this.annotationPopup = null;
+        }
+        this.annotationPopup = this.popupService.open({
+            anchor: anchor,
+            appendTo: this.pagesContainerViewContainerRef,
+            content: AnnotationPopupToolbarContentComponent,
+            popupClass: 'k-pdfviewer-annotation-popup',
+        });
+        const annotationToolbarInstance = this.annotationPopup.content.instance;
+        annotationToolbarInstance.localizationService = this.localizationService;
+        annotationToolbarInstance.annotationEditorType = type;
+        annotationToolbarInstance.pdfViewerWidget = this.pdfViewerWidget;
+        annotationToolbarInstance.anchor = anchor;
+        annotationToolbarInstance.popupRef = this.annotationPopup;
+        annotationToolbarInstance.initialColor = editor?.color;
+        annotationToolbarInstance.initialFontSize = editor.propertiesToUpdate[0][1];
+        annotationToolbarInstance.dialogContainer = this.dialogContainerViewContainerRef;
+        annotationToolbarInstance.removeAnnotationConfirmation = this.removeAnnotationConfirmation;
+        this.popupSub = this.annotationPopup.popup.instance.anchorViewportLeave.subscribe(() => {
+            this.ngZone.run(() => this.annotationPopup?.close());
+            this.annotationPopup = null;
+            this.popupSub?.unsubscribe();
+            this.popupSub = null;
+        });
+        this.ngZone.runOutsideAngular(() => {
+            this.observer = this.classMutationObserver(anchor, 'k-selected', () => {
+                this.ngZone.run(() => this.annotationPopup?.close());
+            });
+        });
+    };
+    onAnnotationEditorToolBarHideHandler = () => {
+        this.cdr.markForCheck();
+        if (this.annotationPopup?.popup) {
+            this.annotationPopup.close();
+            this.annotationPopup = null;
+        }
+    };
     zoneAwareEmitter = (eventName, eventData) => {
         if (hasObservers(this[eventName])) {
             this.ngZone.run(() => this[eventName].emit(eventData));
         }
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PDFViewerComponent, deps: [{ token: i0.NgZone }, { token: i0.Renderer2 }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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", loadOnDemand: "loadOnDemand", loadOnDemandPageSize: "loadOnDemandPageSize" }, outputs: { load: "load", error: "error", download: "download", pageChange: "pageChange", zoomLevelChange: "zoomLevelChange" }, host: { properties: { "class.k-pdf-viewer": "this.hostClass", "attr.dir": "this.direction" } }, providers: [
+    classMutationObserver = (element, className, callback) => {
+        const observer = new MutationObserver((m) => {
+            m.forEach(() => {
+                callback();
+            });
+        });
+        observer.observe(element, { attributeFilter: ['class'] });
+        return observer;
+    };
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PDFViewerComponent, deps: [{ token: i0.NgZone }, { token: i0.Renderer2 }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i2.PopupService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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", loadOnDemand: "loadOnDemand", loadOnDemandPageSize: "loadOnDemandPageSize", removeAnnotationConfirmation: "removeAnnotationConfirmation" }, outputs: { load: "load", error: "error", download: "download", pageChange: "pageChange", zoomLevelChange: "zoomLevelChange" }, host: { properties: { "class.k-pdf-viewer": "this.hostClass", "attr.dir": "this.direction", "attr.display": "this.display" } }, 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: `
+        ], viewQueries: [{ propertyName: "pagesContainer", first: true, predicate: ["pagesContainer"], descendants: true }, { propertyName: "pagesContainerViewContainerRef", first: true, predicate: ["pagesContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "dialogContainerViewContainerRef", first: true, predicate: ["dialogContainer"], descendants: true, read: ViewContainerRef }], 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"
@@ -552,59 +690,95 @@ export class PDFViewerComponent {
 
             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">
+            zoomInputPlaceholder="Choose zoom level"
+            
+            i18n-annotationsTitle="kendo.pdfviewer.annotationsTitle|The Annotations tool title and label."
+            annotationsTitle="Annotations"
+            
+            i18n-annotationEditorTitle="kendo.pdfviewer.annotationEditorTitle|The annotation editor tool title and label."
+            annotationEditorTitle="Annotation editor"
+            
+            i18n-deleteAnnotationTitle="kendo.pdfviewer.deleteAnnotationTitle|The delete annotation tool title and label."
+            deleteAnnotationTitle="Delete annotation"
+            
+            i18n-highlightAnnotationTitle="kendo.pdfviewer.highlightAnnotationTitle|The highlight annotation tool title and label."
+            highlightAnnotationTitle="Highlight"
+            
+            i18n-freeTextAnnotationTitle="kendo.pdfviewer.freeTextAnnotationTitle|The free text annotation tool title and label."
+            freeTextAnnotationTitle="Free text"
+            
+            i18n-closeAnnotationsToolbarTitle="kendo.pdfviewer.closeAnnotationsToolbarTitle|The close annotations toolbar tool title and label."
+            closeAnnotationsToolbarTitle="Close"
+
+            i18n-deleteAnnotationConfirmationDialogTitle="kendo.pdfviewer.deleteAnnotationConfirmationDialogTitle|The delete annotation confirmation dialog title."
+            deleteAnnotationConfirmationDialogTitle="Delete annotation"
+
+            i18n-deleteAnnotationConfirmationDialogContent="kendo.pdfviewer.deleteAnnotationConfirmationDialogContent|The delete annotation confirmation dialog content."
+            deleteAnnotationConfirmationDialogContent="Are you sure you want to delete this annotation?"
+
+            i18n-deleteAnnotationConfirmationDialogConfirmText="kendo.pdfviewer.deleteAnnotationConfirmationDialogConfirmText|The delete annotation confirmation dialog confirm button text."
+            deleteAnnotationConfirmationDialogConfirmText="Delete"
+
+            i18n-deleteAnnotationConfirmationDialogRejectText="kendo.pdfviewer.deleteAnnotationConfirmationDialogRejectText|The delete annotation confirmation dialog reject button text."
+            deleteAnnotationConfirmationDialogRejectText="Cancel"
+
+            i18n-annotationEditorFontSizeTitle="kendo.pdfviewer.annotationEditorFontSizeTitle|The annotation editor font size section title."
+            annotationEditorFontSizeTitle="Font size"
+
+            i18n-annotationEditorColorTitle="kendo.pdfviewer.annotationEditorColorTitle|The annotation editor color section title."
+            annotationEditorColorTitle="Color">
         </ng-container>
-        <div kendoPDFViewerLoader 
+        <div kendoPDFViewerLoader
             *ngIf="loading"
             [settings]="loaderSettings"></div>
         <div kendoPDFViewerToolbar
@@ -620,18 +794,32 @@ export class PDFViewerComponent {
             [zoomOptionsData]="zoomOptionsData"
             [zoomLevelChooserValue]="zoomLevel"
             [disabledTools]="!pdfContext?.pdfDoc"
+            [isAnnotationsToolbarVisible]="showAnnotationsToolbar"
+            [wrapperId]="showAnnotationsToolbar ? annotationsToolbarId : undefined"
+            [annotationsToolId]="annotationsToolId"
             (pageChange)="onPageChange($event)"
             (fileSelect)="onFileSelect($event)"
             (fileSelectStart)="loading = true;"
             (fileSelectError)="onFileSelectError($event)"
             (download)="onDownload()"
-            (panningEnabled)="enabledSelection = false;"
-            (selectionEnabled)="enabledSelection = true;"
+            (panningEnabled)="onPanningEnabled();"
+            (selectionEnabled)="onSelectionEnabled();"
             (zoomIn)="onZoomIn()"
             (zoomOut)="onZoomOut()"
             (zoomLevelChange)="onZoomLevelChange($event)"
             (print)="onPrint()"
-            (search)="onSearch()"></div>
+            (search)="onSearch()"
+            (toggleAnnotationsToolbar)="toggleAnnotationsToolbar()"></div>
+        <div *ngIf="showAnnotationsToolbar" 
+            [attr.id]="annotationsToolbarId"
+            kendoPDFViewerToolbar
+            #toolbar
+            role="toolbar"
+            type="annotations"
+            (setAnnotationMode)="onSetAnnotationMode($event)"
+            [attr.aria-controls]="pagesContainerId"
+            [disabledTools]="!pdfContext?.pdfDoc"
+            (toggleAnnotationsToolbar)="toggleAnnotationsToolbar()"></div>
         <div
             class="k-canvas k-pdf-viewer-canvas k-pos-relative k-overflow-auto"
             [class.k-enable-text-select]="enabledSelection"
@@ -648,7 +836,7 @@ export class PDFViewerComponent {
                 (prevMatch)="onPreviousMatch()"
                 (nextMatch)="onNextMatch()"
                 (close)="closeSearch(toolbar)"></div>
-            <div 
+            <div
                 #pagesContainer
                 [kendoEventsOutsideAngular]="{
                     wheel: stopPropagation
@@ -657,8 +845,9 @@ export class PDFViewerComponent {
                 [attr.id]="pagesContainerId"></div>
         </div>
 
-        <div kendoWatermarkOverlay *ngIf="showLicenseWatermark"></div>
-    `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedPDFViewerMessagesDirective, selector: "[kendoPDFViewerLocalizedMessages]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: LoaderComponent, selector: "[kendoPDFViewerLoader]", inputs: ["settings"] }, { kind: "component", type: ToolbarComponent, selector: "[kendoPDFViewerToolbar]", inputs: ["zoomLevel", "calculatedComboBoxValue", "skip", "pageSize", "total", "zoomInDisabled", "zoomOutDisabled", "disabledTools", "zoomLevelChooserValue", "zoomOptionsData", "pagesContainerId", "tools"], outputs: ["fileSelect", "fileSelectStart", "fileSelectError", "download", "selectionEnabled", "panningEnabled", "pageChange", "zoomIn", "zoomOut", "zoomLevelChange", "print", "search"] }, { kind: "component", type: PDFViewerSearchComponent, selector: "[kendoPDFViewerSearch]", inputs: ["matches", "currentMatch"], outputs: ["searchChange", "prevMatch", "nextMatch", "close"] }, { kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]" }] });
+        <div #dialogContainer></div>
+        <div kendoWatermarkOverlay *ngIf="showLicenseWatermark" [licenseMessage]="licenseMessage"></div>
+    `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedPDFViewerMessagesDirective, selector: "[kendoPDFViewerLocalizedMessages]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: LoaderComponent, selector: "[kendoPDFViewerLoader]", inputs: ["settings"] }, { kind: "component", type: ToolbarComponent, selector: "[kendoPDFViewerToolbar]", inputs: ["zoomLevel", "calculatedComboBoxValue", "skip", "pageSize", "total", "zoomInDisabled", "zoomOutDisabled", "disabledTools", "zoomLevelChooserValue", "zoomOptionsData", "pagesContainerId", "tools", "type", "wrapperId", "isAnnotationsToolbarVisible", "annotationsToolId"], outputs: ["fileSelect", "fileSelectStart", "fileSelectError", "download", "selectionEnabled", "panningEnabled", "pageChange", "zoomIn", "zoomOut", "zoomLevelChange", "print", "search", "toggleAnnotationsToolbar", "setAnnotationMode"] }, { kind: "component", type: PDFViewerSearchComponent, selector: "[kendoPDFViewerSearch]", inputs: ["matches", "currentMatch"], outputs: ["searchChange", "prevMatch", "nextMatch", "close"] }, { kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]", inputs: ["licenseMessage"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PDFViewerComponent, decorators: [{
             type: Component,
@@ -697,59 +886,95 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
             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">
+            zoomInputPlaceholder="Choose zoom level"
+            
+            i18n-annotationsTitle="kendo.pdfviewer.annotationsTitle|The Annotations tool title and label."
+            annotationsTitle="Annotations"
+            
+            i18n-annotationEditorTitle="kendo.pdfviewer.annotationEditorTitle|The annotation editor tool title and label."
+            annotationEditorTitle="Annotation editor"
+            
+            i18n-deleteAnnotationTitle="kendo.pdfviewer.deleteAnnotationTitle|The delete annotation tool title and label."
+            deleteAnnotationTitle="Delete annotation"
+            
+            i18n-highlightAnnotationTitle="kendo.pdfviewer.highlightAnnotationTitle|The highlight annotation tool title and label."
+            highlightAnnotationTitle="Highlight"
+            
+            i18n-freeTextAnnotationTitle="kendo.pdfviewer.freeTextAnnotationTitle|The free text annotation tool title and label."
+            freeTextAnnotationTitle="Free text"
+            
+            i18n-closeAnnotationsToolbarTitle="kendo.pdfviewer.closeAnnotationsToolbarTitle|The close annotations toolbar tool title and label."
+            closeAnnotationsToolbarTitle="Close"
+
+            i18n-deleteAnnotationConfirmationDialogTitle="kendo.pdfviewer.deleteAnnotationConfirmationDialogTitle|The delete annotation confirmation dialog title."
+            deleteAnnotationConfirmationDialogTitle="Delete annotation"
+
+            i18n-deleteAnnotationConfirmationDialogContent="kendo.pdfviewer.deleteAnnotationConfirmationDialogContent|The delete annotation confirmation dialog content."
+            deleteAnnotationConfirmationDialogContent="Are you sure you want to delete this annotation?"
+
+            i18n-deleteAnnotationConfirmationDialogConfirmText="kendo.pdfviewer.deleteAnnotationConfirmationDialogConfirmText|The delete annotation confirmation dialog confirm button text."
+            deleteAnnotationConfirmationDialogConfirmText="Delete"
+
+            i18n-deleteAnnotationConfirmationDialogRejectText="kendo.pdfviewer.deleteAnnotationConfirmationDialogRejectText|The delete annotation confirmation dialog reject button text."
+            deleteAnnotationConfirmationDialogRejectText="Cancel"
+
+            i18n-annotationEditorFontSizeTitle="kendo.pdfviewer.annotationEditorFontSizeTitle|The annotation editor font size section title."
+            annotationEditorFontSizeTitle="Font size"
+
+            i18n-annotationEditorColorTitle="kendo.pdfviewer.annotationEditorColorTitle|The annotation editor color section title."
+            annotationEditorColorTitle="Color">
         </ng-container>
-        <div kendoPDFViewerLoader 
+        <div kendoPDFViewerLoader
             *ngIf="loading"
             [settings]="loaderSettings"></div>
         <div kendoPDFViewerToolbar
@@ -765,18 +990,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             [zoomOptionsData]="zoomOptionsData"
             [zoomLevelChooserValue]="zoomLevel"
             [disabledTools]="!pdfContext?.pdfDoc"
+            [isAnnotationsToolbarVisible]="showAnnotationsToolbar"
+            [wrapperId]="showAnnotationsToolbar ? annotationsToolbarId : undefined"
+            [annotationsToolId]="annotationsToolId"
             (pageChange)="onPageChange($event)"
             (fileSelect)="onFileSelect($event)"
             (fileSelectStart)="loading = true;"
             (fileSelectError)="onFileSelectError($event)"
             (download)="onDownload()"
-            (panningEnabled)="enabledSelection = false;"
-            (selectionEnabled)="enabledSelection = true;"
+            (panningEnabled)="onPanningEnabled();"
+            (selectionEnabled)="onSelectionEnabled();"
             (zoomIn)="onZoomIn()"
             (zoomOut)="onZoomOut()"
             (zoomLevelChange)="onZoomLevelChange($event)"
             (print)="onPrint()"
-            (search)="onSearch()"></div>
+            (search)="onSearch()"
+            (toggleAnnotationsToolbar)="toggleAnnotationsToolbar()"></div>
+        <div *ngIf="showAnnotationsToolbar" 
+            [attr.id]="annotationsToolbarId"
+            kendoPDFViewerToolbar
+            #toolbar
+            role="toolbar"
+            type="annotations"
+            (setAnnotationMode)="onSetAnnotationMode($event)"
+            [attr.aria-controls]="pagesContainerId"
+            [disabledTools]="!pdfContext?.pdfDoc"
+            (toggleAnnotationsToolbar)="toggleAnnotationsToolbar()"></div>
         <div
             class="k-canvas k-pdf-viewer-canvas k-pos-relative k-overflow-auto"
             [class.k-enable-text-select]="enabledSelection"
@@ -793,7 +1032,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 (prevMatch)="onPreviousMatch()"
                 (nextMatch)="onNextMatch()"
                 (close)="closeSearch(toolbar)"></div>
-            <div 
+            <div
                 #pagesContainer
                 [kendoEventsOutsideAngular]="{
                     wheel: stopPropagation
@@ -802,17 +1041,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 [attr.id]="pagesContainerId"></div>
         </div>
 
-        <div kendoWatermarkOverlay *ngIf="showLicenseWatermark"></div>
+        <div #dialogContainer></div>
+        <div kendoWatermarkOverlay *ngIf="showLicenseWatermark" [licenseMessage]="licenseMessage"></div>
     `,
                     standalone: true,
                     imports: [LocalizedPDFViewerMessagesDirective, NgIf, EventsOutsideAngularDirective, LoaderComponent, ToolbarComponent, PDFViewerSearchComponent, WatermarkOverlayComponent]
                 }]
-        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.Renderer2 }, { type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }]; }, propDecorators: { hostClass: [{
+        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.Renderer2 }, { type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i2.PopupService }]; }, propDecorators: { hostClass: [{
                 type: HostBinding,
                 args: ['class.k-pdf-viewer']
             }], direction: [{
                 type: HostBinding,
                 args: ['attr.dir']
+            }], display: [{
+                type: HostBinding,
+                args: ['attr.display']
             }], tools: [{
                 type: Input
             }], loaderSettings: [{
@@ -841,6 +1084,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], loadOnDemandPageSize: [{
                 type: Input
+            }], removeAnnotationConfirmation: [{
+                type: Input
             }], load: [{
                 type: Output
             }], error: [{
@@ -854,4 +1099,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }], pagesContainer: [{
                 type: ViewChild,
                 args: ['pagesContainer']
+            }], pagesContainerViewContainerRef: [{
+                type: ViewChild,
+                args: ['pagesContainer', { read: ViewContainerRef }]
+            }], dialogContainerViewContainerRef: [{
+                type: ViewChild,
+                args: ['dialogContainer', { read: ViewContainerRef }]
             }] } });