@progress/kendo-angular-upload 17.0.0-develop.4 → 17.0.0-develop.40

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 (84) hide show
  1. package/README.md +36 -15
  2. package/common/action-buttons-layout.d.ts +1 -1
  3. package/common/base.d.ts +1 -1
  4. package/dropzone-external.directive.d.ts +1 -1
  5. package/dropzone-internal.directive.d.ts +1 -1
  6. package/dropzone.component.d.ts +1 -1
  7. package/{esm2020 → esm2022}/common/base.mjs +96 -67
  8. package/{esm2020 → esm2022}/dropzone-base.mjs +13 -9
  9. package/{esm2020 → esm2022}/dropzone-external.directive.mjs +16 -5
  10. package/{esm2020 → esm2022}/dropzone-internal.directive.mjs +14 -6
  11. package/{esm2020 → esm2022}/dropzone.component.mjs +38 -19
  12. package/{esm2020 → esm2022}/dropzone.service.mjs +3 -3
  13. package/{esm2020 → esm2022}/events/cancel-event.mjs +4 -0
  14. package/{esm2020 → esm2022}/events/error-event.mjs +12 -0
  15. package/{esm2020 → esm2022}/events/pause-event.mjs +4 -0
  16. package/{esm2020 → esm2022}/events/preventable-event.mjs +1 -3
  17. package/{esm2020 → esm2022}/events/remove-event.mjs +12 -0
  18. package/{esm2020 → esm2022}/events/resume-event.mjs +4 -0
  19. package/{esm2020 → esm2022}/events/select-event.mjs +4 -0
  20. package/{esm2020 → esm2022}/events/success-event.mjs +12 -0
  21. package/{esm2020 → esm2022}/events/upload-event.mjs +35 -0
  22. package/{esm2020 → esm2022}/events/upload-progress-event.mjs +8 -0
  23. package/{esm2020 → esm2022}/file-select.directive.mjs +17 -8
  24. package/{esm2020 → esm2022}/fileselect.component.mjs +61 -43
  25. package/{esm2020 → esm2022}/fileselect.module.mjs +8 -8
  26. package/{esm2020 → esm2022}/localization/custom-messages.component.mjs +12 -11
  27. package/{esm2020 → esm2022}/localization/localized-messages.directive.mjs +9 -8
  28. package/esm2022/localization/messages.mjs +143 -0
  29. package/{esm2020 → esm2022}/navigation.service.mjs +17 -14
  30. package/{esm2020 → esm2022}/package-metadata.mjs +2 -2
  31. package/{esm2020 → esm2022}/rendering/file-list-item-action-button.component.mjs +16 -10
  32. package/{esm2020 → esm2022}/rendering/file-list-item-base.mjs +7 -4
  33. package/{esm2020 → esm2022}/rendering/file-list-item.mjs +10 -5
  34. package/{esm2020 → esm2022}/rendering/file-list-multiple-items.component.mjs +18 -13
  35. package/{esm2020 → esm2022}/rendering/file-list-single-item.component.mjs +16 -12
  36. package/{esm2020 → esm2022}/rendering/file-list.component.mjs +14 -5
  37. package/{esm2020 → esm2022}/rendering/upload-action-buttons.component.mjs +17 -10
  38. package/{esm2020 → esm2022}/rendering/upload-status-total.component.mjs +14 -8
  39. package/{esm2020 → esm2022}/templates/file-info-template.directive.mjs +4 -3
  40. package/{esm2020 → esm2022}/templates/file-template.directive.mjs +4 -3
  41. package/{esm2020 → esm2022}/types/chunk-map.mjs +1 -0
  42. package/{esm2020 → esm2022}/types/file-map.mjs +1 -0
  43. package/{esm2020 → esm2022}/upload.component.mjs +114 -96
  44. package/{esm2020 → esm2022}/upload.module.mjs +8 -8
  45. package/{esm2020 → esm2022}/upload.service.mjs +50 -49
  46. package/{esm2020 → esm2022}/uploads.module.mjs +8 -8
  47. package/{fesm2020 → fesm2022}/progress-kendo-angular-upload.mjs +791 -443
  48. package/file-select.directive.d.ts +1 -1
  49. package/fileselect.component.d.ts +1 -1
  50. package/localization/messages.d.ts +1 -1
  51. package/package.json +16 -22
  52. package/rendering/file-list-item-action-button.component.d.ts +1 -1
  53. package/rendering/file-list-item.d.ts +1 -1
  54. package/rendering/file-list-multiple-items.component.d.ts +1 -1
  55. package/rendering/file-list-single-item.component.d.ts +1 -1
  56. package/rendering/file-list.component.d.ts +1 -1
  57. package/rendering/upload-action-buttons.component.d.ts +1 -1
  58. package/rendering/upload-status-total.component.d.ts +1 -1
  59. package/schematics/ngAdd/index.js +3 -3
  60. package/types/direction.d.ts +1 -1
  61. package/types/operation-type.d.ts +1 -1
  62. package/upload.component.d.ts +1 -1
  63. package/upload.service.d.ts +1 -1
  64. package/esm2020/localization/messages.mjs +0 -59
  65. package/fesm2015/progress-kendo-angular-upload.mjs +0 -4808
  66. /package/{esm2020 → esm2022}/common/action-buttons-layout.mjs +0 -0
  67. /package/{esm2020 → esm2022}/common/util.mjs +0 -0
  68. /package/{esm2020 → esm2022}/common/validation-util.mjs +0 -0
  69. /package/{esm2020 → esm2022}/directives.mjs +0 -0
  70. /package/{esm2020 → esm2022}/events/clear-event.mjs +0 -0
  71. /package/{esm2020 → esm2022}/events.mjs +0 -0
  72. /package/{esm2020 → esm2022}/index.mjs +0 -0
  73. /package/{esm2020 → esm2022}/progress-kendo-angular-upload.mjs +0 -0
  74. /package/{esm2020 → esm2022}/types/async-settings.mjs +0 -0
  75. /package/{esm2020 → esm2022}/types/chunk-info.mjs +0 -0
  76. /package/{esm2020 → esm2022}/types/chunk-metadata.mjs +0 -0
  77. /package/{esm2020 → esm2022}/types/chunk-settings.mjs +0 -0
  78. /package/{esm2020 → esm2022}/types/direction.mjs +0 -0
  79. /package/{esm2020 → esm2022}/types/file-groups.mjs +0 -0
  80. /package/{esm2020 → esm2022}/types/file-info.mjs +0 -0
  81. /package/{esm2020 → esm2022}/types/file-restrictions.mjs +0 -0
  82. /package/{esm2020 → esm2022}/types/file-state.mjs +0 -0
  83. /package/{esm2020 → esm2022}/types/operation-type.mjs +0 -0
  84. /package/{esm2020 → esm2022}/types.mjs +0 -0
package/README.md CHANGED
@@ -4,30 +4,51 @@
4
4
 
5
5
  ## Kendo UI for Angular Uploads Package (Upload and FileSelect Components)
6
6
 
7
- > **Important**
8
- > * This package is part of [Kendo UI for Angular](https://www.telerik.com/kendo-angular-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-upload)—a commercial library.
9
- > * You will need to install a license key when adding the package to your project. For more information, please refer to the [Kendo UI for Angular My License page](https://www.telerik.com/kendo-angular-ui/my-license?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-upload).
10
- > * To receive a license key, you need to either [purchase a license](https://www.telerik.com/purchase/kendo-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-upload) or register for a [free trial](https://www.telerik.com/download-login-v2-kendo-angular-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-upload). Doing so indicates that you [accept the Kendo UI for Angular License Agreement](https://www.telerik.com/purchase/license-agreement/kendo-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-upload).
7
+ > * This package is part of [Kendo UI for Angular](https://www.telerik.com/kendo-angular-ui)—a commercial library designed and built for developing business applications with Angular. Every UI component in the Kendo UI for Angular suite has been built from the ground-up specifically for Angular.
8
+ > * You must [install a license key](https://www.telerik.com/kendo-angular-ui/my-license) when adding the package to your project. To receive a license key, either [purchase a license](https://www.telerik.com/purchase/kendo-ui) or register for a [free trial](https://www.telerik.com/download-login-v2-kendo-angular-ui).
11
9
  > * The 30-day free trial gives you access to all the Kendo UI for Angular components and their full functionality. Additionally, for the period of your license, you get access to our legendary technical support provided directly by the Kendo UI for Angular dev team!
12
10
  >
13
- > [Start using Kendo UI for Angular](https://www.telerik.com/download-login-v2-kendo-angular-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-upload) and speed up your development process!
11
+ > [Start using Kendo UI for Angular](https://www.telerik.com/download-login-v2-kendo-angular-ui) and speed up your development process!
14
12
 
15
- Kendo UI for Angular is a commercial UI library designed and built for developing business applications with Angular. Every UI component in the Kendo UI for Angular suite has been built from the ground-up specifically for Angular.
13
+ The [Kendo UI for Angular Uploads](https://www.telerik.com/kendo-angular-ui/components/uploads/) package contains two components that help users select files from their file systems and send them to dedicated server handlers configured to receive them.
14
+
15
+ ## What's Included in the Angular Uploads Package
16
+
17
+ * [Angular Upload Component](https://www.telerik.com/kendo-angular-ui/components/uploads/upload/)—Enables users to upload files from their local systems to dedicated server handlers which are configured to receive them. It offers several features, including batch and chunk upload modes, dragging and dropping files from the file system, etc.
18
+ * [Angular FileSelect Component](https://www.telerik.com/kendo-angular-ui/components/uploads/fileselect/)&mdash;The FileSelect builds on the functionality of Upload component to offer you more control over the selected user files, when and how to upload them. It is a richer version of an `<input type='file'>` element and supports model binding, templates, forms, and more.
19
+
20
+ ## Key Features
21
+
22
+ Among the many features which the Kendo UI for Angular Uploads deliver are:
23
+
24
+ * [Disabled Uploads](https://www.telerik.com/kendo-angular-ui/components/uploads/fileselect/disabled-state)&mdash;You can choose to render the Uploads in their disabled state so that, if need be present, users will not be able to interact with them.
25
+ * [External Dropzone](https://www.telerik.com/kendo-angular-ui/components/uploads/fileselect/external-dropzone)&mdash;You can enable users to drag and drop files from their file systems to a dedicated user interface by using the drag-and-drop tool or by creating custom elements with a drag-and-drop functionality.
26
+ * [Forms Support](https://www.telerik.com/kendo-angular-ui/components/uploads/upload/forms)&mdash;The Uploads provide support both for the asynchronous template-driven Angular forms and the predominantly synchronous reactive Angular forms.
27
+ * [Model Binding](https://www.telerik.com/kendo-angular-ui/components/uploads/fileselect/model-binding)&mdash;You can bind the value of the Uploads to the model in order to render an initial set of files.
28
+ * [Restrictions](https://www.telerik.com/kendo-angular-ui/components/uploads/upload/restrictions)&mdash;The Uploads support restricting the selected files by defining rules about the accepted minimum and maximum file size, file types and extensions.
29
+ * [Templates](https://www.telerik.com/kendo-angular-ui/components/uploads/upload/templates)&mdash;You can customize the way the Uploads display their file lists by utilizing the available file templates.
30
+ * [Globalization](https://www.telerik.com/kendo-angular-ui/components/uploads/globalization/)&mdash;The Uploads support globalization to ensure that each component can fit well in any application, no matter what languages and locales need to be supported. Additionally, the Uploads support rendering in a right-to-left (RTL) direction.
31
+ * [Accessibility](https://www.telerik.com/kendo-angular-ui/components/uploads/upload/accessibility/)&mdash;The Uploads are accessible for screen readers and support WAI-ARIA attributes.
32
+ * [Keyboard Navigation](https://www.telerik.com/kendo-angular-ui/components/uploads/fileselect/keyboard-navigation)&mdash;The Uploads support a number of keyboard shortcuts which allow users to accomplish various commands.
33
+
34
+ ## Support Options
35
+
36
+ For any issues you might encounter while working with the Kendo UI for Angular Uploads, you have the following support channels available:
37
+
38
+ * Industry-leading technical support&mdash;Kendo UI for Angular paid license holders and users with an active (free) trial license can take advantage of our outstanding customer support. To submit a ticket, use the [dedicated Kendo UI for Angular support system](https://www.telerik.com/account/support-tickets).
39
+ * Product forums&mdash;The [Kendo UI for Angular forums](https://www.telerik.com/forums/kendo-angular-ui) are part of the free support you can get from the community and from the Kendo UI for Angular team.
40
+ * Feedback portal&mdash;The [Kendo UI for Angular feedback portal](https://feedback.telerik.com/kendo-angular-ui) is where you can request and vote for new features to be added.
16
41
 
17
42
  ## Resources
18
43
 
19
- * [Get Started with Kendo UI for Angular (requires trial registration)](https://www.telerik.com/kendo-angular-ui/getting-started)
44
+ * [Getting Started with Kendo UI for Angular](https://www.telerik.com/kendo-angular-ui/getting-started)
45
+ * [Getting Started with the Kendo UI for Angular Uploads](https://www.telerik.com/kendo-angular-ui/components/uploads/installation/getting-started)
46
+ * [Uploads Overview page](https://www.telerik.com/kendo-angular-ui/components/uploads) and [Uploads API reference](https://www.telerik.com/kendo-angular-ui/components/uploads/api)
47
+ * [Kendo UI for Angular roadmap](https://www.telerik.com/kendo-angular-ui/roadmap)
48
+ * [Kendo UI for Angular Blog](https://www.telerik.com/blogs/tag/kendo-ui-for-angular)
20
49
  * [Demos, documentation, and component reference](https://www.telerik.com/kendo-angular-ui/components)
21
- * [Blogs](http://www.telerik.com/blogs/kendo-ui)
22
50
  * [Kendo UI for Angular pricing and licensing](https://www.telerik.com/purchase/kendo-ui)
23
51
 
24
- ## Questions and Feedback
25
-
26
- * [Official Forums](https://www.telerik.com/forums/kendo-angular-ui)
27
- * [GitHub Issues](https://github.com/telerik/kendo-angular/issues)
28
- * [Feedback Portal](https://feedback.telerik.com/kendo-angular-ui)
29
- * [StackOverflow](https://stackoverflow.com/questions/tagged/kendo-ui-angular2)
30
-
31
52
  *Copyright © 2024 Progress Software Corporation and/or one of its subsidiaries or affiliates. All rights reserved.*
32
53
 
33
54
  *Progress, Telerik, and certain product names used herein are trademarks or registered trademarks of Progress Software Corporation and/or one of its subsidiaries or affiliates in the U.S. and/or other countries.*
@@ -5,4 +5,4 @@
5
5
  /**
6
6
  * Specifies the layout of the Upload action buttons.
7
7
  */
8
- export declare type ActionsLayout = 'start' | 'center' | 'end' | 'stretched';
8
+ export type ActionsLayout = 'start' | 'center' | 'end' | 'stretched';
package/common/base.d.ts CHANGED
@@ -157,5 +157,5 @@ export declare abstract class UploadFileSelectBase {
157
157
  */
158
158
  blurComponent(): void;
159
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>;
160
+ static ɵdir: i0.ɵɵDirectiveDeclaration<UploadFileSelectBase, never, never, { "accept": { "alias": "accept"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "showFileList": { "alias": "showFileList"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "restrictions": { "alias": "restrictions"; "required": false; }; "zoneId": { "alias": "zoneId"; "required": false; }; "focusableId": { "alias": "focusableId"; "required": false; }; }, { "onBlur": "blur"; "onFocus": "focus"; "select": "select"; "remove": "remove"; }, ["fileTemplate", "fileInfoTemplate"], never, false, never>;
161
161
  }
@@ -36,5 +36,5 @@ export declare class UploadDropZoneDirective {
36
36
  */
37
37
  get componentInstance(): Array<UploadComponent | FileSelectComponent>;
38
38
  static ɵfac: i0.ɵɵFactoryDeclaration<UploadDropZoneDirective, never>;
39
- static ɵdir: i0.ɵɵDirectiveDeclaration<UploadDropZoneDirective, "[kendoUploadDropZone], [kendoFileSelectDropZone]", never, { "zoneId": "kendoUploadDropZone"; "fileSelectZoneId": "kendoFileSelectDropZone"; }, {}, never, never, true, never>;
39
+ static ɵdir: i0.ɵɵDirectiveDeclaration<UploadDropZoneDirective, "[kendoUploadDropZone], [kendoFileSelectDropZone]", never, { "zoneId": { "alias": "kendoUploadDropZone"; "required": false; }; "fileSelectZoneId": { "alias": "kendoFileSelectDropZone"; "required": false; }; }, {}, never, never, true, never>;
40
40
  }
@@ -31,5 +31,5 @@ export declare class DropZoneInternalDirective extends DropZoneBase {
31
31
  onDocumentDragOver(): boolean;
32
32
  onDropListener(event: any): boolean;
33
33
  static ɵfac: i0.ɵɵFactoryDeclaration<DropZoneInternalDirective, never>;
34
- static ɵdir: i0.ɵɵDirectiveDeclaration<DropZoneInternalDirective, " [kendoUploadInternalDropZone], [kendoFileSelectInternalDropZone] ", never, { "disabled": "disabled"; "multiple": "multiple"; "restrictions": "restrictions"; }, {}, never, never, true, never>;
34
+ static ɵdir: i0.ɵɵDirectiveDeclaration<DropZoneInternalDirective, " [kendoUploadInternalDropZone], [kendoFileSelectInternalDropZone] ", never, { "disabled": { "alias": "disabled"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "restrictions": { "alias": "restrictions"; "required": false; }; }, {}, never, never, true, never>;
35
35
  }
@@ -50,5 +50,5 @@ export declare class UploadDropZoneComponent extends DropZoneBase {
50
50
  get iconClasses(): string;
51
51
  ngOnDestroy(): void;
52
52
  static ɵfac: i0.ɵɵFactoryDeclaration<UploadDropZoneComponent, never>;
53
- static ɵcmp: i0.ɵɵComponentDeclaration<UploadDropZoneComponent, "kendo-uploaddropzone", ["kendoUploadDropZone"], { "zoneId": "zoneId"; "icon": "icon"; "iconClass": "iconClass"; "svgIcon": "svgIcon"; }, {}, never, ["*"], true, never>;
53
+ static ɵcmp: i0.ɵɵComponentDeclaration<UploadDropZoneComponent, "kendo-uploaddropzone", ["kendoUploadDropZone"], { "zoneId": { "alias": "zoneId"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "iconClass": { "alias": "iconClass"; "required": false; }; "svgIcon": { "alias": "svgIcon"; "required": false; }; }, {}, never, ["*"], true, never>;
54
54
  }
@@ -16,70 +16,49 @@ import * as i2 from "../navigation.service";
16
16
  * @hidden
17
17
  */
18
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
- }
19
+ uploadService;
20
+ navigation;
21
+ cdr;
22
+ injector;
23
+ zone;
24
+ /**
25
+ * @hidden
26
+ */
27
+ fileTemplate;
28
+ /**
29
+ * @hidden
30
+ */
31
+ fileInfoTemplate;
32
+ /**
33
+ * @hidden
34
+ */
35
+ fileSelectButton;
36
+ /**
37
+ * Sets the `accept` attribute of the internal `input` element of the component.
38
+ */
39
+ accept;
40
+ /**
41
+ * Disables the component.
42
+ *
43
+ * @default false
44
+ */
45
+ disabled = false;
46
+ /**
47
+ * Enables the selection of multiple files
48
+ * If set to `false`, only one file can be selected at a time.
49
+ * @default true
50
+ */
51
+ multiple = true;
52
+ /**
53
+ * Toggles the visibility of the file list.
54
+ * @default true
55
+ */
56
+ showFileList = true;
57
+ /**
58
+ * Specifies the [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
59
+ * @default 0
60
+ */
61
+ tabindex = 0;
83
62
  /**
84
63
  * Sets the restrictions for selected files.
85
64
  */
@@ -90,12 +69,60 @@ export class UploadFileSelectBase {
90
69
  get restrictions() {
91
70
  return this._restrictions;
92
71
  }
72
+ /**
73
+ * Specifies the id of the external drop zone to associate with the component.
74
+ */
75
+ zoneId;
76
+ /**
77
+ * @hidden
78
+ */
79
+ focusableId = `k-${guid()}`;
80
+ /**
81
+ * @hidden
82
+ */
83
+ hostDefaultClasses = true;
93
84
  /**
94
85
  * @hidden
95
86
  */
96
87
  get hostDisabledClass() {
97
88
  return this.disabled;
98
89
  }
90
+ /**
91
+ * Fires when the user navigates outside the component.
92
+ */
93
+ onBlur = new EventEmitter();
94
+ /**
95
+ * Fires when the component is focused.
96
+ */
97
+ onFocus = new EventEmitter();
98
+ /**
99
+ * Fires when files are selected. If prevented, the selected files will not be added to the list.
100
+ */
101
+ select = new EventEmitter();
102
+ /**
103
+ * Fires when a file is about to be removed. If prevented, the file will remain in the list.
104
+ */
105
+ remove = new EventEmitter();
106
+ /**
107
+ * @hidden
108
+ */
109
+ _restrictions = {
110
+ allowedExtensions: [],
111
+ maxFileSize: 0,
112
+ minFileSize: 0
113
+ };
114
+ /**
115
+ * @hidden
116
+ */
117
+ fileList;
118
+ constructor(uploadService, navigation, cdr, injector, zone) {
119
+ this.uploadService = uploadService;
120
+ this.navigation = navigation;
121
+ this.cdr = cdr;
122
+ this.injector = injector;
123
+ this.zone = zone;
124
+ this.fileList = this.uploadService.files;
125
+ }
99
126
  /**
100
127
  * @hidden
101
128
  */
@@ -137,6 +164,8 @@ export class UploadFileSelectBase {
137
164
  }
138
165
  this.cdr.markForCheck();
139
166
  }
167
+ onTouchedCallback = (_) => { };
168
+ onChangeCallback = (_) => { };
140
169
  /**
141
170
  * @hidden
142
171
  */
@@ -197,10 +226,10 @@ export class UploadFileSelectBase {
197
226
  blurComponent() {
198
227
  this.blur();
199
228
  }
229
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UploadFileSelectBase, deps: [{ token: i1.UploadService }, { token: i2.NavigationService }, { token: i0.ChangeDetectorRef }, { token: i0.Injector }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
230
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", 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 });
200
231
  }
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: [{
232
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UploadFileSelectBase, decorators: [{
204
233
  type: Directive,
205
234
  args: [{}]
206
235
  }], ctorParameters: function () { return [{ type: i1.UploadService }, { type: i2.NavigationService }, { type: i0.ChangeDetectorRef }, { type: i0.Injector }, { type: i0.NgZone }]; }, propDecorators: { fileTemplate: [{
@@ -8,12 +8,11 @@ import * as i0 from "@angular/core";
8
8
  * @hidden
9
9
  */
10
10
  export class DropZoneBase {
11
- constructor(element, renderer, cssClass) {
12
- this.element = element;
13
- this.renderer = renderer;
14
- this.hideIntervalElement = null;
15
- this.hoverClass = cssClass;
16
- }
11
+ element;
12
+ renderer;
13
+ hoverClass;
14
+ lastDragElement;
15
+ hideIntervalElement = null;
17
16
  /**
18
17
  * @hidden
19
18
  */
@@ -39,6 +38,11 @@ export class DropZoneBase {
39
38
  this.lastDragElement = new Date();
40
39
  return false;
41
40
  }
41
+ constructor(element, renderer, cssClass) {
42
+ this.element = element;
43
+ this.renderer = renderer;
44
+ this.hoverClass = cssClass;
45
+ }
42
46
  calculateTimeDiff(prevEvent) {
43
47
  return new Date().getTime() - prevEvent.getTime();
44
48
  }
@@ -48,10 +52,10 @@ export class DropZoneBase {
48
52
  removeClass(className) {
49
53
  this.renderer.removeClass(this.element.nativeElement, className);
50
54
  }
55
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropZoneBase, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: 'hoverClass' }], target: i0.ɵɵFactoryTarget.Directive });
56
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: DropZoneBase, host: { listeners: { "dragenter": "onElementDragEnterListener()", "dragover": "onElementDragOverListener()" } }, ngImport: i0 });
51
57
  }
52
- DropZoneBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DropZoneBase, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: 'hoverClass' }], target: i0.ɵɵFactoryTarget.Directive });
53
- DropZoneBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: DropZoneBase, host: { listeners: { "dragenter": "onElementDragEnterListener()", "dragover": "onElementDragOverListener()" } }, ngImport: i0 });
54
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DropZoneBase, decorators: [{
58
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropZoneBase, decorators: [{
55
59
  type: Directive
56
60
  }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: undefined, decorators: [{
57
61
  type: Inject,
@@ -10,6 +10,17 @@ import { UploadComponent } from './upload.component';
10
10
  import * as i0 from "@angular/core";
11
11
  import * as i1 from "./dropzone.service";
12
12
  export class UploadDropZoneDirective {
13
+ dropZoneService;
14
+ /**
15
+ * Specifies the id of the drop zone used to associate it with
16
+ * an existing Upload component.
17
+ */
18
+ zoneId;
19
+ /**
20
+ * Specifies the id of the drop zone used to associate it with
21
+ * an existing FileSelect component.
22
+ */
23
+ fileSelectZoneId;
13
24
  constructor(dropZoneService) {
14
25
  this.dropZoneService = dropZoneService;
15
26
  }
@@ -60,12 +71,12 @@ export class UploadDropZoneDirective {
60
71
  const id = this.zoneId || this.fileSelectZoneId;
61
72
  return this.dropZoneService.getComponents(id);
62
73
  }
74
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UploadDropZoneDirective, deps: [{ token: i1.DropZoneService }], target: i0.ɵɵFactoryTarget.Directive });
75
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: UploadDropZoneDirective, isStandalone: true, selector: "[kendoUploadDropZone], [kendoFileSelectDropZone]", inputs: { zoneId: ["kendoUploadDropZone", "zoneId"], fileSelectZoneId: ["kendoFileSelectDropZone", "fileSelectZoneId"] }, host: { listeners: { "dragenter": "onElementDragEnter()", "dragover": "onElementDragOver()", "drop": "onDropListener($event)" } }, providers: [
76
+ DropZoneService
77
+ ], ngImport: i0 });
63
78
  }
64
- UploadDropZoneDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UploadDropZoneDirective, deps: [{ token: i1.DropZoneService }], target: i0.ɵɵFactoryTarget.Directive });
65
- UploadDropZoneDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: UploadDropZoneDirective, isStandalone: true, selector: "[kendoUploadDropZone], [kendoFileSelectDropZone]", inputs: { zoneId: ["kendoUploadDropZone", "zoneId"], fileSelectZoneId: ["kendoFileSelectDropZone", "fileSelectZoneId"] }, host: { listeners: { "dragenter": "onElementDragEnter()", "dragover": "onElementDragOver()", "drop": "onDropListener($event)" } }, providers: [
66
- DropZoneService
67
- ], ngImport: i0 });
68
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UploadDropZoneDirective, decorators: [{
79
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UploadDropZoneDirective, decorators: [{
69
80
  type: Directive,
70
81
  args: [{
71
82
  providers: [
@@ -13,13 +13,21 @@ import * as i1 from "./upload.service";
13
13
  * @hidden
14
14
  */
15
15
  export class DropZoneInternalDirective extends DropZoneBase {
16
+ ngZone;
17
+ uploadService;
18
+ disabled;
19
+ multiple;
20
+ restrictions;
21
+ initialClassName = true;
22
+ unsubscribeDocumentDragEnter;
23
+ unsubscribeDocumentDragOver;
24
+ lastDragDocument;
25
+ hideIntervalDocument = null;
26
+ activeClass = 'k-dropzone-active';
16
27
  constructor(element, renderer, ngZone, uploadService) {
17
28
  super(element, renderer, 'k-hover');
18
29
  this.ngZone = ngZone;
19
30
  this.uploadService = uploadService;
20
- this.initialClassName = true;
21
- this.hideIntervalDocument = null;
22
- this.activeClass = 'k-dropzone-active';
23
31
  this.ngZone.runOutsideAngular(() => {
24
32
  this.unsubscribeDocumentDragEnter = this.renderer.listen('document', 'dragenter', () => this.onDocumentDragEnter());
25
33
  this.unsubscribeDocumentDragOver = this.renderer.listen('document', 'dragover', () => this.onDocumentDragOver());
@@ -71,10 +79,10 @@ export class DropZoneInternalDirective extends DropZoneBase {
71
79
  }
72
80
  return false;
73
81
  }
82
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropZoneInternalDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i1.UploadService }], target: i0.ɵɵFactoryTarget.Directive });
83
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: DropZoneInternalDirective, isStandalone: true, selector: "\n [kendoUploadInternalDropZone],\n [kendoFileSelectInternalDropZone]\n ", inputs: { disabled: "disabled", multiple: "multiple", restrictions: "restrictions" }, host: { listeners: { "drop": "onDropListener($event)" }, properties: { "class.k-dropzone": "this.initialClassName", "class.k-upload-dropzone": "this.initialClassName" } }, usesInheritance: true, ngImport: i0 });
74
84
  }
75
- DropZoneInternalDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DropZoneInternalDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i1.UploadService }], target: i0.ɵɵFactoryTarget.Directive });
76
- DropZoneInternalDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: DropZoneInternalDirective, isStandalone: true, selector: "\n [kendoUploadInternalDropZone],\n [kendoFileSelectInternalDropZone]\n ", inputs: { disabled: "disabled", multiple: "multiple", restrictions: "restrictions" }, host: { listeners: { "drop": "onDropListener($event)" }, properties: { "class.k-dropzone": "this.initialClassName", "class.k-upload-dropzone": "this.initialClassName" } }, usesInheritance: true, ngImport: i0 });
77
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DropZoneInternalDirective, decorators: [{
85
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropZoneInternalDirective, decorators: [{
78
86
  type: Directive,
79
87
  args: [{
80
88
  selector: `
@@ -15,18 +15,27 @@ import * as i1 from "@progress/kendo-angular-l10n";
15
15
  * Represents the [Kendo UI UploadDropZone component for Angular]({% slug overview_upload %}).
16
16
  */
17
17
  export class UploadDropZoneComponent extends DropZoneBase {
18
- constructor(element, renderer, localization) {
19
- super(element, renderer, 'k-external-dropzone-hover');
20
- this.localization = localization;
21
- this.hostClass = true;
22
- this._svgIcon = uploadIcon;
23
- this.localizationChangeSubscription = this.localization.changes.subscribe(({ rtl }) => {
24
- this.direction = rtl ? 'rtl' : 'ltr';
25
- });
26
- }
18
+ localization;
19
+ hostClass = true;
27
20
  get dirAttribute() {
28
21
  return this.direction;
29
22
  }
23
+ /**
24
+ * Defines the id of the component.
25
+ * It is used to associate it with an existing Upload or FileSelect component.
26
+ */
27
+ zoneId;
28
+ /**
29
+ * Defines the name for an existing icon in a Kendo UI theme.
30
+ * The icon is rendered inside the DropZone.
31
+ */
32
+ icon;
33
+ /**
34
+ * Defines a CSS class or multiple classes separated by spaces,
35
+ * which are applied to a span element.
36
+ * Allows the usage of custom icons.
37
+ */
38
+ iconClass;
30
39
  /**
31
40
  * Defines an SVGIcon to be rendered inside the DropZone.
32
41
  * The input can take either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
@@ -40,6 +49,16 @@ export class UploadDropZoneComponent extends DropZoneBase {
40
49
  get svgIcon() {
41
50
  return this._svgIcon;
42
51
  }
52
+ direction;
53
+ localizationChangeSubscription;
54
+ _svgIcon = uploadIcon;
55
+ constructor(element, renderer, localization) {
56
+ super(element, renderer, 'k-external-dropzone-hover');
57
+ this.localization = localization;
58
+ this.localizationChangeSubscription = this.localization.changes.subscribe(({ rtl }) => {
59
+ this.direction = rtl ? 'rtl' : 'ltr';
60
+ });
61
+ }
43
62
  /**
44
63
  * @hidden
45
64
  */
@@ -62,15 +81,14 @@ export class UploadDropZoneComponent extends DropZoneBase {
62
81
  this.localizationChangeSubscription.unsubscribe();
63
82
  }
64
83
  }
65
- }
66
- UploadDropZoneComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UploadDropZoneComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
67
- UploadDropZoneComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: UploadDropZoneComponent, isStandalone: true, selector: "kendo-uploaddropzone", inputs: { zoneId: "zoneId", icon: "icon", iconClass: "iconClass", svgIcon: "svgIcon" }, host: { properties: { "class.k-external-dropzone": "this.hostClass", "attr.dir": "this.dirAttribute" } }, providers: [
68
- LocalizationService,
69
- {
70
- provide: L10N_PREFIX,
71
- useValue: 'kendo.uploaddropzone'
72
- }
73
- ], exportAs: ["kendoUploadDropZone"], usesInheritance: true, ngImport: i0, template: `
84
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UploadDropZoneComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
85
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: UploadDropZoneComponent, isStandalone: true, selector: "kendo-uploaddropzone", inputs: { zoneId: "zoneId", icon: "icon", iconClass: "iconClass", svgIcon: "svgIcon" }, host: { properties: { "class.k-external-dropzone": "this.hostClass", "attr.dir": "this.dirAttribute" } }, providers: [
86
+ LocalizationService,
87
+ {
88
+ provide: L10N_PREFIX,
89
+ useValue: 'kendo.uploaddropzone'
90
+ }
91
+ ], exportAs: ["kendoUploadDropZone"], usesInheritance: true, ngImport: i0, template: `
74
92
  <ng-container kendoUploadDropZoneLocalizedMessages
75
93
  i18n-externalDropFilesHere='kendo.uploaddropzone.externalDropFilesHere|Sets the external drop-zone hint'
76
94
  externalDropFilesHere='Drag and drop files here to upload'>
@@ -89,7 +107,8 @@ UploadDropZoneComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
89
107
  </span>
90
108
  </div>
91
109
  `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n [kendoUploadLocalizedMessages],\n [kendoFileSelectLocalizedMessages],\n [kendoUploadDropZoneLocalizedMessages]\n " }, { kind: "directive", type: UploadDropZoneDirective, selector: "[kendoUploadDropZone], [kendoFileSelectDropZone]", inputs: ["kendoUploadDropZone", "kendoFileSelectDropZone"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
92
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UploadDropZoneComponent, decorators: [{
110
+ }
111
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UploadDropZoneComponent, decorators: [{
93
112
  type: Component,
94
113
  args: [{
95
114
  exportAs: 'kendoUploadDropZone',
@@ -29,9 +29,9 @@ export class DropZoneService {
29
29
  has(id) {
30
30
  return id in components;
31
31
  }
32
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropZoneService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
33
+ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropZoneService });
32
34
  }
33
- DropZoneService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DropZoneService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
34
- DropZoneService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DropZoneService });
35
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DropZoneService, decorators: [{
35
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropZoneService, decorators: [{
36
36
  type: Injectable
37
37
  }] });
@@ -29,6 +29,10 @@
29
29
  * ```
30
30
  */
31
31
  export class CancelEvent {
32
+ /**
33
+ * The list of the files that were going to be uploaded.
34
+ */
35
+ files;
32
36
  /**
33
37
  * @hidden
34
38
  * Constructs the event arguments for the `cancel` event.
@@ -28,6 +28,18 @@
28
28
  * ```
29
29
  */
30
30
  export class ErrorEvent {
31
+ /**
32
+ * The list of the files that failed to be uploaded or removed.
33
+ */
34
+ files;
35
+ /**
36
+ * The operation type (`upload` or `remove`).
37
+ */
38
+ operation;
39
+ /**
40
+ * The response object returned by the server.
41
+ */
42
+ response;
31
43
  /**
32
44
  * @hidden
33
45
  * Constructs the event arguments for the `error` event.
@@ -30,6 +30,10 @@
30
30
  *
31
31
  */
32
32
  export class PauseEvent {
33
+ /**
34
+ * The file that is going to be paused.
35
+ */
36
+ file;
33
37
  /**
34
38
  * @hidden
35
39
  * Constructs the event arguments for the `pause` event.
@@ -6,9 +6,7 @@
6
6
  * @hidden
7
7
  */
8
8
  export class PreventableEvent {
9
- constructor() {
10
- this.prevented = false;
11
- }
9
+ prevented = false;
12
10
  /**
13
11
  * Prevents the default action for a specified event.
14
12
  * In this way, the source component suppresses the built-in behavior that follows the event.
@@ -29,6 +29,18 @@ import { PreventableEvent } from './preventable-event';
29
29
  * ```
30
30
  */
31
31
  export class RemoveEvent extends PreventableEvent {
32
+ /**
33
+ * An optional object that is sent to the `remove` handler in the form of a key/value pair.
34
+ */
35
+ data;
36
+ /**
37
+ * The list of the files that will be removed.
38
+ */
39
+ files;
40
+ /**
41
+ * The headers of the request.
42
+ */
43
+ headers;
32
44
  /**
33
45
  * @hidden
34
46
  * Constructs the event arguments for the `remove` event.
@@ -30,6 +30,10 @@
30
30
  *
31
31
  */
32
32
  export class ResumeEvent {
33
+ /**
34
+ * The file that is going to be resumed.
35
+ */
36
+ file;
33
37
  /**
34
38
  * @hidden
35
39
  * Constructs the event arguments for the `resume` event.