@progress/kendo-angular-upload 16.0.0-develop.2 → 16.0.0-develop.21

package/fesm2020/progress-kendo-angular-upload.mjs

@@ -5,24 +5,24 @@
 import * as i1 from '@angular/common/http';
 import { HttpHeaders, HttpRequest, HttpEventType, HttpResponse } from '@angular/common/http';
 import * as i0 from '@angular/core';
-import { EventEmitter, Injectable, Directive, Input, HostBinding, HostListener, Component, ViewChildren, forwardRef, Inject, ElementRef, ContentChild, ViewChild, Output, isDevMode, NgModule } from '@angular/core';
+import { EventEmitter, Injectable, Directive, Inject, HostListener, Input, HostBinding, Component, ViewChildren, forwardRef, ElementRef, ContentChild, ViewChild, Output, isDevMode, NgModule } from '@angular/core';
 import { guid, Keys, isControlRequired, isDocumentAvailable, KendoInput, isChanged } from '@progress/kendo-angular-common';
-import { fileAudioIcon, fileVideoIcon, fileImageIcon, fileTxtIcon, filePresentationIcon, fileDataIcon, fileProgrammingIcon, filePdfIcon, fileConfigIcon, fileZipIcon, fileDiscImageIcon, arrowRotateCwSmallIcon, playSmIcon, pauseSmIcon, cancelIcon, xIcon, fileIcon, copyIcon, checkIcon, exclamationCircleIcon, uploadIcon } from '@progress/kendo-svg-icons';
+import { fileAudioIcon, fileVideoIcon, fileImageIcon, fileTxtIcon, filePresentationIcon, fileDataIcon, fileProgrammingIcon, filePdfIcon, fileConfigIcon, fileZipIcon, fileDiscImageIcon, arrowRotateCwSmallIcon, playSmIcon, pauseSmIcon, cancelIcon, xIcon, copyIcon, fileIcon, checkIcon, exclamationCircleIcon, uploadIcon } from '@progress/kendo-svg-icons';
 import { NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';
 import * as i1$1 from '@progress/kendo-angular-l10n';
 import { ComponentMessages, LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { fromEvent, merge } from 'rxjs';
 import { filter } from 'rxjs/operators';
 import { validatePackage } from '@progress/kendo-licensing';
-import * as i5 from '@progress/kendo-angular-buttons';
-import { ButtonsModule } from '@progress/kendo-angular-buttons';
+import * as i3 from '@angular/common';
+import { CommonModule } from '@angular/common';
 import { trigger, state, style, transition, animate } from '@angular/animations';
-import * as i3 from '@progress/kendo-angular-progressbar';
+import * as i4 from '@progress/kendo-angular-progressbar';
 import { ProgressBarModule } from '@progress/kendo-angular-progressbar';
-import * as i4 from '@progress/kendo-angular-icons';
+import * as i5 from '@progress/kendo-angular-icons';
 import { IconsModule } from '@progress/kendo-angular-icons';
-import * as i6 from '@angular/common';
-import { CommonModule } from '@angular/common';
+import * as i10 from '@progress/kendo-angular-buttons';
+import { ButtonsModule } from '@progress/kendo-angular-buttons';
 
 /**
  * Lists the possible states of a file.
@@ -639,7 +639,6 @@ const fileGroupMap = {
         ".dmg", ".iso", ".toast", ".vcd", ".bin", ".cue", ".mdf"
     ]
 };
-;
 /**
  * @hidden
  */
@@ -1321,9 +1320,9 @@ class UploadService {
         return false;
     }
 }
-UploadService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: UploadService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
-UploadService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: UploadService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: UploadService, decorators: [{
+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: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i1.HttpClient }]; } });
 
@@ -1471,9 +1470,9 @@ class NavigationService {
         return this.actionButtonsVisible ? fileCount + 1 : fileCount - 1;
     }
 }
-NavigationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NavigationService, deps: [{ token: UploadService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
-NavigationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NavigationService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NavigationService, decorators: [{
+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: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: UploadService }, { type: i0.NgZone }]; } });
 
@@ -1497,9 +1496,9 @@ class DropZoneService {
         return id in components;
     }
 }
-DropZoneService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DropZoneService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-DropZoneService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DropZoneService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DropZoneService, decorators: [{
+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: [{
             type: Injectable
         }] });
 
@@ -1510,8 +1509,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-upload',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1714067405,
-    version: '16.0.0-develop.2',
+    publishDate: 1715351209,
+    version: '16.0.0-develop.21',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -1523,9 +1522,9 @@ class FileTemplateDirective {
         this.templateRef = templateRef;
     }
 }
-FileTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FileTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-FileTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: FileTemplateDirective, selector: "[kendoUploadFileTemplate], [kendoFileSelectFileTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FileTemplateDirective, decorators: [{
+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, selector: "[kendoUploadFileTemplate], [kendoFileSelectFileTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FileTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoUploadFileTemplate], [kendoFileSelectFileTemplate]'
@@ -1540,15 +1539,222 @@ class FileInfoTemplateDirective {
         this.templateRef = templateRef;
     }
 }
-FileInfoTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FileInfoTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-FileInfoTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: FileInfoTemplateDirective, selector: "[kendoUploadFileInfoTemplate], [kendoFileSelectFileInfoTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FileInfoTemplateDirective, decorators: [{
+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, selector: "[kendoUploadFileInfoTemplate], [kendoFileSelectFileInfoTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FileInfoTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoUploadFileInfoTemplate], [kendoFileSelectFileInfoTemplate]'
                 }]
         }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
 
