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

package/{fesm2020 → fesm2022}/progress-kendo-angular-upload.mjs

@@ -56,6 +56,7 @@ var FileState;
  * @hidden
  */
 class FileMap {
+    _files;
     constructor() {
         this._files = {};
     }
@@ -218,6 +219,10 @@ class FileMap {
  * ```
  */
 class CancelEvent {
+    /**
+     * The list of the files that were going to be uploaded.
+     */
+    files;
     /**
      * @hidden
      * Constructs the event arguments for the `cancel` event.
@@ -232,9 +237,7 @@ class CancelEvent {
  * @hidden
  */
 class PreventableEvent {
-    constructor() {
-        this.prevented = false;
-    }
+    prevented = false;
     /**
      * Prevents the default action for a specified event.
      * In this way, the source component suppresses the built-in behavior that follows the event.
@@ -312,6 +315,18 @@ class ClearEvent extends PreventableEvent {
  * ```
  */
 class ErrorEvent {
+    /**
+     * The list of the files that failed to be uploaded or removed.
+     */
+    files;
+    /**
+     * The operation type (`upload` or `remove`).
+     */
+    operation;
+    /**
+     * The response object returned by the server.
+     */
+    response;
     /**
      * @hidden
      * Constructs the event arguments for the `error` event.
@@ -355,6 +370,10 @@ class ErrorEvent {
  *
  */
 class PauseEvent {
+    /**
+     * The file that is going to be paused.
+     */
+    file;
     /**
      * @hidden
      * Constructs the event arguments for the `pause` event.
@@ -391,6 +410,18 @@ class PauseEvent {
  * ```
  */
 class RemoveEvent extends PreventableEvent {
+    /**
+     * An optional object that is sent to the `remove` handler in the form of a key/value pair.
+     */
+    data;
+    /**
+     * The list of the files that will be removed.
+     */
+    files;
+    /**
+     * The headers of the request.
+     */
+    headers;
     /**
      * @hidden
      * Constructs the event arguments for the `remove` event.
@@ -432,6 +463,10 @@ class RemoveEvent extends PreventableEvent {
  *
  */
 class ResumeEvent {
+    /**
+     * The file that is going to be resumed.
+     */
+    file;
     /**
      * @hidden
      * Constructs the event arguments for the `resume` event.
@@ -468,6 +503,10 @@ class ResumeEvent {
  * ```
  */
 class SelectEvent extends PreventableEvent {
+    /**
+     * The list of the selected files.
+     */
+    files;
     /**
      * @hidden
      * Constructs the event arguments for the `select` event.
@@ -505,6 +544,18 @@ class SelectEvent extends PreventableEvent {
  * ```
  */
 class SuccessEvent extends PreventableEvent {
+    /**
+     * The list of the files that were uploaded or removed.
+     */
+    files;
+    /**
+     * The operation type (`upload` or `remove`).
+     */
+    operation;
+    /**
+     * The response object returned by the server.
+     */
+    response;
     /**
      * @hidden
      * Constructs the event arguments for the `success` event.
@@ -546,6 +597,41 @@ class SuccessEvent extends PreventableEvent {
  * ```
  */
 class UploadEvent extends PreventableEvent {
+    /**
+     * The optional object that is sent to the `upload` handler in the form of key/value pair.
+     *
+     * ```ts-no-run
+     *  @Component({
+     *    selector: 'my-upload',
+     *    template: `
+     *    <kendo-upload
+     *      [saveUrl]="uploadSaveUrl"
+     *      [removeUrl]="uploadRemoveUrl"
+     *      (upload)="uploadEventHandler($event)">
+     *    </kendo-upload>
+     *    `
+     *  })
+     *  export class UploadComponent {
+     *    uploadSaveUrl = 'saveUrl'; // should represent an actual API endpoint
+     *    uploadRemoveUrl = 'removeUrl'; // should represent an actual API endpoint
+     *
+     *    uploadEventHandler(e: UploadEvent) {
+     *      e.data = {
+     *        description: 'File description'
+     *      };
+     *    }
+     *  }
+     * ```
+     */
+    data;
+    /**
+     * The list of the files that will be uploaded.
+     */
+    files;
+    /**
+     * The headers of the request.
+     */
+    headers;
     /**
      * @hidden
      * Constructs the event arguments for the `upload` event.
@@ -585,6 +671,14 @@ class UploadEvent extends PreventableEvent {
  * ```
  */
 class UploadProgressEvent {
+    /**
+     * The list of files that are being uploaded.
+     */
+    files;
+    /**
+     * The portion that has been uploaded.
+     */
+    percentComplete;
     /**
      * @hidden
      * Constructs the event arguments for the `uploadprogress` event.
@@ -880,6 +974,7 @@ const isPresent = (value) => value !== null && value !== undefined;
  * @hidden
  */
 class ChunkMap {
+    _files;
     constructor() {
         this._files = {};
     }
@@ -911,54 +1006,55 @@ class ChunkMap {
  * @hidden
  */
 class UploadService {
+    http;
+    cancelEvent = new EventEmitter();
+    clearEvent = new EventEmitter();
+    completeEvent = new EventEmitter();
+    errorEvent = new EventEmitter();
+    pauseEvent = new EventEmitter();
+    removeEvent = new EventEmitter();
+    resumeEvent = new EventEmitter();
+    selectEvent = new EventEmitter();
+    successEvent = new EventEmitter();
+    uploadEvent = new EventEmitter();
+    uploadProgressEvent = new EventEmitter();
+    /**
+     * Required for the `ControlValueAccessor` integration
+     */
+    changeEvent = new EventEmitter();
+    /**
+     * Default async settings
+     */
+    async = {
+        autoUpload: true,
+        batch: false,
+        chunk: false,
+        concurrent: true,
+        removeField: "fileNames",
+        removeHeaders: new HttpHeaders(),
+        removeMethod: "POST",
+        removeUrl: "",
+        responseType: "json",
+        saveField: "files",
+        saveHeaders: new HttpHeaders(),
+        saveMethod: "POST",
+        saveUrl: "",
+        withCredentials: true
+    };
+    /**
+     * Default chunk settings
+     */
+    chunk = {
+        autoRetryAfter: 100,
+        size: 1024 * 1024,
+        maxAutoRetries: 1,
+        resumable: true
+    };
+    component = 'Upload';
+    chunkMap = new ChunkMap();
+    fileList = new FileMap();
     constructor(http) {
         this.http = http;
-        this.cancelEvent = new EventEmitter();
-        this.clearEvent = new EventEmitter();
-        this.completeEvent = new EventEmitter();
-        this.errorEvent = new EventEmitter();
-        this.pauseEvent = new EventEmitter();
-        this.removeEvent = new EventEmitter();
-        this.resumeEvent = new EventEmitter();
-        this.selectEvent = new EventEmitter();
-        this.successEvent = new EventEmitter();
-        this.uploadEvent = new EventEmitter();
-        this.uploadProgressEvent = new EventEmitter();
-        /**
-         * Required for the `ControlValueAccessor` integration
-         */
-        this.changeEvent = new EventEmitter();
-        /**
-         * Default async settings
-         */
-        this.async = {
-            autoUpload: true,
-            batch: false,
-            chunk: false,
-            concurrent: true,
-            removeField: "fileNames",
-            removeHeaders: new HttpHeaders(),
-            removeMethod: "POST",
-            removeUrl: "",
-            responseType: "json",
-            saveField: "files",
-            saveHeaders: new HttpHeaders(),
-            saveMethod: "POST",
-            saveUrl: "",
-            withCredentials: true
-        };
-        /**
-         * Default chunk settings
-         */
-        this.chunk = {
-            autoRetryAfter: 100,
-            size: 1024 * 1024,
-            maxAutoRetries: 1,
-            resumable: true
-        };
-        this.component = 'Upload';
-        this.chunkMap = new ChunkMap();
-        this.fileList = new FileMap();
     }
     get files() {
         return this.fileList;
@@ -1316,10 +1412,10 @@ class UploadService {
         }
         return false;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UploadService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UploadService });
 }
-UploadService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UploadService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
-UploadService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UploadService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UploadService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UploadService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i1.HttpClient }]; } });
 
@@ -1327,20 +1423,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * @hidden
  */
 class NavigationService {
+    uploadService;
+    zone;
+    onActionButtonFocus = new EventEmitter();
+    onFileAction = new EventEmitter();
+    onFileFocus = new EventEmitter();
+    onTabOut = new EventEmitter();
+    onWrapperFocus = new EventEmitter();
+    onSelectButtonFocus = new EventEmitter();
+    actionButtonsVisible = false;
+    fileListVisible = false;
+    focused = false;
+    keyBindings;
+    focusedFileIndex = 0;
+    _focusedIndex = -1;
     constructor(uploadService, zone) {
         this.uploadService = uploadService;
         this.zone = zone;
-        this.onActionButtonFocus = new EventEmitter();
-        this.onFileAction = new EventEmitter();
-        this.onFileFocus = new EventEmitter();
-        this.onTabOut = new EventEmitter();
-        this.onWrapperFocus = new EventEmitter();
-        this.onSelectButtonFocus = new EventEmitter();
-        this.actionButtonsVisible = false;
-        this.fileListVisible = false;
-        this.focused = false;
-        this.focusedFileIndex = 0;
-        this._focusedIndex = -1;
     }
     action(event) {
         const key = event.keyCode;
@@ -1455,10 +1554,10 @@ class NavigationService {
         const fileCount = this.uploadService.files.count;
         return this.actionButtonsVisible ? fileCount + 1 : fileCount - 1;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NavigationService, deps: [{ token: UploadService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NavigationService });
 }
-NavigationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NavigationService, deps: [{ token: UploadService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
-NavigationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NavigationService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NavigationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NavigationService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: UploadService }, { type: i0.NgZone }]; } });
 
@@ -1487,10 +1586,10 @@ class DropZoneService {
     has(id) {
         return id in components;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropZoneService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropZoneService });
 }
-DropZoneService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DropZoneService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-DropZoneService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DropZoneService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DropZoneService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropZoneService, decorators: [{
             type: Injectable
         }] });
 
@@ -1558,8 +1657,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-upload',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1728985017,
-    version: '17.0.0-develop.4',
+    publishDate: 1730798842,
+    version: '17.0.0-develop.40',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -1567,13 +1666,14 @@ const packageMetadata = {
  * Used to customize the rendering of the files in the list ([see example]({% slug templates_upload %}#toc-file-template)).
  */
 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 });
 }
-FileTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FileTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-FileTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: FileTemplateDirective, isStandalone: true, selector: "[kendoUploadFileTemplate], [kendoFileSelectFileTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FileTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FileTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoUploadFileTemplate], [kendoFileSelectFileTemplate]',
@@ -1585,13 +1685,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * 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)).
  */
 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 });
 }
-FileInfoTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FileInfoTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-FileInfoTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: FileInfoTemplateDirective, isStandalone: true, selector: "[kendoUploadFileInfoTemplate], [kendoFileSelectFileInfoTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FileInfoTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FileInfoTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoUploadFileInfoTemplate], [kendoFileSelectFileInfoTemplate]',
@@ -1603,70 +1704,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * @hidden
  */
 class UploadFileSelectBase {
-    constructor(uploadService, navigation, cdr, injector, zone) {
-        this.uploadService = uploadService;
-        this.navigation = navigation;
-        this.cdr = cdr;
-        this.injector = injector;
-        this.zone = zone;
-        /**
-         * Disables the component.
-         *
-         * @default false
-         */
-        this.disabled = false;
-        /**
-         * Enables the selection of multiple files
-         * If set to `false`, only one file can be selected at a time.
-         * @default true
-         */
-        this.multiple = true;
-        /**
-         * Toggles the visibility of the file list.
-         * @default true
-         */
-        this.showFileList = true;
-        /**
-         * Specifies the [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
-         * @default 0
-         */
-        this.tabindex = 0;
-        /**
-         * @hidden
-         */
-        this.focusableId = `k-${guid()}`;
-        /**
-         * @hidden
-         */
-        this.hostDefaultClasses = true;
-        /**
-         * Fires when the user navigates outside the component.
-         */
-        this.onBlur = new EventEmitter();
-        /**
-         * Fires when the component is focused.
-         */
-        this.onFocus = new EventEmitter();
-        /**
-         * Fires when files are selected. If prevented, the selected files will not be added to the list.
-         */
-        this.select = new EventEmitter();
-        /**
-         * Fires when a file is about to be removed. If prevented, the file will remain in the list.
-         */
-        this.remove = new EventEmitter();
-        /**
-         * @hidden
-         */
-        this._restrictions = {
-            allowedExtensions: [],
-            maxFileSize: 0,
-            minFileSize: 0
-        };
-        this.onTouchedCallback = (_) => { };
-        this.onChangeCallback = (_) => { };
-        this.fileList = this.uploadService.files;
-    }
+    uploadService;
+    navigation;
+    cdr;
+    injector;
+    zone;
+    /**
+     * @hidden
+     */
+    fileTemplate;
+    /**
+     * @hidden
+     */
+    fileInfoTemplate;
+    /**
+     * @hidden
+     */
+    fileSelectButton;
+    /**
+     * Sets the `accept` attribute of the internal `input` element of the component.
+     */
+    accept;
+    /**
+     * Disables the component.
+     *
+     * @default false
+     */
+    disabled = false;
+    /**
+     * Enables the selection of multiple files
+     * If set to `false`, only one file can be selected at a time.
+     * @default true
+     */
+    multiple = true;
+    /**
+     * Toggles the visibility of the file list.
+     * @default true
+     */
+    showFileList = true;
+    /**
+     * Specifies the [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
+     * @default 0
+     */
+    tabindex = 0;
     /**
      * Sets the restrictions for selected files.
      */
@@ -1677,12 +1757,60 @@ class UploadFileSelectBase {
     get restrictions() {
         return this._restrictions;
     }
+    /**
+     * Specifies the id of the external drop zone to associate with the component.
+     */
+    zoneId;
+    /**
+     * @hidden
+     */
+    focusableId = `k-${guid()}`;
+    /**
+     * @hidden
+     */
+    hostDefaultClasses = true;
     /**
      * @hidden
      */
     get hostDisabledClass() {
         return this.disabled;
     }
+    /**
+     * Fires when the user navigates outside the component.
+     */
+    onBlur = new EventEmitter();
+    /**
+     * Fires when the component is focused.
+     */
+    onFocus = new EventEmitter();
+    /**
+     * Fires when files are selected. If prevented, the selected files will not be added to the list.
+     */
+    select = new EventEmitter();
+    /**
+     * Fires when a file is about to be removed. If prevented, the file will remain in the list.
+     */
+    remove = new EventEmitter();
+    /**
+     * @hidden
+     */
+    _restrictions = {
+        allowedExtensions: [],
+        maxFileSize: 0,
+        minFileSize: 0
+    };
+    /**
+     * @hidden
+     */
+    fileList;
+    constructor(uploadService, navigation, cdr, injector, zone) {
+        this.uploadService = uploadService;
+        this.navigation = navigation;
+        this.cdr = cdr;
+        this.injector = injector;
+        this.zone = zone;
+        this.fileList = this.uploadService.files;
+    }
     /**
      * @hidden
      */
@@ -1724,6 +1852,8 @@ class UploadFileSelectBase {
         }
         this.cdr.markForCheck();
     }
+    onTouchedCallback = (_) => { };
+    onChangeCallback = (_) => { };
     /**
      * @hidden
      */
@@ -1784,10 +1914,10 @@ class UploadFileSelectBase {
     blurComponent() {
         this.blur();
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UploadFileSelectBase, deps: [{ token: UploadService }, { token: NavigationService }, { token: i0.ChangeDetectorRef }, { token: i0.Injector }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+    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 });
 }
-UploadFileSelectBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UploadFileSelectBase, deps: [{ token: UploadService }, { token: NavigationService }, { token: i0.ChangeDetectorRef }, { token: i0.Injector }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
-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 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UploadFileSelectBase, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UploadFileSelectBase, decorators: [{
             type: Directive,
             args: [{}]
         }], ctorParameters: function () { return [{ type: UploadService }, { type: NavigationService }, { type: i0.ChangeDetectorRef }, { type: i0.Injector }, { type: i0.NgZone }]; }, propDecorators: { fileTemplate: [{
@@ -1838,12 +1968,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * @hidden
  */
 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';
     }
@@ -1856,6 +1988,11 @@ 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;
@@ -1884,9 +2021,8 @@ 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: UploadService }, { token: i1$1.LocalizationService }, { token: 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: UploadService }, { token: i1$1.LocalizationService }, { token: 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')}}
@@ -1897,7 +2033,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',
@@ -1945,11 +2082,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * @hidden
  */
 class FileListItemDirective {
+    navigationService;
+    uploadService;
+    files;
+    index;
+    fileClass = true;
+    focused = false;
+    element;
     constructor(el, navigationService, uploadService) {
         this.navigationService = navigationService;
         this.uploadService = uploadService;
-        this.fileClass = true;
-        this.focused = false;
         this.element = el;
     }
     focus() {
@@ -1992,10 +2134,10 @@ class FileListItemDirective {
             this.navigationService.focusedIndex = this.navigationService.focusedFileIndex = this.index;
         }
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FileListItemDirective, deps: [{ token: i0.ElementRef }, { token: NavigationService }, { token: UploadService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: FileListItemDirective, isStandalone: true, selector: "[kendoUploadFileListItem]", inputs: { files: "files", index: "index" }, host: { listeners: { "focus": "onFocus()", "blur": "onBlur()", "click": "onClick($event)" }, properties: { "class.k-file": "this.fileClass", "attr.data-uid": "this.uidAttribute", "attr.tabIndex": "this.tabIndex", "class.k-file-error": "this.kFileError", "class.k-file-invalid": "this.kFileInvalid", "class.k-file-progress": "this.kFileProgress", "class.k-file-success": "this.kFileSuccess", "class.k-focus": "this.kStateFocused" } }, ngImport: i0 });
 }
-FileListItemDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FileListItemDirective, deps: [{ token: i0.ElementRef }, { token: NavigationService }, { token: UploadService }], target: i0.ɵɵFactoryTarget.Directive });
-FileListItemDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: FileListItemDirective, isStandalone: true, selector: "[kendoUploadFileListItem]", inputs: { files: "files", index: "index" }, host: { listeners: { "focus": "onFocus()", "blur": "onBlur()", "click": "onClick($event)" }, properties: { "class.k-file": "this.fileClass", "attr.data-uid": "this.uidAttribute", "attr.tabIndex": "this.tabIndex", "class.k-file-error": "this.kFileError", "class.k-file-invalid": "this.kFileInvalid", "class.k-file-progress": "this.kFileProgress", "class.k-file-success": "this.kFileSuccess", "class.k-focus": "this.kStateFocused" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FileListItemDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FileListItemDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoUploadFileListItem]',
@@ -2044,9 +2186,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * @hidden
  */
 class FileListItemBase {
+    uploadService;
+    progressComplete = 0;
+    localization;
+    uploadProgressSubscription;
     constructor(uploadService) {
         this.uploadService = uploadService;
-        this.progressComplete = 0;
     }
     subscribeUploadProgress(uploadProgressHandler) {
         this.uploadProgressSubscription = this.uploadService.uploadProgressEvent.subscribe(uploadProgressHandler);
@@ -2073,10 +2218,10 @@ class FileListItemBase {
     textFor(key) {
         return this.localization.get(key);
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FileListItemBase, deps: [{ token: UploadService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FileListItemBase, selector: "ng-component", ngImport: i0, template: '', isInline: true });
 }
-FileListItemBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FileListItemBase, deps: [{ token: UploadService }], target: i0.ɵɵFactoryTarget.Component });
-FileListItemBase.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: FileListItemBase, selector: "ng-component", ngImport: i0, template: '', isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FileListItemBase, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FileListItemBase, decorators: [{
             type: Component,
             args: [{ template: '' }]
         }], ctorParameters: function () { return [{ type: UploadService }]; } });
@@ -2085,15 +2230,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * @hidden
  */
 class FileListItemActionButtonComponent {
+    uploadService;
+    localization;
+    navigation;
+    file;
+    disabled;
+    progress;
+    retrySVGIcon = arrowRotateCwSmallIcon;
+    playSVGIcon = playSmIcon;
+    pauseSVGIcon = pauseSmIcon;
+    cancelSVGIcon = cancelIcon;
+    deleteSVGIcon = xIcon;
     constructor(uploadService, localization, navigation) {
         this.uploadService = uploadService;
         this.localization = localization;
         this.navigation = navigation;
-        this.retrySVGIcon = arrowRotateCwSmallIcon;
-        this.playSVGIcon = playSmIcon;
-        this.pauseSVGIcon = pauseSmIcon;
-        this.cancelSVGIcon = cancelIcon;
-        this.deleteSVGIcon = xIcon;
     }
     onRetryClick() {
         if (this.disabled) {
@@ -2164,9 +2315,8 @@ class FileListItemActionButtonComponent {
         }
         return true;
     }
-}
-FileListItemActionButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FileListItemActionButtonComponent, deps: [{ token: UploadService }, { token: i1$1.LocalizationService }, { token: NavigationService }], target: i0.ɵɵFactoryTarget.Component });
-FileListItemActionButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: FileListItemActionButtonComponent, isStandalone: true, selector: "kendo-upload-file-list-item-action-button", inputs: { file: "file", disabled: "disabled", progress: "progress" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FileListItemActionButtonComponent, deps: [{ token: UploadService }, { token: i1$1.LocalizationService }, { token: NavigationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FileListItemActionButtonComponent, isStandalone: true, selector: "kendo-upload-file-list-item-action-button", inputs: { file: "file", disabled: "disabled", progress: "progress" }, ngImport: i0, template: `
     <span class="k-upload-actions">
         <span class="k-upload-pct" *ngIf="isUploading || isPaused">{{progress}}%</span>
 
@@ -2215,8 +2365,9 @@ FileListItemActionButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion
             (click)="onRemoveCancelClick($event)"
         ></button>
     </span>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: 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"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FileListItemActionButtonComponent, decorators: [{
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FileListItemActionButtonComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-upload-file-list-item-action-button',
@@ -2285,10 +2436,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * @hidden
  */
 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;
@@ -2326,9 +2482,8 @@ 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$1.LocalizationService }, { token: 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$1.LocalizationService }, { token: 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"
@@ -2374,15 +2529,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: [
@@ -2456,6 +2612,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * @hidden
  */
 class FileListSingleItemComponent extends FileListItemBase {
+    localization;
+    disabled;
+    file;
+    fileInfoTemplate;
     constructor(localization, uploadService) {
         super(uploadService);
         this.localization = localization;
@@ -2505,9 +2665,8 @@ 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$1.LocalizationService }, { token: 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$1.LocalizationService }, { token: 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"
@@ -2545,15 +2704,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: [
@@ -2620,10 +2780,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * @hidden
  */
 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();
     }
@@ -2689,9 +2858,8 @@ 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: UploadService }, { token: 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: UploadService }, { token: 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
@@ -2718,7 +2886,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]',
@@ -2772,12 +2941,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * @hidden
  */
 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) {
@@ -2819,9 +2994,8 @@ 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$1.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$1.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"
@@ -2829,7 +3003,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',
@@ -2852,16 +3027,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * @hidden
  */
 class FileSelectDirective {
+    uploadService;
+    navigation;
+    dir;
+    disabled;
+    multiple;
+    restrictions;
+    accept;
+    required;
+    type = "file";
+    autocomplete = "off";
+    tabIndex = -1;
+    ariaHidden = true;
+    element;
     constructor(uploadService, navigation, el) {
         this.uploadService = uploadService;
         this.navigation = navigation;
-        this.type = "file";
-        this.autocomplete = "off";
-        this.tabIndex = -1;
-        this.ariaHidden = true;
-        this.classNames = true;
         this.element = el;
     }
+    classNames = true;
     get nameAttribute() {
         return this.uploadService.async.saveField;
     }
@@ -2905,10 +3089,10 @@ class FileSelectDirective {
             this.navigation.focusedIndex = -1;
         });
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FileSelectDirective, deps: [{ token: UploadService }, { token: NavigationService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: FileSelectDirective, isStandalone: true, selector: "[kendoFileSelect]", inputs: { dir: "dir", disabled: "disabled", multiple: "multiple", restrictions: "restrictions", accept: "accept", required: "required" }, host: { listeners: { "change": "onInputChange($event)" }, properties: { "attr.type": "this.type", "attr.autocomplete": "this.autocomplete", "attr.tabindex": "this.tabIndex", "attr.aria-hidden": "this.ariaHidden", "class.k-hidden": "this.classNames", "attr.name": "this.nameAttribute", "attr.multiple": "this.multipleAttribute", "attr.dir": "this.dirAttribute", "attr.disabled": "this.disabledAttribute", "attr.accept": "this.acceptAttribute", "attr.required": "this.requiredAttribute" } }, ngImport: i0 });
 }
-FileSelectDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FileSelectDirective, deps: [{ token: UploadService }, { token: NavigationService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-FileSelectDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: FileSelectDirective, isStandalone: true, selector: "[kendoFileSelect]", inputs: { dir: "dir", disabled: "disabled", multiple: "multiple", restrictions: "restrictions", accept: "accept", required: "required" }, host: { listeners: { "change": "onInputChange($event)" }, properties: { "attr.type": "this.type", "attr.autocomplete": "this.autocomplete", "attr.tabindex": "this.tabIndex", "attr.aria-hidden": "this.ariaHidden", "class.k-hidden": "this.classNames", "attr.name": "this.nameAttribute", "attr.multiple": "this.multipleAttribute", "attr.dir": "this.dirAttribute", "attr.disabled": "this.disabledAttribute", "attr.accept": "this.acceptAttribute", "attr.required": "this.requiredAttribute" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FileSelectDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FileSelectDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoFileSelect]',
@@ -2968,12 +3152,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * @hidden
  */
 class DropZoneBase {
-    constructor(element, renderer, cssClass) {
-        this.element = element;
-        this.renderer = renderer;
-        this.hideIntervalElement = null;
-        this.hoverClass = cssClass;
-    }
+    element;
+    renderer;
+    hoverClass;
+    lastDragElement;
+    hideIntervalElement = null;
     /**
      * @hidden
      */
@@ -2999,6 +3182,11 @@ class DropZoneBase {
         this.lastDragElement = new Date();
         return false;
     }
+    constructor(element, renderer, cssClass) {
+        this.element = element;
+        this.renderer = renderer;
+        this.hoverClass = cssClass;
+    }
     calculateTimeDiff(prevEvent) {
         return new Date().getTime() - prevEvent.getTime();
     }
@@ -3008,10 +3196,10 @@ class DropZoneBase {
     removeClass(className) {
         this.renderer.removeClass(this.element.nativeElement, className);
     }
+    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 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: DropZoneBase, host: { listeners: { "dragenter": "onElementDragEnterListener()", "dragover": "onElementDragOverListener()" } }, ngImport: i0 });
 }
-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 });
-DropZoneBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: DropZoneBase, host: { listeners: { "dragenter": "onElementDragEnterListener()", "dragover": "onElementDragOverListener()" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DropZoneBase, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropZoneBase, decorators: [{
             type: Directive
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: undefined, decorators: [{
                     type: Inject,
@@ -3028,13 +3216,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * @hidden
  */
 class DropZoneInternalDirective extends DropZoneBase {
+    ngZone;
+    uploadService;
+    disabled;
+    multiple;
+    restrictions;
+    initialClassName = true;
+    unsubscribeDocumentDragEnter;
+    unsubscribeDocumentDragOver;
+    lastDragDocument;
+    hideIntervalDocument = null;
+    activeClass = 'k-dropzone-active';
     constructor(element, renderer, ngZone, uploadService) {
         super(element, renderer, 'k-hover');
         this.ngZone = ngZone;
         this.uploadService = uploadService;
-        this.initialClassName = true;
-        this.hideIntervalDocument = null;
-        this.activeClass = 'k-dropzone-active';
         this.ngZone.runOutsideAngular(() => {
             this.unsubscribeDocumentDragEnter = this.renderer.listen('document', 'dragenter', () => this.onDocumentDragEnter());
             this.unsubscribeDocumentDragOver = this.renderer.listen('document', 'dragover', () => this.onDocumentDragOver());
@@ -3086,10 +3282,10 @@ class DropZoneInternalDirective extends DropZoneBase {
         }
         return false;
     }
+    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: UploadService }], target: i0.ɵɵFactoryTarget.Directive });
+    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 });
 }
-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: UploadService }], target: i0.ɵɵFactoryTarget.Directive });
-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 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DropZoneInternalDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropZoneInternalDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: `
@@ -3119,10 +3315,94 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * @hidden
  */
 class Messages extends ComponentMessages {
+    /**
+     * Sets the text for the **Cancel** button.
+     */
+    cancel;
+    /**
+     * Sets the text for the **Clear** button.
+     */
+    clearSelectedFiles;
+    /**
+     * Sets the drop-zone hint.
+     */
+    dropFilesHere;
+    /**
+     * Sets the external drop-zone hint.
+     */
+    externalDropFilesHere;
+    /**
+     * Sets the status message for a batch of files.
+     */
+    filesBatchStatus;
+    /**
+     * Sets the status message for a batch of files after failed upload.
+     */
+    filesBatchStatusFailed;
+    /**
+     * Sets the status message for a batch of files after successful upload.
+     */
+    filesBatchStatusUploaded;
+    /**
+     * Sets the file status message after failed upload.
+     */
+    fileStatusFailed;
+    /**
+     * Sets the file status message after successful upload.
+     */
+    fileStatusUploaded;
+    /**
+     * Sets the header status message when the file upload is paused.
+     */
+    headerStatusPaused;
+    /**
+     * Sets the header status message after the file upload completes.
+     */
+    headerStatusUploaded;
+    /**
+     * Sets the header status message during the upload of the file.
+     */
+    headerStatusUploading;
+    /**
+     * Sets the text for the invalid `allowedExtensions` restriction message.
+     */
+    invalidFileExtension;
+    /**
+     * Sets the text for the invalid `maxFileSize` restriction message.
+     */
+    invalidMaxFileSize;
+    /**
+     * Sets the text for the invalid `minFileSize` restriction message.
+     */
+    invalidMinFileSize;
+    /**
+     * Sets the text for the **Pause** button.
+     */
+    pause;
+    /**
+     * Sets the text for the **Remove** button.
+     */
+    remove;
+    /**
+     * Sets the text for the **Resume** button.
+     */
+    resume;
+    /**
+     * Sets the text for the **Retry** button.
+     */
+    retry;
+    /**
+     * Sets the text for the **Select** button.
+     */
+    select;
+    /**
+     * Sets the text for the **Upload files** button.
+     */
+    uploadSelectedFiles;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: Messages, inputs: { cancel: "cancel", clearSelectedFiles: "clearSelectedFiles", dropFilesHere: "dropFilesHere", externalDropFilesHere: "externalDropFilesHere", filesBatchStatus: "filesBatchStatus", filesBatchStatusFailed: "filesBatchStatusFailed", filesBatchStatusUploaded: "filesBatchStatusUploaded", fileStatusFailed: "fileStatusFailed", fileStatusUploaded: "fileStatusUploaded", headerStatusPaused: "headerStatusPaused", headerStatusUploaded: "headerStatusUploaded", headerStatusUploading: "headerStatusUploading", invalidFileExtension: "invalidFileExtension", invalidMaxFileSize: "invalidMaxFileSize", invalidMinFileSize: "invalidMinFileSize", pause: "pause", remove: "remove", resume: "resume", retry: "retry", select: "select", uploadSelectedFiles: "uploadSelectedFiles" }, usesInheritance: true, ngImport: i0 });
 }
-Messages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-Messages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: Messages, inputs: { cancel: "cancel", clearSelectedFiles: "clearSelectedFiles", dropFilesHere: "dropFilesHere", externalDropFilesHere: "externalDropFilesHere", filesBatchStatus: "filesBatchStatus", filesBatchStatusFailed: "filesBatchStatusFailed", filesBatchStatusUploaded: "filesBatchStatusUploaded", fileStatusFailed: "fileStatusFailed", fileStatusUploaded: "fileStatusUploaded", headerStatusPaused: "headerStatusPaused", headerStatusUploaded: "headerStatusUploaded", headerStatusUploading: "headerStatusUploading", invalidFileExtension: "invalidFileExtension", invalidMaxFileSize: "invalidMaxFileSize", invalidMinFileSize: "invalidMinFileSize", pause: "pause", remove: "remove", resume: "resume", retry: "retry", select: "select", uploadSelectedFiles: "uploadSelectedFiles" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: Messages, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: Messages, decorators: [{
             type: Directive
         }], propDecorators: { cancel: [{
                 type: Input
@@ -3172,19 +3452,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * @hidden
  */
 class LocalizedMessagesDirective extends Messages {
+    service;
     constructor(service) {
         super();
         this.service = service;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LocalizedMessagesDirective, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: LocalizedMessagesDirective, isStandalone: true, selector: "\n    [kendoUploadLocalizedMessages],\n    [kendoFileSelectLocalizedMessages],\n    [kendoUploadDropZoneLocalizedMessages]\n  ", providers: [
+            {
+                provide: Messages,
+                useExisting: forwardRef(() => LocalizedMessagesDirective)
+            }
+        ], usesInheritance: true, ngImport: i0 });
 }
-LocalizedMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LocalizedMessagesDirective, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
-LocalizedMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: LocalizedMessagesDirective, isStandalone: true, selector: "\n    [kendoUploadLocalizedMessages],\n    [kendoFileSelectLocalizedMessages],\n    [kendoUploadDropZoneLocalizedMessages]\n  ", providers: [
-        {
-            provide: Messages,
-            useExisting: forwardRef(() => LocalizedMessagesDirective)
-        }
-    ], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LocalizedMessagesDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LocalizedMessagesDirective, decorators: [{
             type: Directive,
             args: [{
                     providers: [
@@ -3217,83 +3498,14 @@ let idx$1 = 0;
  * Represents the [Kendo UI Upload component for Angular]({% slug overview_upload %}).
  */
 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)).
@@ -3419,6 +3631,12 @@ 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.
      *
@@ -3430,6 +3648,11 @@ class UploadComponent extends UploadFileSelectBase {
     get concurrent() {
         return this.uploadService.async.concurrent;
     }
+    /**
+     * Toggles the visibility of the file list.
+     * @default true
+     */
+    showFileList = true;
     /**
      * @hidden
      */
@@ -3439,9 +3662,85 @@ 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();
@@ -3696,23 +3995,22 @@ 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: UploadService }, { token: i1$1.LocalizationService }, { token: NavigationService }, { token: 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: UploadService }, { token: i1$1.LocalizationService }, { token: NavigationService }, { token: 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"
@@ -3823,8 +4121,9 @@ UploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versio
         [disabled]="disabled"
         [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], 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"] }, { 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: [{
+    `, 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: "16.2.12", ngImport: i0, type: UploadComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoUpload',
@@ -4023,6 +4322,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }] } });
 
 class UploadDropZoneDirective {
+    dropZoneService;
+    /**
+     * Specifies the id of the drop zone used to associate it with
+     * an existing Upload component.
+     */
+    zoneId;
+    /**
+     * Specifies the id of the drop zone used to associate it with
+     * an existing FileSelect component.
+     */
+    fileSelectZoneId;
     constructor(dropZoneService) {
         this.dropZoneService = dropZoneService;
     }
@@ -4073,12 +4383,12 @@ class UploadDropZoneDirective {
         const id = this.zoneId || this.fileSelectZoneId;
         return this.dropZoneService.getComponents(id);
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UploadDropZoneDirective, deps: [{ token: DropZoneService }], target: i0.ɵɵFactoryTarget.Directive });
+    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: [
+            DropZoneService
+        ], ngImport: i0 });
 }
-UploadDropZoneDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UploadDropZoneDirective, deps: [{ token: DropZoneService }], target: i0.ɵɵFactoryTarget.Directive });
-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: [
-        DropZoneService
-    ], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UploadDropZoneDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UploadDropZoneDirective, decorators: [{
             type: Directive,
             args: [{
                     providers: [
@@ -4108,18 +4418,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * Represents the [Kendo UI UploadDropZone component for Angular]({% slug overview_upload %}).
  */
 class UploadDropZoneComponent extends DropZoneBase {
-    constructor(element, renderer, localization) {
-        super(element, renderer, 'k-external-dropzone-hover');
-        this.localization = localization;
-        this.hostClass = true;
-        this._svgIcon = uploadIcon;
-        this.localizationChangeSubscription = this.localization.changes.subscribe(({ rtl }) => {
-            this.direction = rtl ? 'rtl' : 'ltr';
-        });
-    }
+    localization;
+    hostClass = true;
     get dirAttribute() {
         return this.direction;
     }
+    /**
+     * Defines the id of the component.
+     * It is used to associate it with an existing Upload or FileSelect component.
+     */
+    zoneId;
+    /**
+     * Defines the name for an existing icon in a Kendo UI theme.
+     * The icon is rendered inside the DropZone.
+     */
+    icon;
+    /**
+     * Defines a CSS class or multiple classes separated by spaces,
+     * which are applied to a span element.
+     * Allows the usage of custom icons.
+     */
+    iconClass;
     /**
      * Defines an SVGIcon to be rendered inside the DropZone.
      * The input can take either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
@@ -4133,6 +4452,16 @@ class UploadDropZoneComponent extends DropZoneBase {
     get svgIcon() {
         return this._svgIcon;
     }
+    direction;
+    localizationChangeSubscription;
+    _svgIcon = uploadIcon;
+    constructor(element, renderer, localization) {
+        super(element, renderer, 'k-external-dropzone-hover');
+        this.localization = localization;
+        this.localizationChangeSubscription = this.localization.changes.subscribe(({ rtl }) => {
+            this.direction = rtl ? 'rtl' : 'ltr';
+        });
+    }
     /**
      * @hidden
      */
@@ -4155,15 +4484,14 @@ class UploadDropZoneComponent extends DropZoneBase {
             this.localizationChangeSubscription.unsubscribe();
         }
     }
-}
-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$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-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: [
-        LocalizationService,
-        {
-            provide: L10N_PREFIX,
-            useValue: 'kendo.uploaddropzone'
-        }
-    ], exportAs: ["kendoUploadDropZone"], usesInheritance: true, ngImport: i0, template: `
+    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$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+    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: [
+            LocalizationService,
+            {
+                provide: L10N_PREFIX,
+                useValue: 'kendo.uploaddropzone'
+            }
+        ], exportAs: ["kendoUploadDropZone"], usesInheritance: true, ngImport: i0, template: `
         <ng-container kendoUploadDropZoneLocalizedMessages
             i18n-externalDropFilesHere='kendo.uploaddropzone.externalDropFilesHere|Sets the external drop-zone hint'
             externalDropFilesHere='Drag and drop files here to upload'>
@@ -4182,7 +4510,8 @@ UploadDropZoneComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
             </span>
         </div>
     `, 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"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UploadDropZoneComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UploadDropZoneComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoUploadDropZone',
@@ -4242,6 +4571,48 @@ const FILESELECT_VALUE_ACCESSOR = {
 };
 let idx = 0;
 class FileSelectComponent extends UploadFileSelectBase {
+    uploadService;
+    localization;
+    navigation;
+    dropZoneService;
+    ngZone;
+    renderer;
+    cdr;
+    injector;
+    fileSelectInput;
+    get dir() {
+        return this.direction;
+    }
+    /**
+     * Sets the `name` attribute of the `input` element of the FileSelect.
+     */
+    set name(name) {
+        this.uploadService.async.saveField = name;
+    }
+    get name() {
+        return this.uploadService.async.saveField;
+    }
+    /**
+     * Fires when the value of the component has changed as a result of a successful `select` or `remove` operation.
+     */
+    valueChange = new EventEmitter();
+    /**
+     * @hidden
+     */
+    _restrictions = {
+        allowedExtensions: [],
+        maxFileSize: 0,
+        minFileSize: 0
+    };
+    direction;
+    wrapper;
+    fileListId;
+    documentClick; // eslint-disable-line @typescript-eslint/ban-types
+    blurSubscription;
+    wrapperFocusSubscription;
+    selectButtonFocusSubscription;
+    localizationChangeSubscription;
+    subs;
     constructor(uploadService, localization, navigation, dropZoneService, ngZone, renderer, cdr, wrapper, injector) {
         super(uploadService, navigation, cdr, injector, ngZone);
         this.uploadService = uploadService;
@@ -4252,18 +4623,6 @@ class FileSelectComponent extends UploadFileSelectBase {
         this.renderer = renderer;
         this.cdr = cdr;
         this.injector = injector;
-        /**
-         * Fires when the value of the component has changed as a result of a successful `select` or `remove` operation.
-         */
-        this.valueChange = new EventEmitter();
-        /**
-         * @hidden
-         */
-        this._restrictions = {
-            allowedExtensions: [],
-            maxFileSize: 0,
-            minFileSize: 0
-        };
         validatePackage(packageMetadata);
         this.wrapper = wrapper.nativeElement;
         this.direction = localization.rtl ? 'rtl' : 'ltr';
@@ -4276,18 +4635,6 @@ class FileSelectComponent extends UploadFileSelectBase {
         this.attachEventHandlers();
         this.setDefaultSettings();
     }
-    get dir() {
-        return this.direction;
-    }
-    /**
-     * Sets the `name` attribute of the `input` element of the FileSelect.
-     */
-    set name(name) {
-        this.uploadService.async.saveField = name;
-    }
-    get name() {
-        return this.uploadService.async.saveField;
-    }
     ngOnInit() {
         const { buttonId, fileListId } = this.getIds();
         this.focusableId = buttonId;
@@ -4447,23 +4794,22 @@ class FileSelectComponent extends UploadFileSelectBase {
         this.uploadService.async.autoUpload = false;
         this.uploadService.component = 'FileSelect';
     }
-}
-FileSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FileSelectComponent, deps: [{ token: UploadService }, { token: i1$1.LocalizationService }, { token: NavigationService }, { token: DropZoneService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-FileSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: FileSelectComponent, isStandalone: true, selector: "kendo-fileselect", inputs: { name: "name" }, outputs: { valueChange: "valueChange" }, host: { properties: { "attr.dir": "this.dir" } }, providers: [
-        LocalizationService,
-        NavigationService,
-        UploadService,
-        DropZoneService,
-        FILESELECT_VALUE_ACCESSOR,
-        {
-            provide: L10N_PREFIX,
-            useValue: 'kendo.fileselect'
-        },
-        {
-            provide: KendoInput,
-            useExisting: forwardRef(() => FileSelectComponent)
-        }
-    ], viewQueries: [{ propertyName: "fileSelectInput", first: true, predicate: ["fileSelectInput"], descendants: true, static: true }], exportAs: ["kendoFileSelect"], usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FileSelectComponent, deps: [{ token: UploadService }, { token: i1$1.LocalizationService }, { token: NavigationService }, { token: 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: FileSelectComponent, isStandalone: true, selector: "kendo-fileselect", inputs: { name: "name" }, outputs: { valueChange: "valueChange" }, host: { properties: { "attr.dir": "this.dir" } }, providers: [
+            LocalizationService,
+            NavigationService,
+            UploadService,
+            DropZoneService,
+            FILESELECT_VALUE_ACCESSOR,
+            {
+                provide: L10N_PREFIX,
+                useValue: 'kendo.fileselect'
+            },
+            {
+                provide: KendoInput,
+                useExisting: forwardRef(() => FileSelectComponent)
+            }
+        ], viewQueries: [{ propertyName: "fileSelectInput", first: true, predicate: ["fileSelectInput"], descendants: true, static: true }], exportAs: ["kendoFileSelect"], usesInheritance: true, ngImport: i0, template: `
         <ng-container kendoFileSelectLocalizedMessages
             i18n-dropFilesHere="kendo.fileselect.dropFilesHere|The drop zone hint"
             dropFilesHere="Drop files here to select"
@@ -4525,8 +4871,9 @@ FileSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
             [fileInfoTemplate]="fileInfoTemplate"
             [id]="fileListId">
         </ul>
-    `, 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], 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"] }, { 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: FileListComponent, selector: "[kendo-upload-file-list]", inputs: ["disabled", "fileList", "fileTemplate", "fileInfoTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FileSelectComponent, decorators: [{
+    `, 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: FileListComponent, selector: "[kendo-upload-file-list]", inputs: ["disabled", "fileList", "fileTemplate", "fileInfoTemplate"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FileSelectComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoFileSelect',
@@ -4638,22 +4985,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * ```
  */
 class CustomMessagesComponent extends Messages {
+    service;
+    get override() {
+        return true;
+    }
     constructor(service) {
         super();
         this.service = service;
     }
-    get override() {
-        return true;
-    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CustomMessagesComponent, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CustomMessagesComponent, isStandalone: true, selector: "kendo-upload-messages, kendo-fileselect-messages, kendo-uploaddropzone-messages", providers: [
+            {
+                provide: Messages,
+                useExisting: forwardRef(() => CustomMessagesComponent)
+            }
+        ], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
 }
-CustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CustomMessagesComponent, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-CustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CustomMessagesComponent, isStandalone: true, selector: "kendo-upload-messages, kendo-fileselect-messages, kendo-uploaddropzone-messages", providers: [
-        {
-            provide: Messages,
-            useExisting: forwardRef(() => CustomMessagesComponent)
-        }
-    ], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CustomMessagesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CustomMessagesComponent, decorators: [{
             type: Component,
             args: [{
                     providers: [
@@ -4705,15 +5053,15 @@ const KENDO_UPLOADS = [
  * Represents the [NgModule](https://angular.io/api/core/NgModule) definition for the FileSelect component.
  */
 class FileSelectModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FileSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: FileSelectModule, imports: [FileSelectComponent, FileTemplateDirective, FileInfoTemplateDirective, CustomMessagesComponent, UploadDropZoneDirective, UploadDropZoneComponent], exports: [FileSelectComponent, FileTemplateDirective, FileInfoTemplateDirective, CustomMessagesComponent, UploadDropZoneDirective, UploadDropZoneComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FileSelectModule, providers: [
+            IconsService,
+            PopupService,
+            ResizeBatchService
+        ], imports: [FileSelectComponent, UploadDropZoneComponent] });
 }
-FileSelectModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FileSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-FileSelectModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: FileSelectModule, imports: [FileSelectComponent, FileTemplateDirective, FileInfoTemplateDirective, CustomMessagesComponent, UploadDropZoneDirective, UploadDropZoneComponent], exports: [FileSelectComponent, FileTemplateDirective, FileInfoTemplateDirective, CustomMessagesComponent, UploadDropZoneDirective, UploadDropZoneComponent] });
-FileSelectModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FileSelectModule, providers: [
-        IconsService,
-        PopupService,
-        ResizeBatchService
-    ], imports: [FileSelectComponent, CustomMessagesComponent, UploadDropZoneComponent] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FileSelectModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FileSelectModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [...KENDO_FILESELECT],
@@ -4731,15 +5079,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * Represents the [NgModule](https://angular.io/api/core/NgModule) definition for the Upload component.
  */
 class UploadModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UploadModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: UploadModule, imports: [UploadComponent, UploadActionButtonsComponent, UploadStatusTotalComponent, FileTemplateDirective, FileInfoTemplateDirective, CustomMessagesComponent, UploadDropZoneDirective, UploadDropZoneComponent], exports: [UploadComponent, UploadActionButtonsComponent, UploadStatusTotalComponent, FileTemplateDirective, FileInfoTemplateDirective, CustomMessagesComponent, UploadDropZoneDirective, UploadDropZoneComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UploadModule, providers: [
+            IconsService,
+            PopupService,
+            ResizeBatchService
+        ], imports: [UploadComponent, UploadStatusTotalComponent, UploadDropZoneComponent] });
 }
-UploadModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UploadModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-UploadModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: UploadModule, imports: [UploadComponent, UploadActionButtonsComponent, UploadStatusTotalComponent, FileTemplateDirective, FileInfoTemplateDirective, CustomMessagesComponent, UploadDropZoneDirective, UploadDropZoneComponent], exports: [UploadComponent, UploadActionButtonsComponent, UploadStatusTotalComponent, FileTemplateDirective, FileInfoTemplateDirective, CustomMessagesComponent, UploadDropZoneDirective, UploadDropZoneComponent] });
-UploadModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UploadModule, providers: [
-        IconsService,
-        PopupService,
-        ResizeBatchService
-    ], imports: [UploadComponent, UploadActionButtonsComponent, UploadStatusTotalComponent, CustomMessagesComponent, UploadDropZoneComponent] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UploadModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UploadModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [...KENDO_UPLOAD],
@@ -4779,15 +5127,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * ```
  */
 class UploadsModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UploadsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: UploadsModule, imports: [FileSelectComponent, FileTemplateDirective, FileInfoTemplateDirective, CustomMessagesComponent, UploadDropZoneDirective, UploadDropZoneComponent, UploadComponent, UploadActionButtonsComponent, UploadStatusTotalComponent, FileTemplateDirective, FileInfoTemplateDirective, CustomMessagesComponent, UploadDropZoneDirective, UploadDropZoneComponent], exports: [FileSelectComponent, FileTemplateDirective, FileInfoTemplateDirective, CustomMessagesComponent, UploadDropZoneDirective, UploadDropZoneComponent, UploadComponent, UploadActionButtonsComponent, UploadStatusTotalComponent, FileTemplateDirective, FileInfoTemplateDirective, CustomMessagesComponent, UploadDropZoneDirective, UploadDropZoneComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UploadsModule, providers: [
+            IconsService,
+            PopupService,
+            ResizeBatchService
+        ], imports: [FileSelectComponent, UploadDropZoneComponent, UploadComponent, UploadStatusTotalComponent, UploadDropZoneComponent] });
 }
-UploadsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UploadsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-UploadsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: UploadsModule, imports: [FileSelectComponent, FileTemplateDirective, FileInfoTemplateDirective, CustomMessagesComponent, UploadDropZoneDirective, UploadDropZoneComponent, UploadComponent, UploadActionButtonsComponent, UploadStatusTotalComponent, FileTemplateDirective, FileInfoTemplateDirective, CustomMessagesComponent, UploadDropZoneDirective, UploadDropZoneComponent], exports: [FileSelectComponent, FileTemplateDirective, FileInfoTemplateDirective, CustomMessagesComponent, UploadDropZoneDirective, UploadDropZoneComponent, UploadComponent, UploadActionButtonsComponent, UploadStatusTotalComponent, FileTemplateDirective, FileInfoTemplateDirective, CustomMessagesComponent, UploadDropZoneDirective, UploadDropZoneComponent] });
-UploadsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UploadsModule, providers: [
-        IconsService,
-        PopupService,
-        ResizeBatchService
-    ], imports: [FileSelectComponent, CustomMessagesComponent, UploadDropZoneComponent, UploadComponent, UploadActionButtonsComponent, UploadStatusTotalComponent, CustomMessagesComponent, UploadDropZoneComponent] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UploadsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UploadsModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [...KENDO_UPLOADS],