@progress/kendo-angular-upload 9.0.4 → 11.0.0-develop.101

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

@@ -1,20 +1,27 @@
 /**-----------------------------------------------------------------------------------------
-* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 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, ContentChild, ViewChild, Output, isDevMode, NgModule } from '@angular/core';
+import { EventEmitter, Injectable, Directive, Input, HostBinding, HostListener, Component, ViewChildren, forwardRef, Inject, ElementRef, ContentChild, ViewChild, Output, isDevMode, NgModule } from '@angular/core';
 import { guid, Keys, isDocumentAvailable, KendoInput, isChanged } from '@progress/kendo-angular-common';
+import { fileAudioIcon, fileVideoIcon, fileImageIcon, fileTxtIcon, filePresentationIcon, fileExcelIcon, fileProgrammingIcon, filePdfIcon, fileConfigIcon, fileZipIcon, fileDiscImageIcon, arrowRotateCwSmallIcon, playSmIcon, pauseSmIcon, cancelIcon, xIcon, fileIcon, copyIcon, checkIcon, exclamationCircleIcon, uploadIcon } from '@progress/kendo-svg-icons';
 import { NG_VALUE_ACCESSOR } 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 i7 from '@progress/kendo-angular-buttons';
+import { ButtonsModule } from '@progress/kendo-angular-buttons';
 import { trigger, state, style, transition, animate } from '@angular/animations';
-import * as i4 from '@angular/common';
+import * as i3 from '@progress/kendo-angular-progressbar';
+import { ProgressBarModule } from '@progress/kendo-angular-progressbar';
+import * as i4 from '@progress/kendo-angular-icons';
+import { IconsModule } from '@progress/kendo-angular-icons';
+import * as i6 from '@angular/common';
 import { CommonModule } from '@angular/common';
 
 /**
@@ -56,7 +63,7 @@ class FileMap {
         this._files = {};
     }
     add(file) {
-        let uid = file.uid;
+        const uid = file.uid;
         if (this.has(uid)) {
             if (file.validationErrors && file.validationErrors.length > 0) {
                 this._files[uid].unshift(file);
@@ -76,10 +83,10 @@ class FileMap {
         }
     }
     clear() {
-        let allFiles = this._files;
-        for (let uid in allFiles) {
+        const allFiles = this._files;
+        for (const uid in allFiles) {
             if (allFiles.hasOwnProperty(uid)) {
-                for (let file of allFiles[uid]) {
+                for (const file of allFiles[uid]) {
                     if (file.httpSubscription) {
                         file.httpSubscription.unsubscribe();
                     }
@@ -96,7 +103,7 @@ class FileMap {
         return this._files[uid];
     }
     setFilesState(files, state) {
-        for (let file of files) {
+        for (const file of files) {
             this.setFilesStateByUid(file.uid, state);
         }
     }
@@ -109,9 +116,9 @@ class FileMap {
         return Object.getOwnPropertyNames(this._files).length;
     }
     get files() {
-        let initial = this._files;
-        let transformed = [];
-        for (let uid in initial) {
+        const initial = this._files;
+        const transformed = [];
+        for (const uid in initial) {
             if (initial.hasOwnProperty(uid)) {
                 transformed.push(initial[uid]);
             }
@@ -119,11 +126,11 @@ class FileMap {
         return transformed;
     }
     get filesFlat() {
-        let initial = this._files;
-        let transformed = [];
-        for (let uid in initial) {
+        const initial = this._files;
+        const transformed = [];
+        for (const uid in initial) {
             if (initial.hasOwnProperty(uid)) {
-                let current = initial[uid];
+                const current = initial[uid];
                 current.forEach((file) => {
                     transformed.push(file);
                 });
@@ -132,13 +139,13 @@ class FileMap {
         return transformed;
     }
     get filesToUpload() {
-        let files = this._files;
-        let notUploaded = [];
-        for (let uid in files) {
+        const files = this._files;
+        const notUploaded = [];
+        for (const uid in files) {
             if (files.hasOwnProperty(uid)) {
-                let currentFiles = files[uid];
+                const currentFiles = files[uid];
                 let currentFilesValid = true;
-                for (let file of currentFiles) {
+                for (const file of currentFiles) {
                     if (file.state !== FileState.Selected || (file.validationErrors && file.validationErrors.length > 0)) {
                         currentFilesValid = false;
                     }
@@ -151,12 +158,12 @@ class FileMap {
         return notUploaded;
     }
     get firstFileToUpload() {
-        let files = this._files;
-        for (let uid in files) {
+        const files = this._files;
+        for (const uid in files) {
             if (files.hasOwnProperty(uid)) {
-                let currentFiles = files[uid];
+                const currentFiles = files[uid];
                 let currentFilesValid = true;
-                for (let file of currentFiles) {
+                for (const file of currentFiles) {
                     if (file.state !== FileState.Selected || (file.validationErrors && file.validationErrors.length > 0)) {
                         currentFilesValid = false;
                     }
@@ -172,11 +179,11 @@ class FileMap {
         return this.filesFlat.filter(file => file.state === state);
     }
     hasFileWithState(fileStates) {
-        let files = this._files;
-        for (let uid in files) {
+        const files = this._files;
+        for (const uid in files) {
             if (files.hasOwnProperty(uid)) {
-                let currentFiles = files[uid];
-                for (let file of currentFiles) {
+                const currentFiles = files[uid];
+                for (const file of currentFiles) {
                     if (fileStates.indexOf(file.state) >= 0) {
                         return true;
                     }
@@ -632,6 +639,23 @@ const fileGroupMap = {
         ".dmg", ".iso", ".toast", ".vcd", ".bin", ".cue", ".mdf"
     ]
 };
+;
+/**
+ * @hidden
+ */
+const fileSVGGroupMap = {
+    audio: fileAudioIcon,
+    video: fileVideoIcon,
+    image: fileImageIcon,
+    txt: fileTxtIcon,
+    presentation: filePresentationIcon,
+    data: fileExcelIcon,
+    programming: fileProgrammingIcon,
+    pdf: filePdfIcon,
+    config: fileConfigIcon,
+    zip: fileZipIcon,
+    discImage: fileDiscImageIcon
+};
 
 /* eslint-disable  no-bitwise */
 /**
@@ -659,7 +683,7 @@ const getTotalFilesSizeMessage = (files) => {
     }
 };
 const stripPath = (name) => {
-    let slashIndex = name.lastIndexOf("\\");
+    const slashIndex = name.lastIndexOf("\\");
     return (slashIndex !== -1) ? name.substr(slashIndex + 1) : name;
 };
 const getFileExtension = (fileName) => {
@@ -690,7 +714,7 @@ const validateInitialFileSelectFile = (file) => {
  */
 const getInitialFileInfo = (fakeFile) => {
     fakeFile.extension = fakeFile.extension || getFileExtension(fakeFile.name);
-    fakeFile.name = fakeFile.name;
+    fakeFile.name = fakeFile.name; // eslint-disable-line no-self-assign
     fakeFile.size = fakeFile.size || 0;
     if (!fakeFile.hasOwnProperty("state")) {
         fakeFile.state = FileState.Initial;
@@ -704,7 +728,7 @@ const getInitialFileInfo = (fakeFile) => {
  * @hidden
  */
 const convertFileToFileInfo = (file) => {
-    let fileInfo = getFileInfo(file);
+    const fileInfo = getFileInfo(file);
     fileInfo.uid = guid();
     // Used to differentiate initial FileInfo objects and actual Files
     fileInfo.state = FileState.Selected;
@@ -725,7 +749,7 @@ const getFileInfo = (rawFile) => {
  * @hidden
  */
 const getAllFileInfo = (rawFiles) => {
-    let allFileInfo = new Array();
+    const allFileInfo = new Array();
     let i;
     for (i = 0; i < rawFiles.length; i++) {
         allFileInfo.push(getFileInfo(rawFiles[i]));
@@ -745,7 +769,7 @@ const fileHasValidationErrors = (file) => {
  * @hidden
  */
 const filesHaveValidationErrors = (files) => {
-    for (let file of files) {
+    for (const file of files) {
         if (fileHasValidationErrors(file)) {
             return true;
         }
@@ -761,8 +785,8 @@ const inputFiles = (input) => {
     }
     else {
         //Required for testing
-        let fileNames = input.value.split("|").map((file, index) => {
-            let fileName = file.trim();
+        const fileNames = input.value.split("|").map((file, index) => {
+            const fileName = file.trim();
             return {
                 extension: getFileExtension(fileName),
                 name: stripPath(fileName),
@@ -840,9 +864,12 @@ const isFocusable = (element, checkVisibility = true) => {
  * @hidden
  */
 const getFileGroupCssClass = (fileExtension) => {
-    const initial = 'k-i-file';
-    for (let group in fileGroupMap) {
+    const initial = 'file';
+    for (const group in fileGroupMap) {
         if (fileGroupMap[group].indexOf(fileExtension) >= 0) {
+            if (group === 'discImage') {
+                return `${initial}-disc-image`;
+            }
             return `${initial}-${group}`;
         }
     }
@@ -949,17 +976,17 @@ class UploadService {
         }
     }
     onChange() {
-        let files = this.fileList.filesFlat.filter((file) => {
+        const files = this.fileList.filesFlat.filter((file) => {
             return file.state === FileState.Initial ||
                 file.state === FileState.Uploaded;
         });
         this.changeEvent.emit(files.length > 0 ? files : null);
     }
     addFiles(files) {
-        let selectEventArgs = new SelectEvent(files);
+        const selectEventArgs = new SelectEvent(files);
         this.selectEvent.emit(selectEventArgs);
         if (!selectEventArgs.isDefaultPrevented()) {
-            for (let file of files) {
+            for (const file of files) {
                 this.fileList.add(file);
             }
             if (this.async.autoUpload) {
@@ -974,7 +1001,7 @@ class UploadService {
     addInitialFiles(initialFiles) {
         this.fileList.clear();
         initialFiles.forEach((file) => {
-            let fakeFile = getInitialFileInfo(file);
+            const fakeFile = getInitialFileInfo(file);
             this.fileList.add(fakeFile);
         });
     }
@@ -996,14 +1023,14 @@ class UploadService {
         this._uploadFiles([fileToResume]);
     }
     pauseFile(uid) {
-        let pausedFile = this.fileList.get(uid)[0];
+        const pausedFile = this.fileList.get(uid)[0];
         this.pauseEvent.emit(new PauseEvent(pausedFile));
         this.fileList.setFilesStateByUid(uid, FileState.Paused);
     }
     removeFiles(uid) {
-        let removedFiles = this.fileList.get(uid);
+        const removedFiles = this.fileList.get(uid);
         // Clone the Headers so that the default ones are not overridden
-        let removeEventArgs = new RemoveEvent(removedFiles, this.cloneRequestHeaders(this.async.removeHeaders));
+        const removeEventArgs = new RemoveEvent(removedFiles, this.cloneRequestHeaders(this.async.removeHeaders));
         this.removeEvent.emit(removeEventArgs);
         if (!removeEventArgs.isDefaultPrevented()) {
             if (this.component === 'Upload' &&
@@ -1021,10 +1048,10 @@ class UploadService {
         }
     }
     cancelFiles(uid) {
-        let canceledFiles = this.fileList.get(uid);
-        let cancelEventArgs = new CancelEvent(canceledFiles);
+        const canceledFiles = this.fileList.get(uid);
+        const cancelEventArgs = new CancelEvent(canceledFiles);
         this.cancelEvent.emit(cancelEventArgs);
-        for (let file of canceledFiles) {
+        for (const file of canceledFiles) {
             if (file.httpSubscription) {
                 file.httpSubscription.unsubscribe();
             }
@@ -1033,10 +1060,10 @@ class UploadService {
         this.checkAllComplete();
     }
     clearFiles() {
-        let clearEventArgs = new ClearEvent();
+        const clearEventArgs = new ClearEvent();
         this.clearEvent.emit(clearEventArgs);
         if (!clearEventArgs.isDefaultPrevented()) {
-            let triggerChange = this.fileList.hasFileWithState([
+            const triggerChange = this.fileList.hasFileWithState([
                 FileState.Initial,
                 FileState.Uploaded
             ]);
@@ -1059,22 +1086,22 @@ class UploadService {
         }
     }
     retryFiles(uid) {
-        let filesToRetry = [this.fileList.get(uid)];
+        const filesToRetry = [this.fileList.get(uid)];
         if (filesToRetry) {
             this._uploadFiles(filesToRetry);
         }
     }
     _uploadFiles(allFiles) {
-        for (let filesToUpload of allFiles) {
+        for (const filesToUpload of allFiles) {
             if (filesToUpload[0].state === FileState.Paused) {
                 return;
             }
             // Clone the Headers so that the default ones are not overridden
-            let uploadEventArgs = new UploadEvent(filesToUpload, this.cloneRequestHeaders(this.async.saveHeaders));
+            const uploadEventArgs = new UploadEvent(filesToUpload, this.cloneRequestHeaders(this.async.saveHeaders));
             this.uploadEvent.emit(uploadEventArgs);
             if (!uploadEventArgs.isDefaultPrevented()) {
                 this.fileList.setFilesState(filesToUpload, FileState.Uploading);
-                let httpSubcription = this.performUpload(filesToUpload, uploadEventArgs);
+                const httpSubcription = this.performUpload(filesToUpload, uploadEventArgs);
                 filesToUpload.forEach((file) => {
                     file.httpSubscription = httpSubcription;
                 });
@@ -1086,12 +1113,12 @@ class UploadService {
     }
     performRemove(files, removeEventArgs) {
         const async = this.async;
-        let fileNames = files.map((file) => {
+        const fileNames = files.map((file) => {
             return file.name;
         });
-        let formData = this.populateRemoveFormData(fileNames, removeEventArgs.data);
-        let options = this.populateRequestOptions(removeEventArgs.headers, false);
-        let removeRequest = new HttpRequest(async.removeMethod, async.removeUrl, formData, options);
+        const formData = this.populateRemoveFormData(fileNames, removeEventArgs.data);
+        const options = this.populateRequestOptions(removeEventArgs.headers, false);
+        const removeRequest = new HttpRequest(async.removeMethod, async.removeUrl, formData, options);
         this.http.request(removeRequest)
             .subscribe(success => {
             this.onSuccess(success, files, "remove");
@@ -1101,10 +1128,10 @@ class UploadService {
     }
     performUpload(files, uploadEventArgs) {
         const async = this.async;
-        let formData = this.populateUploadFormData(files, uploadEventArgs.data);
-        let options = this.populateRequestOptions(uploadEventArgs.headers);
-        let uploadRequest = new HttpRequest(async.saveMethod, async.saveUrl, formData, options);
-        let httpSubscription = this.http.request(uploadRequest)
+        const formData = this.populateUploadFormData(files, uploadEventArgs.data);
+        const options = this.populateRequestOptions(uploadEventArgs.headers);
+        const uploadRequest = new HttpRequest(async.saveMethod, async.saveUrl, formData, options);
+        const httpSubscription = this.http.request(uploadRequest)
             .subscribe(event => {
             if (event.type === HttpEventType.UploadProgress && !this.async.chunk) {
                 this.onProgress(event, files);
@@ -1203,7 +1230,7 @@ class UploadService {
         return validSelectedFiles.length === 0;
     }
     cloneRequestHeaders(headers) {
-        let cloned = {};
+        const cloned = {};
         if (headers) {
             headers.keys().forEach((key) => {
                 cloned[key] = headers.get(key);
@@ -1221,29 +1248,29 @@ class UploadService {
     }
     populateUploadFormData(files, clientData) {
         const saveField = this.async.saveField;
-        let data = new FormData();
+        const data = new FormData();
         this.populateClientFormData(data, clientData);
         if (this.async.chunk) {
             data.append(saveField, this.getNextChunk(files[0]));
             data.append("metadata", this.getChunkMetadata(files[0]));
         }
         else {
-            for (let file of files) {
+            for (const file of files) {
                 data.append(saveField, file.rawFile);
             }
         }
         return data;
     }
     populateRemoveFormData(fileNames, clientData) {
-        let data = new FormData();
+        const data = new FormData();
         this.populateClientFormData(data, clientData);
-        for (let fileName of fileNames) {
+        for (const fileName of fileNames) {
             data.append(this.async.removeField, fileName);
         }
         return data;
     }
     populateClientFormData(data, clientData) {
-        for (var key in clientData) {
+        for (const key in clientData) {
             if (clientData.hasOwnProperty(key)) {
                 data.append(key, clientData[key]);
             }
@@ -1294,9 +1321,9 @@ class UploadService {
         return false;
     }
 }
-UploadService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: UploadService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
-UploadService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: UploadService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: UploadService, decorators: [{
+UploadService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: UploadService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
+UploadService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: UploadService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: UploadService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i1.HttpClient }]; } });
 
@@ -1304,8 +1331,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
  * @hidden
  */
 class NavigationService {
-    constructor(uploadService) {
+    constructor(uploadService, zone) {
         this.uploadService = uploadService;
+        this.zone = zone;
         this.onActionButtonAction = new EventEmitter();
         this.onActionButtonFocus = new EventEmitter();
         this.onFileAction = new EventEmitter();
@@ -1349,18 +1377,22 @@ class NavigationService {
     }
     handleEnter() {
         if (this.lastIndex >= 0) {
-            if (this.focusedIndex <= this.lastFileIndex) {
-                this.onFileAction.emit(Keys.Enter);
-                return;
-            }
-            if (this.actionButtonsVisible && this.focusedIndex <= this.lastIndex) {
-                this.onActionButtonAction.emit(this.focusedIndex < this.lastIndex ? "clear" : "upload");
-            }
+            this.zone.run(() => {
+                if (this.focusedIndex <= this.lastFileIndex) {
+                    this.onFileAction.emit(Keys.Enter);
+                    return;
+                }
+                if (this.actionButtonsVisible && this.focusedIndex <= this.lastIndex) {
+                    this.onActionButtonAction.emit(this.focusedIndex < this.lastIndex ? "clear" : "upload");
+                }
+            });
         }
     }
     handleDelete() {
         if (this.focusedIndex >= 0 && this.focusedIndex <= this.lastFileIndex) {
-            this.onFileAction.emit(Keys.Delete);
+            this.zone.run(() => {
+                this.onFileAction.emit(Keys.Delete);
+            });
         }
     }
     handleEscape() {
@@ -1371,13 +1403,17 @@ class NavigationService {
     handleLeft() {
         if (this.actionButtonsVisible && this.focusedIndex === this.lastIndex) {
             this.focusedIndex -= 1;
-            this.onActionButtonFocus.emit("clear");
+            this.zone.run(() => {
+                this.onActionButtonFocus.emit("clear");
+            });
         }
     }
     handleRight() {
         if (this.actionButtonsVisible && this.focusedIndex === this.lastIndex - 1) {
             this.focusedIndex += 1;
-            this.onActionButtonFocus.emit("upload");
+            this.zone.run(() => {
+                this.onActionButtonFocus.emit("upload");
+            });
         }
     }
     handleTab(shifted) {
@@ -1385,36 +1421,42 @@ class NavigationService {
             this.focusedIndex = -1;
             return;
         }
-        this.onTab.emit();
+        this.zone.run(() => {
+            this.onTab.emit();
+        });
     }
     handleDown() {
         if (this.lastIndex >= 0 && this.focusedIndex < this.lastIndex) {
-            if (this.focusedIndex < this.lastFileIndex) {
-                this.focusedIndex += 1;
-                this.onFileFocus.emit(this.focusedIndex);
-                return;
-            }
-            if (this.actionButtonsVisible && this.focusedIndex === this.lastFileIndex) {
-                this.focusedIndex += 1;
-                this.onActionButtonFocus.emit("clear");
-            }
+            this.zone.run(() => {
+                if (this.focusedIndex < this.lastFileIndex) {
+                    this.focusedIndex += 1;
+                    this.onFileFocus.emit(this.focusedIndex);
+                    return;
+                }
+                if (this.actionButtonsVisible && this.focusedIndex === this.lastFileIndex) {
+                    this.focusedIndex += 1;
+                    this.onActionButtonFocus.emit("clear");
+                }
+            });
         }
     }
     handleUp() {
         if (this.lastIndex >= 0 && this.focusedIndex > -1) {
-            this.focusedIndex -= 1;
-            if (this.focusedIndex === -1) {
-                this.onSelectButtonFocus.emit();
-                return;
-            }
-            if (this.focusedIndex <= this.lastFileIndex) {
-                this.onFileFocus.emit(this.focusedIndex);
-                return;
-            }
-            if (this.actionButtonsVisible && this.focusedIndex <= this.lastIndex) {
-                this.focusedIndex = this.lastFileIndex;
-                this.onFileFocus.emit(this.focusedIndex);
-            }
+            this.zone.run(() => {
+                this.focusedIndex -= 1;
+                if (this.focusedIndex === -1) {
+                    this.onSelectButtonFocus.emit();
+                    return;
+                }
+                if (this.focusedIndex <= this.lastFileIndex) {
+                    this.onFileFocus.emit(this.focusedIndex);
+                    return;
+                }
+                if (this.actionButtonsVisible && this.focusedIndex <= this.lastIndex) {
+                    this.focusedIndex = this.lastFileIndex;
+                    this.onFileFocus.emit(this.focusedIndex);
+                }
+            });
         }
     }
     get focusedIndex() {
@@ -1438,11 +1480,11 @@ class NavigationService {
         return this.actionButtonsVisible ? fileCount + 1 : fileCount - 1;
     }
 }
-NavigationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NavigationService, deps: [{ token: UploadService }], target: i0.ɵɵFactoryTarget.Injectable });
-NavigationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NavigationService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NavigationService, decorators: [{
+NavigationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", 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.11", ngImport: i0, type: NavigationService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NavigationService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: UploadService }]; } });
+        }], ctorParameters: function () { return [{ type: UploadService }, { type: i0.NgZone }]; } });
 
 /**
  * @hidden
@@ -1451,9 +1493,9 @@ const packageMetadata = {
     name: '@progress/kendo-angular-upload',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1668699030,
+    publishDate: 1673510538,
     version: '',
-    licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
+    licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
 /**
@@ -1464,16 +1506,16 @@ class FileTemplateDirective {
         this.templateRef = templateRef;
     }
 }
-FileTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FileTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-FileTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: FileTemplateDirective, selector: "[kendoUploadFileTemplate], [kendoFileSelectFileTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FileTemplateDirective, decorators: [{
+FileTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FileTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+FileTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: FileTemplateDirective, selector: "[kendoUploadFileTemplate], [kendoFileSelectFileTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FileTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoUploadFileTemplate], [kendoFileSelectFileTemplate]'
                 }]
         }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
 
-let components = {};
+const components = {};
 /**
  * @hidden
  */
@@ -1493,9 +1535,9 @@ class DropZoneService {
         return id in components;
     }
 }
-DropZoneService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DropZoneService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-DropZoneService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DropZoneService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DropZoneService, decorators: [{
+DropZoneService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DropZoneService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+DropZoneService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DropZoneService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DropZoneService, decorators: [{
             type: Injectable
         }] });
 
@@ -1507,9 +1549,9 @@ class FileInfoTemplateDirective {
         this.templateRef = templateRef;
     }
 }
-FileInfoTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FileInfoTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-FileInfoTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: FileInfoTemplateDirective, selector: "[kendoUploadFileInfoTemplate], [kendoFileSelectFileInfoTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FileInfoTemplateDirective, decorators: [{
+FileInfoTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FileInfoTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+FileInfoTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: FileInfoTemplateDirective, selector: "[kendoUploadFileInfoTemplate], [kendoFileSelectFileInfoTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FileInfoTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoUploadFileInfoTemplate], [kendoFileSelectFileInfoTemplate]'
@@ -1568,9 +1610,9 @@ class FileListItemDirective {
         }
     }
 }
-FileListItemDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", 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: "12.2.16", 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: "12.2.16", ngImport: i0, type: FileListItemDirective, decorators: [{
+FileListItemDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", 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.11", 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.11", ngImport: i0, type: FileListItemDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoUploadFileListItem]'
@@ -1648,9 +1690,9 @@ class FileListItemBase {
         return this.localization.get(key);
     }
 }
-FileListItemBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FileListItemBase, deps: [{ token: UploadService }], target: i0.ɵɵFactoryTarget.Component });
-FileListItemBase.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FileListItemBase, selector: "ng-component", ngImport: i0, template: '', isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FileListItemBase, decorators: [{
+FileListItemBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FileListItemBase, deps: [{ token: UploadService }], target: i0.ɵɵFactoryTarget.Component });
+FileListItemBase.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: FileListItemBase, selector: "ng-component", ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FileListItemBase, decorators: [{
             type: Component,
             args: [{ template: '' }]
         }], ctorParameters: function () { return [{ type: UploadService }]; } });
@@ -1666,6 +1708,11 @@ class FileListItemActionButtonComponent {
         this.actionFocused = false;
         this.retryFocused = false;
         this.pauseResumeFocused = false;
+        this.retrySVGIcon = arrowRotateCwSmallIcon;
+        this.playSVGIcon = playSmIcon;
+        this.pauseSVGIcon = pauseSmIcon;
+        this.cancelSVGIcon = cancelIcon;
+        this.deleteSVGIcon = xIcon;
     }
     onFocus(type) {
         if (type === 'action') {
@@ -1759,108 +1806,134 @@ class FileListItemActionButtonComponent {
         return true;
     }
 }
-FileListItemActionButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", 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: "12.2.16", type: FileListItemActionButtonComponent, selector: "kendo-upload-file-list-item-action-button", inputs: { file: "file", disabled: "disabled", progress: "progress" }, ngImport: i0, template: `
-      <strong class="k-upload-status">
+FileListItemActionButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", 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.11", 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>
 
-        <button type="button" *ngIf="isFailed" class="k-button k-icon-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-upload-action"
-          [ngClass]="{ 'k-focus': this.retryFocused }"
-          [attr.tabIndex]="-1"
-          (focus)="onFocus('retry')"
-          (blur)="onBlur('retry')"
-          (click)="onRetryClick()">
-          <span class="k-icon k-button-icon k-retry k-i-refresh-sm"
-            [attr.aria-label]="retryButtonTitle"
-            [attr.title]="retryButtonTitle">
-          </span>
+        <button
+            *ngIf="isFailed"
+            type="button"
+            class="k-button k-icon-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-upload-action"
+            [ngClass]="{ 'k-focus': this.retryFocused }"
+            [attr.tabIndex]="-1"
+
+            (focus)="onFocus('retry')"
+            (blur)="onBlur('retry')"
+            (click)="onRetryClick()"
+        >
+            <kendo-icon-wrapper
+                name="refresh-sm"
+                [svgIcon]="retrySVGIcon"
+                innerCssClass="k-retry"
+                [attr.aria-label]="retryButtonTitle"
+                [attr.title]="retryButtonTitle"
+            ></kendo-icon-wrapper>
         </button>
 
-        <button *ngIf="isResumable" type="button" class="k-button k-icon-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-upload-action"
-          [ngClass]="{ 'k-focus': this.pauseResumeFocused }"
-          [attr.tabIndex]="-1"
-          (focus)="onFocus('pauseResume')"
-          (blur)="onBlur('pauseResume')"
-          (click)="onPauseResumeClick()">
-          <span class="k-icon k-button-icon"
-            [ngClass]="{
-              'k-i-play-sm': isPaused,
-              'k-i-pause-sm': !isPaused
-            }"
-            [attr.aria-label]='pauseResumeButtonTitle'
-            [attr.title]='pauseResumeButtonTitle'>
-          </span>
+        <button
+            *ngIf="isResumable"
+            type="button"
+            class="k-button k-icon-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-upload-action"
+            [ngClass]="{ 'k-focus': this.pauseResumeFocused }"
+            [attr.tabIndex]="-1"
+            (focus)="onFocus('pauseResume')"
+            (blur)="onBlur('pauseResume')"
+            (click)="onPauseResumeClick()"
+        >
+            <kendo-icon-wrapper
+                [name]="isPaused ? 'play-sm' : 'pause-sm'"
+                [svgIcon]="isPaused ? playSVGIcon : pauseSVGIcon"
+                [attr.aria-label]='pauseResumeButtonTitle'
+                [attr.title]='pauseResumeButtonTitle'
+            ></kendo-icon-wrapper>
         </button>
 
-        <button type="button" *ngIf="isActionButtonVisible" class="k-button k-icon-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-upload-action"
-          [ngClass]="{ 'k-focus': this.actionFocused }"
-          [attr.tabIndex]="-1"
-          (focus)="onFocus('action')"
-          (blur)="onBlur('action')"
-          (click)="onRemoveCancelClick($event)">
-          <span class="k-icon k-button-icon"
-            [ngClass]="{
-              'k-i-cancel': isUploading,
-              'k-delete k-i-x': !isUploading
-            }"
-            [attr.aria-label]='actionButtonTitle'
-            [attr.title]='actionButtonTitle'>
-          </span>
+        <button 
+            *ngIf="isActionButtonVisible"
+            class="k-button k-icon-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-upload-action"
+            type="button"
+            [attr.tabIndex]="-1"
+            (focus)="onFocus('action')"
+            (blur)="onBlur('action')"
+            [ngClass]="{ 'k-focus': this.actionFocused }"
+            (click)="onRemoveCancelClick($event)"
+        >
+            <kendo-icon-wrapper
+                [name]="isUploading ? 'cancel' : 'x'"
+                [svgIcon]="isUploading ? cancelSVGIcon : deleteSVGIcon"
+                [innerCssClass]="!isUploading ? 'k-delete' : ''"
+                [attr.aria-label]='actionButtonTitle'
+                [attr.title]='actionButtonTitle'
+            ></kendo-icon-wrapper>
         </button>
-      </strong>
-    `, isInline: true, directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FileListItemActionButtonComponent, decorators: [{
+    </span>
+    `, isInline: true, components: [{ type: i4.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], 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.11", ngImport: i0, type: FileListItemActionButtonComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-upload-file-list-item-action-button',
                     template: `
-      <strong class="k-upload-status">
+    <span class="k-upload-actions">
         <span class="k-upload-pct" *ngIf="isUploading || isPaused">{{progress}}%</span>
 
-        <button type="button" *ngIf="isFailed" class="k-button k-icon-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-upload-action"
-          [ngClass]="{ 'k-focus': this.retryFocused }"
-          [attr.tabIndex]="-1"
-          (focus)="onFocus('retry')"
-          (blur)="onBlur('retry')"
-          (click)="onRetryClick()">
-          <span class="k-icon k-button-icon k-retry k-i-refresh-sm"
-            [attr.aria-label]="retryButtonTitle"
-            [attr.title]="retryButtonTitle">
-          </span>
+        <button
+            *ngIf="isFailed"
+            type="button"
+            class="k-button k-icon-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-upload-action"
+            [ngClass]="{ 'k-focus': this.retryFocused }"
+            [attr.tabIndex]="-1"
+
+            (focus)="onFocus('retry')"
+            (blur)="onBlur('retry')"
+            (click)="onRetryClick()"
+        >
+            <kendo-icon-wrapper
+                name="refresh-sm"
+                [svgIcon]="retrySVGIcon"
+                innerCssClass="k-retry"
+                [attr.aria-label]="retryButtonTitle"
+                [attr.title]="retryButtonTitle"
+            ></kendo-icon-wrapper>
         </button>
 
-        <button *ngIf="isResumable" type="button" class="k-button k-icon-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-upload-action"
-          [ngClass]="{ 'k-focus': this.pauseResumeFocused }"
-          [attr.tabIndex]="-1"
-          (focus)="onFocus('pauseResume')"
-          (blur)="onBlur('pauseResume')"
-          (click)="onPauseResumeClick()">
-          <span class="k-icon k-button-icon"
-            [ngClass]="{
-              'k-i-play-sm': isPaused,
-              'k-i-pause-sm': !isPaused
-            }"
-            [attr.aria-label]='pauseResumeButtonTitle'
-            [attr.title]='pauseResumeButtonTitle'>
-          </span>
+        <button
+            *ngIf="isResumable"
+            type="button"
+            class="k-button k-icon-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-upload-action"
+            [ngClass]="{ 'k-focus': this.pauseResumeFocused }"
+            [attr.tabIndex]="-1"
+            (focus)="onFocus('pauseResume')"
+            (blur)="onBlur('pauseResume')"
+            (click)="onPauseResumeClick()"
+        >
+            <kendo-icon-wrapper
+                [name]="isPaused ? 'play-sm' : 'pause-sm'"
+                [svgIcon]="isPaused ? playSVGIcon : pauseSVGIcon"
+                [attr.aria-label]='pauseResumeButtonTitle'
+                [attr.title]='pauseResumeButtonTitle'
+            ></kendo-icon-wrapper>
         </button>
 
-        <button type="button" *ngIf="isActionButtonVisible" class="k-button k-icon-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-upload-action"
-          [ngClass]="{ 'k-focus': this.actionFocused }"
-          [attr.tabIndex]="-1"
-          (focus)="onFocus('action')"
-          (blur)="onBlur('action')"
-          (click)="onRemoveCancelClick($event)">
-          <span class="k-icon k-button-icon"
-            [ngClass]="{
-              'k-i-cancel': isUploading,
-              'k-delete k-i-x': !isUploading
-            }"
-            [attr.aria-label]='actionButtonTitle'
-            [attr.title]='actionButtonTitle'>
-          </span>
+        <button 
+            *ngIf="isActionButtonVisible"
+            class="k-button k-icon-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-upload-action"
+            type="button"
+            [attr.tabIndex]="-1"
+            (focus)="onFocus('action')"
+            (blur)="onBlur('action')"
+            [ngClass]="{ 'k-focus': this.actionFocused }"
+            (click)="onRemoveCancelClick($event)"
+        >
+            <kendo-icon-wrapper
+                [name]="isUploading ? 'cancel' : 'x'"
+                [svgIcon]="isUploading ? cancelSVGIcon : deleteSVGIcon"
+                [innerCssClass]="!isUploading ? 'k-delete' : ''"
+                [attr.aria-label]='actionButtonTitle'
+                [attr.title]='actionButtonTitle'
+            ></kendo-icon-wrapper>
         </button>
-      </strong>
+    </span>
     `
                 }]
         }], ctorParameters: function () { return [{ type: UploadService }, { type: i1$1.LocalizationService }, { type: NavigationService }]; }, propDecorators: { file: [{
@@ -1888,9 +1961,9 @@ class TemplateContextDirective {
         }
     }
 }
-TemplateContextDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TemplateContextDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
-TemplateContextDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: TemplateContextDirective, selector: "[templateContext]", inputs: { templateContext: "templateContext" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TemplateContextDirective, decorators: [{
+TemplateContextDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TemplateContextDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+TemplateContextDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: TemplateContextDirective, selector: "[templateContext]", inputs: { templateContext: "templateContext" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TemplateContextDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -1933,6 +2006,17 @@ class FileListSingleItemComponent extends FileListItemBase {
     get fileGroupClass() {
         return getFileGroupCssClass(this.file.extension ? this.file.extension : '');
     }
+    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 initial;
+    }
     get isUploadSuccessful() {
         return this.file.state === FileState.Uploaded;
     }
@@ -1943,40 +2027,46 @@ class FileListSingleItemComponent extends FileListItemBase {
         return !this.isUploadFailed && !this.isUploadSuccessful;
     }
 }
-FileListSingleItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FileListSingleItemComponent, deps: [{ token: i1$1.LocalizationService }, { token: UploadService }], target: i0.ɵɵFactoryTarget.Component });
-FileListSingleItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FileListSingleItemComponent, selector: "kendo-upload-file-list-single-item", inputs: { disabled: "disabled", file: "file", fileInfoTemplate: "fileInfoTemplate" }, usesInheritance: true, ngImport: i0, template: `
-      <div class="k-progressbar" [@progressState]="showProgress">
-        <span class="k-progress" [style.width]="progressComplete + '%'"></span>
-      </div>
-      <span class="k-file-group-wrapper">
-        <span class="k-file-group k-icon" [ngClass]="fileGroupClass"></span>
-      </span>
-      <span class="k-file-name-size-wrapper">
-        <ng-container *ngIf="!fileInfoTemplate">
-          <span class="k-file-name" [title]="file.name">{{ file.name }}</span>
-          <span [ngClass]="{
-                  'k-file-validation-message': file.validationErrors,
-                  'k-file-size': !file.validationErrors && isNotYetUploaded,
-                  'k-text-success': isUploadSuccessful,
-                  'k-text-error': file.validationErrors || isUploadFailed,
-                  'k-file-information': isUploadSuccessful || isUploadFailed
+FileListSingleItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", 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.11", 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"
+            [label]="{ visible: false }"
+        >
+        </kendo-progressbar>
+        <span class="k-file-icon-wrapper"> 
+            <kendo-icon-wrapper
+                [name]="fileGroupClass"
+                [svgIcon]="fileSVGGroupIcon"
+                innerCssClass="k-file-icon"
+            >
+            </kendo-icon-wrapper>
+        </span>
+        <span class="k-file-info">
+            <ng-container *ngIf="!fileInfoTemplate">
+            <span class="k-file-name" [title]="file.name">{{ file.name }}</span>
+            <span [ngClass]="{
+                'k-file-validation-message': file.validationErrors,
+                'k-file-size': !file.validationErrors && isNotYetUploaded,
+                'k-file-summary': isUploadSuccessful || isUploadFailed
                 }"
-          >{{fileStatusText}}</span>
-        </ng-container>
-        <ng-template *ngIf="fileInfoTemplate"
-            [templateContext]="{
-              templateRef: fileInfoTemplate.templateRef,
-              state: file.state,
-              $implicit: [file]
-            }">
-        </ng-template>
-      </span>
-      <kendo-upload-file-list-item-action-button
-        [file]='file'
-        [disabled]='disabled'
-        [progress]='progressComplete'>
-      </kendo-upload-file-list-item-action-button>
-    `, isInline: true, components: [{ type: FileListItemActionButtonComponent, selector: "kendo-upload-file-list-item-action-button", inputs: ["file", "disabled", "progress"] }], directives: [{ type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }], animations: [
+            >{{fileStatusText}}</span>
+            </ng-container>
+            <ng-template *ngIf="fileInfoTemplate"
+                [templateContext]="{
+                templateRef: fileInfoTemplate.templateRef,
+                state: file.state,
+                $implicit: [file]
+                }">
+            </ng-template>
+        </span>
+        <kendo-upload-file-list-item-action-button
+            [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"], 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: i7.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }], animations: [
         trigger('progressState', [
             state('active', style({ opacity: 1 })),
             state('inactive', style({ opacity: 0 })),
@@ -1985,7 +2075,7 @@ FileListSingleItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
             transition('active => inactive', animate('1s 2s ease-out'))
         ])
     ] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FileListSingleItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FileListSingleItemComponent, decorators: [{
             type: Component,
             args: [{
                     animations: [
@@ -1999,37 +2089,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     ],
                     selector: 'kendo-upload-file-list-single-item',
                     template: `
-      <div class="k-progressbar" [@progressState]="showProgress">
-        <span class="k-progress" [style.width]="progressComplete + '%'"></span>
-      </div>
-      <span class="k-file-group-wrapper">
-        <span class="k-file-group k-icon" [ngClass]="fileGroupClass"></span>
-      </span>
-      <span class="k-file-name-size-wrapper">
-        <ng-container *ngIf="!fileInfoTemplate">
-          <span class="k-file-name" [title]="file.name">{{ file.name }}</span>
-          <span [ngClass]="{
-                  'k-file-validation-message': file.validationErrors,
-                  'k-file-size': !file.validationErrors && isNotYetUploaded,
-                  'k-text-success': isUploadSuccessful,
-                  'k-text-error': file.validationErrors || isUploadFailed,
-                  'k-file-information': isUploadSuccessful || isUploadFailed
+        <kendo-progressbar
+            [@progressState]="showProgress"
+            [value]="progressComplete"
+            [label]="{ visible: false }"
+        >
+        </kendo-progressbar>
+        <span class="k-file-icon-wrapper"> 
+            <kendo-icon-wrapper
+                [name]="fileGroupClass"
+                [svgIcon]="fileSVGGroupIcon"
+                innerCssClass="k-file-icon"
+            >
+            </kendo-icon-wrapper>
+        </span>
+        <span class="k-file-info">
+            <ng-container *ngIf="!fileInfoTemplate">
+            <span class="k-file-name" [title]="file.name">{{ file.name }}</span>
+            <span [ngClass]="{
+                'k-file-validation-message': file.validationErrors,
+                'k-file-size': !file.validationErrors && isNotYetUploaded,
+                'k-file-summary': isUploadSuccessful || isUploadFailed
                 }"
-          >{{fileStatusText}}</span>
-        </ng-container>
-        <ng-template *ngIf="fileInfoTemplate"
-            [templateContext]="{
-              templateRef: fileInfoTemplate.templateRef,
-              state: file.state,
-              $implicit: [file]
-            }">
-        </ng-template>
-      </span>
-      <kendo-upload-file-list-item-action-button
-        [file]='file'
-        [disabled]='disabled'
-        [progress]='progressComplete'>
-      </kendo-upload-file-list-item-action-button>
+            >{{fileStatusText}}</span>
+            </ng-container>
+            <ng-template *ngIf="fileInfoTemplate"
+                [templateContext]="{
+                templateRef: fileInfoTemplate.templateRef,
+                state: file.state,
+                $implicit: [file]
+                }">
+            </ng-template>
+        </span>
+        <kendo-upload-file-list-item-action-button
+            [file]='file'
+            [disabled]='disabled'
+            [progress]='progressComplete'>
+        </kendo-upload-file-list-item-action-button>
     `
                 }]
         }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }, { type: UploadService }]; }, propDecorators: { disabled: [{
@@ -2047,6 +2143,7 @@ class FileListMultipleItemsComponent 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) {
                 this.progressComplete = args.percentComplete;
@@ -2085,48 +2182,51 @@ class FileListMultipleItemsComponent extends FileListItemBase {
         return this.files[0].state === FileState.Failed;
     }
 }
-FileListMultipleItemsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FileListMultipleItemsComponent, deps: [{ token: i1$1.LocalizationService }, { token: UploadService }], target: i0.ɵɵFactoryTarget.Component });
-FileListMultipleItemsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FileListMultipleItemsComponent, selector: "kendo-upload-file-list-multiple-items", inputs: { disabled: "disabled", files: "files", fileInfoTemplate: "fileInfoTemplate" }, usesInheritance: true, ngImport: i0, template: `
-      <div class="k-progressbar" [@progressState]="showProgress">
-        <span class="k-progress" [style.width]="progressComplete + '%'"></span>
-      </div>
-      <span class="k-multiple-files-group-wrapper">
-        <span class="k-file-group k-icon k-i-copy"></span>
-      </span>
-      <span class="k-multiple-files-wrapper">
-        <ng-container *ngIf="!fileInfoTemplate">
-          <span *ngFor="let file of files" class="k-file-name-size-wrapper">
-            <span [title]="file.name" class="k-file-name">
-                {{file.name}}
-            </span>
-            <span [ngClass]="{
-                    'k-text-error': file.validationErrors,
+FileListMultipleItemsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", 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.11", 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"
+            [label]="{ visible: false }"
+        >
+        </kendo-progressbar>
+        <span class="k-file-icon-wrapper">
+            <kendo-icon-wrapper
+                name="copy"
+                [svgIcon]="copySVGIcon"
+                innerCssClass="k-file-icon"
+            >
+            </kendo-icon-wrapper>
+        </span>
+        <span class="k-multiple-files-wrapper">
+            <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 [ngClass]="{
                     'k-file-validation-message': file.validationErrors,
                     'k-file-size': !file.validationErrors
-                  }"
-            >{{fileStatusText(file)}}</span>
-          </span>
-          <span class="k-file-information"
-            [ngClass]="{
-              'k-text-success': isUploadSuccessful,
-              'k-text-error': isUploadFailed
-            }"
-          >{{batchStatusText}}</span>
-        </ng-container>
-        <ng-template *ngIf="fileInfoTemplate"
-            [templateContext]="{
-              templateRef: fileInfoTemplate.templateRef,
-              state: files[0].state,
-              $implicit: files
-            }">
-        </ng-template>
-      </span>
-      <kendo-upload-file-list-item-action-button
-        [file]='files[0]'
-        [disabled]='disabled'
-        [progress]='progressComplete'>
-      </kendo-upload-file-list-item-action-button>
-    `, isInline: true, components: [{ type: FileListItemActionButtonComponent, selector: "kendo-upload-file-list-item-action-button", inputs: ["file", "disabled", "progress"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }], animations: [
+                    }"
+                >{{fileStatusText(file)}}</span>
+            </span>
+            <span class="k-file-summary"
+            >{{batchStatusText}}</span>
+            </ng-container>
+            <ng-template *ngIf="fileInfoTemplate"
+                [templateContext]="{
+                templateRef: fileInfoTemplate.templateRef,
+                state: files[0].state,
+                $implicit: files
+                }">
+            </ng-template>
+        </span>
+        <kendo-upload-file-list-item-action-button
+            [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"], 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: i7.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }], animations: [
         trigger('progressState', [
             state('active', style({ opacity: 1 })),
             state('inactive', style({ opacity: 0 })),
@@ -2135,7 +2235,7 @@ FileListMultipleItemsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
             transition('active => inactive', animate('1s 2s ease-out'))
         ])
     ] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FileListMultipleItemsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FileListMultipleItemsComponent, decorators: [{
             type: Component,
             args: [{
                     animations: [
@@ -2149,45 +2249,48 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     ],
                     selector: 'kendo-upload-file-list-multiple-items',
                     template: `
-      <div class="k-progressbar" [@progressState]="showProgress">
-        <span class="k-progress" [style.width]="progressComplete + '%'"></span>
-      </div>
-      <span class="k-multiple-files-group-wrapper">
-        <span class="k-file-group k-icon k-i-copy"></span>
-      </span>
-      <span class="k-multiple-files-wrapper">
-        <ng-container *ngIf="!fileInfoTemplate">
-          <span *ngFor="let file of files" class="k-file-name-size-wrapper">
-            <span [title]="file.name" class="k-file-name">
-                {{file.name}}
-            </span>
-            <span [ngClass]="{
-                    'k-text-error': file.validationErrors,
+        <kendo-progressbar
+            [@progressState]="showProgress"
+            [value]="progressComplete"
+            [label]="{ visible: false }"
+        >
+        </kendo-progressbar>
+        <span class="k-file-icon-wrapper">
+            <kendo-icon-wrapper
+                name="copy"
+                [svgIcon]="copySVGIcon"
+                innerCssClass="k-file-icon"
+            >
+            </kendo-icon-wrapper>
+        </span>
+        <span class="k-multiple-files-wrapper">
+            <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 [ngClass]="{
                     'k-file-validation-message': file.validationErrors,
                     'k-file-size': !file.validationErrors
-                  }"
-            >{{fileStatusText(file)}}</span>
-          </span>
-          <span class="k-file-information"
-            [ngClass]="{
-              'k-text-success': isUploadSuccessful,
-              'k-text-error': isUploadFailed
-            }"
-          >{{batchStatusText}}</span>
-        </ng-container>
-        <ng-template *ngIf="fileInfoTemplate"
-            [templateContext]="{
-              templateRef: fileInfoTemplate.templateRef,
-              state: files[0].state,
-              $implicit: files
-            }">
-        </ng-template>
-      </span>
-      <kendo-upload-file-list-item-action-button
-        [file]='files[0]'
-        [disabled]='disabled'
-        [progress]='progressComplete'>
-      </kendo-upload-file-list-item-action-button>
+                    }"
+                >{{fileStatusText(file)}}</span>
+            </span>
+            <span class="k-file-summary"
+            >{{batchStatusText}}</span>
+            </ng-container>
+            <ng-template *ngIf="fileInfoTemplate"
+                [templateContext]="{
+                templateRef: fileInfoTemplate.templateRef,
+                state: files[0].state,
+                $implicit: files
+                }">
+            </ng-template>
+        </span>
+        <kendo-upload-file-list-item-action-button
+            [file]='files[0]'
+            [disabled]='disabled'
+            [progress]='progressComplete'>
+        </kendo-upload-file-list-item-action-button>
     `
                 }]
         }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }, { type: UploadService }]; }, propDecorators: { disabled: [{
@@ -2220,10 +2323,10 @@ class FileListComponent {
         });
     }
     itemActionHandler(key) {
-        let index = this.navigation.focusedIndex;
-        let item = this.fileListItems.toArray()[index];
-        let uid = item.uidAttribute;
-        let files = this.uploadService.files.get(uid);
+        const index = this.navigation.focusedIndex;
+        const item = this.fileListItems.toArray()[index];
+        const uid = item.uidAttribute;
+        const files = this.uploadService.files.get(uid);
         if (key === Keys.Escape && files[0].state === FileState.Uploading) {
             this.uploadService.cancelFiles(uid);
             this.navigation.focusSelectButton();
@@ -2251,8 +2354,8 @@ class FileListComponent {
         this.actionSubscription.unsubscribe();
     }
 }
-FileListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FileListComponent, deps: [{ token: UploadService }, { token: NavigationService }], target: i0.ɵɵFactoryTarget.Component });
-FileListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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: "13.3.11", ngImport: i0, type: FileListComponent, deps: [{ token: UploadService }, { token: NavigationService }], target: i0.ɵɵFactoryTarget.Component });
+FileListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", 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
@@ -2280,8 +2383,8 @@ FileListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
               }"></ng-template>
       </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: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: FileListItemDirective, selector: "[kendoUploadFileListItem]", inputs: ["files", "index"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FileListComponent, decorators: [{
+    `, 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: i7.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FileListComponent, decorators: [{
             type: Component,
             args: [{
                     selector: '[kendo-upload-file-list]',
@@ -2333,9 +2436,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
  */
 class Messages extends ComponentMessages {
 }
-Messages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-Messages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", 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: "12.2.16", ngImport: i0, type: Messages, decorators: [{
+Messages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+Messages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", 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.11", ngImport: i0, type: Messages, decorators: [{
             type: Directive
         }], propDecorators: { cancel: [{
                 type: Input
@@ -2390,14 +2493,14 @@ class LocalizedMessagesDirective extends Messages {
         this.service = service;
     }
 }
-LocalizedMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LocalizedMessagesDirective, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
-LocalizedMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: LocalizedMessagesDirective, selector: "\n    [kendoUploadLocalizedMessages],\n    [kendoFileSelectLocalizedMessages],\n    [kendoUploadDropZoneLocalizedMessages]\n  ", providers: [
+LocalizedMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LocalizedMessagesDirective, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
+LocalizedMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", 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: "12.2.16", ngImport: i0, type: LocalizedMessagesDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LocalizedMessagesDirective, decorators: [{
             type: Directive,
             args: [{
                     providers: [
@@ -2452,7 +2555,7 @@ const validateFileSize = (file, minFileSize, maxFileSize) => {
 };
 const parseAllowedExtensions = (extensions) => {
     const allowedExtensions = extensions.map((ext) => {
-        var parsedExt = (ext.substring(0, 1) === ".") ? ext : ("." + ext);
+        const parsedExt = (ext.substring(0, 1) === ".") ? ext : ("." + ext);
         return parsedExt.toLowerCase();
     });
     return allowedExtensions;
@@ -2516,9 +2619,9 @@ class DropZoneBase {
         this.renderer.removeClass(this.element.nativeElement, className);
     }
 }
-DropZoneBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", 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: "12.2.16", type: DropZoneBase, host: { listeners: { "dragenter": "onElementDragEnterListener()", "dragover": "onElementDragOverListener()" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DropZoneBase, decorators: [{
+DropZoneBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", 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.11", type: DropZoneBase, host: { listeners: { "dragenter": "onElementDragEnterListener()", "dragover": "onElementDragOverListener()" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DropZoneBase, decorators: [{
             type: Directive
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: undefined, decorators: [{
                     type: Inject,
@@ -2536,7 +2639,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
  */
 class DropZoneInternalDirective extends DropZoneBase {
     constructor(element, renderer, ngZone, uploadService) {
-        super(element, renderer, 'k-dropzone-hover');
+        super(element, renderer, 'k-hover');
         this.ngZone = ngZone;
         this.uploadService = uploadService;
         this.initialClassName = true;
@@ -2580,7 +2683,7 @@ class DropZoneInternalDirective extends DropZoneBase {
         return false;
     }
     onDropListener(event) {
-        let droppedFiles = event.dataTransfer.files;
+        const droppedFiles = event.dataTransfer.files;
         if (droppedFiles.length > 0 && !this.disabled) {
             let files = getAllFileInfo(droppedFiles);
             files = assignGuidToFiles(files, !this.uploadService.async.batch);
@@ -2594,9 +2697,9 @@ class DropZoneInternalDirective extends DropZoneBase {
         return false;
     }
 }
-DropZoneInternalDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", 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: "12.2.16", 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" } }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DropZoneInternalDirective, decorators: [{
+DropZoneInternalDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", 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.11", 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.11", ngImport: i0, type: DropZoneInternalDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: `
@@ -2613,6 +2716,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }], initialClassName: [{
                 type: HostBinding,
                 args: ['class.k-dropzone']
+            }, {
+                type: HostBinding,
+                args: ['class.k-upload-dropzone']
             }], onDropListener: [{
                 type: HostListener,
                 args: ['drop', ['$event']]
@@ -2668,9 +2774,9 @@ class FileSelectDirective {
         });
     }
 }
-FileSelectDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", 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: "12.2.16", type: FileSelectDirective, selector: "[kendoFileSelect]", inputs: { dir: "dir", disabled: "disabled", multiple: "multiple", restrictions: "restrictions" }, host: { listeners: { "change": "onInputChange($event)" }, properties: { "attr.type": "this.type", "attr.autocomplete": "this.autocomplete", "attr.tabindex": "this.tabIndex", "attr.name": "this.nameAttribute", "attr.multiple": "this.multipleAttribute", "attr.dir": "this.dirAttribute", "attr.disabled": "this.disabledAttribute" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FileSelectDirective, decorators: [{
+FileSelectDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", 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.11", type: FileSelectDirective, selector: "[kendoFileSelect]", inputs: { dir: "dir", disabled: "disabled", multiple: "multiple", restrictions: "restrictions" }, host: { listeners: { "change": "onInputChange($event)" }, properties: { "attr.type": "this.type", "attr.autocomplete": "this.autocomplete", "attr.tabindex": "this.tabIndex", "attr.name": "this.nameAttribute", "attr.multiple": "this.multipleAttribute", "attr.dir": "this.dirAttribute", "attr.disabled": "this.disabledAttribute" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FileSelectDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoFileSelect]'
@@ -2717,6 +2823,7 @@ const FILESELECT_VALUE_ACCESSOR = {
     provide: NG_VALUE_ACCESSOR,
     useExisting: forwardRef(() => FileSelectComponent)
 };
+let idx$1 = 0;
 class FileSelectComponent {
     constructor(uploadService, localization, navigation, dropZoneService, ngZone, renderer, cdr, wrapper) {
         this.uploadService = uploadService;
@@ -2807,7 +2914,7 @@ class FileSelectComponent {
      * Sets the restrictions for selected files.
      */
     set restrictions(restrictions) {
-        let parsedRestrictions = Object.assign({}, this._restrictions, restrictions);
+        const parsedRestrictions = Object.assign({}, this._restrictions, restrictions);
         this._restrictions = parsedRestrictions;
     }
     get restrictions() {
@@ -2824,6 +2931,23 @@ class FileSelectComponent {
         if (this.zoneId) {
             this.dropZoneService.addComponent(this, this.zoneId);
         }
+        this.subs.add(this.renderer.listen(this.fileSelectInput.nativeElement, 'mouseenter', () => {
+            this.renderer.addClass(this.fileSelectButton.nativeElement, 'k-hover');
+        }));
+        this.subs.add(this.renderer.listen(this.fileSelectInput.nativeElement, 'mouseleave', () => {
+            this.renderer.removeClass(this.fileSelectButton.nativeElement, 'k-hover');
+        }));
+        this.ngZone.runOutsideAngular(() => {
+            this.subs.add(this.renderer.listen(this.wrapper, 'keydown', event => this.handleKeydown(event)));
+        });
+    }
+    ngAfterViewInit() {
+        const { buttonId, inputId } = this.getIds();
+        const button = this.fileSelectButton.nativeElement;
+        const input = this.fileSelectInput.nativeElement;
+        this.renderer.setAttribute(button, 'id', buttonId);
+        this.renderer.setAttribute(button, 'aria-controls', inputId);
+        this.renderer.setAttribute(input, 'id', inputId);
     }
     /**
      * @hidden
@@ -2857,24 +2981,6 @@ class FileSelectComponent {
             this.subs.unsubscribe();
         }
     }
-    /**
-     * @hidden
-     */
-    handleKeydown(event) {
-        if (this.disabled) {
-            return;
-        }
-        if ((event.keyCode === Keys.Enter || event.keyCode === Keys.Space) &&
-            event.target === this.fileSelectButton.nativeElement) {
-            event.preventDefault();
-            this.fileSelect.nativeElement.click();
-            return;
-        }
-        if (hasClasses(event.target, UPLOAD_CLASSES) ||
-            (!isFocusable(event.target) && !hasClasses(event.target, IGNORE_TARGET_CLASSES))) {
-            this.navigation.process(event);
-        }
-    }
     /**
      * @hidden
      */
@@ -2945,6 +3051,16 @@ class FileSelectComponent {
     get selectButtonTabIndex() {
         return this.disabled ? undefined : this.tabindex;
     }
+    /**
+     * @hidden
+     */
+    getIds() {
+        const id = ++idx$1;
+        const buttonId = `k-fileselect-button-${id}`;
+        const inputId = `k-fileselect-input-${id}`;
+        return { buttonId, inputId };
+    }
+    ;
     /**
      * @hidden
      */
@@ -2987,6 +3103,21 @@ class FileSelectComponent {
             this.fileSelectButton.nativeElement.focus();
         });
     }
+    handleKeydown(event) {
+        if (this.disabled) {
+            return;
+        }
+        if ((event.keyCode === Keys.Enter || event.keyCode === Keys.Space) &&
+            event.target === this.fileSelectButton.nativeElement) {
+            event.preventDefault();
+            this.fileSelectInput.nativeElement.click();
+            return;
+        }
+        if (hasClasses(event.target, UPLOAD_CLASSES) ||
+            (!isFocusable(event.target) && !hasClasses(event.target, IGNORE_TARGET_CLASSES))) {
+            this.navigation.process(event);
+        }
+    }
     attachEventHandlers() {
         this.subs = this.uploadService.changeEvent.subscribe((files) => {
             let model = [];
@@ -3018,8 +3149,8 @@ class FileSelectComponent {
         this.uploadService.component = 'FileSelect';
     }
 }
-FileSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", 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 }], target: i0.ɵɵFactoryTarget.Component });
-FileSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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: { listeners: { "keydown": "handleKeydown($event)" }, properties: { "class.k-widget": "this.hostDefaultClasses", "class.k-upload": "this.hostDefaultClasses", "class.k-disabled": "this.hostDisabledClass", "attr.dir": "this.dir" } }, providers: [
+FileSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", 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 }], target: i0.ɵɵFactoryTarget.Component });
+FileSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", 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" } }, providers: [
         LocalizationService,
         NavigationService,
         UploadService,
@@ -3033,7 +3164,7 @@ FileSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
             provide: KendoInput,
             useExisting: forwardRef(() => FileSelectComponent)
         }
-    ], queries: [{ propertyName: "fileTemplate", first: true, predicate: FileTemplateDirective, descendants: true }, { propertyName: "fileInfoTemplate", first: true, predicate: FileInfoTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "fileSelect", first: true, predicate: ["fileSelect"], descendants: true, static: true }, { propertyName: "fileSelectButton", first: true, predicate: ["fileSelectButton"], descendants: true, static: true }], exportAs: ["kendoFileSelect"], ngImport: i0, template: `
+    ], queries: [{ propertyName: "fileTemplate", first: true, predicate: FileTemplateDirective, descendants: true }, { propertyName: "fileInfoTemplate", first: true, predicate: FileInfoTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "fileSelectInput", first: true, predicate: ["fileSelectInput"], descendants: true, static: true }, { propertyName: "fileSelectButton", first: true, predicate: ["fileSelectButton"], descendants: true, read: ElementRef, static: true }], exportAs: ["kendoFileSelect"], ngImport: i0, template: `
         <ng-container kendoFileSelectLocalizedMessages
             i18n-dropFilesHere="kendo.fileselect.dropFilesHere|The drop zone hint"
             dropFilesHere="Drop files here to select"
@@ -3058,21 +3189,31 @@ FileSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
             [restrictions]="restrictions"
             [multiple]="multiple"
             [disabled]="disabled">
-            <div role="button" #fileSelectButton
+            <div class="k-upload-button-wrap">
+            <button 
+                kendoButton
+                #fileSelectButton
+                class="k-upload-button"
+                role="button"
                 [id]="focusableId"
                 [attr.aria-label]="textFor('select')"
                 [attr.tabindex]="selectButtonTabIndex"
                 (focus)="onFileSelectButtonFocus($event)"
                 (blur)="onFileSelectButtonBlur($event)"
-                class="k-button k-button-md k-rounded-md k-button-solid k-button-solid-base k-upload-button">
-                <input #fileSelect kendoFileSelect
-                    [attr.accept]="accept ? accept : null"
-                    [dir]="direction"
-                    [restrictions]="restrictions"
-                    [multiple]="multiple"
-                    [disabled]="disabled" />
-                <span>{{textFor('select')}}</span>
-            </div>
+            >
+                {{textFor('select')}}
+            </button>
+            <input
+                #fileSelectInput
+                kendoFileSelect
+                [attr.accept]="accept ? accept : null"
+                [attr.aria-hidden]="true"
+                [dir]="direction"
+                [restrictions]="restrictions"
+                [multiple]="multiple"
+                [disabled]="disabled"
+            />
+        </div>
             <div class="k-dropzone-hint">{{textFor('dropFilesHere')}}</div>
         </div>
         <ul kendo-upload-file-list
@@ -3083,8 +3224,8 @@ FileSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
             [fileTemplate]="fileTemplate"
             [fileInfoTemplate]="fileInfoTemplate">
         </ul>
-    `, isInline: true, components: [{ 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"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FileSelectComponent, decorators: [{
+    `, isInline: true, components: [{ type: i7.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["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"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FileSelectComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoFileSelect',
@@ -3129,21 +3270,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             [restrictions]="restrictions"
             [multiple]="multiple"
             [disabled]="disabled">
-            <div role="button" #fileSelectButton
+            <div class="k-upload-button-wrap">
+            <button 
+                kendoButton
+                #fileSelectButton
+                class="k-upload-button"
+                role="button"
                 [id]="focusableId"
                 [attr.aria-label]="textFor('select')"
                 [attr.tabindex]="selectButtonTabIndex"
                 (focus)="onFileSelectButtonFocus($event)"
                 (blur)="onFileSelectButtonBlur($event)"
-                class="k-button k-button-md k-rounded-md k-button-solid k-button-solid-base k-upload-button">
-                <input #fileSelect kendoFileSelect
-                    [attr.accept]="accept ? accept : null"
-                    [dir]="direction"
-                    [restrictions]="restrictions"
-                    [multiple]="multiple"
-                    [disabled]="disabled" />
-                <span>{{textFor('select')}}</span>
-            </div>
+            >
+                {{textFor('select')}}
+            </button>
+            <input
+                #fileSelectInput
+                kendoFileSelect
+                [attr.accept]="accept ? accept : null"
+                [attr.aria-hidden]="true"
+                [dir]="direction"
+                [restrictions]="restrictions"
+                [multiple]="multiple"
+                [disabled]="disabled"
+            />
+        </div>
             <div class="k-dropzone-hint">{{textFor('dropFilesHere')}}</div>
         </div>
         <ul kendo-upload-file-list
@@ -3180,12 +3331,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }], fileInfoTemplate: [{
                 type: ContentChild,
                 args: [FileInfoTemplateDirective, { static: false }]
-            }], fileSelect: [{
+            }], fileSelectInput: [{
                 type: ViewChild,
-                args: ['fileSelect', { static: true }]
+                args: ['fileSelectInput', { static: true }]
             }], fileSelectButton: [{
                 type: ViewChild,
-                args: ['fileSelectButton', { static: true }]
+                args: ['fileSelectButton', { static: true, read: ElementRef }]
             }], onBlur: [{
                 type: Output,
                 args: ['blur']
@@ -3199,9 +3350,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }], valueChange: [{
                 type: Output
             }], hostDefaultClasses: [{
-                type: HostBinding,
-                args: ['class.k-widget']
-            }, {
                 type: HostBinding,
                 args: ['class.k-upload']
             }], hostDisabledClass: [{
@@ -3210,9 +3358,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }], dir: [{
                 type: HostBinding,
                 args: ['attr.dir']
-            }], handleKeydown: [{
-                type: HostListener,
-                args: ['keydown', ['$event']]
             }] } });
 
 /**
@@ -3237,14 +3382,14 @@ class CustomMessagesComponent extends Messages {
         return true;
     }
 }
-CustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CustomMessagesComponent, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-CustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: CustomMessagesComponent, selector: "kendo-upload-messages, kendo-fileselect-messages, kendo-uploaddropzone-messages", providers: [
+CustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CustomMessagesComponent, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+CustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", 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: "12.2.16", ngImport: i0, type: CustomMessagesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CustomMessagesComponent, decorators: [{
             type: Component,
             args: [{
                     providers: [
@@ -3264,6 +3409,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
 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]);
@@ -3278,31 +3455,25 @@ class UploadStatusTotalComponent {
         }
     }
 }
-UploadStatusTotalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: UploadStatusTotalComponent, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-UploadStatusTotalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: UploadStatusTotalComponent, selector: "kendo-upload-status-total", inputs: { fileList: "fileList" }, ngImport: i0, template: `
-        <span class="k-icon"
-            [ngClass]="{
-                'k-i-checkmark': !this.isUploading && !this.isFailed,
-                'k-i-exception': !this.isUploading && this.isFailed,
-                'k-i-upload': this.isUploading,
-                'k-i-pause-sm': this.isPaused
-            }">
-        </span>
+UploadStatusTotalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: UploadStatusTotalComponent, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+UploadStatusTotalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", 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, directives: [{ type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: UploadStatusTotalComponent, decorators: [{
+    `, isInline: true, components: [{ type: i4.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: UploadStatusTotalComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-upload-status-total',
                     template: `
-        <span class="k-icon"
-            [ngClass]="{
-                'k-i-checkmark': !this.isUploading && !this.isFailed,
-                'k-i-exception': !this.isUploading && this.isFailed,
-                'k-i-upload': this.isUploading,
-                'k-i-pause-sm': this.isPaused
-            }">
-        </span>
+        <kendo-icon-wrapper
+            [name]="iconClass"
+            [svgIcon]="SVGIconClass"
+        >
+        </kendo-icon-wrapper>
         {{statusText}}
     `
                 }]
@@ -3381,8 +3552,8 @@ class UploadActionButtonsComponent {
         return this.localization.get(key);
     }
 }
-UploadActionButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", 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: "12.2.16", 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: "13.3.11", 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.11", 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 type="button" class="k-button k-button-md k-rounded-md k-button-solid k-button-solid-base k-clear-selected"
             [attr.tabIndex]="-1"
             (click)="onClearButtonClick($event)">
@@ -3394,7 +3565,7 @@ UploadActionButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
                 {{textFor('uploadSelectedFiles')}}
         </button>
     `, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: UploadActionButtonsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: UploadActionButtonsComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-upload-action-buttons',
@@ -3438,6 +3609,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 args: ['class.k-actions-center']
             }] } });
 
+/* eslint-disable @typescript-eslint/no-unused-vars */
 /**
  * @hidden
  */
@@ -3446,16 +3618,17 @@ const UPLOAD_VALUE_ACCESSOR = {
     provide: NG_VALUE_ACCESSOR,
     useExisting: forwardRef(() => UploadComponent)
 };
+let idx = 0;
 /**
  * Represents the [Kendo UI Upload component for Angular]({% slug overview_upload %}).
  */
 class UploadComponent {
-    constructor(uploadService, localization, navigation, dropZoneService, _ngZone, renderer, cdr, wrapper) {
+    constructor(uploadService, localization, navigation, dropZoneService, zone, renderer, cdr, wrapper) {
         this.uploadService = uploadService;
         this.localization = localization;
         this.navigation = navigation;
         this.dropZoneService = dropZoneService;
-        this._ngZone = _ngZone;
+        this.zone = zone;
         this.renderer = renderer;
         this.cdr = cdr;
         /**
@@ -3720,7 +3893,7 @@ class UploadComponent {
      * Sets the restrictions for selected files ([see example]({% slug api_upload_filerestrictions %})).
      */
     set restrictions(restrictions) {
-        let parsedRestrictions = Object.assign({}, this._restrictions, restrictions);
+        const parsedRestrictions = Object.assign({}, this._restrictions, restrictions);
         this._restrictions = parsedRestrictions;
     }
     get restrictions() {
@@ -3739,6 +3912,25 @@ class UploadComponent {
         if (this.zoneId) {
             this.dropZoneService.addComponent(this, this.zoneId);
         }
+        const button = this.fileSelectButton.nativeElement;
+        const input = this.fileSelectInput.nativeElement;
+        this.subs.add(this.renderer.listen(input, 'mouseenter', () => {
+            this.renderer.addClass(button, 'k-hover');
+        }));
+        this.subs.add(this.renderer.listen(input, 'mouseleave', () => {
+            this.renderer.removeClass(button, 'k-hover');
+        }));
+        this.zone.runOutsideAngular(() => {
+            this.subs.add(this.renderer.listen(this.wrapper, 'keydown', event => this.handleKeydown(event)));
+        });
+    }
+    ngAfterViewInit() {
+        const { buttonId, inputId } = this.getIds();
+        const button = this.fileSelectButton.nativeElement;
+        const input = this.fileSelectInput.nativeElement;
+        this.renderer.setAttribute(button, 'id', buttonId);
+        this.renderer.setAttribute(button, 'aria-controls', inputId);
+        this.renderer.setAttribute(input, 'id', inputId);
     }
     ngOnChanges(changes) {
         if (isChanged("chunkable", changes)) {
@@ -3770,24 +3962,6 @@ class UploadComponent {
             this.subs.unsubscribe();
         }
     }
-    /**
-     * @hidden
-     */
-    handleKeydown(event) {
-        if (this.disabled) {
-            return;
-        }
-        if ((event.keyCode === Keys.Enter || event.keyCode === Keys.Space) &&
-            event.target === this.fileSelectButton.nativeElement) {
-            event.preventDefault();
-            this.fileSelect.nativeElement.click();
-            return;
-        }
-        if (hasClasses(event.target, UPLOAD_CLASSES) ||
-            (!isFocusable(event.target) && !hasClasses(event.target, IGNORE_TARGET_CLASSES))) {
-            this.navigation.process(event);
-        }
-    }
     /**
      * @hidden
      */
@@ -3886,6 +4060,16 @@ class UploadComponent {
     textFor(key) {
         return this.localization.get(key);
     }
+    /**
+     * @hidden
+     */
+    getIds() {
+        const id = ++idx;
+        const buttonId = `k-upload-button-${id}`;
+        const inputId = `k-upload-input-${id}`;
+        return { buttonId, inputId };
+    }
+    ;
     /**
      * Focuses the underlying input element.
      */
@@ -3996,13 +4180,13 @@ class UploadComponent {
         if (!isDocumentAvailable()) {
             return;
         }
-        this._ngZone.runOutsideAngular(() => {
+        this.zone.runOutsideAngular(() => {
             this.documentClick = fromEvent(document, 'click').pipe(filter((event) => {
                 return !(this.wrapper !== event.target && this.wrapper.contains(event.target));
             }));
             this.blurSubscription = merge(this.documentClick, this.navigation.onTab).subscribe(() => {
                 if (this.navigation.focused) {
-                    this._ngZone.run(() => {
+                    this.zone.run(() => {
                         this.navigation.focused = false;
                         this.onTouchedCallback();
                         this.onBlur.emit();
@@ -4011,6 +4195,21 @@ class UploadComponent {
             });
         });
     }
+    handleKeydown(event) {
+        if (this.disabled) {
+            return;
+        }
+        if ((event.keyCode === Keys.Enter || event.keyCode === Keys.Space) &&
+            event.target === this.fileSelectButton.nativeElement) {
+            event.preventDefault();
+            this.fileSelectInput.nativeElement.click();
+            return;
+        }
+        if (hasClasses(event.target, UPLOAD_CLASSES) ||
+            (!isFocusable(event.target) && !hasClasses(event.target, IGNORE_TARGET_CLASSES))) {
+            this.navigation.process(event);
+        }
+    }
     subscribeFocus() {
         this.wrapperFocusSubscription = this.navigation.onWrapperFocus.subscribe(() => {
             this.onFocus.emit();
@@ -4059,8 +4258,8 @@ class UploadComponent {
         }));
     }
 }
-UploadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", 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 }], target: i0.ɵɵFactoryTarget.Component });
-UploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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: { listeners: { "keydown": "handleKeydown($event)" }, properties: { "class.k-widget": "this.hostDefaultClasses", "class.k-upload": "this.hostDefaultClasses", "class.k-disabled": "this.hostDisabledClass", "attr.dir": "this.dir" } }, providers: [
+UploadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", 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 }], target: i0.ɵɵFactoryTarget.Component });
+UploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", 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", "class.k-disabled": "this.hostDisabledClass", "attr.dir": "this.dir" } }, providers: [
         LocalizationService,
         NavigationService,
         UploadService,
@@ -4074,7 +4273,7 @@ UploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
             provide: KendoInput,
             useExisting: forwardRef(() => UploadComponent)
         }
-    ], queries: [{ propertyName: "fileTemplate", first: true, predicate: FileTemplateDirective, descendants: true }, { propertyName: "fileInfoTemplate", first: true, predicate: FileInfoTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "fileSelect", first: true, predicate: ["fileSelect"], descendants: true, static: true }, { propertyName: "fileSelectButton", first: true, predicate: ["fileSelectButton"], descendants: true, static: true }], exportAs: ["kendoUpload"], usesOnChanges: true, ngImport: i0, template: `
+    ], queries: [{ propertyName: "fileTemplate", first: true, predicate: FileTemplateDirective, descendants: true }, { propertyName: "fileInfoTemplate", first: true, predicate: FileInfoTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "fileSelectInput", first: true, predicate: ["fileSelectInput"], descendants: true, static: true }, { propertyName: "fileSelectButton", first: true, predicate: ["fileSelectButton"], descendants: true, read: ElementRef, static: true }], exportAs: ["kendoUpload"], usesOnChanges: true, ngImport: i0, template: `
     <ng-container kendoUploadLocalizedMessages
       i18n-cancel="kendo.upload.cancel|The text for the Cancel button"
       cancel="Cancel"
@@ -4140,25 +4339,35 @@ UploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
     <div kendoUploadInternalDropZone
       [restrictions]="restrictions"
       [multiple]="multiple"
-      [disabled]="disabled">
-        <div role="button" #fileSelectButton
-             [id]="focusableId"
-             [attr.aria-label]="textFor('select')"
-             [attr.tabindex]="selectButtonTabIndex"
-             (focus)="onFileSelectButtonFocus($event)"
-             (blur)="onFileSelectButtonBlur($event)"
-             class="k-button k-button-md k-rounded-md k-button-solid k-button-solid-base k-upload-button">
-          <input #fileSelect kendoFileSelect
-            [attr.accept]="accept ? accept : null"
-            [attr.aria-hidden]="true"
-            [dir]="direction"
-            [restrictions]="restrictions"
-            [multiple]="multiple"
-            [disabled]="disabled" />
-          <span>{{textFor('select')}}</span>
+      [disabled]="disabled"
+    >
+        <div class="k-upload-button-wrap">
+            <button 
+                kendoButton
+                #fileSelectButton
+                class="k-upload-button"
+                role="button"
+                [id]="focusableId"
+                [attr.aria-label]="textFor('select')"
+                [attr.tabindex]="selectButtonTabIndex"
+                (focus)="onFileSelectButtonFocus($event)"
+                (blur)="onFileSelectButtonBlur($event)"
+            >
+                {{textFor('select')}}
+            </button>
+            <input
+                #fileSelectInput
+                kendoFileSelect
+                [attr.accept]="accept ? accept : null"
+                [attr.aria-hidden]="true"
+                [dir]="direction"
+                [restrictions]="restrictions"
+                [multiple]="multiple"
+                [disabled]="disabled"
+            />
         </div>
         <kendo-upload-status-total *ngIf="showTotalStatus"
-          class="k-upload-status k-upload-status-total"
+          class="k-upload-status"
           [fileList]="fileList">
         </kendo-upload-status-total>
         <div class="k-dropzone-hint">{{textFor('dropFilesHere')}}</div>
@@ -4175,8 +4384,8 @@ UploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
       [disabled]="disabled"
       [actionsLayout]="actionsLayout">
     </kendo-upload-action-buttons>
-  `, isInline: true, components: [{ 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"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: UploadComponent, decorators: [{
+  `, isInline: true, components: [{ type: i7.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["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"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: UploadComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoUpload',
@@ -4262,25 +4471,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
     <div kendoUploadInternalDropZone
       [restrictions]="restrictions"
       [multiple]="multiple"
-      [disabled]="disabled">
-        <div role="button" #fileSelectButton
-             [id]="focusableId"
-             [attr.aria-label]="textFor('select')"
-             [attr.tabindex]="selectButtonTabIndex"
-             (focus)="onFileSelectButtonFocus($event)"
-             (blur)="onFileSelectButtonBlur($event)"
-             class="k-button k-button-md k-rounded-md k-button-solid k-button-solid-base k-upload-button">
-          <input #fileSelect kendoFileSelect
-            [attr.accept]="accept ? accept : null"
-            [attr.aria-hidden]="true"
-            [dir]="direction"
-            [restrictions]="restrictions"
-            [multiple]="multiple"
-            [disabled]="disabled" />
-          <span>{{textFor('select')}}</span>
+      [disabled]="disabled"
+    >
+        <div class="k-upload-button-wrap">
+            <button 
+                kendoButton
+                #fileSelectButton
+                class="k-upload-button"
+                role="button"
+                [id]="focusableId"
+                [attr.aria-label]="textFor('select')"
+                [attr.tabindex]="selectButtonTabIndex"
+                (focus)="onFileSelectButtonFocus($event)"
+                (blur)="onFileSelectButtonBlur($event)"
+            >
+                {{textFor('select')}}
+            </button>
+            <input
+                #fileSelectInput
+                kendoFileSelect
+                [attr.accept]="accept ? accept : null"
+                [attr.aria-hidden]="true"
+                [dir]="direction"
+                [restrictions]="restrictions"
+                [multiple]="multiple"
+                [disabled]="disabled"
+            />
         </div>
         <kendo-upload-status-total *ngIf="showTotalStatus"
-          class="k-upload-status k-upload-status-total"
+          class="k-upload-status"
           [fileList]="fileList">
         </kendo-upload-status-total>
         <div class="k-dropzone-hint">{{textFor('dropFilesHere')}}</div>
@@ -4354,12 +4573,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }], fileInfoTemplate: [{
                 type: ContentChild,
                 args: [FileInfoTemplateDirective, { static: false }]
-            }], fileSelect: [{
+            }], fileSelectInput: [{
                 type: ViewChild,
-                args: ['fileSelect', { static: true }]
+                args: ['fileSelectInput', { static: true }]
             }], fileSelectButton: [{
                 type: ViewChild,
-                args: ['fileSelectButton', { static: true }]
+                args: ['fileSelectButton', { static: true, read: ElementRef }]
             }], onBlur: [{
                 type: Output,
                 args: ['blur']
@@ -4391,9 +4610,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }], valueChange: [{
                 type: Output
             }], hostDefaultClasses: [{
-                type: HostBinding,
-                args: ['class.k-widget']
-            }, {
                 type: HostBinding,
                 args: ['class.k-upload']
             }], hostDisabledClass: [{
@@ -4402,9 +4618,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }], dir: [{
                 type: HostBinding,
                 args: ['attr.dir']
-            }], handleKeydown: [{
-                type: HostListener,
-                args: ['keydown', ['$event']]
             }] } });
 
 class UploadDropZoneDirective {
@@ -4432,7 +4645,7 @@ class UploadDropZoneDirective {
             return;
         }
         components.forEach((component) => {
-            let droppedFiles = event.dataTransfer.files;
+            const droppedFiles = event.dataTransfer.files;
             if (droppedFiles.length > 0 && !component.disabled) {
                 let files = getAllFileInfo(droppedFiles);
                 if (component instanceof UploadComponent) {
@@ -4458,11 +4671,11 @@ class UploadDropZoneDirective {
         return this.dropZoneService.getComponents(this.zoneId);
     }
 }
-UploadDropZoneDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: UploadDropZoneDirective, deps: [{ token: DropZoneService }], target: i0.ɵɵFactoryTarget.Directive });
-UploadDropZoneDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", 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: "13.3.11", ngImport: i0, type: UploadDropZoneDirective, deps: [{ token: DropZoneService }], target: i0.ɵɵFactoryTarget.Directive });
+UploadDropZoneDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", 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: "12.2.16", ngImport: i0, type: UploadDropZoneDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: UploadDropZoneDirective, decorators: [{
             type: Directive,
             args: [{
                     providers: [
@@ -4492,6 +4705,7 @@ class UploadDropZoneComponent extends DropZoneBase {
         super(element, renderer, 'k-external-dropzone-hover');
         this.localization = localization;
         this.hostClass = true;
+        this._svgIcon = uploadIcon;
         this.localizationChangeSubscription = this.localization.changes.subscribe(({ rtl }) => {
             this.direction = rtl ? 'rtl' : 'ltr';
         });
@@ -4499,6 +4713,19 @@ class UploadDropZoneComponent extends DropZoneBase {
     get dirAttribute() {
         return this.direction;
     }
+    /**
+     * Defines an SVGIcon to be rendered inside the DropZone.
+     * The input can take either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
+     */
+    set svgIcon(icon) {
+        if (isDevMode() && icon && this.icon && this.iconClass) {
+            throw new Error('Setting both icon/svgIcon and iconClass options at the same time is not supported.');
+        }
+        this._svgIcon = icon;
+    }
+    get svgIcon() {
+        return this._svgIcon;
+    }
     /**
      * @hidden
      */
@@ -4510,12 +4737,11 @@ class UploadDropZoneComponent extends DropZoneBase {
      */
     get iconClasses() {
         if (this.icon) {
-            return `k-icon k-i-${this.icon}`;
+            return `${this.icon}`;
         }
-        if (this.iconClass) {
-            return `${this.iconClass}`;
+        if (!this.icon && !this.iconClass) {
+            return 'upload';
         }
-        return 'k-icon k-i-upload';
     }
     ngOnDestroy() {
         if (this.localizationChangeSubscription) {
@@ -4523,28 +4749,31 @@ class UploadDropZoneComponent extends DropZoneBase {
         }
     }
 }
-UploadDropZoneComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", 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: "12.2.16", type: UploadDropZoneComponent, selector: "kendo-uploaddropzone", inputs: { zoneId: "zoneId", icon: "icon", iconClass: "iconClass" }, host: { properties: { "class.k-external-dropzone": "this.hostClass", "attr.dir": "this.dirAttribute" } }, providers: [
+UploadDropZoneComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", 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.11", 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,
             useValue: 'kendo.uploaddropzone'
         }
     ], exportAs: ["kendoUploadDropZone"], usesInheritance: true, ngImport: i0, template: `
-    <ng-container kendoUploadDropZoneLocalizedMessages
-      i18n-externalDropFilesHere='kendo.uploaddropzone.externalDropFilesHere|Sets the external drop-zone hint'
-      externalDropFilesHere='Drag and drop files here to upload'
-    >
-    </ng-container>
-    <div class='k-dropzone-inner' [kendoUploadDropZone]="zoneId">
-      <span [ngClass]="iconClasses"></span>
-      <span class="k-dropzone-hint">{{ textFor('externalDropFilesHere') }}</span>
-      <span class="k-dropzone-note">
-        <ng-content></ng-content>
-      </span>
-    </div>
-  `, isInline: true, directives: [{ type: LocalizedMessagesDirective, selector: "\n    [kendoUploadLocalizedMessages],\n    [kendoFileSelectLocalizedMessages],\n    [kendoUploadDropZoneLocalizedMessages]\n  " }, { type: UploadDropZoneDirective, selector: "[kendoUploadDropZone], [kendoFileSelectDropZone]", inputs: ["kendoUploadDropZone"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: UploadDropZoneComponent, decorators: [{
+        <ng-container kendoUploadDropZoneLocalizedMessages
+            i18n-externalDropFilesHere='kendo.uploaddropzone.externalDropFilesHere|Sets the external drop-zone hint'
+            externalDropFilesHere='Drag and drop files here to upload'>
+        </ng-container>
+        <div class='k-dropzone-inner' [kendoUploadDropZone]="zoneId">
+            <kendo-icon-wrapper
+                [name]="iconClasses"
+                [customFontClass]="iconClass"
+                [svgIcon]="svgIcon"
+            ></kendo-icon-wrapper>
+            <span class="k-dropzone-hint">{{ textFor('externalDropFilesHere') }}</span>
+            <span class="k-dropzone-note">
+                <ng-content></ng-content>
+            </span>
+        </div>
+    `, isInline: true, components: [{ type: i4.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], 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.11", ngImport: i0, type: UploadDropZoneComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoUploadDropZone',
@@ -4557,19 +4786,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     ],
                     selector: 'kendo-uploaddropzone',
                     template: `
-    <ng-container kendoUploadDropZoneLocalizedMessages
-      i18n-externalDropFilesHere='kendo.uploaddropzone.externalDropFilesHere|Sets the external drop-zone hint'
-      externalDropFilesHere='Drag and drop files here to upload'
-    >
-    </ng-container>
-    <div class='k-dropzone-inner' [kendoUploadDropZone]="zoneId">
-      <span [ngClass]="iconClasses"></span>
-      <span class="k-dropzone-hint">{{ textFor('externalDropFilesHere') }}</span>
-      <span class="k-dropzone-note">
-        <ng-content></ng-content>
-      </span>
-    </div>
-  `
+        <ng-container kendoUploadDropZoneLocalizedMessages
+            i18n-externalDropFilesHere='kendo.uploaddropzone.externalDropFilesHere|Sets the external drop-zone hint'
+            externalDropFilesHere='Drag and drop files here to upload'>
+        </ng-container>
+        <div class='k-dropzone-inner' [kendoUploadDropZone]="zoneId">
+            <kendo-icon-wrapper
+                [name]="iconClasses"
+                [customFontClass]="iconClass"
+                [svgIcon]="svgIcon"
+            ></kendo-icon-wrapper>
+            <span class="k-dropzone-hint">{{ textFor('externalDropFilesHere') }}</span>
+            <span class="k-dropzone-note">
+                <ng-content></ng-content>
+            </span>
+        </div>
+    `
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1$1.LocalizationService }]; }, propDecorators: { hostClass: [{
                 type: HostBinding,
@@ -4583,6 +4815,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], iconClass: [{
                 type: Input
+            }], svgIcon: [{
+                type: Input
             }] } });
 
 /**
@@ -4614,8 +4848,8 @@ const PUBLIC_DIRECTIVES = [
  */
 class SharedModule {
 }
-SharedModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SharedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SharedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SharedModule, declarations: [FileTemplateDirective,
+SharedModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SharedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SharedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SharedModule, declarations: [FileTemplateDirective,
         FileInfoTemplateDirective,
         CustomMessagesComponent,
         UploadDropZoneDirective,
@@ -4627,7 +4861,7 @@ SharedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "
         FileListSingleItemComponent,
         FileSelectDirective,
         LocalizedMessagesDirective,
-        TemplateContextDirective], imports: [CommonModule], exports: [FileTemplateDirective,
+        TemplateContextDirective], imports: [CommonModule, ButtonsModule, ProgressBarModule, IconsModule], exports: [FileTemplateDirective,
         FileInfoTemplateDirective,
         CustomMessagesComponent,
         UploadDropZoneDirective,
@@ -4639,9 +4873,11 @@ SharedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "
         FileListSingleItemComponent,
         FileSelectDirective,
         LocalizedMessagesDirective,
-        TemplateContextDirective, CommonModule] });
-SharedModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SharedModule, imports: [[CommonModule], CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SharedModule, decorators: [{
+        TemplateContextDirective, CommonModule,
+        ButtonsModule] });
+SharedModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SharedModule, imports: [[CommonModule, ButtonsModule, ProgressBarModule, IconsModule], CommonModule,
+        ButtonsModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SharedModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -4651,9 +4887,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     exports: [
                         PUBLIC_DIRECTIVES,
                         SHARED_DECLARATIONS,
-                        CommonModule
+                        CommonModule,
+                        ButtonsModule
                     ],
-                    imports: [CommonModule]
+                    imports: [CommonModule, ButtonsModule, ProgressBarModule, IconsModule]
                 }]
         }] });
 
@@ -4665,10 +4902,10 @@ const FILESELECT_DECLARATIONS = [
  */
 class FileSelectModule {
 }
-FileSelectModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FileSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-FileSelectModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FileSelectModule, declarations: [FileSelectComponent], imports: [SharedModule], exports: [FileTemplateDirective, FileInfoTemplateDirective, CustomMessagesComponent, UploadDropZoneDirective, UploadDropZoneComponent, FileSelectComponent] });
-FileSelectModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FileSelectModule, imports: [[SharedModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FileSelectModule, decorators: [{
+FileSelectModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FileSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+FileSelectModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", 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.11", ngImport: i0, type: FileSelectModule, imports: [[SharedModule, IconsModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FileSelectModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [FILESELECT_DECLARATIONS],
@@ -4676,7 +4913,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                         PUBLIC_DIRECTIVES,
                         FILESELECT_DECLARATIONS
                     ],
-                    imports: [SharedModule]
+                    imports: [SharedModule, IconsModule]
                 }]
         }] });
 
@@ -4690,14 +4927,14 @@ const UPLOAD_DECLARATIONS = [
  */
 class UploadModule {
 }
-UploadModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: UploadModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-UploadModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: UploadModule, declarations: [UploadComponent,
+UploadModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: UploadModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+UploadModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: UploadModule, declarations: [UploadComponent,
         UploadActionButtonsComponent,
-        UploadStatusTotalComponent], imports: [SharedModule], exports: [FileTemplateDirective, FileInfoTemplateDirective, CustomMessagesComponent, UploadDropZoneDirective, UploadDropZoneComponent, UploadComponent,
+        UploadStatusTotalComponent], imports: [SharedModule, IconsModule], exports: [FileTemplateDirective, FileInfoTemplateDirective, CustomMessagesComponent, UploadDropZoneDirective, UploadDropZoneComponent, UploadComponent,
         UploadActionButtonsComponent,
         UploadStatusTotalComponent] });
-UploadModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: UploadModule, imports: [[SharedModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: UploadModule, decorators: [{
+UploadModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: UploadModule, imports: [[SharedModule, IconsModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: UploadModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [UPLOAD_DECLARATIONS],
@@ -4705,7 +4942,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                         PUBLIC_DIRECTIVES,
                         UPLOAD_DECLARATIONS
                     ],
-                    imports: [SharedModule]
+                    imports: [SharedModule, IconsModule]
                 }]
         }] });
 
@@ -4736,12 +4973,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
  */
 class UploadsModule {
 }
-UploadsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: UploadsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-UploadsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: UploadsModule, exports: [FileSelectModule,
+UploadsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: UploadsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+UploadsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: UploadsModule, exports: [FileSelectModule,
         UploadModule] });
-UploadsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: UploadsModule, imports: [FileSelectModule,
+UploadsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: UploadsModule, imports: [FileSelectModule,
         UploadModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: UploadsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: UploadsModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [
@@ -4755,5 +4992,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { CancelEvent, ClearEvent, CustomMessagesComponent, ErrorEvent, FileInfoTemplateDirective, FileListComponent, FileListItemActionButtonComponent, FileListItemBase, FileListMultipleItemsComponent, FileListSingleItemComponent, FileMap, FileSelectComponent, FileSelectDirective, FileSelectModule, FileState, FileTemplateDirective, NavigationService, PauseEvent, RemoveEvent, ResumeEvent, SelectEvent, SuccessEvent, TemplateContextDirective, UploadActionButtonsComponent, UploadComponent, UploadDropZoneComponent, UploadDropZoneDirective, UploadEvent, UploadModule, UploadProgressEvent, UploadService, UploadStatusTotalComponent, UploadsModule };
+export { CancelEvent, ClearEvent, CustomMessagesComponent, ErrorEvent, FileInfoTemplateDirective, FileListComponent, FileListItemActionButtonComponent, FileListItemBase, FileListMultipleItemsComponent, FileListSingleItemComponent, FileMap, FileSelectComponent, FileSelectDirective, FileSelectModule, FileState, FileTemplateDirective, NavigationService, PauseEvent, RemoveEvent, ResumeEvent, SelectEvent, SuccessEvent, TemplateContextDirective, UploadActionButtonsComponent, UploadComponent, UploadDropZoneComponent, UploadDropZoneDirective, UploadEvent, UploadModule, UploadProgressEvent, UploadService, UploadStatusTotalComponent, UploadsModule, validateFiles };