+/**
+ * @hidden
+ */
+const INVALIDMAXFILESIZE = "invalidMaxFileSize";
+/**
+ * @hidden
+ */
+const INVALIDMINFILESIZE = "invalidMinFileSize";
+/**
+ * @hidden
+ */
+const INVALIDFILEEXTENSION = "invalidFileExtension";
+const validateFileExtension = (file, allowedExtensions) => {
+    if (allowedExtensions.length > 0) {
+        if (allowedExtensions.indexOf(file.extension.toLowerCase()) < 0) {
+            file.validationErrors = file.validationErrors || [];
+            if (file.validationErrors.indexOf(INVALIDFILEEXTENSION) < 0) {
+                file.validationErrors.push(INVALIDFILEEXTENSION);
+            }
+        }
+    }
+};
+const validateFileSize = (file, minFileSize, maxFileSize) => {
+    if (minFileSize !== 0 && file.size < minFileSize) {
+        file.validationErrors = file.validationErrors || [];
+        if (file.validationErrors.indexOf(INVALIDMINFILESIZE) < 0) {
+            file.validationErrors.push(INVALIDMINFILESIZE);
+        }
+    }
+    if (maxFileSize !== 0 && file.size > maxFileSize) {
+        file.validationErrors = file.validationErrors || [];
+        if (file.validationErrors.indexOf(INVALIDMAXFILESIZE) < 0) {
+            file.validationErrors.push(INVALIDMAXFILESIZE);
+        }
+    }
+};
+const parseAllowedExtensions = (extensions) => {
+    const allowedExtensions = extensions.map((ext) => {
+        const parsedExt = (ext.substring(0, 1) === ".") ? ext : ("." + ext);
+        return parsedExt.toLowerCase();
+    });
+    return allowedExtensions;
+};
+/**
+ * @hidden
+ */
+const validateFiles = (files, restrictionInfo) => {
+    const allowedExtensions = parseAllowedExtensions(restrictionInfo.allowedExtensions);
+    const maxFileSize = restrictionInfo.maxFileSize;
+    const minFileSize = restrictionInfo.minFileSize;
+    let i;
+    for (i = 0; i < files.length; i++) {
+        validateFileExtension(files[i], allowedExtensions);
+        validateFileSize(files[i], minFileSize, maxFileSize);
+    }
+};
+
+/**
+ * @hidden
+ */
+class DropZoneBase {
+    constructor(element, renderer, cssClass) {
+        this.element = element;
+        this.renderer = renderer;
+        this.hideIntervalElement = null;
+        this.hoverClass = cssClass;
+    }
+    /**
+     * @hidden
+     */
+    onElementDragEnterListener() {
+        this.addClass(this.hoverClass);
+        this.lastDragElement = new Date();
+        if (!this.hideIntervalElement) {
+            this.hideIntervalElement = setInterval(() => {
+                if (this.calculateTimeDiff(this.lastDragElement) < 100) {
+                    return;
+                }
+                this.removeClass(this.hoverClass);
+                clearInterval(this.hideIntervalElement);
+                this.hideIntervalElement = null;
+            }, 100);
+        }
+        return false;
+    }
+    /**
+     * @hidden
+     */
+    onElementDragOverListener() {
+        this.lastDragElement = new Date();
+        return false;
+    }
+    calculateTimeDiff(prevEvent) {
+        return new Date().getTime() - prevEvent.getTime();
+    }
+    addClass(className) {
+        this.renderer.addClass(this.element.nativeElement, className);
+    }
+    removeClass(className) {
+        this.renderer.removeClass(this.element.nativeElement, className);
+    }
+}
+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: [{
+            type: Directive
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['hoverClass']
+                }] }]; }, propDecorators: { onElementDragEnterListener: [{
+                type: HostListener,
+                args: ['dragenter']
+            }], onElementDragOverListener: [{
+                type: HostListener,
+                args: ['dragover']
+            }] } });
+
+/**
+ * @hidden
+ */
+class DropZoneInternalDirective extends DropZoneBase {
+    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());
+        });
+    }
+    ngOnDestroy() {
+        this.ngZone.runOutsideAngular(() => {
+            if (this.unsubscribeDocumentDragEnter) {
+                this.unsubscribeDocumentDragEnter();
+            }
+            if (this.unsubscribeDocumentDragOver) {
+                this.unsubscribeDocumentDragOver();
+            }
+        });
+    }
+    onDocumentDragEnter() {
+        this.addClass(this.activeClass);
+        this.lastDragDocument = new Date();
+        if (!this.hideIntervalDocument) {
+            this.hideIntervalDocument = setInterval(() => {
+                if (this.calculateTimeDiff(this.lastDragDocument) < 100) {
+                    return;
+                }
+                this.removeClass(this.activeClass);
+                clearInterval(this.hideIntervalDocument);
+                this.hideIntervalDocument = null;
+            }, 100);
+        }
+        return false;
+    }
+    /**
+     * @hidden
+     */
+    onDocumentDragOver() {
+        this.lastDragDocument = new Date();
+        return false;
+    }
+    onDropListener(event) {
+        const droppedFiles = event.dataTransfer.files;
+        if (droppedFiles.length > 0 && !this.disabled) {
+            let files = getAllFileInfo(droppedFiles);
+            files = assignGuidToFiles(files, !this.uploadService.async.batch);
+            if (!this.multiple) {
+                files.splice(1, files.length - 1);
+                this.uploadService.clearFiles();
+            }
+            validateFiles(files, this.restrictions);
+            this.uploadService.addFiles(files);
+        }
+        return false;
+    }
+}
+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, 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: [{
+            type: Directive,
+            args: [{
+                    selector: `
+      [kendoUploadInternalDropZone],
+      [kendoFileSelectInternalDropZone]
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: UploadService }]; }, propDecorators: { disabled: [{
+                type: Input
+            }], multiple: [{
+                type: Input
+            }], restrictions: [{
+                type: Input
+            }], initialClassName: [{
+                type: HostBinding,
+                args: ['class.k-dropzone']
+            }, {
+                type: HostBinding,
+                args: ['class.k-upload-dropzone']
+            }], onDropListener: [{
+                type: HostListener,
+                args: ['drop', ['$event']]
+            }] } });
+
 /**
  * @hidden
  */
@@ -1601,9 +1807,9 @@ class FileListItemDirective {
         }
     }
 }
-FileListItemDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FileListItemDirective, deps: [{ token: i0.ElementRef }, { token: NavigationService }, { token: UploadService }], target: i0.ɵɵFactoryTarget.Directive });
-FileListItemDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: FileListItemDirective, 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: "13.3.12", ngImport: i0, type: FileListItemDirective, decorators: [{
+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, 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: [{
             type: Directive,
             args: [{
                     selector: '[kendoUploadFileListItem]'
@@ -1681,9 +1887,9 @@ class FileListItemBase {
         return this.localization.get(key);
     }
 }
-FileListItemBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FileListItemBase, deps: [{ token: UploadService }], target: i0.ɵɵFactoryTarget.Component });
-FileListItemBase.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: FileListItemBase, selector: "ng-component", ngImport: i0, template: '', isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FileListItemBase, decorators: [{
+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: [{
             type: Component,
             args: [{ template: '' }]
         }], ctorParameters: function () { return [{ type: UploadService }]; } });
@@ -1797,8 +2003,8 @@ class FileListItemActionButtonComponent {
         return true;
     }
 }
-FileListItemActionButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FileListItemActionButtonComponent, deps: [{ token: UploadService }, { token: i1$1.LocalizationService }, { token: NavigationService }], target: i0.ɵɵFactoryTarget.Component });
-FileListItemActionButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: FileListItemActionButtonComponent, selector: "kendo-upload-file-list-item-action-button", inputs: { file: "file", disabled: "disabled", progress: "progress" }, ngImport: i0, template: `
+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, 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>
 
@@ -1861,8 +2067,8 @@ FileListItemActionButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion
             ></kendo-icon-wrapper>
         </button>
     </span>
-    `, isInline: true, components: [{ type: i4.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FileListItemActionButtonComponent, decorators: [{
+    `, isInline: true, dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.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: FileListItemActionButtonComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-upload-file-list-item-action-button',
@@ -1942,59 +2148,51 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 /**
  * @hidden
  */
-class FileListSingleItemComponent extends FileListItemBase {
+class FileListMultipleItemsComponent extends FileListItemBase {
     constructor(localization, uploadService) {
         super(uploadService);
         this.localization = localization;
+        this.copySVGIcon = copyIcon;
         this.subscribeUploadProgress((args) => {
-            if (args.files[0].uid === this.file.uid) {
+            if (args.files[0].uid === this.files[0].uid) {
                 this.progressComplete = args.percentComplete;
             }
         });
     }
-    get fileStatusText() {
-        const errors = this.file.validationErrors;
-        if (this.file.state === FileState.Uploaded) {
-            return `${this.textFor('fileStatusUploaded')}`;
-        }
-        if (this.file.state === FileState.Failed) {
-            return `${this.textFor('fileStatusFailed')}`;
-        }
-        if (!isPresent(errors)) {
-            return this.getTotalFilesSizeMessage([this.file]);
-        }
-        return this.getFileValidationMessage(this.file);
-    }
     get showProgress() {
-        const showProgress = this.file.state === FileState.Uploading || this.file.state === FileState.Paused;
+        const showProgress = this.files[0].state === FileState.Uploading || this.files[0].state === FileState.Paused;
         return showProgress ? 'active' : 'inactive';
     }
-    get fileGroupClass() {
-        return getFileGroupCssClass(this.file.extension ? this.file.extension : '');
+    ngOnInit() {
+        this.filesHaveErrors = super.filesHaveValidationErrors(this.files);
     }
-    get fileSVGGroupIcon() {
-        const initial = fileIcon;
-        if (this.file.extension) {
-            for (const group in fileGroupMap) {
-                if (fileGroupMap[group].indexOf(this.file.extension) >= 0) {
-                    return fileSVGGroupMap[group];
-                }
-            }
+    fileStatusText(file) {
+        const errors = file.validationErrors;
+        if (!isPresent(errors)) {
+            return this.getTotalFilesSizeMessage([file]);
         }
-        return initial;
+        return this.getFileValidationMessage(file);
+    }
+    get batchStatusText() {
+        const state = this.files[0].state;
+        const fileCount = this.files.length;
+        if (state === FileState.Uploaded) {
+            return `${fileCount} ${this.textFor('filesBatchStatusUploaded')}`;
+        }
+        if (state === FileState.Failed) {
+            return `${fileCount} ${this.textFor('filesBatchStatusFailed')}`;
+        }
+        return `${fileCount} ${this.textFor('filesBatchStatus')}`;
     }
     get isUploadSuccessful() {
-        return this.file.state === FileState.Uploaded;
+        return this.files[0].state === FileState.Uploaded;
     }
     get isUploadFailed() {
-        return this.file.state === FileState.Failed;
-    }
-    get isNotYetUploaded() {
-        return !this.isUploadFailed && !this.isUploadSuccessful;
+        return this.files[0].state === FileState.Failed;
     }
 }
-FileListSingleItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FileListSingleItemComponent, deps: [{ token: i1$1.LocalizationService }, { token: UploadService }], target: i0.ɵɵFactoryTarget.Component });
-FileListSingleItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: FileListSingleItemComponent, selector: "kendo-upload-file-list-single-item", inputs: { disabled: "disabled", file: "file", fileInfoTemplate: "fileInfoTemplate" }, usesInheritance: true, ngImport: i0, template: `
+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, 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"
@@ -2003,35 +2201,43 @@ FileListSingleItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
         </kendo-progressbar>
         <span class="k-file-icon-wrapper">
             <kendo-icon-wrapper
+                name="copy"
                 size="xxlarge"
-                [name]="fileGroupClass"
-                [svgIcon]="fileSVGGroupIcon"
+                [svgIcon]="copySVGIcon"
                 innerCssClass="k-file-icon"
             >
             </kendo-icon-wrapper>
         </span>
-        <span class="k-file-info">
+        <span class="k-multiple-files-wrapper">
             <ng-container *ngIf="!fileInfoTemplate">
-                <span class="k-file-name" [title]="file.name">{{ file.name }}</span>
-                <span [attr.aria-live]="'polite'" [ngClass]="{
-                    'k-file-validation-message': file.validationErrors,
-                    'k-file-size': !file.validationErrors && isNotYetUploaded,
-                    'k-file-summary': isUploadSuccessful || isUploadFailed
-                    }"
-                >{{fileStatusText}}</span>
+                <span *ngFor="let file of files" class="k-file-info">
+                    <span [title]="file.name" class="k-file-name">
+                        {{file.name}}
+                    </span>
+                    <span [attr.aria-live]="'polite'" [ngClass]="{
+                        'k-file-validation-message': file.validationErrors,
+                        'k-file-size': !file.validationErrors
+                        }"
+                    >{{fileStatusText(file)}}</span>
+                </span>
+                <span class="k-file-summary"
+                >{{batchStatusText}}</span>
             </ng-container>
-            <ng-container *ngIf="fileInfoTemplate" [ngTemplateOutlet]="fileInfoTemplate.templateRef" [ngTemplateOutletContext]="{
+            <ng-container
+                *ngIf="fileInfoTemplate"
+                [ngTemplateOutlet]="fileInfoTemplate.templateRef"
+                [ngTemplateOutletContext]="{
                     templateRef: fileInfoTemplate.templateRef,
-                    state: file.state,
-                    $implicit: [file]
+                    state: files[0].state,
+                    $implicit: files
                 }"></ng-container>
         </span>
         <kendo-upload-file-list-item-action-button
-            [file]='file'
+            [file]='files[0]'
             [disabled]='disabled'
             [progress]='progressComplete'>
         </kendo-upload-file-list-item-action-button>
-    `, isInline: true, components: [{ type: i3.ProgressBarComponent, selector: "kendo-progressbar", inputs: ["label", "progressCssStyle", "progressCssClass", "emptyCssStyle", "emptyCssClass", "animation"], outputs: ["animationEnd"], exportAs: ["kendoProgressBar"] }, { type: i4.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: FileListItemActionButtonComponent, selector: "kendo-upload-file-list-item-action-button", inputs: ["file", "disabled", "progress"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], animations: [
+    `, isInline: true, dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.ProgressBarComponent, selector: "kendo-progressbar", inputs: ["label", "progressCssStyle", "progressCssClass", "emptyCssStyle", "emptyCssClass", "animation"], outputs: ["animationEnd"], exportAs: ["kendoProgressBar"] }, { kind: "component", type: i5.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { 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 })),
@@ -2040,7 +2246,7 @@ FileListSingleItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
             transition('active => inactive', animate('1s 2s ease-out'))
         ])
     ] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FileListSingleItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FileListMultipleItemsComponent, decorators: [{
             type: Component,
             args: [{
                     animations: [
@@ -2052,7 +2258,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                             transition('active => inactive', animate('1s 2s ease-out'))
                         ])
                     ],
-                    selector: 'kendo-upload-file-list-single-item',
+                    selector: 'kendo-upload-file-list-multiple-items',
                     template: `
         <kendo-progressbar
             [@progressState]="showProgress"
@@ -2062,31 +2268,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         </kendo-progressbar>
         <span class="k-file-icon-wrapper">
             <kendo-icon-wrapper
+                name="copy"
                 size="xxlarge"
-                [name]="fileGroupClass"
-                [svgIcon]="fileSVGGroupIcon"
+                [svgIcon]="copySVGIcon"
                 innerCssClass="k-file-icon"
             >
             </kendo-icon-wrapper>
         </span>
-        <span class="k-file-info">
+        <span class="k-multiple-files-wrapper">
             <ng-container *ngIf="!fileInfoTemplate">
-                <span class="k-file-name" [title]="file.name">{{ file.name }}</span>
-                <span [attr.aria-live]="'polite'" [ngClass]="{
-                    'k-file-validation-message': file.validationErrors,
-                    'k-file-size': !file.validationErrors && isNotYetUploaded,
-                    'k-file-summary': isUploadSuccessful || isUploadFailed
-                    }"
-                >{{fileStatusText}}</span>
+                <span *ngFor="let file of files" class="k-file-info">
+                    <span [title]="file.name" class="k-file-name">
+                        {{file.name}}
+                    </span>
+                    <span [attr.aria-live]="'polite'" [ngClass]="{
+                        'k-file-validation-message': file.validationErrors,
+                        'k-file-size': !file.validationErrors
+                        }"
+                    >{{fileStatusText(file)}}</span>
+                </span>
+                <span class="k-file-summary"
+                >{{batchStatusText}}</span>
             </ng-container>
-            <ng-container *ngIf="fileInfoTemplate" [ngTemplateOutlet]="fileInfoTemplate.templateRef" [ngTemplateOutletContext]="{
+            <ng-container
+                *ngIf="fileInfoTemplate"
+                [ngTemplateOutlet]="fileInfoTemplate.templateRef"
+                [ngTemplateOutletContext]="{
                     templateRef: fileInfoTemplate.templateRef,
-                    state: file.state,
-                    $implicit: [file]
+                    state: files[0].state,
+                    $implicit: files
                 }"></ng-container>
         </span>
         <kendo-upload-file-list-item-action-button
-            [file]='file'
+            [file]='files[0]'
             [disabled]='disabled'
             [progress]='progressComplete'>
         </kendo-upload-file-list-item-action-button>
@@ -2094,7 +2308,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }, { type: UploadService }]; }, propDecorators: { disabled: [{
                 type: Input
-            }], file: [{
+            }], files: [{
                 type: Input
             }], fileInfoTemplate: [{
                 type: Input
@@ -2103,51 +2317,59 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 /**
  * @hidden
  */
-class FileListMultipleItemsComponent extends FileListItemBase {
+class FileListSingleItemComponent extends FileListItemBase {
     constructor(localization, uploadService) {
         super(uploadService);
         this.localization = localization;
-        this.copySVGIcon = copyIcon;
         this.subscribeUploadProgress((args) => {
-            if (args.files[0].uid === this.files[0].uid) {
+            if (args.files[0].uid === this.file.uid) {
                 this.progressComplete = args.percentComplete;
             }
         });
     }
+    get fileStatusText() {
+        const errors = this.file.validationErrors;
+        if (this.file.state === FileState.Uploaded) {
+            return `${this.textFor('fileStatusUploaded')}`;
+        }
+        if (this.file.state === FileState.Failed) {
+            return `${this.textFor('fileStatusFailed')}`;
+        }
+        if (!isPresent(errors)) {
+            return this.getTotalFilesSizeMessage([this.file]);
+        }
+        return this.getFileValidationMessage(this.file);
+    }
     get showProgress() {
-        const showProgress = this.files[0].state === FileState.Uploading || this.files[0].state === FileState.Paused;
+        const showProgress = this.file.state === FileState.Uploading || this.file.state === FileState.Paused;
         return showProgress ? 'active' : 'inactive';
     }
-    ngOnInit() {
-        this.filesHaveErrors = super.filesHaveValidationErrors(this.files);
-    }
-    fileStatusText(file) {
-        const errors = file.validationErrors;
-        if (!isPresent(errors)) {
-            return this.getTotalFilesSizeMessage([file]);
-        }
-        return this.getFileValidationMessage(file);
+    get fileGroupClass() {
+        return getFileGroupCssClass(this.file.extension ? this.file.extension : '');
     }
-    get batchStatusText() {
-        const state = this.files[0].state;
-        const fileCount = this.files.length;
-        if (state === FileState.Uploaded) {
-            return `${fileCount} ${this.textFor('filesBatchStatusUploaded')}`;
-        }
-        if (state === FileState.Failed) {
-            return `${fileCount} ${this.textFor('filesBatchStatusFailed')}`;
+    get fileSVGGroupIcon() {
+        const initial = fileIcon;
+        if (this.file.extension) {
+            for (const group in fileGroupMap) {
+                if (fileGroupMap[group].indexOf(this.file.extension) >= 0) {
+                    return fileSVGGroupMap[group];
+                }
+            }
         }
-        return `${fileCount} ${this.textFor('filesBatchStatus')}`;
+        return initial;
     }
     get isUploadSuccessful() {
-        return this.files[0].state === FileState.Uploaded;
+        return this.file.state === FileState.Uploaded;
     }
     get isUploadFailed() {
-        return this.files[0].state === FileState.Failed;
+        return this.file.state === FileState.Failed;
+    }
+    get isNotYetUploaded() {
+        return !this.isUploadFailed && !this.isUploadSuccessful;
     }
 }
-FileListMultipleItemsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FileListMultipleItemsComponent, deps: [{ token: i1$1.LocalizationService }, { token: UploadService }], target: i0.ɵɵFactoryTarget.Component });
-FileListMultipleItemsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: FileListMultipleItemsComponent, selector: "kendo-upload-file-list-multiple-items", inputs: { disabled: "disabled", files: "files", fileInfoTemplate: "fileInfoTemplate" }, usesInheritance: true, ngImport: i0, template: `
+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, 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"
@@ -2156,43 +2378,35 @@ FileListMultipleItemsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
         </kendo-progressbar>
         <span class="k-file-icon-wrapper">
             <kendo-icon-wrapper
-                name="copy"
                 size="xxlarge"
-                [svgIcon]="copySVGIcon"
+                [name]="fileGroupClass"
+                [svgIcon]="fileSVGGroupIcon"
                 innerCssClass="k-file-icon"
             >
             </kendo-icon-wrapper>
         </span>
-        <span class="k-multiple-files-wrapper">
+        <span class="k-file-info">
             <ng-container *ngIf="!fileInfoTemplate">
-                <span *ngFor="let file of files" class="k-file-info">
-                    <span [title]="file.name" class="k-file-name">
-                        {{file.name}}
-                    </span>
-                    <span [attr.aria-live]="'polite'" [ngClass]="{
-                        'k-file-validation-message': file.validationErrors,
-                        'k-file-size': !file.validationErrors
-                        }"
-                    >{{fileStatusText(file)}}</span>
-                </span>
-                <span class="k-file-summary"
-                >{{batchStatusText}}</span>
+                <span class="k-file-name" [title]="file.name">{{ file.name }}</span>
+                <span [attr.aria-live]="'polite'" [ngClass]="{
+                    'k-file-validation-message': file.validationErrors,
+                    'k-file-size': !file.validationErrors && isNotYetUploaded,
+                    'k-file-summary': isUploadSuccessful || isUploadFailed
+                    }"
+                >{{fileStatusText}}</span>
             </ng-container>
-            <ng-container
-                *ngIf="fileInfoTemplate"
-                [ngTemplateOutlet]="fileInfoTemplate.templateRef"
-                [ngTemplateOutletContext]="{
+            <ng-container *ngIf="fileInfoTemplate" [ngTemplateOutlet]="fileInfoTemplate.templateRef" [ngTemplateOutletContext]="{
                     templateRef: fileInfoTemplate.templateRef,
-                    state: files[0].state,
-                    $implicit: files
+                    state: file.state,
+                    $implicit: [file]
                 }"></ng-container>
         </span>
         <kendo-upload-file-list-item-action-button
-            [file]='files[0]'
+            [file]='file'
             [disabled]='disabled'
             [progress]='progressComplete'>
         </kendo-upload-file-list-item-action-button>
-    `, isInline: true, components: [{ type: i3.ProgressBarComponent, selector: "kendo-progressbar", inputs: ["label", "progressCssStyle", "progressCssClass", "emptyCssStyle", "emptyCssClass", "animation"], outputs: ["animationEnd"], exportAs: ["kendoProgressBar"] }, { type: i4.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: FileListItemActionButtonComponent, selector: "kendo-upload-file-list-item-action-button", inputs: ["file", "disabled", "progress"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], animations: [
+    `, isInline: true, dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.ProgressBarComponent, selector: "kendo-progressbar", inputs: ["label", "progressCssStyle", "progressCssClass", "emptyCssStyle", "emptyCssClass", "animation"], outputs: ["animationEnd"], exportAs: ["kendoProgressBar"] }, { kind: "component", type: i5.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { 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 })),
@@ -2201,7 +2415,7 @@ FileListMultipleItemsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
             transition('active => inactive', animate('1s 2s ease-out'))
         ])
     ] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FileListMultipleItemsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FileListSingleItemComponent, decorators: [{
             type: Component,
             args: [{
                     animations: [
@@ -2213,7 +2427,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                             transition('active => inactive', animate('1s 2s ease-out'))
                         ])
                     ],
-                    selector: 'kendo-upload-file-list-multiple-items',
+                    selector: 'kendo-upload-file-list-single-item',
                     template: `
         <kendo-progressbar
             [@progressState]="showProgress"
@@ -2223,39 +2437,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         </kendo-progressbar>
         <span class="k-file-icon-wrapper">
             <kendo-icon-wrapper
-                name="copy"
                 size="xxlarge"
-                [svgIcon]="copySVGIcon"
+                [name]="fileGroupClass"
+                [svgIcon]="fileSVGGroupIcon"
                 innerCssClass="k-file-icon"
             >
             </kendo-icon-wrapper>
         </span>
-        <span class="k-multiple-files-wrapper">
+        <span class="k-file-info">
             <ng-container *ngIf="!fileInfoTemplate">
-                <span *ngFor="let file of files" class="k-file-info">
-                    <span [title]="file.name" class="k-file-name">
-                        {{file.name}}
-                    </span>
-                    <span [attr.aria-live]="'polite'" [ngClass]="{
-                        'k-file-validation-message': file.validationErrors,
-                        'k-file-size': !file.validationErrors
-                        }"
-                    >{{fileStatusText(file)}}</span>
-                </span>
-                <span class="k-file-summary"
-                >{{batchStatusText}}</span>
+                <span class="k-file-name" [title]="file.name">{{ file.name }}</span>
+                <span [attr.aria-live]="'polite'" [ngClass]="{
+                    'k-file-validation-message': file.validationErrors,
+                    'k-file-size': !file.validationErrors && isNotYetUploaded,
+                    'k-file-summary': isUploadSuccessful || isUploadFailed
+                    }"
+                >{{fileStatusText}}</span>
             </ng-container>
-            <ng-container
-                *ngIf="fileInfoTemplate"
-                [ngTemplateOutlet]="fileInfoTemplate.templateRef"
-                [ngTemplateOutletContext]="{
+            <ng-container *ngIf="fileInfoTemplate" [ngTemplateOutlet]="fileInfoTemplate.templateRef" [ngTemplateOutletContext]="{
                     templateRef: fileInfoTemplate.templateRef,
-                    state: files[0].state,
-                    $implicit: files
+                    state: file.state,
+                    $implicit: [file]
                 }"></ng-container>
         </span>
         <kendo-upload-file-list-item-action-button
-            [file]='files[0]'
+            [file]='file'
             [disabled]='disabled'
             [progress]='progressComplete'>
         </kendo-upload-file-list-item-action-button>
@@ -2263,7 +2469,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }, { type: UploadService }]; }, propDecorators: { disabled: [{
                 type: Input
-            }], files: [{
+            }], file: [{
                 type: Input
             }], fileInfoTemplate: [{
                 type: Input
@@ -2332,8 +2538,8 @@ class FileListComponent {
         this.actionSubscription.unsubscribe();
     }
 }
-FileListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FileListComponent, deps: [{ token: UploadService }, { token: NavigationService }], target: i0.ɵɵFactoryTarget.Component });
-FileListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: FileListComponent, selector: "[kendo-upload-file-list]", inputs: { disabled: "disabled", fileList: "fileList", fileTemplate: "fileTemplate", fileInfoTemplate: "fileInfoTemplate" }, viewQueries: [{ propertyName: "fileListItems", predicate: FileListItemDirective, descendants: true }], ngImport: i0, template: `
+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, selector: "[kendo-upload-file-list]", inputs: { disabled: "disabled", fileList: "fileList", fileTemplate: "fileTemplate", fileInfoTemplate: "fileInfoTemplate" }, viewQueries: [{ propertyName: "fileListItems", predicate: FileListItemDirective, descendants: true }], ngImport: i0, template: `
         <ng-template ngFor
             [ngForOf]="fileList"
             let-files
@@ -2359,8 +2565,8 @@ FileListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
                         }"></ng-container>
             </li>
         </ng-template>
-    `, isInline: true, components: [{ type: FileListSingleItemComponent, selector: "kendo-upload-file-list-single-item", inputs: ["disabled", "file", "fileInfoTemplate"] }, { type: FileListMultipleItemsComponent, selector: "kendo-upload-file-list-multiple-items", inputs: ["disabled", "files", "fileInfoTemplate"] }], directives: [{ type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: FileListItemDirective, selector: "[kendoUploadFileListItem]", inputs: ["files", "index"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FileListComponent, decorators: [{
+    `, isInline: true, dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: FileListItemDirective, selector: "[kendoUploadFileListItem]", inputs: ["files", "index"] }, { kind: "component", type: FileListMultipleItemsComponent, selector: "kendo-upload-file-list-multiple-items", inputs: ["disabled", "files", "fileInfoTemplate"] }, { kind: "component", type: FileListSingleItemComponent, selector: "kendo-upload-file-list-single-item", inputs: ["disabled", "file", "fileInfoTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FileListComponent, decorators: [{
             type: Component,
             args: [{
                     selector: '[kendo-upload-file-list]',
@@ -2382,320 +2588,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     [disabled]='disabled'
                     [files]='files'
                     [fileInfoTemplate]="fileInfoTemplate"></kendo-upload-file-list-multiple-items>
-                <ng-container
-                    *ngIf="fileTemplate" [ngTemplateOutlet]="fileTemplate.templateRef" [ngTemplateOutletContext]="{
-                            templateRef: fileTemplate.templateRef,
-                            state: files[0].state,
-                            $implicit: files
-                        }"></ng-container>
-            </li>
-        </ng-template>
-    `
-                }]
-        }], ctorParameters: function () { return [{ type: UploadService }, { type: NavigationService }]; }, propDecorators: { disabled: [{
-                type: Input
-            }], fileList: [{
-                type: Input
-            }], fileTemplate: [{
-                type: Input
-            }], fileInfoTemplate: [{
-                type: Input
-            }], fileListItems: [{
-                type: ViewChildren,
-                args: [FileListItemDirective]
-            }] } });
-
-/**
- * @hidden
- */
-class Messages extends ComponentMessages {
-}
-Messages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-Messages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.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 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: Messages, decorators: [{
-            type: Directive
-        }], propDecorators: { cancel: [{
-                type: Input
-            }], clearSelectedFiles: [{
-                type: Input
-            }], dropFilesHere: [{
-                type: Input
-            }], externalDropFilesHere: [{
-                type: Input
-            }], filesBatchStatus: [{
-                type: Input
-            }], filesBatchStatusFailed: [{
-                type: Input
-            }], filesBatchStatusUploaded: [{
-                type: Input
-            }], fileStatusFailed: [{
-                type: Input
-            }], fileStatusUploaded: [{
-                type: Input
-            }], headerStatusPaused: [{
-                type: Input
-            }], headerStatusUploaded: [{
-                type: Input
-            }], headerStatusUploading: [{
-                type: Input
-            }], invalidFileExtension: [{
-                type: Input
-            }], invalidMaxFileSize: [{
-                type: Input
-            }], invalidMinFileSize: [{
-                type: Input
-            }], pause: [{
-                type: Input
-            }], remove: [{
-                type: Input
-            }], resume: [{
-                type: Input
-            }], retry: [{
-                type: Input
-            }], select: [{
-                type: Input
-            }], uploadSelectedFiles: [{
-                type: Input
-            }] } });
-
-/**
- * @hidden
- */
-class LocalizedMessagesDirective extends Messages {
-    constructor(service) {
-        super();
-        this.service = service;
-    }
-}
-LocalizedMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: LocalizedMessagesDirective, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
-LocalizedMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: LocalizedMessagesDirective, 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: "13.3.12", ngImport: i0, type: LocalizedMessagesDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    providers: [
-                        {
-                            provide: Messages,
-                            useExisting: forwardRef(() => LocalizedMessagesDirective)
-                        }
-                    ],
-                    selector: `
-    [kendoUploadLocalizedMessages],
-    [kendoFileSelectLocalizedMessages],
-    [kendoUploadDropZoneLocalizedMessages]
-  `
-                }]
-        }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }]; } });
-
-/**
- * @hidden
- */
-const INVALIDMAXFILESIZE = "invalidMaxFileSize";
-/**
- * @hidden
- */
-const INVALIDMINFILESIZE = "invalidMinFileSize";
-/**
- * @hidden
- */
-const INVALIDFILEEXTENSION = "invalidFileExtension";
-const validateFileExtension = (file, allowedExtensions) => {
-    if (allowedExtensions.length > 0) {
-        if (allowedExtensions.indexOf(file.extension.toLowerCase()) < 0) {
-            file.validationErrors = file.validationErrors || [];
-            if (file.validationErrors.indexOf(INVALIDFILEEXTENSION) < 0) {
-                file.validationErrors.push(INVALIDFILEEXTENSION);
-            }
-        }
-    }
-};
-const validateFileSize = (file, minFileSize, maxFileSize) => {
-    if (minFileSize !== 0 && file.size < minFileSize) {
-        file.validationErrors = file.validationErrors || [];
-        if (file.validationErrors.indexOf(INVALIDMINFILESIZE) < 0) {
-            file.validationErrors.push(INVALIDMINFILESIZE);
-        }
-    }
-    if (maxFileSize !== 0 && file.size > maxFileSize) {
-        file.validationErrors = file.validationErrors || [];
-        if (file.validationErrors.indexOf(INVALIDMAXFILESIZE) < 0) {
-            file.validationErrors.push(INVALIDMAXFILESIZE);
-        }
-    }
-};
-const parseAllowedExtensions = (extensions) => {
-    const allowedExtensions = extensions.map((ext) => {
-        const parsedExt = (ext.substring(0, 1) === ".") ? ext : ("." + ext);
-        return parsedExt.toLowerCase();
-    });
-    return allowedExtensions;
-};
-/**
- * @hidden
- */
-const validateFiles = (files, restrictionInfo) => {
-    const allowedExtensions = parseAllowedExtensions(restrictionInfo.allowedExtensions);
-    const maxFileSize = restrictionInfo.maxFileSize;
-    const minFileSize = restrictionInfo.minFileSize;
-    let i;
-    for (i = 0; i < files.length; i++) {
-        validateFileExtension(files[i], allowedExtensions);
-        validateFileSize(files[i], minFileSize, maxFileSize);
-    }
-};
-
-/**
- * @hidden
- */
-class DropZoneBase {
-    constructor(element, renderer, cssClass) {
-        this.element = element;
-        this.renderer = renderer;
-        this.hideIntervalElement = null;
-        this.hoverClass = cssClass;
-    }
-    /**
-     * @hidden
-     */
-    onElementDragEnterListener() {
-        this.addClass(this.hoverClass);
-        this.lastDragElement = new Date();
-        if (!this.hideIntervalElement) {
-            this.hideIntervalElement = setInterval(() => {
-                if (this.calculateTimeDiff(this.lastDragElement) < 100) {
-                    return;
-                }
-                this.removeClass(this.hoverClass);
-                clearInterval(this.hideIntervalElement);
-                this.hideIntervalElement = null;
-            }, 100);
-        }
-        return false;
-    }
-    /**
-     * @hidden
-     */
-    onElementDragOverListener() {
-        this.lastDragElement = new Date();
-        return false;
-    }
-    calculateTimeDiff(prevEvent) {
-        return new Date().getTime() - prevEvent.getTime();
-    }
-    addClass(className) {
-        this.renderer.addClass(this.element.nativeElement, className);
-    }
-    removeClass(className) {
-        this.renderer.removeClass(this.element.nativeElement, className);
-    }
-}
-DropZoneBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DropZoneBase, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: 'hoverClass' }], target: i0.ɵɵFactoryTarget.Directive });
-DropZoneBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: DropZoneBase, host: { listeners: { "dragenter": "onElementDragEnterListener()", "dragover": "onElementDragOverListener()" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DropZoneBase, decorators: [{
-            type: Directive
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: ['hoverClass']
-                }] }]; }, propDecorators: { onElementDragEnterListener: [{
-                type: HostListener,
-                args: ['dragenter']
-            }], onElementDragOverListener: [{
-                type: HostListener,
-                args: ['dragover']
-            }] } });
-
-/**
- * @hidden
- */
-class DropZoneInternalDirective extends DropZoneBase {
-    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());
-        });
-    }
-    ngOnDestroy() {
-        this.ngZone.runOutsideAngular(() => {
-            if (this.unsubscribeDocumentDragEnter) {
-                this.unsubscribeDocumentDragEnter();
-            }
-            if (this.unsubscribeDocumentDragOver) {
-                this.unsubscribeDocumentDragOver();
-            }
-        });
-    }
-    onDocumentDragEnter() {
-        this.addClass(this.activeClass);
-        this.lastDragDocument = new Date();
-        if (!this.hideIntervalDocument) {
-            this.hideIntervalDocument = setInterval(() => {
-                if (this.calculateTimeDiff(this.lastDragDocument) < 100) {
-                    return;
-                }
-                this.removeClass(this.activeClass);
-                clearInterval(this.hideIntervalDocument);
-                this.hideIntervalDocument = null;
-            }, 100);
-        }
-        return false;
-    }
-    /**
-     * @hidden
-     */
-    onDocumentDragOver() {
-        this.lastDragDocument = new Date();
-        return false;
-    }
-    onDropListener(event) {
-        const droppedFiles = event.dataTransfer.files;
-        if (droppedFiles.length > 0 && !this.disabled) {
-            let files = getAllFileInfo(droppedFiles);
-            files = assignGuidToFiles(files, !this.uploadService.async.batch);
-            if (!this.multiple) {
-                files.splice(1, files.length - 1);
-                this.uploadService.clearFiles();
-            }
-            validateFiles(files, this.restrictions);
-            this.uploadService.addFiles(files);
-        }
-        return false;
-    }
-}
-DropZoneInternalDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", 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: "12.0.0", version: "13.3.12", type: DropZoneInternalDirective, 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: "13.3.12", ngImport: i0, type: DropZoneInternalDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: `
-      [kendoUploadInternalDropZone],
-      [kendoFileSelectInternalDropZone]
+                <ng-container
+                    *ngIf="fileTemplate" [ngTemplateOutlet]="fileTemplate.templateRef" [ngTemplateOutletContext]="{
+                            templateRef: fileTemplate.templateRef,
+                            state: files[0].state,
+                            $implicit: files
+                        }"></ng-container>
+            </li>
+        </ng-template>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: UploadService }]; }, propDecorators: { disabled: [{
+        }], ctorParameters: function () { return [{ type: UploadService }, { type: NavigationService }]; }, propDecorators: { disabled: [{
                 type: Input
-            }], multiple: [{
+            }], fileList: [{
                 type: Input
-            }], restrictions: [{
+            }], fileTemplate: [{
                 type: Input
-            }], initialClassName: [{
-                type: HostBinding,
-                args: ['class.k-dropzone']
-            }, {
-                type: HostBinding,
-                args: ['class.k-upload-dropzone']
-            }], onDropListener: [{
-                type: HostListener,
-                args: ['drop', ['$event']]
+            }], fileInfoTemplate: [{
+                type: Input
+            }], fileListItems: [{
+                type: ViewChildren,
+                args: [FileListItemDirective]
             }] } });
 
 /**
@@ -2756,9 +2669,9 @@ class FileSelectDirective {
         });
     }
 }
-FileSelectDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FileSelectDirective, deps: [{ token: UploadService }, { token: NavigationService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-FileSelectDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: FileSelectDirective, 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: "13.3.12", ngImport: i0, type: FileSelectDirective, decorators: [{
+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, 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: [{
             type: Directive,
             args: [{
                     selector: '[kendoFileSelect]'
@@ -2813,6 +2726,92 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 args: ["change", ["$event"]]
             }] } });
 
+/**
+ * @hidden
+ */
+class Messages extends ComponentMessages {
+}
+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: [{
+            type: Directive
+        }], propDecorators: { cancel: [{
+                type: Input
+            }], clearSelectedFiles: [{
+                type: Input
+            }], dropFilesHere: [{
+                type: Input
+            }], externalDropFilesHere: [{
+                type: Input
+            }], filesBatchStatus: [{
+                type: Input
+            }], filesBatchStatusFailed: [{
+                type: Input
+            }], filesBatchStatusUploaded: [{
+                type: Input
+            }], fileStatusFailed: [{
+                type: Input
+            }], fileStatusUploaded: [{
+                type: Input
+            }], headerStatusPaused: [{
+                type: Input
+            }], headerStatusUploaded: [{
+                type: Input
+            }], headerStatusUploading: [{
+                type: Input
+            }], invalidFileExtension: [{
+                type: Input
+            }], invalidMaxFileSize: [{
+                type: Input
+            }], invalidMinFileSize: [{
+                type: Input
+            }], pause: [{
+                type: Input
+            }], remove: [{
+                type: Input
+            }], resume: [{
+                type: Input
+            }], retry: [{
+                type: Input
+            }], select: [{
+                type: Input
+            }], uploadSelectedFiles: [{
+                type: Input
+            }] } });
+
+/**
+ * @hidden
+ */
+class LocalizedMessagesDirective extends Messages {
+    constructor(service) {
+        super();
+        this.service = service;
+    }
+}
+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, 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: [{
+            type: Directive,
+            args: [{
+                    providers: [
+                        {
+                            provide: Messages,
+                            useExisting: forwardRef(() => LocalizedMessagesDirective)
+                        }
+                    ],
+                    selector: `
+    [kendoUploadLocalizedMessages],
+    [kendoFileSelectLocalizedMessages],
+    [kendoUploadDropZoneLocalizedMessages]
+  `
+                }]
+        }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }]; } });
+
 /**
  * @hidden
  */
