@progress/kendo-angular-upload 8.0.3-dev.202203090930 → 9.0.0-next.202203230841

package/{dist/fesm2015/index.js → fesm2015/kendo-angular-upload.js}

@@ -2,17 +2,20 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { __decorate, __metadata } from 'tslib';
-import { EventEmitter, Injectable, Directive, TemplateRef, forwardRef, Input, ContentChild, ViewChild, ElementRef, Output, HostBinding, HostListener, Component, NgZone, Renderer2, ChangeDetectorRef, ViewChildren, QueryList, ViewContainerRef, isDevMode, NgModule } from '@angular/core';
+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 { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { LocalizationService, L10N_PREFIX, ComponentMessages } from '@progress/kendo-angular-l10n';
+import * as i1$1 from '@progress/kendo-angular-l10n';
+import { ComponentMessages, LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { guid, Keys, isDocumentAvailable, KendoInput, isChanged } from '@progress/kendo-angular-common';
 import { fromEvent, merge } from 'rxjs';
 import { filter } from 'rxjs/operators';
 import { validatePackage } from '@progress/kendo-licensing';
-import { HttpHeaders, HttpRequest, HttpEventType, HttpResponse, HttpClient } from '@angular/common/http';
-import { CommonModule } from '@angular/common';
+import * as i1 from '@angular/common/http';
+import { HttpHeaders, HttpRequest, HttpEventType, HttpResponse } from '@angular/common/http';
 import { trigger, state, style, transition, animate } from '@angular/animations';
+import * as i4 from '@angular/common';
+import { CommonModule } from '@angular/common';
 
 /**
  * @hidden
@@ -21,7 +24,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-upload',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1646818140,
+    publishDate: 1648024815,
     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'
 };
@@ -104,14 +107,14 @@ class FileMap {
     get(uid) {
         return this._files[uid];
     }
-    setFilesState(files, state$$1) {
+    setFilesState(files, state) {
         for (let file of files) {
-            this.setFilesStateByUid(file.uid, state$$1);
+            this.setFilesStateByUid(file.uid, state);
         }
     }
-    setFilesStateByUid(uid, state$$1) {
+    setFilesStateByUid(uid, state) {
         this.get(uid).forEach((f) => {
-            f.state = state$$1;
+            f.state = state;
         });
     }
     get count() {
@@ -177,8 +180,8 @@ class FileMap {
         }
         return null;
     }
-    getFilesWithState(state$$1) {
-        return this.filesFlat.filter(file => file.state === state$$1);
+    getFilesWithState(state) {
+        return this.filesFlat.filter(file => file.state === state);
     }
     hasFileWithState(fileStates) {
         let files = this._files;
@@ -224,6 +227,7 @@ class FileMap {
  */
 class CancelEvent {
     /**
+     * @hidden
      * Constructs the event arguments for the `cancel` event.
      * @param files - The list of the files that were going to be uploaded.
      */
@@ -284,6 +288,7 @@ class PreventableEvent {
  */
 class ClearEvent extends PreventableEvent {
     /**
+     * @hidden
      * Constructs the event arguments for the `clear` event.
      */
     constructor() { super(); }
@@ -316,6 +321,7 @@ class ClearEvent extends PreventableEvent {
  */
 class ErrorEvent {
     /**
+     * @hidden
      * Constructs the event arguments for the `error` event.
      *
      * @param files - The list of the files that failed to be uploaded or removed.
@@ -358,6 +364,7 @@ class ErrorEvent {
  */
 class PauseEvent {
     /**
+     * @hidden
      * Constructs the event arguments for the `pause` event.
      * @param file - The file that is going to be paused.
      */
@@ -393,6 +400,7 @@ class PauseEvent {
  */
 class RemoveEvent extends PreventableEvent {
     /**
+     * @hidden
      * Constructs the event arguments for the `remove` event.
      * @param files - The list of the files that will be removed.
      * @param headers - The headers of the request.
@@ -433,6 +441,7 @@ class RemoveEvent extends PreventableEvent {
  */
 class ResumeEvent {
     /**
+     * @hidden
      * Constructs the event arguments for the `resume` event.
      * @param file - The file that is going to be resumed.
      */
@@ -468,6 +477,7 @@ class ResumeEvent {
  */
 class SelectEvent extends PreventableEvent {
     /**
+     * @hidden
      * Constructs the event arguments for the `select` event.
      * @param files - The list of the selected files.
      */
@@ -504,6 +514,7 @@ class SelectEvent extends PreventableEvent {
  */
 class SuccessEvent extends PreventableEvent {
     /**
+     * @hidden
      * Constructs the event arguments for the `success` event.
      * @param files - The list of the files that were uploaded or removed.
      * @param operation - The operation type (`upload` or `remove`).
@@ -544,6 +555,7 @@ class SuccessEvent extends PreventableEvent {
  */
 class UploadEvent extends PreventableEvent {
     /**
+     * @hidden
      * Constructs the event arguments for the `upload` event.
      * @param files - The list of the files that will be uploaded.
      * @param headers - The headers of the request.
@@ -582,6 +594,7 @@ class UploadEvent extends PreventableEvent {
  */
 class UploadProgressEvent {
     /**
+     * @hidden
      * Constructs the event arguments for the `uploadprogress` event.
      * @param files - The list of files that are being uploaded.
      * @param percentComplete - The portion that has been uploaded.
@@ -592,9 +605,6 @@ class UploadProgressEvent {
     }
 }
 
-const ɵ0 = [
-    ".xlr", ".xls", ".xlsx"
-];
 /**
  * @hidden
  */
@@ -614,7 +624,9 @@ const fileGroupMap = {
     presentation: [
         ".key", ".odp", ".pps", ".ppt", ".pptx"
     ],
-    data: ɵ0,
+    data: [
+        ".xlr", ".xls", ".xlsx"
+    ],
     programming: [
         ".tmp", ".bak", ".msi", ".cab", ".cpl", ".cur", ".dll", ".dmp", ".drv", ".icns", ".ico", ".link", ".sys", ".cfg",
         ".ini", ".asp", ".aspx", ".cer", ".csr", ".css", ".dcr", ".htm", ".html", ".js", ".php", ".rss", ".xhtml"
@@ -633,7 +645,7 @@ const fileGroupMap = {
     ]
 };
 
-/* tslint:disable: no-bitwise */
+/* eslint-disable  no-bitwise */
 /**
  * @hidden
  */
@@ -784,6 +796,18 @@ const assignGuidToFiles = (files, isUnique) => {
         return file;
     });
 };
+/**
+ * @hidden
+ */
+const supportsFormData = () => {
+    return typeof (FormData) !== "undefined";
+};
+/**
+ * @hidden
+ */
+const userAgent = () => {
+    return navigator.userAgent;
+};
 const focusableRegex = /^(?:a|input|select|textarea|button|object)$/i;
 /**
  * @hidden
@@ -875,7 +899,7 @@ class ChunkMap {
 /**
  * @hidden
  */
-let UploadService = class UploadService {
+class UploadService {
     constructor(http) {
         this.http = http;
         this.cancelEvent = new EventEmitter();
@@ -1281,16 +1305,17 @@ let UploadService = class UploadService {
         }
         return false;
     }
-};
-UploadService = __decorate([
-    Injectable(),
-    __metadata("design:paramtypes", [HttpClient])
-], UploadService);
+}
+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: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i1.HttpClient }]; } });
 
 /**
  * @hidden
  */
-let NavigationService = class NavigationService {
+class NavigationService {
     constructor(uploadService) {
         this.uploadService = uploadService;
         this.onActionButtonAction = new EventEmitter();
@@ -1424,32 +1449,35 @@ let NavigationService = class NavigationService {
         const fileCount = this.uploadService.files.count;
         return this.actionButtonsVisible ? fileCount + 1 : fileCount - 1;
     }
-};
-NavigationService = __decorate([
-    Injectable(),
-    __metadata("design:paramtypes", [UploadService])
-], NavigationService);
+}
+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: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: UploadService }]; } });
 
 /**
  * Used to customize the rendering of the files in the list ([see example]({% slug templates_upload %}#toc-file-template)).
  */
-let FileTemplateDirective = class FileTemplateDirective {
+class FileTemplateDirective {
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
-};
-FileTemplateDirective = __decorate([
-    Directive({
-        selector: '[kendoUploadFileTemplate], [kendoFileSelectFileTemplate]' // tslint:disable-line:directive-selector-prefix
-    }),
-    __metadata("design:paramtypes", [TemplateRef])
-], FileTemplateDirective);
+}
+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: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoUploadFileTemplate], [kendoFileSelectFileTemplate]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
 
 let components = {};
 /**
  * @hidden
  */
-let DropZoneService = class DropZoneService {
+class DropZoneService {
     addComponent(component, zoneId) {
         if (this.has(zoneId)) {
             components[zoneId].push(component);
@@ -1464,982 +1492,716 @@ let DropZoneService = class DropZoneService {
     has(id) {
         return id in components;
     }
-};
-DropZoneService = __decorate([
-    Injectable()
-], DropZoneService);
+}
+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: [{
+            type: Injectable
+        }] });
 
 /**
  * Used to customize the rendering of the file info section in the list. All other elements of the default template, such as file icon, action buttons, upload progress etc. will be preserved in place. ([see example]({% slug templates_upload %}#toc-file-info-template)).
  */
-let FileInfoTemplateDirective = class FileInfoTemplateDirective {
+class FileInfoTemplateDirective {
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
-};
-FileInfoTemplateDirective = __decorate([
-    Directive({
-        selector: '[kendoUploadFileInfoTemplate], [kendoFileSelectFileInfoTemplate]'
-    }),
-    __metadata("design:paramtypes", [TemplateRef])
-], FileInfoTemplateDirective);
+}
+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: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoUploadFileInfoTemplate], [kendoFileSelectFileInfoTemplate]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
 
-var FileSelectComponent_1;
 /**
  * @hidden
  */
-const FILESELECT_VALUE_ACCESSOR = {
-    multi: true,
-    provide: NG_VALUE_ACCESSOR,
-    useExisting: forwardRef(() => FileSelectComponent) // tslint:disable-line:no-forward-ref
-};
-let FileSelectComponent = FileSelectComponent_1 = class FileSelectComponent {
-    constructor(uploadService, localization, navigation, dropZoneService, ngZone, renderer, cdr, wrapper) {
+class FileListItemDirective {
+    constructor(el, navigationService, uploadService) {
+        this.navigationService = navigationService;
         this.uploadService = uploadService;
-        this.localization = localization;
-        this.navigation = navigation;
-        this.dropZoneService = dropZoneService;
-        this.ngZone = ngZone;
-        this.renderer = renderer;
-        this.cdr = cdr;
-        /**
-         * Disables the FileSelect.
-         * The default value is `false`.
-         */
-        this.disabled = false;
-        /**
-         * Enables the selection of multiple files
-         * ([see example]({% slug fileprocessing_upload %}#toc-upload-of-sinlge-or-multiple-files)).
-         * If set to `false`, only one file can be selected at a time.
-         */
-        this.multiple = true;
-        /**
-         * Toggles the visibility of the file list.
-         */
-        this.showFileList = true;
-        /**
-         * Specifies the [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the FileSelect.
-         */
-        this.tabindex = 0;
-        /**
-         * @hidden
-         */
-        this.focusableId = `k-${guid()}`;
-        /**
-         * Fires when the user navigates outside the component.
-         */
-        this.onBlur = new EventEmitter();
-        /**
-         * Fires when the component is focused.
-         */
-        this.onFocus = new EventEmitter();
-        /**
-         * Fires when files are selected. If prevented, the selected files will not be added to the list.
-         */
-        this.select = new EventEmitter();
-        /**
-         * Fires when a file is about to be removed. If prevented, the file will remain in the list.
-         */
-        this.remove = new EventEmitter();
-        /**
-         * Fires when the value of the component has changed as a result of a successful `select` or `remove` operation.
-         */
-        this.valueChange = new EventEmitter();
-        this.hostDefaultClasses = true;
-        /**
-         * @hidden
-         */
-        this._restrictions = {
-            allowedExtensions: [],
-            maxFileSize: 0,
-            minFileSize: 0
-        };
-        this.onTouchedCallback = (_) => { };
-        this.onChangeCallback = (_) => { };
-        validatePackage(packageMetadata);
-        this.wrapper = wrapper.nativeElement;
-        this.direction = localization.rtl ? 'rtl' : 'ltr';
-        this.navigation.computeKeys(this.direction);
-        this.fileList = this.uploadService.files;
-        this.localizationChangeSubscription = localization.changes.subscribe(({ rtl }) => {
-            this.direction = rtl ? 'rtl' : 'ltr';
-            this.navigation.computeKeys(this.direction);
-        });
-        this.subscribeBlur();
-        this.subscribeFocus();
-        this.attachEventHandlers();
-        this.setDefaultSettings();
+        this.fileClass = true;
+        this.focused = false;
+        this.element = el;
     }
-    /**
-     * Sets the `name` attribute of the `input` element of the FileSelect.
-     */
-    set name(name) {
-        this.uploadService.async.saveField = name;
+    focus() {
+        this.element.nativeElement.focus();
     }
-    get name() {
-        return this.uploadService.async.saveField;
+    get uidAttribute() {
+        return this.files[0].uid;
     }
-    /**
-     * Sets the restrictions for selected files.
-     */
-    set restrictions(restrictions) {
-        let parsedRestrictions = Object.assign({}, this._restrictions, restrictions);
-        this._restrictions = parsedRestrictions;
+    get tabIndex() {
+        return "-1";
     }
-    get restrictions() {
-        return this._restrictions;
+    get kFileError() {
+        return this.files[0].state === FileState.Failed;
     }
-    get hostDisabledClass() {
-        return this.disabled;
+    get kFileInvalid() {
+        return filesHaveValidationErrors(this.files);
     }
-    get dir() {
-        return this.direction;
+    get kFileProgress() {
+        return this.files[0].state === FileState.Uploading ||
+            this.files[0].state === FileState.Paused;
     }
-    ngOnInit() {
-        this.renderer.removeAttribute(this.wrapper, "tabindex");
-        if (this.zoneId) {
-            this.dropZoneService.addComponent(this, this.zoneId);
+    get kFileSuccess() {
+        if (this.uploadService.component === 'Upload') {
+            return this.files[0].state === FileState.Uploaded ||
+                this.files[0].state === FileState.Initial;
         }
+        return false;
+    }
+    get kStateFocused() {
+        return this.focused;
+    }
+    onFocus() {
+        this.focused = true;
+    }
+    onBlur() {
+        this.focused = false;
+    }
+    onClick(event) {
+        if (!isFocusable(event.target) && !hasClasses(event.target, IGNORE_TARGET_CLASSES)) {
+            this.navigationService.focusedIndex = this.index;
+        }
+    }
+}
+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-state-focused": "this.kStateFocused" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FileListItemDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoUploadFileListItem]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: NavigationService }, { type: UploadService }]; }, propDecorators: { files: [{
+                type: Input
+            }], index: [{
+                type: Input
+            }], fileClass: [{
+                type: HostBinding,
+                args: ['class.k-file']
+            }], uidAttribute: [{
+                type: HostBinding,
+                args: ['attr.data-uid']
+            }], tabIndex: [{
+                type: HostBinding,
+                args: ['attr.tabIndex']
+            }], kFileError: [{
+                type: HostBinding,
+                args: ['class.k-file-error']
+            }], kFileInvalid: [{
+                type: HostBinding,
+                args: ['class.k-file-invalid']
+            }], kFileProgress: [{
+                type: HostBinding,
+                args: ['class.k-file-progress']
+            }], kFileSuccess: [{
+                type: HostBinding,
+                args: ['class.k-file-success']
+            }], kStateFocused: [{
+                type: HostBinding,
+                args: ['class.k-state-focused']
+            }], onFocus: [{
+                type: HostListener,
+                args: ["focus"]
+            }], onBlur: [{
+                type: HostListener,
+                args: ["blur"]
+            }], onClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }] } });
+
+/**
+ * @hidden
+ */
+class FileListItemBase {
+    constructor(uploadService) {
+        this.uploadService = uploadService;
+        this.progressComplete = 0;
+    }
+    subscribeUploadProgress(uploadProgressHandler) {
+        this.uploadProgressSubscription = this.uploadService.uploadProgressEvent.subscribe(uploadProgressHandler);
+    }
+    fileHasValidationErrors(file) {
+        return fileHasValidationErrors(file);
+    }
+    filesHaveValidationErrors(files) {
+        return filesHaveValidationErrors(files);
+    }
+    ngOnDestroy() {
+        this.uploadProgressSubscription.unsubscribe();
+    }
+    getFileValidationMessage(file) {
+        let validationMessage;
+        if (file.validationErrors && file.validationErrors.length > 0) {
+            validationMessage = this.localization.get(file.validationErrors[0]);
+        }
+        return validationMessage;
+    }
+    getTotalFilesSizeMessage(files) {
+        return getTotalFilesSizeMessage(files);
     }
-    /**
-     * @hidden
-     */
     textFor(key) {
         return this.localization.get(key);
     }
-    /**
-     * Focuses the underlying input element.
-     */
-    focus() {
-        setTimeout(() => {
-            this.fileSelectButton.nativeElement.focus();
-        });
+}
+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: [{
+            type: Component,
+            args: [{ template: '' }]
+        }], ctorParameters: function () { return [{ type: UploadService }]; } });
+
+/**
+ * @hidden
+ */
+class FileListItemActionButtonComponent {
+    constructor(uploadService, localization, navigation) {
+        this.uploadService = uploadService;
+        this.localization = localization;
+        this.navigation = navigation;
+        this.actionFocused = false;
+        this.retryFocused = false;
+        this.pauseResumeFocused = false;
     }
-    ngOnDestroy() {
-        this.fileList.clear();
-        if (this.blurSubscription) {
-            this.blurSubscription.unsubscribe();
+    onFocus(type) {
+        if (type === 'action') {
+            this.actionFocused = true;
         }
-        if (this.wrapperFocusSubscription) {
-            this.wrapperFocusSubscription.unsubscribe();
+        if (type === 'retry') {
+            this.retryFocused = true;
         }
-        if (this.selectButtonFocusSubscription) {
-            this.selectButtonFocusSubscription.unsubscribe();
+        if (type === 'pauseResume') {
+            this.pauseResumeFocused = true;
         }
-        if (this.localizationChangeSubscription) {
-            this.localizationChangeSubscription.unsubscribe();
+    }
+    onBlur(type) {
+        if (type === 'retry') {
+            this.retryFocused = false;
         }
-        if (this.subs) {
-            this.subs.unsubscribe();
+        if (type === 'action') {
+            this.actionFocused = false;
+        }
+        if (type === 'pauseResume') {
+            this.pauseResumeFocused = false;
         }
     }
-    /**
-     * @hidden
-     */
-    handleKeydown(event) {
+    onRetryClick() {
         if (this.disabled) {
             return;
         }
-        if ((event.keyCode === Keys.Enter || event.keyCode === Keys.Space) &&
-            event.target === this.fileSelectButton.nativeElement) {
-            event.preventDefault();
-            this.fileSelect.nativeElement.click();
+        this.uploadService.retryFiles(this.file.uid);
+    }
+    onRemoveCancelClick(event) {
+        if (this.disabled) {
             return;
         }
-        if (hasClasses(event.target, UPLOAD_CLASSES) ||
-            (!isFocusable(event.target) && !hasClasses(event.target, IGNORE_TARGET_CLASSES))) {
-            this.navigation.process(event);
+        event.stopImmediatePropagation();
+        const uid = this.file.uid;
+        if (this.file.state === FileState.Uploading) {
+            this.uploadService.cancelFiles(uid);
         }
+        else {
+            this.uploadService.removeFiles(uid);
+        }
+        this.navigation.focusSelectButton();
     }
-    /**
-     * @hidden
-     */
-    writeValue(newValue) {
-        let isValid = true;
-        if (newValue instanceof Array) {
-            newValue.forEach((file) => {
-                if (!validateInitialFileSelectFile(file)) {
-                    isValid = false;
-                }
-            });
-            if (isValid) {
-                this.uploadService.addInitialFileSelectFiles(newValue);
-            }
+    onPauseResumeClick() {
+        if (this.disabled) {
+            return;
         }
-        if (newValue === null) {
-            this.fileList.clear();
+        const uid = this.file.uid;
+        if (this.file.state === FileState.Paused) {
+            this.uploadService.resumeFile(uid);
+        }
+        else {
+            this.uploadService.pauseFile(uid);
         }
-        this.cdr.markForCheck();
-    }
-    /**
-     * @hidden
-     */
-    registerOnChange(fn) {
-        this.onChangeCallback = fn;
-    }
-    /**
-     * @hidden
-     */
-    registerOnTouched(fn) {
-        this.onTouchedCallback = fn;
-    }
-    /**
-     * @hidden
-     */
-    setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
-    }
-    /**
-     * Removes specific file from the file list.
-     */
-    removeFileByUid(uid) {
-        this.uploadService.removeFiles(uid);
-    }
-    /**
-     * Visually clears all files from the UI.
-     */
-    clearFiles() {
-        this.uploadService.clearFiles();
-    }
-    /**
-     * @hidden
-     * Used to determine if the component is empty.
-     */
-    isEmpty() {
-        return false;
     }
-    /**
-     * @hidden
-     * Used by the external dropzone to add files to the FileSelect
-     */
-    addFiles(files) {
-        this.uploadService.addFiles(files);
+    get actionButtonTitle() {
+        if (this.file.state === FileState.Uploading) {
+            return this.localization.get('cancel');
+        }
+        return this.localization.get('remove');
     }
-    /**
-     * @hidden
-     */
-    get selectButtonTabIndex() {
-        return this.disabled ? undefined : this.tabindex;
+    get retryButtonTitle() {
+        return this.localization.get('retry');
     }
-    /**
-     * @hidden
-     */
-    onFileSelectButtonFocus(_event) {
-        this.renderer.addClass(this.fileSelectButton.nativeElement, 'k-focus');
-        if (!this.navigation.focused) {
-            this.navigation.focusedIndex = -1;
+    get pauseResumeButtonTitle() {
+        if (this.file.state === FileState.Uploading) {
+            return this.localization.get('pause');
         }
+        return this.localization.get('resume');
     }
-    /**
-     * @hidden
-     */
-    onFileSelectButtonBlur(_event) {
-        this.renderer.removeClass(this.fileSelectButton.nativeElement, 'k-focus');
+    get isUploading() {
+        return this.file.state === FileState.Uploading;
     }
-    subscribeBlur() {
-        if (!isDocumentAvailable()) {
-            return;
-        }
-        this.ngZone.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.navigation.focused = false;
-                        this.onTouchedCallback();
-                        this.onBlur.emit();
-                    });
-                }
-            });
-        });
+    get isFailed() {
+        return this.file.state === FileState.Failed;
     }
-    subscribeFocus() {
-        this.wrapperFocusSubscription = this.navigation.onWrapperFocus.subscribe(() => {
-            this.onFocus.emit();
-        });
-        this.selectButtonFocusSubscription = this.navigation.onSelectButtonFocus.subscribe(() => {
-            this.fileSelectButton.nativeElement.focus();
-        });
+    get isPaused() {
+        return this.file.state === FileState.Paused;
     }
-    attachEventHandlers() {
-        this.subs = this.uploadService.changeEvent.subscribe((files) => {
-            let model = [];
-            if (files !== null) {
-                files.forEach((file) => {
-                    if (file.state === FileState.Initial) {
-                        model.push(file);
-                    }
-                    if (file.state === FileState.Selected && file.rawFile && !file.validationErrors) {
-                        model.push(file.rawFile);
-                    }
-                });
-            }
-            if (model.length === 0) {
-                model = null;
-            }
-            this.onChangeCallback(model);
-            this.valueChange.emit(model);
-        });
-        this.subs.add(this.uploadService.removeEvent.subscribe((args) => {
-            this.remove.emit(args);
-        }));
-        this.subs.add(this.uploadService.selectEvent.subscribe((args) => {
-            this.select.emit(args);
-        }));
+    get isResumable() {
+        const service = this.uploadService;
+        const isResumable = service.async.chunk && service.chunk.resumable;
+        const isUploading = (this.file.state === FileState.Paused) || (this.file.state === FileState.Uploading);
+        return isResumable && isUploading;
     }
-    setDefaultSettings() {
-        this.uploadService.async.autoUpload = false;
-        this.uploadService.component = 'FileSelect';
+    get isActionButtonVisible() {
+        if ((this.file.state === FileState.Uploaded || this.file.state === FileState.Initial) &&
+            !this.uploadService.async.removeUrl && this.uploadService.component === 'Upload') {
+            return false;
+        }
+        return true;
     }
-};
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], FileSelectComponent.prototype, "accept", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Boolean)
-], FileSelectComponent.prototype, "disabled", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Boolean)
-], FileSelectComponent.prototype, "multiple", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String),
-    __metadata("design:paramtypes", [String])
-], FileSelectComponent.prototype, "name", null);
-__decorate([
-    Input(),
-    __metadata("design:type", Boolean)
-], FileSelectComponent.prototype, "showFileList", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Number)
-], FileSelectComponent.prototype, "tabindex", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object),
-    __metadata("design:paramtypes", [Object])
-], FileSelectComponent.prototype, "restrictions", null);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], FileSelectComponent.prototype, "zoneId", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], FileSelectComponent.prototype, "focusableId", void 0);
-__decorate([
-    ContentChild(FileTemplateDirective, { static: false }),
-    __metadata("design:type", FileTemplateDirective)
-], FileSelectComponent.prototype, "fileTemplate", void 0);
-__decorate([
-    ContentChild(FileInfoTemplateDirective, { static: false }),
-    __metadata("design:type", FileInfoTemplateDirective)
-], FileSelectComponent.prototype, "fileInfoTemplate", void 0);
-__decorate([
-    ViewChild('fileSelect', { static: true }),
-    __metadata("design:type", ElementRef)
-], FileSelectComponent.prototype, "fileSelect", void 0);
-__decorate([
-    ViewChild('fileSelectButton', { static: true }),
-    __metadata("design:type", ElementRef)
-], FileSelectComponent.prototype, "fileSelectButton", void 0);
-__decorate([
-    Output('blur'),
-    __metadata("design:type", EventEmitter)
-], FileSelectComponent.prototype, "onBlur", void 0);
-__decorate([
-    Output('focus'),
-    __metadata("design:type", EventEmitter)
-], FileSelectComponent.prototype, "onFocus", void 0);
-__decorate([
-    Output(),
-    __metadata("design:type", EventEmitter)
-], FileSelectComponent.prototype, "select", void 0);
-__decorate([
-    Output(),
-    __metadata("design:type", EventEmitter)
-], FileSelectComponent.prototype, "remove", void 0);
-__decorate([
-    Output(),
-    __metadata("design:type", EventEmitter)
-], FileSelectComponent.prototype, "valueChange", void 0);
-__decorate([
-    HostBinding('class.k-widget'),
-    HostBinding('class.k-upload'),
-    __metadata("design:type", Boolean)
-], FileSelectComponent.prototype, "hostDefaultClasses", void 0);
-__decorate([
-    HostBinding('class.k-disabled'),
-    __metadata("design:type", Boolean),
-    __metadata("design:paramtypes", [])
-], FileSelectComponent.prototype, "hostDisabledClass", null);
-__decorate([
-    HostBinding('attr.dir'),
-    __metadata("design:type", String),
-    __metadata("design:paramtypes", [])
-], FileSelectComponent.prototype, "dir", null);
-__decorate([
-    HostListener('keydown', ['$event']),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Object]),
-    __metadata("design:returntype", void 0)
-], FileSelectComponent.prototype, "handleKeydown", null);
-FileSelectComponent = FileSelectComponent_1 = __decorate([
-    Component({
-        exportAs: 'kendoFileSelect',
-        providers: [
-            LocalizationService,
-            NavigationService,
-            UploadService,
-            DropZoneService,
-            FILESELECT_VALUE_ACCESSOR,
-            {
-                provide: L10N_PREFIX,
-                useValue: 'kendo.fileselect'
-            },
-            {
-                provide: KendoInput,
-                useExisting: forwardRef(() => FileSelectComponent_1)
-            }
-        ],
-        selector: 'kendo-fileselect',
-        template: `
-        <ng-container kendoFileSelectLocalizedMessages
-            i18n-dropFilesHere="kendo.fileselect.dropFilesHere|The drop zone hint"
-            dropFilesHere="Drop files here to select"
-
-            i18n-invalidFileExtension="kendo.fileselect.invalidFileExtension|The text for the invalid allowed extensions restriction message"
-            invalidFileExtension="File type not allowed."
+}
+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">
+        <span class="k-upload-pct" *ngIf="isUploading || isPaused">{{progress}}%</span>
 
-            i18n-invalidMaxFileSize="kendo.fileselect.invalidMaxFileSize|The text for the invalid max file size restriction message"
-            invalidMaxFileSize="File size too large."
+        <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>
 
-            i18n-invalidMinFileSize="kendo.fileselect.invalidMinFileSize|The text for the invalid min file size restriction message"
-            invalidMinFileSize="File size too small."
+        <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>
 
-            i18n-remove="kendo.fileselect.remove|The text for the Remove button"
-            remove="Remove"
+        <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>
+      </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: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-upload-file-list-item-action-button',
+                    template: `
+      <strong class="k-upload-status">
+        <span class="k-upload-pct" *ngIf="isUploading || isPaused">{{progress}}%</span>
 
-            i18n-select="kendo.fileselect.select|The text for the Select button"
-            select="Select files..."
-        >
-        </ng-container>
-        <div kendoFileSelectInternalDropZone
-            [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"
-                    [dir]="direction"
-                    [restrictions]="restrictions"
-                    [multiple]="multiple"
-                    [disabled]="disabled" />
-                <span>{{textFor('select')}}</span>
-            </div>
-            <div class="k-dropzone-hint">{{textFor('dropFilesHere')}}</div>
-        </div>
-        <ul kendo-upload-file-list
-            class="k-upload-files k-reset"
-            *ngIf="showFileList && fileList.count > 0"
-            [disabled]="disabled"
-            [fileList]="fileList.files"
-            [fileTemplate]="fileTemplate"
-            [fileInfoTemplate]="fileInfoTemplate">
-        </ul>
-    `
-    }),
-    __metadata("design:paramtypes", [UploadService,
-        LocalizationService,
-        NavigationService,
-        DropZoneService,
-        NgZone,
-        Renderer2,
-        ChangeDetectorRef,
-        ElementRef])
-], FileSelectComponent);
+        <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>
 
-/**
- * @hidden
- */
-class Messages extends ComponentMessages {
-}
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], Messages.prototype, "cancel", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], Messages.prototype, "clearSelectedFiles", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], Messages.prototype, "dropFilesHere", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], Messages.prototype, "externalDropFilesHere", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], Messages.prototype, "filesBatchStatus", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], Messages.prototype, "filesBatchStatusFailed", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], Messages.prototype, "filesBatchStatusUploaded", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], Messages.prototype, "fileStatusFailed", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], Messages.prototype, "fileStatusUploaded", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], Messages.prototype, "headerStatusPaused", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], Messages.prototype, "headerStatusUploaded", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], Messages.prototype, "headerStatusUploading", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], Messages.prototype, "invalidFileExtension", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], Messages.prototype, "invalidMaxFileSize", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], Messages.prototype, "invalidMinFileSize", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], Messages.prototype, "pause", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], Messages.prototype, "remove", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], Messages.prototype, "resume", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], Messages.prototype, "retry", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], Messages.prototype, "select", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], Messages.prototype, "uploadSelectedFiles", void 0);
+        <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>
 
-var CustomMessagesComponent_1;
-/**
- * Custom component messages override default component messages ([more information and example]({% slug globalization_upload %})).
- *
- * @example
- * ```html-no-run
- * <kendo-fileselect>
- *     <kendo-fileselect-messages
- *         dropFilesHere="Drop your file here"
- *         select="Upload file">
- *     </kendo-fileselect-messages>
- * </kendo-fileselect>
- * ```
- */
-let CustomMessagesComponent = CustomMessagesComponent_1 = class CustomMessagesComponent extends Messages {
-    constructor(service) {
-        super();
-        this.service = service;
-    }
-    get override() {
-        return true;
-    }
-};
-CustomMessagesComponent = CustomMessagesComponent_1 = __decorate([
-    Component({
-        providers: [
-            {
-                provide: Messages,
-                useExisting: forwardRef(() => CustomMessagesComponent_1) // tslint:disable-line:no-forward-ref
-            }
-        ],
-        selector: 'kendo-upload-messages, kendo-fileselect-messages, kendo-uploaddropzone-messages',
-        template: ``
-    }),
-    __metadata("design:paramtypes", [LocalizationService])
-], CustomMessagesComponent);
+        <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>
+      </strong>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: UploadService }, { type: i1$1.LocalizationService }, { type: NavigationService }]; }, propDecorators: { file: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], progress: [{
+                type: Input
+            }] } });
 
 /**
  * @hidden
  */
-const INVALIDMAXFILESIZE = "invalidMaxFileSize";
-/**
- * @hidden
- */
-const INVALIDMINFILESIZE = "invalidMinFileSize";
-/**
- * @hidden
- */
-const INVALIDFILEEXTENSION = "invalidFileExtension";
-const validateFileExtension = (file, allowedExtensions) => {
-    if (allowedExtensions.length > 0) {
-        if (allowedExtensions.indexOf(file.extension.toLowerCase()) < 0) {
-            file.validationErrors = file.validationErrors || [];
-            if (file.validationErrors.indexOf(INVALIDFILEEXTENSION) < 0) {
-                file.validationErrors.push(INVALIDFILEEXTENSION);
-            }
-        }
+class TemplateContextDirective {
+    constructor(viewContainerRef) {
+        this.viewContainerRef = viewContainerRef;
     }
-};
-const validateFileSize = (file, minFileSize, maxFileSize) => {
-    if (minFileSize !== 0 && file.size < minFileSize) {
-        file.validationErrors = file.validationErrors || [];
-        if (file.validationErrors.indexOf(INVALIDMINFILESIZE) < 0) {
-            file.validationErrors.push(INVALIDMINFILESIZE);
+    set templateContext(context) {
+        if (this.insertedViewRef) {
+            this.viewContainerRef.remove(this.viewContainerRef.indexOf(this.insertedViewRef));
+            this.insertedViewRef = undefined;
         }
-    }
-    if (maxFileSize !== 0 && file.size > maxFileSize) {
-        file.validationErrors = file.validationErrors || [];
-        if (file.validationErrors.indexOf(INVALIDMAXFILESIZE) < 0) {
-            file.validationErrors.push(INVALIDMAXFILESIZE);
+        if (context.templateRef) {
+            this.insertedViewRef = this.viewContainerRef.createEmbeddedView(context.templateRef, context);
         }
     }
-};
-const parseAllowedExtensions = (extensions) => {
-    const allowedExtensions = extensions.map((ext) => {
-        var parsedExt = (ext.substring(0, 1) === ".") ? ext : ("." + ext);
-        return parsedExt.toLowerCase();
-    });
-    return allowedExtensions;
-};
-/**
- * @hidden
- */
-const validateFiles = (files, restrictionInfo) => {
-    const allowedExtensions = parseAllowedExtensions(restrictionInfo.allowedExtensions);
-    const maxFileSize = restrictionInfo.maxFileSize;
-    const minFileSize = restrictionInfo.minFileSize;
-    let i;
-    for (i = 0; i < files.length; i++) {
-        validateFileExtension(files[i], allowedExtensions);
-        validateFileSize(files[i], minFileSize, maxFileSize);
-    }
-};
+}
+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: [{
+            type: Directive,
+            args: [{
+                    selector: '[templateContext]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; }, propDecorators: { templateContext: [{
+                type: Input
+            }] } });
 
 /**
  * @hidden
  */
-class DropZoneBase {
-    constructor(element, renderer, hoverClass) {
-        this.element = element;
-        this.renderer = renderer;
-        this.hideIntervalElement = null;
-        this.hoverClass = hoverClass;
+class FileListSingleItemComponent extends FileListItemBase {
+    constructor(localization, uploadService) {
+        super(uploadService);
+        this.localization = localization;
+        this.subscribeUploadProgress((args) => {
+            if (args.files[0].uid === this.file.uid) {
+                this.progressComplete = args.percentComplete;
+            }
+        });
     }
-    /**
-     * @hidden
-     */
-    onElementDragEnterListener() {
-        this.addClass(this.hoverClass);
-        this.lastDragElement = new Date();
-        if (!this.hideIntervalElement) {
-            this.hideIntervalElement = setInterval(() => {
-                if (this.calculateTimeDiff(this.lastDragElement) < 100) {
-                    return;
-                }
-                this.removeClass(this.hoverClass);
-                clearInterval(this.hideIntervalElement);
-                this.hideIntervalElement = null;
-            }, 100);
+    get fileStatusText() {
+        const errors = this.file.validationErrors;
+        if (this.file.state === FileState.Uploaded) {
+            return `${this.textFor('fileStatusUploaded')}`;
         }
-        return false;
-    }
-    /**
-     * @hidden
-     */
-    onElementDragOverListener() {
-        this.lastDragElement = new Date();
-        return false;
+        if (this.file.state === FileState.Failed) {
+            return `${this.textFor('fileStatusFailed')}`;
+        }
+        if (!isPresent(errors)) {
+            return this.getTotalFilesSizeMessage([this.file]);
+        }
+        return this.getFileValidationMessage(this.file);
     }
-    calculateTimeDiff(prevEvent) {
-        return new Date().getTime() - prevEvent.getTime();
+    get showProgress() {
+        const showProgress = this.file.state === FileState.Uploading || this.file.state === FileState.Paused;
+        return showProgress ? 'active' : 'inactive';
     }
-    addClass(className) {
-        this.renderer.addClass(this.element.nativeElement, className);
+    get fileGroupClass() {
+        return getFileGroupCssClass(this.file.extension ? this.file.extension : '');
     }
-    removeClass(className) {
-        this.renderer.removeClass(this.element.nativeElement, className);
+    get isUploadSuccessful() {
+        return this.file.state === FileState.Uploaded;
     }
-}
-__decorate([
-    HostListener('dragenter'),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", []),
-    __metadata("design:returntype", Boolean)
-], DropZoneBase.prototype, "onElementDragEnterListener", null);
-__decorate([
-    HostListener('dragover'),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", []),
-    __metadata("design:returntype", Boolean)
-], DropZoneBase.prototype, "onElementDragOverListener", null);
-
-/**
- * @hidden
- */
-let DropZoneInternalDirective = class DropZoneInternalDirective extends DropZoneBase {
-    constructor(element, renderer, ngZone, uploadService) {
-        super(element, renderer, 'k-dropzone-hover');
-        this.ngZone = ngZone;
-        this.uploadService = uploadService;
-        this.initialClassName = true;
-        this.hideIntervalDocument = null;
-        this.activeClass = 'k-dropzone-active';
-        this.ngZone.runOutsideAngular(() => {
-            this.unsubscribeDocumentDragEnter = this.renderer.listen('document', 'dragenter', () => this.onDocumentDragEnter());
-            this.unsubscribeDocumentDragOver = this.renderer.listen('document', 'dragover', () => this.onDocumentDragOver());
-        });
+    get isUploadFailed() {
+        return this.file.state === FileState.Failed;
     }
-    ngOnDestroy() {
-        this.ngZone.runOutsideAngular(() => {
-            if (this.unsubscribeDocumentDragEnter) {
-                this.unsubscribeDocumentDragEnter();
-            }
-            if (this.unsubscribeDocumentDragOver) {
-                this.unsubscribeDocumentDragOver();
-            }
-        });
+    get isNotYetUploaded() {
+        return !this.isUploadFailed && !this.isUploadSuccessful;
     }
-    onDocumentDragEnter() {
-        this.addClass(this.activeClass);
-        this.lastDragDocument = new Date();
-        if (!this.hideIntervalDocument) {
-            this.hideIntervalDocument = setInterval(() => {
-                if (this.calculateTimeDiff(this.lastDragDocument) < 100) {
-                    return;
-                }
-                this.removeClass(this.activeClass);
-                clearInterval(this.hideIntervalDocument);
-                this.hideIntervalDocument = null;
-            }, 100);
-        }
-        return false;
-    }
-    /**
-     * @hidden
-     */
-    onDocumentDragOver() {
-        this.lastDragDocument = new Date();
-        return false;
-    }
-    onDropListener(event) {
-        let droppedFiles = event.dataTransfer.files;
-        if (droppedFiles.length > 0 && !this.disabled) {
-            let files = getAllFileInfo(droppedFiles);
-            files = assignGuidToFiles(files, !this.uploadService.async.batch);
-            if (!this.multiple) {
-                files.splice(1, files.length - 1);
-                this.uploadService.clearFiles();
-            }
-            validateFiles(files, this.restrictions);
-            this.uploadService.addFiles(files);
-        }
-        return false;
-    }
-};
-__decorate([
-    Input(),
-    __metadata("design:type", Boolean)
-], DropZoneInternalDirective.prototype, "disabled", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Boolean)
-], DropZoneInternalDirective.prototype, "multiple", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], DropZoneInternalDirective.prototype, "restrictions", void 0);
-__decorate([
-    HostBinding('class.k-dropzone'),
-    __metadata("design:type", Boolean)
-], DropZoneInternalDirective.prototype, "initialClassName", void 0);
-__decorate([
-    HostListener('drop', ['$event']),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Object]),
-    __metadata("design:returntype", Boolean)
-], DropZoneInternalDirective.prototype, "onDropListener", null);
-DropZoneInternalDirective = __decorate([
-    Directive({
-        selector: `
-      [kendoUploadInternalDropZone],
-      [kendoFileSelectInternalDropZone]
+}
+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
+                }"
+          >{{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: [
+        trigger('progressState', [
+            state('active', style({ opacity: 1 })),
+            state('inactive', style({ opacity: 0 })),
+            transition('void => active', style({ opacity: 0 })),
+            transition('inactive => active', style({ opacity: 1 })),
+            transition('active => inactive', animate('1s 2s ease-out'))
+        ])
+    ] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FileListSingleItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    animations: [
+                        trigger('progressState', [
+                            state('active', style({ opacity: 1 })),
+                            state('inactive', style({ opacity: 0 })),
+                            transition('void => active', style({ opacity: 0 })),
+                            transition('inactive => active', style({ opacity: 1 })),
+                            transition('active => inactive', animate('1s 2s ease-out'))
+                        ])
+                    ],
+                    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
+                }"
+          >{{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>
     `
-    }),
-    __metadata("design:paramtypes", [ElementRef,
-        Renderer2,
-        NgZone,
-        UploadService])
-], DropZoneInternalDirective);
+                }]
+        }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }, { type: UploadService }]; }, propDecorators: { disabled: [{
+                type: Input
+            }], file: [{
+                type: Input
+            }], fileInfoTemplate: [{
+                type: Input
+            }] } });
 
 /**
  * @hidden
  */
-let FileListItemDirective = class FileListItemDirective {
-    constructor(el, navigationService, uploadService) {
-        this.navigationService = navigationService;
-        this.uploadService = uploadService;
-        this.fileClass = true;
-        this.focused = false;
-        this.element = el;
-    }
-    focus() {
-        this.element.nativeElement.focus();
-    }
-    get uidAttribute() {
-        return this.files[0].uid;
-    }
-    get tabIndex() {
-        return "-1";
-    }
-    get kFileError() {
-        return this.files[0].state === FileState.Failed;
+class FileListMultipleItemsComponent extends FileListItemBase {
+    constructor(localization, uploadService) {
+        super(uploadService);
+        this.localization = localization;
+        this.subscribeUploadProgress((args) => {
+            if (args.files[0].uid === this.files[0].uid) {
+                this.progressComplete = args.percentComplete;
+            }
+        });
     }
-    get kFileInvalid() {
-        return filesHaveValidationErrors(this.files);
+    get showProgress() {
+        const showProgress = this.files[0].state === FileState.Uploading || this.files[0].state === FileState.Paused;
+        return showProgress ? 'active' : 'inactive';
     }
-    get kFileProgress() {
-        return this.files[0].state === FileState.Uploading ||
-            this.files[0].state === FileState.Paused;
+    ngOnInit() {
+        this.filesHaveErrors = super.filesHaveValidationErrors(this.files);
     }
-    get kFileSuccess() {
-        if (this.uploadService.component === 'Upload') {
-            return this.files[0].state === FileState.Uploaded ||
-                this.files[0].state === FileState.Initial;
+    fileStatusText(file) {
+        const errors = file.validationErrors;
+        if (!isPresent(errors)) {
+            return this.getTotalFilesSizeMessage([file]);
         }
-        return false;
-    }
-    get kStateFocused() {
-        return this.focused;
+        return this.getFileValidationMessage(file);
     }
-    onFocus() {
-        this.focused = true;
+    get batchStatusText() {
+        const state = this.files[0].state;
+        const fileCount = this.files.length;
+        if (state === FileState.Uploaded) {
+            return `${fileCount} ${this.textFor('filesBatchStatusUploaded')}`;
+        }
+        if (state === FileState.Failed) {
+            return `${fileCount} ${this.textFor('filesBatchStatusFailed')}`;
+        }
+        return `${fileCount} ${this.textFor('filesBatchStatus')}`;
     }
-    onBlur() {
-        this.focused = false;
+    get isUploadSuccessful() {
+        return this.files[0].state === FileState.Uploaded;
     }
-    onClick(event) {
-        if (!isFocusable(event.target) && !hasClasses(event.target, IGNORE_TARGET_CLASSES)) {
-            this.navigationService.focusedIndex = this.index;
-        }
+    get isUploadFailed() {
+        return this.files[0].state === FileState.Failed;
     }
-};
-__decorate([
-    Input(),
-    __metadata("design:type", Array)
-], FileListItemDirective.prototype, "files", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Number)
-], FileListItemDirective.prototype, "index", void 0);
-__decorate([
-    HostBinding('class.k-file'),
-    __metadata("design:type", Boolean)
-], FileListItemDirective.prototype, "fileClass", void 0);
-__decorate([
-    HostBinding('attr.data-uid'),
-    __metadata("design:type", String),
-    __metadata("design:paramtypes", [])
-], FileListItemDirective.prototype, "uidAttribute", null);
-__decorate([
-    HostBinding('attr.tabIndex'),
-    __metadata("design:type", String),
-    __metadata("design:paramtypes", [])
-], FileListItemDirective.prototype, "tabIndex", null);
-__decorate([
-    HostBinding('class.k-file-error'),
-    __metadata("design:type", Boolean),
-    __metadata("design:paramtypes", [])
-], FileListItemDirective.prototype, "kFileError", null);
-__decorate([
-    HostBinding('class.k-file-invalid'),
-    __metadata("design:type", Boolean),
-    __metadata("design:paramtypes", [])
-], FileListItemDirective.prototype, "kFileInvalid", null);
-__decorate([
-    HostBinding('class.k-file-progress'),
-    __metadata("design:type", Boolean),
-    __metadata("design:paramtypes", [])
-], FileListItemDirective.prototype, "kFileProgress", null);
-__decorate([
-    HostBinding('class.k-file-success'),
-    __metadata("design:type", Boolean),
-    __metadata("design:paramtypes", [])
-], FileListItemDirective.prototype, "kFileSuccess", null);
-__decorate([
-    HostBinding('class.k-state-focused'),
-    __metadata("design:type", Boolean),
-    __metadata("design:paramtypes", [])
-], FileListItemDirective.prototype, "kStateFocused", null);
-__decorate([
-    HostListener("focus"),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", []),
-    __metadata("design:returntype", void 0)
-], FileListItemDirective.prototype, "onFocus", null);
-__decorate([
-    HostListener("blur"),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", []),
-    __metadata("design:returntype", void 0)
-], FileListItemDirective.prototype, "onBlur", null);
-__decorate([
-    HostListener('click', ['$event']),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Object]),
-    __metadata("design:returntype", void 0)
-], FileListItemDirective.prototype, "onClick", null);
-FileListItemDirective = __decorate([
-    Directive({
-        selector: '[kendoUploadFileListItem]'
-    }),
-    __metadata("design:paramtypes", [ElementRef,
-        NavigationService,
-        UploadService])
-], FileListItemDirective);
+}
+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,
+                    '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: [
+        trigger('progressState', [
+            state('active', style({ opacity: 1 })),
+            state('inactive', style({ opacity: 0 })),
+            transition('void => active', style({ opacity: 0 })),
+            transition('inactive => active', style({ opacity: 1 })),
+            transition('active => inactive', animate('1s 2s ease-out'))
+        ])
+    ] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FileListMultipleItemsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    animations: [
+                        trigger('progressState', [
+                            state('active', style({ opacity: 1 })),
+                            state('inactive', style({ opacity: 0 })),
+                            transition('void => active', style({ opacity: 0 })),
+                            transition('inactive => active', style({ opacity: 1 })),
+                            transition('active => inactive', animate('1s 2s ease-out'))
+                        ])
+                    ],
+                    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,
+                    '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>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }, { type: UploadService }]; }, propDecorators: { disabled: [{
+                type: Input
+            }], files: [{
+                type: Input
+            }], fileInfoTemplate: [{
+                type: Input
+            }] } });
 
+/* eslint-disable @angular-eslint/component-selector */
 /**
  * @hidden
  */
-let FileListComponent = class FileListComponent {
+class FileListComponent {
     constructor(uploadService, navigation) {
         this.uploadService = uploadService;
         this.navigation = navigation;
@@ -2487,31 +2249,9 @@ let FileListComponent = class FileListComponent {
         this.focusSubscription.unsubscribe();
         this.actionSubscription.unsubscribe();
     }
-};
-__decorate([
-    Input(),
-    __metadata("design:type", Boolean)
-], FileListComponent.prototype, "disabled", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Array)
-], FileListComponent.prototype, "fileList", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", FileTemplateDirective)
-], FileListComponent.prototype, "fileTemplate", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", FileInfoTemplateDirective)
-], FileListComponent.prototype, "fileInfoTemplate", void 0);
-__decorate([
-    ViewChildren(FileListItemDirective),
-    __metadata("design:type", QueryList)
-], FileListComponent.prototype, "fileListItems", void 0);
-FileListComponent = __decorate([
-    Component({
-        selector: '[kendo-upload-file-list]',
-        template: `
+}
+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: `
     <ng-template ngFor
       [ngForOf]="fileList"
       let-files
@@ -2539,623 +2279,1176 @@ FileListComponent = __decorate([
               }"></ng-template>
       </li>
     </ng-template>
-    `
-    }),
-    __metadata("design:paramtypes", [UploadService,
-        NavigationService])
-], FileListComponent);
-
-/**
- * @hidden
- */
-let FileListItemActionButtonComponent = class FileListItemActionButtonComponent {
-    constructor(uploadService, localization, navigation) {
-        this.uploadService = uploadService;
-        this.localization = localization;
-        this.navigation = navigation;
-        this.actionFocused = false;
-        this.retryFocused = false;
-        this.pauseResumeFocused = false;
-    }
-    onFocus(type) {
-        if (type === 'action') {
-            this.actionFocused = true;
-        }
-        if (type === 'retry') {
-            this.retryFocused = true;
-        }
-        if (type === 'pauseResume') {
-            this.pauseResumeFocused = true;
-        }
+    `, 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: [{
+            type: Component,
+            args: [{
+                    selector: '[kendo-upload-file-list]',
+                    template: `
+    <ng-template ngFor
+      [ngForOf]="fileList"
+      let-files
+      let-index="index">
+      <li kendoUploadFileListItem [files]='files' [index]='index'>
+          <kendo-upload-file-list-single-item
+            class='k-file-single'
+            *ngIf='files.length === 1 && !fileTemplate'
+            [disabled]='disabled'
+            [file]='files[0]'
+            [fileInfoTemplate]="fileInfoTemplate">
+          </kendo-upload-file-list-single-item>
+          <kendo-upload-file-list-multiple-items
+            class='k-file-multiple'
+            *ngIf='files.length > 1 && !fileTemplate'
+            [disabled]='disabled'
+            [files]='files'
+            [fileInfoTemplate]="fileInfoTemplate">
+          </kendo-upload-file-list-multiple-items>
+          <ng-template *ngIf="fileTemplate"
+              [templateContext]="{
+                templateRef: fileTemplate.templateRef,
+                state: files[0].state,
+                $implicit: files
+              }"></ng-template>
+      </li>
+    </ng-template>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: UploadService }, { type: NavigationService }]; }, propDecorators: { disabled: [{
+                type: Input
+            }], fileList: [{
+                type: Input
+            }], fileTemplate: [{
+                type: Input
+            }], fileInfoTemplate: [{
+                type: Input
+            }], fileListItems: [{
+                type: ViewChildren,
+                args: [FileListItemDirective]
+            }] } });
+
+/**
+ * @hidden
+ */
+class Messages extends ComponentMessages {
+}
+Messages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "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: [{
+            type: Directive
+        }], propDecorators: { cancel: [{
+                type: Input
+            }], clearSelectedFiles: [{
+                type: Input
+            }], dropFilesHere: [{
+                type: Input
+            }], externalDropFilesHere: [{
+                type: Input
+            }], filesBatchStatus: [{
+                type: Input
+            }], filesBatchStatusFailed: [{
+                type: Input
+            }], filesBatchStatusUploaded: [{
+                type: Input
+            }], fileStatusFailed: [{
+                type: Input
+            }], fileStatusUploaded: [{
+                type: Input
+            }], headerStatusPaused: [{
+                type: Input
+            }], headerStatusUploaded: [{
+                type: Input
+            }], headerStatusUploading: [{
+                type: Input
+            }], invalidFileExtension: [{
+                type: Input
+            }], invalidMaxFileSize: [{
+                type: Input
+            }], invalidMinFileSize: [{
+                type: Input
+            }], pause: [{
+                type: Input
+            }], remove: [{
+                type: Input
+            }], resume: [{
+                type: Input
+            }], retry: [{
+                type: Input
+            }], select: [{
+                type: Input
+            }], uploadSelectedFiles: [{
+                type: Input
+            }] } });
+
+/**
+ * @hidden
+ */
+class LocalizedMessagesDirective extends Messages {
+    constructor(service) {
+        super();
+        this.service = service;
     }
-    onBlur(type) {
-        if (type === 'retry') {
-            this.retryFocused = false;
-        }
-        if (type === 'action') {
-            this.actionFocused = false;
-        }
-        if (type === 'pauseResume') {
-            this.pauseResumeFocused = false;
+}
+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: [
+        {
+            provide: Messages,
+            useExisting: forwardRef(() => LocalizedMessagesDirective)
+        }
+    ], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LocalizedMessagesDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    providers: [
+                        {
+                            provide: Messages,
+                            useExisting: forwardRef(() => LocalizedMessagesDirective)
+                        }
+                    ],
+                    selector: `
+    [kendoUploadLocalizedMessages],
+    [kendoFileSelectLocalizedMessages],
+    [kendoUploadDropZoneLocalizedMessages]
+  `
+                }]
+        }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }]; } });
+
+/**
+ * @hidden
+ */
+const INVALIDMAXFILESIZE = "invalidMaxFileSize";
+/**
+ * @hidden
+ */
+const INVALIDMINFILESIZE = "invalidMinFileSize";
+/**
+ * @hidden
+ */
+const INVALIDFILEEXTENSION = "invalidFileExtension";
+const validateFileExtension = (file, allowedExtensions) => {
+    if (allowedExtensions.length > 0) {
+        if (allowedExtensions.indexOf(file.extension.toLowerCase()) < 0) {
+            file.validationErrors = file.validationErrors || [];
+            if (file.validationErrors.indexOf(INVALIDFILEEXTENSION) < 0) {
+                file.validationErrors.push(INVALIDFILEEXTENSION);
+            }
         }
     }
-    onRetryClick() {
-        if (this.disabled) {
-            return;
+};
+const validateFileSize = (file, minFileSize, maxFileSize) => {
+    if (minFileSize !== 0 && file.size < minFileSize) {
+        file.validationErrors = file.validationErrors || [];
+        if (file.validationErrors.indexOf(INVALIDMINFILESIZE) < 0) {
+            file.validationErrors.push(INVALIDMINFILESIZE);
         }
-        this.uploadService.retryFiles(this.file.uid);
     }
-    onRemoveCancelClick(event) {
-        if (this.disabled) {
-            return;
-        }
-        event.stopImmediatePropagation();
-        const uid = this.file.uid;
-        if (this.file.state === FileState.Uploading) {
-            this.uploadService.cancelFiles(uid);
-        }
-        else {
-            this.uploadService.removeFiles(uid);
+    if (maxFileSize !== 0 && file.size > maxFileSize) {
+        file.validationErrors = file.validationErrors || [];
+        if (file.validationErrors.indexOf(INVALIDMAXFILESIZE) < 0) {
+            file.validationErrors.push(INVALIDMAXFILESIZE);
         }
-        this.navigation.focusSelectButton();
     }
-    onPauseResumeClick() {
-        if (this.disabled) {
-            return;
-        }
-        const uid = this.file.uid;
-        if (this.file.state === FileState.Paused) {
-            this.uploadService.resumeFile(uid);
-        }
-        else {
-            this.uploadService.pauseFile(uid);
-        }
+};
+const parseAllowedExtensions = (extensions) => {
+    const allowedExtensions = extensions.map((ext) => {
+        var parsedExt = (ext.substring(0, 1) === ".") ? ext : ("." + ext);
+        return parsedExt.toLowerCase();
+    });
+    return allowedExtensions;
+};
+/**
+ * @hidden
+ */
+const validateFiles = (files, restrictionInfo) => {
+    const allowedExtensions = parseAllowedExtensions(restrictionInfo.allowedExtensions);
+    const maxFileSize = restrictionInfo.maxFileSize;
+    const minFileSize = restrictionInfo.minFileSize;
+    let i;
+    for (i = 0; i < files.length; i++) {
+        validateFileExtension(files[i], allowedExtensions);
+        validateFileSize(files[i], minFileSize, maxFileSize);
     }
-    get actionButtonTitle() {
-        if (this.file.state === FileState.Uploading) {
-            return this.localization.get('cancel');
+};
+
+/**
+ * @hidden
+ */
+class DropZoneBase {
+    constructor(element, renderer, cssClass) {
+        this.element = element;
+        this.renderer = renderer;
+        this.hideIntervalElement = null;
+        this.hoverClass = cssClass;
+    }
+    /**
+     * @hidden
+     */
+    onElementDragEnterListener() {
+        this.addClass(this.hoverClass);
+        this.lastDragElement = new Date();
+        if (!this.hideIntervalElement) {
+            this.hideIntervalElement = setInterval(() => {
+                if (this.calculateTimeDiff(this.lastDragElement) < 100) {
+                    return;
+                }
+                this.removeClass(this.hoverClass);
+                clearInterval(this.hideIntervalElement);
+                this.hideIntervalElement = null;
+            }, 100);
         }
-        return this.localization.get('remove');
+        return false;
     }
-    get retryButtonTitle() {
-        return this.localization.get('retry');
+    /**
+     * @hidden
+     */
+    onElementDragOverListener() {
+        this.lastDragElement = new Date();
+        return false;
     }
-    get pauseResumeButtonTitle() {
-        if (this.file.state === FileState.Uploading) {
-            return this.localization.get('pause');
-        }
-        return this.localization.get('resume');
+    calculateTimeDiff(prevEvent) {
+        return new Date().getTime() - prevEvent.getTime();
     }
-    get isUploading() {
-        return this.file.state === FileState.Uploading;
+    addClass(className) {
+        this.renderer.addClass(this.element.nativeElement, className);
     }
-    get isFailed() {
-        return this.file.state === FileState.Failed;
+    removeClass(className) {
+        this.renderer.removeClass(this.element.nativeElement, className);
     }
-    get isPaused() {
-        return this.file.state === FileState.Paused;
+}
+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: [{
+            type: Directive
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['hoverClass']
+                }] }]; }, propDecorators: { onElementDragEnterListener: [{
+                type: HostListener,
+                args: ['dragenter']
+            }], onElementDragOverListener: [{
+                type: HostListener,
+                args: ['dragover']
+            }] } });
+
+/**
+ * @hidden
+ */
+class DropZoneInternalDirective extends DropZoneBase {
+    constructor(element, renderer, ngZone, uploadService) {
+        super(element, renderer, 'k-dropzone-hover');
+        this.ngZone = ngZone;
+        this.uploadService = uploadService;
+        this.initialClassName = true;
+        this.hideIntervalDocument = null;
+        this.activeClass = 'k-dropzone-active';
+        this.ngZone.runOutsideAngular(() => {
+            this.unsubscribeDocumentDragEnter = this.renderer.listen('document', 'dragenter', () => this.onDocumentDragEnter());
+            this.unsubscribeDocumentDragOver = this.renderer.listen('document', 'dragover', () => this.onDocumentDragOver());
+        });
     }
-    get isResumable() {
-        const service = this.uploadService;
-        const isResumable = service.async.chunk && service.chunk.resumable;
-        const isUploading = (this.file.state === FileState.Paused) || (this.file.state === FileState.Uploading);
-        return isResumable && isUploading;
+    ngOnDestroy() {
+        this.ngZone.runOutsideAngular(() => {
+            if (this.unsubscribeDocumentDragEnter) {
+                this.unsubscribeDocumentDragEnter();
+            }
+            if (this.unsubscribeDocumentDragOver) {
+                this.unsubscribeDocumentDragOver();
+            }
+        });
     }
-    get isActionButtonVisible() {
-        if ((this.file.state === FileState.Uploaded || this.file.state === FileState.Initial) &&
-            !this.uploadService.async.removeUrl && this.uploadService.component === 'Upload') {
-            return false;
+    onDocumentDragEnter() {
+        this.addClass(this.activeClass);
+        this.lastDragDocument = new Date();
+        if (!this.hideIntervalDocument) {
+            this.hideIntervalDocument = setInterval(() => {
+                if (this.calculateTimeDiff(this.lastDragDocument) < 100) {
+                    return;
+                }
+                this.removeClass(this.activeClass);
+                clearInterval(this.hideIntervalDocument);
+                this.hideIntervalDocument = null;
+            }, 100);
         }
-        return true;
+        return false;
     }
-};
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], FileListItemActionButtonComponent.prototype, "file", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Boolean)
-], FileListItemActionButtonComponent.prototype, "disabled", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Number)
-], FileListItemActionButtonComponent.prototype, "progress", void 0);
-FileListItemActionButtonComponent = __decorate([
-    Component({
-        selector: 'kendo-upload-file-list-item-action-button',
-        template: `
-      <strong class="k-upload-status">
-        <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>
-
-        <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>
-
-        <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>
-      </strong>
+    /**
+     * @hidden
+     */
+    onDocumentDragOver() {
+        this.lastDragDocument = new Date();
+        return false;
+    }
+    onDropListener(event) {
+        let droppedFiles = event.dataTransfer.files;
+        if (droppedFiles.length > 0 && !this.disabled) {
+            let files = getAllFileInfo(droppedFiles);
+            files = assignGuidToFiles(files, !this.uploadService.async.batch);
+            if (!this.multiple) {
+                files.splice(1, files.length - 1);
+                this.uploadService.clearFiles();
+            }
+            validateFiles(files, this.restrictions);
+            this.uploadService.addFiles(files);
+        }
+        return false;
+    }
+}
+DropZoneInternalDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "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: [{
+            type: Directive,
+            args: [{
+                    selector: `
+      [kendoUploadInternalDropZone],
+      [kendoFileSelectInternalDropZone]
     `
-    }),
-    __metadata("design:paramtypes", [UploadService,
-        LocalizationService,
-        NavigationService])
-], FileListItemActionButtonComponent);
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: UploadService }]; }, propDecorators: { disabled: [{
+                type: Input
+            }], multiple: [{
+                type: Input
+            }], restrictions: [{
+                type: Input
+            }], initialClassName: [{
+                type: HostBinding,
+                args: ['class.k-dropzone']
+            }], onDropListener: [{
+                type: HostListener,
+                args: ['drop', ['$event']]
+            }] } });
 
 /**
  * @hidden
  */
-class FileListItemBase {
-    constructor(uploadService) {
+class FileSelectDirective {
+    constructor(uploadService, navigation, el) {
         this.uploadService = uploadService;
-        this.progressComplete = 0;
+        this.navigation = navigation;
+        this.type = "file";
+        this.autocomplete = "off";
+        this.tabIndex = -1;
+        this.element = el;
     }
-    subscribeUploadProgress(uploadProgressHandler) {
-        this.uploadProgressSubscription = this.uploadService.uploadProgressEvent.subscribe(uploadProgressHandler);
+    get nameAttribute() {
+        return this.uploadService.async.saveField;
     }
-    fileHasValidationErrors(file) {
-        return fileHasValidationErrors(file);
+    get multipleAttribute() {
+        return this.multiple ? "multiple" : null;
     }
-    filesHaveValidationErrors(files) {
-        return filesHaveValidationErrors(files);
+    get dirAttribute() {
+        return this.dir;
     }
-    ngOnDestroy() {
-        this.uploadProgressSubscription.unsubscribe();
+    get disabledAttribute() {
+        return this.disabled ? "true" : null;
     }
-    getFileValidationMessage(file) {
-        let validationMessage;
-        if (file.validationErrors && file.validationErrors.length > 0) {
-            validationMessage = this.localization.get(file.validationErrors[0]);
+    onInputChange(event) {
+        const ua = navigator.userAgent;
+        const webkit = /(webkit)[ \/]([\w.]+)/i;
+        const ie = /(windows)[ \/]([\w.]+)/i;
+        let selectedFiles = inputFiles(event.target);
+        selectedFiles = assignGuidToFiles(selectedFiles, !this.uploadService.async.batch);
+        validateFiles(selectedFiles, this.restrictions);
+        if (!this.multiple) {
+            this.uploadService.clearFiles();
         }
-        return validationMessage;
-    }
-    getTotalFilesSizeMessage(files) {
-        return getTotalFilesSizeMessage(files);
-    }
-    textFor(key) {
-        return this.localization.get(key);
+        this.uploadService.addFiles(selectedFiles);
+        /*
+        Chrome, IE, Edge and Safari do not trigger a `change` event
+        when a file with the same name is selected a number of consecutive times.
+        As a workaround, clear the input value after handling the file.
+        */
+        const native = this.element.nativeElement;
+        if (ua.match(webkit) || ua.match(ie)) {
+            native.type = "";
+            native.type = "file";
+        }
+        setTimeout(() => {
+            this.navigation.focusedIndex = -1;
+        });
     }
 }
+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: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoFileSelect]'
+                }]
+        }], ctorParameters: function () { return [{ type: UploadService }, { type: NavigationService }, { type: i0.ElementRef }]; }, propDecorators: { dir: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], multiple: [{
+                type: Input
+            }], restrictions: [{
+                type: Input
+            }], type: [{
+                type: HostBinding,
+                args: ["attr.type"]
+            }], autocomplete: [{
+                type: HostBinding,
+                args: ["attr.autocomplete"]
+            }], tabIndex: [{
+                type: HostBinding,
+                args: ["attr.tabindex"]
+            }], nameAttribute: [{
+                type: HostBinding,
+                args: ["attr.name"]
+            }], multipleAttribute: [{
+                type: HostBinding,
+                args: ["attr.multiple"]
+            }], dirAttribute: [{
+                type: HostBinding,
+                args: ["attr.dir"]
+            }], disabledAttribute: [{
+                type: HostBinding,
+                args: ["attr.disabled"]
+            }], onInputChange: [{
+                type: HostListener,
+                args: ["change", ["$event"]]
+            }] } });
 
 /**
  * @hidden
  */
-let FileListMultipleItemsComponent = class FileListMultipleItemsComponent extends FileListItemBase {
-    constructor(localization, uploadService) {
-        super(uploadService);
+const FILESELECT_VALUE_ACCESSOR = {
+    multi: true,
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => FileSelectComponent)
+};
+class FileSelectComponent {
+    constructor(uploadService, localization, navigation, dropZoneService, ngZone, renderer, cdr, wrapper) {
+        this.uploadService = uploadService;
         this.localization = localization;
-        this.subscribeUploadProgress((args) => {
-            if (args.files[0].uid === this.files[0].uid) {
-                this.progressComplete = args.percentComplete;
-            }
+        this.navigation = navigation;
+        this.dropZoneService = dropZoneService;
+        this.ngZone = ngZone;
+        this.renderer = renderer;
+        this.cdr = cdr;
+        /**
+         * Disables the FileSelect.
+         * The default value is `false`.
+         */
+        this.disabled = false;
+        /**
+         * Enables the selection of multiple files
+         * ([see example]({% slug fileprocessing_upload %}#toc-upload-of-sinlge-or-multiple-files)).
+         * If set to `false`, only one file can be selected at a time.
+         */
+        this.multiple = true;
+        /**
+         * Toggles the visibility of the file list.
+         */
+        this.showFileList = true;
+        /**
+         * Specifies the [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the FileSelect.
+         */
+        this.tabindex = 0;
+        /**
+         * @hidden
+         */
+        this.focusableId = `k-${guid()}`;
+        /**
+         * Fires when the user navigates outside the component.
+         */
+        this.onBlur = new EventEmitter();
+        /**
+         * Fires when the component is focused.
+         */
+        this.onFocus = new EventEmitter();
+        /**
+         * Fires when files are selected. If prevented, the selected files will not be added to the list.
+         */
+        this.select = new EventEmitter();
+        /**
+         * Fires when a file is about to be removed. If prevented, the file will remain in the list.
+         */
+        this.remove = new EventEmitter();
+        /**
+         * Fires when the value of the component has changed as a result of a successful `select` or `remove` operation.
+         */
+        this.valueChange = new EventEmitter();
+        this.hostDefaultClasses = true;
+        /**
+         * @hidden
+         */
+        this._restrictions = {
+            allowedExtensions: [],
+            maxFileSize: 0,
+            minFileSize: 0
+        };
+        this.onTouchedCallback = (_) => { };
+        this.onChangeCallback = (_) => { };
+        validatePackage(packageMetadata);
+        this.wrapper = wrapper.nativeElement;
+        this.direction = localization.rtl ? 'rtl' : 'ltr';
+        this.navigation.computeKeys(this.direction);
+        this.fileList = this.uploadService.files;
+        this.localizationChangeSubscription = localization.changes.subscribe(({ rtl }) => {
+            this.direction = rtl ? 'rtl' : 'ltr';
+            this.navigation.computeKeys(this.direction);
         });
+        this.subscribeBlur();
+        this.subscribeFocus();
+        this.attachEventHandlers();
+        this.setDefaultSettings();
     }
-    get showProgress() {
-        const showProgress = this.files[0].state === FileState.Uploading || this.files[0].state === FileState.Paused;
-        return showProgress ? 'active' : 'inactive';
+    /**
+     * Sets the `name` attribute of the `input` element of the FileSelect.
+     */
+    set name(name) {
+        this.uploadService.async.saveField = name;
     }
-    ngOnInit() {
-        this.filesHaveErrors = super.filesHaveValidationErrors(this.files);
+    get name() {
+        return this.uploadService.async.saveField;
     }
-    fileStatusText(file) {
-        const errors = file.validationErrors;
-        if (!isPresent(errors)) {
-            return this.getTotalFilesSizeMessage([file]);
-        }
-        return this.getFileValidationMessage(file);
+    /**
+     * Sets the restrictions for selected files.
+     */
+    set restrictions(restrictions) {
+        let parsedRestrictions = Object.assign({}, this._restrictions, restrictions);
+        this._restrictions = parsedRestrictions;
     }
-    get batchStatusText() {
-        const state$$1 = this.files[0].state;
-        const fileCount = this.files.length;
-        if (state$$1 === FileState.Uploaded) {
-            return `${fileCount} ${this.textFor('filesBatchStatusUploaded')}`;
-        }
-        if (state$$1 === FileState.Failed) {
-            return `${fileCount} ${this.textFor('filesBatchStatusFailed')}`;
-        }
-        return `${fileCount} ${this.textFor('filesBatchStatus')}`;
+    get restrictions() {
+        return this._restrictions;
     }
-    get isUploadSuccessful() {
-        return this.files[0].state === FileState.Uploaded;
+    get hostDisabledClass() {
+        return this.disabled;
     }
-    get isUploadFailed() {
-        return this.files[0].state === FileState.Failed;
+    get dir() {
+        return this.direction;
     }
-};
-__decorate([
-    Input(),
-    __metadata("design:type", Boolean)
-], FileListMultipleItemsComponent.prototype, "disabled", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Array)
-], FileListMultipleItemsComponent.prototype, "files", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", FileInfoTemplateDirective)
-], FileListMultipleItemsComponent.prototype, "fileInfoTemplate", void 0);
-FileListMultipleItemsComponent = __decorate([
-    Component({
-        animations: [
-            trigger('progressState', [
-                state('active', style({ opacity: 1 })),
-                state('inactive', style({ opacity: 0 })),
-                transition('void => active', style({ opacity: 0 })),
-                transition('inactive => active', style({ opacity: 1 })),
-                transition('active => inactive', animate('1s 2s ease-out'))
-            ])
-        ],
-        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,
-                    '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>
+    ngOnInit() {
+        this.renderer.removeAttribute(this.wrapper, "tabindex");
+        if (this.zoneId) {
+            this.dropZoneService.addComponent(this, this.zoneId);
+        }
+    }
+    /**
+     * @hidden
+     */
+    textFor(key) {
+        return this.localization.get(key);
+    }
+    /**
+     * Focuses the underlying input element.
+     */
+    focus() {
+        setTimeout(() => {
+            this.fileSelectButton.nativeElement.focus();
+        });
+    }
+    ngOnDestroy() {
+        this.fileList.clear();
+        if (this.blurSubscription) {
+            this.blurSubscription.unsubscribe();
+        }
+        if (this.wrapperFocusSubscription) {
+            this.wrapperFocusSubscription.unsubscribe();
+        }
+        if (this.selectButtonFocusSubscription) {
+            this.selectButtonFocusSubscription.unsubscribe();
+        }
+        if (this.localizationChangeSubscription) {
+            this.localizationChangeSubscription.unsubscribe();
+        }
+        if (this.subs) {
+            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
+     */
+    writeValue(newValue) {
+        let isValid = true;
+        if (newValue instanceof Array) {
+            newValue.forEach((file) => {
+                if (!validateInitialFileSelectFile(file)) {
+                    isValid = false;
+                }
+            });
+            if (isValid) {
+                this.uploadService.addInitialFileSelectFiles(newValue);
+            }
+        }
+        if (newValue === null) {
+            this.fileList.clear();
+        }
+        this.cdr.markForCheck();
+    }
+    /**
+     * @hidden
+     */
+    registerOnChange(fn) {
+        this.onChangeCallback = fn;
+    }
+    /**
+     * @hidden
+     */
+    registerOnTouched(fn) {
+        this.onTouchedCallback = fn;
+    }
+    /**
+     * @hidden
+     */
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    /**
+     * Removes specific file from the file list.
+     */
+    removeFileByUid(uid) {
+        this.uploadService.removeFiles(uid);
+    }
+    /**
+     * Visually clears all files from the UI.
+     */
+    clearFiles() {
+        this.uploadService.clearFiles();
+    }
+    /**
+     * @hidden
+     * Used to determine if the component is empty.
+     */
+    isEmpty() {
+        return false;
+    }
+    /**
+     * @hidden
+     * Used by the external dropzone to add files to the FileSelect
+     */
+    addFiles(files) {
+        this.uploadService.addFiles(files);
+    }
+    /**
+     * @hidden
+     */
+    get selectButtonTabIndex() {
+        return this.disabled ? undefined : this.tabindex;
+    }
+    /**
+     * @hidden
+     */
+    onFileSelectButtonFocus(_event) {
+        this.renderer.addClass(this.fileSelectButton.nativeElement, 'k-focus');
+        if (!this.navigation.focused) {
+            this.navigation.focusedIndex = -1;
+        }
+    }
+    /**
+     * @hidden
+     */
+    onFileSelectButtonBlur(_event) {
+        this.renderer.removeClass(this.fileSelectButton.nativeElement, 'k-focus');
+    }
+    subscribeBlur() {
+        if (!isDocumentAvailable()) {
+            return;
+        }
+        this.ngZone.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.navigation.focused = false;
+                        this.onTouchedCallback();
+                        this.onBlur.emit();
+                    });
+                }
+            });
+        });
+    }
+    subscribeFocus() {
+        this.wrapperFocusSubscription = this.navigation.onWrapperFocus.subscribe(() => {
+            this.onFocus.emit();
+        });
+        this.selectButtonFocusSubscription = this.navigation.onSelectButtonFocus.subscribe(() => {
+            this.fileSelectButton.nativeElement.focus();
+        });
+    }
+    attachEventHandlers() {
+        this.subs = this.uploadService.changeEvent.subscribe((files) => {
+            let model = [];
+            if (files !== null) {
+                files.forEach((file) => {
+                    if (file.state === FileState.Initial) {
+                        model.push(file);
+                    }
+                    if (file.state === FileState.Selected && file.rawFile && !file.validationErrors) {
+                        model.push(file.rawFile);
+                    }
+                });
+            }
+            if (model.length === 0) {
+                model = null;
+            }
+            this.onChangeCallback(model);
+            this.valueChange.emit(model);
+        });
+        this.subs.add(this.uploadService.removeEvent.subscribe((args) => {
+            this.remove.emit(args);
+        }));
+        this.subs.add(this.uploadService.selectEvent.subscribe((args) => {
+            this.select.emit(args);
+        }));
+    }
+    setDefaultSettings() {
+        this.uploadService.async.autoUpload = false;
+        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: [
+        LocalizationService,
+        NavigationService,
+        UploadService,
+        DropZoneService,
+        FILESELECT_VALUE_ACCESSOR,
+        {
+            provide: L10N_PREFIX,
+            useValue: 'kendo.fileselect'
+        },
+        {
+            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: `
+        <ng-container kendoFileSelectLocalizedMessages
+            i18n-dropFilesHere="kendo.fileselect.dropFilesHere|The drop zone hint"
+            dropFilesHere="Drop files here to select"
+
+            i18n-invalidFileExtension="kendo.fileselect.invalidFileExtension|The text for the invalid allowed extensions restriction message"
+            invalidFileExtension="File type not allowed."
+
+            i18n-invalidMaxFileSize="kendo.fileselect.invalidMaxFileSize|The text for the invalid max file size restriction message"
+            invalidMaxFileSize="File size too large."
+
+            i18n-invalidMinFileSize="kendo.fileselect.invalidMinFileSize|The text for the invalid min file size restriction message"
+            invalidMinFileSize="File size too small."
+
+            i18n-remove="kendo.fileselect.remove|The text for the Remove button"
+            remove="Remove"
+
+            i18n-select="kendo.fileselect.select|The text for the Select button"
+            select="Select files..."
+        >
         </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>
+        <div kendoFileSelectInternalDropZone
+            [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"
+                    [dir]="direction"
+                    [restrictions]="restrictions"
+                    [multiple]="multiple"
+                    [disabled]="disabled" />
+                <span>{{textFor('select')}}</span>
+            </div>
+            <div class="k-dropzone-hint">{{textFor('dropFilesHere')}}</div>
+        </div>
+        <ul kendo-upload-file-list
+            class="k-upload-files k-reset"
+            *ngIf="showFileList && fileList.count > 0"
+            [disabled]="disabled"
+            [fileList]="fileList.files"
+            [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: [{
+            type: Component,
+            args: [{
+                    exportAs: 'kendoFileSelect',
+                    providers: [
+                        LocalizationService,
+                        NavigationService,
+                        UploadService,
+                        DropZoneService,
+                        FILESELECT_VALUE_ACCESSOR,
+                        {
+                            provide: L10N_PREFIX,
+                            useValue: 'kendo.fileselect'
+                        },
+                        {
+                            provide: KendoInput,
+                            useExisting: forwardRef(() => FileSelectComponent)
+                        }
+                    ],
+                    selector: 'kendo-fileselect',
+                    template: `
+        <ng-container kendoFileSelectLocalizedMessages
+            i18n-dropFilesHere="kendo.fileselect.dropFilesHere|The drop zone hint"
+            dropFilesHere="Drop files here to select"
+
+            i18n-invalidFileExtension="kendo.fileselect.invalidFileExtension|The text for the invalid allowed extensions restriction message"
+            invalidFileExtension="File type not allowed."
+
+            i18n-invalidMaxFileSize="kendo.fileselect.invalidMaxFileSize|The text for the invalid max file size restriction message"
+            invalidMaxFileSize="File size too large."
+
+            i18n-invalidMinFileSize="kendo.fileselect.invalidMinFileSize|The text for the invalid min file size restriction message"
+            invalidMinFileSize="File size too small."
+
+            i18n-remove="kendo.fileselect.remove|The text for the Remove button"
+            remove="Remove"
+
+            i18n-select="kendo.fileselect.select|The text for the Select button"
+            select="Select files..."
+        >
+        </ng-container>
+        <div kendoFileSelectInternalDropZone
+            [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"
+                    [dir]="direction"
+                    [restrictions]="restrictions"
+                    [multiple]="multiple"
+                    [disabled]="disabled" />
+                <span>{{textFor('select')}}</span>
+            </div>
+            <div class="k-dropzone-hint">{{textFor('dropFilesHere')}}</div>
+        </div>
+        <ul kendo-upload-file-list
+            class="k-upload-files k-reset"
+            *ngIf="showFileList && fileList.count > 0"
+            [disabled]="disabled"
+            [fileList]="fileList.files"
+            [fileTemplate]="fileTemplate"
+            [fileInfoTemplate]="fileInfoTemplate">
+        </ul>
     `
-    }),
-    __metadata("design:paramtypes", [LocalizationService,
-        UploadService])
-], FileListMultipleItemsComponent);
+                }]
+        }], ctorParameters: function () { return [{ type: UploadService }, { type: i1$1.LocalizationService }, { type: NavigationService }, { type: DropZoneService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }]; }, propDecorators: { accept: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], multiple: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], showFileList: [{
+                type: Input
+            }], tabindex: [{
+                type: Input
+            }], restrictions: [{
+                type: Input
+            }], zoneId: [{
+                type: Input
+            }], focusableId: [{
+                type: Input
+            }], fileTemplate: [{
+                type: ContentChild,
+                args: [FileTemplateDirective, { static: false }]
+            }], fileInfoTemplate: [{
+                type: ContentChild,
+                args: [FileInfoTemplateDirective, { static: false }]
+            }], fileSelect: [{
+                type: ViewChild,
+                args: ['fileSelect', { static: true }]
+            }], fileSelectButton: [{
+                type: ViewChild,
+                args: ['fileSelectButton', { static: true }]
+            }], onBlur: [{
+                type: Output,
+                args: ['blur']
+            }], onFocus: [{
+                type: Output,
+                args: ['focus']
+            }], select: [{
+                type: Output
+            }], remove: [{
+                type: Output
+            }], valueChange: [{
+                type: Output
+            }], hostDefaultClasses: [{
+                type: HostBinding,
+                args: ['class.k-widget']
+            }, {
+                type: HostBinding,
+                args: ['class.k-upload']
+            }], hostDisabledClass: [{
+                type: HostBinding,
+                args: ['class.k-disabled']
+            }], dir: [{
+                type: HostBinding,
+                args: ['attr.dir']
+            }], handleKeydown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }] } });
+
+/**
+ * Custom component messages override default component messages ([more information and example]({% slug globalization_upload %})).
+ *
+ * @example
+ * ```html-no-run
+ * <kendo-fileselect>
+ *     <kendo-fileselect-messages
+ *         dropFilesHere="Drop your file here"
+ *         select="Upload file">
+ *     </kendo-fileselect-messages>
+ * </kendo-fileselect>
+ * ```
+ */
+class CustomMessagesComponent extends Messages {
+    constructor(service) {
+        super();
+        this.service = service;
+    }
+    get override() {
+        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: [
+        {
+            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: [{
+            type: Component,
+            args: [{
+                    providers: [
+                        {
+                            provide: Messages,
+                            useExisting: forwardRef(() => CustomMessagesComponent)
+                        }
+                    ],
+                    selector: 'kendo-upload-messages, kendo-fileselect-messages, kendo-uploaddropzone-messages',
+                    template: ``
+                }]
+        }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }]; } });
 
 /**
  * @hidden
  */
