@progress/kendo-angular-upload 8.0.2 → 9.0.0-next.202203141352

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: 1646671545,
+    publishDate: 1647265856,
     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;
@@ -592,9 +595,6 @@ class UploadProgressEvent {
     }
 }
 
-const ɵ0 = [
-    ".xlr", ".xls", ".xlsx"
-];
 /**
  * @hidden
  */
@@ -614,7 +614,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 +635,7 @@ const fileGroupMap = {
     ]
 };
 
-/* tslint:disable: no-bitwise */
+/* eslint-disable  no-bitwise */
 /**
  * @hidden
  */
@@ -784,6 +786,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 +889,7 @@ class ChunkMap {
 /**
  * @hidden
  */
-let UploadService = class UploadService {
+class UploadService {
     constructor(http) {
         this.http = http;
         this.cancelEvent = new EventEmitter();
@@ -1281,16 +1295,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 +1439,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]' // eslint-disable-line directive-selector-prefix
+                }]
+        }], 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 +1482,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"
+}
+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-invalidFileExtension="kendo.fileselect.invalidFileExtension|The text for the invalid allowed extensions restriction message"
-            invalidFileExtension="File type not allowed."
+        <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-invalidMaxFileSize="kendo.fileselect.invalidMaxFileSize|The text for the invalid max file size restriction message"
-            invalidMaxFileSize="File size too large."
+        <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-invalidMinFileSize="kendo.fileselect.invalidMinFileSize|The text for the invalid min file size restriction message"
-            invalidMinFileSize="File size too small."
+        <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-remove="kendo.fileselect.remove|The text for the Remove button"
-            remove="Remove"
+        <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-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>
+        <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>
     `
-    }),
-    __metadata("design:paramtypes", [UploadService,
-        LocalizationService,
-        NavigationService,
-        DropZoneService,
-        NgZone,
-        Renderer2,
-        ChangeDetectorRef,
-        ElementRef])
-], FileSelectComponent);
+                }]
+        }], ctorParameters: function () { return [{ type: UploadService }, { type: i1$1.LocalizationService }, { type: NavigationService }]; }, propDecorators: { file: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], progress: [{
+                type: Input
+            }] } });
 
 /**
  * @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);
-
-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;
+class TemplateContextDirective {
+    constructor(viewContainerRef) {
+        this.viewContainerRef = viewContainerRef;
     }
-    get override() {
-        return true;
+    set templateContext(context) {
+        if (this.insertedViewRef) {
+            this.viewContainerRef.remove(this.viewContainerRef.indexOf(this.insertedViewRef));
+            this.insertedViewRef = undefined;
+        }
+        if (context.templateRef) {
+            this.insertedViewRef = this.viewContainerRef.createEmbeddedView(context.templateRef, context);
+        }
     }
-};
-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);
+}
+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]' // eslint-disable-line directive-selector
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; }, propDecorators: { templateContext: [{
+                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 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;
             }
-        }
+        });
     }
-};
-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);
+    get fileStatusText() {
+        const errors = this.file.validationErrors;
+        if (this.file.state === FileState.Uploaded) {
+            return `${this.textFor('fileStatusUploaded')}`;
         }
-    }
-    if (maxFileSize !== 0 && file.size > maxFileSize) {
-        file.validationErrors = file.validationErrors || [];
-        if (file.validationErrors.indexOf(INVALIDMAXFILESIZE) < 0) {
-            file.validationErrors.push(INVALIDMAXFILESIZE);
+        if (this.file.state === FileState.Failed) {
+            return `${this.textFor('fileStatusFailed')}`;
         }
-    }
-};
-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);
-    }
-};
-
-/**
- * @hidden
- */
-class DropZoneBase {
-    constructor(element, renderer, hoverClass) {
-        this.element = element;
-        this.renderer = renderer;
-        this.hideIntervalElement = null;
-        this.hoverClass = hoverClass;
-    }
-    /**
-     * @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);
+        if (!isPresent(errors)) {
+            return this.getTotalFilesSizeMessage([this.file]);
         }
-        return false;
-    }
-    /**
-     * @hidden
-     */
-    onElementDragOverListener() {
-        this.lastDragElement = new Date();
-        return false;
-    }
-    calculateTimeDiff(prevEvent) {
-        return new Date().getTime() - prevEvent.getTime();
-    }
-    addClass(className) {
-        this.renderer.addClass(this.element.nativeElement, className);
+        return this.getFileValidationMessage(this.file);
     }
-    removeClass(className) {
-        this.renderer.removeClass(this.element.nativeElement, className);
+    get showProgress() {
+        const showProgress = this.file.state === FileState.Uploading || this.file.state === FileState.Paused;
+        return showProgress ? 'active' : 'inactive';
     }
-}
-__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 fileGroupClass() {
+        return getFileGroupCssClass(this.file.extension ? this.file.extension : '');
     }
-    ngOnDestroy() {
-        this.ngZone.runOutsideAngular(() => {
-            if (this.unsubscribeDocumentDragEnter) {
-                this.unsubscribeDocumentDragEnter();
-            }
-            if (this.unsubscribeDocumentDragOver) {
-                this.unsubscribeDocumentDragOver();
-            }
-        });
+    get isUploadSuccessful() {
+        return this.file.state === FileState.Uploaded;
     }
-    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;
+    get isUploadFailed() {
+        return this.file.state === FileState.Failed;
     }
-    /**
-     * @hidden
-     */
-    onDocumentDragOver() {
-        this.lastDragDocument = new Date();
-        return false;
+    get isNotYetUploaded() {
+        return !this.isUploadFailed && !this.isUploadSuccessful;
     }
-    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 +2239,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 +2269,1177 @@ 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;
-        }
-    }
-    onBlur(type) {
-        if (type === 'retry') {
-            this.retryFocused = false;
-        }
-        if (type === 'action') {
-            this.actionFocused = false;
-        }
-        if (type === 'pauseResume') {
-            this.pauseResumeFocused = false;
-        }
+    `, 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;
     }