@@ -3082,7 +3081,6 @@ class FileSelectComponent {
         const inputId = `k-fileselect-input-${id}`;
         return { buttonId, inputId };
     }
-    ;
     subscribeBlur() {
         if (!isDocumentAvailable()) {
             return;
@@ -3155,8 +3153,8 @@ class FileSelectComponent {
         this.uploadService.component = 'FileSelect';
     }
 }
-FileSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.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 });
-FileSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: FileSelectComponent, selector: "kendo-fileselect", inputs: { accept: "accept", disabled: "disabled", multiple: "multiple", name: "name", showFileList: "showFileList", tabindex: "tabindex", restrictions: "restrictions", zoneId: "zoneId", focusableId: "focusableId" }, outputs: { onBlur: "blur", onFocus: "focus", select: "select", remove: "remove", valueChange: "valueChange" }, host: { properties: { "class.k-upload": "this.hostDefaultClasses", "class.k-disabled": "this.hostDisabledClass", "attr.dir": "this.dir", "attr.role": "this.hostRole" } }, providers: [
+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, selector: "kendo-fileselect", inputs: { accept: "accept", disabled: "disabled", multiple: "multiple", name: "name", showFileList: "showFileList", tabindex: "tabindex", restrictions: "restrictions", zoneId: "zoneId", focusableId: "focusableId" }, outputs: { onBlur: "blur", onFocus: "focus", select: "select", remove: "remove", valueChange: "valueChange" }, host: { properties: { "class.k-upload": "this.hostDefaultClasses", "class.k-disabled": "this.hostDisabledClass", "attr.dir": "this.dir", "attr.role": "this.hostRole" } }, providers: [
         LocalizationService,
         NavigationService,
         UploadService,
@@ -3231,8 +3229,8 @@ FileSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
             [fileTemplate]="fileTemplate"
             [fileInfoTemplate]="fileInfoTemplate">
         </ul>
-    `, isInline: true, components: [{ type: i5.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: FileListComponent, selector: "[kendo-upload-file-list]", inputs: ["disabled", "fileList", "fileTemplate", "fileInfoTemplate"] }], directives: [{ type: LocalizedMessagesDirective, selector: "\n    [kendoUploadLocalizedMessages],\n    [kendoFileSelectLocalizedMessages],\n    [kendoUploadDropZoneLocalizedMessages]\n  " }, { type: DropZoneInternalDirective, selector: "\n      [kendoUploadInternalDropZone],\n      [kendoFileSelectInternalDropZone]\n    ", inputs: ["disabled", "multiple", "restrictions"] }, { type: FileSelectDirective, selector: "[kendoFileSelect]", inputs: ["dir", "disabled", "multiple", "restrictions", "accept", "required"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FileSelectComponent, decorators: [{
+    `, isInline: true, dependencies: [{ kind: "directive", type: DropZoneInternalDirective, selector: "\n      [kendoUploadInternalDropZone],\n      [kendoFileSelectInternalDropZone]\n    ", inputs: ["disabled", "multiple", "restrictions"] }, { kind: "component", type: FileListComponent, selector: "[kendo-upload-file-list]", inputs: ["disabled", "fileList", "fileTemplate", "fileInfoTemplate"] }, { kind: "directive", type: FileSelectDirective, selector: "[kendoFileSelect]", inputs: ["dir", "disabled", "multiple", "restrictions", "accept", "required"] }, { kind: "directive", type: LocalizedMessagesDirective, selector: "\n    [kendoUploadLocalizedMessages],\n    [kendoFileSelectLocalizedMessages],\n    [kendoUploadDropZoneLocalizedMessages]\n  " }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i10.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: FileSelectComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoFileSelect',
@@ -3393,14 +3391,14 @@ class CustomMessagesComponent extends Messages {
         return true;
     }
 }
-CustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CustomMessagesComponent, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-CustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: CustomMessagesComponent, selector: "kendo-upload-messages, kendo-fileselect-messages, kendo-uploaddropzone-messages", providers: [
+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, 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: "13.3.12", ngImport: i0, type: CustomMessagesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CustomMessagesComponent, decorators: [{
             type: Component,
             args: [{
                     providers: [
@@ -3414,84 +3412,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }]; } });
 
-/**
- * @hidden
- */
-class UploadStatusTotalComponent {
-    constructor(localization) {
-        this.localization = localization;
-        this.checkmarkIcon = checkIcon;
-        this.exceptionSVGIcon = exclamationCircleIcon;
-        this.uploadSVGIcon = uploadIcon;
-        this.pauseSVGIcon = pauseSmIcon;
-    }
-    get iconClass() {
-        if (!this.isUploading && !this.isFailed) {
-            return 'checkmark';
-        }
-        if (!this.isUploading && this.isFailed) {
-            return 'exception';
-        }
-        if (this.isUploading) {
-            return 'upload';
-        }
-        if (this.isPaused) {
-            return 'pause-sm';
-        }
-    }
-    get SVGIconClass() {
-        if (!this.isUploading && !this.isFailed) {
-            return this.checkmarkIcon;
-        }
-        if (!this.isUploading && this.isFailed) {
-            return this.exceptionSVGIcon;
-        }
-        if (this.isUploading) {
-            return this.uploadSVGIcon;
-        }
-        if (this.isPaused) {
-            return this.pauseSVGIcon;
-        }
-    }
-    ngDoCheck() {
-        this.isPaused = this.fileList.hasFileWithState([FileState.Paused]);
-        this.isFailed = this.fileList.hasFileWithState([FileState.Failed]);
-        this.isUploading = this.fileList.hasFileWithState([FileState.Uploading]);
-        if (this.isPaused && !this.isUploading) {
-            this.statusText = this.localization.get('headerStatusPaused');
-        }
-        else {
-            this.statusText = this.isUploading ? this.localization.get('headerStatusUploading')
-                : this.localization.get('headerStatusUploaded');
-        }
-    }
-}
-UploadStatusTotalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: UploadStatusTotalComponent, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-UploadStatusTotalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: UploadStatusTotalComponent, selector: "kendo-upload-status-total", inputs: { fileList: "fileList" }, ngImport: i0, template: `
-        <kendo-icon-wrapper
-            [name]="iconClass"
-            [svgIcon]="SVGIconClass"
-        >
-        </kendo-icon-wrapper>
-        {{statusText}}
-    `, isInline: true, components: [{ type: i4.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: UploadStatusTotalComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'kendo-upload-status-total',
-                    template: `
-        <kendo-icon-wrapper
-            [name]="iconClass"
-            [svgIcon]="SVGIconClass"
-        >
-        </kendo-icon-wrapper>
-        {{statusText}}
-    `
-                }]
-        }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }]; }, propDecorators: { fileList: [{
-                type: Input
-            }] } });
-
 /* eslint-disable no-debugger */
 /**
  * @hidden
@@ -3544,8 +3464,8 @@ class UploadActionButtonsComponent {
         return this.localization.get(key);
     }
 }
-UploadActionButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: UploadActionButtonsComponent, deps: [{ token: UploadService }, { token: i1$1.LocalizationService }, { token: NavigationService }], target: i0.ɵɵFactoryTarget.Component });
-UploadActionButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: UploadActionButtonsComponent, 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: `
+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, 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')}}
@@ -3556,7 +3476,7 @@ UploadActionButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
                 {{textFor('uploadSelectedFiles')}}
         </button>
     `, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: UploadActionButtonsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UploadActionButtonsComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-upload-action-buttons',
@@ -3599,7 +3519,86 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 args: ['class.k-actions-center']
             }] } });
 
+/**
+ * @hidden
+ */
+class UploadStatusTotalComponent {
+    constructor(localization) {
+        this.localization = localization;
+        this.checkmarkIcon = checkIcon;
+        this.exceptionSVGIcon = exclamationCircleIcon;
+        this.uploadSVGIcon = uploadIcon;
+        this.pauseSVGIcon = pauseSmIcon;
+    }
+    get iconClass() {
+        if (!this.isUploading && !this.isFailed) {
+            return 'checkmark';
+        }
+        if (!this.isUploading && this.isFailed) {
+            return 'exception';
+        }
+        if (this.isUploading) {
+            return 'upload';
+        }
+        if (this.isPaused) {
+            return 'pause-sm';
+        }
+    }
+    get SVGIconClass() {
+        if (!this.isUploading && !this.isFailed) {
+            return this.checkmarkIcon;
+        }
+        if (!this.isUploading && this.isFailed) {
+            return this.exceptionSVGIcon;
+        }
+        if (this.isUploading) {
+            return this.uploadSVGIcon;
+        }
+        if (this.isPaused) {
+            return this.pauseSVGIcon;
+        }
+    }
+    ngDoCheck() {
+        this.isPaused = this.fileList.hasFileWithState([FileState.Paused]);
+        this.isFailed = this.fileList.hasFileWithState([FileState.Failed]);
+        this.isUploading = this.fileList.hasFileWithState([FileState.Uploading]);
+        if (this.isPaused && !this.isUploading) {
+            this.statusText = this.localization.get('headerStatusPaused');
+        }
+        else {
+            this.statusText = this.isUploading ? this.localization.get('headerStatusUploading')
+                : 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, selector: "kendo-upload-status-total", inputs: { fileList: "fileList" }, ngImport: i0, template: `
+        <kendo-icon-wrapper
+            [name]="iconClass"
+            [svgIcon]="SVGIconClass"
+        >
+        </kendo-icon-wrapper>
+        {{statusText}}
+    `, isInline: true, dependencies: [{ kind: "component", type: i5.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: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-upload-status-total',
+                    template: `
+        <kendo-icon-wrapper
+            [name]="iconClass"
+            [svgIcon]="SVGIconClass"
+        >
+        </kendo-icon-wrapper>
+        {{statusText}}
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }]; }, propDecorators: { fileList: [{
+                type: Input
+            }] } });
+
 /* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable @typescript-eslint/no-explicit-any */
 /**
  * @hidden
  */
@@ -4051,7 +4050,6 @@ class UploadComponent {
         const inputId = `k-upload-input-${id}`;
         return { buttonId, inputId };
     }
-    ;
     /**
      * Focuses the underlying input element.
      */
@@ -4241,8 +4239,8 @@ class UploadComponent {
         }));
     }
 }
-UploadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.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 });
-UploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: UploadComponent, 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", multiple: "multiple", disabled: "disabled", showFileList: "showFileList", tabindex: "tabindex", zoneId: "zoneId", tabIndex: "tabIndex", accept: "accept", restrictions: "restrictions", focusableId: "focusableId", actionsLayout: "actionsLayout" }, outputs: { onBlur: "blur", cancel: "cancel", clear: "clear", complete: "complete", error: "error", onFocus: "focus", pause: "pause", remove: "remove", resume: "resume", select: "select", success: "success", upload: "upload", uploadProgress: "uploadProgress", valueChange: "valueChange" }, host: { properties: { "class.k-upload": "this.hostDefaultClasses", "attr.role": "this.hostRole", "class.k-disabled": "this.hostDisabledClass", "attr.dir": "this.dir" } }, providers: [
+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, 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", multiple: "multiple", disabled: "disabled", showFileList: "showFileList", tabindex: "tabindex", zoneId: "zoneId", tabIndex: "tabIndex", accept: "accept", restrictions: "restrictions", focusableId: "focusableId", actionsLayout: "actionsLayout" }, outputs: { onBlur: "blur", cancel: "cancel", clear: "clear", complete: "complete", error: "error", onFocus: "focus", pause: "pause", remove: "remove", resume: "resume", select: "select", success: "success", upload: "upload", uploadProgress: "uploadProgress", valueChange: "valueChange" }, host: { properties: { "class.k-upload": "this.hostDefaultClasses", "attr.role": "this.hostRole", "class.k-disabled": "this.hostDisabledClass", "attr.dir": "this.dir" } }, providers: [
         LocalizationService,
         NavigationService,
         UploadService,
@@ -4365,8 +4363,8 @@ UploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
         [disabled]="disabled"
         [actionsLayout]="actionsLayout">
     </kendo-upload-action-buttons>
-    `, isInline: true, components: [{ type: i5.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: UploadStatusTotalComponent, selector: "kendo-upload-status-total", inputs: ["fileList"] }, { type: FileListComponent, selector: "[kendo-upload-file-list]", inputs: ["disabled", "fileList", "fileTemplate", "fileInfoTemplate"] }, { type: UploadActionButtonsComponent, selector: "kendo-upload-action-buttons", inputs: ["disabled", "actionsLayout"] }], directives: [{ type: LocalizedMessagesDirective, selector: "\n    [kendoUploadLocalizedMessages],\n    [kendoFileSelectLocalizedMessages],\n    [kendoUploadDropZoneLocalizedMessages]\n  " }, { type: DropZoneInternalDirective, selector: "\n      [kendoUploadInternalDropZone],\n      [kendoFileSelectInternalDropZone]\n    ", inputs: ["disabled", "multiple", "restrictions"] }, { type: FileSelectDirective, selector: "[kendoFileSelect]", inputs: ["dir", "disabled", "multiple", "restrictions", "accept", "required"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: UploadComponent, decorators: [{
+    `, isInline: true, dependencies: [{ kind: "directive", type: DropZoneInternalDirective, selector: "\n      [kendoUploadInternalDropZone],\n      [kendoFileSelectInternalDropZone]\n    ", inputs: ["disabled", "multiple", "restrictions"] }, { kind: "component", type: FileListComponent, selector: "[kendo-upload-file-list]", inputs: ["disabled", "fileList", "fileTemplate", "fileInfoTemplate"] }, { kind: "directive", type: FileSelectDirective, selector: "[kendoFileSelect]", inputs: ["dir", "disabled", "multiple", "restrictions", "accept", "required"] }, { kind: "directive", type: LocalizedMessagesDirective, selector: "\n    [kendoUploadLocalizedMessages],\n    [kendoFileSelectLocalizedMessages],\n    [kendoUploadDropZoneLocalizedMessages]\n  " }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i10.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: "component", type: UploadActionButtonsComponent, selector: "kendo-upload-action-buttons", inputs: ["disabled", "actionsLayout"] }, { kind: "component", type: UploadStatusTotalComponent, selector: "kendo-upload-status-total", inputs: ["fileList"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UploadComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoUpload',
@@ -4653,11 +4651,11 @@ class UploadDropZoneDirective {
         return this.dropZoneService.getComponents(this.zoneId);
     }
 }
-UploadDropZoneDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: UploadDropZoneDirective, deps: [{ token: DropZoneService }], target: i0.ɵɵFactoryTarget.Directive });
-UploadDropZoneDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: UploadDropZoneDirective, selector: "[kendoUploadDropZone], [kendoFileSelectDropZone]", inputs: { zoneId: ["kendoUploadDropZone", "zoneId"] }, host: { listeners: { "dragenter": "onElementDragEnter()", "dragover": "onElementDragOver()", "drop": "onDropListener($event)" } }, providers: [
+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, selector: "[kendoUploadDropZone], [kendoFileSelectDropZone]", inputs: { zoneId: ["kendoUploadDropZone", "zoneId"] }, host: { listeners: { "dragenter": "onElementDragEnter()", "dragover": "onElementDragOver()", "drop": "onDropListener($event)" } }, providers: [
         DropZoneService
     ], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: UploadDropZoneDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UploadDropZoneDirective, decorators: [{
             type: Directive,
             args: [{
                     providers: [
@@ -4731,8 +4729,8 @@ class UploadDropZoneComponent extends DropZoneBase {
         }
     }
 }
-UploadDropZoneComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: UploadDropZoneComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-UploadDropZoneComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: UploadDropZoneComponent, 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: [
+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, 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,
@@ -4756,8 +4754,8 @@ UploadDropZoneComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
                 <ng-content></ng-content>
             </span>
         </div>
-    `, isInline: true, components: [{ type: i4.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: LocalizedMessagesDirective, selector: "\n    [kendoUploadLocalizedMessages],\n    [kendoFileSelectLocalizedMessages],\n    [kendoUploadDropZoneLocalizedMessages]\n  " }, { type: UploadDropZoneDirective, selector: "[kendoUploadDropZone], [kendoFileSelectDropZone]", inputs: ["kendoUploadDropZone"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: UploadDropZoneComponent, decorators: [{
+    `, isInline: true, dependencies: [{ kind: "component", type: i5.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: UploadDropZoneDirective, selector: "[kendoUploadDropZone], [kendoFileSelectDropZone]", inputs: ["kendoUploadDropZone"] }, { kind: "directive", type: LocalizedMessagesDirective, selector: "\n    [kendoUploadLocalizedMessages],\n    [kendoFileSelectLocalizedMessages],\n    [kendoUploadDropZoneLocalizedMessages]\n  " }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UploadDropZoneComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoUploadDropZone',
@@ -4833,8 +4831,8 @@ const PUBLIC_DIRECTIVES = [
  */
 class SharedModule {
 }
-SharedModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SharedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SharedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SharedModule, declarations: [FileTemplateDirective,
+SharedModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SharedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SharedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: SharedModule, declarations: [FileTemplateDirective,
         FileInfoTemplateDirective,
         CustomMessagesComponent,
         UploadDropZoneDirective,
@@ -4858,9 +4856,9 @@ SharedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "
         FileSelectDirective,
         LocalizedMessagesDirective, CommonModule,
         ButtonsModule] });
-SharedModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SharedModule, imports: [[CommonModule, ButtonsModule, ProgressBarModule, IconsModule], CommonModule,
+SharedModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SharedModule, imports: [CommonModule, ButtonsModule, ProgressBarModule, IconsModule, CommonModule,
         ButtonsModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SharedModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SharedModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -4885,10 +4883,10 @@ const FILESELECT_DECLARATIONS = [
  */
 class FileSelectModule {
 }
-FileSelectModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FileSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-FileSelectModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FileSelectModule, declarations: [FileSelectComponent], imports: [SharedModule, IconsModule], exports: [FileTemplateDirective, FileInfoTemplateDirective, CustomMessagesComponent, UploadDropZoneDirective, UploadDropZoneComponent, FileSelectComponent] });
-FileSelectModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FileSelectModule, imports: [[SharedModule, IconsModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FileSelectModule, decorators: [{
+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, declarations: [FileSelectComponent], imports: [SharedModule, IconsModule], exports: [FileTemplateDirective, FileInfoTemplateDirective, CustomMessagesComponent, UploadDropZoneDirective, UploadDropZoneComponent, FileSelectComponent] });
+FileSelectModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FileSelectModule, imports: [SharedModule, IconsModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FileSelectModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [FILESELECT_DECLARATIONS],
@@ -4910,14 +4908,14 @@ const UPLOAD_DECLARATIONS = [
  */
 class UploadModule {
 }
-UploadModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: UploadModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-UploadModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: UploadModule, declarations: [UploadComponent,
+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, declarations: [UploadComponent,
         UploadActionButtonsComponent,
         UploadStatusTotalComponent], imports: [SharedModule, IconsModule], exports: [FileTemplateDirective, FileInfoTemplateDirective, CustomMessagesComponent, UploadDropZoneDirective, UploadDropZoneComponent, UploadComponent,
         UploadActionButtonsComponent,
         UploadStatusTotalComponent] });
-UploadModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: UploadModule, imports: [[SharedModule, IconsModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: UploadModule, decorators: [{
+UploadModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UploadModule, imports: [SharedModule, IconsModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UploadModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [UPLOAD_DECLARATIONS],
@@ -4956,12 +4954,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  */
 class UploadsModule {
 }
-UploadsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: UploadsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-UploadsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: UploadsModule, exports: [FileSelectModule,
+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, exports: [FileSelectModule,
         UploadModule] });
-UploadsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: UploadsModule, imports: [FileSelectModule,
+UploadsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UploadsModule, imports: [FileSelectModule,
         UploadModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: UploadsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UploadsModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [