@progress/kendo-angular-upload 16.3.0-develop.2 → 16.3.0-develop.4

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 (20) hide show
  1. package/common/base.d.ts +161 -0
  2. package/common/util.d.ts +1 -1
  3. package/esm2020/common/base.mjs +247 -0
  4. package/esm2020/common/util.mjs +1 -1
  5. package/esm2020/fileselect.component.mjs +36 -204
  6. package/esm2020/navigation.service.mjs +23 -34
  7. package/esm2020/package-metadata.mjs +2 -2
  8. package/esm2020/rendering/file-list-item-action-button.component.mjs +50 -103
  9. package/esm2020/rendering/file-list-item.mjs +5 -5
  10. package/esm2020/rendering/file-list.component.mjs +21 -6
  11. package/esm2020/upload.component.mjs +23 -212
  12. package/fesm2015/progress-kendo-angular-upload.mjs +405 -575
  13. package/fesm2020/progress-kendo-angular-upload.mjs +405 -575
  14. package/fileselect.component.d.ts +17 -114
  15. package/navigation.service.d.ts +4 -3
  16. package/package.json +7 -7
  17. package/rendering/file-list-item-action-button.component.d.ts +0 -5
  18. package/rendering/file-list.component.d.ts +1 -0
  19. package/schematics/ngAdd/index.js +3 -3
  20. package/upload.component.d.ts +13 -120
package/esm2020/rendering/file-list-item-action-button.component.mjs CHANGED
@@ -13,7 +13,7 @@ import * as i1 from "../upload.service";
13
13
  import * as i2 from "@progress/kendo-angular-l10n";
14
14
  import * as i3 from "./../navigation.service";
15
15
  import * as i4 from "@angular/common";
16
- import * as i5 from "@progress/kendo-angular-icons";
16
+ import * as i5 from "@progress/kendo-angular-buttons";
17
17
  /**
18
18
  * @hidden
19
19
  */
@@ -22,37 +22,12 @@ export class FileListItemActionButtonComponent {
22
22
  this.uploadService = uploadService;
23
23
  this.localization = localization;
24
24
  this.navigation = navigation;
25
- this.actionFocused = false;
26
- this.retryFocused = false;
27
- this.pauseResumeFocused = false;
28
25
  this.retrySVGIcon = arrowRotateCwSmallIcon;
29
26
  this.playSVGIcon = playSmIcon;
30
27
  this.pauseSVGIcon = pauseSmIcon;
31
28
  this.cancelSVGIcon = cancelIcon;
32
29
  this.deleteSVGIcon = xIcon;
33
30
  }
34
- onFocus(type) {
35
- if (type === 'action') {
36
- this.actionFocused = true;
37
- }
38
- if (type === 'retry') {
39
- this.retryFocused = true;
40
- }
41
- if (type === 'pauseResume') {
42
- this.pauseResumeFocused = true;
43
- }
44
- }
45
- onBlur(type) {
46
- if (type === 'retry') {
47
- this.retryFocused = false;
48
- }
49
- if (type === 'action') {
50
- this.actionFocused = false;
51
- }
52
- if (type === 'pauseResume') {
53
- this.pauseResumeFocused = false;
54
- }
55
- }
56
31
  onRetryClick() {
57
32
  if (this.disabled) {
58
33
  return;
@@ -130,64 +105,50 @@ FileListItemActionButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion
130
105
 
131
106
  <button
132
107
  *ngIf="isFailed"
108
+ kendoButton
133
109
  type="button"
134
- class="k-button k-icon-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-upload-action"
135
- [ngClass]="{ 'k-focus': this.retryFocused }"
110
+ class="k-upload-action k-retry"
111
+ fillMode="flat"
136
112
  [attr.tabIndex]="-1"
137
113
  [attr.aria-hidden]="true"
138
- (focus)="onFocus('retry')"
139
- (blur)="onBlur('retry')"
114
+ [attr.title]="retryButtonTitle"
115
+ [svgIcon]="retrySVGIcon"
116
+ icon="refresh-sm"
117
+ (pointerdown)="$event.preventDefault()"
140
118
  (click)="onRetryClick()"
141
- >
142
- <kendo-icon-wrapper
143
- name="refresh-sm"
144
- [svgIcon]="retrySVGIcon"
145
- innerCssClass="k-retry"
146
- [attr.aria-label]="retryButtonTitle"
147
- [attr.title]="retryButtonTitle"
148
- ></kendo-icon-wrapper>
149
- </button>
119
+ ></button>
150
120
 
151
121
  <button
152
122
  *ngIf="isResumable"
123
+ kendoButton
153
124
  type="button"
154
- class="k-button k-icon-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-upload-action"
155
- [ngClass]="{ 'k-focus': this.pauseResumeFocused }"
125
+ class="k-upload-action"
126
+ fillMode="flat"
156
127
  [attr.tabIndex]="-1"
157
128
  [attr.aria-hidden]="true"
158
- (focus)="onFocus('pauseResume')"
159
- (blur)="onBlur('pauseResume')"
129
+ [attr.title]="pauseResumeButtonTitle"
130
+ [svgIcon]="isPaused ? playSVGIcon : pauseSVGIcon"
131
+ [icon]="isPaused ? 'play-sm' : 'pause-sm'"
132
+ (pointerdown)="$event.preventDefault()"
160
133
  (click)="onPauseResumeClick()"
161
- >
162
- <kendo-icon-wrapper
163
- [name]="isPaused ? 'play-sm' : 'pause-sm'"
164
- [svgIcon]="isPaused ? playSVGIcon : pauseSVGIcon"
165
- [attr.aria-label]='pauseResumeButtonTitle'
166
- [attr.title]='pauseResumeButtonTitle'
167
- ></kendo-icon-wrapper>
168
- </button>
134
+ ></button>
169
135
 
170
136
  <button
171
137
  *ngIf="isActionButtonVisible"
172
- class="k-button k-icon-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-upload-action"
138
+ kendoButton
139
+ class="k-upload-action"
140
+ [class.k-delete]="!isUploading"
141
+ fillMode="flat"
173
142
  type="button"
174
143
  [attr.tabIndex]="-1"
175
144
  [attr.aria-hidden]="true"
176
- (focus)="onFocus('action')"
177
- (blur)="onBlur('action')"
178
- [ngClass]="{ 'k-focus': this.actionFocused }"
145
+ [attr.title]="actionButtonTitle"
146
+ [svgIcon]="isUploading ? cancelSVGIcon : deleteSVGIcon"
147
+ [icon]="isUploading ? 'cancel' : 'x'"
179
148
  (click)="onRemoveCancelClick($event)"
180
- >
181
- <kendo-icon-wrapper
182
- [name]="isUploading ? 'cancel' : 'x'"
183
- [svgIcon]="isUploading ? cancelSVGIcon : deleteSVGIcon"
184
- [innerCssClass]="!isUploading ? 'k-delete' : ''"
185
- [attr.aria-label]='actionButtonTitle'
186
- [attr.title]='actionButtonTitle'
187
- ></kendo-icon-wrapper>
188
- </button>
149
+ ></button>
189
150
  </span>
190
- `, isInline: true, dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
151
+ `, isInline: true, dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
191
152
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FileListItemActionButtonComponent, decorators: [{
192
153
  type: Component,
193
154
  args: [{
@@ -198,62 +159,48 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
198
159
 
199
160
  <button
200
161
  *ngIf="isFailed"
162
+ kendoButton
201
163
  type="button"
202
- class="k-button k-icon-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-upload-action"
203
- [ngClass]="{ 'k-focus': this.retryFocused }"
164
+ class="k-upload-action k-retry"
165
+ fillMode="flat"
204
166
  [attr.tabIndex]="-1"
205
167
  [attr.aria-hidden]="true"
206
- (focus)="onFocus('retry')"
207
- (blur)="onBlur('retry')"
168
+ [attr.title]="retryButtonTitle"
169
+ [svgIcon]="retrySVGIcon"
170
+ icon="refresh-sm"
171
+ (pointerdown)="$event.preventDefault()"
208
172
  (click)="onRetryClick()"
209
- >
210
- <kendo-icon-wrapper
211
- name="refresh-sm"
212
- [svgIcon]="retrySVGIcon"
213
- innerCssClass="k-retry"
214
- [attr.aria-label]="retryButtonTitle"
215
- [attr.title]="retryButtonTitle"
216
- ></kendo-icon-wrapper>
217
- </button>
173
+ ></button>
218
174
 
219
175
  <button
220
176
  *ngIf="isResumable"
177
+ kendoButton
221
178
  type="button"
222
- class="k-button k-icon-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-upload-action"
223
- [ngClass]="{ 'k-focus': this.pauseResumeFocused }"
179
+ class="k-upload-action"
180
+ fillMode="flat"
224
181
  [attr.tabIndex]="-1"
225
182
  [attr.aria-hidden]="true"
226
- (focus)="onFocus('pauseResume')"
227
- (blur)="onBlur('pauseResume')"
183
+ [attr.title]="pauseResumeButtonTitle"
184
+ [svgIcon]="isPaused ? playSVGIcon : pauseSVGIcon"
185
+ [icon]="isPaused ? 'play-sm' : 'pause-sm'"
186
+ (pointerdown)="$event.preventDefault()"
228
187
  (click)="onPauseResumeClick()"
229
- >
230
- <kendo-icon-wrapper
231
- [name]="isPaused ? 'play-sm' : 'pause-sm'"
232
- [svgIcon]="isPaused ? playSVGIcon : pauseSVGIcon"
233
- [attr.aria-label]='pauseResumeButtonTitle'
234
- [attr.title]='pauseResumeButtonTitle'
235
- ></kendo-icon-wrapper>
236
- </button>
188
+ ></button>
237
189
 
238
190
  <button
239
191
  *ngIf="isActionButtonVisible"
240
- class="k-button k-icon-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-upload-action"
192
+ kendoButton
193
+ class="k-upload-action"
194
+ [class.k-delete]="!isUploading"
195
+ fillMode="flat"
241
196
  type="button"
242
197
  [attr.tabIndex]="-1"
243
198
  [attr.aria-hidden]="true"
244
- (focus)="onFocus('action')"
245
- (blur)="onBlur('action')"
246
- [ngClass]="{ 'k-focus': this.actionFocused }"
199
+ [attr.title]="actionButtonTitle"
200
+ [svgIcon]="isUploading ? cancelSVGIcon : deleteSVGIcon"
201
+ [icon]="isUploading ? 'cancel' : 'x'"
247
202
  (click)="onRemoveCancelClick($event)"
248
- >
249
- <kendo-icon-wrapper
250
- [name]="isUploading ? 'cancel' : 'x'"
251
- [svgIcon]="isUploading ? cancelSVGIcon : deleteSVGIcon"
252
- [innerCssClass]="!isUploading ? 'k-delete' : ''"
253
- [attr.aria-label]='actionButtonTitle'
254
- [attr.title]='actionButtonTitle'
255
- ></kendo-icon-wrapper>
256
- </button>
203
+ ></button>
257
204
  </span>
258
205
  `
259
206
  }]
package/esm2020/rendering/file-list-item.mjs CHANGED
@@ -28,7 +28,7 @@ export class FileListItemDirective {
28
28
  return this.files[0].uid;
29
29
  }
30
30
  get tabIndex() {
31
- return "-1";
31
+ return this.navigationService.focusedFileIndex === this.index ? '0' : '-1';
32
32
  }
33
33
  get kFileError() {
34
34
  return this.files[0].state === FileState.Failed;
@@ -57,8 +57,8 @@ export class FileListItemDirective {
57
57
  this.focused = false;
58
58
  }
59
59
  onClick(event) {
60
- if (!isFocusable(event.target) && !hasClasses(event.target, IGNORE_TARGET_CLASSES)) {
61
- this.navigationService.focusedIndex = this.index;
60
+ if ((!isFocusable(event.target) && !hasClasses(event.target, IGNORE_TARGET_CLASSES)) || !!event.target.closest('.k-upload-action')) {
61
+ this.navigationService.focusedIndex = this.navigationService.focusedFileIndex = this.index;
62
62
  }
63
63
  }
64
64
  }
@@ -99,10 +99,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
99
99
  args: ['class.k-focus']
100
100
  }], onFocus: [{
101
101
  type: HostListener,
102
- args: ["focus"]
102
+ args: ['focus']
103
103
  }], onBlur: [{
104
104
  type: HostListener,
105
- args: ["blur"]
105
+ args: ['blur']
106
106
  }], onClick: [{
107
107
  type: HostListener,
108
108
  args: ['click', ['$event']]
package/esm2020/rendering/file-list.component.mjs CHANGED
@@ -3,7 +3,7 @@
3
3
  * Licensed under commercial license. See LICENSE.md in the project root for more information
4
4
  *-------------------------------------------------------------------------------------------*/
5
5
  /* eslint-disable @angular-eslint/component-selector */
6
- import { Input, Component, ViewChildren, QueryList } from '@angular/core';
6
+ import { Input, Component, ViewChildren, QueryList, HostBinding } from '@angular/core';
7
7
  import { Keys } from '@progress/kendo-angular-common';
8
8
  import { FileState } from '../types';
9
9
  import { FileTemplateDirective } from '../templates/file-template.directive';
@@ -25,6 +25,7 @@ export class FileListComponent {
25
25
  constructor(uploadService, navigation) {
26
26
  this.uploadService = uploadService;
27
27
  this.navigation = navigation;
28
+ this.fileListRole = 'list';
28
29
  this.onItemFocus();
29
30
  this.onItemAction();
30
31
  }
@@ -40,7 +41,9 @@ export class FileListComponent {
40
41
  }
41
42
  itemActionHandler(key) {
42
43
  const index = this.navigation.focusedIndex;
43
- const item = this.fileListItems.toArray()[index];
44
+ const filesArray = this.fileListItems.toArray();
45
+ const numberOfFiles = filesArray.length;
46
+ const item = filesArray[index];
44
47
  const uid = item.uidAttribute;
45
48
  const files = this.uploadService.files.get(uid);
46
49
  if (key === Keys.Escape && files[0].state === FileState.Uploading) {
@@ -59,7 +62,16 @@ export class FileListComponent {
59
62
  else if (this.hasDelete(item)) {
60
63
  this.uploadService.removeFiles(uid);
61
64
  }
62
- this.navigation.focusSelectButton();
65
+ if (index < numberOfFiles - 1) {
66
+ filesArray[index + 1].focus();
67
+ }
68
+ else if (numberOfFiles === 1) {
69
+ this.navigation.focusSelectButton();
70
+ }
71
+ else if (index === numberOfFiles - 1) {
72
+ this.navigation.focusedIndex = this.navigation.focusedFileIndex = index - 1;
73
+ filesArray[index - 1].focus();
74
+ }
63
75
  }
64
76
  const isUploadChunk = this.uploadService.async.chunk;
65
77
  const canTogglePauseResume = key === Keys.Space && files[0].state !== FileState.Uploaded;
@@ -81,12 +93,12 @@ export class FileListComponent {
81
93
  }
82
94
  }
83
95
  FileListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FileListComponent, deps: [{ token: i1.UploadService }, { token: i2.NavigationService }], target: i0.ɵɵFactoryTarget.Component });
84
- FileListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: FileListComponent, selector: "[kendo-upload-file-list]", inputs: { disabled: "disabled", fileList: "fileList", fileTemplate: "fileTemplate", fileInfoTemplate: "fileInfoTemplate" }, viewQueries: [{ propertyName: "fileListItems", predicate: FileListItemDirective, descendants: true }], ngImport: i0, template: `
96
+ FileListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: FileListComponent, selector: "[kendo-upload-file-list]", inputs: { disabled: "disabled", fileList: "fileList", fileTemplate: "fileTemplate", fileInfoTemplate: "fileInfoTemplate" }, host: { properties: { "attr.role": "this.fileListRole" } }, viewQueries: [{ propertyName: "fileListItems", predicate: FileListItemDirective, descendants: true }], ngImport: i0, template: `
85
97
  <ng-template ngFor
86
98
  [ngForOf]="fileList"
87
99
  let-files
88
100
  let-index="index">
89
- <li kendoUploadFileListItem [files]='files' [index]='index'>
101
+ <li kendoUploadFileListItem [files]='files' [index]='index' role="listitem">
90
102
  <kendo-upload-file-list-single-item
91
103
  class='k-file-single'
92
104
  *ngIf='files.length === 1 && !fileTemplate'
@@ -117,7 +129,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
117
129
  [ngForOf]="fileList"
118
130
  let-files
119
131
  let-index="index">
120
- <li kendoUploadFileListItem [files]='files' [index]='index'>
132
+ <li kendoUploadFileListItem [files]='files' [index]='index' role="listitem">
121
133
  <kendo-upload-file-list-single-item
122
134
  class='k-file-single'
123
135
  *ngIf='files.length === 1 && !fileTemplate'
@@ -151,4 +163,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
151
163
  }], fileListItems: [{
152
164
  type: ViewChildren,
153
165
  args: [FileListItemDirective]
166
+ }], fileListRole: [{
167
+ type: HostBinding,
168
+ args: ['attr.role']
154
169
  }] } });