-    onRetryClick() {
-        if (this.disabled) {
-            return;
+}
+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) // eslint-disable-line no-forward-ref
+        }
+    ], 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) // eslint-disable-line no-forward-ref
+                        }
+                    ],
+                    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);
+            }
         }
-        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);
+};
+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.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);
+    if (maxFileSize !== 0 && file.size > maxFileSize) {
+        file.validationErrors = file.validationErrors || [];
+        if (file.validationErrors.indexOf(INVALIDMAXFILESIZE) < 0) {
+            file.validationErrors.push(INVALIDMAXFILESIZE);
         }
     }
-    get actionButtonTitle() {
-        if (this.file.state === FileState.Uploading) {
-            return this.localization.get('cancel');
-        }
-        return this.localization.get('remove');
+};
+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 retryButtonTitle() {
-        return this.localization.get('retry');
+};
+
+/**
+ * @hidden
+ */
+class DropZoneBase {
+    constructor(element, renderer, cssClass) {
+        this.element = element;
+        this.renderer = renderer;
+        this.hideIntervalElement = null;
+        this.hoverClass = cssClass;
     }
-    get pauseResumeButtonTitle() {
-        if (this.file.state === FileState.Uploading) {
-            return this.localization.get('pause');
+    /**
+     * @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('resume');
-    }
-    get isUploading() {
-        return this.file.state === FileState.Uploading;
+        return false;
     }
-    get isFailed() {
-        return this.file.state === FileState.Failed;
+    /**
+     * @hidden
+     */
+    onElementDragOverListener() {
+        this.lastDragElement = new Date();
+        return false;
     }
-    get isPaused() {
-        return this.file.state === FileState.Paused;
+    calculateTimeDiff(prevEvent) {
+        return new Date().getTime() - prevEvent.getTime();
     }
-    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;
+    addClass(className) {
+        this.renderer.addClass(this.element.nativeElement, className);
     }
-    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;
+    removeClass(className) {
+        this.renderer.removeClass(this.element.nativeElement, className);
     }
-};
-__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>
-    `
-    }),
-    __metadata("design:paramtypes", [UploadService,
-        LocalizationService,
-        NavigationService])
-], FileListItemActionButtonComponent);
+}
+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 FileListItemBase {
-    constructor(uploadService) {
+class DropZoneInternalDirective extends DropZoneBase {
+    constructor(element, renderer, ngZone, uploadService) {
+        super(element, renderer, 'k-dropzone-hover');
+        this.ngZone = ngZone;
         this.uploadService = uploadService;
-        this.progressComplete = 0;
-    }
-    subscribeUploadProgress(uploadProgressHandler) {
-        this.uploadProgressSubscription = this.uploadService.uploadProgressEvent.subscribe(uploadProgressHandler);
+        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());
+        });
     }
-    fileHasValidationErrors(file) {
-        return fileHasValidationErrors(file);
+    ngOnDestroy() {
+        this.ngZone.runOutsideAngular(() => {
+            if (this.unsubscribeDocumentDragEnter) {
+                this.unsubscribeDocumentDragEnter();
+            }
+            if (this.unsubscribeDocumentDragOver) {
+                this.unsubscribeDocumentDragOver();
+            }
+        });
     }
-    filesHaveValidationErrors(files) {
-        return filesHaveValidationErrors(files);
+    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;
     }
-    ngOnDestroy() {
-        this.uploadProgressSubscription.unsubscribe();
+    /**
+     * @hidden
+     */
+    onDocumentDragOver() {
+        this.lastDragDocument = new Date();
+        return false;
     }
-    getFileValidationMessage(file) {
-        let validationMessage;
-        if (file.validationErrors && file.validationErrors.length > 0) {
-            validationMessage = this.localization.get(file.validationErrors[0]);
+    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 validationMessage;
+        return false;
     }
-    getTotalFilesSizeMessage(files) {
-        return getTotalFilesSizeMessage(files);
+}
+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]
+    `
+                }]
+        }], 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 FileSelectDirective {
+    constructor(uploadService, navigation, el) {
+        this.uploadService = uploadService;
+        this.navigation = navigation;
+        this.type = "file";
+        this.autocomplete = "off";
+        this.tabIndex = -1;
+        this.element = el;
     }
-    textFor(key) {
-        return this.localization.get(key);
+    get nameAttribute() {
+        return this.uploadService.async.saveField;
+    }
+    get multipleAttribute() {
+        return this.multiple ? "multiple" : null;
+    }
+    get dirAttribute() {
+        return this.dir;
+    }
+    get disabledAttribute() {
+        return this.disabled ? "true" : null;
+    }
+    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;
+        });
     }
 }
