@progress/kendo-angular-upload 17.0.0-develop.9 → 17.0.1-develop.1

package/{esm2020 → esm2022}/rendering/file-list-multiple-items.component.mjs

@@ -22,10 +22,15 @@ import * as i2 from "../upload.service";
  * @hidden
  */
 export class FileListMultipleItemsComponent extends FileListItemBase {
+    localization;
+    disabled;
+    files;
+    fileInfoTemplate;
+    filesHaveErrors;
+    copySVGIcon = copyIcon;
     constructor(localization, uploadService) {
         super(uploadService);
         this.localization = localization;
-        this.copySVGIcon = copyIcon;
         this.subscribeUploadProgress((args) => {
             if (args.files[0].uid === this.files[0].uid) {
                 this.progressComplete = args.percentComplete;
@@ -63,9 +68,8 @@ export class FileListMultipleItemsComponent extends FileListItemBase {
     get isUploadFailed() {
         return this.files[0].state === FileState.Failed;
     }
-}
-FileListMultipleItemsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FileListMultipleItemsComponent, deps: [{ token: i1.LocalizationService }, { token: i2.UploadService }], target: i0.ɵɵFactoryTarget.Component });
-FileListMultipleItemsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: FileListMultipleItemsComponent, isStandalone: true, selector: "kendo-upload-file-list-multiple-items", inputs: { disabled: "disabled", files: "files", fileInfoTemplate: "fileInfoTemplate" }, usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FileListMultipleItemsComponent, deps: [{ token: i1.LocalizationService }, { token: i2.UploadService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FileListMultipleItemsComponent, isStandalone: true, selector: "kendo-upload-file-list-multiple-items", inputs: { disabled: "disabled", files: "files", fileInfoTemplate: "fileInfoTemplate" }, usesInheritance: true, ngImport: i0, template: `
         <kendo-progressbar
             [@progressState]="showProgress"
             [value]="progressComplete"
@@ -111,15 +115,16 @@ FileListMultipleItemsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
             [progress]='progressComplete'>
         </kendo-upload-file-list-item-action-button>
     `, isInline: true, dependencies: [{ kind: "component", type: ProgressBarComponent, selector: "kendo-progressbar", inputs: ["label", "progressCssStyle", "progressCssClass", "emptyCssStyle", "emptyCssClass", "animation"], outputs: ["animationEnd"], exportAs: ["kendoProgressBar"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: FileListItemActionButtonComponent, selector: "kendo-upload-file-list-item-action-button", inputs: ["file", "disabled", "progress"] }], animations: [
-        trigger('progressState', [
-            state('active', style({ opacity: 1 })),
-            state('inactive', style({ opacity: 0 })),
-            transition('void => active', style({ opacity: 0 })),
-            transition('inactive => active', style({ opacity: 1 })),
-            transition('active => inactive', animate('1s 2s ease-out'))
-        ])
-    ] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FileListMultipleItemsComponent, decorators: [{
+            trigger('progressState', [
+                state('active', style({ opacity: 1 })),
+                state('inactive', style({ opacity: 0 })),
+                transition('void => active', style({ opacity: 0 })),
+                transition('inactive => active', style({ opacity: 1 })),
+                transition('active => inactive', animate('1s 2s ease-out'))
+            ])
+        ] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FileListMultipleItemsComponent, decorators: [{
             type: Component,
             args: [{
                     animations: [

package/{esm2020 → esm2022}/rendering/file-list-single-item.component.mjs

@@ -23,6 +23,10 @@ import * as i2 from "../upload.service";
  * @hidden
  */
 export class FileListSingleItemComponent extends FileListItemBase {
+    localization;
+    disabled;
+    file;
+    fileInfoTemplate;
     constructor(localization, uploadService) {
         super(uploadService);
         this.localization = localization;
@@ -72,9 +76,8 @@ export class FileListSingleItemComponent extends FileListItemBase {
     get isNotYetUploaded() {
         return !this.isUploadFailed && !this.isUploadSuccessful;
     }
-}
-FileListSingleItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FileListSingleItemComponent, deps: [{ token: i1.LocalizationService }, { token: i2.UploadService }], target: i0.ɵɵFactoryTarget.Component });
-FileListSingleItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: FileListSingleItemComponent, isStandalone: true, selector: "kendo-upload-file-list-single-item", inputs: { disabled: "disabled", file: "file", fileInfoTemplate: "fileInfoTemplate" }, usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FileListSingleItemComponent, deps: [{ token: i1.LocalizationService }, { token: i2.UploadService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FileListSingleItemComponent, isStandalone: true, selector: "kendo-upload-file-list-single-item", inputs: { disabled: "disabled", file: "file", fileInfoTemplate: "fileInfoTemplate" }, usesInheritance: true, ngImport: i0, template: `
         <kendo-progressbar
             [@progressState]="showProgress"
             [value]="progressComplete"
@@ -112,15 +115,16 @@ FileListSingleItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.
             [progress]='progressComplete'>
         </kendo-upload-file-list-item-action-button>
     `, isInline: true, dependencies: [{ kind: "component", type: ProgressBarComponent, selector: "kendo-progressbar", inputs: ["label", "progressCssStyle", "progressCssClass", "emptyCssStyle", "emptyCssClass", "animation"], outputs: ["animationEnd"], exportAs: ["kendoProgressBar"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: FileListItemActionButtonComponent, selector: "kendo-upload-file-list-item-action-button", inputs: ["file", "disabled", "progress"] }], animations: [
-        trigger('progressState', [
-            state('active', style({ opacity: 1 })),
-            state('inactive', style({ opacity: 0 })),
-            transition('void => active', style({ opacity: 0 })),
-            transition('inactive => active', style({ opacity: 1 })),
-            transition('active => inactive', animate('1s 2s ease-out'))
-        ])
-    ] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FileListSingleItemComponent, decorators: [{
+            trigger('progressState', [
+                state('active', style({ opacity: 1 })),
+                state('inactive', style({ opacity: 0 })),
+                transition('void => active', style({ opacity: 0 })),
+                transition('inactive => active', style({ opacity: 1 })),
+                transition('active => inactive', animate('1s 2s ease-out'))
+            ])
+        ] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FileListSingleItemComponent, decorators: [{
             type: Component,
             args: [{
                     animations: [

package/{esm2020 → esm2022}/rendering/file-list.component.mjs

@@ -21,10 +21,19 @@ import * as i2 from "../navigation.service";
  * @hidden
  */
 export class FileListComponent {
+    uploadService;
+    navigation;
+    disabled;
+    fileList;
+    fileTemplate;
+    fileInfoTemplate;
+    fileListItems;
+    fileListRole = 'list';
+    focusSubscription;
+    actionSubscription;
     constructor(uploadService, navigation) {
         this.uploadService = uploadService;
         this.navigation = navigation;
-        this.fileListRole = 'list';
         this.onItemFocus();
         this.onItemAction();
     }
@@ -90,9 +99,8 @@ export class FileListComponent {
         this.focusSubscription.unsubscribe();
         this.actionSubscription.unsubscribe();
     }
-}
-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 });
-FileListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: FileListComponent, isStandalone: true, 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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FileListComponent, deps: [{ token: i1.UploadService }, { token: i2.NavigationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FileListComponent, isStandalone: true, 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: `
         <ng-template ngFor
             [ngForOf]="fileList"
             let-files
@@ -119,7 +127,8 @@ FileListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
             </li>
         </ng-template>
     `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: FileListItemDirective, selector: "[kendoUploadFileListItem]", inputs: ["files", "index"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FileListSingleItemComponent, selector: "kendo-upload-file-list-single-item", inputs: ["disabled", "file", "fileInfoTemplate"] }, { kind: "component", type: FileListMultipleItemsComponent, selector: "kendo-upload-file-list-multiple-items", inputs: ["disabled", "files", "fileInfoTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FileListComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FileListComponent, decorators: [{
             type: Component,
             args: [{
                     selector: '[kendo-upload-file-list]',

package/{esm2020 → esm2022}/rendering/upload-action-buttons.component.mjs

@@ -15,12 +15,14 @@ import * as i3 from "../navigation.service";
  * @hidden
  */
 export class UploadActionButtonsComponent {
-    constructor(uploadService, localization, navigation) {
-        this.uploadService = uploadService;
-        this.localization = localization;
-        this.navigation = navigation;
-        this.hostDefaultClass = true;
-    }
+    uploadService;
+    localization;
+    navigation;
+    disabled;
+    actionsLayout;
+    clearButton;
+    uploadButton;
+    hostDefaultClass = true;
     get actionButtonsEndClassName() {
         return this.actionsLayout === 'end';
     }
@@ -33,6 +35,11 @@ export class UploadActionButtonsComponent {
     get actionButtonsCenterClassName() {
         return this.actionsLayout === 'center';
     }
+    constructor(uploadService, localization, navigation) {
+        this.uploadService = uploadService;
+        this.localization = localization;
+        this.navigation = navigation;
+    }
     onUploadButtonFocus() {
         if (!this.navigation.focused) {
             this.navigation.focusedIndex = this.navigation.lastIndex;
@@ -61,9 +68,8 @@ export class UploadActionButtonsComponent {
     textFor(key) {
         return this.localization.get(key);
     }
-}
-UploadActionButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UploadActionButtonsComponent, deps: [{ token: i1.UploadService }, { token: i2.LocalizationService }, { token: i3.NavigationService }], target: i0.ɵɵFactoryTarget.Component });
-UploadActionButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: UploadActionButtonsComponent, isStandalone: true, selector: "kendo-upload-action-buttons", inputs: { disabled: "disabled", actionsLayout: "actionsLayout" }, host: { properties: { "class.k-actions": "this.hostDefaultClass", "class.k-actions-end": "this.actionButtonsEndClassName", "class.k-actions-stretched": "this.actionButtonsStretchedClassName", "class.k-actions-start": "this.actionButtonsStartClassName", "class.k-actions-center": "this.actionButtonsCenterClassName" } }, viewQueries: [{ propertyName: "clearButton", first: true, predicate: ["clearButton"], descendants: true, static: true }, { propertyName: "uploadButton", first: true, predicate: ["uploadButton"], descendants: true, static: true }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UploadActionButtonsComponent, deps: [{ token: i1.UploadService }, { token: i2.LocalizationService }, { token: i3.NavigationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: UploadActionButtonsComponent, isStandalone: true, selector: "kendo-upload-action-buttons", inputs: { disabled: "disabled", actionsLayout: "actionsLayout" }, host: { properties: { "class.k-actions": "this.hostDefaultClass", "class.k-actions-end": "this.actionButtonsEndClassName", "class.k-actions-stretched": "this.actionButtonsStretchedClassName", "class.k-actions-start": "this.actionButtonsStartClassName", "class.k-actions-center": "this.actionButtonsCenterClassName" } }, viewQueries: [{ propertyName: "clearButton", first: true, predicate: ["clearButton"], descendants: true, static: true }, { propertyName: "uploadButton", first: true, predicate: ["uploadButton"], descendants: true, static: true }], ngImport: i0, template: `
         <button #clearButton role="button" class="k-button k-button-md k-rounded-md k-button-solid k-button-solid-base k-clear-selected"
             (click)="onClearButtonClick($event)">
                 {{textFor('clearSelectedFiles')}}
@@ -74,7 +80,8 @@ UploadActionButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14
                 {{textFor('uploadSelectedFiles')}}
         </button>
     `, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UploadActionButtonsComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UploadActionButtonsComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-upload-action-buttons',

package/{esm2020 → esm2022}/rendering/upload-status-total.component.mjs

@@ -14,12 +14,18 @@ import * as i1 from "@progress/kendo-angular-l10n";
  * @hidden
  */
 export class UploadStatusTotalComponent {
+    localization;
+    fileList;
+    isFailed;
+    isPaused;
+    isUploading;
+    statusText;
+    checkmarkIcon = checkIcon;
+    exceptionSVGIcon = exclamationCircleIcon;
+    uploadSVGIcon = uploadIcon;
+    pauseSVGIcon = pauseSmIcon;
     constructor(localization) {
         this.localization = localization;
-        this.checkmarkIcon = checkIcon;
-        this.exceptionSVGIcon = exclamationCircleIcon;
-        this.uploadSVGIcon = uploadIcon;
-        this.pauseSVGIcon = pauseSmIcon;
     }
     get iconClass() {
         if (!this.isUploading && !this.isFailed) {
@@ -61,9 +67,8 @@ export class UploadStatusTotalComponent {
                 : this.localization.get('headerStatusUploaded');
         }
     }
-}
-UploadStatusTotalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UploadStatusTotalComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-UploadStatusTotalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: UploadStatusTotalComponent, isStandalone: true, selector: "kendo-upload-status-total", inputs: { fileList: "fileList" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UploadStatusTotalComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: UploadStatusTotalComponent, isStandalone: true, selector: "kendo-upload-status-total", inputs: { fileList: "fileList" }, ngImport: i0, template: `
         <kendo-icon-wrapper
             [name]="iconClass"
             [svgIcon]="SVGIconClass"
@@ -71,7 +76,8 @@ UploadStatusTotalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0
         </kendo-icon-wrapper>
         {{statusText}}
     `, isInline: true, dependencies: [{ kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UploadStatusTotalComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UploadStatusTotalComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-upload-status-total',

package/esm2022/templates/file-info-template.directive.mjs

@@ -0,0 +1,40 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2024 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Directive, TemplateRef } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * Used to customize the rendering of the file info section in the list. All other elements of the default template, such as file icon, action buttons, upload progress etc. will be preserved in place. ([See example.](slug:templates_upload#toc-file-info-template))
+ *
+ * The following context variables are available in the template:
+ *
+ * * `let-files`—Provides a reference to the files which are associated with the current item.
+ * * `let-state`—Gets a reference to the current state of each file. If the [`batch`](slug:api_upload_uploadcomponent#toc-batch) option of the Upload is set to `true`, the field reflects the state of the whole batch.
+ * * `#myUpload="kendoUpload"` or `#myFileSelect="kendoFileSelect"`—Provides a reference to the instance of the Upload/FileSelect component. It is exported as `kendoUpload`/`kendoFileSelect` by using the [`exportAs`](https://angular.io/api/core/Component) metadata property.
+ *
+ * @example
+ * ```html
+ * <kendo-upload #myUpload="kendoUpload" ... >
+ *     <ng-template kendoUploadFileInfoTemplate let-files let-state>
+ *         <div>Name: {{ files[0].name }}</div>
+ *         ...
+ *     </ng-template>
+ * </kendo-upload>
+ * ```
+ */
+export class FileInfoTemplateDirective {
+    templateRef;
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FileInfoTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: FileInfoTemplateDirective, isStandalone: true, selector: "[kendoUploadFileInfoTemplate], [kendoFileSelectFileInfoTemplate]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FileInfoTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoUploadFileInfoTemplate], [kendoFileSelectFileInfoTemplate]',
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });

package/esm2022/templates/file-template.directive.mjs

@@ -0,0 +1,40 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2024 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Directive, TemplateRef } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * Used to customize the rendering of the files in the list. ([See example.](slug:templates_upload#toc-file-template))
+ *
+ * The following context variables are available in the template:
+ *
+ * * `let-files`—Provides a reference to the files which are associated with the current item.
+ * * `let-state`—Gets a reference to the current state of each file. If the [`batch`](slug:api_upload_uploadcomponent#toc-batch) option of the Upload is set to `true`, the field reflects the state of the whole batch.
+ * * `#myUpload="kendoUpload"` or `#myFileSelect="kendoFileSelect"`—Provides a reference to the instance of the Upload/FileSelect component. It is exported as `kendoUpload`/`kendoFileSelect` by using the [`exportAs`](https://angular.io/api/core/Component) metadata property.
+ *
+ * @example
+ * ```html
+ * <kendo-upload #myUpload="kendoUpload" ... >
+ *     <ng-template kendoUploadFileTemplate let-files let-state>
+ *         <div>Name: {{ files[0].name }} Size: {{ files[0].size }} bytes</div>
+ *         ...
+ *     </ng-template>
+ * </kendo-upload>
+ * ```
+ */
+export class FileTemplateDirective {
+    templateRef;
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FileTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: FileTemplateDirective, isStandalone: true, selector: "[kendoUploadFileTemplate], [kendoFileSelectFileTemplate]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FileTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoUploadFileTemplate], [kendoFileSelectFileTemplate]',
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });

package/{esm2020 → esm2022}/types/chunk-map.mjs

@@ -6,6 +6,7 @@
  * @hidden
  */
 export class ChunkMap {
+    _files;
     constructor() {
         this._files = {};
     }

package/{esm2020 → esm2022}/types/file-map.mjs

@@ -7,6 +7,7 @@ import { FileState } from '../types';
  * @hidden
  */
 export class FileMap {
+    _files;
     constructor() {
         this._files = {};
     }

package/{esm2020 → esm2022}/upload.component.mjs

@@ -45,83 +45,14 @@ let idx = 0;
  * Represents the [Kendo UI Upload component for Angular]({% slug overview_upload %}).
  */
 export class UploadComponent extends UploadFileSelectBase {
-    constructor(uploadService, localization, navigation, dropZoneService, zone, renderer, cdr, wrapper, injector) {
-        super(uploadService, navigation, cdr, injector, zone);
-        this.uploadService = uploadService;
-        this.localization = localization;
-        this.navigation = navigation;
-        this.dropZoneService = dropZoneService;
-        this.zone = zone;
-        this.renderer = renderer;
-        this.cdr = cdr;
-        this.injector = injector;
-        /**
-         * Enables the chunk functionality of the Upload.
-         *
-         * @default false
-         */
-        this.chunkable = false;
-        /**
-         * Toggles the visibility of the file list.
-         * @default true
-         */
-        this.showFileList = true;
-        /**
-         * Specifies the possible layout of the action buttons.
-         */
-        this.actionsLayout = 'end';
-        /**
-         * Fires when the upload is canceled while in progress.
-         */
-        this.cancel = new EventEmitter();
-        /**
-         * Fires when the file list is about to be cleared. If prevented, the files will not be cleared.
-         */
-        this.clear = new EventEmitter();
-        /**
-         * Fires when all active uploads are completed either successfully or with errors.
-         */
-        this.complete = new EventEmitter();
-        /**
-         * Fires when an `upload` or `remove` operation has failed.
-         */
-        this.error = new EventEmitter();
-        /**
-         * Fires when the upload of a file has been paused.
-         */
-        this.pause = new EventEmitter();
-        /**
-         * Fires when the upload of a file has been resumed.
-         */
-        this.resume = new EventEmitter();
-        /**
-         * Fires when an `upload` or `remove` operation is successfully completed.
-         */
-        this.success = new EventEmitter();
-        /**
-         * Fires when one or more files are about to be uploaded. If prevented, the files will neither be uploaded, nor added to the file list.
-         */
-        this.upload = new EventEmitter();
-        /**
-         * Fires when one or more files are being uploaded.
-         */
-        this.uploadProgress = new EventEmitter();
-        /**
-         * Fires when the value of the component has changed as a result of a successful `upload`, `remove` or `clear` operation.
-         */
-        this.valueChange = new EventEmitter();
-        validatePackage(packageMetadata);
-        this.fileList = this.uploadService.files;
-        this.localizationChangeSubscription = localization.changes.subscribe(({ rtl }) => {
-            this.direction = rtl ? 'rtl' : 'ltr';
-        });
-        this.direction = localization.rtl ? 'rtl' : 'ltr';
-        this.navigation.computeKeys();
-        this.wrapper = wrapper.nativeElement;
-        this.subscribeBlur();
-        this.subscribeFocus();
-        this.attachEventHandlers();
-    }
+    uploadService;
+    localization;
+    navigation;
+    dropZoneService;
+    zone;
+    renderer;
+    cdr;
+    injector;
     /**
      * By default, the selected files are immediately uploaded
      * ([see example]({% slug fileprocessing_upload %}#toc-automatic-upload-of-files)).
@@ -247,6 +178,12 @@ export class UploadComponent extends UploadFileSelectBase {
     get removeUrl() {
         return this.uploadService.async.removeUrl;
     }
+    /**
+     * Enables the chunk functionality of the Upload.
+     *
+     * @default false
+     */
+    chunkable = false;
     /**
      * Specifies if the selected files are uploaded simultaneously or one by one.
      *
@@ -258,6 +195,11 @@ export class UploadComponent extends UploadFileSelectBase {
     get concurrent() {
         return this.uploadService.async.concurrent;
     }
+    /**
+     * Toggles the visibility of the file list.
+     * @default true
+     */
+    showFileList = true;
     /**
      * @hidden
      */
@@ -267,9 +209,85 @@ export class UploadComponent extends UploadFileSelectBase {
     get tabIndex() {
         return this.tabindex;
     }
+    /**
+     * Specifies the possible layout of the action buttons.
+     */
+    actionsLayout = 'end';
+    fileSelectInput;
+    /**
+     * Fires when the upload is canceled while in progress.
+     */
+    cancel = new EventEmitter();
+    /**
+     * Fires when the file list is about to be cleared. If prevented, the files will not be cleared.
+     */
+    clear = new EventEmitter();
+    /**
+     * Fires when all active uploads are completed either successfully or with errors.
+     */
+    complete = new EventEmitter();
+    /**
+     * Fires when an `upload` or `remove` operation has failed.
+     */
+    error = new EventEmitter();
+    /**
+     * Fires when the upload of a file has been paused.
+     */
+    pause = new EventEmitter();
+    /**
+     * Fires when the upload of a file has been resumed.
+     */
+    resume = new EventEmitter();
+    /**
+     * Fires when an `upload` or `remove` operation is successfully completed.
+     */
+    success = new EventEmitter();
+    /**
+     * Fires when one or more files are about to be uploaded. If prevented, the files will neither be uploaded, nor added to the file list.
+     */
+    upload = new EventEmitter();
+    /**
+     * Fires when one or more files are being uploaded.
+     */
+    uploadProgress = new EventEmitter();
+    /**
+     * Fires when the value of the component has changed as a result of a successful `upload`, `remove` or `clear` operation.
+     */
+    valueChange = new EventEmitter();
     get dir() {
         return this.direction;
     }
+    direction;
+    wrapper;
+    fileListId;
+    documentClick; // eslint-disable-line @typescript-eslint/ban-types
+    blurSubscription;
+    wrapperFocusSubscription;
+    selectButtonFocusSubscription;
+    localizationChangeSubscription;
+    subs;
+    constructor(uploadService, localization, navigation, dropZoneService, zone, renderer, cdr, wrapper, injector) {
+        super(uploadService, navigation, cdr, injector, zone);
+        this.uploadService = uploadService;
+        this.localization = localization;
+        this.navigation = navigation;
+        this.dropZoneService = dropZoneService;
+        this.zone = zone;
+        this.renderer = renderer;
+        this.cdr = cdr;
+        this.injector = injector;
+        validatePackage(packageMetadata);
+        this.fileList = this.uploadService.files;
+        this.localizationChangeSubscription = localization.changes.subscribe(({ rtl }) => {
+            this.direction = rtl ? 'rtl' : 'ltr';
+        });
+        this.direction = localization.rtl ? 'rtl' : 'ltr';
+        this.navigation.computeKeys();
+        this.wrapper = wrapper.nativeElement;
+        this.subscribeBlur();
+        this.subscribeFocus();
+        this.attachEventHandlers();
+    }
     ngOnInit() {
         this.verifySettings();
         const { buttonId, fileListId } = this.getIds();
@@ -524,23 +542,22 @@ export class UploadComponent extends UploadFileSelectBase {
             this.uploadProgress.emit(args);
         }));
     }
-}
-UploadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UploadComponent, deps: [{ token: i1.UploadService }, { token: i2.LocalizationService }, { token: i3.NavigationService }, { token: i4.DropZoneService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-UploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: UploadComponent, isStandalone: true, selector: "kendo-upload", inputs: { autoUpload: "autoUpload", batch: "batch", withCredentials: "withCredentials", saveField: "saveField", saveHeaders: "saveHeaders", saveMethod: "saveMethod", saveUrl: "saveUrl", responseType: "responseType", removeField: "removeField", removeHeaders: "removeHeaders", removeMethod: "removeMethod", removeUrl: "removeUrl", chunkable: "chunkable", concurrent: "concurrent", showFileList: "showFileList", tabIndex: "tabIndex", actionsLayout: "actionsLayout" }, outputs: { cancel: "cancel", clear: "clear", complete: "complete", error: "error", pause: "pause", resume: "resume", success: "success", upload: "upload", uploadProgress: "uploadProgress", valueChange: "valueChange" }, host: { properties: { "attr.dir": "this.dir" } }, providers: [
-        LocalizationService,
-        NavigationService,
-        UploadService,
-        DropZoneService,
-        UPLOAD_VALUE_ACCESSOR,
-        {
-            provide: L10N_PREFIX,
-            useValue: 'kendo.upload'
-        },
-        {
-            provide: KendoInput,
-            useExisting: forwardRef(() => UploadComponent)
-        }
-    ], viewQueries: [{ propertyName: "fileSelectInput", first: true, predicate: ["fileSelectInput"], descendants: true, static: true }], exportAs: ["kendoUpload"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UploadComponent, deps: [{ token: i1.UploadService }, { token: i2.LocalizationService }, { token: i3.NavigationService }, { token: i4.DropZoneService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: UploadComponent, isStandalone: true, selector: "kendo-upload", inputs: { autoUpload: "autoUpload", batch: "batch", withCredentials: "withCredentials", saveField: "saveField", saveHeaders: "saveHeaders", saveMethod: "saveMethod", saveUrl: "saveUrl", responseType: "responseType", removeField: "removeField", removeHeaders: "removeHeaders", removeMethod: "removeMethod", removeUrl: "removeUrl", chunkable: "chunkable", concurrent: "concurrent", showFileList: "showFileList", tabIndex: "tabIndex", actionsLayout: "actionsLayout" }, outputs: { cancel: "cancel", clear: "clear", complete: "complete", error: "error", pause: "pause", resume: "resume", success: "success", upload: "upload", uploadProgress: "uploadProgress", valueChange: "valueChange" }, host: { properties: { "attr.dir": "this.dir" } }, providers: [
+            LocalizationService,
+            NavigationService,
+            UploadService,
+            DropZoneService,
+            UPLOAD_VALUE_ACCESSOR,
+            {
+                provide: L10N_PREFIX,
+                useValue: 'kendo.upload'
+            },
+            {
+                provide: KendoInput,
+                useExisting: forwardRef(() => UploadComponent)
+            }
+        ], viewQueries: [{ propertyName: "fileSelectInput", first: true, predicate: ["fileSelectInput"], descendants: true, static: true }], exportAs: ["kendoUpload"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
     <ng-container kendoUploadLocalizedMessages
         i18n-cancel="kendo.upload.cancel|The text for the Cancel button"
         cancel="Cancel"
@@ -652,7 +669,8 @@ UploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versio
         [actionsLayout]="actionsLayout">
     </kendo-upload-action-buttons>
     `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n    [kendoUploadLocalizedMessages],\n    [kendoFileSelectLocalizedMessages],\n    [kendoUploadDropZoneLocalizedMessages]\n  " }, { kind: "directive", type: DropZoneInternalDirective, selector: "\n      [kendoUploadInternalDropZone],\n      [kendoFileSelectInternalDropZone]\n    ", inputs: ["disabled", "multiple", "restrictions"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: FileSelectDirective, selector: "[kendoFileSelect]", inputs: ["dir", "disabled", "multiple", "restrictions", "accept", "required"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: UploadStatusTotalComponent, selector: "kendo-upload-status-total", inputs: ["fileList"] }, { kind: "component", type: FileListComponent, selector: "[kendo-upload-file-list]", inputs: ["disabled", "fileList", "fileTemplate", "fileInfoTemplate"] }, { kind: "component", type: UploadActionButtonsComponent, selector: "kendo-upload-action-buttons", inputs: ["disabled", "actionsLayout"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UploadComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UploadComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoUpload',