@progress/kendo-angular-pdfviewer 19.3.0-develop.3 → 19.3.0-develop.31

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/annotations/annotation-editor.d.ts +41 -0
  2. package/esm2022/annotations/annotation-editor.mjs +199 -0
  3. package/esm2022/localization/messages.mjs +73 -1
  4. package/esm2022/models/annotation-editor.type.mjs +13 -0
  5. package/esm2022/package-metadata.mjs +2 -2
  6. package/esm2022/pdfviewer.component.mjs +317 -62
  7. package/esm2022/toolbar/toolbar.component.mjs +477 -310
  8. package/esm2022/util.mjs +4 -0
  9. package/fesm2022/progress-kendo-angular-pdfviewer.mjs +1071 -380
  10. package/localization/messages.d.ts +49 -1
  11. package/models/annotation-editor.type.d.ts +17 -0
  12. package/models/toolbar-tool.d.ts +1 -1
  13. package/package.json +15 -14
  14. package/pdfviewer.component.d.ts +51 -4
  15. package/schematics/ngAdd/index.js +2 -2
  16. package/toolbar/toolbar.component.d.ts +17 -1
  17. package/util.d.ts +4 -0
package/esm2022/toolbar/toolbar.component.mjs CHANGED
@@ -6,7 +6,7 @@
6
6
  import { Component, ElementRef, EventEmitter, HostBinding, Input, Output, ViewChild } from '@angular/core';
7
7
  import { LocalizationService } from '@progress/kendo-angular-l10n';
8
8
  import { PagerComponent, CustomMessagesComponent } from '@progress/kendo-angular-pager';
9
- import { searchIcon, zoomInIcon, zoomOutIcon, pointerIcon, handIcon, folderOpenIcon, downloadIcon, printIcon } from '@progress/kendo-svg-icons';
9
+ import { searchIcon, zoomInIcon, zoomOutIcon, pointerIcon, handIcon, folderOpenIcon, downloadIcon, printIcon, trackChangesIcon, highlightIcon, freeTextIcon, xIcon } from '@progress/kendo-svg-icons';
10
10
  import { ToolbarNavigationService } from './toolbar-navigation.service';
11
11
  import { ComboBoxComponent, ItemTemplateDirective } from '@progress/kendo-angular-dropdowns';
12
12
  import { ToolbarComboBoxDirective } from './toolbar-combobox.directive';
