@progress/kendo-angular-pdfviewer 19.3.0-develop.24 → 19.3.0-develop.26

package/fesm2022/progress-kendo-angular-pdfviewer.mjs

@@ -3,26 +3,31 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as i0 from '@angular/core';
-import { Directive, Input, forwardRef, Component, Injectable, HostBinding, EventEmitter, ViewChild, Output, ElementRef, HostListener, isDevMode, NgModule } from '@angular/core';
+import { Directive, Input, forwardRef, Component, Injectable, HostBinding, EventEmitter, ViewChild, Output, ElementRef, HostListener, isDevMode, ViewContainerRef, NgModule } from '@angular/core';
 import * as i1 from '@progress/kendo-angular-l10n';
 import { ComponentMessages, LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { validatePackage } from '@progress/kendo-licensing';
-import { removeChildren, PdfViewer } from '@progress/kendo-pdfviewer-common';
+import { PdfViewerInteractionMode, removeChildren, PdfViewer } from '@progress/kendo-pdfviewer-common';
 import { PreventableEvent, Keys, focusableSelector, getLicenseMessage, shouldShowValidationUI, hasObservers, EventsOutsideAngularDirective, WatermarkOverlayComponent, ResizeBatchService } from '@progress/kendo-angular-common';
 import { saveAs } from '@progress/kendo-file-saver';
 import { Subscription } from 'rxjs';
 import { PagerComponent, CustomMessagesComponent } from '@progress/kendo-angular-pager';
-import { zoomInIcon, zoomOutIcon, handIcon, pointerIcon, searchIcon, folderOpenIcon, downloadIcon, printIcon, convertLowercaseIcon, arrowUpIcon, arrowDownIcon, xIcon } from '@progress/kendo-svg-icons';
+import { zoomInIcon, zoomOutIcon, handIcon, pointerIcon, searchIcon, folderOpenIcon, downloadIcon, printIcon, trackChangesIcon, highlightIcon, freeTextIcon, xIcon, convertLowercaseIcon, arrowUpIcon, arrowDownIcon, paletteIcon, trashIcon, checkIcon } from '@progress/kendo-svg-icons';
 import * as i1$1 from '@progress/kendo-angular-dropdowns';
-import { ComboBoxComponent, ItemTemplateDirective } from '@progress/kendo-angular-dropdowns';
-import { ButtonGroupComponent, ButtonComponent } from '@progress/kendo-angular-buttons';
+import { ComboBoxComponent, ItemTemplateDirective, KENDO_DROPDOWNLIST } from '@progress/kendo-angular-dropdowns';
+import * as i2 from '@progress/kendo-angular-buttons';
+import { ButtonGroupComponent, ButtonComponent, KENDO_BUTTON } from '@progress/kendo-angular-buttons';
 import { NgFor, NgSwitch, NgSwitchCase, NgIf } from '@angular/common';
-import { map } from 'rxjs/operators';
-import { TextBoxComponent, TextBoxSuffixTemplateDirective } from '@progress/kendo-angular-inputs';
+import { map, take } from 'rxjs/operators';
+import * as i3 from '@progress/kendo-angular-inputs';
+import { TextBoxComponent, TextBoxSuffixTemplateDirective, KENDO_FLATCOLORPICKER } from '@progress/kendo-angular-inputs';
 import { LoaderComponent as LoaderComponent$1 } from '@progress/kendo-angular-indicators';
 import 'pdfjs-dist/build/pdf.worker.min.mjs';
-import { IconsService } from '@progress/kendo-angular-icons';
+import * as i2$1 from '@progress/kendo-angular-popup';
 import { PopupService } from '@progress/kendo-angular-popup';
+import * as i1$2 from '@progress/kendo-angular-dialog';
+import { DialogService } from '@progress/kendo-angular-dialog';
+import { IconsService } from '@progress/kendo-angular-icons';
 
 /**
  * @hidden
@@ -128,8 +133,56 @@ class Messages extends ComponentMessages {
      * Sets the placeholder text for the zoom tool input.
      */
     zoomInputPlaceholder;
+    /**
+     * Sets the title and label for the **Annotation Editor** tool.
+     */
+    annotationsTitle;
+    /**
+     * Sets the title and label for the **Annotation Editor** tool.
+     */
+    annotationEditorTitle;
+    /**
+     * Sets the title and label for the **Delete Annotation** tool.
+     */
+    deleteAnnotationTitle;
+    /**
+     * Sets the title and label for the **Highligh Annotation** tool.
+     */
+    highlightAnnotationTitle;
+    /**
+     * Sets the title and label for the **Free Text Annotation** tool.
+     */
+    freeTextAnnotationTitle;
+    /**
+     * Sets the title and label for the **Close Annotations Toolbar** tool.
+     */
+    closeAnnotationsToolbarTitle;
+    /**
+     * Sets the title of the **Delete Annotation** confirmation dialog.
+     */
+    deleteAnnotationConfirmationDialogTitle;
+    /**
+     * Sets the content text of the **Delete Annotation** confirmation dialog.
+     */
+    deleteAnnotationConfirmationDialogContent;
+    /**
+     * Sets the text of the **Delete Annotation** confirmation dialog confirm action button.
+     */
+    deleteAnnotationConfirmationDialogConfirmText;
+    /**
+     * Sets the text of the **Delete Annotation** confirmation dialog reject action button.
+     */
+    deleteAnnotationConfirmationDialogRejectText;
+    /**
+     * Sets the text of the **Font Size** section in the annotation editor dialog.
+     */
+    annotationEditorFontSizeTitle;
+    /**
+     * Sets the text of the **Color** section in the annotation editor dialog.
+     */
+    annotationEditorColorTitle;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: Messages, selector: "kendo-pdfviewer-messages-base", inputs: { zoomInTitle: "zoomInTitle", zoomOutTitle: "zoomOutTitle", selectionTitle: "selectionTitle", panningTitle: "panningTitle", searchTitle: "searchTitle", openTitle: "openTitle", downloadTitle: "downloadTitle", printTitle: "printTitle", pagerInputLabel: "pagerInputLabel", pagerInputTitle: "pagerInputTitle", pagerFirstPage: "pagerFirstPage", pagerPreviousPage: "pagerPreviousPage", pagerNextPage: "pagerNextPage", pagerLastPage: "pagerLastPage", pagerOf: "pagerOf", pagerPage: "pagerPage", fitToPage: "fitToPage", fitToWidth: "fitToWidth", searchInputPlaceholder: "searchInputPlaceholder", searchMatchesOf: "searchMatchesOf", searchPreviousMatchTitle: "searchPreviousMatchTitle", searchNextMatchTitle: "searchNextMatchTitle", searchCloseTitle: "searchCloseTitle", searchMatchCaseTitle: "searchMatchCaseTitle", zoomInputPlaceholder: "zoomInputPlaceholder" }, usesInheritance: true, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: Messages, selector: "kendo-pdfviewer-messages-base", inputs: { zoomInTitle: "zoomInTitle", zoomOutTitle: "zoomOutTitle", selectionTitle: "selectionTitle", panningTitle: "panningTitle", searchTitle: "searchTitle", openTitle: "openTitle", downloadTitle: "downloadTitle", printTitle: "printTitle", pagerInputLabel: "pagerInputLabel", pagerInputTitle: "pagerInputTitle", pagerFirstPage: "pagerFirstPage", pagerPreviousPage: "pagerPreviousPage", pagerNextPage: "pagerNextPage", pagerLastPage: "pagerLastPage", pagerOf: "pagerOf", pagerPage: "pagerPage", fitToPage: "fitToPage", fitToWidth: "fitToWidth", searchInputPlaceholder: "searchInputPlaceholder", searchMatchesOf: "searchMatchesOf", searchPreviousMatchTitle: "searchPreviousMatchTitle", searchNextMatchTitle: "searchNextMatchTitle", searchCloseTitle: "searchCloseTitle", searchMatchCaseTitle: "searchMatchCaseTitle", zoomInputPlaceholder: "zoomInputPlaceholder", annotationsTitle: "annotationsTitle", annotationEditorTitle: "annotationEditorTitle", deleteAnnotationTitle: "deleteAnnotationTitle", highlightAnnotationTitle: "highlightAnnotationTitle", freeTextAnnotationTitle: "freeTextAnnotationTitle", closeAnnotationsToolbarTitle: "closeAnnotationsToolbarTitle", deleteAnnotationConfirmationDialogTitle: "deleteAnnotationConfirmationDialogTitle", deleteAnnotationConfirmationDialogContent: "deleteAnnotationConfirmationDialogContent", deleteAnnotationConfirmationDialogConfirmText: "deleteAnnotationConfirmationDialogConfirmText", deleteAnnotationConfirmationDialogRejectText: "deleteAnnotationConfirmationDialogRejectText", annotationEditorFontSizeTitle: "annotationEditorFontSizeTitle", annotationEditorColorTitle: "annotationEditorColorTitle" }, usesInheritance: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: Messages, decorators: [{
             type: Directive,
@@ -187,6 +240,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], zoomInputPlaceholder: [{
                 type: Input
+            }], annotationsTitle: [{
+                type: Input
+            }], annotationEditorTitle: [{
+                type: Input
+            }], deleteAnnotationTitle: [{
+                type: Input
+            }], highlightAnnotationTitle: [{
+                type: Input
+            }], freeTextAnnotationTitle: [{
+                type: Input
+            }], closeAnnotationsToolbarTitle: [{
+                type: Input
+            }], deleteAnnotationConfirmationDialogTitle: [{
+                type: Input
+            }], deleteAnnotationConfirmationDialogContent: [{
+                type: Input
+            }], deleteAnnotationConfirmationDialogConfirmText: [{
+                type: Input
+            }], deleteAnnotationConfirmationDialogRejectText: [{
+                type: Input
+            }], annotationEditorFontSizeTitle: [{
+                type: Input
+            }], annotationEditorColorTitle: [{
+                type: Input
             }] } });
 
 /**
@@ -240,8 +317,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1754485529,
-    version: '19.3.0-develop.24',
+    publishDate: 1754555459,
+    version: '19.3.0-develop.26',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning',
 };
 
@@ -320,6 +397,10 @@ const zoomToFitOptions = {
     'fitToPage': 'FitToPage',
     'fitToWidth': 'FitToWidth'
 };
+/**
+ * @hidden
+ */
+const fontSizes = [8, 9, 10, 11, 12, 14, 16, 18, 20, 22, 24, 26, 28, 36, 48, 72];
 
 /**
  * Represents the arguments for the PDFViewer `download` event. The event fires when the user clicks the **Download** tool. Canceling the event prevents the download.
@@ -589,6 +670,10 @@ class ToolbarComponent {
     zoomOptionsData;
     pagesContainerId;
     tools;
+    type = 'tools';
+    wrapperId;
+    isAnnotationsToolbarVisible = false;
+    annotationsToolId;
     fileSelect = new EventEmitter();
     fileSelectStart = new EventEmitter();
     fileSelectError = new EventEmitter();
@@ -601,6 +686,8 @@ class ToolbarComponent {
     zoomLevelChange = new EventEmitter();
     print = new EventEmitter();
     search = new EventEmitter();
+    toggleAnnotationsToolbar = new EventEmitter();
+    setAnnotationMode = new EventEmitter();
     zoomInIcon = zoomInIcon;
     zoomOutIcon = zoomOutIcon;
     handIcon = handIcon;
@@ -609,7 +696,14 @@ class ToolbarComponent {
     folderOpenIcon = folderOpenIcon;
     downloadIcon = downloadIcon;
     printIcon = printIcon;
+    trackChangesIcon = trackChangesIcon;
+    highlightIcon = highlightIcon;
+    freeTextIcon = freeTextIcon;
+    xIcon = xIcon;
     pagerType = 'input';
+    isSelectionEnabled = false;
+    isHighlightMode;
+    isFreeTextMode;
     constructor(localization, navigationService) {
         this.localization = localization;
         this.navigationService = navigationService;
@@ -638,6 +732,16 @@ class ToolbarComponent {
     focus() {
         this.navigationService.focusableTools[this.navigationService.currentFocusIndex].activate();
     }
+    onHighlightClick() {
+        this.isHighlightMode = !this.isHighlightMode;
+        this.isFreeTextMode = false;
+        this.setAnnotationMode.emit(this.isHighlightMode ? 'highlight' : 'none');
+    }
+    onFreeTextClick() {
+        this.isFreeTextMode = !this.isFreeTextMode;
+        this.isHighlightMode = false;
+        this.setAnnotationMode.emit(this.isFreeTextMode ? 'freeText' : 'none');
+    }
     valueNormalizer = (text) => text.pipe(map((value) => {
         const parsedValue = parseFloat(value);
         const newValue = Number.isNaN(parsedValue) ? 1 : parsedValue / 100;
@@ -648,184 +752,250 @@ class ToolbarComponent {
         };
     }));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolbarComponent, deps: [{ token: i1.LocalizationService }, { token: ToolbarNavigationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ToolbarComponent, isStandalone: true, selector: "[kendoPDFViewerToolbar]", inputs: { zoomLevel: "zoomLevel", calculatedComboBoxValue: "calculatedComboBoxValue", skip: "skip", pageSize: "pageSize", total: "total", zoomInDisabled: "zoomInDisabled", zoomOutDisabled: "zoomOutDisabled", disabledTools: "disabledTools", zoomLevelChooserValue: "zoomLevelChooserValue", zoomOptionsData: "zoomOptionsData", pagesContainerId: "pagesContainerId", tools: "tools" }, outputs: { fileSelect: "fileSelect", fileSelectStart: "fileSelectStart", fileSelectError: "fileSelectError", download: "download", selectionEnabled: "selectionEnabled", panningEnabled: "panningEnabled", pageChange: "pageChange", zoomIn: "zoomIn", zoomOut: "zoomOut", zoomLevelChange: "zoomLevelChange", print: "print", search: "search" }, host: { properties: { "class.k-toolbar": "this.toolbarClasses", "class.k-toolbar-md": "this.toolbarClasses", "class.k-toolbar-flat": "this.toolbarClasses" } }, providers: [ToolbarNavigationService], viewQueries: [{ propertyName: "fileSelectEl", first: true, predicate: ["fileSelectEl"], descendants: true }], ngImport: i0, template: `
-        <ng-container *ngFor="let tool of tools">
-            <ng-container [ngSwitch]="tool">
-                <kendo-toolbar-input-wrapper
-                    *ngSwitchCase="'pager'"
-                    kendoPDFViewerToolbarFocusable
-                    [toolbarTool]="pager">
-                    <kendo-datapager
-                        #pager
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ToolbarComponent, isStandalone: true, selector: "[kendoPDFViewerToolbar]", inputs: { zoomLevel: "zoomLevel", calculatedComboBoxValue: "calculatedComboBoxValue", skip: "skip", pageSize: "pageSize", total: "total", zoomInDisabled: "zoomInDisabled", zoomOutDisabled: "zoomOutDisabled", disabledTools: "disabledTools", zoomLevelChooserValue: "zoomLevelChooserValue", zoomOptionsData: "zoomOptionsData", pagesContainerId: "pagesContainerId", tools: "tools", type: "type", wrapperId: "wrapperId", isAnnotationsToolbarVisible: "isAnnotationsToolbarVisible", annotationsToolId: "annotationsToolId" }, outputs: { fileSelect: "fileSelect", fileSelectStart: "fileSelectStart", fileSelectError: "fileSelectError", download: "download", selectionEnabled: "selectionEnabled", panningEnabled: "panningEnabled", pageChange: "pageChange", zoomIn: "zoomIn", zoomOut: "zoomOut", zoomLevelChange: "zoomLevelChange", print: "print", search: "search", toggleAnnotationsToolbar: "toggleAnnotationsToolbar", setAnnotationMode: "setAnnotationMode" }, host: { properties: { "class.k-toolbar": "this.toolbarClasses", "class.k-toolbar-md": "this.toolbarClasses", "class.k-toolbar-flat": "this.toolbarClasses" } }, providers: [ToolbarNavigationService], viewQueries: [{ propertyName: "fileSelectEl", first: true, predicate: ["fileSelectEl"], descendants: true }], ngImport: i0, template: `
+        <ng-container *ngIf="type === 'tools'">
+            <ng-container *ngFor="let tool of tools">
+                <ng-container [ngSwitch]="tool">
+                    <kendo-toolbar-input-wrapper
+                        *ngSwitchCase="'pager'"
+                        kendoPDFViewerToolbarFocusable
+                        [toolbarTool]="pager">
+                        <kendo-datapager
+                            #pager
+                            [attr.aria-controls]="pagesContainerId"
+                            [attr.aria-label]="messageFor('page') + ' ' + (skip + 1) + ' ' + messageFor('of') + total"
+                            [class.k-disabled]="disabledTools"
+                            [navigable]="true"
+                            [pageSize]="pageSize"
+                            [skip]="skip"
+                            [total]="total"
+                            [pageSizeValues]="false"
+                            [info]="false"
+                            [type]="pagerType"
+                            (pageChange)="pageChange.emit($event)">
+                            <kendo-datapager-messages
+                                [firstPage]="messageFor('pagerFirstPage')"
+                                [previousPage]="messageFor('pagerPreviousPage')"
+                                [nextPage]="messageFor('pagerNextPage')"
+                                [lastPage]="messageFor('pagerLastPage')"
+                                [inputLabel]="messageFor('pagerInputLabel')"
+                                [pageNumberInputTitle]="messageFor('pagerInputTitle')"
+                                [of]="messageFor('pagerOf')"
+                                [page]="messageFor('pagerPage')"></kendo-datapager-messages>
+                        </kendo-datapager>
+                    </kendo-toolbar-input-wrapper>
+                    <span
+                        *ngSwitchCase="'spacer'"
+                        class="k-spacer"></span>
+                    <kendo-buttongroup
+                        *ngSwitchCase="'zoomInOut'"
                         [attr.aria-controls]="pagesContainerId"
-                        [attr.aria-label]="messageFor('page') + ' ' + (skip + 1) + ' ' + messageFor('of') + total"
-                        [class.k-disabled]="disabledTools"
-                        [navigable]="true"
-                        [pageSize]="pageSize"
-                        [skip]="skip"
-                        [total]="total"
-                        [pageSizeValues]="false"
-                        [info]="false"
-                        [type]="pagerType"
-                        (pageChange)="pageChange.emit($event)">
-                        <kendo-datapager-messages
-                            [firstPage]="messageFor('pagerFirstPage')"
-                            [previousPage]="messageFor('pagerPreviousPage')"
-                            [nextPage]="messageFor('pagerNextPage')"
-                            [lastPage]="messageFor('pagerLastPage')"
-                            [inputLabel]="messageFor('pagerInputLabel')"
-                            [pageNumberInputTitle]="messageFor('pagerInputTitle')"
-                            [of]="messageFor('pagerOf')"
-                            [page]="messageFor('pagerPage')"></kendo-datapager-messages>
-                    </kendo-datapager>
-                </kendo-toolbar-input-wrapper>
-                <span
-                    *ngSwitchCase="'spacer'"
-                    class="k-spacer"></span>
-                <kendo-buttongroup
-                    *ngSwitchCase="'zoomInOut'"
-                    [attr.aria-controls]="pagesContainerId"
-                    class="k-button-group-flat k-toolbar-button-group"
-                    [navigable]="false">
+                        class="k-button-group-flat k-toolbar-button-group"
+                        [navigable]="false">
+                        <button
+                            type="button"
+                            kendoButton
+                            fillMode="flat"
+                            kendoPDFViewerToolbarFocusable
+                            icon="zoom-out"
+                            [disabled]="disabledTools || zoomOutDisabled"
+                            [svgIcon]="zoomOutIcon"
+                            [attr.title]="messageFor('zoomOutTitle')"
+                            [attr.aria-label]="messageFor('zoomOutTitle')"
+                            (click)="zoomOut.emit()"></button>
+                        <button
+                            type="button"
+                            kendoButton
+                            fillMode="flat"
+                            kendoPDFViewerToolbarFocusable
+                            icon="zoom-in"
+                            [disabled]="disabledTools || zoomInDisabled"
+                            [svgIcon]="zoomInIcon"
+                            [attr.title]="messageFor('zoomInTitle')"
+                            [attr.aria-label]="messageFor('zoomInTitle')"
+                            (click)="zoomIn.emit()"></button>
+                    </kendo-buttongroup>
+                    <kendo-toolbar-input-wrapper
+                        *ngSwitchCase="'zoom'"
+                        kendoPDFViewerToolbarFocusable
+                        [toolbarTool]="combobox">
+                        <kendo-combobox
+                            #combobox
+                            kendoPDFViewerComboBox
+                            class="k-toolbar-combobox"
+                            fillMode="flat"
+                            [attr.aria-controls]="pagesContainerId"
+                            [tabindex]="-1"
+                            [data]="zoomOptionsData"
+                            [disabled]="disabledTools"
+                            [placeholder]="messageFor('zoomInputPlaceholder')"
+                            textField="displayValue"
+                            valueField="id"
+                            [value]="zoomLevelChooserValue"
+                            [allowCustom]="true"
+                            [valueNormalizer]="valueNormalizer"
+                            [clearButton]="false"
+                            (valueChange)="onZoomLevelChooserValueChange($event)">
+                            <ng-template kendoComboBoxItemTemplate let-dataItem>
+                                {{ dataItem.type ? messageFor('f' + dataItem.type.slice(1)) : dataItem.text }}
+                            </ng-template>
+                        </kendo-combobox>
+                    </kendo-toolbar-input-wrapper>
+                    <kendo-buttongroup
+                        *ngSwitchCase="'selection'"
+                        [attr.aria-controls]="pagesContainerId"
+                        [navigable]="false"
+                        class="k-button-group-flat k-toolbar-button-group"
+                        selection="single">
+                        <button
+                            type="button"
+                            kendoButton
+                            kendoPDFViewerToolbarFocusable
+                            fillMode="flat"
+                            icon="pointer"
+                            [toggleable]="true"
+                            [svgIcon]="pointerIcon"
+                            [attr.title]="messageFor('selectionTitle')"
+                            [attr.aria-label]="messageFor('selectionTitle')"
+                            (click)="selectionEnabled.emit(); isSelectionEnabled = true;"></button>
+                        <button
+                            type="button"
+                            kendoButton
+                            kendoPDFViewerToolbarFocusable
+                            fillMode="flat"
+                            icon="hand"
+                            [svgIcon]="handIcon"
+                            [toggleable]="true"
+                            [selected]="true"
+                            [attr.title]="messageFor('panningTitle')"
+                            [attr.aria-label]="messageFor('panningTitle')"
+                            (click)="panningEnabled.emit(); isSelectionEnabled = false;"></button>
+                    </kendo-buttongroup>
                     <button
+                        *ngSwitchCase="'search'"
                         type="button"
+                        kendoPDFViewerToolbarFocusable
                         kendoButton
+                        class="k-toolbar-button"
                         fillMode="flat"
-                        kendoPDFViewerToolbarFocusable
-                        icon="zoom-out"
-                        [disabled]="disabledTools || zoomOutDisabled"
-                        [svgIcon]="zoomOutIcon"
-                        [attr.title]="messageFor('zoomOutTitle')"
-                        [attr.aria-label]="messageFor('zoomOutTitle')"
-                        (click)="zoomOut.emit()"></button>
+                        icon="search"
+                        [disabled]="disabledTools"
+                        [attr.title]="messageFor('searchTitle')"
+                        [attr.aria-label]="messageFor('searchTitle')"
+                        aria-haspopup="dialog"
+                        [svgIcon]="searchIcon"
+                        (click)="search.emit()"></button>
                     <button
+                        *ngSwitchCase="'open'"
                         type="button"
-                        kendoButton
                         fillMode="flat"
                         kendoPDFViewerToolbarFocusable
-                        icon="zoom-in"
-                        [disabled]="disabledTools || zoomInDisabled"
-                        [svgIcon]="zoomInIcon"
-                        [attr.title]="messageFor('zoomInTitle')"
-                        [attr.aria-label]="messageFor('zoomInTitle')"
-                        (click)="zoomIn.emit()"></button>
-                </kendo-buttongroup>
-                <kendo-toolbar-input-wrapper
-                    *ngSwitchCase="'zoom'"
-                    kendoPDFViewerToolbarFocusable
-                    [toolbarTool]="combobox">
-                    <kendo-combobox
-                        #combobox
-                        kendoPDFViewerComboBox
-                        class="k-toolbar-combobox"
+                        kendoButton
+                        class="k-toolbar-button"
                         fillMode="flat"
+                        icon="folder-open"
+                        [svgIcon]="folderOpenIcon"
+                        [attr.title]="messageFor('openTitle')"
+                        [attr.aria-label]="messageFor('openTitle')"
                         [attr.aria-controls]="pagesContainerId"
-                        [tabindex]="-1"
-                        [data]="zoomOptionsData"
-                        [disabled]="disabledTools"
-                        [placeholder]="messageFor('zoomInputPlaceholder')"
-                        textField="displayValue"
-                        valueField="id"
-                        [value]="zoomLevelChooserValue"
-                        [allowCustom]="true"
-                        [valueNormalizer]="valueNormalizer"
-                        [clearButton]="false"
-                        (valueChange)="onZoomLevelChooserValueChange($event)">
-                        <ng-template kendoComboBoxItemTemplate let-dataItem>
-                            {{ dataItem.type ? messageFor('f' + dataItem.type.slice(1)) : dataItem.text }}
-                        </ng-template>
-                    </kendo-combobox>
-                </kendo-toolbar-input-wrapper>
-                <kendo-buttongroup
-                    *ngSwitchCase="'selection'"
-                    [attr.aria-controls]="pagesContainerId"
-                    [navigable]="false"
-                    class="k-button-group-flat k-toolbar-button-group"
-                    selection="single">
+                        (click)="fileSelectEl?.nativeElement.click()">
+                    </button>
                     <button
+                        *ngSwitchCase="'download'"
                         type="button"
-                        kendoButton
-                        kendoPDFViewerToolbarFocusable
                         fillMode="flat"
-                        icon="pointer"
-                        [toggleable]="true"
-                        [svgIcon]="pointerIcon"
-                        [attr.title]="messageFor('selectionTitle')"
-                        [attr.aria-label]="messageFor('selectionTitle')"
-                        (click)="selectionEnabled.emit()"></button>
+                        kendoPDFViewerToolbarFocusable
+                        kendoButton
+                        class="k-toolbar-button"
+                        icon="download"
+                        [svgIcon]="downloadIcon"
+                        [disabled]="disabledTools"
+                        [attr.title]="messageFor('downloadTitle')"
+                        [attr.aria-label]="messageFor('downloadTitle')"
+                        (click)="download.emit()"></button>
                     <button
+                        *ngSwitchCase="'print'"
                         type="button"
+                        fillMode="flat"
+                        kendoPDFViewerToolbarFocusable
                         kendoButton
+                        class="k-toolbar-button"
+                        icon="print"
+                        [svgIcon]="printIcon"
+                        [disabled]="disabledTools"
+                        [attr.title]="messageFor('printTitle')"
+                        [attr.aria-label]="messageFor('printTitle')"
+                        (click)="print.emit()"></button>
+                    <button
+                        *ngSwitchCase="'annotations'"
+                        type="button"
+                        [attr.id]="annotationsToolId"
                         kendoPDFViewerToolbarFocusable
+                        kendoButton
+                        class="k-toolbar-button"
                         fillMode="flat"
-                        icon="hand"
-                        [svgIcon]="handIcon"
-                        [toggleable]="true"
-                        [selected]="true"
-                        [attr.title]="messageFor('panningTitle')"
-                        [attr.aria-label]="messageFor('panningTitle')"
-                        (click)="panningEnabled.emit()"></button>
-                </kendo-buttongroup>
-                <button
-                    *ngSwitchCase="'search'"
-                    type="button"
-                    kendoPDFViewerToolbarFocusable
-                    kendoButton
-                    class="k-toolbar-button"
-                    fillMode="flat"
-                    icon="search"
-                    [disabled]="disabledTools"
-                    [attr.title]="messageFor('searchTitle')"
-                    [attr.aria-label]="messageFor('searchTitle')"
-                    aria-haspopup="dialog"
-                    [svgIcon]="searchIcon"
-                    (click)="search.emit()"></button>
-                <button
-                    *ngSwitchCase="'open'"
-                    type="button"
-                    fillMode="flat"
-                    kendoPDFViewerToolbarFocusable
-                    kendoButton
-                    class="k-toolbar-button"
-                    fillMode="flat"
-                    icon="folder-open"
-                    [svgIcon]="folderOpenIcon"
-                    [attr.title]="messageFor('openTitle')"
-                    [attr.aria-label]="messageFor('openTitle')"
-                    [attr.aria-controls]="pagesContainerId"
-                    (click)="fileSelectEl?.nativeElement.click()">
-                </button>
-                <button
-                    *ngSwitchCase="'download'"
-                    type="button"
-                    fillMode="flat"
-                    kendoPDFViewerToolbarFocusable
-                    kendoButton
-                    class="k-toolbar-button"
-                    icon="download"
-                    [svgIcon]="downloadIcon"
-                    [disabled]="disabledTools"
-                    [attr.title]="messageFor('downloadTitle')"
-                    [attr.aria-label]="messageFor('downloadTitle')"
-                    (click)="download.emit()"></button>
-                <button
-                    *ngSwitchCase="'print'"
-                    type="button"
-                    fillMode="flat"
-                    kendoPDFViewerToolbarFocusable
-                    kendoButton
-                    class="k-toolbar-button"
-                    icon="print"
-                    [svgIcon]="printIcon"
-                    [disabled]="disabledTools"
-                    [attr.title]="messageFor('printTitle')"
-                    [attr.aria-label]="messageFor('printTitle')"
-                    (click)="print.emit()"></button>
+                        icon="track-changes"
+                        [selected]="isAnnotationsToolbarVisible"
+                        [disabled]="disabledTools || !isSelectionEnabled"
+                        [attr.title]="messageFor('annotationsTitle')"
+                        [attr.aria-label]="messageFor('annotationsTitle')"
+                        [attr.aria-controls]="wrapperId"
+                        [attr.aria-expanded]="isAnnotationsToolbarVisible"
+                        [svgIcon]="trackChangesIcon"
+                        (click)="toggleAnnotationsToolbar.emit();"></button>
+                </ng-container>
             </ng-container>
         </ng-container>
+        <ng-container *ngIf="type === 'annotations'">
+            <button
+                type="button"
+                kendoPDFViewerToolbarFocusable
+                kendoButton
+                class="k-toolbar-button"
+                fillMode="flat"
+                icon="highlight"
+                [selected]="isHighlightMode"
+                [disabled]="disabledTools"
+                [attr.title]="messageFor('highlightAnnotationTitle')"
+                [attr.aria-label]="messageFor('highlightAnnotationTitle')"
+                aria-haspopup="dialog"
+                [svgIcon]="highlightIcon"
+                (click)="onHighlightClick()"></button>
+            <div class="k-toolbar-separator k-separator"></div>
+            <button
+                type="button"
+                fillMode="flat"
+                kendoPDFViewerToolbarFocusable
+                kendoButton
+                [selected]="isFreeTextMode"
+                class="k-toolbar-button"
+                fillMode="flat"
+                icon="free-text"
+                [svgIcon]="freeTextIcon"
+                [attr.title]="messageFor('freeTextAnnotationTitle')"
+                [attr.aria-label]="messageFor('freeTextAnnotationTitle')"
+                [attr.aria-controls]="pagesContainerId"
+                (click)="onFreeTextClick()">
+            </button>
+            <span class="k-spacer"></span>
+            <button
+                type="button"
+                fillMode="flat"
+                kendoPDFViewerToolbarFocusable
+                kendoButton
+                class="k-toolbar-button"
+                fillMode="flat"
+                icon="x"
+                [svgIcon]="xIcon"
+                [attr.title]="messageFor('closeAnnotationsToolbarTitle')"
+                [attr.aria-label]="messageFor('closeAnnotationsToolbarTitle')"
+                [attr.aria-controls]="pagesContainerId"
+                (click)="toggleAnnotationsToolbar.emit();">
+            </button>
+        </ng-container>
         <input
             #fileSelectEl
-            *ngIf="tools?.indexOf('open') > -1;"
+            *ngIf="type === 'tools' &&tools?.indexOf('open') > -1;"
             type="file"
             [style.display]="'none'"
             aria-hidden="true"
@@ -839,183 +1009,249 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     selector: '[kendoPDFViewerToolbar]',
                     providers: [ToolbarNavigationService],
                     template: `
-        <ng-container *ngFor="let tool of tools">
-            <ng-container [ngSwitch]="tool">
-                <kendo-toolbar-input-wrapper
-                    *ngSwitchCase="'pager'"
-                    kendoPDFViewerToolbarFocusable
-                    [toolbarTool]="pager">
-                    <kendo-datapager
-                        #pager
+        <ng-container *ngIf="type === 'tools'">
+            <ng-container *ngFor="let tool of tools">
+                <ng-container [ngSwitch]="tool">
+                    <kendo-toolbar-input-wrapper
+                        *ngSwitchCase="'pager'"
+                        kendoPDFViewerToolbarFocusable
+                        [toolbarTool]="pager">
+                        <kendo-datapager
+                            #pager
+                            [attr.aria-controls]="pagesContainerId"
+                            [attr.aria-label]="messageFor('page') + ' ' + (skip + 1) + ' ' + messageFor('of') + total"
+                            [class.k-disabled]="disabledTools"
+                            [navigable]="true"
+                            [pageSize]="pageSize"
+                            [skip]="skip"
+                            [total]="total"
+                            [pageSizeValues]="false"
+                            [info]="false"
+                            [type]="pagerType"
+                            (pageChange)="pageChange.emit($event)">
+                            <kendo-datapager-messages
+                                [firstPage]="messageFor('pagerFirstPage')"
+                                [previousPage]="messageFor('pagerPreviousPage')"
+                                [nextPage]="messageFor('pagerNextPage')"
+                                [lastPage]="messageFor('pagerLastPage')"
+                                [inputLabel]="messageFor('pagerInputLabel')"
+                                [pageNumberInputTitle]="messageFor('pagerInputTitle')"
+                                [of]="messageFor('pagerOf')"
+                                [page]="messageFor('pagerPage')"></kendo-datapager-messages>
+                        </kendo-datapager>
+                    </kendo-toolbar-input-wrapper>
+                    <span
+                        *ngSwitchCase="'spacer'"
+                        class="k-spacer"></span>
+                    <kendo-buttongroup
+                        *ngSwitchCase="'zoomInOut'"
+                        [attr.aria-controls]="pagesContainerId"
+                        class="k-button-group-flat k-toolbar-button-group"
+                        [navigable]="false">
+                        <button
+                            type="button"
+                            kendoButton
+                            fillMode="flat"
+                            kendoPDFViewerToolbarFocusable
+                            icon="zoom-out"
+                            [disabled]="disabledTools || zoomOutDisabled"
+                            [svgIcon]="zoomOutIcon"
+                            [attr.title]="messageFor('zoomOutTitle')"
+                            [attr.aria-label]="messageFor('zoomOutTitle')"
+                            (click)="zoomOut.emit()"></button>
+                        <button
+                            type="button"
+                            kendoButton
+                            fillMode="flat"
+                            kendoPDFViewerToolbarFocusable
+                            icon="zoom-in"
+                            [disabled]="disabledTools || zoomInDisabled"
+                            [svgIcon]="zoomInIcon"
+                            [attr.title]="messageFor('zoomInTitle')"
+                            [attr.aria-label]="messageFor('zoomInTitle')"
+                            (click)="zoomIn.emit()"></button>
+                    </kendo-buttongroup>
+                    <kendo-toolbar-input-wrapper
+                        *ngSwitchCase="'zoom'"
+                        kendoPDFViewerToolbarFocusable
+                        [toolbarTool]="combobox">
+                        <kendo-combobox
+                            #combobox
+                            kendoPDFViewerComboBox
+                            class="k-toolbar-combobox"
+                            fillMode="flat"
+                            [attr.aria-controls]="pagesContainerId"
+                            [tabindex]="-1"
+                            [data]="zoomOptionsData"
+                            [disabled]="disabledTools"
+                            [placeholder]="messageFor('zoomInputPlaceholder')"
+                            textField="displayValue"
+                            valueField="id"
+                            [value]="zoomLevelChooserValue"
+                            [allowCustom]="true"
+                            [valueNormalizer]="valueNormalizer"
+                            [clearButton]="false"
+                            (valueChange)="onZoomLevelChooserValueChange($event)">
+                            <ng-template kendoComboBoxItemTemplate let-dataItem>
+                                {{ dataItem.type ? messageFor('f' + dataItem.type.slice(1)) : dataItem.text }}
+                            </ng-template>
+                        </kendo-combobox>
+                    </kendo-toolbar-input-wrapper>
+                    <kendo-buttongroup
+                        *ngSwitchCase="'selection'"
                         [attr.aria-controls]="pagesContainerId"
-                        [attr.aria-label]="messageFor('page') + ' ' + (skip + 1) + ' ' + messageFor('of') + total"
-                        [class.k-disabled]="disabledTools"
-                        [navigable]="true"
-                        [pageSize]="pageSize"
-                        [skip]="skip"
-                        [total]="total"
-                        [pageSizeValues]="false"
-                        [info]="false"
-                        [type]="pagerType"
-                        (pageChange)="pageChange.emit($event)">
-                        <kendo-datapager-messages
-                            [firstPage]="messageFor('pagerFirstPage')"
-                            [previousPage]="messageFor('pagerPreviousPage')"
-                            [nextPage]="messageFor('pagerNextPage')"
-                            [lastPage]="messageFor('pagerLastPage')"
-                            [inputLabel]="messageFor('pagerInputLabel')"
-                            [pageNumberInputTitle]="messageFor('pagerInputTitle')"
-                            [of]="messageFor('pagerOf')"
-                            [page]="messageFor('pagerPage')"></kendo-datapager-messages>
-                    </kendo-datapager>
-                </kendo-toolbar-input-wrapper>
-                <span
-                    *ngSwitchCase="'spacer'"
-                    class="k-spacer"></span>
-                <kendo-buttongroup
-                    *ngSwitchCase="'zoomInOut'"
-                    [attr.aria-controls]="pagesContainerId"
-                    class="k-button-group-flat k-toolbar-button-group"
-                    [navigable]="false">
+                        [navigable]="false"
+                        class="k-button-group-flat k-toolbar-button-group"
+                        selection="single">
+                        <button
+                            type="button"
+                            kendoButton
+                            kendoPDFViewerToolbarFocusable
+                            fillMode="flat"
+                            icon="pointer"
+                            [toggleable]="true"
+                            [svgIcon]="pointerIcon"
+                            [attr.title]="messageFor('selectionTitle')"
+                            [attr.aria-label]="messageFor('selectionTitle')"
+                            (click)="selectionEnabled.emit(); isSelectionEnabled = true;"></button>
+                        <button
+                            type="button"
+                            kendoButton
+                            kendoPDFViewerToolbarFocusable
+                            fillMode="flat"
+                            icon="hand"
+                            [svgIcon]="handIcon"
+                            [toggleable]="true"
+                            [selected]="true"
+                            [attr.title]="messageFor('panningTitle')"
+                            [attr.aria-label]="messageFor('panningTitle')"
+                            (click)="panningEnabled.emit(); isSelectionEnabled = false;"></button>
+                    </kendo-buttongroup>
                     <button
+                        *ngSwitchCase="'search'"
                         type="button"
+                        kendoPDFViewerToolbarFocusable
                         kendoButton
+                        class="k-toolbar-button"
                         fillMode="flat"
-                        kendoPDFViewerToolbarFocusable
-                        icon="zoom-out"
-                        [disabled]="disabledTools || zoomOutDisabled"
-                        [svgIcon]="zoomOutIcon"
-                        [attr.title]="messageFor('zoomOutTitle')"
-                        [attr.aria-label]="messageFor('zoomOutTitle')"
-                        (click)="zoomOut.emit()"></button>
+                        icon="search"
+                        [disabled]="disabledTools"
+                        [attr.title]="messageFor('searchTitle')"
+                        [attr.aria-label]="messageFor('searchTitle')"
+                        aria-haspopup="dialog"
+                        [svgIcon]="searchIcon"
+                        (click)="search.emit()"></button>
                     <button
+                        *ngSwitchCase="'open'"
                         type="button"
-                        kendoButton
                         fillMode="flat"
                         kendoPDFViewerToolbarFocusable
-                        icon="zoom-in"
-                        [disabled]="disabledTools || zoomInDisabled"
-                        [svgIcon]="zoomInIcon"
-                        [attr.title]="messageFor('zoomInTitle')"
-                        [attr.aria-label]="messageFor('zoomInTitle')"
-                        (click)="zoomIn.emit()"></button>
-                </kendo-buttongroup>
-                <kendo-toolbar-input-wrapper
-                    *ngSwitchCase="'zoom'"
-                    kendoPDFViewerToolbarFocusable
-                    [toolbarTool]="combobox">
-                    <kendo-combobox
-                        #combobox
-                        kendoPDFViewerComboBox
-                        class="k-toolbar-combobox"
+                        kendoButton
+                        class="k-toolbar-button"
                         fillMode="flat"
+                        icon="folder-open"
+                        [svgIcon]="folderOpenIcon"
+                        [attr.title]="messageFor('openTitle')"
+                        [attr.aria-label]="messageFor('openTitle')"
                         [attr.aria-controls]="pagesContainerId"
-                        [tabindex]="-1"
-                        [data]="zoomOptionsData"
-                        [disabled]="disabledTools"
-                        [placeholder]="messageFor('zoomInputPlaceholder')"
-                        textField="displayValue"
-                        valueField="id"
-                        [value]="zoomLevelChooserValue"
-                        [allowCustom]="true"
-                        [valueNormalizer]="valueNormalizer"
-                        [clearButton]="false"
-                        (valueChange)="onZoomLevelChooserValueChange($event)">
-                        <ng-template kendoComboBoxItemTemplate let-dataItem>
-                            {{ dataItem.type ? messageFor('f' + dataItem.type.slice(1)) : dataItem.text }}
-                        </ng-template>
-                    </kendo-combobox>
-                </kendo-toolbar-input-wrapper>
-                <kendo-buttongroup
-                    *ngSwitchCase="'selection'"
-                    [attr.aria-controls]="pagesContainerId"
-                    [navigable]="false"
-                    class="k-button-group-flat k-toolbar-button-group"
-                    selection="single">
+                        (click)="fileSelectEl?.nativeElement.click()">
+                    </button>
                     <button
+                        *ngSwitchCase="'download'"
                         type="button"
-                        kendoButton
-                        kendoPDFViewerToolbarFocusable
                         fillMode="flat"
-                        icon="pointer"
-                        [toggleable]="true"
-                        [svgIcon]="pointerIcon"
-                        [attr.title]="messageFor('selectionTitle')"
-                        [attr.aria-label]="messageFor('selectionTitle')"
-                        (click)="selectionEnabled.emit()"></button>
+                        kendoPDFViewerToolbarFocusable
+                        kendoButton
+                        class="k-toolbar-button"
+                        icon="download"
+                        [svgIcon]="downloadIcon"
+                        [disabled]="disabledTools"
+                        [attr.title]="messageFor('downloadTitle')"
+                        [attr.aria-label]="messageFor('downloadTitle')"
+                        (click)="download.emit()"></button>
                     <button
+                        *ngSwitchCase="'print'"
                         type="button"
+                        fillMode="flat"
+                        kendoPDFViewerToolbarFocusable
                         kendoButton
+                        class="k-toolbar-button"
+                        icon="print"
+                        [svgIcon]="printIcon"
+                        [disabled]="disabledTools"
+                        [attr.title]="messageFor('printTitle')"
+                        [attr.aria-label]="messageFor('printTitle')"
+                        (click)="print.emit()"></button>
+                    <button
+                        *ngSwitchCase="'annotations'"
+                        type="button"
+                        [attr.id]="annotationsToolId"
                         kendoPDFViewerToolbarFocusable
+                        kendoButton
+                        class="k-toolbar-button"
                         fillMode="flat"
-                        icon="hand"
-                        [svgIcon]="handIcon"
-                        [toggleable]="true"
-                        [selected]="true"
-                        [attr.title]="messageFor('panningTitle')"
-                        [attr.aria-label]="messageFor('panningTitle')"
-                        (click)="panningEnabled.emit()"></button>
-                </kendo-buttongroup>
-                <button
-                    *ngSwitchCase="'search'"
-                    type="button"
-                    kendoPDFViewerToolbarFocusable
-                    kendoButton
-                    class="k-toolbar-button"
-                    fillMode="flat"
-                    icon="search"
-                    [disabled]="disabledTools"
-                    [attr.title]="messageFor('searchTitle')"
-                    [attr.aria-label]="messageFor('searchTitle')"
-                    aria-haspopup="dialog"
-                    [svgIcon]="searchIcon"
-                    (click)="search.emit()"></button>
-                <button
-                    *ngSwitchCase="'open'"
-                    type="button"
-                    fillMode="flat"
-                    kendoPDFViewerToolbarFocusable
-                    kendoButton
-                    class="k-toolbar-button"
-                    fillMode="flat"
-                    icon="folder-open"
-                    [svgIcon]="folderOpenIcon"
-                    [attr.title]="messageFor('openTitle')"
-                    [attr.aria-label]="messageFor('openTitle')"
-                    [attr.aria-controls]="pagesContainerId"
-                    (click)="fileSelectEl?.nativeElement.click()">
-                </button>
-                <button
-                    *ngSwitchCase="'download'"
-                    type="button"
-                    fillMode="flat"
-                    kendoPDFViewerToolbarFocusable
-                    kendoButton
-                    class="k-toolbar-button"
-                    icon="download"
-                    [svgIcon]="downloadIcon"
-                    [disabled]="disabledTools"
-                    [attr.title]="messageFor('downloadTitle')"
-                    [attr.aria-label]="messageFor('downloadTitle')"
-                    (click)="download.emit()"></button>
-                <button
-                    *ngSwitchCase="'print'"
-                    type="button"
-                    fillMode="flat"
-                    kendoPDFViewerToolbarFocusable
-                    kendoButton
-                    class="k-toolbar-button"
-                    icon="print"
-                    [svgIcon]="printIcon"
-                    [disabled]="disabledTools"
-                    [attr.title]="messageFor('printTitle')"
-                    [attr.aria-label]="messageFor('printTitle')"
-                    (click)="print.emit()"></button>
+                        icon="track-changes"
+                        [selected]="isAnnotationsToolbarVisible"
+                        [disabled]="disabledTools || !isSelectionEnabled"
+                        [attr.title]="messageFor('annotationsTitle')"
+                        [attr.aria-label]="messageFor('annotationsTitle')"
+                        [attr.aria-controls]="wrapperId"
+                        [attr.aria-expanded]="isAnnotationsToolbarVisible"
+                        [svgIcon]="trackChangesIcon"
+                        (click)="toggleAnnotationsToolbar.emit();"></button>
+                </ng-container>
             </ng-container>
         </ng-container>
+        <ng-container *ngIf="type === 'annotations'">
+            <button
+                type="button"
+                kendoPDFViewerToolbarFocusable
+                kendoButton
+                class="k-toolbar-button"
+                fillMode="flat"
+                icon="highlight"
+                [selected]="isHighlightMode"
+                [disabled]="disabledTools"
+                [attr.title]="messageFor('highlightAnnotationTitle')"
+                [attr.aria-label]="messageFor('highlightAnnotationTitle')"
+                aria-haspopup="dialog"
+                [svgIcon]="highlightIcon"
+                (click)="onHighlightClick()"></button>
+            <div class="k-toolbar-separator k-separator"></div>
+            <button
+                type="button"
+                fillMode="flat"
+                kendoPDFViewerToolbarFocusable
+                kendoButton
+                [selected]="isFreeTextMode"
+                class="k-toolbar-button"
+                fillMode="flat"
+                icon="free-text"
+                [svgIcon]="freeTextIcon"
+                [attr.title]="messageFor('freeTextAnnotationTitle')"
+                [attr.aria-label]="messageFor('freeTextAnnotationTitle')"
+                [attr.aria-controls]="pagesContainerId"
+                (click)="onFreeTextClick()">
+            </button>
+            <span class="k-spacer"></span>
+            <button
+                type="button"
+                fillMode="flat"
+                kendoPDFViewerToolbarFocusable
+                kendoButton
+                class="k-toolbar-button"
+                fillMode="flat"
+                icon="x"
+                [svgIcon]="xIcon"
+                [attr.title]="messageFor('closeAnnotationsToolbarTitle')"
+                [attr.aria-label]="messageFor('closeAnnotationsToolbarTitle')"
+                [attr.aria-controls]="pagesContainerId"
+                (click)="toggleAnnotationsToolbar.emit();">
+            </button>
+        </ng-container>
         <input
             #fileSelectEl
-            *ngIf="tools?.indexOf('open') > -1;"
+            *ngIf="type === 'tools' &&tools?.indexOf('open') > -1;"
             type="file"
             [style.display]="'none'"
             aria-hidden="true"
@@ -1061,6 +1297,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], tools: [{
                 type: Input
+            }], type: [{
+                type: Input
+            }], wrapperId: [{
+                type: Input
+            }], isAnnotationsToolbarVisible: [{
+                type: Input
+            }], annotationsToolId: [{
+                type: Input
             }], fileSelect: [{
                 type: Output
             }], fileSelectStart: [{
@@ -1085,6 +1329,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Output
             }], search: [{
                 type: Output
+            }], toggleAnnotationsToolbar: [{
+                type: Output
+            }], setAnnotationMode: [{
+                type: Output
             }] } });
 
 /**
@@ -1341,6 +1589,198 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
 
+/**
+ * @hidden
+ */
+const AnnotationEditorTypes = {
+    disable: -1,
+    none: 0,
+    freeText: 3,
+    highlight: 9
+};
+
+/**
+ * @hidden
+ */
+class AnnotationPopupToolbarContentComponent {
+    dialogService;
+    ngZone;
+    hostClasses = true;
+    paletteIcon = paletteIcon;
+    trashIcon = trashIcon;
+    localizationService;
+    pdfViewerWidget;
+    anchor;
+    annotationEditorType;
+    popupRef;
+    showToolbar = true;
+    initialColor;
+    fontSizes = fontSizes;
+    initialFontSize;
+    dialogContainer;
+    removeAnnotationConfirmation;
+    dialogResultSub;
+    constructor(dialogService, ngZone) {
+        this.dialogService = dialogService;
+        this.ngZone = ngZone;
+    }
+    ngOnDestroy() {
+        if (this.dialogResultSub) {
+            this.dialogResultSub.unsubscribe();
+        }
+    }
+    editAnnotation() {
+        this.popupRef.popup.setInput('popupClass', 'k-pdf-viewer-annotation-editor');
+        this.hostClasses = false;
+        this.ngZone.run(() => this.showToolbar = false);
+    }
+    deleteAnnotation() {
+        const removeItem = (shouldRemove) => {
+            if (shouldRemove) {
+                this.pdfViewerWidget.deleteAnnotation();
+            }
+        };
+        if (this.removeAnnotationConfirmation) {
+            this.ngZone.run(() => {
+                const dialog = this.dialogService.open({
+                    appendTo: this.dialogContainer,
+                    title: this.localizationService.get('deleteAnnotationConfirmationDialogTitle'),
+                    content: this.localizationService.get('deleteAnnotationConfirmationDialogContent'),
+                    actions: [{
+                            text: this.localizationService.get('deleteAnnotationConfirmationDialogConfirmText'),
+                            themeColor: 'primary',
+                            svgIcon: checkIcon,
+                            icon: 'check'
+                        }, {
+                            text: this.localizationService.get('deleteAnnotationConfirmationDialogRejectText'),
+                            svgIcon: xIcon,
+                            icon: 'x'
+                        }],
+                });
+                this.dialogResultSub = dialog.result.pipe(take(1)).subscribe((e) => {
+                    const shouldRemove = e.text === (this.localizationService.get('deleteAnnotationConfirmationDialogConfirmText'));
+                    removeItem(shouldRemove);
+                    this.dialogResultSub.unsubscribe();
+                    this.dialogResultSub = null;
+                });
+            });
+        }
+        else {
+            removeItem(true);
+        }
+    }
+    onColorValueChange(value) {
+        this.pdfViewerWidget[this.annotationEditorType === 'highlight' ? 'setHighlightColor' : 'setFreeTextColor'](value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AnnotationPopupToolbarContentComponent, deps: [{ token: i1$2.DialogService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AnnotationPopupToolbarContentComponent, isStandalone: true, selector: "[kendoPDFViewerAnnotationPopupToolbar]", host: { properties: { "class.k-toolbar": "this.hostClasses", "class.k-toolbar-md": "this.hostClasses", "class.k-toolbar-flat": "this.hostClasses" } }, providers: [DialogService], ngImport: i0, template: `
+        <ng-container *ngIf="showToolbar">
+            <button 
+                kendoButton
+                [attr.title]="localizationService?.get('annotationEditorTitle')"
+                [attr.aria-label]="localizationService?.get('annotationEditorTitle')"
+                [svgIcon]="paletteIcon"
+                icon="palette"
+                fillMode="flat"
+                type="button"
+                (click)="editAnnotation()"></button>
+            <button
+                kendoButton
+                [attr.title]="localizationService?.get('deleteAnnotationTitle')"
+                [attr.aria-label]="localizationService?.get('deleteAnnotationTitle')"
+                [svgIcon]="trashIcon"
+                icon="trash"
+                fillMode="flat"
+                type="button"
+                (click)="deleteAnnotation()"></button>
+        </ng-container>
+        <ng-container *ngIf="!showToolbar">
+            <ng-container *ngIf="annotationEditorType === 'freeText'">
+                 <span class="k-column-menu-group-header">
+                    <span id="text-font-size-label" class="k-column-menu-group-header-text">{{ localizationService?.get('annotationEditorFontSizeTitle') }}</span>
+                </span>
+                <kendo-dropdownlist
+                    [data]="fontSizes"
+                    [value]="initialFontSize"
+                    (valueChange)="pdfViewerWidget.setFreeTextFontSize($event)"
+                    fillMode="flat"
+                    aria-labelledby="text-font-size-label"></kendo-dropdownlist>
+            </ng-container>
+            <span class="k-column-menu-group-header">
+                <label [for]="flatColorPicker" class="k-column-menu-group-header-text">{{ localizationService?.get('annotationEditorColorTitle') }}</label>
+            </span>
+            <kendo-flatcolorpicker
+                #flatColorPicker
+                [preview]="false"
+                [value]="initialColor"
+                (valueChange)="onColorValueChange($event)"
+                fillMode="flat"></kendo-flatcolorpicker>
+        <ng-container>
+    `, isInline: true, dependencies: [{ kind: "component", type: i2.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: i3.FlatColorPickerComponent, selector: "kendo-flatcolorpicker", inputs: ["readonly", "disabled", "format", "value", "tabindex", "clearButton", "preview", "actionsLayout", "activeView", "views", "gradientSettings", "adaptiveMode", "paletteSettings", "size"], outputs: ["valueChange", "cancel", "activeViewChange", "clearButtonClick", "actionButtonClick"], exportAs: ["kendoFlatColorPicker"] }, { kind: "component", type: i1$1.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AnnotationPopupToolbarContentComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[kendoPDFViewerAnnotationPopupToolbar]',
+                    standalone: true,
+                    providers: [DialogService],
+                    imports: [KENDO_BUTTON, KENDO_FLATCOLORPICKER, KENDO_DROPDOWNLIST, NgIf],
+                    template: `
+        <ng-container *ngIf="showToolbar">
+            <button 
+                kendoButton
+                [attr.title]="localizationService?.get('annotationEditorTitle')"
+                [attr.aria-label]="localizationService?.get('annotationEditorTitle')"
+                [svgIcon]="paletteIcon"
+                icon="palette"
+                fillMode="flat"
+                type="button"
+                (click)="editAnnotation()"></button>
+            <button
+                kendoButton
+                [attr.title]="localizationService?.get('deleteAnnotationTitle')"
+                [attr.aria-label]="localizationService?.get('deleteAnnotationTitle')"
+                [svgIcon]="trashIcon"
+                icon="trash"
+                fillMode="flat"
+                type="button"
+                (click)="deleteAnnotation()"></button>
+        </ng-container>
+        <ng-container *ngIf="!showToolbar">
+            <ng-container *ngIf="annotationEditorType === 'freeText'">
+                 <span class="k-column-menu-group-header">
+                    <span id="text-font-size-label" class="k-column-menu-group-header-text">{{ localizationService?.get('annotationEditorFontSizeTitle') }}</span>
+                </span>
+                <kendo-dropdownlist
+                    [data]="fontSizes"
+                    [value]="initialFontSize"
+                    (valueChange)="pdfViewerWidget.setFreeTextFontSize($event)"
+                    fillMode="flat"
+                    aria-labelledby="text-font-size-label"></kendo-dropdownlist>
+            </ng-container>
+            <span class="k-column-menu-group-header">
+                <label [for]="flatColorPicker" class="k-column-menu-group-header-text">{{ localizationService?.get('annotationEditorColorTitle') }}</label>
+            </span>
+            <kendo-flatcolorpicker
+                #flatColorPicker
+                [preview]="false"
+                [value]="initialColor"
+                (valueChange)="onColorValueChange($event)"
+                fillMode="flat"></kendo-flatcolorpicker>
+        <ng-container>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i1$2.DialogService }, { type: i0.NgZone }]; }, propDecorators: { hostClasses: [{
+                type: HostBinding,
+                args: ['class.k-toolbar']
+            }, {
+                type: HostBinding,
+                args: ['class.k-toolbar-md']
+            }, {
+                type: HostBinding,
+                args: ['class.k-toolbar-flat']
+            }] } });
+
 let counter = 0;
 /**
  * Represents the [Kendo UI PDFViewer component for Angular](slug:overview_pdfviewer).
@@ -1363,11 +1803,13 @@ 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',
@@ -1379,7 +1821,8 @@ class PDFViewerComponent {
         'search',
         'open',
         'download',
-        'print'
+        'print',
+        'annotations'
     ];
     /**
      * The configuration of the internal Loader component.
@@ -1464,6 +1907,12 @@ 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.
      */
@@ -1485,6 +1934,8 @@ class PDFViewerComponent {
      */
     zoomLevelChange = new EventEmitter();
     pagesContainer;
+    pagesContainerViewContainerRef;
+    dialogContainerViewContainerRef;
     /**
      * Returns the current page number of the loaded PDF document.
      */
@@ -1519,17 +1970,30 @@ 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;
     }
@@ -1539,6 +2003,14 @@ 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
      */
@@ -1556,13 +2028,16 @@ 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);
@@ -1574,8 +2049,11 @@ 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;
@@ -1615,6 +2093,27 @@ 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
      */
@@ -1739,7 +2238,16 @@ 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;
@@ -1764,7 +2272,9 @@ class PDFViewerComponent {
                         this.loading = false;
                     },
                     scroll: this.scrollHandler,
-                    error: this.errorHandler
+                    error: this.errorHandler,
+                    annotationEditorToolBarShow: this.onAnnotationEditorToolBarShowHandler,
+                    annotationEditorToolBarHide: this.onAnnotationEditorToolBarHideHandler,
                 }
             });
         });
@@ -1812,6 +2322,7 @@ 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) {
@@ -1824,6 +2335,7 @@ 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);
@@ -1841,19 +2353,80 @@ 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$1.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"
@@ -1928,7 +2501,43 @@ class PDFViewerComponent {
             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
             *ngIf="loading"
@@ -1946,18 +2555,32 @@ 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"
@@ -1983,8 +2606,9 @@ class PDFViewerComponent {
                 [attr.id]="pagesContainerId"></div>
         </div>
 
+        <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"], 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]", inputs: ["licenseMessage"] }] });
+    `, 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,
@@ -2073,7 +2697,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             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
             *ngIf="loading"
@@ -2091,18 +2751,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"
@@ -2128,17 +2802,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 [attr.id]="pagesContainerId"></div>
         </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$1.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: [{
@@ -2167,6 +2845,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], loadOnDemandPageSize: [{
                 type: Input
+            }], removeAnnotationConfirmation: [{
+                type: Input
             }], load: [{
                 type: Output
             }], error: [{
@@ -2180,6 +2860,12 @@ 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 }]
             }] } });
 
 /**