@progress/kendo-angular-upload 16.3.0-develop.1 → 16.3.0-develop.11
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/common/base.d.ts +161 -0
- package/common/util.d.ts +1 -1
- package/esm2020/common/base.mjs +247 -0
- package/esm2020/common/util.mjs +1 -1
- package/esm2020/fileselect.component.mjs +36 -204
- package/esm2020/navigation.service.mjs +23 -34
- package/esm2020/package-metadata.mjs +2 -2
- package/esm2020/rendering/file-list-item-action-button.component.mjs +50 -103
- package/esm2020/rendering/file-list-item.mjs +5 -5
- package/esm2020/rendering/file-list.component.mjs +22 -7
- package/esm2020/upload.component.mjs +23 -212
- package/fesm2015/progress-kendo-angular-upload.mjs +406 -576
- package/fesm2020/progress-kendo-angular-upload.mjs +406 -576
- package/fileselect.component.d.ts +17 -114
- package/navigation.service.d.ts +4 -3
- package/package.json +7 -7
- package/rendering/file-list-item-action-button.component.d.ts +0 -5
- package/rendering/file-list.component.d.ts +1 -0
- package/schematics/ngAdd/index.js +3 -3
- package/upload.component.d.ts +13 -120
package/common/base.d.ts
ADDED
|
@@ -0,0 +1,161 @@
|
|
|
1
|
+
/**-----------------------------------------------------------------------------------------
|
|
2
|
+
* Copyright © 2024 Progress Software Corporation. All rights reserved.
|
|
3
|
+
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
+
*-------------------------------------------------------------------------------------------*/
|
|
5
|
+
import { ChangeDetectorRef, ElementRef, EventEmitter, Injector, NgZone } from "@angular/core";
|
|
6
|
+
import { RemoveEvent, SelectEvent } from "../events";
|
|
7
|
+
import { FileTemplateDirective } from "../templates/file-template.directive";
|
|
8
|
+
import { FileInfoTemplateDirective } from "../templates/file-info-template.directive";
|
|
9
|
+
import { FileMap, FileRestrictions } from "../types";
|
|
10
|
+
import { UploadService } from "../upload.service";
|
|
11
|
+
import { FormControl } from "@angular/forms";
|
|
12
|
+
import { NavigationService } from "../navigation.service";
|
|
13
|
+
import * as i0 from "@angular/core";
|
|
14
|
+
/**
|
|
15
|
+
* @hidden
|
|
16
|
+
*/
|
|
17
|
+
export declare abstract class UploadFileSelectBase {
|
|
18
|
+
protected uploadService: UploadService;
|
|
19
|
+
protected navigation: NavigationService;
|
|
20
|
+
protected cdr: ChangeDetectorRef;
|
|
21
|
+
protected injector: Injector;
|
|
22
|
+
protected zone: NgZone;
|
|
23
|
+
/**
|
|
24
|
+
* @hidden
|
|
25
|
+
*/
|
|
26
|
+
fileTemplate: FileTemplateDirective;
|
|
27
|
+
/**
|
|
28
|
+
* @hidden
|
|
29
|
+
*/
|
|
30
|
+
fileInfoTemplate: FileInfoTemplateDirective;
|
|
31
|
+
/**
|
|
32
|
+
* @hidden
|
|
33
|
+
*/
|
|
34
|
+
fileSelectButton: ElementRef;
|
|
35
|
+
/**
|
|
36
|
+
* Sets the `accept` attribute of the internal `input` element of the component.
|
|
37
|
+
*/
|
|
38
|
+
accept: string;
|
|
39
|
+
/**
|
|
40
|
+
* Disables the component.
|
|
41
|
+
*
|
|
42
|
+
* @default false
|
|
43
|
+
*/
|
|
44
|
+
disabled: boolean;
|
|
45
|
+
/**
|
|
46
|
+
* Enables the selection of multiple files
|
|
47
|
+
* If set to `false`, only one file can be selected at a time.
|
|
48
|
+
* @default true
|
|
49
|
+
*/
|
|
50
|
+
multiple: boolean;
|
|
51
|
+
/**
|
|
52
|
+
* Toggles the visibility of the file list.
|
|
53
|
+
* @default true
|
|
54
|
+
*/
|
|
55
|
+
showFileList: boolean;
|
|
56
|
+
/**
|
|
57
|
+
* Specifies the [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
|
|
58
|
+
* @default 0
|
|
59
|
+
*/
|
|
60
|
+
tabindex: number;
|
|
61
|
+
/**
|
|
62
|
+
* Sets the restrictions for selected files.
|
|
63
|
+
*/
|
|
64
|
+
set restrictions(restrictions: FileRestrictions);
|
|
65
|
+
get restrictions(): FileRestrictions;
|
|
66
|
+
/**
|
|
67
|
+
* Specifies the id of the external drop zone to associate with the component.
|
|
68
|
+
*/
|
|
69
|
+
zoneId: string;
|
|
70
|
+
/**
|
|
71
|
+
* @hidden
|
|
72
|
+
*/
|
|
73
|
+
focusableId: string;
|
|
74
|
+
/**
|
|
75
|
+
* @hidden
|
|
76
|
+
*/
|
|
77
|
+
hostDefaultClasses: boolean;
|
|
78
|
+
/**
|
|
79
|
+
* @hidden
|
|
80
|
+
*/
|
|
81
|
+
get hostDisabledClass(): boolean;
|
|
82
|
+
/**
|
|
83
|
+
* Fires when the user navigates outside the component.
|
|
84
|
+
*/
|
|
85
|
+
onBlur: EventEmitter<any>;
|
|
86
|
+
/**
|
|
87
|
+
* Fires when the component is focused.
|
|
88
|
+
*/
|
|
89
|
+
onFocus: EventEmitter<any>;
|
|
90
|
+
/**
|
|
91
|
+
* Fires when files are selected. If prevented, the selected files will not be added to the list.
|
|
92
|
+
*/
|
|
93
|
+
select: EventEmitter<SelectEvent>;
|
|
94
|
+
/**
|
|
95
|
+
* Fires when a file is about to be removed. If prevented, the file will remain in the list.
|
|
96
|
+
*/
|
|
97
|
+
remove: EventEmitter<RemoveEvent>;
|
|
98
|
+
/**
|
|
99
|
+
* @hidden
|
|
100
|
+
*/
|
|
101
|
+
_restrictions: FileRestrictions;
|
|
102
|
+
/**
|
|
103
|
+
* @hidden
|
|
104
|
+
*/
|
|
105
|
+
fileList: FileMap;
|
|
106
|
+
constructor(uploadService: UploadService, navigation: NavigationService, cdr: ChangeDetectorRef, injector: Injector, zone: NgZone);
|
|
107
|
+
/**
|
|
108
|
+
* @hidden
|
|
109
|
+
*/
|
|
110
|
+
get formControl(): FormControl;
|
|
111
|
+
/**
|
|
112
|
+
* @hidden
|
|
113
|
+
*/
|
|
114
|
+
get isControlRequired(): boolean;
|
|
115
|
+
/**
|
|
116
|
+
* @hidden
|
|
117
|
+
*/
|
|
118
|
+
get hasFileList(): boolean;
|
|
119
|
+
/**
|
|
120
|
+
* @hidden
|
|
121
|
+
*/
|
|
122
|
+
writeValue(newValue: any, validation: Function, callback: string): void;
|
|
123
|
+
protected onTouchedCallback: Function;
|
|
124
|
+
protected onChangeCallback: Function;
|
|
125
|
+
/**
|
|
126
|
+
* @hidden
|
|
127
|
+
*/
|
|
128
|
+
registerOnChange(fn: any): void;
|
|
129
|
+
/**
|
|
130
|
+
* @hidden
|
|
131
|
+
*/
|
|
132
|
+
registerOnTouched(fn: any): void;
|
|
133
|
+
/**
|
|
134
|
+
* @hidden
|
|
135
|
+
*/
|
|
136
|
+
setDisabledState(isDisabled: boolean): void;
|
|
137
|
+
/**
|
|
138
|
+
* @hidden
|
|
139
|
+
*/
|
|
140
|
+
onFileSelectButtonFocus(): void;
|
|
141
|
+
/**
|
|
142
|
+
* Focuses the component's `Select files` button.
|
|
143
|
+
*/
|
|
144
|
+
focus(): void;
|
|
145
|
+
/**
|
|
146
|
+
* @hidden
|
|
147
|
+
* @deprecated
|
|
148
|
+
*/
|
|
149
|
+
focusComponent(): void;
|
|
150
|
+
/**
|
|
151
|
+
* Blurs the component if it was previously focused.
|
|
152
|
+
*/
|
|
153
|
+
blur(): void;
|
|
154
|
+
/**
|
|
155
|
+
* @hidden
|
|
156
|
+
* @deprecated
|
|
157
|
+
*/
|
|
158
|
+
blurComponent(): void;
|
|
159
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<UploadFileSelectBase, never>;
|
|
160
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<UploadFileSelectBase, never, never, { "accept": "accept"; "disabled": "disabled"; "multiple": "multiple"; "showFileList": "showFileList"; "tabindex": "tabindex"; "restrictions": "restrictions"; "zoneId": "zoneId"; "focusableId": "focusableId"; }, { "onBlur": "blur"; "onFocus": "focus"; "select": "select"; "remove": "remove"; }, ["fileTemplate", "fileInfoTemplate"], never, false, never>;
|
|
161
|
+
}
|
package/common/util.d.ts
CHANGED
|
@@ -57,7 +57,7 @@ export declare const IGNORE_TARGET_CLASSES = "k-icon k-select k-input k-multisel
|
|
|
57
57
|
/**
|
|
58
58
|
* @hidden
|
|
59
59
|
*/
|
|
60
|
-
export declare const UPLOAD_CLASSES = "k-upload-button k-clear-selected k-upload-selected k-upload-action";
|
|
60
|
+
export declare const UPLOAD_CLASSES = "k-upload-button k-clear-selected k-upload-selected k-upload-action k-file";
|
|
61
61
|
/**
|
|
62
62
|
* @hidden
|
|
63
63
|
*/
|
|
@@ -0,0 +1,247 @@
|
|
|
1
|
+
/**-----------------------------------------------------------------------------------------
|
|
2
|
+
* Copyright © 2024 Progress Software Corporation. All rights reserved.
|
|
3
|
+
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
+
*-------------------------------------------------------------------------------------------*/
|
|
5
|
+
import { ChangeDetectorRef, ContentChild, Directive, ElementRef, EventEmitter, HostBinding, Injector, Input, NgZone, Output, ViewChild } from "@angular/core";
|
|
6
|
+
import { guid, isControlRequired } from "@progress/kendo-angular-common";
|
|
7
|
+
import { FileTemplateDirective } from "../templates/file-template.directive";
|
|
8
|
+
import { FileInfoTemplateDirective } from "../templates/file-info-template.directive";
|
|
9
|
+
import { UploadService } from "../upload.service";
|
|
10
|
+
import { NgControl } from "@angular/forms";
|
|
11
|
+
import { NavigationService } from "../navigation.service";
|
|
12
|
+
import * as i0 from "@angular/core";
|
|
13
|
+
import * as i1 from "../upload.service";
|
|
14
|
+
import * as i2 from "../navigation.service";
|
|
15
|
+
/**
|
|
16
|
+
* @hidden
|
|
17
|
+
*/
|
|
18
|
+
export class UploadFileSelectBase {
|
|
19
|
+
constructor(uploadService, navigation, cdr, injector, zone) {
|
|
20
|
+
this.uploadService = uploadService;
|
|
21
|
+
this.navigation = navigation;
|
|
22
|
+
this.cdr = cdr;
|
|
23
|
+
this.injector = injector;
|
|
24
|
+
this.zone = zone;
|
|
25
|
+
/**
|
|
26
|
+
* Disables the component.
|
|
27
|
+
*
|
|
28
|
+
* @default false
|
|
29
|
+
*/
|
|
30
|
+
this.disabled = false;
|
|
31
|
+
/**
|
|
32
|
+
* Enables the selection of multiple files
|
|
33
|
+
* If set to `false`, only one file can be selected at a time.
|
|
34
|
+
* @default true
|
|
35
|
+
*/
|
|
36
|
+
this.multiple = true;
|
|
37
|
+
/**
|
|
38
|
+
* Toggles the visibility of the file list.
|
|
39
|
+
* @default true
|
|
40
|
+
*/
|
|
41
|
+
this.showFileList = true;
|
|
42
|
+
/**
|
|
43
|
+
* Specifies the [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
|
|
44
|
+
* @default 0
|
|
45
|
+
*/
|
|
46
|
+
this.tabindex = 0;
|
|
47
|
+
/**
|
|
48
|
+
* @hidden
|
|
49
|
+
*/
|
|
50
|
+
this.focusableId = `k-${guid()}`;
|
|
51
|
+
/**
|
|
52
|
+
* @hidden
|
|
53
|
+
*/
|
|
54
|
+
this.hostDefaultClasses = true;
|
|
55
|
+
/**
|
|
56
|
+
* Fires when the user navigates outside the component.
|
|
57
|
+
*/
|
|
58
|
+
this.onBlur = new EventEmitter();
|
|
59
|
+
/**
|
|
60
|
+
* Fires when the component is focused.
|
|
61
|
+
*/
|
|
62
|
+
this.onFocus = new EventEmitter();
|
|
63
|
+
/**
|
|
64
|
+
* Fires when files are selected. If prevented, the selected files will not be added to the list.
|
|
65
|
+
*/
|
|
66
|
+
this.select = new EventEmitter();
|
|
67
|
+
/**
|
|
68
|
+
* Fires when a file is about to be removed. If prevented, the file will remain in the list.
|
|
69
|
+
*/
|
|
70
|
+
this.remove = new EventEmitter();
|
|
71
|
+
/**
|
|
72
|
+
* @hidden
|
|
73
|
+
*/
|
|
74
|
+
this._restrictions = {
|
|
75
|
+
allowedExtensions: [],
|
|
76
|
+
maxFileSize: 0,
|
|
77
|
+
minFileSize: 0
|
|
78
|
+
};
|
|
79
|
+
this.onTouchedCallback = (_) => { };
|
|
80
|
+
this.onChangeCallback = (_) => { };
|
|
81
|
+
this.fileList = this.uploadService.files;
|
|
82
|
+
}
|
|
83
|
+
/**
|
|
84
|
+
* Sets the restrictions for selected files.
|
|
85
|
+
*/
|
|
86
|
+
set restrictions(restrictions) {
|
|
87
|
+
const parsedRestrictions = Object.assign({}, this.restrictions, restrictions);
|
|
88
|
+
this._restrictions = parsedRestrictions;
|
|
89
|
+
}
|
|
90
|
+
get restrictions() {
|
|
91
|
+
return this._restrictions;
|
|
92
|
+
}
|
|
93
|
+
/**
|
|
94
|
+
* @hidden
|
|
95
|
+
*/
|
|
96
|
+
get hostDisabledClass() {
|
|
97
|
+
return this.disabled;
|
|
98
|
+
}
|
|
99
|
+
/**
|
|
100
|
+
* @hidden
|
|
101
|
+
*/
|
|
102
|
+
get formControl() {
|
|
103
|
+
const ngControl = this.injector.get(NgControl, null);
|
|
104
|
+
return ngControl?.control || null;
|
|
105
|
+
}
|
|
106
|
+
/**
|
|
107
|
+
* @hidden
|
|
108
|
+
*/
|
|
109
|
+
get isControlRequired() {
|
|
110
|
+
return isControlRequired(this.formControl);
|
|
111
|
+
}
|
|
112
|
+
/**
|
|
113
|
+
* @hidden
|
|
114
|
+
*/
|
|
115
|
+
get hasFileList() {
|
|
116
|
+
const hasFileList = this.showFileList && this.fileList.count > 0;
|
|
117
|
+
this.navigation.fileListVisible = hasFileList;
|
|
118
|
+
return hasFileList;
|
|
119
|
+
}
|
|
120
|
+
/**
|
|
121
|
+
* @hidden
|
|
122
|
+
*/
|
|
123
|
+
writeValue(newValue, validation, callback) {
|
|
124
|
+
let isValid = true;
|
|
125
|
+
if (newValue instanceof Array) {
|
|
126
|
+
newValue.forEach((file) => {
|
|
127
|
+
if (!validation(file)) {
|
|
128
|
+
isValid = false;
|
|
129
|
+
}
|
|
130
|
+
});
|
|
131
|
+
if (isValid) {
|
|
132
|
+
this.uploadService[callback](newValue);
|
|
133
|
+
}
|
|
134
|
+
}
|
|
135
|
+
if (newValue === null) {
|
|
136
|
+
this.fileList.clear();
|
|
137
|
+
}
|
|
138
|
+
this.cdr.markForCheck();
|
|
139
|
+
}
|
|
140
|
+
/**
|
|
141
|
+
* @hidden
|
|
142
|
+
*/
|
|
143
|
+
registerOnChange(fn) {
|
|
144
|
+
this.onChangeCallback = fn;
|
|
145
|
+
}
|
|
146
|
+
/**
|
|
147
|
+
* @hidden
|
|
148
|
+
*/
|
|
149
|
+
registerOnTouched(fn) {
|
|
150
|
+
this.onTouchedCallback = fn;
|
|
151
|
+
}
|
|
152
|
+
/**
|
|
153
|
+
* @hidden
|
|
154
|
+
*/
|
|
155
|
+
setDisabledState(isDisabled) {
|
|
156
|
+
this.disabled = isDisabled;
|
|
157
|
+
}
|
|
158
|
+
/**
|
|
159
|
+
* @hidden
|
|
160
|
+
*/
|
|
161
|
+
onFileSelectButtonFocus() {
|
|
162
|
+
if (!this.navigation.focused) {
|
|
163
|
+
this.navigation.focusedIndex = -1;
|
|
164
|
+
}
|
|
165
|
+
}
|
|
166
|
+
/**
|
|
167
|
+
* Focuses the component's `Select files` button.
|
|
168
|
+
*/
|
|
169
|
+
focus() {
|
|
170
|
+
this.zone.runOutsideAngular(() => {
|
|
171
|
+
setTimeout(() => {
|
|
172
|
+
this.fileSelectButton.nativeElement.focus();
|
|
173
|
+
this.navigation.focused = true;
|
|
174
|
+
});
|
|
175
|
+
});
|
|
176
|
+
}
|
|
177
|
+
/**
|
|
178
|
+
* @hidden
|
|
179
|
+
* @deprecated
|
|
180
|
+
*/
|
|
181
|
+
focusComponent() {
|
|
182
|
+
this.focus();
|
|
183
|
+
}
|
|
184
|
+
/**
|
|
185
|
+
* Blurs the component if it was previously focused.
|
|
186
|
+
*/
|
|
187
|
+
blur() {
|
|
188
|
+
if (this.navigation.focused) {
|
|
189
|
+
this.navigation.focused = false;
|
|
190
|
+
document.activeElement.blur();
|
|
191
|
+
}
|
|
192
|
+
}
|
|
193
|
+
/**
|
|
194
|
+
* @hidden
|
|
195
|
+
* @deprecated
|
|
196
|
+
*/
|
|
197
|
+
blurComponent() {
|
|
198
|
+
this.blur();
|
|
199
|
+
}
|
|
200
|
+
}
|
|
201
|
+
UploadFileSelectBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UploadFileSelectBase, deps: [{ token: i1.UploadService }, { token: i2.NavigationService }, { token: i0.ChangeDetectorRef }, { token: i0.Injector }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
|
|
202
|
+
UploadFileSelectBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: UploadFileSelectBase, inputs: { accept: "accept", disabled: "disabled", multiple: "multiple", showFileList: "showFileList", tabindex: "tabindex", restrictions: "restrictions", zoneId: "zoneId", focusableId: "focusableId" }, outputs: { onBlur: "blur", onFocus: "focus", select: "select", remove: "remove" }, host: { properties: { "class.k-upload": "this.hostDefaultClasses", "class.k-disabled": "this.hostDisabledClass" } }, queries: [{ propertyName: "fileTemplate", first: true, predicate: FileTemplateDirective, descendants: true }, { propertyName: "fileInfoTemplate", first: true, predicate: FileInfoTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "fileSelectButton", first: true, predicate: ["fileSelectButton"], descendants: true, read: ElementRef, static: true }], ngImport: i0 });
|
|
203
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UploadFileSelectBase, decorators: [{
|
|
204
|
+
type: Directive,
|
|
205
|
+
args: [{}]
|
|
206
|
+
}], ctorParameters: function () { return [{ type: i1.UploadService }, { type: i2.NavigationService }, { type: i0.ChangeDetectorRef }, { type: i0.Injector }, { type: i0.NgZone }]; }, propDecorators: { fileTemplate: [{
|
|
207
|
+
type: ContentChild,
|
|
208
|
+
args: [FileTemplateDirective]
|
|
209
|
+
}], fileInfoTemplate: [{
|
|
210
|
+
type: ContentChild,
|
|
211
|
+
args: [FileInfoTemplateDirective]
|
|
212
|
+
}], fileSelectButton: [{
|
|
213
|
+
type: ViewChild,
|
|
214
|
+
args: ['fileSelectButton', { static: true, read: ElementRef }]
|
|
215
|
+
}], accept: [{
|
|
216
|
+
type: Input
|
|
217
|
+
}], disabled: [{
|
|
218
|
+
type: Input
|
|
219
|
+
}], multiple: [{
|
|
220
|
+
type: Input
|
|
221
|
+
}], showFileList: [{
|
|
222
|
+
type: Input
|
|
223
|
+
}], tabindex: [{
|
|
224
|
+
type: Input
|
|
225
|
+
}], restrictions: [{
|
|
226
|
+
type: Input
|
|
227
|
+
}], zoneId: [{
|
|
228
|
+
type: Input
|
|
229
|
+
}], focusableId: [{
|
|
230
|
+
type: Input
|
|
231
|
+
}], hostDefaultClasses: [{
|
|
232
|
+
type: HostBinding,
|
|
233
|
+
args: ['class.k-upload']
|
|
234
|
+
}], hostDisabledClass: [{
|
|
235
|
+
type: HostBinding,
|
|
236
|
+
args: ['class.k-disabled']
|
|
237
|
+
}], onBlur: [{
|
|
238
|
+
type: Output,
|
|
239
|
+
args: ['blur']
|
|
240
|
+
}], onFocus: [{
|
|
241
|
+
type: Output,
|
|
242
|
+
args: ['focus']
|
|
243
|
+
}], select: [{
|
|
244
|
+
type: Output
|
|
245
|
+
}], remove: [{
|
|
246
|
+
type: Output
|
|
247
|
+
}] } });
|
package/esm2020/common/util.mjs
CHANGED
|
@@ -176,7 +176,7 @@ export const IGNORE_TARGET_CLASSES = 'k-icon k-select k-input k-multiselect-wrap
|
|
|
176
176
|
/**
|
|
177
177
|
* @hidden
|
|
178
178
|
*/
|
|
179
|
-
export const UPLOAD_CLASSES = 'k-upload-button k-clear-selected k-upload-selected k-upload-action';
|
|
179
|
+
export const UPLOAD_CLASSES = 'k-upload-button k-clear-selected k-upload-selected k-upload-action k-file';
|
|
180
180
|
const isVisible = (element) => {
|
|
181
181
|
const rect = element.getBoundingClientRect();
|
|
182
182
|
return !!(rect.width && rect.height) && window.getComputedStyle(element).visibility !== 'hidden';
|