-let FileListSingleItemComponent = class FileListSingleItemComponent extends FileListItemBase {
-    constructor(localization, uploadService) {
-        super(uploadService);
+class UploadStatusTotalComponent {
+    constructor(localization) {
         this.localization = localization;
-        this.subscribeUploadProgress((args) => {
-            if (args.files[0].uid === this.file.uid) {
-                this.progressComplete = args.percentComplete;
-            }
-        });
     }
-    get fileStatusText() {
-        const errors = this.file.validationErrors;
-        if (this.file.state === FileState.Uploaded) {
-            return `${this.textFor('fileStatusUploaded')}`;
-        }
-        if (this.file.state === FileState.Failed) {
-            return `${this.textFor('fileStatusFailed')}`;
+    ngDoCheck() {
+        this.isPaused = this.fileList.hasFileWithState([FileState.Paused]);
+        this.isFailed = this.fileList.hasFileWithState([FileState.Failed]);
+        this.isUploading = this.fileList.hasFileWithState([FileState.Uploading]);
+        if (this.isPaused && !this.isUploading) {
+            this.statusText = this.localization.get('headerStatusPaused');
         }
-        if (!isPresent(errors)) {
-            return this.getTotalFilesSizeMessage([this.file]);
+        else {
+            this.statusText = this.isUploading ? this.localization.get('headerStatusUploading')
+                : this.localization.get('headerStatusUploaded');
         }
-        return this.getFileValidationMessage(this.file);
-    }
-    get showProgress() {
-        const showProgress = this.file.state === FileState.Uploading || this.file.state === FileState.Paused;
-        return showProgress ? 'active' : 'inactive';
-    }
-    get fileGroupClass() {
-        return getFileGroupCssClass(this.file.extension ? this.file.extension : '');
-    }
-    get isUploadSuccessful() {
-        return this.file.state === FileState.Uploaded;
-    }
-    get isUploadFailed() {
-        return this.file.state === FileState.Failed;
     }
-    get isNotYetUploaded() {
-        return !this.isUploadFailed && !this.isUploadSuccessful;
-    }
-};
-__decorate([
-    Input(),
-    __metadata("design:type", Boolean)
-], FileListSingleItemComponent.prototype, "disabled", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], FileListSingleItemComponent.prototype, "file", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", FileInfoTemplateDirective)
-], FileListSingleItemComponent.prototype, "fileInfoTemplate", void 0);
-FileListSingleItemComponent = __decorate([
-    Component({
-        animations: [
-            trigger('progressState', [
-                state('active', style({ opacity: 1 })),
-                state('inactive', style({ opacity: 0 })),
-                transition('void => active', style({ opacity: 0 })),
-                transition('inactive => active', style({ opacity: 1 })),
-                transition('active => inactive', animate('1s 2s ease-out'))
-            ])
-        ],
-        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
-                }"
-          >{{fileStatusText}}</span>
-        </ng-container>
-        <ng-template *ngIf="fileInfoTemplate"
-            [templateContext]="{
-              templateRef: fileInfoTemplate.templateRef,
-              state: file.state,
-              $implicit: [file]
+}
+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
             }">
-        </ng-template>
-      </span>
-      <kendo-upload-file-list-item-action-button
-        [file]='file'
-        [disabled]='disabled'
-        [progress]='progressComplete'>
-      </kendo-upload-file-list-item-action-button>
+        </span>
+        {{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: [{
+            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>
+        {{statusText}}
     `
-    }),
-    __metadata("design:paramtypes", [LocalizationService, UploadService])
-], FileListSingleItemComponent);
+                }]
+        }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }]; }, propDecorators: { fileList: [{
+                type: Input
+            }] } });
 
 /**
  * @hidden
  */
-let FileSelectDirective = class FileSelectDirective {
-    constructor(uploadService, navigation, el) {
+class UploadActionButtonsComponent {
+    constructor(uploadService, localization, navigation) {
         this.uploadService = uploadService;
+        this.localization = localization;
         this.navigation = navigation;
-        this.type = "file";
-        this.autocomplete = "off";
-        this.tabIndex = -1;
-        this.element = el;
+        this.hostDefaultClass = true;
+        this.onAction();
+        this.onFocus();
     }
-    get nameAttribute() {
-        return this.uploadService.async.saveField;
+    get actionButtonsEndClassName() {
+        return this.actionsLayout === 'end';
     }
-    get multipleAttribute() {
-        return this.multiple ? "multiple" : null;
+    get actionButtonsStretchedClassName() {
+        return this.actionsLayout === 'stretched';
     }
-    get dirAttribute() {
-        return this.dir;
+    get actionButtonsStartClassName() {
+        return this.actionsLayout === 'start';
     }
-    get disabledAttribute() {
-        return this.disabled ? "true" : null;
+    get actionButtonsCenterClassName() {
+        return this.actionsLayout === 'center';
     }
-    onInputChange(event) {
-        const ua = navigator.userAgent;
-        const webkit = /(webkit)[ \/]([\w.]+)/i;
-        const ie = /(windows)[ \/]([\w.]+)/i;
-        let selectedFiles = inputFiles(event.target);
-        selectedFiles = assignGuidToFiles(selectedFiles, !this.uploadService.async.batch);
-        validateFiles(selectedFiles, this.restrictions);
-        if (!this.multiple) {
-            this.uploadService.clearFiles();
-        }
-        this.uploadService.addFiles(selectedFiles);
-        /*
-        Chrome, IE, Edge and Safari do not trigger a `change` event
-        when a file with the same name is selected a number of consecutive times.
-        As a workaround, clear the input value after handling the file.
-        */
-        const native = this.element.nativeElement;
-        if (ua.match(webkit) || ua.match(ie)) {
-            native.type = "";
-            native.type = "file";
-        }
-        setTimeout(() => {
-            this.navigation.focusedIndex = -1;
+    onAction() {
+        this.actionSubscription = this.navigation.onActionButtonAction.subscribe((button) => {
+            if (button === "clear") {
+                this.clearFiles();
+            }
+            else {
+                this.performUpload();
+            }
         });
     }
-};
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], FileSelectDirective.prototype, "dir", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Boolean)
-], FileSelectDirective.prototype, "disabled", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Boolean)
-], FileSelectDirective.prototype, "multiple", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], FileSelectDirective.prototype, "restrictions", void 0);
-__decorate([
-    HostBinding("attr.type"),
-    __metadata("design:type", String)
-], FileSelectDirective.prototype, "type", void 0);
-__decorate([
-    HostBinding("attr.autocomplete"),
-    __metadata("design:type", String)
-], FileSelectDirective.prototype, "autocomplete", void 0);
-__decorate([
-    HostBinding("attr.tabindex"),
-    __metadata("design:type", Number)
-], FileSelectDirective.prototype, "tabIndex", void 0);
-__decorate([
-    HostBinding("attr.name"),
-    __metadata("design:type", String),
-    __metadata("design:paramtypes", [])
-], FileSelectDirective.prototype, "nameAttribute", null);
-__decorate([
-    HostBinding("attr.multiple"),
-    __metadata("design:type", String),
-    __metadata("design:paramtypes", [])
-], FileSelectDirective.prototype, "multipleAttribute", null);
-__decorate([
-    HostBinding("attr.dir"),
-    __metadata("design:type", String),
-    __metadata("design:paramtypes", [])
-], FileSelectDirective.prototype, "dirAttribute", null);
-__decorate([
-    HostBinding("attr.disabled"),
-    __metadata("design:type", String),
-    __metadata("design:paramtypes", [])
-], FileSelectDirective.prototype, "disabledAttribute", null);
-__decorate([
-    HostListener("change", ["$event"]),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Object]),
-    __metadata("design:returntype", void 0)
-], FileSelectDirective.prototype, "onInputChange", null);
-FileSelectDirective = __decorate([
-    Directive({
-        selector: '[kendoFileSelect]'
-    }),
-    __metadata("design:paramtypes", [UploadService,
-        NavigationService,
-        ElementRef])
-], FileSelectDirective);
-
-var LocalizedMessagesDirective_1;
-/**
- * @hidden
- */
-let LocalizedMessagesDirective = LocalizedMessagesDirective_1 = class LocalizedMessagesDirective extends Messages {
-    constructor(service) {
-        super();
-        this.service = service;
+    onFocus() {
+        this.focusSubscription = this.navigation.onActionButtonFocus.subscribe((button) => {
+            this.focusButton(button);
+        });
     }
-};
-LocalizedMessagesDirective = LocalizedMessagesDirective_1 = __decorate([
-    Directive({
-        providers: [
-            {
-                provide: Messages,
-                useExisting: forwardRef(() => LocalizedMessagesDirective_1) // tslint:disable-line:no-forward-ref
-            }
-        ],
-        selector: `
-    [kendoUploadLocalizedMessages],
-    [kendoFileSelectLocalizedMessages],
-    [kendoUploadDropZoneLocalizedMessages]
-  `
-    }),
-    __metadata("design:paramtypes", [LocalizationService])
-], LocalizedMessagesDirective);
-
-/**
- * @hidden
- */
-let TemplateContextDirective = class TemplateContextDirective {
-    constructor(viewContainerRef) {
-        this.viewContainerRef = viewContainerRef;
+    focusButton(button) {
+        const el = (button === "clear") ? this.clearButton : this.uploadButton;
+        el.nativeElement.focus();
     }
-    set templateContext(context) {
-        if (this.insertedViewRef) {
-            this.viewContainerRef.remove(this.viewContainerRef.indexOf(this.insertedViewRef));
-            this.insertedViewRef = undefined;
+    ngOnDestroy() {
+        this.actionSubscription.unsubscribe();
+        this.focusSubscription.unsubscribe();
+    }
+    onUploadButtonClick(event) {
+        event.stopImmediatePropagation();
+        this.performUpload();
+    }
+    performUpload() {
+        if (!this.disabled) {
+            this.uploadService.uploadFiles();
+            this.navigation.focusSelectButton();
         }
-        if (context.templateRef) {
-            this.insertedViewRef = this.viewContainerRef.createEmbeddedView(context.templateRef, context);
+    }
+    onClearButtonClick(event) {
+        event.stopImmediatePropagation();
+        this.clearFiles();
+    }
+    clearFiles() {
+        if (!this.disabled) {
+            this.uploadService.clearFiles();
+            this.navigation.focusSelectButton();
         }
     }
-};
-__decorate([
-    Input(),
-    __metadata("design:type", Object),
-    __metadata("design:paramtypes", [Object])
-], TemplateContextDirective.prototype, "templateContext", null);
-TemplateContextDirective = __decorate([
-    Directive({
-        selector: '[templateContext]' // tslint:disable-line:directive-selector
-    }),
-    __metadata("design:paramtypes", [ViewContainerRef])
-], TemplateContextDirective);
+    textFor(key) {
+        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: `
+        <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)">
+                {{textFor('clearSelectedFiles')}}
+        </button>
+        <button #uploadButton type="button" class="k-button k-button-md k-rounded-md k-button-solid k-button-solid-primary k-upload-selected"
+            [attr.tabIndex]="-1"
+            (click)="onUploadButtonClick($event)">
+                {{textFor('uploadSelectedFiles')}}
+        </button>
+    `, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: UploadActionButtonsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-upload-action-buttons',
+                    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)">
+                {{textFor('clearSelectedFiles')}}
+        </button>
+        <button #uploadButton type="button" class="k-button k-button-md k-rounded-md k-button-solid k-button-solid-primary k-upload-selected"
+            [attr.tabIndex]="-1"
+            (click)="onUploadButtonClick($event)">
+                {{textFor('uploadSelectedFiles')}}
+        </button>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: UploadService }, { type: i1$1.LocalizationService }, { type: NavigationService }]; }, propDecorators: { disabled: [{
+                type: Input
+            }], actionsLayout: [{
+                type: Input
+            }], clearButton: [{
+                type: ViewChild,
+                args: ['clearButton', { static: true }]
+            }], uploadButton: [{
+                type: ViewChild,
+                args: ['uploadButton', { static: true }]
+            }], hostDefaultClass: [{
+                type: HostBinding,
+                args: ['class.k-actions']
+            }], actionButtonsEndClassName: [{
+                type: HostBinding,
+                args: ['class.k-actions-end']
+            }], actionButtonsStretchedClassName: [{
+                type: HostBinding,
+                args: ['class.k-actions-stretched']
+            }], actionButtonsStartClassName: [{
+                type: HostBinding,
+                args: ['class.k-actions-start']
+            }], actionButtonsCenterClassName: [{
+                type: HostBinding,
+                args: ['class.k-actions-center']
+            }] } });
 
-var UploadComponent_1;
-/* tslint:disable: no-use-before-declare */
 /**
  * @hidden
  */
 const UPLOAD_VALUE_ACCESSOR = {
     multi: true,
     provide: NG_VALUE_ACCESSOR,
-    useExisting: forwardRef(() => UploadComponent) // tslint:disable-line:no-forward-ref
+    useExisting: forwardRef(() => UploadComponent)
 };
 /**
  * Represents the [Kendo UI Upload component for Angular]({% slug overview_upload %}).
  */
-let UploadComponent = UploadComponent_1 = class UploadComponent {
+class UploadComponent {
     constructor(uploadService, localization, navigation, dropZoneService, _ngZone, renderer, cdr, wrapper) {
         this.uploadService = uploadService;
         this.localization = localization;
@@ -3764,231 +4057,145 @@ let UploadComponent = UploadComponent_1 = class UploadComponent {
             this.uploadProgress.emit(args);
         }));
     }
-};
-__decorate([
-    Input(),
-    __metadata("design:type", Boolean),
-    __metadata("design:paramtypes", [Boolean])
-], UploadComponent.prototype, "autoUpload", null);
-__decorate([
-    Input(),
-    __metadata("design:type", Boolean),
-    __metadata("design:paramtypes", [Boolean])
-], UploadComponent.prototype, "batch", null);
-__decorate([
-    Input(),
-    __metadata("design:type", Boolean),
-    __metadata("design:paramtypes", [Boolean])
-], UploadComponent.prototype, "withCredentials", null);
-__decorate([
-    Input(),
-    __metadata("design:type", String),
-    __metadata("design:paramtypes", [String])
-], UploadComponent.prototype, "saveField", null);
-__decorate([
-    Input(),
-    __metadata("design:type", HttpHeaders),
-    __metadata("design:paramtypes", [HttpHeaders])
-], UploadComponent.prototype, "saveHeaders", null);
-__decorate([
-    Input(),
-    __metadata("design:type", String),
-    __metadata("design:paramtypes", [String])
-], UploadComponent.prototype, "saveMethod", null);
-__decorate([
-    Input(),
-    __metadata("design:type", String),
-    __metadata("design:paramtypes", [String])
-], UploadComponent.prototype, "saveUrl", null);
-__decorate([
-    Input(),
-    __metadata("design:type", String),
-    __metadata("design:paramtypes", [String])
-], UploadComponent.prototype, "responseType", null);
-__decorate([
-    Input(),
-    __metadata("design:type", String),
-    __metadata("design:paramtypes", [String])
-], UploadComponent.prototype, "removeField", null);
-__decorate([
-    Input(),
-    __metadata("design:type", HttpHeaders),
-    __metadata("design:paramtypes", [HttpHeaders])
-], UploadComponent.prototype, "removeHeaders", null);
-__decorate([
-    Input(),
-    __metadata("design:type", String),
-    __metadata("design:paramtypes", [String])
-], UploadComponent.prototype, "removeMethod", null);
-__decorate([
-    Input(),
-    __metadata("design:type", String),
-    __metadata("design:paramtypes", [String])
-], UploadComponent.prototype, "removeUrl", null);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], UploadComponent.prototype, "chunkable", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Boolean),
-    __metadata("design:paramtypes", [Boolean])
-], UploadComponent.prototype, "concurrent", null);
-__decorate([
-    Input(),
-    __metadata("design:type", Boolean)
-], UploadComponent.prototype, "multiple", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Boolean)
-], UploadComponent.prototype, "disabled", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Boolean)
-], UploadComponent.prototype, "showFileList", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Number)
-], UploadComponent.prototype, "tabindex", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], UploadComponent.prototype, "zoneId", void 0);
-__decorate([
-    Input('tabIndex'),
-    __metadata("design:type", Number),
-    __metadata("design:paramtypes", [Number])
-], UploadComponent.prototype, "tabIndex", null);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], UploadComponent.prototype, "accept", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object),
-    __metadata("design:paramtypes", [Object])
-], UploadComponent.prototype, "restrictions", null);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], UploadComponent.prototype, "focusableId", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], UploadComponent.prototype, "actionsLayout", void 0);
-__decorate([
-    ContentChild(FileTemplateDirective, { static: false }),
-    __metadata("design:type", FileTemplateDirective)
-], UploadComponent.prototype, "fileTemplate", void 0);
-__decorate([
-    ContentChild(FileInfoTemplateDirective, { static: false }),
-    __metadata("design:type", FileInfoTemplateDirective)
-], UploadComponent.prototype, "fileInfoTemplate", void 0);
-__decorate([
-    ViewChild('fileSelect', { static: true }),
-    __metadata("design:type", ElementRef)
-], UploadComponent.prototype, "fileSelect", void 0);
-__decorate([
-    ViewChild('fileSelectButton', { static: true }),
-    __metadata("design:type", ElementRef)
-], UploadComponent.prototype, "fileSelectButton", void 0);
-__decorate([
-    Output('blur'),
-    __metadata("design:type", EventEmitter)
-], UploadComponent.prototype, "onBlur", void 0);
-__decorate([
-    Output(),
-    __metadata("design:type", EventEmitter)
-], UploadComponent.prototype, "cancel", void 0);
-__decorate([
-    Output(),
-    __metadata("design:type", EventEmitter)
-], UploadComponent.prototype, "clear", void 0);
-__decorate([
-    Output(),
-    __metadata("design:type", EventEmitter)
-], UploadComponent.prototype, "complete", void 0);
-__decorate([
-    Output(),
-    __metadata("design:type", EventEmitter)
-], UploadComponent.prototype, "error", void 0);
-__decorate([
-    Output('focus'),
-    __metadata("design:type", EventEmitter)
-], UploadComponent.prototype, "onFocus", void 0);
-__decorate([
-    Output(),
-    __metadata("design:type", EventEmitter)
-], UploadComponent.prototype, "pause", void 0);
-__decorate([
-    Output(),
-    __metadata("design:type", EventEmitter)
-], UploadComponent.prototype, "remove", void 0);
-__decorate([
-    Output(),
-    __metadata("design:type", EventEmitter)
-], UploadComponent.prototype, "resume", void 0);
-__decorate([
-    Output(),
-    __metadata("design:type", EventEmitter)
-], UploadComponent.prototype, "select", void 0);
-__decorate([
-    Output(),
-    __metadata("design:type", EventEmitter)
-], UploadComponent.prototype, "success", void 0);
-__decorate([
-    Output(),
-    __metadata("design:type", EventEmitter)
-], UploadComponent.prototype, "upload", void 0);
-__decorate([
-    Output(),
-    __metadata("design:type", EventEmitter)
-], UploadComponent.prototype, "uploadProgress", void 0);
-__decorate([
-    Output(),
-    __metadata("design:type", EventEmitter)
-], UploadComponent.prototype, "valueChange", void 0);
-__decorate([
-    HostBinding('class.k-widget'),
-    HostBinding('class.k-upload'),
-    __metadata("design:type", Boolean)
-], UploadComponent.prototype, "hostDefaultClasses", void 0);
-__decorate([
-    HostBinding('class.k-disabled'),
-    __metadata("design:type", Boolean),
-    __metadata("design:paramtypes", [])
-], UploadComponent.prototype, "hostDisabledClass", null);
-__decorate([
-    HostBinding('attr.dir'),
-    __metadata("design:type", String),
-    __metadata("design:paramtypes", [])
-], UploadComponent.prototype, "dir", null);
-__decorate([
-    HostListener('keydown', ['$event']),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Object]),
-    __metadata("design:returntype", void 0)
-], UploadComponent.prototype, "handleKeydown", null);
-UploadComponent = UploadComponent_1 = __decorate([
-    Component({
-        exportAs: 'kendoUpload',
-        providers: [
-            LocalizationService,
-            NavigationService,
-            UploadService,
-            DropZoneService,
-            UPLOAD_VALUE_ACCESSOR,
-            {
-                provide: L10N_PREFIX,
-                useValue: 'kendo.upload'
-            },
-            {
-                provide: KendoInput,
-                useExisting: forwardRef(() => UploadComponent_1)
-            }
-        ],
-        selector: 'kendo-upload',
-        template: `
+}
+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: [
+        LocalizationService,
+        NavigationService,
+        UploadService,
+        DropZoneService,
+        UPLOAD_VALUE_ACCESSOR,
+        {
+            provide: L10N_PREFIX,
+            useValue: 'kendo.upload'
+        },
+        {
+            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: `
+    <ng-container kendoUploadLocalizedMessages
+      i18n-cancel="kendo.upload.cancel|The text for the Cancel button"
+      cancel="Cancel"
+
+      i18n-clearSelectedFiles="kendo.upload.clearSelectedFiles|The text for the Clear button"
+      clearSelectedFiles="Clear"
+
+      i18n-dropFilesHere="kendo.upload.dropFilesHere|The drop zone hint"
+      dropFilesHere="Drop files here to upload"
+
+      i18n-filesBatchStatus="kendo.upload.filesBatchStatus|The status message for a batch of files"
+      filesBatchStatus="files"
+
+      i18n-filesBatchStatusFailed="kendo.upload.filesBatchStatusFailed|The status message for a batch of files after failed upload"
+      filesBatchStatusFailed="files failed to upload."
+
+      i18n-filesBatchStatusUploaded="kendo.upload.filesBatchStatusUploaded|The status message for a batch of files after successful upload"
+      filesBatchStatusUploaded="files successfully uploaded."
+
+      i18n-fileStatusFailed="kendo.upload.fileStatusFailed|The file status message after failed upload"
+      fileStatusFailed="File failed to upload."
+
+      i18n-fileStatusUploaded="kendo.upload.fileStatusUploaded|The file status message after successful upload"
+      fileStatusUploaded="File successfully uploaded."
+
+      i18n-headerStatusPaused="kendo.upload.headerStatusPaused|The header status message when the file upload is paused"
+      headerStatusPaused="Paused"
+
+      i18n-headerStatusUploaded="kendo.upload.headerStatusUploaded|The header status message after file upload completion"
+      headerStatusUploaded="Done"
+
+      i18n-headerStatusUploading="kendo.upload.headerStatusUploading|The header status message during file upload"
+      headerStatusUploading="Uploading..."
+
+      i18n-invalidFileExtension="kendo.upload.invalidFileExtension|The text for the invalid allowed extensions restriction message"
+      invalidFileExtension="File type not allowed."
+
+      i18n-invalidMaxFileSize="kendo.upload.invalidMaxFileSize|The text for the invalid max file size restriction message"
+      invalidMaxFileSize="File size too large."
+
+      i18n-invalidMinFileSize="kendo.upload.invalidMinFileSize|The text for the invalid min file size restriction message"
+      invalidMinFileSize="File size too small."
+
+      i18n-pause="kendo.upload.pause|The text for the Pause button"
+      pause="Pause"
+
+      i18n-remove="kendo.upload.remove|The text for the Remove button"
+      remove="Remove"
+
+      i18n-resume="kendo.upload.resume|The text for the Resume button"
+      resume="Resume"
+
+      i18n-retry="kendo.upload.retry|The text for the Retry button"
+      retry="Retry"
+
+      i18n-select="kendo.upload.select|The text for the Select button"
+      select="Select files..."
+
+      i18n-uploadSelectedFiles="kendo.upload.uploadSelectedFiles|The text for the Upload files button"
+      uploadSelectedFiles="Upload"
+    >
+    </ng-container>
+    <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>
+        </div>
+        <kendo-upload-status-total *ngIf="showTotalStatus"
+          class="k-upload-status k-upload-status-total"
+          [fileList]="fileList">
+        </kendo-upload-status-total>
+        <div class="k-dropzone-hint">{{textFor('dropFilesHere')}}</div>
+    </div>
+    <ul kendo-upload-file-list *ngIf="showFileList && fileList.count > 0"
+        class="k-upload-files k-reset"
+        [disabled]="disabled"
+        [fileList]="fileList.files"
+        [fileTemplate]="fileTemplate"
+        [fileInfoTemplate]="fileInfoTemplate">
+    </ul>
+    <kendo-upload-action-buttons
+      *ngIf="showActionButtons"
+      [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: [{
+            type: Component,
+            args: [{
+                    exportAs: 'kendoUpload',
+                    providers: [
+                        LocalizationService,
+                        NavigationService,
+                        UploadService,
+                        DropZoneService,
+                        UPLOAD_VALUE_ACCESSOR,
+                        {
+                            provide: L10N_PREFIX,
+                            useValue: 'kendo.upload'
+                        },
+                        {
+                            provide: KendoInput,
+                            useExisting: forwardRef(() => UploadComponent)
+                        }
+                    ],
+                    selector: 'kendo-upload',
+                    template: `
     <ng-container kendoUploadLocalizedMessages
       i18n-cancel="kendo.upload.cancel|The text for the Cancel button"
       cancel="Cancel"
@@ -4090,18 +4297,116 @@ UploadComponent = UploadComponent_1 = __decorate([
       [actionsLayout]="actionsLayout">
     </kendo-upload-action-buttons>
   `
-    }),
-    __metadata("design:paramtypes", [UploadService,
-        LocalizationService,
-        NavigationService,
-        DropZoneService,
-        NgZone,
-        Renderer2,
-        ChangeDetectorRef,
-        ElementRef])
-], UploadComponent);
+                }]
+        }], ctorParameters: function () { return [{ type: UploadService }, { type: i1$1.LocalizationService }, { type: NavigationService }, { type: DropZoneService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }]; }, propDecorators: { autoUpload: [{
+                type: Input
+            }], batch: [{
+                type: Input
+            }], withCredentials: [{
+                type: Input
+            }], saveField: [{
+                type: Input
+            }], saveHeaders: [{
+                type: Input
+            }], saveMethod: [{
+                type: Input
+            }], saveUrl: [{
+                type: Input
+            }], responseType: [{
+                type: Input
+            }], removeField: [{
+                type: Input
+            }], removeHeaders: [{
+                type: Input
+            }], removeMethod: [{
+                type: Input
+            }], removeUrl: [{
+                type: Input
+            }], chunkable: [{
+                type: Input
+            }], concurrent: [{
+                type: Input
+            }], multiple: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], showFileList: [{
+                type: Input
+            }], tabindex: [{
+                type: Input
+            }], zoneId: [{
+                type: Input
+            }], tabIndex: [{
+                type: Input,
+                args: ['tabIndex']
+            }], accept: [{
+                type: Input
+            }], restrictions: [{
+                type: Input
+            }], focusableId: [{
+                type: Input
+            }], actionsLayout: [{
+                type: Input
+            }], fileTemplate: [{
+                type: ContentChild,
+                args: [FileTemplateDirective, { static: false }]
+            }], fileInfoTemplate: [{
+                type: ContentChild,
+                args: [FileInfoTemplateDirective, { static: false }]
+            }], fileSelect: [{
+                type: ViewChild,
+                args: ['fileSelect', { static: true }]
+            }], fileSelectButton: [{
+                type: ViewChild,
+                args: ['fileSelectButton', { static: true }]
+            }], onBlur: [{
+                type: Output,
+                args: ['blur']
+            }], cancel: [{
+                type: Output
+            }], clear: [{
+                type: Output
+            }], complete: [{
+                type: Output
+            }], error: [{
+                type: Output
+            }], onFocus: [{
+                type: Output,
+                args: ['focus']
+            }], pause: [{
+                type: Output
+            }], remove: [{
+                type: Output
+            }], resume: [{
+                type: Output
+            }], select: [{
+                type: Output
+            }], success: [{
+                type: Output
+            }], upload: [{
+                type: Output
+            }], uploadProgress: [{
+                type: Output
+            }], valueChange: [{
+                type: Output
+            }], hostDefaultClasses: [{
+                type: HostBinding,
+                args: ['class.k-widget']
+            }, {
+                type: HostBinding,
+                args: ['class.k-upload']
+            }], hostDisabledClass: [{
+                type: HostBinding,
+                args: ['class.k-disabled']
+            }], dir: [{
+                type: HostBinding,
+                args: ['attr.dir']
+            }], handleKeydown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }] } });
 
-let UploadDropZoneDirective = class UploadDropZoneDirective {
+class UploadDropZoneDirective {
     constructor(dropZoneService) {
         this.dropZoneService = dropZoneService;
     }
@@ -4151,44 +4456,37 @@ let UploadDropZoneDirective = class UploadDropZoneDirective {
     get componentInstance() {
         return this.dropZoneService.getComponents(this.zoneId);
     }
-};
-__decorate([
-    Input('kendoUploadDropZone'),
-    __metadata("design:type", String)
-], UploadDropZoneDirective.prototype, "zoneId", void 0);
-__decorate([
-    HostListener('dragenter'),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", []),
-    __metadata("design:returntype", Boolean)
-], UploadDropZoneDirective.prototype, "onElementDragEnter", null);
-__decorate([
-    HostListener('dragover'),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", []),
-    __metadata("design:returntype", Boolean)
-], UploadDropZoneDirective.prototype, "onElementDragOver", null);
-__decorate([
-    HostListener('drop', ['$event']),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Object]),
-    __metadata("design:returntype", Boolean)
-], UploadDropZoneDirective.prototype, "onDropListener", null);
-UploadDropZoneDirective = __decorate([
-    Directive({
-        providers: [
-            DropZoneService
-        ],
-        selector: '[kendoUploadDropZone], [kendoFileSelectDropZone]'
-    }),
-    __metadata("design:paramtypes", [DropZoneService])
-], UploadDropZoneDirective);
+}
+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: [
+        DropZoneService
+    ], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: UploadDropZoneDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    providers: [
+                        DropZoneService
+                    ],
+                    selector: '[kendoUploadDropZone], [kendoFileSelectDropZone]'
+                }]
+        }], ctorParameters: function () { return [{ type: DropZoneService }]; }, propDecorators: { zoneId: [{
+                type: Input,
+                args: ['kendoUploadDropZone']
+            }], onElementDragEnter: [{
+                type: HostListener,
+                args: ['dragenter']
+            }], onElementDragOver: [{
+                type: HostListener,
+                args: ['dragover']
+            }], onDropListener: [{
+                type: HostListener,
+                args: ['drop', ['$event']]
+            }] } });
 
-/* tslint:disable: no-use-before-declare */
 /**
  * Represents the [Kendo UI UploadDropZone component for Angular]({% slug overview_upload %}).
  */
-let UploadDropZoneComponent = class UploadDropZoneComponent extends DropZoneBase {
+class UploadDropZoneComponent extends DropZoneBase {
     constructor(element, renderer, localization) {
         super(element, renderer, 'k-external-dropzone-hover');
         this.localization = localization;
@@ -4223,40 +4521,41 @@ let UploadDropZoneComponent = class UploadDropZoneComponent extends DropZoneBase
             this.localizationChangeSubscription.unsubscribe();
         }
     }
-};
-__decorate([
-    HostBinding('class.k-external-dropzone'),
-    __metadata("design:type", Boolean)
-], UploadDropZoneComponent.prototype, "hostClass", void 0);
-__decorate([
-    HostBinding('attr.dir'),
-    __metadata("design:type", String),
-    __metadata("design:paramtypes", [])
-], UploadDropZoneComponent.prototype, "dirAttribute", null);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], UploadDropZoneComponent.prototype, "zoneId", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], UploadDropZoneComponent.prototype, "icon", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], UploadDropZoneComponent.prototype, "iconClass", void 0);
-UploadDropZoneComponent = __decorate([
-    Component({
-        exportAs: 'kendoUploadDropZone',
-        providers: [
-            LocalizationService,
-            {
-                provide: L10N_PREFIX,
-                useValue: 'kendo.uploaddropzone'
-            }
-        ],
-        selector: 'kendo-uploaddropzone',
-        template: `
+}
+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: [
+        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: [{
+            type: Component,
+            args: [{
+                    exportAs: 'kendoUploadDropZone',
+                    providers: [
+                        LocalizationService,
+                        {
+                            provide: L10N_PREFIX,
+                            useValue: 'kendo.uploaddropzone'
+                        }
+                    ],
+                    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'
@@ -4270,11 +4569,20 @@ UploadDropZoneComponent = __decorate([
       </span>
     </div>
   `
-    }),
-    __metadata("design:paramtypes", [ElementRef,
-        Renderer2,
-        LocalizationService])
-], UploadDropZoneComponent);
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1$1.LocalizationService }]; }, propDecorators: { hostClass: [{
+                type: HostBinding,
+                args: ['class.k-external-dropzone']
+            }], dirAttribute: [{
+                type: HostBinding,
+                args: ['attr.dir']
+            }], zoneId: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], iconClass: [{
+                type: Input
+            }] } });
 
 /**
  * @hidden
@@ -4303,22 +4611,50 @@ const PUBLIC_DIRECTIVES = [
 /**
  * @hidden
  */
-let SharedModule = class SharedModule {
-};
-SharedModule = __decorate([
-    NgModule({
-        declarations: [
-            PUBLIC_DIRECTIVES,
-            SHARED_DECLARATIONS
-        ],
-        exports: [
-            PUBLIC_DIRECTIVES,
-            SHARED_DECLARATIONS,
-            CommonModule
-        ],
-        imports: [CommonModule]
-    })
-], SharedModule);
+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,
+        FileInfoTemplateDirective,
+        CustomMessagesComponent,
+        UploadDropZoneDirective,
+        UploadDropZoneComponent, DropZoneInternalDirective,
+        FileListComponent,
+        FileListItemDirective,
+        FileListItemActionButtonComponent,
+        FileListMultipleItemsComponent,
+        FileListSingleItemComponent,
+        FileSelectDirective,
+        LocalizedMessagesDirective,
+        TemplateContextDirective], imports: [CommonModule], exports: [FileTemplateDirective,
+        FileInfoTemplateDirective,
+        CustomMessagesComponent,
+        UploadDropZoneDirective,
+        UploadDropZoneComponent, DropZoneInternalDirective,
+        FileListComponent,
+        FileListItemDirective,
+        FileListItemActionButtonComponent,
+        FileListMultipleItemsComponent,
+        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: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        PUBLIC_DIRECTIVES,
+                        SHARED_DECLARATIONS
+                    ],
+                    exports: [
+                        PUBLIC_DIRECTIVES,
+                        SHARED_DECLARATIONS,
+                        CommonModule
+                    ],
+                    imports: [CommonModule]
+                }]
+        }] });
 
 const FILESELECT_DECLARATIONS = [
     FileSelectComponent
@@ -4326,192 +4662,22 @@ const FILESELECT_DECLARATIONS = [
 /**
  * Represents the [NgModule](https://angular.io/api/core/NgModule) definition for the FileSelect component.
  */
-let FileSelectModule = class FileSelectModule {
-};
-FileSelectModule = __decorate([
-    NgModule({
-        declarations: [FILESELECT_DECLARATIONS],
-        exports: [
-            PUBLIC_DIRECTIVES,
-            FILESELECT_DECLARATIONS
-        ],
-        imports: [SharedModule]
-    })
-], FileSelectModule);
-
-/**
- * @hidden
- */
-let UploadActionButtonsComponent = class UploadActionButtonsComponent {
-    constructor(uploadService, localization, navigation) {
-        this.uploadService = uploadService;
-        this.localization = localization;
-        this.navigation = navigation;
-        this.hostDefaultClass = true;
-        this.onAction();
-        this.onFocus();
-    }
-    get actionButtonsEndClassName() {
-        return this.actionsLayout === 'end';
-    }
-    get actionButtonsStretchedClassName() {
-        return this.actionsLayout === 'stretched';
-    }
-    get actionButtonsStartClassName() {
-        return this.actionsLayout === 'start';
-    }
-    get actionButtonsCenterClassName() {
-        return this.actionsLayout === 'center';
-    }
-    onAction() {
-        this.actionSubscription = this.navigation.onActionButtonAction.subscribe((button) => {
-            if (button === "clear") {
-                this.clearFiles();
-            }
-            else {
-                this.performUpload();
-            }
-        });
-    }
-    onFocus() {
-        this.focusSubscription = this.navigation.onActionButtonFocus.subscribe((button) => {
-            this.focusButton(button);
-        });
-    }
-    focusButton(button) {
-        const el = (button === "clear") ? this.clearButton : this.uploadButton;
-        el.nativeElement.focus();
-    }
-    ngOnDestroy() {
-        this.actionSubscription.unsubscribe();
-        this.focusSubscription.unsubscribe();
-    }
-    onUploadButtonClick(event) {
-        event.stopImmediatePropagation();
-        this.performUpload();
-    }
-    performUpload() {
-        if (!this.disabled) {
-            this.uploadService.uploadFiles();
-            this.navigation.focusSelectButton();
-        }
-    }
-    onClearButtonClick(event) {
-        event.stopImmediatePropagation();
-        this.clearFiles();
-    }
-    clearFiles() {
-        if (!this.disabled) {
-            this.uploadService.clearFiles();
-            this.navigation.focusSelectButton();
-        }
-    }
-    textFor(key) {
-        return this.localization.get(key);
-    }
-};
-__decorate([
-    Input(),
-    __metadata("design:type", Boolean)
-], UploadActionButtonsComponent.prototype, "disabled", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], UploadActionButtonsComponent.prototype, "actionsLayout", void 0);
-__decorate([
-    ViewChild('clearButton', { static: true }),
-    __metadata("design:type", ElementRef)
-], UploadActionButtonsComponent.prototype, "clearButton", void 0);
-__decorate([
-    ViewChild('uploadButton', { static: true }),
-    __metadata("design:type", ElementRef)
-], UploadActionButtonsComponent.prototype, "uploadButton", void 0);
-__decorate([
-    HostBinding('class.k-actions'),
-    __metadata("design:type", Boolean)
-], UploadActionButtonsComponent.prototype, "hostDefaultClass", void 0);
-__decorate([
-    HostBinding('class.k-actions-end'),
-    __metadata("design:type", Boolean),
-    __metadata("design:paramtypes", [])
-], UploadActionButtonsComponent.prototype, "actionButtonsEndClassName", null);
-__decorate([
-    HostBinding('class.k-actions-stretched'),
-    __metadata("design:type", Boolean),
-    __metadata("design:paramtypes", [])
-], UploadActionButtonsComponent.prototype, "actionButtonsStretchedClassName", null);
-__decorate([
-    HostBinding('class.k-actions-start'),
-    __metadata("design:type", Boolean),
-    __metadata("design:paramtypes", [])
-], UploadActionButtonsComponent.prototype, "actionButtonsStartClassName", null);
-__decorate([
-    HostBinding('class.k-actions-center'),
-    __metadata("design:type", Boolean),
-    __metadata("design:paramtypes", [])
-], UploadActionButtonsComponent.prototype, "actionButtonsCenterClassName", null);
-UploadActionButtonsComponent = __decorate([
-    Component({
-        selector: 'kendo-upload-action-buttons',
-        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)">
-                {{textFor('clearSelectedFiles')}}
-        </button>
-        <button #uploadButton type="button" class="k-button k-button-md k-rounded-md k-button-solid k-button-solid-primary k-upload-selected"
-            [attr.tabIndex]="-1"
-            (click)="onUploadButtonClick($event)">
-                {{textFor('uploadSelectedFiles')}}
-        </button>
-    `
-    }),
-    __metadata("design:paramtypes", [UploadService,
-        LocalizationService,
-        NavigationService])
-], UploadActionButtonsComponent);
-
-/**
- * @hidden
- */
-let UploadStatusTotalComponent = class UploadStatusTotalComponent {
-    constructor(localization) {
-        this.localization = localization;
-    }
-    ngDoCheck() {
-        this.isPaused = this.fileList.hasFileWithState([FileState.Paused]);
-        this.isFailed = this.fileList.hasFileWithState([FileState.Failed]);
-        this.isUploading = this.fileList.hasFileWithState([FileState.Uploading]);
-        if (this.isPaused && !this.isUploading) {
-            this.statusText = this.localization.get('headerStatusPaused');
-        }
-        else {
-            this.statusText = this.isUploading ? this.localization.get('headerStatusUploading')
-                : this.localization.get('headerStatusUploaded');
-        }
-    }
-};
-__decorate([
-    Input(),
-    __metadata("design:type", FileMap)
-], UploadStatusTotalComponent.prototype, "fileList", void 0);
-UploadStatusTotalComponent = __decorate([
-    Component({
-        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>
-        {{statusText}}
-    `
-    }),
-    __metadata("design:paramtypes", [LocalizationService])
-], UploadStatusTotalComponent);
+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: [{
+            type: NgModule,
+            args: [{
+                    declarations: [FILESELECT_DECLARATIONS],
+                    exports: [
+                        PUBLIC_DIRECTIVES,
+                        FILESELECT_DECLARATIONS
+                    ],
+                    imports: [SharedModule]
+                }]
+        }] });
 
 const UPLOAD_DECLARATIONS = [
     UploadComponent,
@@ -4521,18 +4687,26 @@ const UPLOAD_DECLARATIONS = [
 /**
  * Represents the [NgModule](https://angular.io/api/core/NgModule) definition for the Upload component.
  */
-let UploadModule = class UploadModule {
-};
-UploadModule = __decorate([
-    NgModule({
-        declarations: [UPLOAD_DECLARATIONS],
-        exports: [
-            PUBLIC_DIRECTIVES,
-            UPLOAD_DECLARATIONS
-        ],
-        imports: [SharedModule]
-    })
-], UploadModule);
+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,
+        UploadActionButtonsComponent,
+        UploadStatusTotalComponent], imports: [SharedModule], 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: [{
+            type: NgModule,
+            args: [{
+                    declarations: [UPLOAD_DECLARATIONS],
+                    exports: [
+                        PUBLIC_DIRECTIVES,
+                        UPLOAD_DECLARATIONS
+                    ],
+                    imports: [SharedModule]
+                }]
+        }] });
 
 /**
  * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
@@ -4559,19 +4733,26 @@ UploadModule = __decorate([
  *
  * ```
  */
-let UploadsModule = class UploadsModule {
-};
-UploadsModule = __decorate([
-    NgModule({
-        exports: [
-            FileSelectModule,
-            UploadModule
-        ]
-    })
-], UploadsModule);
+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,
+        UploadModule] });
+UploadsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: UploadsModule, imports: [FileSelectModule,
+        UploadModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: UploadsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    exports: [
+                        FileSelectModule,
+                        UploadModule
+                    ]
+                }]
+        }] });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { DropZoneBase, DropZoneInternalDirective, DropZoneService, PreventableEvent, FILESELECT_VALUE_ACCESSOR, LocalizedMessagesDirective, Messages, NavigationService, FileListItemDirective, FileListItemBase, PUBLIC_DIRECTIVES, SHARED_DECLARATIONS, SharedModule, UPLOAD_VALUE_ACCESSOR, UploadService, FileSelectModule, UploadModule, UploadsModule, UploadComponent, FileSelectComponent, UploadDropZoneComponent, FileSelectDirective, FileListComponent, FileListSingleItemComponent, FileListItemActionButtonComponent, FileListMultipleItemsComponent, FileTemplateDirective, FileInfoTemplateDirective, TemplateContextDirective, UploadStatusTotalComponent, UploadActionButtonsComponent, UploadDropZoneDirective, CustomMessagesComponent, CancelEvent, ClearEvent, ErrorEvent, PauseEvent, RemoveEvent, ResumeEvent, SelectEvent, SuccessEvent, UploadEvent, UploadProgressEvent, FileState };
+export { CancelEvent, ClearEvent, CustomMessagesComponent, ErrorEvent, FileInfoTemplateDirective, FileListComponent, FileListItemActionButtonComponent, FileListMultipleItemsComponent, FileListSingleItemComponent, FileSelectComponent, FileSelectDirective, FileSelectModule, FileState, FileTemplateDirective, PauseEvent, RemoveEvent, ResumeEvent, SelectEvent, SuccessEvent, TemplateContextDirective, UploadActionButtonsComponent, UploadComponent, UploadDropZoneComponent, UploadDropZoneDirective, UploadEvent, UploadModule, UploadProgressEvent, UploadStatusTotalComponent, UploadsModule };
+