@progress/kendo-angular-pdfviewer 13.0.0-develop.10
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.
- package/LICENSE.md +11 -0
- package/NOTICE.txt +654 -0
- package/README.md +32 -0
- package/esm2020/index.mjs +16 -0
- package/esm2020/loader/loader.component.mjs +53 -0
- package/esm2020/localization/custom-messages.component.mjs +38 -0
- package/esm2020/localization/localized-messages.directive.mjs +37 -0
- package/esm2020/localization/messages.mjs +71 -0
- package/esm2020/models/events.mjs +21 -0
- package/esm2020/models/loader-settings.mjs +5 -0
- package/esm2020/models/pdfviewer-context.mjs +5 -0
- package/esm2020/models/toolbar-tool.mjs +5 -0
- package/esm2020/models/zoom-level.mjs +5 -0
- package/esm2020/package-metadata.mjs +15 -0
- package/esm2020/pdfviewer.component.mjs +801 -0
- package/esm2020/pdfviewer.module.mjs +81 -0
- package/esm2020/progress-kendo-angular-pdfviewer.mjs +8 -0
- package/esm2020/toolbar/input-wrapper.component.mjs +63 -0
- package/esm2020/toolbar/search.component.mjs +171 -0
- package/esm2020/toolbar/toolbar-combobox.directive.mjs +43 -0
- package/esm2020/toolbar/toolbar-focusable.directive.mjs +63 -0
- package/esm2020/toolbar/toolbar-navigation.service.mjs +52 -0
- package/esm2020/toolbar/toolbar.component.mjs +460 -0
- package/esm2020/util.mjs +72 -0
- package/fesm2015/progress-kendo-angular-pdfviewer.mjs +1943 -0
- package/fesm2020/progress-kendo-angular-pdfviewer.mjs +1938 -0
- package/index.d.ts +16 -0
- package/loader/loader.component.d.ts +17 -0
- package/localization/custom-messages.component.d.ts +18 -0
- package/localization/localized-messages.directive.d.ts +16 -0
- package/localization/messages.d.ts +113 -0
- package/models/events.d.ts +81 -0
- package/models/loader-settings.d.ts +48 -0
- package/models/pdfviewer-context.d.ts +27 -0
- package/models/toolbar-tool.d.ts +8 -0
- package/models/zoom-level.d.ts +14 -0
- package/package-metadata.d.ts +9 -0
- package/package.json +65 -0
- package/pdfviewer.component.d.ts +228 -0
- package/pdfviewer.module.d.ts +30 -0
- package/progress-kendo-angular-pdfviewer.d.ts +9 -0
- package/schematics/collection.json +12 -0
- package/schematics/ngAdd/index.js +8 -0
- package/schematics/ngAdd/schema.json +24 -0
- package/toolbar/input-wrapper.component.d.ts +21 -0
- package/toolbar/search.component.d.ts +39 -0
- package/toolbar/toolbar-combobox.directive.d.ts +21 -0
- package/toolbar/toolbar-focusable.directive.d.ts +21 -0
- package/toolbar/toolbar-navigation.service.d.ts +23 -0
- package/toolbar/toolbar.component.d.ts +65 -0
- package/util.d.ts +32 -0
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
/**-----------------------------------------------------------------------------------------
|
|
2
|
+
* Copyright © 2023 Progress Software Corporation. All rights reserved.
|
|
3
|
+
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
+
*-------------------------------------------------------------------------------------------*/
|
|
5
|
+
import { NgModule } from '@angular/core';
|
|
6
|
+
import { CommonModule } from '@angular/common';
|
|
7
|
+
import { PDFViewerComponent } from './pdfviewer.component';
|
|
8
|
+
import { PagerModule } from '@progress/kendo-angular-pager';
|
|
9
|
+
import { ButtonsModule } from '@progress/kendo-angular-buttons';
|
|
10
|
+
import { ToolbarComponent } from './toolbar/toolbar.component';
|
|
11
|
+
import { IconsModule } from '@progress/kendo-angular-icons';
|
|
12
|
+
import { ComboBoxModule } from '@progress/kendo-angular-dropdowns';
|
|
13
|
+
import { LoaderModule } from '@progress/kendo-angular-indicators';
|
|
14
|
+
import { LoaderComponent } from './loader/loader.component';
|
|
15
|
+
import { PDFViewerCustomMessagesComponent } from './localization/custom-messages.component';
|
|
16
|
+
import { LocalizedPDFViewerMessagesDirective } from './localization/localized-messages.directive';
|
|
17
|
+
import { ToolbarInputWrapperComponent } from './toolbar/input-wrapper.component';
|
|
18
|
+
import { ToolbarFocusableDirective } from './toolbar/toolbar-focusable.directive';
|
|
19
|
+
import { ToolbarComboBoxDirective } from './toolbar/toolbar-combobox.directive';
|
|
20
|
+
import { PDFViewerSearchComponent } from './toolbar/search.component';
|
|
21
|
+
import { TextBoxModule } from '@progress/kendo-angular-inputs';
|
|
22
|
+
import * as i0 from "@angular/core";
|
|
23
|
+
const DIRECTIVES = [
|
|
24
|
+
PDFViewerComponent,
|
|
25
|
+
ToolbarComponent,
|
|
26
|
+
LoaderComponent,
|
|
27
|
+
PDFViewerCustomMessagesComponent,
|
|
28
|
+
LocalizedPDFViewerMessagesDirective,
|
|
29
|
+
ToolbarInputWrapperComponent,
|
|
30
|
+
ToolbarFocusableDirective,
|
|
31
|
+
ToolbarComboBoxDirective,
|
|
32
|
+
PDFViewerSearchComponent
|
|
33
|
+
];
|
|
34
|
+
const IMPORTS = [
|
|
35
|
+
CommonModule,
|
|
36
|
+
IconsModule,
|
|
37
|
+
PagerModule,
|
|
38
|
+
ButtonsModule,
|
|
39
|
+
TextBoxModule,
|
|
40
|
+
ComboBoxModule,
|
|
41
|
+
LoaderModule
|
|
42
|
+
];
|
|
43
|
+
/**
|
|
44
|
+
* Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
|
|
45
|
+
* definition for the PDFViewer component.
|
|
46
|
+
*/
|
|
47
|
+
export class PDFViewerModule {
|
|
48
|
+
}
|
|
49
|
+
PDFViewerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PDFViewerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
50
|
+
PDFViewerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PDFViewerModule, declarations: [PDFViewerComponent,
|
|
51
|
+
ToolbarComponent,
|
|
52
|
+
LoaderComponent,
|
|
53
|
+
PDFViewerCustomMessagesComponent,
|
|
54
|
+
LocalizedPDFViewerMessagesDirective,
|
|
55
|
+
ToolbarInputWrapperComponent,
|
|
56
|
+
ToolbarFocusableDirective,
|
|
57
|
+
ToolbarComboBoxDirective,
|
|
58
|
+
PDFViewerSearchComponent], imports: [CommonModule,
|
|
59
|
+
IconsModule,
|
|
60
|
+
PagerModule,
|
|
61
|
+
ButtonsModule,
|
|
62
|
+
TextBoxModule,
|
|
63
|
+
ComboBoxModule,
|
|
64
|
+
LoaderModule], exports: [PDFViewerComponent,
|
|
65
|
+
ToolbarComponent,
|
|
66
|
+
LoaderComponent,
|
|
67
|
+
PDFViewerCustomMessagesComponent,
|
|
68
|
+
LocalizedPDFViewerMessagesDirective,
|
|
69
|
+
ToolbarInputWrapperComponent,
|
|
70
|
+
ToolbarFocusableDirective,
|
|
71
|
+
ToolbarComboBoxDirective,
|
|
72
|
+
PDFViewerSearchComponent] });
|
|
73
|
+
PDFViewerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PDFViewerModule, imports: [IMPORTS] });
|
|
74
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PDFViewerModule, decorators: [{
|
|
75
|
+
type: NgModule,
|
|
76
|
+
args: [{
|
|
77
|
+
declarations: DIRECTIVES,
|
|
78
|
+
exports: DIRECTIVES,
|
|
79
|
+
imports: IMPORTS,
|
|
80
|
+
}]
|
|
81
|
+
}] });
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
/**-----------------------------------------------------------------------------------------
|
|
2
|
+
* Copyright © 2023 Progress Software Corporation. All rights reserved.
|
|
3
|
+
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
+
*-------------------------------------------------------------------------------------------*/
|
|
5
|
+
/**
|
|
6
|
+
* Generated bundle index. Do not edit.
|
|
7
|
+
*/
|
|
8
|
+
export * from './index';
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
/**-----------------------------------------------------------------------------------------
|
|
2
|
+
* Copyright © 2023 Progress Software Corporation. All rights reserved.
|
|
3
|
+
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
+
*-------------------------------------------------------------------------------------------*/
|
|
5
|
+
import { Component, ElementRef, HostBinding, Input, Renderer2 } from '@angular/core';
|
|
6
|
+
import { focusableSelector } from '@progress/kendo-angular-common';
|
|
7
|
+
import { Subscription } from 'rxjs';
|
|
8
|
+
import * as i0 from "@angular/core";
|
|
9
|
+
/**
|
|
10
|
+
* @hidden
|
|
11
|
+
*/
|
|
12
|
+
export class ToolbarInputWrapperComponent {
|
|
13
|
+
constructor(host, renderer) {
|
|
14
|
+
this.host = host;
|
|
15
|
+
this.renderer = renderer;
|
|
16
|
+
this.hostClass = true;
|
|
17
|
+
this.subs = new Subscription();
|
|
18
|
+
}
|
|
19
|
+
ngAfterViewInit() {
|
|
20
|
+
this.subs.add(this.renderer.listen(this.host.nativeElement, 'keydown.enter', () => {
|
|
21
|
+
if (this.toolbarTool.focus) {
|
|
22
|
+
this.toolbarTool.focus();
|
|
23
|
+
}
|
|
24
|
+
else if (this.toolbarTool.element) {
|
|
25
|
+
this.toolbarTool.element.nativeElement.setAttribute('tabindex', '0');
|
|
26
|
+
this.toolbarTool.element.nativeElement.focus();
|
|
27
|
+
}
|
|
28
|
+
}));
|
|
29
|
+
this.subs.add(this.renderer.listen(this.host.nativeElement, 'blur', () => this.host.nativeElement.querySelectorAll(focusableSelector).forEach(el => el.setAttribute('tabindex', '-1'))));
|
|
30
|
+
this.subs.add(this.renderer.listen(this.host.nativeElement, 'keydown.escape', () => {
|
|
31
|
+
if (this.toolbarTool.blur) {
|
|
32
|
+
this.toolbarTool.blur();
|
|
33
|
+
}
|
|
34
|
+
else if (this.toolbarTool.element) {
|
|
35
|
+
this.toolbarTool.element.nativeElement.setAttribute('tabindex', '-1');
|
|
36
|
+
this.toolbarTool.element.nativeElement.blur();
|
|
37
|
+
}
|
|
38
|
+
;
|
|
39
|
+
this.host.nativeElement.focus();
|
|
40
|
+
}));
|
|
41
|
+
}
|
|
42
|
+
ngOnDestroy() {
|
|
43
|
+
this.subs.unsubscribe();
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
ToolbarInputWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ToolbarInputWrapperComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
|
|
47
|
+
ToolbarInputWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ToolbarInputWrapperComponent, selector: "kendo-toolbar-input-wrapper", inputs: { toolbarTool: "toolbarTool" }, host: { properties: { "class.k-toolbar-item": "this.hostClass" } }, ngImport: i0, template: `
|
|
48
|
+
<ng-content></ng-content>
|
|
49
|
+
`, isInline: true });
|
|
50
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ToolbarInputWrapperComponent, decorators: [{
|
|
51
|
+
type: Component,
|
|
52
|
+
args: [{
|
|
53
|
+
selector: 'kendo-toolbar-input-wrapper',
|
|
54
|
+
template: `
|
|
55
|
+
<ng-content></ng-content>
|
|
56
|
+
`
|
|
57
|
+
}]
|
|
58
|
+
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { toolbarTool: [{
|
|
59
|
+
type: Input
|
|
60
|
+
}], hostClass: [{
|
|
61
|
+
type: HostBinding,
|
|
62
|
+
args: ['class.k-toolbar-item']
|
|
63
|
+
}] } });
|
|
@@ -0,0 +1,171 @@
|
|
|
1
|
+
/**-----------------------------------------------------------------------------------------
|
|
2
|
+
* Copyright © 2023 Progress Software Corporation. All rights reserved.
|
|
3
|
+
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
+
*-------------------------------------------------------------------------------------------*/
|
|
5
|
+
import { Component, ElementRef, EventEmitter, HostBinding, HostListener, Input, Output, ViewChild } from '@angular/core';
|
|
6
|
+
import { TextBoxComponent } from '@progress/kendo-angular-inputs';
|
|
7
|
+
import { LocalizationService } from '@progress/kendo-angular-l10n';
|
|
8
|
+
import { arrowDownIcon, arrowUpIcon, convertLowercaseIcon, xIcon } from '@progress/kendo-svg-icons';
|
|
9
|
+
import * as i0 from "@angular/core";
|
|
10
|
+
import * as i1 from "@progress/kendo-angular-l10n";
|
|
11
|
+
import * as i2 from "@progress/kendo-angular-inputs";
|
|
12
|
+
import * as i3 from "@progress/kendo-angular-buttons";
|
|
13
|
+
/**
|
|
14
|
+
* @hidden
|
|
15
|
+
*/
|
|
16
|
+
export class PDFViewerSearchComponent {
|
|
17
|
+
constructor(localization) {
|
|
18
|
+
this.localization = localization;
|
|
19
|
+
this.ariaRole = 'dialog';
|
|
20
|
+
this.searchChange = new EventEmitter();
|
|
21
|
+
this.prevMatch = new EventEmitter();
|
|
22
|
+
this.nextMatch = new EventEmitter();
|
|
23
|
+
this.close = new EventEmitter();
|
|
24
|
+
this.convertLowercaseIcon = convertLowercaseIcon;
|
|
25
|
+
this.arrowUpIcon = arrowUpIcon;
|
|
26
|
+
this.arrowDownIcon = arrowDownIcon;
|
|
27
|
+
this.xIcon = xIcon;
|
|
28
|
+
this.value = null;
|
|
29
|
+
this.matchCase = false;
|
|
30
|
+
}
|
|
31
|
+
onEscape() {
|
|
32
|
+
this.close.emit();
|
|
33
|
+
}
|
|
34
|
+
ngAfterViewInit() {
|
|
35
|
+
this.textbox.focus();
|
|
36
|
+
}
|
|
37
|
+
messageFor(key) {
|
|
38
|
+
return this.localization.get(key);
|
|
39
|
+
}
|
|
40
|
+
onShiftTab(e) {
|
|
41
|
+
if (e.target.matches('.k-input-inner')) {
|
|
42
|
+
e.preventDefault();
|
|
43
|
+
this.closeButton.nativeElement.focus();
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
PDFViewerSearchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PDFViewerSearchComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
|
|
48
|
+
PDFViewerSearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: PDFViewerSearchComponent, selector: "[kendoPDFViewerSearch]", inputs: { matches: "matches", currentMatch: "currentMatch" }, outputs: { searchChange: "searchChange", prevMatch: "prevMatch", nextMatch: "nextMatch", close: "close" }, host: { listeners: { "keydown.escape": "onEscape()" }, properties: { "attr.role": "this.ariaRole" } }, viewQueries: [{ propertyName: "textbox", first: true, predicate: ["textbox"], descendants: true }, { propertyName: "closeButton", first: true, predicate: ["closeButton"], descendants: true, read: ElementRef }], ngImport: i0, template: `
|
|
49
|
+
<kendo-textbox
|
|
50
|
+
#textbox
|
|
51
|
+
[placeholder]="messageFor('searchInputPlaceholder')"
|
|
52
|
+
[value]="value"
|
|
53
|
+
(valueChange)="value = $event; searchChange.emit({text: $event, matchCase})"
|
|
54
|
+
(keydown.shift.tab)="onShiftTab($event)">
|
|
55
|
+
<ng-template kendoTextBoxSuffixTemplate>
|
|
56
|
+
<button
|
|
57
|
+
kendoButton
|
|
58
|
+
[attr.title]="messageFor('searchMatchCaseTitle')"
|
|
59
|
+
fillMode="flat"
|
|
60
|
+
[togglable]="true"
|
|
61
|
+
(click)="matchCase = !matchCase; searchChange.emit({text: value, matchCase})"
|
|
62
|
+
icon="convert-lowercase"
|
|
63
|
+
[svgIcon]="convertLowercaseIcon"></button>
|
|
64
|
+
</ng-template>
|
|
65
|
+
</kendo-textbox>
|
|
66
|
+
<span class="k-search-matches">
|
|
67
|
+
<span>{{currentMatch}}</span> {{messageFor('searchMatchesOf')}} <span>{{matches}}</span>
|
|
68
|
+
</span>
|
|
69
|
+
<button
|
|
70
|
+
kendoButton
|
|
71
|
+
[attr.title]="messageFor('searchPreviousMatchTitle')"
|
|
72
|
+
fillMode="flat"
|
|
73
|
+
[disabled]="matches === 0"
|
|
74
|
+
(click)="prevMatch.emit()"
|
|
75
|
+
icon='arrow-up'
|
|
76
|
+
[svgIcon]="arrowUpIcon"></button>
|
|
77
|
+
<button
|
|
78
|
+
kendoButton
|
|
79
|
+
[attr.title]="messageFor('searchNextMatchTitle')"
|
|
80
|
+
fillMode="flat"
|
|
81
|
+
[disabled]="matches === 0"
|
|
82
|
+
(click)="nextMatch.emit()"
|
|
83
|
+
icon='arrow-down'
|
|
84
|
+
[svgIcon]="arrowDownIcon"></button>
|
|
85
|
+
<button
|
|
86
|
+
#closeButton
|
|
87
|
+
kendoButton
|
|
88
|
+
[attr.title]="messageFor('searchCloseTitle')"
|
|
89
|
+
fillMode="flat"
|
|
90
|
+
(click)="close.emit()"
|
|
91
|
+
(keydown.tab)="$event.preventDefault(); textbox.focus();"
|
|
92
|
+
icon='x'
|
|
93
|
+
[svgIcon]="xIcon"></button>
|
|
94
|
+
`, isInline: true, components: [{ type: i2.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "errorIcon", "clearButtonIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { type: i3.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: i2.TextBoxSuffixTemplateDirective, selector: "[kendoTextBoxSuffixTemplate]" }] });
|
|
95
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PDFViewerSearchComponent, decorators: [{
|
|
96
|
+
type: Component,
|
|
97
|
+
args: [{
|
|
98
|
+
selector: '[kendoPDFViewerSearch]',
|
|
99
|
+
template: `
|
|
100
|
+
<kendo-textbox
|
|
101
|
+
#textbox
|
|
102
|
+
[placeholder]="messageFor('searchInputPlaceholder')"
|
|
103
|
+
[value]="value"
|
|
104
|
+
(valueChange)="value = $event; searchChange.emit({text: $event, matchCase})"
|
|
105
|
+
(keydown.shift.tab)="onShiftTab($event)">
|
|
106
|
+
<ng-template kendoTextBoxSuffixTemplate>
|
|
107
|
+
<button
|
|
108
|
+
kendoButton
|
|
109
|
+
[attr.title]="messageFor('searchMatchCaseTitle')"
|
|
110
|
+
fillMode="flat"
|
|
111
|
+
[togglable]="true"
|
|
112
|
+
(click)="matchCase = !matchCase; searchChange.emit({text: value, matchCase})"
|
|
113
|
+
icon="convert-lowercase"
|
|
114
|
+
[svgIcon]="convertLowercaseIcon"></button>
|
|
115
|
+
</ng-template>
|
|
116
|
+
</kendo-textbox>
|
|
117
|
+
<span class="k-search-matches">
|
|
118
|
+
<span>{{currentMatch}}</span> {{messageFor('searchMatchesOf')}} <span>{{matches}}</span>
|
|
119
|
+
</span>
|
|
120
|
+
<button
|
|
121
|
+
kendoButton
|
|
122
|
+
[attr.title]="messageFor('searchPreviousMatchTitle')"
|
|
123
|
+
fillMode="flat"
|
|
124
|
+
[disabled]="matches === 0"
|
|
125
|
+
(click)="prevMatch.emit()"
|
|
126
|
+
icon='arrow-up'
|
|
127
|
+
[svgIcon]="arrowUpIcon"></button>
|
|
128
|
+
<button
|
|
129
|
+
kendoButton
|
|
130
|
+
[attr.title]="messageFor('searchNextMatchTitle')"
|
|
131
|
+
fillMode="flat"
|
|
132
|
+
[disabled]="matches === 0"
|
|
133
|
+
(click)="nextMatch.emit()"
|
|
134
|
+
icon='arrow-down'
|
|
135
|
+
[svgIcon]="arrowDownIcon"></button>
|
|
136
|
+
<button
|
|
137
|
+
#closeButton
|
|
138
|
+
kendoButton
|
|
139
|
+
[attr.title]="messageFor('searchCloseTitle')"
|
|
140
|
+
fillMode="flat"
|
|
141
|
+
(click)="close.emit()"
|
|
142
|
+
(keydown.tab)="$event.preventDefault(); textbox.focus();"
|
|
143
|
+
icon='x'
|
|
144
|
+
[svgIcon]="xIcon"></button>
|
|
145
|
+
`
|
|
146
|
+
}]
|
|
147
|
+
}], ctorParameters: function () { return [{ type: i1.LocalizationService }]; }, propDecorators: { textbox: [{
|
|
148
|
+
type: ViewChild,
|
|
149
|
+
args: ['textbox']
|
|
150
|
+
}], closeButton: [{
|
|
151
|
+
type: ViewChild,
|
|
152
|
+
args: ['closeButton', { read: ElementRef }]
|
|
153
|
+
}], ariaRole: [{
|
|
154
|
+
type: HostBinding,
|
|
155
|
+
args: ['attr.role']
|
|
156
|
+
}], onEscape: [{
|
|
157
|
+
type: HostListener,
|
|
158
|
+
args: ['keydown.escape']
|
|
159
|
+
}], matches: [{
|
|
160
|
+
type: Input
|
|
161
|
+
}], currentMatch: [{
|
|
162
|
+
type: Input
|
|
163
|
+
}], searchChange: [{
|
|
164
|
+
type: Output
|
|
165
|
+
}], prevMatch: [{
|
|
166
|
+
type: Output
|
|
167
|
+
}], nextMatch: [{
|
|
168
|
+
type: Output
|
|
169
|
+
}], close: [{
|
|
170
|
+
type: Output
|
|
171
|
+
}] } });
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
/**-----------------------------------------------------------------------------------------
|
|
2
|
+
* Copyright © 2023 Progress Software Corporation. All rights reserved.
|
|
3
|
+
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
+
*-------------------------------------------------------------------------------------------*/
|
|
5
|
+
import { ComboBoxComponent } from '@progress/kendo-angular-dropdowns';
|
|
6
|
+
import { Directive, ElementRef } from '@angular/core';
|
|
7
|
+
import { Keys } from '@progress/kendo-angular-common';
|
|
8
|
+
import * as i0 from "@angular/core";
|
|
9
|
+
import * as i1 from "@progress/kendo-angular-dropdowns";
|
|
10
|
+
/**
|
|
11
|
+
* @hidden
|
|
12
|
+
*/
|
|
13
|
+
export class ToolbarComboBoxDirective {
|
|
14
|
+
constructor(combo, hostEl) {
|
|
15
|
+
this.combo = combo;
|
|
16
|
+
this.hostEl = hostEl;
|
|
17
|
+
this.keydownHandler = (e) => {
|
|
18
|
+
if (e.keyCode === Keys.Escape) {
|
|
19
|
+
e.stopPropagation();
|
|
20
|
+
if (this.combo.isOpen) {
|
|
21
|
+
this.combo.toggle(false);
|
|
22
|
+
}
|
|
23
|
+
else {
|
|
24
|
+
this.hostEl.nativeElement.parentElement.focus();
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
};
|
|
28
|
+
}
|
|
29
|
+
ngAfterViewInit() {
|
|
30
|
+
this.inputElement = this.combo.searchbar.input.nativeElement;
|
|
31
|
+
this.hostEl.nativeElement.setAttribute('tabindex', '-1');
|
|
32
|
+
this.inputElement.addEventListener('keydown', this.keydownHandler, true);
|
|
33
|
+
}
|
|
34
|
+
ngOnDestroy() {
|
|
35
|
+
this.inputElement.removeEventListener('keydown', this.keydownHandler);
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
ToolbarComboBoxDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ToolbarComboBoxDirective, deps: [{ token: i1.ComboBoxComponent }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
39
|
+
ToolbarComboBoxDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: ToolbarComboBoxDirective, selector: "[kendoPDFViewerComboBox]", ngImport: i0 });
|
|
40
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ToolbarComboBoxDirective, decorators: [{
|
|
41
|
+
type: Directive,
|
|
42
|
+
args: [{ selector: '[kendoPDFViewerComboBox]' }]
|
|
43
|
+
}], ctorParameters: function () { return [{ type: i1.ComboBoxComponent }, { type: i0.ElementRef }]; } });
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
/**-----------------------------------------------------------------------------------------
|
|
2
|
+
* Copyright © 2023 Progress Software Corporation. All rights reserved.
|
|
3
|
+
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
+
*-------------------------------------------------------------------------------------------*/
|
|
5
|
+
import { Directive, ElementRef, Renderer2 } from '@angular/core';
|
|
6
|
+
import { ToolbarNavigationService } from './toolbar-navigation.service';
|
|
7
|
+
import { Keys, focusableSelector } from '@progress/kendo-angular-common';
|
|
8
|
+
import * as i0 from "@angular/core";
|
|
9
|
+
import * as i1 from "./toolbar-navigation.service";
|
|
10
|
+
const controller = new AbortController();
|
|
11
|
+
const { signal } = controller;
|
|
12
|
+
/**
|
|
13
|
+
* @hidden
|
|
14
|
+
*/
|
|
15
|
+
export class ToolbarFocusableDirective {
|
|
16
|
+
constructor(host, navigationService, renderer) {
|
|
17
|
+
this.host = host;
|
|
18
|
+
this.navigationService = navigationService;
|
|
19
|
+
this.renderer = renderer;
|
|
20
|
+
navigationService.register(this);
|
|
21
|
+
}
|
|
22
|
+
ngAfterViewInit() {
|
|
23
|
+
const element = this.host.nativeElement;
|
|
24
|
+
this.renderer.setAttribute(element, 'tabindex', this.navigationService.isActive(this) ? '0' : '-1');
|
|
25
|
+
element.addEventListener('keydown', (e) => {
|
|
26
|
+
const targetsSelf = e.target === element;
|
|
27
|
+
const isLeftArrow = e.keyCode === Keys.ArrowLeft;
|
|
28
|
+
const isRightArrow = e.keyCode === Keys.ArrowRight;
|
|
29
|
+
const isArrow = isLeftArrow || isRightArrow;
|
|
30
|
+
if (!targetsSelf || !isArrow) {
|
|
31
|
+
return;
|
|
32
|
+
}
|
|
33
|
+
this.renderer.setAttribute(element, 'tabindex', '-1');
|
|
34
|
+
element.querySelectorAll(focusableSelector).forEach(el => {
|
|
35
|
+
this.renderer.setAttribute(el, 'tabindex', '-1');
|
|
36
|
+
});
|
|
37
|
+
if (isRightArrow) {
|
|
38
|
+
this.navigationService.move('right');
|
|
39
|
+
}
|
|
40
|
+
else if (isLeftArrow) {
|
|
41
|
+
this.navigationService.move('left');
|
|
42
|
+
}
|
|
43
|
+
}, { signal, capture: true });
|
|
44
|
+
element.addEventListener('click', () => {
|
|
45
|
+
this.navigationService.setActiveIndex(this);
|
|
46
|
+
}, { signal, capture: true });
|
|
47
|
+
}
|
|
48
|
+
ngOnDestroy() {
|
|
49
|
+
controller.abort();
|
|
50
|
+
this.navigationService.unregister(this);
|
|
51
|
+
}
|
|
52
|
+
activate() {
|
|
53
|
+
const element = this.host.nativeElement;
|
|
54
|
+
this.renderer.setAttribute(element, 'tabindex', '0');
|
|
55
|
+
element.focus();
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
ToolbarFocusableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ToolbarFocusableDirective, deps: [{ token: i0.ElementRef }, { token: i1.ToolbarNavigationService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
|
|
59
|
+
ToolbarFocusableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: ToolbarFocusableDirective, selector: "[kendoPDFViewerToolbarFocusable]", ngImport: i0 });
|
|
60
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ToolbarFocusableDirective, decorators: [{
|
|
61
|
+
type: Directive,
|
|
62
|
+
args: [{ selector: '[kendoPDFViewerToolbarFocusable]' }]
|
|
63
|
+
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.ToolbarNavigationService }, { type: i0.Renderer2 }]; } });
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
/**-----------------------------------------------------------------------------------------
|
|
2
|
+
* Copyright © 2023 Progress Software Corporation. All rights reserved.
|
|
3
|
+
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
+
*-------------------------------------------------------------------------------------------*/
|
|
5
|
+
import { Injectable } from '@angular/core';
|
|
6
|
+
import { LocalizationService } from '@progress/kendo-angular-l10n';
|
|
7
|
+
import * as i0 from "@angular/core";
|
|
8
|
+
import * as i1 from "@progress/kendo-angular-l10n";
|
|
9
|
+
/**
|
|
10
|
+
* @hidden
|
|
11
|
+
*/
|
|
12
|
+
export class ToolbarNavigationService {
|
|
13
|
+
constructor(localizationService) {
|
|
14
|
+
this.localizationService = localizationService;
|
|
15
|
+
this.focusableTools = [];
|
|
16
|
+
this.currentFocusIndex = 0;
|
|
17
|
+
}
|
|
18
|
+
register(tool) {
|
|
19
|
+
if (!this.focusableTools.some(el => el === tool)) {
|
|
20
|
+
this.focusableTools.push(tool);
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
unregister(tool) {
|
|
24
|
+
this.currentFocusIndex = 0;
|
|
25
|
+
this.focusableTools = this.focusableTools.filter(el => el !== tool);
|
|
26
|
+
}
|
|
27
|
+
isActive(focusable) {
|
|
28
|
+
return this.focusableTools[this.currentFocusIndex] === focusable;
|
|
29
|
+
}
|
|
30
|
+
setActiveIndex(tool) {
|
|
31
|
+
this.currentFocusIndex = Math.max(this.focusableTools.indexOf(tool), 0);
|
|
32
|
+
}
|
|
33
|
+
move(direction) {
|
|
34
|
+
let delta = direction === 'right' ? 1 : -1;
|
|
35
|
+
if (this.localizationService.rtl) {
|
|
36
|
+
delta = -delta;
|
|
37
|
+
}
|
|
38
|
+
this.currentFocusIndex += delta;
|
|
39
|
+
if (this.currentFocusIndex < 0) {
|
|
40
|
+
this.currentFocusIndex = this.focusableTools.length - 1;
|
|
41
|
+
}
|
|
42
|
+
else if (this.currentFocusIndex >= this.focusableTools.length) {
|
|
43
|
+
this.currentFocusIndex = 0;
|
|
44
|
+
}
|
|
45
|
+
this.focusableTools[this.currentFocusIndex].activate();
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
ToolbarNavigationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ToolbarNavigationService, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
49
|
+
ToolbarNavigationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ToolbarNavigationService });
|
|
50
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ToolbarNavigationService, decorators: [{
|
|
51
|
+
type: Injectable
|
|
52
|
+
}], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
|