+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')}`;
+    get restrictions() {
+        return this._restrictions;
+    }
+    get hostDisabledClass() {
+        return this.disabled;
+    }
+    get dir() {
+        return this.direction;
+    }
+    ngOnInit() {
+        this.renderer.removeAttribute(this.wrapper, "tabindex");
+        if (this.zoneId) {
+            this.dropZoneService.addComponent(this, this.zoneId);
         }
-        return `${fileCount} ${this.textFor('filesBatchStatus')}`;
     }
-    get isUploadSuccessful() {
-        return this.files[0].state === FileState.Uploaded;
+    /**
+     * @hidden
+     */
+    textFor(key) {
+        return this.localization.get(key);
     }
-    get isUploadFailed() {
-        return this.files[0].state === FileState.Failed;
+    /**
+     * Focuses the underlying input element.
+     */
+    focus() {
+        setTimeout(() => {
+            this.fileSelectButton.nativeElement.focus();
+        });
     }
-};
-__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>
+    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) // eslint-disable-line no-forward-ref
+        }
+    ], 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) // eslint-disable-line no-forward-ref
+                        }
+                    ],
+                    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 */
+/* eslint-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) // eslint-disable-line no-forward-ref
 };
 /**
  * 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 +4048,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 +4288,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 +4447,38 @@ 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 */
+/* eslint-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 +4513,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 +4561,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 +4603,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 +4654,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 +4679,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 +4725,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 };
+