@@ -46,6 +46,10 @@ export class ToolbarComponent {
46
46
  zoomOptionsData;
47
47
  pagesContainerId;
48
48
  tools;
49
+ type = 'tools';
50
+ wrapperId;
51
+ isAnnotationsToolbarVisible = false;
52
+ annotationsToolId;
49
53
  fileSelect = new EventEmitter();
50
54
  fileSelectStart = new EventEmitter();
51
55
  fileSelectError = new EventEmitter();
@@ -58,6 +62,8 @@ export class ToolbarComponent {
58
62
  zoomLevelChange = new EventEmitter();
59
63
  print = new EventEmitter();
60
64
  search = new EventEmitter();
65
+ toggleAnnotationsToolbar = new EventEmitter();
66
+ setAnnotationMode = new EventEmitter();
61
67
  zoomInIcon = zoomInIcon;
62
68
  zoomOutIcon = zoomOutIcon;
63
69
  handIcon = handIcon;
@@ -66,7 +72,14 @@ export class ToolbarComponent {
66
72
  folderOpenIcon = folderOpenIcon;
67
73
  downloadIcon = downloadIcon;
68
74
  printIcon = printIcon;
75
+ trackChangesIcon = trackChangesIcon;
76
+ highlightIcon = highlightIcon;
77
+ freeTextIcon = freeTextIcon;
78
+ xIcon = xIcon;
69
79
  pagerType = 'input';
80
+ isSelectionEnabled = false;
81
+ isHighlightMode;
82
+ isFreeTextMode;
70
83
  constructor(localization, navigationService) {
71
84
  this.localization = localization;
72
85
  this.navigationService = navigationService;
@@ -95,6 +108,16 @@ export class ToolbarComponent {
95
108
  focus() {
96
109
  this.navigationService.focusableTools[this.navigationService.currentFocusIndex].activate();
97
110
  }
111
+ onHighlightClick() {
112
+ this.isHighlightMode = !this.isHighlightMode;
113
+ this.isFreeTextMode = false;
114
+ this.setAnnotationMode.emit(this.isHighlightMode ? 'highlight' : 'none');
115
+ }
116
+ onFreeTextClick() {
117
+ this.isFreeTextMode = !this.isFreeTextMode;
118
+ this.isHighlightMode = false;
119
+ this.setAnnotationMode.emit(this.isFreeTextMode ? 'freeText' : 'none');
120
+ }
98
121
  valueNormalizer = (text) => text.pipe(map((value) => {
99
122
  const parsedValue = parseFloat(value);
100
123
  const newValue = Number.isNaN(parsedValue) ? 1 : parsedValue / 100;
@@ -105,184 +128,250 @@ export class ToolbarComponent {
105
128
  };
106
129
  }));
107
130
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolbarComponent, deps: [{ token: i1.LocalizationService }, { token: i2.ToolbarNavigationService }], target: i0.ɵɵFactoryTarget.Component });
108
- 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: `
109
- <ng-container *ngFor="let tool of tools">
110
- <ng-container [ngSwitch]="tool">
111
- <kendo-toolbar-input-wrapper
112
- *ngSwitchCase="'pager'"
113
- kendoPDFViewerToolbarFocusable
114
- [toolbarTool]="pager">
115
- <kendo-datapager
116
- #pager
131
+ 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: `
132
+ <ng-container *ngIf="type === 'tools'">
133
+ <ng-container *ngFor="let tool of tools">
134
+ <ng-container [ngSwitch]="tool">
135
+ <kendo-toolbar-input-wrapper
136
+ *ngSwitchCase="'pager'"
137
+ kendoPDFViewerToolbarFocusable
138
+ [toolbarTool]="pager">
139
+ <kendo-datapager
140
+ #pager
141
+ [attr.aria-controls]="pagesContainerId"
142
+ [attr.aria-label]="messageFor('page') + ' ' + (skip + 1) + ' ' + messageFor('of') + total"
143
+ [class.k-disabled]="disabledTools"
144
+ [navigable]="true"
145
+ [pageSize]="pageSize"
146
+ [skip]="skip"
147
+ [total]="total"
148
+ [pageSizeValues]="false"
149
+ [info]="false"
150
+ [type]="pagerType"
151
+ (pageChange)="pageChange.emit($event)">
152
+ <kendo-datapager-messages
153
+ [firstPage]="messageFor('pagerFirstPage')"
154
+ [previousPage]="messageFor('pagerPreviousPage')"
155
+ [nextPage]="messageFor('pagerNextPage')"
156
+ [lastPage]="messageFor('pagerLastPage')"
157
+ [inputLabel]="messageFor('pagerInputLabel')"
158
+ [pageNumberInputTitle]="messageFor('pagerInputTitle')"
159
+ [of]="messageFor('pagerOf')"
160
+ [page]="messageFor('pagerPage')"></kendo-datapager-messages>
161
+ </kendo-datapager>
162
+ </kendo-toolbar-input-wrapper>
163
+ <span
164
+ *ngSwitchCase="'spacer'"
165
+ class="k-spacer"></span>
166
+ <kendo-buttongroup
167
+ *ngSwitchCase="'zoomInOut'"
117
168
  [attr.aria-controls]="pagesContainerId"
118
- [attr.aria-label]="messageFor('page') + ' ' + (skip + 1) + ' ' + messageFor('of') + total"
119
- [class.k-disabled]="disabledTools"
120
- [navigable]="true"
121
- [pageSize]="pageSize"
122
- [skip]="skip"
123
- [total]="total"
124
- [pageSizeValues]="false"
125
- [info]="false"
126
- [type]="pagerType"
127
- (pageChange)="pageChange.emit($event)">
128
- <kendo-datapager-messages
129
- [firstPage]="messageFor('pagerFirstPage')"
130
- [previousPage]="messageFor('pagerPreviousPage')"
131
- [nextPage]="messageFor('pagerNextPage')"
132
- [lastPage]="messageFor('pagerLastPage')"
133
- [inputLabel]="messageFor('pagerInputLabel')"
134
- [pageNumberInputTitle]="messageFor('pagerInputTitle')"
135
- [of]="messageFor('pagerOf')"
136
- [page]="messageFor('pagerPage')"></kendo-datapager-messages>
137
- </kendo-datapager>
138
- </kendo-toolbar-input-wrapper>
139
- <span
140
- *ngSwitchCase="'spacer'"
141
- class="k-spacer"></span>
142
- <kendo-buttongroup
143
- *ngSwitchCase="'zoomInOut'"
144
- [attr.aria-controls]="pagesContainerId"
145
- class="k-button-group-flat k-toolbar-button-group"
146
- [navigable]="false">
169
+ class="k-button-group-flat k-toolbar-button-group"
170
+ [navigable]="false">
171
+ <button
172
+ type="button"
173
+ kendoButton
174
+ fillMode="flat"
175
+ kendoPDFViewerToolbarFocusable
176
+ icon="zoom-out"
177
+ [disabled]="disabledTools || zoomOutDisabled"
178
+ [svgIcon]="zoomOutIcon"
179
+ [attr.title]="messageFor('zoomOutTitle')"
180
+ [attr.aria-label]="messageFor('zoomOutTitle')"
181
+ (click)="zoomOut.emit()"></button>
182
+ <button
183
+ type="button"
184
+ kendoButton
185
+ fillMode="flat"
186
+ kendoPDFViewerToolbarFocusable
187
+ icon="zoom-in"
188
+ [disabled]="disabledTools || zoomInDisabled"
189
+ [svgIcon]="zoomInIcon"
190
+ [attr.title]="messageFor('zoomInTitle')"
191
+ [attr.aria-label]="messageFor('zoomInTitle')"
192
+ (click)="zoomIn.emit()"></button>
193
+ </kendo-buttongroup>
194
+ <kendo-toolbar-input-wrapper
195
+ *ngSwitchCase="'zoom'"
196
+ kendoPDFViewerToolbarFocusable
197
+ [toolbarTool]="combobox">
198
+ <kendo-combobox
199
+ #combobox
200
+ kendoPDFViewerComboBox
201
+ class="k-toolbar-combobox"
202
+ fillMode="flat"
203
+ [attr.aria-controls]="pagesContainerId"
204
+ [tabindex]="-1"
205
+ [data]="zoomOptionsData"
206
+ [disabled]="disabledTools"
207
+ [placeholder]="messageFor('zoomInputPlaceholder')"
208
+ textField="displayValue"
209
+ valueField="id"
210
+ [value]="zoomLevelChooserValue"
211
+ [allowCustom]="true"
212
+ [valueNormalizer]="valueNormalizer"
213
+ [clearButton]="false"
214
+ (valueChange)="onZoomLevelChooserValueChange($event)">
215
+ <ng-template kendoComboBoxItemTemplate let-dataItem>
216
+ {{ dataItem.type ? messageFor('f' + dataItem.type.slice(1)) : dataItem.text }}
217
+ </ng-template>
218
+ </kendo-combobox>
219
+ </kendo-toolbar-input-wrapper>
220
+ <kendo-buttongroup
221
+ *ngSwitchCase="'selection'"
222
+ [attr.aria-controls]="pagesContainerId"
223
+ [navigable]="false"
224
+ class="k-button-group-flat k-toolbar-button-group"
225
+ selection="single">
226
+ <button
227
+ type="button"
228
+ kendoButton
229
+ kendoPDFViewerToolbarFocusable
230
+ fillMode="flat"
231
+ icon="pointer"
232
+ [toggleable]="true"
233
+ [svgIcon]="pointerIcon"
234
+ [attr.title]="messageFor('selectionTitle')"
235
+ [attr.aria-label]="messageFor('selectionTitle')"
236
+ (click)="selectionEnabled.emit(); isSelectionEnabled = true;"></button>
237
+ <button
238
+ type="button"
239
+ kendoButton
240
+ kendoPDFViewerToolbarFocusable
241
+ fillMode="flat"
242
+ icon="hand"
243
+ [svgIcon]="handIcon"
244
+ [toggleable]="true"
245
+ [selected]="true"
246
+ [attr.title]="messageFor('panningTitle')"
247
+ [attr.aria-label]="messageFor('panningTitle')"
248
+ (click)="panningEnabled.emit(); isSelectionEnabled = false;"></button>
249
+ </kendo-buttongroup>
147
250
  <button
251
+ *ngSwitchCase="'search'"
148
252
  type="button"
253
+ kendoPDFViewerToolbarFocusable
149
254
  kendoButton
255
+ class="k-toolbar-button"
150
256
  fillMode="flat"
151
- kendoPDFViewerToolbarFocusable
152
- icon="zoom-out"
153
- [disabled]="disabledTools || zoomOutDisabled"
154
- [svgIcon]="zoomOutIcon"
155
- [attr.title]="messageFor('zoomOutTitle')"
156
- [attr.aria-label]="messageFor('zoomOutTitle')"
157
- (click)="zoomOut.emit()"></button>
257
+ icon="search"
258
+ [disabled]="disabledTools"
259
+ [attr.title]="messageFor('searchTitle')"
260
+ [attr.aria-label]="messageFor('searchTitle')"
261
+ aria-haspopup="dialog"
262
+ [svgIcon]="searchIcon"
263
+ (click)="search.emit()"></button>
158
264
  <button
265
+ *ngSwitchCase="'open'"
159
266
  type="button"
160
- kendoButton
161
267
  fillMode="flat"
162
268
  kendoPDFViewerToolbarFocusable
163
- icon="zoom-in"
164
- [disabled]="disabledTools || zoomInDisabled"
165
- [svgIcon]="zoomInIcon"
166
- [attr.title]="messageFor('zoomInTitle')"
167
- [attr.aria-label]="messageFor('zoomInTitle')"
168
- (click)="zoomIn.emit()"></button>
169
- </kendo-buttongroup>
170
- <kendo-toolbar-input-wrapper
171
- *ngSwitchCase="'zoom'"
172
- kendoPDFViewerToolbarFocusable
173
- [toolbarTool]="combobox">
174
- <kendo-combobox
175
- #combobox
176
- kendoPDFViewerComboBox
177
- class="k-toolbar-combobox"
269
+ kendoButton
270
+ class="k-toolbar-button"
178
271
  fillMode="flat"
272
+ icon="folder-open"
273
+ [svgIcon]="folderOpenIcon"
274
+ [attr.title]="messageFor('openTitle')"
275
+ [attr.aria-label]="messageFor('openTitle')"
179
276
  [attr.aria-controls]="pagesContainerId"
180
- [tabindex]="-1"
181
- [data]="zoomOptionsData"
182
- [disabled]="disabledTools"
183
- [placeholder]="messageFor('zoomInputPlaceholder')"
184
- textField="displayValue"
185
- valueField="id"
186
- [value]="zoomLevelChooserValue"
187
- [allowCustom]="true"
188
- [valueNormalizer]="valueNormalizer"
189
- [clearButton]="false"
190
- (valueChange)="onZoomLevelChooserValueChange($event)">
191
- <ng-template kendoComboBoxItemTemplate let-dataItem>
192
- {{ dataItem.type ? messageFor('f' + dataItem.type.slice(1)) : dataItem.text }}
193
- </ng-template>
194
- </kendo-combobox>
195
- </kendo-toolbar-input-wrapper>
196
- <kendo-buttongroup
197
- *ngSwitchCase="'selection'"
198
- [attr.aria-controls]="pagesContainerId"
199
- [navigable]="false"
200
- class="k-button-group-flat k-toolbar-button-group"
201
- selection="single">
277
+ (click)="fileSelectEl?.nativeElement.click()">
278
+ </button>
202
279
  <button
280
+ *ngSwitchCase="'download'"
203
281
  type="button"
204
- kendoButton
205
- kendoPDFViewerToolbarFocusable
206
282
  fillMode="flat"
207
- icon="pointer"
208
- [toggleable]="true"
209
- [svgIcon]="pointerIcon"
210
- [attr.title]="messageFor('selectionTitle')"
211
- [attr.aria-label]="messageFor('selectionTitle')"
212
- (click)="selectionEnabled.emit()"></button>
283
+ kendoPDFViewerToolbarFocusable
284
+ kendoButton
285
+ class="k-toolbar-button"
286
+ icon="download"
287
+ [svgIcon]="downloadIcon"
288
+ [disabled]="disabledTools"
289
+ [attr.title]="messageFor('downloadTitle')"
290
+ [attr.aria-label]="messageFor('downloadTitle')"
291
+ (click)="download.emit()"></button>
213
292
  <button
293
+ *ngSwitchCase="'print'"
214
294
  type="button"
295
+ fillMode="flat"
296
+ kendoPDFViewerToolbarFocusable
215
297
  kendoButton
298
+ class="k-toolbar-button"
299
+ icon="print"
300
+ [svgIcon]="printIcon"
301
+ [disabled]="disabledTools"
302
+ [attr.title]="messageFor('printTitle')"
303
+ [attr.aria-label]="messageFor('printTitle')"
304
+ (click)="print.emit()"></button>
305
+ <button
306
+ *ngSwitchCase="'annotations'"
307
+ type="button"
308
+ [attr.id]="annotationsToolId"
216
309
  kendoPDFViewerToolbarFocusable
310
+ kendoButton
311
+ class="k-toolbar-button"
217
312
  fillMode="flat"
218
- icon="hand"
219
- [svgIcon]="handIcon"
220
- [toggleable]="true"
221
- [selected]="true"
222
- [attr.title]="messageFor('panningTitle')"
223
- [attr.aria-label]="messageFor('panningTitle')"
224
- (click)="panningEnabled.emit()"></button>
225
- </kendo-buttongroup>
226
- <button
227
- *ngSwitchCase="'search'"
228
- type="button"
229
- kendoPDFViewerToolbarFocusable
230
- kendoButton
231
- class="k-toolbar-button"
232
- fillMode="flat"
233
- icon="search"
234
- [disabled]="disabledTools"
235
- [attr.title]="messageFor('searchTitle')"
236
- [attr.aria-label]="messageFor('searchTitle')"
237
- aria-haspopup="dialog"
238
- [svgIcon]="searchIcon"
239
- (click)="search.emit()"></button>
240
- <button
241
- *ngSwitchCase="'open'"
242
- type="button"
243
- fillMode="flat"
244
- kendoPDFViewerToolbarFocusable
245
- kendoButton
246
- class="k-toolbar-button"
247
- fillMode="flat"
248
- icon="folder-open"
249
- [svgIcon]="folderOpenIcon"
250
- [attr.title]="messageFor('openTitle')"
251
- [attr.aria-label]="messageFor('openTitle')"
252
- [attr.aria-controls]="pagesContainerId"
253
- (click)="fileSelectEl?.nativeElement.click()">
254
- </button>
255
- <button
256
- *ngSwitchCase="'download'"
257
- type="button"
258
- fillMode="flat"
259
- kendoPDFViewerToolbarFocusable
260
- kendoButton
261
- class="k-toolbar-button"
262
- icon="download"
263
- [svgIcon]="downloadIcon"
264
- [disabled]="disabledTools"
265
- [attr.title]="messageFor('downloadTitle')"
266
- [attr.aria-label]="messageFor('downloadTitle')"
267
- (click)="download.emit()"></button>
268
- <button
269
- *ngSwitchCase="'print'"
270
- type="button"
271
- fillMode="flat"
272
- kendoPDFViewerToolbarFocusable
273
- kendoButton
274
- class="k-toolbar-button"
275
- icon="print"
276
- [svgIcon]="printIcon"
277
- [disabled]="disabledTools"
278
- [attr.title]="messageFor('printTitle')"
279
- [attr.aria-label]="messageFor('printTitle')"
280
- (click)="print.emit()"></button>
313
+ icon="track-changes"
314
+ [selected]="isAnnotationsToolbarVisible"
315
+ [disabled]="disabledTools || !isSelectionEnabled"
316
+ [attr.title]="messageFor('annotationsTitle')"
317
+ [attr.aria-label]="messageFor('annotationsTitle')"
318
+ [attr.aria-controls]="wrapperId"
319
+ [attr.aria-expanded]="isAnnotationsToolbarVisible"
320
+ [svgIcon]="trackChangesIcon"
321
+ (click)="toggleAnnotationsToolbar.emit();"></button>
322
+ </ng-container>
281
323
  </ng-container>
282
324
  </ng-container>
325
+ <ng-container *ngIf="type === 'annotations'">
326
+ <button
327
+ type="button"
328
+ kendoPDFViewerToolbarFocusable
329
+ kendoButton
330
+ class="k-toolbar-button"
331
+ fillMode="flat"
332
+ icon="highlight"
333
+ [selected]="isHighlightMode"
334
+ [disabled]="disabledTools"
335
+ [attr.title]="messageFor('highlightAnnotationTitle')"
336
+ [attr.aria-label]="messageFor('highlightAnnotationTitle')"
337
+ aria-haspopup="dialog"
338
+ [svgIcon]="highlightIcon"
339
+ (click)="onHighlightClick()"></button>
340
+ <div class="k-toolbar-separator k-separator"></div>
341
+ <button
342
+ type="button"
343
+ fillMode="flat"
344
+ kendoPDFViewerToolbarFocusable
345
+ kendoButton
346
+ [selected]="isFreeTextMode"
347
+ class="k-toolbar-button"
348
+ fillMode="flat"
349
+ icon="free-text"
350
+ [svgIcon]="freeTextIcon"
351
+ [attr.title]="messageFor('freeTextAnnotationTitle')"
352
+ [attr.aria-label]="messageFor('freeTextAnnotationTitle')"
353
+ [attr.aria-controls]="pagesContainerId"
354
+ (click)="onFreeTextClick()">
355
+ </button>
356
+ <span class="k-spacer"></span>
357
+ <button
358
+ type="button"
359
+ fillMode="flat"
360
+ kendoPDFViewerToolbarFocusable
361
+ kendoButton
362
+ class="k-toolbar-button"
363
+ fillMode="flat"
364
+ icon="x"
365
+ [svgIcon]="xIcon"
366
+ [attr.title]="messageFor('closeAnnotationsToolbarTitle')"
367
+ [attr.aria-label]="messageFor('closeAnnotationsToolbarTitle')"
368
+ [attr.aria-controls]="pagesContainerId"
369
+ (click)="toggleAnnotationsToolbar.emit();">
370
+ </button>
371
+ </ng-container>
283
372
  <input
284
373
  #fileSelectEl
285
- *ngIf="tools?.indexOf('open') > -1;"
374
+ *ngIf="type === 'tools' &&tools?.indexOf('open') > -1;"
286
375
  type="file"
287
376
  [style.display]="'none'"
288
377
  aria-hidden="true"
@@ -296,183 +385,249 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
296
385
  selector: '[kendoPDFViewerToolbar]',
297
386
  providers: [ToolbarNavigationService],
298
387
  template: `
299
- <ng-container *ngFor="let tool of tools">
300
- <ng-container [ngSwitch]="tool">
301
- <kendo-toolbar-input-wrapper
302
- *ngSwitchCase="'pager'"
303
- kendoPDFViewerToolbarFocusable
304
- [toolbarTool]="pager">
305
- <kendo-datapager
306
- #pager
388
+ <ng-container *ngIf="type === 'tools'">
389
+ <ng-container *ngFor="let tool of tools">
390
+ <ng-container [ngSwitch]="tool">
391
+ <kendo-toolbar-input-wrapper
392
+ *ngSwitchCase="'pager'"
393
+ kendoPDFViewerToolbarFocusable
394
+ [toolbarTool]="pager">
395
+ <kendo-datapager
396
+ #pager
397
+ [attr.aria-controls]="pagesContainerId"
398
+ [attr.aria-label]="messageFor('page') + ' ' + (skip + 1) + ' ' + messageFor('of') + total"
399
+ [class.k-disabled]="disabledTools"
400
+ [navigable]="true"
401
+ [pageSize]="pageSize"
402
+ [skip]="skip"
403
+ [total]="total"
404
+ [pageSizeValues]="false"
405
+ [info]="false"
406
+ [type]="pagerType"
407
+ (pageChange)="pageChange.emit($event)">
408
+ <kendo-datapager-messages
409
+ [firstPage]="messageFor('pagerFirstPage')"
410
+ [previousPage]="messageFor('pagerPreviousPage')"
411
+ [nextPage]="messageFor('pagerNextPage')"
412
+ [lastPage]="messageFor('pagerLastPage')"
413
+ [inputLabel]="messageFor('pagerInputLabel')"
414
+ [pageNumberInputTitle]="messageFor('pagerInputTitle')"
415
+ [of]="messageFor('pagerOf')"
416
+ [page]="messageFor('pagerPage')"></kendo-datapager-messages>
417
+ </kendo-datapager>
418
+ </kendo-toolbar-input-wrapper>
419
+ <span
420
+ *ngSwitchCase="'spacer'"
421
+ class="k-spacer"></span>
422
+ <kendo-buttongroup
423
+ *ngSwitchCase="'zoomInOut'"
424
+ [attr.aria-controls]="pagesContainerId"
425
+ class="k-button-group-flat k-toolbar-button-group"
426
+ [navigable]="false">
427
+ <button
428
+ type="button"
429
+ kendoButton
430
+ fillMode="flat"
431
+ kendoPDFViewerToolbarFocusable
432
+ icon="zoom-out"
433
+ [disabled]="disabledTools || zoomOutDisabled"
434
+ [svgIcon]="zoomOutIcon"
435
+ [attr.title]="messageFor('zoomOutTitle')"
436
+ [attr.aria-label]="messageFor('zoomOutTitle')"
437
+ (click)="zoomOut.emit()"></button>
438
+ <button
439
+ type="button"
440
+ kendoButton
441
+ fillMode="flat"
442
+ kendoPDFViewerToolbarFocusable
443
+ icon="zoom-in"
444
+ [disabled]="disabledTools || zoomInDisabled"
445
+ [svgIcon]="zoomInIcon"
446
+ [attr.title]="messageFor('zoomInTitle')"
447
+ [attr.aria-label]="messageFor('zoomInTitle')"
448
+ (click)="zoomIn.emit()"></button>
449
+ </kendo-buttongroup>
450
+ <kendo-toolbar-input-wrapper
451
+ *ngSwitchCase="'zoom'"
452
+ kendoPDFViewerToolbarFocusable
453
+ [toolbarTool]="combobox">
454
+ <kendo-combobox
455
+ #combobox
456
+ kendoPDFViewerComboBox
457
+ class="k-toolbar-combobox"
458
+ fillMode="flat"
459
+ [attr.aria-controls]="pagesContainerId"
460
+ [tabindex]="-1"
461
+ [data]="zoomOptionsData"
462
+ [disabled]="disabledTools"
463
+ [placeholder]="messageFor('zoomInputPlaceholder')"
464
+ textField="displayValue"
465
+ valueField="id"
466
+ [value]="zoomLevelChooserValue"
467
+ [allowCustom]="true"
468
+ [valueNormalizer]="valueNormalizer"
469
+ [clearButton]="false"
470
+ (valueChange)="onZoomLevelChooserValueChange($event)">
471
+ <ng-template kendoComboBoxItemTemplate let-dataItem>
472
+ {{ dataItem.type ? messageFor('f' + dataItem.type.slice(1)) : dataItem.text }}
473
+ </ng-template>
474
+ </kendo-combobox>
475
+ </kendo-toolbar-input-wrapper>
476
+ <kendo-buttongroup
477
+ *ngSwitchCase="'selection'"
307
478
  [attr.aria-controls]="pagesContainerId"
308
- [attr.aria-label]="messageFor('page') + ' ' + (skip + 1) + ' ' + messageFor('of') + total"
309
- [class.k-disabled]="disabledTools"
310
- [navigable]="true"
311
- [pageSize]="pageSize"
312
- [skip]="skip"
313
- [total]="total"
314
- [pageSizeValues]="false"
315
- [info]="false"
316
- [type]="pagerType"
317
- (pageChange)="pageChange.emit($event)">
318
- <kendo-datapager-messages
319
- [firstPage]="messageFor('pagerFirstPage')"
320
- [previousPage]="messageFor('pagerPreviousPage')"
321
- [nextPage]="messageFor('pagerNextPage')"
322
- [lastPage]="messageFor('pagerLastPage')"
323
- [inputLabel]="messageFor('pagerInputLabel')"
324
- [pageNumberInputTitle]="messageFor('pagerInputTitle')"
325
- [of]="messageFor('pagerOf')"
326
- [page]="messageFor('pagerPage')"></kendo-datapager-messages>
327
- </kendo-datapager>
328
- </kendo-toolbar-input-wrapper>
329
- <span
330
- *ngSwitchCase="'spacer'"
331
- class="k-spacer"></span>
332
- <kendo-buttongroup
333
- *ngSwitchCase="'zoomInOut'"
334
- [attr.aria-controls]="pagesContainerId"
335
- class="k-button-group-flat k-toolbar-button-group"
336
- [navigable]="false">
479
+ [navigable]="false"
480
+ class="k-button-group-flat k-toolbar-button-group"
481
+ selection="single">
482
+ <button
483
+ type="button"
484
+ kendoButton
485
+ kendoPDFViewerToolbarFocusable
486
+ fillMode="flat"
487
+ icon="pointer"
488
+ [toggleable]="true"
489
+ [svgIcon]="pointerIcon"
490
+ [attr.title]="messageFor('selectionTitle')"
491
+ [attr.aria-label]="messageFor('selectionTitle')"
492
+ (click)="selectionEnabled.emit(); isSelectionEnabled = true;"></button>
493
+ <button
494
+ type="button"
495
+ kendoButton
496
+ kendoPDFViewerToolbarFocusable
497
+ fillMode="flat"
498
+ icon="hand"
499
+ [svgIcon]="handIcon"
500
+ [toggleable]="true"
501
+ [selected]="true"
502
+ [attr.title]="messageFor('panningTitle')"
503
+ [attr.aria-label]="messageFor('panningTitle')"
504
+ (click)="panningEnabled.emit(); isSelectionEnabled = false;"></button>
505
+ </kendo-buttongroup>
337
506
  <button
507
+ *ngSwitchCase="'search'"
338
508
  type="button"
509
+ kendoPDFViewerToolbarFocusable
339
510
  kendoButton
511
+ class="k-toolbar-button"
340
512
  fillMode="flat"
341
- kendoPDFViewerToolbarFocusable
342
- icon="zoom-out"
343
- [disabled]="disabledTools || zoomOutDisabled"
344
- [svgIcon]="zoomOutIcon"
345
- [attr.title]="messageFor('zoomOutTitle')"
346
- [attr.aria-label]="messageFor('zoomOutTitle')"
347
- (click)="zoomOut.emit()"></button>
513
+ icon="search"
514
+ [disabled]="disabledTools"
515
+ [attr.title]="messageFor('searchTitle')"
516
+ [attr.aria-label]="messageFor('searchTitle')"
517
+ aria-haspopup="dialog"
518
+ [svgIcon]="searchIcon"
519
+ (click)="search.emit()"></button>
348
520
  <button
521
+ *ngSwitchCase="'open'"
349
522
  type="button"
350
- kendoButton
351
523
  fillMode="flat"
352
524
  kendoPDFViewerToolbarFocusable
353
- icon="zoom-in"
354
- [disabled]="disabledTools || zoomInDisabled"
355
- [svgIcon]="zoomInIcon"
356
- [attr.title]="messageFor('zoomInTitle')"
357
- [attr.aria-label]="messageFor('zoomInTitle')"
358
- (click)="zoomIn.emit()"></button>
359
- </kendo-buttongroup>
360
- <kendo-toolbar-input-wrapper
361
- *ngSwitchCase="'zoom'"
362
- kendoPDFViewerToolbarFocusable
363
- [toolbarTool]="combobox">
364
- <kendo-combobox
365
- #combobox
366
- kendoPDFViewerComboBox
367
- class="k-toolbar-combobox"
525
+ kendoButton
526
+ class="k-toolbar-button"
368
527
  fillMode="flat"
528
+ icon="folder-open"
529
+ [svgIcon]="folderOpenIcon"
530
+ [attr.title]="messageFor('openTitle')"
531
+ [attr.aria-label]="messageFor('openTitle')"
369
532
  [attr.aria-controls]="pagesContainerId"
370
- [tabindex]="-1"
371
- [data]="zoomOptionsData"
372
- [disabled]="disabledTools"
373
- [placeholder]="messageFor('zoomInputPlaceholder')"
374
- textField="displayValue"
375
- valueField="id"
376
- [value]="zoomLevelChooserValue"
377
- [allowCustom]="true"
378
- [valueNormalizer]="valueNormalizer"
379
- [clearButton]="false"
380
- (valueChange)="onZoomLevelChooserValueChange($event)">
381
- <ng-template kendoComboBoxItemTemplate let-dataItem>
382
- {{ dataItem.type ? messageFor('f' + dataItem.type.slice(1)) : dataItem.text }}
383
- </ng-template>
384
- </kendo-combobox>
385
- </kendo-toolbar-input-wrapper>
386
- <kendo-buttongroup
387
- *ngSwitchCase="'selection'"
388
- [attr.aria-controls]="pagesContainerId"
389
- [navigable]="false"
390
- class="k-button-group-flat k-toolbar-button-group"
391
- selection="single">
533
+ (click)="fileSelectEl?.nativeElement.click()">
534
+ </button>
392
535
  <button
536
+ *ngSwitchCase="'download'"
393
537
  type="button"
394
- kendoButton
395
- kendoPDFViewerToolbarFocusable
396
538
  fillMode="flat"
397
- icon="pointer"
398
- [toggleable]="true"
399
- [svgIcon]="pointerIcon"
400
- [attr.title]="messageFor('selectionTitle')"
401
- [attr.aria-label]="messageFor('selectionTitle')"
402
- (click)="selectionEnabled.emit()"></button>
539
+ kendoPDFViewerToolbarFocusable
540
+ kendoButton
541
+ class="k-toolbar-button"
542
+ icon="download"
543
+ [svgIcon]="downloadIcon"
544
+ [disabled]="disabledTools"
545
+ [attr.title]="messageFor('downloadTitle')"
546
+ [attr.aria-label]="messageFor('downloadTitle')"
547
+ (click)="download.emit()"></button>
403
548
  <button
549
+ *ngSwitchCase="'print'"
404
550
  type="button"
551
+ fillMode="flat"
552
+ kendoPDFViewerToolbarFocusable
405
553
  kendoButton
554
+ class="k-toolbar-button"
555
+ icon="print"
556
+ [svgIcon]="printIcon"
557
+ [disabled]="disabledTools"
558
+ [attr.title]="messageFor('printTitle')"
559
+ [attr.aria-label]="messageFor('printTitle')"
560
+ (click)="print.emit()"></button>
561
+ <button
562
+ *ngSwitchCase="'annotations'"
563
+ type="button"
564
+ [attr.id]="annotationsToolId"
406
565
  kendoPDFViewerToolbarFocusable
566
+ kendoButton
567
+ class="k-toolbar-button"
407
568
  fillMode="flat"
408
- icon="hand"
409
- [svgIcon]="handIcon"
410
- [toggleable]="true"
411
- [selected]="true"
412
- [attr.title]="messageFor('panningTitle')"
413
- [attr.aria-label]="messageFor('panningTitle')"
414
- (click)="panningEnabled.emit()"></button>
415
- </kendo-buttongroup>
416
- <button
417
- *ngSwitchCase="'search'"
418
- type="button"
419
- kendoPDFViewerToolbarFocusable
420
- kendoButton
421
- class="k-toolbar-button"
422
- fillMode="flat"
423
- icon="search"
424
- [disabled]="disabledTools"
425
- [attr.title]="messageFor('searchTitle')"
426
- [attr.aria-label]="messageFor('searchTitle')"
427
- aria-haspopup="dialog"
428
- [svgIcon]="searchIcon"
429
- (click)="search.emit()"></button>
430
- <button
431
- *ngSwitchCase="'open'"
432
- type="button"
433
- fillMode="flat"
434
- kendoPDFViewerToolbarFocusable
435
- kendoButton
436
- class="k-toolbar-button"
437
- fillMode="flat"
438
- icon="folder-open"
439
- [svgIcon]="folderOpenIcon"
440
- [attr.title]="messageFor('openTitle')"
441
- [attr.aria-label]="messageFor('openTitle')"
442
- [attr.aria-controls]="pagesContainerId"
443
- (click)="fileSelectEl?.nativeElement.click()">
444
- </button>
445
- <button
446
- *ngSwitchCase="'download'"
447
- type="button"
448
- fillMode="flat"
449
- kendoPDFViewerToolbarFocusable
450
- kendoButton
451
- class="k-toolbar-button"
452
- icon="download"
453
- [svgIcon]="downloadIcon"
454
- [disabled]="disabledTools"
455
- [attr.title]="messageFor('downloadTitle')"
456
- [attr.aria-label]="messageFor('downloadTitle')"
457
- (click)="download.emit()"></button>
458
- <button
459
- *ngSwitchCase="'print'"
460
- type="button"
461
- fillMode="flat"
462
- kendoPDFViewerToolbarFocusable
463
- kendoButton
464
- class="k-toolbar-button"
465
- icon="print"
466
- [svgIcon]="printIcon"
467
- [disabled]="disabledTools"
468
- [attr.title]="messageFor('printTitle')"
469
- [attr.aria-label]="messageFor('printTitle')"
470
- (click)="print.emit()"></button>
569
+ icon="track-changes"
570
+ [selected]="isAnnotationsToolbarVisible"
571
+ [disabled]="disabledTools || !isSelectionEnabled"
572
+ [attr.title]="messageFor('annotationsTitle')"
573
+ [attr.aria-label]="messageFor('annotationsTitle')"
574
+ [attr.aria-controls]="wrapperId"
575
+ [attr.aria-expanded]="isAnnotationsToolbarVisible"
576
+ [svgIcon]="trackChangesIcon"
577
+ (click)="toggleAnnotationsToolbar.emit();"></button>
578
+ </ng-container>
471
579
  </ng-container>
472
580
  </ng-container>
581
+ <ng-container *ngIf="type === 'annotations'">
582
+ <button
583
+ type="button"
584
+ kendoPDFViewerToolbarFocusable
585
+ kendoButton
586
+ class="k-toolbar-button"
587
+ fillMode="flat"
588
+ icon="highlight"
589
+ [selected]="isHighlightMode"
590
+ [disabled]="disabledTools"
591
+ [attr.title]="messageFor('highlightAnnotationTitle')"
592
+ [attr.aria-label]="messageFor('highlightAnnotationTitle')"
593
+ aria-haspopup="dialog"
594
+ [svgIcon]="highlightIcon"
595
+ (click)="onHighlightClick()"></button>
596
+ <div class="k-toolbar-separator k-separator"></div>
597
+ <button
598
+ type="button"
599
+ fillMode="flat"
600
+ kendoPDFViewerToolbarFocusable
601
+ kendoButton
602
+ [selected]="isFreeTextMode"
603
+ class="k-toolbar-button"
604
+ fillMode="flat"
605
+ icon="free-text"
606
+ [svgIcon]="freeTextIcon"
607
+ [attr.title]="messageFor('freeTextAnnotationTitle')"
608
+ [attr.aria-label]="messageFor('freeTextAnnotationTitle')"
609
+ [attr.aria-controls]="pagesContainerId"
610
+ (click)="onFreeTextClick()">
611
+ </button>
612
+ <span class="k-spacer"></span>
613
+ <button
614
+ type="button"
615
+ fillMode="flat"
616
+ kendoPDFViewerToolbarFocusable
617
+ kendoButton
618
+ class="k-toolbar-button"
619
+ fillMode="flat"
620
+ icon="x"
621
+ [svgIcon]="xIcon"
622
+ [attr.title]="messageFor('closeAnnotationsToolbarTitle')"
623
+ [attr.aria-label]="messageFor('closeAnnotationsToolbarTitle')"
624
+ [attr.aria-controls]="pagesContainerId"
625
+ (click)="toggleAnnotationsToolbar.emit();">
626
+ </button>
627
+ </ng-container>
473
628
  <input
474
629
  #fileSelectEl
475
- *ngIf="tools?.indexOf('open') > -1;"
630
+ *ngIf="type === 'tools' &&tools?.indexOf('open') > -1;"
476
631
  type="file"
477
632
  [style.display]="'none'"
478
633
  aria-hidden="true"
@@ -518,6 +673,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
518
673
  type: Input
519
674
  }], tools: [{
520
675
  type: Input
676
+ }], type: [{
677
+ type: Input
678
+ }], wrapperId: [{
679
+ type: Input
680
+ }], isAnnotationsToolbarVisible: [{
681
+ type: Input
682
+ }], annotationsToolId: [{
683
+ type: Input
521
684
  }], fileSelect: [{
522
685
  type: Output
523
686
  }], fileSelectStart: [{
@@ -542,4 +705,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
542
705
  type: Output
543
706
  }], search: [{
544
707
  type: Output
708
+ }], toggleAnnotationsToolbar: [{
709
+ type: Output
710
+ }], setAnnotationMode: [{
711
+ type: Output
545
712
  }] } });