@progress/kendo-angular-upload 16.5.0-develop.6 → 16.6.0-develop.1

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

@@ -5,8 +5,8 @@
 import * as i1 from '@angular/common/http';
 import { HttpHeaders, HttpRequest, HttpEventType, HttpResponse } from '@angular/common/http';
 import * as i0 from '@angular/core';
-import { EventEmitter, Injectable, Directive, ElementRef, ContentChild, ViewChild, Input, HostBinding, Output, Inject, HostListener, Component, ViewChildren, forwardRef, isDevMode, NgModule } from '@angular/core';
-import { guid, Keys, isControlRequired, isDocumentAvailable, KendoInput, isChanged } from '@progress/kendo-angular-common';
+import { EventEmitter, Injectable, Directive, ElementRef, ContentChild, ViewChild, Input, HostBinding, Output, Component, HostListener, ViewChildren, Inject, forwardRef, isDevMode, NgModule } from '@angular/core';
+import { guid, Keys, isControlRequired, isChanged, isDocumentAvailable, KendoInput, ResizeBatchService } from '@progress/kendo-angular-common';
 import { fileAudioIcon, fileVideoIcon, fileImageIcon, fileTxtIcon, filePresentationIcon, fileDataIcon, fileProgrammingIcon, filePdfIcon, fileConfigIcon, fileZipIcon, fileDiscImageIcon, arrowRotateCwSmallIcon, playSmIcon, pauseSmIcon, cancelIcon, xIcon, copyIcon, fileIcon, checkIcon, exclamationCircleIcon, uploadIcon } from '@progress/kendo-svg-icons';
 import { NgControl, NG_VALUE_ACCESSOR } from '@angular/forms';
 import * as i1$1 from '@progress/kendo-angular-l10n';
@@ -14,15 +14,12 @@ import { ComponentMessages, LocalizationService, L10N_PREFIX } from '@progress/k
 import { fromEvent, merge } from 'rxjs';
 import { filter } from 'rxjs/operators';
 import { validatePackage } from '@progress/kendo-licensing';
-import * as i3 from '@angular/common';
-import { CommonModule } from '@angular/common';
 import { trigger, state, style, transition, animate } from '@angular/animations';
-import * as i4 from '@progress/kendo-angular-progressbar';
-import { ProgressBarModule } from '@progress/kendo-angular-progressbar';
-import * as i5 from '@progress/kendo-angular-icons';
-import { IconsModule } from '@progress/kendo-angular-icons';
-import * as i10 from '@progress/kendo-angular-buttons';
-import { ButtonsModule } from '@progress/kendo-angular-buttons';
+import { ButtonComponent } from '@progress/kendo-angular-buttons';
+import { NgIf, NgFor, NgClass, NgTemplateOutlet } from '@angular/common';
+import { IconWrapperComponent, IconsService } from '@progress/kendo-angular-icons';
+import { ProgressBarComponent } from '@progress/kendo-angular-progressbar';
+import { PopupService } from '@progress/kendo-angular-popup';
 
 /**
  * Lists the possible states of a file.
@@ -1491,6 +1488,63 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             type: Injectable
         }] });
 
+/**
+ * @hidden
+ */
+const INVALIDMAXFILESIZE = "invalidMaxFileSize";
+/**
+ * @hidden
+ */
+const INVALIDMINFILESIZE = "invalidMinFileSize";
+/**
+ * @hidden
+ */
+const INVALIDFILEEXTENSION = "invalidFileExtension";
+const validateFileExtension = (file, allowedExtensions) => {
+    if (allowedExtensions.length > 0) {
+        if (allowedExtensions.indexOf(file.extension.toLowerCase()) < 0) {
+            file.validationErrors = file.validationErrors || [];
+            if (file.validationErrors.indexOf(INVALIDFILEEXTENSION) < 0) {
+                file.validationErrors.push(INVALIDFILEEXTENSION);
+            }
+        }
+    }
+};
+const validateFileSize = (file, minFileSize, maxFileSize) => {
+    if (minFileSize !== 0 && file.size < minFileSize) {
+        file.validationErrors = file.validationErrors || [];
+        if (file.validationErrors.indexOf(INVALIDMINFILESIZE) < 0) {
+            file.validationErrors.push(INVALIDMINFILESIZE);
+        }
+    }
+    if (maxFileSize !== 0 && file.size > maxFileSize) {
+        file.validationErrors = file.validationErrors || [];
+        if (file.validationErrors.indexOf(INVALIDMAXFILESIZE) < 0) {
+            file.validationErrors.push(INVALIDMAXFILESIZE);
+        }
+    }
+};
+const parseAllowedExtensions = (extensions) => {
+    const allowedExtensions = extensions.map((ext) => {
+        const parsedExt = (ext.substring(0, 1) === ".") ? ext : ("." + ext);
+        return parsedExt.toLowerCase();
+    });
+    return allowedExtensions;
+};
+/**
+ * @hidden
+ */
+const validateFiles = (files, restrictionInfo) => {
+    const allowedExtensions = parseAllowedExtensions(restrictionInfo.allowedExtensions);
+    const maxFileSize = restrictionInfo.maxFileSize;
+    const minFileSize = restrictionInfo.minFileSize;
+    let i;
+    for (i = 0; i < files.length; i++) {
+        validateFileExtension(files[i], allowedExtensions);
+        validateFileSize(files[i], minFileSize, maxFileSize);
+    }
+};
+
 /**
  * @hidden
  */
@@ -1498,8 +1552,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-upload',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1721765981,
-    version: '16.5.0-develop.6',
+    publishDate: 1721827607,
+    version: '16.6.0-develop.1',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -1512,11 +1566,12 @@ class FileTemplateDirective {
     }
 }
 FileTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FileTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-FileTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: FileTemplateDirective, selector: "[kendoUploadFileTemplate], [kendoFileSelectFileTemplate]", ngImport: i0 });
+FileTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: FileTemplateDirective, isStandalone: true, selector: "[kendoUploadFileTemplate], [kendoFileSelectFileTemplate]", ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FileTemplateDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[kendoUploadFileTemplate], [kendoFileSelectFileTemplate]'
+                    selector: '[kendoUploadFileTemplate], [kendoFileSelectFileTemplate]',
+                    standalone: true
                 }]
         }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
 
@@ -1529,11 +1584,12 @@ class FileInfoTemplateDirective {
     }
 }
 FileInfoTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FileInfoTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-FileInfoTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: FileInfoTemplateDirective, selector: "[kendoUploadFileInfoTemplate], [kendoFileSelectFileInfoTemplate]", ngImport: i0 });
+FileInfoTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: FileInfoTemplateDirective, isStandalone: true, selector: "[kendoUploadFileInfoTemplate], [kendoFileSelectFileInfoTemplate]", ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FileInfoTemplateDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[kendoUploadFileInfoTemplate], [kendoFileSelectFileInfoTemplate]'
+                    selector: '[kendoUploadFileInfoTemplate], [kendoFileSelectFileInfoTemplate]',
+                    standalone: true
                 }]
         }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
 
@@ -1771,221 +1827,120 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Output
             }] } });
 
+/* eslint-disable no-debugger */
 /**
  * @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 UploadActionButtonsComponent {
+    constructor(uploadService, localization, navigation) {
+        this.uploadService = uploadService;
+        this.localization = localization;
+        this.navigation = navigation;
+        this.hostDefaultClass = true;
     }
-};
-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 actionButtonsEndClassName() {
+        return this.actionsLayout === 'end';
     }
-    if (maxFileSize !== 0 && file.size > maxFileSize) {
-        file.validationErrors = file.validationErrors || [];
-        if (file.validationErrors.indexOf(INVALIDMAXFILESIZE) < 0) {
-            file.validationErrors.push(INVALIDMAXFILESIZE);
-        }
+    get actionButtonsStretchedClassName() {
+        return this.actionsLayout === 'stretched';
     }
-};
-const parseAllowedExtensions = (extensions) => {
-    const allowedExtensions = extensions.map((ext) => {
-        const parsedExt = (ext.substring(0, 1) === ".") ? ext : ("." + ext);
-        return parsedExt.toLowerCase();
-    });
-    return allowedExtensions;
-};
-/**
- * @hidden
- */
-const validateFiles = (files, restrictionInfo) => {
-    const allowedExtensions = parseAllowedExtensions(restrictionInfo.allowedExtensions);
-    const maxFileSize = restrictionInfo.maxFileSize;
-    const minFileSize = restrictionInfo.minFileSize;
-    let i;
-    for (i = 0; i < files.length; i++) {
-        validateFileExtension(files[i], allowedExtensions);
-        validateFileSize(files[i], minFileSize, maxFileSize);
+    get actionButtonsStartClassName() {
+        return this.actionsLayout === 'start';
     }
-};
-
-/**
- * @hidden
- */
-class DropZoneBase {
-    constructor(element, renderer, cssClass) {
-        this.element = element;
-        this.renderer = renderer;
-        this.hideIntervalElement = null;
-        this.hoverClass = cssClass;
+    get actionButtonsCenterClassName() {
+        return this.actionsLayout === 'center';
     }
-    /**
-     * @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);
+    onUploadButtonFocus() {
+        if (!this.navigation.focused) {
+            this.navigation.focusedIndex = this.navigation.lastIndex;
         }
-        return false;
     }
-    /**
-     * @hidden
-     */
-    onElementDragOverListener() {
-        this.lastDragElement = new Date();
-        return false;
+    onUploadButtonClick(event) {
+        event.stopImmediatePropagation();
+        this.performUpload();
     }
-    calculateTimeDiff(prevEvent) {
-        return new Date().getTime() - prevEvent.getTime();
+    performUpload() {
+        if (!this.disabled) {
+            this.uploadService.uploadFiles();
+            this.navigation.focusSelectButton();
+        }
     }
-    addClass(className) {
-        this.renderer.addClass(this.element.nativeElement, className);
+    onClearButtonClick(event) {
+        event.stopImmediatePropagation();
+        this.clearFiles();
     }
-    removeClass(className) {
-        this.renderer.removeClass(this.element.nativeElement, className);
+    clearFiles() {
+        if (!this.disabled) {
+            this.uploadService.clearFiles();
+            this.navigation.focusSelectButton();
+        }
+    }
+    textFor(key) {
+        return this.localization.get(key);
     }
 }
-DropZoneBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DropZoneBase, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: 'hoverClass' }], target: i0.ɵɵFactoryTarget.Directive });
-DropZoneBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: DropZoneBase, host: { listeners: { "dragenter": "onElementDragEnterListener()", "dragover": "onElementDragOverListener()" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DropZoneBase, decorators: [{
-            type: Directive
-        }], ctorParameters: function () {
-        return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: undefined, decorators: [{
-                        type: Inject,
-                        args: ['hoverClass']
-                    }] }];
-    }, propDecorators: { onElementDragEnterListener: [{
-                type: HostListener,
-                args: ['dragenter']
-            }], onElementDragOverListener: [{
-                type: HostListener,
-                args: ['dragover']
+UploadActionButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UploadActionButtonsComponent, deps: [{ token: UploadService }, { token: i1$1.LocalizationService }, { token: NavigationService }], target: i0.ɵɵFactoryTarget.Component });
+UploadActionButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: UploadActionButtonsComponent, isStandalone: true, selector: "kendo-upload-action-buttons", inputs: { disabled: "disabled", actionsLayout: "actionsLayout" }, host: { properties: { "class.k-actions": "this.hostDefaultClass", "class.k-actions-end": "this.actionButtonsEndClassName", "class.k-actions-stretched": "this.actionButtonsStretchedClassName", "class.k-actions-start": "this.actionButtonsStartClassName", "class.k-actions-center": "this.actionButtonsCenterClassName" } }, viewQueries: [{ propertyName: "clearButton", first: true, predicate: ["clearButton"], descendants: true, static: true }, { propertyName: "uploadButton", first: true, predicate: ["uploadButton"], descendants: true, static: true }], ngImport: i0, template: `
+        <button #clearButton role="button" class="k-button k-button-md k-rounded-md k-button-solid k-button-solid-base k-clear-selected"
+            (click)="onClearButtonClick($event)">
+                {{textFor('clearSelectedFiles')}}
+        </button>
+        <button #uploadButton role="button" class="k-button k-button-md k-rounded-md k-button-solid k-button-solid-primary k-upload-selected"
+            (focus)="onUploadButtonFocus()"
+            (click)="onUploadButtonClick($event)">
+                {{textFor('uploadSelectedFiles')}}
+        </button>
+    `, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UploadActionButtonsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-upload-action-buttons',
+                    template: `
+        <button #clearButton role="button" class="k-button k-button-md k-rounded-md k-button-solid k-button-solid-base k-clear-selected"
+            (click)="onClearButtonClick($event)">
+                {{textFor('clearSelectedFiles')}}
+        </button>
+        <button #uploadButton role="button" class="k-button k-button-md k-rounded-md k-button-solid k-button-solid-primary k-upload-selected"
+            (focus)="onUploadButtonFocus()"
+            (click)="onUploadButtonClick($event)">
+                {{textFor('uploadSelectedFiles')}}
+        </button>
+    `,
+                    standalone: true
+                }]
+        }], 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']
             }] } });
 
 /**
  * @hidden
  */
-class DropZoneInternalDirective extends DropZoneBase {
-    constructor(element, renderer, ngZone, uploadService) {
-        super(element, renderer, 'k-hover');
-        this.ngZone = ngZone;
-        this.uploadService = uploadService;
-        this.initialClassName = true;
-        this.hideIntervalDocument = null;
-        this.activeClass = 'k-dropzone-active';
-        this.ngZone.runOutsideAngular(() => {
-            this.unsubscribeDocumentDragEnter = this.renderer.listen('document', 'dragenter', () => this.onDocumentDragEnter());
-            this.unsubscribeDocumentDragOver = this.renderer.listen('document', 'dragover', () => this.onDocumentDragOver());
-        });
-    }
-    ngOnDestroy() {
-        this.ngZone.runOutsideAngular(() => {
-            if (this.unsubscribeDocumentDragEnter) {
-                this.unsubscribeDocumentDragEnter();
-            }
-            if (this.unsubscribeDocumentDragOver) {
-                this.unsubscribeDocumentDragOver();
-            }
-        });
-    }
-    onDocumentDragEnter() {
-        this.addClass(this.activeClass);
-        this.lastDragDocument = new Date();
-        if (!this.hideIntervalDocument) {
-            this.hideIntervalDocument = setInterval(() => {
-                if (this.calculateTimeDiff(this.lastDragDocument) < 100) {
-                    return;
-                }
-                this.removeClass(this.activeClass);
-                clearInterval(this.hideIntervalDocument);
-                this.hideIntervalDocument = null;
-            }, 100);
-        }
-        return false;
-    }
-    /**
-     * @hidden
-     */
-    onDocumentDragOver() {
-        this.lastDragDocument = new Date();
-        return false;
-    }
-    onDropListener(event) {
-        const droppedFiles = event.dataTransfer.files;
-        if (droppedFiles.length > 0 && !this.disabled) {
-            let files = getAllFileInfo(droppedFiles);
-            files = assignGuidToFiles(files, !this.uploadService.async.batch);
-            if (!this.multiple) {
-                files.splice(1, files.length - 1);
-                this.uploadService.clearFiles();
-            }
-            validateFiles(files, this.restrictions);
-            this.uploadService.addFiles(files);
-        }
-        return false;
-    }
-}
-DropZoneInternalDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DropZoneInternalDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: UploadService }], target: i0.ɵɵFactoryTarget.Directive });
-DropZoneInternalDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: DropZoneInternalDirective, selector: "\n      [kendoUploadInternalDropZone],\n      [kendoFileSelectInternalDropZone]\n    ", inputs: { disabled: "disabled", multiple: "multiple", restrictions: "restrictions" }, host: { listeners: { "drop": "onDropListener($event)" }, properties: { "class.k-dropzone": "this.initialClassName", "class.k-upload-dropzone": "this.initialClassName" } }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DropZoneInternalDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: `
-      [kendoUploadInternalDropZone],
-      [kendoFileSelectInternalDropZone]
-    `
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: UploadService }]; }, propDecorators: { disabled: [{
-                type: Input
-            }], multiple: [{
-                type: Input
-            }], restrictions: [{
-                type: Input
-            }], initialClassName: [{
-                type: HostBinding,
-                args: ['class.k-dropzone']
-            }, {
-                type: HostBinding,
-                args: ['class.k-upload-dropzone']
-            }], onDropListener: [{
-                type: HostListener,
-                args: ['drop', ['$event']]
-            }] } });
-
-/**
- * @hidden
- */
-class FileListItemDirective {
-    constructor(el, navigationService, uploadService) {
-        this.navigationService = navigationService;
+class FileListItemDirective {
+    constructor(el, navigationService, uploadService) {
+        this.navigationService = navigationService;
         this.uploadService = uploadService;
         this.fileClass = true;
         this.focused = false;
@@ -2033,11 +1988,12 @@ class FileListItemDirective {
     }
 }
 FileListItemDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FileListItemDirective, deps: [{ token: i0.ElementRef }, { token: NavigationService }, { token: UploadService }], target: i0.ɵɵFactoryTarget.Directive });
-FileListItemDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: FileListItemDirective, selector: "[kendoUploadFileListItem]", inputs: { files: "files", index: "index" }, host: { listeners: { "focus": "onFocus()", "blur": "onBlur()", "click": "onClick($event)" }, properties: { "class.k-file": "this.fileClass", "attr.data-uid": "this.uidAttribute", "attr.tabIndex": "this.tabIndex", "class.k-file-error": "this.kFileError", "class.k-file-invalid": "this.kFileInvalid", "class.k-file-progress": "this.kFileProgress", "class.k-file-success": "this.kFileSuccess", "class.k-focus": "this.kStateFocused" } }, ngImport: i0 });
+FileListItemDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: FileListItemDirective, isStandalone: true, selector: "[kendoUploadFileListItem]", inputs: { files: "files", index: "index" }, host: { listeners: { "focus": "onFocus()", "blur": "onBlur()", "click": "onClick($event)" }, properties: { "class.k-file": "this.fileClass", "attr.data-uid": "this.uidAttribute", "attr.tabIndex": "this.tabIndex", "class.k-file-error": "this.kFileError", "class.k-file-invalid": "this.kFileInvalid", "class.k-file-progress": "this.kFileProgress", "class.k-file-success": "this.kFileSuccess", "class.k-focus": "this.kStateFocused" } }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FileListItemDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[kendoUploadFileListItem]'
+                    selector: '[kendoUploadFileListItem]',
+                    standalone: true
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: NavigationService }, { type: UploadService }]; }, propDecorators: { files: [{
                 type: Input
@@ -2204,7 +2160,7 @@ class FileListItemActionButtonComponent {
     }
 }
 FileListItemActionButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FileListItemActionButtonComponent, deps: [{ token: UploadService }, { token: i1$1.LocalizationService }, { token: NavigationService }], target: i0.ɵɵFactoryTarget.Component });
-FileListItemActionButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: FileListItemActionButtonComponent, selector: "kendo-upload-file-list-item-action-button", inputs: { file: "file", disabled: "disabled", progress: "progress" }, ngImport: i0, template: `
+FileListItemActionButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: FileListItemActionButtonComponent, isStandalone: true, selector: "kendo-upload-file-list-item-action-button", inputs: { file: "file", disabled: "disabled", progress: "progress" }, ngImport: i0, template: `
     <span class="k-upload-actions">
         <span class="k-upload-pct" *ngIf="isUploading || isPaused">{{progress}}%</span>
 
@@ -2253,7 +2209,7 @@ FileListItemActionButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion
             (click)="onRemoveCancelClick($event)"
         ></button>
     </span>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i10.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FileListItemActionButtonComponent, decorators: [{
             type: Component,
             args: [{
@@ -2307,7 +2263,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             (click)="onRemoveCancelClick($event)"
         ></button>
     </span>
-    `
+    `,
+                    standalone: true,
+                    imports: [NgIf, ButtonComponent]
                 }]
         }], ctorParameters: function () { return [{ type: UploadService }, { type: i1$1.LocalizationService }, { type: NavigationService }]; }, propDecorators: { file: [{
                 type: Input
@@ -2364,7 +2322,7 @@ class FileListMultipleItemsComponent extends FileListItemBase {
     }
 }
 FileListMultipleItemsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FileListMultipleItemsComponent, deps: [{ token: i1$1.LocalizationService }, { token: UploadService }], target: i0.ɵɵFactoryTarget.Component });
-FileListMultipleItemsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: FileListMultipleItemsComponent, selector: "kendo-upload-file-list-multiple-items", inputs: { disabled: "disabled", files: "files", fileInfoTemplate: "fileInfoTemplate" }, usesInheritance: true, ngImport: i0, template: `
+FileListMultipleItemsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: FileListMultipleItemsComponent, isStandalone: true, selector: "kendo-upload-file-list-multiple-items", inputs: { disabled: "disabled", files: "files", fileInfoTemplate: "fileInfoTemplate" }, usesInheritance: true, ngImport: i0, template: `
         <kendo-progressbar
             [@progressState]="showProgress"
             [value]="progressComplete"
@@ -2409,7 +2367,7 @@ FileListMultipleItemsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
             [disabled]='disabled'
             [progress]='progressComplete'>
         </kendo-upload-file-list-item-action-button>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.ProgressBarComponent, selector: "kendo-progressbar", inputs: ["label", "progressCssStyle", "progressCssClass", "emptyCssStyle", "emptyCssClass", "animation"], outputs: ["animationEnd"], exportAs: ["kendoProgressBar"] }, { kind: "component", type: i5.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: FileListItemActionButtonComponent, selector: "kendo-upload-file-list-item-action-button", inputs: ["file", "disabled", "progress"] }], animations: [
+    `, isInline: true, dependencies: [{ kind: "component", type: ProgressBarComponent, selector: "kendo-progressbar", inputs: ["label", "progressCssStyle", "progressCssClass", "emptyCssStyle", "emptyCssClass", "animation"], outputs: ["animationEnd"], exportAs: ["kendoProgressBar"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: FileListItemActionButtonComponent, selector: "kendo-upload-file-list-item-action-button", inputs: ["file", "disabled", "progress"] }], animations: [
         trigger('progressState', [
             state('active', style({ opacity: 1 })),
             state('inactive', style({ opacity: 0 })),
@@ -2476,7 +2434,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             [disabled]='disabled'
             [progress]='progressComplete'>
         </kendo-upload-file-list-item-action-button>
-    `
+    `,
+                    standalone: true,
+                    imports: [ProgressBarComponent, IconWrapperComponent, NgIf, NgFor, NgClass, NgTemplateOutlet, FileListItemActionButtonComponent]
                 }]
         }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }, { type: UploadService }]; }, propDecorators: { disabled: [{
                 type: Input
@@ -2541,7 +2501,7 @@ class FileListSingleItemComponent extends FileListItemBase {
     }
 }
 FileListSingleItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FileListSingleItemComponent, deps: [{ token: i1$1.LocalizationService }, { token: UploadService }], target: i0.ɵɵFactoryTarget.Component });
-FileListSingleItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: FileListSingleItemComponent, selector: "kendo-upload-file-list-single-item", inputs: { disabled: "disabled", file: "file", fileInfoTemplate: "fileInfoTemplate" }, usesInheritance: true, ngImport: i0, template: `
+FileListSingleItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: FileListSingleItemComponent, isStandalone: true, selector: "kendo-upload-file-list-single-item", inputs: { disabled: "disabled", file: "file", fileInfoTemplate: "fileInfoTemplate" }, usesInheritance: true, ngImport: i0, template: `
         <kendo-progressbar
             [@progressState]="showProgress"
             [value]="progressComplete"
@@ -2578,7 +2538,7 @@ FileListSingleItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.
             [disabled]='disabled'
             [progress]='progressComplete'>
         </kendo-upload-file-list-item-action-button>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.ProgressBarComponent, selector: "kendo-progressbar", inputs: ["label", "progressCssStyle", "progressCssClass", "emptyCssStyle", "emptyCssClass", "animation"], outputs: ["animationEnd"], exportAs: ["kendoProgressBar"] }, { kind: "component", type: i5.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: FileListItemActionButtonComponent, selector: "kendo-upload-file-list-item-action-button", inputs: ["file", "disabled", "progress"] }], animations: [
+    `, isInline: true, dependencies: [{ kind: "component", type: ProgressBarComponent, selector: "kendo-progressbar", inputs: ["label", "progressCssStyle", "progressCssClass", "emptyCssStyle", "emptyCssClass", "animation"], outputs: ["animationEnd"], exportAs: ["kendoProgressBar"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: FileListItemActionButtonComponent, selector: "kendo-upload-file-list-item-action-button", inputs: ["file", "disabled", "progress"] }], animations: [
         trigger('progressState', [
             state('active', style({ opacity: 1 })),
             state('inactive', style({ opacity: 0 })),
@@ -2637,7 +2597,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             [disabled]='disabled'
             [progress]='progressComplete'>
         </kendo-upload-file-list-item-action-button>
-    `
+    `,
+                    standalone: true,
+                    imports: [ProgressBarComponent, IconWrapperComponent, NgIf, NgClass, NgTemplateOutlet, FileListItemActionButtonComponent]
                 }]
         }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }, { type: UploadService }]; }, propDecorators: { disabled: [{
                 type: Input
@@ -2723,7 +2685,7 @@ class FileListComponent {
     }
 }
 FileListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FileListComponent, deps: [{ token: UploadService }, { token: NavigationService }], target: i0.ɵɵFactoryTarget.Component });
-FileListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: FileListComponent, selector: "[kendo-upload-file-list]", inputs: { disabled: "disabled", fileList: "fileList", fileTemplate: "fileTemplate", fileInfoTemplate: "fileInfoTemplate" }, host: { properties: { "attr.role": "this.fileListRole" } }, viewQueries: [{ propertyName: "fileListItems", predicate: FileListItemDirective, descendants: true }], ngImport: i0, template: `
+FileListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: FileListComponent, isStandalone: true, selector: "[kendo-upload-file-list]", inputs: { disabled: "disabled", fileList: "fileList", fileTemplate: "fileTemplate", fileInfoTemplate: "fileInfoTemplate" }, host: { properties: { "attr.role": "this.fileListRole" } }, viewQueries: [{ propertyName: "fileListItems", predicate: FileListItemDirective, descendants: true }], ngImport: i0, template: `
         <ng-template ngFor
             [ngForOf]="fileList"
             let-files
@@ -2749,7 +2711,7 @@ FileListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
                         }"></ng-container>
             </li>
         </ng-template>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: FileListItemDirective, selector: "[kendoUploadFileListItem]", inputs: ["files", "index"] }, { kind: "component", type: FileListMultipleItemsComponent, selector: "kendo-upload-file-list-multiple-items", inputs: ["disabled", "files", "fileInfoTemplate"] }, { kind: "component", type: FileListSingleItemComponent, selector: "kendo-upload-file-list-single-item", inputs: ["disabled", "file", "fileInfoTemplate"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: FileListItemDirective, selector: "[kendoUploadFileListItem]", inputs: ["files", "index"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FileListSingleItemComponent, selector: "kendo-upload-file-list-single-item", inputs: ["disabled", "file", "fileInfoTemplate"] }, { kind: "component", type: FileListMultipleItemsComponent, selector: "kendo-upload-file-list-multiple-items", inputs: ["disabled", "files", "fileInfoTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FileListComponent, decorators: [{
             type: Component,
             args: [{
@@ -2780,7 +2742,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         }"></ng-container>
             </li>
         </ng-template>
-    `
+    `,
+                    standalone: true,
+                    imports: [NgFor, FileListItemDirective, NgIf, FileListSingleItemComponent, FileListMultipleItemsComponent, NgTemplateOutlet]
                 }]
         }], ctorParameters: function () { return [{ type: UploadService }, { type: NavigationService }]; }, propDecorators: { disabled: [{
                 type: Input
@@ -2798,6 +2762,86 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 args: ['attr.role']
             }] } });
 
+/**
+ * @hidden
+ */
+class UploadStatusTotalComponent {
+    constructor(localization) {
+        this.localization = localization;
+        this.checkmarkIcon = checkIcon;
+        this.exceptionSVGIcon = exclamationCircleIcon;
+        this.uploadSVGIcon = uploadIcon;
+        this.pauseSVGIcon = pauseSmIcon;
+    }
+    get iconClass() {
+        if (!this.isUploading && !this.isFailed) {
+            return 'checkmark';
+        }
+        if (!this.isUploading && this.isFailed) {
+            return 'exception';
+        }
+        if (this.isUploading) {
+            return 'upload';
+        }
+        if (this.isPaused) {
+            return 'pause-sm';
+        }
+    }
+    get SVGIconClass() {
+        if (!this.isUploading && !this.isFailed) {
+            return this.checkmarkIcon;
+        }
+        if (!this.isUploading && this.isFailed) {
+            return this.exceptionSVGIcon;
+        }
+        if (this.isUploading) {
+            return this.uploadSVGIcon;
+        }
+        if (this.isPaused) {
+            return this.pauseSVGIcon;
+        }
+    }
+    ngDoCheck() {
+        this.isPaused = this.fileList.hasFileWithState([FileState.Paused]);
+        this.isFailed = this.fileList.hasFileWithState([FileState.Failed]);
+        this.isUploading = this.fileList.hasFileWithState([FileState.Uploading]);
+        if (this.isPaused && !this.isUploading) {
+            this.statusText = this.localization.get('headerStatusPaused');
+        }
+        else {
+            this.statusText = this.isUploading ? this.localization.get('headerStatusUploading')
+                : this.localization.get('headerStatusUploaded');
+        }
+    }
+}
+UploadStatusTotalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UploadStatusTotalComponent, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+UploadStatusTotalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: UploadStatusTotalComponent, isStandalone: true, selector: "kendo-upload-status-total", inputs: { fileList: "fileList" }, ngImport: i0, template: `
+        <kendo-icon-wrapper
+            [name]="iconClass"
+            [svgIcon]="SVGIconClass"
+        >
+        </kendo-icon-wrapper>
+        {{statusText}}
+    `, isInline: true, dependencies: [{ kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UploadStatusTotalComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-upload-status-total',
+                    template: `
+        <kendo-icon-wrapper
+            [name]="iconClass"
+            [svgIcon]="SVGIconClass"
+        >
+        </kendo-icon-wrapper>
+        {{statusText}}
+    `,
+                    standalone: true,
+                    imports: [IconWrapperComponent]
+                }]
+        }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }]; }, propDecorators: { fileList: [{
+                type: Input
+            }] } });
+
 /**
  * @hidden
  */
@@ -2857,11 +2901,12 @@ class FileSelectDirective {
     }
 }
 FileSelectDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FileSelectDirective, deps: [{ token: UploadService }, { token: NavigationService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-FileSelectDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: FileSelectDirective, selector: "[kendoFileSelect]", inputs: { dir: "dir", disabled: "disabled", multiple: "multiple", restrictions: "restrictions", accept: "accept", required: "required" }, host: { listeners: { "change": "onInputChange($event)" }, properties: { "attr.type": "this.type", "attr.autocomplete": "this.autocomplete", "attr.tabindex": "this.tabIndex", "attr.aria-hidden": "this.ariaHidden", "class.k-hidden": "this.classNames", "attr.name": "this.nameAttribute", "attr.multiple": "this.multipleAttribute", "attr.dir": "this.dirAttribute", "attr.disabled": "this.disabledAttribute", "attr.accept": "this.acceptAttribute", "attr.required": "this.requiredAttribute" } }, ngImport: i0 });
+FileSelectDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: FileSelectDirective, isStandalone: true, selector: "[kendoFileSelect]", inputs: { dir: "dir", disabled: "disabled", multiple: "multiple", restrictions: "restrictions", accept: "accept", required: "required" }, host: { listeners: { "change": "onInputChange($event)" }, properties: { "attr.type": "this.type", "attr.autocomplete": "this.autocomplete", "attr.tabindex": "this.tabIndex", "attr.aria-hidden": "this.ariaHidden", "class.k-hidden": "this.classNames", "attr.name": "this.nameAttribute", "attr.multiple": "this.multipleAttribute", "attr.dir": "this.dirAttribute", "attr.disabled": "this.disabledAttribute", "attr.accept": "this.acceptAttribute", "attr.required": "this.requiredAttribute" } }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FileSelectDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[kendoFileSelect]'
+                    selector: '[kendoFileSelect]',
+                    standalone: true
                 }]
         }], ctorParameters: function () { return [{ type: UploadService }, { type: NavigationService }, { type: i0.ElementRef }]; }, propDecorators: { dir: [{
                 type: Input
@@ -2916,706 +2961,242 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
 /**
  * @hidden
  */
-class Messages extends ComponentMessages {
-}
-Messages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-Messages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: Messages, inputs: { cancel: "cancel", clearSelectedFiles: "clearSelectedFiles", dropFilesHere: "dropFilesHere", externalDropFilesHere: "externalDropFilesHere", filesBatchStatus: "filesBatchStatus", filesBatchStatusFailed: "filesBatchStatusFailed", filesBatchStatusUploaded: "filesBatchStatusUploaded", fileStatusFailed: "fileStatusFailed", fileStatusUploaded: "fileStatusUploaded", headerStatusPaused: "headerStatusPaused", headerStatusUploaded: "headerStatusUploaded", headerStatusUploading: "headerStatusUploading", invalidFileExtension: "invalidFileExtension", invalidMaxFileSize: "invalidMaxFileSize", invalidMinFileSize: "invalidMinFileSize", pause: "pause", remove: "remove", resume: "resume", retry: "retry", select: "select", uploadSelectedFiles: "uploadSelectedFiles" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: Messages, decorators: [{
-            type: Directive
-        }], propDecorators: { cancel: [{
-                type: Input
-            }], clearSelectedFiles: [{
-                type: Input
-            }], dropFilesHere: [{
-                type: Input
-            }], externalDropFilesHere: [{
-                type: Input
-            }], filesBatchStatus: [{
-                type: Input
-            }], filesBatchStatusFailed: [{
-                type: Input
-            }], filesBatchStatusUploaded: [{
-                type: Input
-            }], fileStatusFailed: [{
-                type: Input
-            }], fileStatusUploaded: [{
-                type: Input
-            }], headerStatusPaused: [{
-                type: Input
-            }], headerStatusUploaded: [{
-                type: Input
-            }], headerStatusUploading: [{
-                type: Input
-            }], invalidFileExtension: [{
-                type: Input
-            }], invalidMaxFileSize: [{
-                type: Input
-            }], invalidMinFileSize: [{
-                type: Input
-            }], pause: [{
-                type: Input
-            }], remove: [{
-                type: Input
-            }], resume: [{
-                type: Input
-            }], retry: [{
-                type: Input
-            }], select: [{
-                type: Input
-            }], uploadSelectedFiles: [{
-                type: Input
-            }] } });
-
-/**
- * @hidden
- */
-class LocalizedMessagesDirective extends Messages {
-    constructor(service) {
-        super();
-        this.service = service;
+class DropZoneBase {
+    constructor(element, renderer, cssClass) {
+        this.element = element;
+        this.renderer = renderer;
+        this.hideIntervalElement = null;
+        this.hoverClass = cssClass;
     }
-}
-LocalizedMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LocalizedMessagesDirective, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
-LocalizedMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: LocalizedMessagesDirective, selector: "\n    [kendoUploadLocalizedMessages],\n    [kendoFileSelectLocalizedMessages],\n    [kendoUploadDropZoneLocalizedMessages]\n  ", providers: [
-        {
-            provide: Messages,
-            useExisting: forwardRef(() => LocalizedMessagesDirective)
+    /**
+     * @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);
         }
-    ], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LocalizedMessagesDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    providers: [
-                        {
-                            provide: Messages,
-                            useExisting: forwardRef(() => LocalizedMessagesDirective)
-                        }
-                    ],
-                    selector: `
-    [kendoUploadLocalizedMessages],
-    [kendoFileSelectLocalizedMessages],
-    [kendoUploadDropZoneLocalizedMessages]
-  `
-                }]
-        }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }]; } });
-
-/**
- * @hidden
- */
-const FILESELECT_VALUE_ACCESSOR = {
-    multi: true,
-    provide: NG_VALUE_ACCESSOR,
-    useExisting: forwardRef(() => FileSelectComponent)
-};
-let idx$1 = 0;
-class FileSelectComponent extends UploadFileSelectBase {
-    constructor(uploadService, localization, navigation, dropZoneService, ngZone, renderer, cdr, wrapper, injector) {
-        super(uploadService, navigation, cdr, injector, ngZone);
-        this.uploadService = uploadService;
-        this.localization = localization;
-        this.navigation = navigation;
-        this.dropZoneService = dropZoneService;
-        this.ngZone = ngZone;
-        this.renderer = renderer;
-        this.cdr = cdr;
-        this.injector = injector;
-        /**
-         * Fires when the value of the component has changed as a result of a successful `select` or `remove` operation.
-         */
-        this.valueChange = new EventEmitter();
-        /**
-         * @hidden
-         */
-        this._restrictions = {
-            allowedExtensions: [],
-            maxFileSize: 0,
-            minFileSize: 0
-        };
-        validatePackage(packageMetadata);
-        this.wrapper = wrapper.nativeElement;
-        this.direction = localization.rtl ? 'rtl' : 'ltr';
-        this.navigation.computeKeys();
-        this.localizationChangeSubscription = localization.changes.subscribe(({ rtl }) => {
-            this.direction = rtl ? 'rtl' : 'ltr';
-        });
-        this.subscribeBlur();
-        this.subscribeFocus();
-        this.attachEventHandlers();
-        this.setDefaultSettings();
-    }
-    get dir() {
-        return this.direction;
-    }
-    /**
-     * Sets the `name` attribute of the `input` element of the FileSelect.
-     */
-    set name(name) {
-        this.uploadService.async.saveField = name;
-    }
-    get name() {
-        return this.uploadService.async.saveField;
-    }
-    ngOnInit() {
-        const { buttonId, fileListId } = this.getIds();
-        this.focusableId = buttonId;
-        this.fileListId = fileListId;
-        if (this.zoneId) {
-            this.dropZoneService.addComponent(this, this.zoneId);
-        }
-        this.subs.add(this.renderer.listen(this.fileSelectInput.nativeElement, 'mouseenter', () => {
-            this.renderer.addClass(this.fileSelectButton.nativeElement, 'k-hover');
-        }));
-        this.subs.add(this.renderer.listen(this.fileSelectInput.nativeElement, 'mouseleave', () => {
-            this.renderer.removeClass(this.fileSelectButton.nativeElement, 'k-hover');
-        }));
-        this.ngZone.runOutsideAngular(() => {
-            this.subs.add(this.renderer.listen(this.wrapper, 'keydown', event => this.handleKeydown(event)));
-        });
-    }
-    /**
-     * @hidden
-     */
-    textFor(key) {
-        return this.localization.get(key);
-    }
-    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();
-        }
-    }
-    /**
-     * 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
-     */
-    getIds() {
-        const id = ++idx$1;
-        const buttonId = `k-fileselect-button-${id}`;
-        const fileListId = `k-fileselect-file-list-${id}`;
-        return { buttonId, fileListId };
-    }
     /**
      * @hidden
      */
-    writeValue(newValue) {
-        super.writeValue(newValue, validateInitialFileSelectFile, 'addInitialFileSelectFiles');
-    }
-    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.onTabOut).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();
-        });
-    }
-    handleKeydown(event) {
-        if (this.disabled) {
-            return;
-        }
-        if (event.target === this.fileSelectButton.nativeElement && (event.keyCode === Keys.Enter || event.keyCode === Keys.Space)) {
-            event.preventDefault();
-            this.fileSelectInput.nativeElement.click();
-            return;
-        }
-        if (hasClasses(event.target, UPLOAD_CLASSES) ||
-            (!isFocusable(event.target) && !hasClasses(event.target, IGNORE_TARGET_CLASSES))) {
-            this.navigation.process(event, 'fileselect');
-        }
-    }
-    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);
-        }));
+    onElementDragOverListener() {
+        this.lastDragElement = new Date();
+        return false;
     }
-    setDefaultSettings() {
-        this.uploadService.async.autoUpload = false;
-        this.uploadService.component = 'FileSelect';
+    calculateTimeDiff(prevEvent) {
+        return new Date().getTime() - prevEvent.getTime();
     }
-}
-FileSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FileSelectComponent, deps: [{ token: UploadService }, { token: i1$1.LocalizationService }, { token: NavigationService }, { token: DropZoneService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-FileSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: FileSelectComponent, selector: "kendo-fileselect", inputs: { name: "name" }, outputs: { valueChange: "valueChange" }, host: { properties: { "attr.dir": "this.dir" } }, providers: [
-        LocalizationService,
-        NavigationService,
-        UploadService,
-        DropZoneService,
-        FILESELECT_VALUE_ACCESSOR,
-        {
-            provide: L10N_PREFIX,
-            useValue: 'kendo.fileselect'
-        },
-        {
-            provide: KendoInput,
-            useExisting: forwardRef(() => FileSelectComponent)
-        }
-    ], viewQueries: [{ propertyName: "fileSelectInput", first: true, predicate: ["fileSelectInput"], descendants: true, static: true }], exportAs: ["kendoFileSelect"], usesInheritance: true, ngImport: i0, template: `
-        <ng-container kendoFileSelectLocalizedMessages
-            i18n-dropFilesHere="kendo.fileselect.dropFilesHere|The drop zone hint"
-            dropFilesHere="Drop files here to select"
-
-            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 class="k-upload-button-wrap">
-            <button 
-                kendoButton
-                #fileSelectButton
-                class="k-upload-button"
-                type="button"
-                role="button"
-                (click)="fileSelectInput.click()"
-                (focus)="onFileSelectButtonFocus()"
-                [id]="focusableId"
-                [attr.aria-label]="textFor('select')"
-                [attr.tabindex]="tabindex"
-                [attr.aria-expanded]="hasFileList"
-                [attr.aria-controls]="hasFileList ? fileListId : undefined"
-            >
-                {{textFor('select')}}
-            </button>
-            <input kendoFileSelect #fileSelectInput
-                [dir]="direction"
-                [accept]="accept"
-                [restrictions]="restrictions"
-                [multiple]="multiple"
-                [disabled]="disabled"
-                [required]="isControlRequired"
-            />
-        </div>
-            <div class="k-dropzone-hint">{{textFor('dropFilesHere')}}</div>
-        </div>
-        <ul kendo-upload-file-list
-            class="k-upload-files k-reset"
-            *ngIf="hasFileList"
-            [disabled]="disabled"
-            [fileList]="fileList.files"
-            [fileTemplate]="fileTemplate"
-            [fileInfoTemplate]="fileInfoTemplate"
-            [id]="fileListId">
-        </ul>
-    `, isInline: true, dependencies: [{ kind: "directive", type: DropZoneInternalDirective, selector: "\n      [kendoUploadInternalDropZone],\n      [kendoFileSelectInternalDropZone]\n    ", inputs: ["disabled", "multiple", "restrictions"] }, { kind: "component", type: FileListComponent, selector: "[kendo-upload-file-list]", inputs: ["disabled", "fileList", "fileTemplate", "fileInfoTemplate"] }, { kind: "directive", type: FileSelectDirective, selector: "[kendoFileSelect]", inputs: ["dir", "disabled", "multiple", "restrictions", "accept", "required"] }, { kind: "directive", type: LocalizedMessagesDirective, selector: "\n    [kendoUploadLocalizedMessages],\n    [kendoFileSelectLocalizedMessages],\n    [kendoUploadDropZoneLocalizedMessages]\n  " }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i10.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FileSelectComponent, decorators: [{
-            type: Component,
-            args: [{
-                    exportAs: 'kendoFileSelect',
-                    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 class="k-upload-button-wrap">
-            <button 
-                kendoButton
-                #fileSelectButton
-                class="k-upload-button"
-                type="button"
-                role="button"
-                (click)="fileSelectInput.click()"
-                (focus)="onFileSelectButtonFocus()"
-                [id]="focusableId"
-                [attr.aria-label]="textFor('select')"
-                [attr.tabindex]="tabindex"
-                [attr.aria-expanded]="hasFileList"
-                [attr.aria-controls]="hasFileList ? fileListId : undefined"
-            >
-                {{textFor('select')}}
-            </button>
-            <input kendoFileSelect #fileSelectInput
-                [dir]="direction"
-                [accept]="accept"
-                [restrictions]="restrictions"
-                [multiple]="multiple"
-                [disabled]="disabled"
-                [required]="isControlRequired"
-            />
-        </div>
-            <div class="k-dropzone-hint">{{textFor('dropFilesHere')}}</div>
-        </div>
-        <ul kendo-upload-file-list
-            class="k-upload-files k-reset"
-            *ngIf="hasFileList"
-            [disabled]="disabled"
-            [fileList]="fileList.files"
-            [fileTemplate]="fileTemplate"
-            [fileInfoTemplate]="fileInfoTemplate"
-            [id]="fileListId">
-        </ul>
-    `
-                }]
-        }], 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 }, { type: i0.Injector }]; }, propDecorators: { fileSelectInput: [{
-                type: ViewChild,
-                args: ['fileSelectInput', { static: true }]
-            }], dir: [{
-                type: HostBinding,
-                args: ['attr.dir']
-            }], name: [{
-                type: Input
-            }], valueChange: [{
-                type: Output
-            }] } });
-
-/**
- * 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;
+    addClass(className) {
+        this.renderer.addClass(this.element.nativeElement, className);
     }
-    get override() {
-        return true;
+    removeClass(className) {
+        this.renderer.removeClass(this.element.nativeElement, className);
     }
 }
-CustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CustomMessagesComponent, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-CustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CustomMessagesComponent, selector: "kendo-upload-messages, kendo-fileselect-messages, kendo-uploaddropzone-messages", providers: [
-        {
-            provide: Messages,
-            useExisting: forwardRef(() => CustomMessagesComponent)
-        }
-    ], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CustomMessagesComponent, decorators: [{
-            type: Component,
-            args: [{
-                    providers: [
-                        {
-                            provide: Messages,
-                            useExisting: forwardRef(() => CustomMessagesComponent)
-                        }
-                    ],
-                    selector: 'kendo-upload-messages, kendo-fileselect-messages, kendo-uploaddropzone-messages',
-                    template: ``
-                }]
-        }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }]; } });
-
-/* eslint-disable no-debugger */
-/**
- * @hidden
- */
-class UploadActionButtonsComponent {
-    constructor(uploadService, localization, navigation) {
-        this.uploadService = uploadService;
-        this.localization = localization;
-        this.navigation = navigation;
-        this.hostDefaultClass = true;
-    }
-    get actionButtonsEndClassName() {
-        return this.actionsLayout === 'end';
-    }
-    get actionButtonsStretchedClassName() {
-        return this.actionsLayout === 'stretched';
-    }
-    get actionButtonsStartClassName() {
-        return this.actionsLayout === 'start';
-    }
-    get actionButtonsCenterClassName() {
-        return this.actionsLayout === 'center';
-    }
-    onUploadButtonFocus() {
-        if (!this.navigation.focused) {
-            this.navigation.focusedIndex = this.navigation.lastIndex;
-        }
+DropZoneBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DropZoneBase, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: 'hoverClass' }], target: i0.ɵɵFactoryTarget.Directive });
+DropZoneBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: DropZoneBase, host: { listeners: { "dragenter": "onElementDragEnterListener()", "dragover": "onElementDragOverListener()" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DropZoneBase, decorators: [{
+            type: Directive
+        }], ctorParameters: function () {
+        return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: undefined, decorators: [{
+                        type: Inject,
+                        args: ['hoverClass']
+                    }] }];
+    }, propDecorators: { onElementDragEnterListener: [{
+                type: HostListener,
+                args: ['dragenter']
+            }], onElementDragOverListener: [{
+                type: HostListener,
+                args: ['dragover']
+            }] } });
+
+/**
+ * @hidden
+ */
+class DropZoneInternalDirective extends DropZoneBase {
+    constructor(element, renderer, ngZone, uploadService) {
+        super(element, renderer, 'k-hover');
+        this.ngZone = ngZone;
+        this.uploadService = uploadService;
+        this.initialClassName = true;
+        this.hideIntervalDocument = null;
+        this.activeClass = 'k-dropzone-active';
+        this.ngZone.runOutsideAngular(() => {
+            this.unsubscribeDocumentDragEnter = this.renderer.listen('document', 'dragenter', () => this.onDocumentDragEnter());
+            this.unsubscribeDocumentDragOver = this.renderer.listen('document', 'dragover', () => this.onDocumentDragOver());
+        });
     }
-    onUploadButtonClick(event) {
-        event.stopImmediatePropagation();
-        this.performUpload();
+    ngOnDestroy() {
+        this.ngZone.runOutsideAngular(() => {
+            if (this.unsubscribeDocumentDragEnter) {
+                this.unsubscribeDocumentDragEnter();
+            }
+            if (this.unsubscribeDocumentDragOver) {
+                this.unsubscribeDocumentDragOver();
+            }
+        });
     }
-    performUpload() {
-        if (!this.disabled) {
-            this.uploadService.uploadFiles();
-            this.navigation.focusSelectButton();
+    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;
     }
-    onClearButtonClick(event) {
-        event.stopImmediatePropagation();
-        this.clearFiles();
+    /**
+     * @hidden
+     */
+    onDocumentDragOver() {
+        this.lastDragDocument = new Date();
+        return false;
     }
-    clearFiles() {
-        if (!this.disabled) {
-            this.uploadService.clearFiles();
-            this.navigation.focusSelectButton();
+    onDropListener(event) {
+        const droppedFiles = event.dataTransfer.files;
+        if (droppedFiles.length > 0 && !this.disabled) {
+            let files = getAllFileInfo(droppedFiles);
+            files = assignGuidToFiles(files, !this.uploadService.async.batch);
+            if (!this.multiple) {
+                files.splice(1, files.length - 1);
+                this.uploadService.clearFiles();
+            }
+            validateFiles(files, this.restrictions);
+            this.uploadService.addFiles(files);
         }
-    }
-    textFor(key) {
-        return this.localization.get(key);
+        return false;
     }
 }
-UploadActionButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UploadActionButtonsComponent, deps: [{ token: UploadService }, { token: i1$1.LocalizationService }, { token: NavigationService }], target: i0.ɵɵFactoryTarget.Component });
-UploadActionButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: UploadActionButtonsComponent, selector: "kendo-upload-action-buttons", inputs: { disabled: "disabled", actionsLayout: "actionsLayout" }, host: { properties: { "class.k-actions": "this.hostDefaultClass", "class.k-actions-end": "this.actionButtonsEndClassName", "class.k-actions-stretched": "this.actionButtonsStretchedClassName", "class.k-actions-start": "this.actionButtonsStartClassName", "class.k-actions-center": "this.actionButtonsCenterClassName" } }, viewQueries: [{ propertyName: "clearButton", first: true, predicate: ["clearButton"], descendants: true, static: true }, { propertyName: "uploadButton", first: true, predicate: ["uploadButton"], descendants: true, static: true }], ngImport: i0, template: `
-        <button #clearButton role="button" class="k-button k-button-md k-rounded-md k-button-solid k-button-solid-base k-clear-selected"
-            (click)="onClearButtonClick($event)">
-                {{textFor('clearSelectedFiles')}}
-        </button>
-        <button #uploadButton role="button" class="k-button k-button-md k-rounded-md k-button-solid k-button-solid-primary k-upload-selected"
-            (focus)="onUploadButtonFocus()"
-            (click)="onUploadButtonClick($event)">
-                {{textFor('uploadSelectedFiles')}}
-        </button>
-    `, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UploadActionButtonsComponent, decorators: [{
-            type: Component,
+DropZoneInternalDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DropZoneInternalDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: UploadService }], target: i0.ɵɵFactoryTarget.Directive });
+DropZoneInternalDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: DropZoneInternalDirective, isStandalone: true, selector: "\n      [kendoUploadInternalDropZone],\n      [kendoFileSelectInternalDropZone]\n    ", inputs: { disabled: "disabled", multiple: "multiple", restrictions: "restrictions" }, host: { listeners: { "drop": "onDropListener($event)" }, properties: { "class.k-dropzone": "this.initialClassName", "class.k-upload-dropzone": "this.initialClassName" } }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DropZoneInternalDirective, decorators: [{
+            type: Directive,
             args: [{
-                    selector: 'kendo-upload-action-buttons',
-                    template: `
-        <button #clearButton role="button" class="k-button k-button-md k-rounded-md k-button-solid k-button-solid-base k-clear-selected"
-            (click)="onClearButtonClick($event)">
-                {{textFor('clearSelectedFiles')}}
-        </button>
-        <button #uploadButton role="button" class="k-button k-button-md k-rounded-md k-button-solid k-button-solid-primary k-upload-selected"
-            (focus)="onUploadButtonFocus()"
-            (click)="onUploadButtonClick($event)">
-                {{textFor('uploadSelectedFiles')}}
-        </button>
-    `
+                    selector: `
+      [kendoUploadInternalDropZone],
+      [kendoFileSelectInternalDropZone]
+    `,
+                    standalone: true
                 }]
-        }], ctorParameters: function () { return [{ type: UploadService }, { type: i1$1.LocalizationService }, { type: NavigationService }]; }, propDecorators: { disabled: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: UploadService }]; }, propDecorators: { disabled: [{
                 type: Input
-            }], actionsLayout: [{
+            }], multiple: [{
                 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: [{
+            }], restrictions: [{
+                type: Input
+            }], initialClassName: [{
                 type: HostBinding,
-                args: ['class.k-actions-start']
-            }], actionButtonsCenterClassName: [{
+                args: ['class.k-dropzone']
+            }, {
                 type: HostBinding,
-                args: ['class.k-actions-center']
+                args: ['class.k-upload-dropzone']
+            }], onDropListener: [{
+                type: HostListener,
+                args: ['drop', ['$event']]
             }] } });
 
 /**
  * @hidden
  */
-class UploadStatusTotalComponent {
-    constructor(localization) {
-        this.localization = localization;
-        this.checkmarkIcon = checkIcon;
-        this.exceptionSVGIcon = exclamationCircleIcon;
-        this.uploadSVGIcon = uploadIcon;
-        this.pauseSVGIcon = pauseSmIcon;
-    }
-    get iconClass() {
-        if (!this.isUploading && !this.isFailed) {
-            return 'checkmark';
-        }
-        if (!this.isUploading && this.isFailed) {
-            return 'exception';
-        }
-        if (this.isUploading) {
-            return 'upload';
-        }
-        if (this.isPaused) {
-            return 'pause-sm';
-        }
-    }
-    get SVGIconClass() {
-        if (!this.isUploading && !this.isFailed) {
-            return this.checkmarkIcon;
-        }
-        if (!this.isUploading && this.isFailed) {
-            return this.exceptionSVGIcon;
-        }
-        if (this.isUploading) {
-            return this.uploadSVGIcon;
-        }
-        if (this.isPaused) {
-            return this.pauseSVGIcon;
-        }
-    }
-    ngDoCheck() {
-        this.isPaused = this.fileList.hasFileWithState([FileState.Paused]);
-        this.isFailed = this.fileList.hasFileWithState([FileState.Failed]);
-        this.isUploading = this.fileList.hasFileWithState([FileState.Uploading]);
-        if (this.isPaused && !this.isUploading) {
-            this.statusText = this.localization.get('headerStatusPaused');
-        }
-        else {
-            this.statusText = this.isUploading ? this.localization.get('headerStatusUploading')
-                : this.localization.get('headerStatusUploaded');
-        }
+class Messages extends ComponentMessages {
+}
+Messages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+Messages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: Messages, inputs: { cancel: "cancel", clearSelectedFiles: "clearSelectedFiles", dropFilesHere: "dropFilesHere", externalDropFilesHere: "externalDropFilesHere", filesBatchStatus: "filesBatchStatus", filesBatchStatusFailed: "filesBatchStatusFailed", filesBatchStatusUploaded: "filesBatchStatusUploaded", fileStatusFailed: "fileStatusFailed", fileStatusUploaded: "fileStatusUploaded", headerStatusPaused: "headerStatusPaused", headerStatusUploaded: "headerStatusUploaded", headerStatusUploading: "headerStatusUploading", invalidFileExtension: "invalidFileExtension", invalidMaxFileSize: "invalidMaxFileSize", invalidMinFileSize: "invalidMinFileSize", pause: "pause", remove: "remove", resume: "resume", retry: "retry", select: "select", uploadSelectedFiles: "uploadSelectedFiles" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: Messages, decorators: [{
+            type: Directive
+        }], propDecorators: { cancel: [{
+                type: Input
+            }], clearSelectedFiles: [{
+                type: Input
+            }], dropFilesHere: [{
+                type: Input
+            }], externalDropFilesHere: [{
+                type: Input
+            }], filesBatchStatus: [{
+                type: Input
+            }], filesBatchStatusFailed: [{
+                type: Input
+            }], filesBatchStatusUploaded: [{
+                type: Input
+            }], fileStatusFailed: [{
+                type: Input
+            }], fileStatusUploaded: [{
+                type: Input
+            }], headerStatusPaused: [{
+                type: Input
+            }], headerStatusUploaded: [{
+                type: Input
+            }], headerStatusUploading: [{
+                type: Input
+            }], invalidFileExtension: [{
+                type: Input
+            }], invalidMaxFileSize: [{
+                type: Input
+            }], invalidMinFileSize: [{
+                type: Input
+            }], pause: [{
+                type: Input
+            }], remove: [{
+                type: Input
+            }], resume: [{
+                type: Input
+            }], retry: [{
+                type: Input
+            }], select: [{
+                type: Input
+            }], uploadSelectedFiles: [{
+                type: Input
+            }] } });
+
+/**
+ * @hidden
+ */
+class LocalizedMessagesDirective extends Messages {
+    constructor(service) {
+        super();
+        this.service = service;
     }
 }
-UploadStatusTotalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UploadStatusTotalComponent, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-UploadStatusTotalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: UploadStatusTotalComponent, selector: "kendo-upload-status-total", inputs: { fileList: "fileList" }, ngImport: i0, template: `
-        <kendo-icon-wrapper
-            [name]="iconClass"
-            [svgIcon]="SVGIconClass"
-        >
-        </kendo-icon-wrapper>
-        {{statusText}}
-    `, isInline: true, dependencies: [{ kind: "component", type: i5.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UploadStatusTotalComponent, decorators: [{
-            type: Component,
+LocalizedMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LocalizedMessagesDirective, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
+LocalizedMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: LocalizedMessagesDirective, isStandalone: true, selector: "\n    [kendoUploadLocalizedMessages],\n    [kendoFileSelectLocalizedMessages],\n    [kendoUploadDropZoneLocalizedMessages]\n  ", providers: [
+        {
+            provide: Messages,
+            useExisting: forwardRef(() => LocalizedMessagesDirective)
+        }
+    ], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LocalizedMessagesDirective, decorators: [{
+            type: Directive,
             args: [{
-                    selector: 'kendo-upload-status-total',
-                    template: `
-        <kendo-icon-wrapper
-            [name]="iconClass"
-            [svgIcon]="SVGIconClass"
-        >
-        </kendo-icon-wrapper>
-        {{statusText}}
-    `
+                    providers: [
+                        {
+                            provide: Messages,
+                            useExisting: forwardRef(() => LocalizedMessagesDirective)
+                        }
+                    ],
+                    selector: `
+    [kendoUploadLocalizedMessages],
+    [kendoFileSelectLocalizedMessages],
+    [kendoUploadDropZoneLocalizedMessages]
+  `,
+                    standalone: true
                 }]
-        }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }]; }, propDecorators: { fileList: [{
-                type: Input
-            }] } });
+        }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }]; } });
 
 /**
  * @hidden
@@ -3625,7 +3206,7 @@ const UPLOAD_VALUE_ACCESSOR = {
     provide: NG_VALUE_ACCESSOR,
     useExisting: forwardRef(() => UploadComponent)
 };
-let idx = 0;
+let idx$1 = 0;
 /**
  * Represents the [Kendo UI Upload component for Angular]({% slug overview_upload %}).
  */
@@ -3947,7 +3528,7 @@ class UploadComponent extends UploadFileSelectBase {
      * @hidden
      */
     getIds() {
-        const id = ++idx;
+        const id = ++idx$1;
         const buttonId = `k-upload-button-${id}`;
         const fileListId = `k-upload-file-list-${id}`;
         return { buttonId, fileListId };
@@ -4108,7 +3689,7 @@ class UploadComponent extends UploadFileSelectBase {
     }
 }
 UploadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UploadComponent, deps: [{ token: UploadService }, { token: i1$1.LocalizationService }, { token: NavigationService }, { token: DropZoneService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-UploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: UploadComponent, selector: "kendo-upload", inputs: { autoUpload: "autoUpload", batch: "batch", withCredentials: "withCredentials", saveField: "saveField", saveHeaders: "saveHeaders", saveMethod: "saveMethod", saveUrl: "saveUrl", responseType: "responseType", removeField: "removeField", removeHeaders: "removeHeaders", removeMethod: "removeMethod", removeUrl: "removeUrl", chunkable: "chunkable", concurrent: "concurrent", showFileList: "showFileList", tabIndex: "tabIndex", actionsLayout: "actionsLayout" }, outputs: { cancel: "cancel", clear: "clear", complete: "complete", error: "error", pause: "pause", resume: "resume", success: "success", upload: "upload", uploadProgress: "uploadProgress", valueChange: "valueChange" }, host: { properties: { "attr.dir": "this.dir" } }, providers: [
+UploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: UploadComponent, isStandalone: true, selector: "kendo-upload", inputs: { autoUpload: "autoUpload", batch: "batch", withCredentials: "withCredentials", saveField: "saveField", saveHeaders: "saveHeaders", saveMethod: "saveMethod", saveUrl: "saveUrl", responseType: "responseType", removeField: "removeField", removeHeaders: "removeHeaders", removeMethod: "removeMethod", removeUrl: "removeUrl", chunkable: "chunkable", concurrent: "concurrent", showFileList: "showFileList", tabIndex: "tabIndex", actionsLayout: "actionsLayout" }, outputs: { cancel: "cancel", clear: "clear", complete: "complete", error: "error", pause: "pause", resume: "resume", success: "success", upload: "upload", uploadProgress: "uploadProgress", valueChange: "valueChange" }, host: { properties: { "attr.dir": "this.dir" } }, providers: [
         LocalizationService,
         NavigationService,
         UploadService,
@@ -4233,7 +3814,7 @@ UploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versio
         [disabled]="disabled"
         [actionsLayout]="actionsLayout">
     </kendo-upload-action-buttons>
-    `, isInline: true, dependencies: [{ kind: "directive", type: DropZoneInternalDirective, selector: "\n      [kendoUploadInternalDropZone],\n      [kendoFileSelectInternalDropZone]\n    ", inputs: ["disabled", "multiple", "restrictions"] }, { kind: "component", type: FileListComponent, selector: "[kendo-upload-file-list]", inputs: ["disabled", "fileList", "fileTemplate", "fileInfoTemplate"] }, { kind: "directive", type: FileSelectDirective, selector: "[kendoFileSelect]", inputs: ["dir", "disabled", "multiple", "restrictions", "accept", "required"] }, { kind: "directive", type: LocalizedMessagesDirective, selector: "\n    [kendoUploadLocalizedMessages],\n    [kendoFileSelectLocalizedMessages],\n    [kendoUploadDropZoneLocalizedMessages]\n  " }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i10.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: UploadActionButtonsComponent, selector: "kendo-upload-action-buttons", inputs: ["disabled", "actionsLayout"] }, { kind: "component", type: UploadStatusTotalComponent, selector: "kendo-upload-status-total", inputs: ["fileList"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n    [kendoUploadLocalizedMessages],\n    [kendoFileSelectLocalizedMessages],\n    [kendoUploadDropZoneLocalizedMessages]\n  " }, { kind: "directive", type: DropZoneInternalDirective, selector: "\n      [kendoUploadInternalDropZone],\n      [kendoFileSelectInternalDropZone]\n    ", inputs: ["disabled", "multiple", "restrictions"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: FileSelectDirective, selector: "[kendoFileSelect]", inputs: ["dir", "disabled", "multiple", "restrictions", "accept", "required"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: UploadStatusTotalComponent, selector: "kendo-upload-status-total", inputs: ["fileList"] }, { kind: "component", type: FileListComponent, selector: "[kendo-upload-file-list]", inputs: ["disabled", "fileList", "fileTemplate", "fileInfoTemplate"] }, { kind: "component", type: UploadActionButtonsComponent, selector: "kendo-upload-action-buttons", inputs: ["disabled", "actionsLayout"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UploadComponent, decorators: [{
             type: Component,
             args: [{
@@ -4365,7 +3946,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
         [disabled]="disabled"
         [actionsLayout]="actionsLayout">
     </kendo-upload-action-buttons>
-    `
+    `,
+                    standalone: true,
+                    imports: [LocalizedMessagesDirective, DropZoneInternalDirective, ButtonComponent, FileSelectDirective, NgIf, UploadStatusTotalComponent, FileListComponent, UploadActionButtonsComponent]
                 }]
         }], 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 }, { type: i0.Injector }]; }, propDecorators: { autoUpload: [{
                 type: Input
@@ -4435,221 +4018,661 @@ class UploadDropZoneDirective {
         this.dropZoneService = dropZoneService;
     }
     /**
-     * @hidden
+     * @hidden
+     */
+    onElementDragEnter() {
+        return false;
+    }
+    /**
+     * @hidden
+     */
+    onElementDragOver() {
+        return false;
+    }
+    /**
+     * @hidden
+     */
+    onDropListener(event) {
+        const components = this.componentInstance;
+        if (!isPresent(components)) {
+            return;
+        }
+        components.forEach((component) => {
+            const droppedFiles = event.dataTransfer.files;
+            if (droppedFiles.length > 0 && !component.disabled) {
+                let files = getAllFileInfo(droppedFiles);
+                if (component instanceof UploadComponent) {
+                    files = assignGuidToFiles(files, !component.batch);
+                }
+                else {
+                    files = assignGuidToFiles(files, true);
+                }
+                if (!component.multiple) {
+                    files.splice(1, files.length - 1);
+                    component.clearFiles();
+                }
+                validateFiles(files, component.restrictions);
+                component.addFiles(files);
+            }
+        });
+        return false;
+    }
+    /**
+     * @hidden
+     */
+    get componentInstance() {
+        return this.dropZoneService.getComponents(this.zoneId);
+    }
+}
+UploadDropZoneDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UploadDropZoneDirective, deps: [{ token: DropZoneService }], target: i0.ɵɵFactoryTarget.Directive });
+UploadDropZoneDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: UploadDropZoneDirective, isStandalone: true, selector: "[kendoUploadDropZone], [kendoFileSelectDropZone]", inputs: { zoneId: ["kendoUploadDropZone", "zoneId"] }, host: { listeners: { "dragenter": "onElementDragEnter()", "dragover": "onElementDragOver()", "drop": "onDropListener($event)" } }, providers: [
+        DropZoneService
+    ], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UploadDropZoneDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    providers: [
+                        DropZoneService
+                    ],
+                    selector: '[kendoUploadDropZone], [kendoFileSelectDropZone]',
+                    standalone: true
+                }]
+        }], 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']]
+            }] } });
+
+/**
+ * Represents the [Kendo UI UploadDropZone component for Angular]({% slug overview_upload %}).
+ */
+class UploadDropZoneComponent extends DropZoneBase {
+    constructor(element, renderer, localization) {
+        super(element, renderer, 'k-external-dropzone-hover');
+        this.localization = localization;
+        this.hostClass = true;
+        this._svgIcon = uploadIcon;
+        this.localizationChangeSubscription = this.localization.changes.subscribe(({ rtl }) => {
+            this.direction = rtl ? 'rtl' : 'ltr';
+        });
+    }
+    get dirAttribute() {
+        return this.direction;
+    }
+    /**
+     * Defines an SVGIcon to be rendered inside the DropZone.
+     * The input can take either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
+     */
+    set svgIcon(icon) {
+        if (isDevMode() && icon && this.icon && this.iconClass) {
+            throw new Error('Setting both icon/svgIcon and iconClass options at the same time is not supported.');
+        }
+        this._svgIcon = icon;
+    }
+    get svgIcon() {
+        return this._svgIcon;
+    }
+    /**
+     * @hidden
+     */
+    textFor(key) {
+        return this.localization.get(key);
+    }
+    /**
+     * @hidden
+     */
+    get iconClasses() {
+        if (this.icon) {
+            return `${this.icon}`;
+        }
+        if (!this.icon && !this.iconClass) {
+            return 'upload';
+        }
+    }
+    ngOnDestroy() {
+        if (this.localizationChangeSubscription) {
+            this.localizationChangeSubscription.unsubscribe();
+        }
+    }
+}
+UploadDropZoneComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UploadDropZoneComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+UploadDropZoneComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: UploadDropZoneComponent, isStandalone: true, selector: "kendo-uploaddropzone", inputs: { zoneId: "zoneId", icon: "icon", iconClass: "iconClass", svgIcon: "svgIcon" }, host: { properties: { "class.k-external-dropzone": "this.hostClass", "attr.dir": "this.dirAttribute" } }, providers: [
+        LocalizationService,
+        {
+            provide: L10N_PREFIX,
+            useValue: 'kendo.uploaddropzone'
+        }
+    ], exportAs: ["kendoUploadDropZone"], usesInheritance: true, ngImport: i0, template: `
+        <ng-container kendoUploadDropZoneLocalizedMessages
+            i18n-externalDropFilesHere='kendo.uploaddropzone.externalDropFilesHere|Sets the external drop-zone hint'
+            externalDropFilesHere='Drag and drop files here to upload'>
+        </ng-container>
+        <div class='k-dropzone-inner' [kendoUploadDropZone]="zoneId">
+            <kendo-icon-wrapper
+                size="xxxlarge"
+                innerCssClass="k-dropzone-icon"
+                [name]="iconClasses"
+                [customFontClass]="iconClass"
+                [svgIcon]="svgIcon"
+            ></kendo-icon-wrapper>
+            <span class="k-dropzone-hint">{{ textFor('externalDropFilesHere') }}</span>
+            <span class="k-dropzone-note">
+                <ng-content></ng-content>
+            </span>
+        </div>
+    `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n    [kendoUploadLocalizedMessages],\n    [kendoFileSelectLocalizedMessages],\n    [kendoUploadDropZoneLocalizedMessages]\n  " }, { kind: "directive", type: UploadDropZoneDirective, selector: "[kendoUploadDropZone], [kendoFileSelectDropZone]", inputs: ["kendoUploadDropZone"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UploadDropZoneComponent, decorators: [{
+            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'>
+        </ng-container>
+        <div class='k-dropzone-inner' [kendoUploadDropZone]="zoneId">
+            <kendo-icon-wrapper
+                size="xxxlarge"
+                innerCssClass="k-dropzone-icon"
+                [name]="iconClasses"
+                [customFontClass]="iconClass"
+                [svgIcon]="svgIcon"
+            ></kendo-icon-wrapper>
+            <span class="k-dropzone-hint">{{ textFor('externalDropFilesHere') }}</span>
+            <span class="k-dropzone-note">
+                <ng-content></ng-content>
+            </span>
+        </div>
+    `,
+                    standalone: true,
+                    imports: [LocalizedMessagesDirective, UploadDropZoneDirective, IconWrapperComponent]
+                }]
+        }], 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
+            }], svgIcon: [{
+                type: Input
+            }] } });
+
+/**
+ * @hidden
+ */
+const FILESELECT_VALUE_ACCESSOR = {
+    multi: true,
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => FileSelectComponent)
+};
+let idx = 0;
+class FileSelectComponent extends UploadFileSelectBase {
+    constructor(uploadService, localization, navigation, dropZoneService, ngZone, renderer, cdr, wrapper, injector) {
+        super(uploadService, navigation, cdr, injector, ngZone);
+        this.uploadService = uploadService;
+        this.localization = localization;
+        this.navigation = navigation;
+        this.dropZoneService = dropZoneService;
+        this.ngZone = ngZone;
+        this.renderer = renderer;
+        this.cdr = cdr;
+        this.injector = injector;
+        /**
+         * Fires when the value of the component has changed as a result of a successful `select` or `remove` operation.
+         */
+        this.valueChange = new EventEmitter();
+        /**
+         * @hidden
+         */
+        this._restrictions = {
+            allowedExtensions: [],
+            maxFileSize: 0,
+            minFileSize: 0
+        };
+        validatePackage(packageMetadata);
+        this.wrapper = wrapper.nativeElement;
+        this.direction = localization.rtl ? 'rtl' : 'ltr';
+        this.navigation.computeKeys();
+        this.localizationChangeSubscription = localization.changes.subscribe(({ rtl }) => {
+            this.direction = rtl ? 'rtl' : 'ltr';
+        });
+        this.subscribeBlur();
+        this.subscribeFocus();
+        this.attachEventHandlers();
+        this.setDefaultSettings();
+    }
+    get dir() {
+        return this.direction;
+    }
+    /**
+     * Sets the `name` attribute of the `input` element of the FileSelect.
      */
-    onElementDragEnter() {
-        return false;
+    set name(name) {
+        this.uploadService.async.saveField = name;
+    }
+    get name() {
+        return this.uploadService.async.saveField;
+    }
+    ngOnInit() {
+        const { buttonId, fileListId } = this.getIds();
+        this.focusableId = buttonId;
+        this.fileListId = fileListId;
+        if (this.zoneId) {
+            this.dropZoneService.addComponent(this, this.zoneId);
+        }
+        this.subs.add(this.renderer.listen(this.fileSelectInput.nativeElement, 'mouseenter', () => {
+            this.renderer.addClass(this.fileSelectButton.nativeElement, 'k-hover');
+        }));
+        this.subs.add(this.renderer.listen(this.fileSelectInput.nativeElement, 'mouseleave', () => {
+            this.renderer.removeClass(this.fileSelectButton.nativeElement, 'k-hover');
+        }));
+        this.ngZone.runOutsideAngular(() => {
+            this.subs.add(this.renderer.listen(this.wrapper, 'keydown', event => this.handleKeydown(event)));
+        });
     }
     /**
      * @hidden
      */
-    onElementDragOver() {
-        return false;
+    textFor(key) {
+        return this.localization.get(key);
+    }
+    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();
+        }
+    }
+    /**
+     * 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.
      */
-    onDropListener(event) {
-        const components = this.componentInstance;
-        if (!isPresent(components)) {
-            return;
-        }
-        components.forEach((component) => {
-            const droppedFiles = event.dataTransfer.files;
-            if (droppedFiles.length > 0 && !component.disabled) {
-                let files = getAllFileInfo(droppedFiles);
-                if (component instanceof UploadComponent) {
-                    files = assignGuidToFiles(files, !component.batch);
-                }
-                else {
-                    files = assignGuidToFiles(files, true);
-                }
-                if (!component.multiple) {
-                    files.splice(1, files.length - 1);
-                    component.clearFiles();
-                }
-                validateFiles(files, component.restrictions);
-                component.addFiles(files);
-            }
-        });
+    isEmpty() {
         return false;
     }
     /**
      * @hidden
+     * Used by the external dropzone to add files to the FileSelect
      */
-    get componentInstance() {
-        return this.dropZoneService.getComponents(this.zoneId);
-    }
-}
-UploadDropZoneDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UploadDropZoneDirective, deps: [{ token: DropZoneService }], target: i0.ɵɵFactoryTarget.Directive });
-UploadDropZoneDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: UploadDropZoneDirective, selector: "[kendoUploadDropZone], [kendoFileSelectDropZone]", inputs: { zoneId: ["kendoUploadDropZone", "zoneId"] }, host: { listeners: { "dragenter": "onElementDragEnter()", "dragover": "onElementDragOver()", "drop": "onDropListener($event)" } }, providers: [
-        DropZoneService
-    ], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", 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']]
-            }] } });
-
-/**
- * Represents the [Kendo UI UploadDropZone component for Angular]({% slug overview_upload %}).
- */
-class UploadDropZoneComponent extends DropZoneBase {
-    constructor(element, renderer, localization) {
-        super(element, renderer, 'k-external-dropzone-hover');
-        this.localization = localization;
-        this.hostClass = true;
-        this._svgIcon = uploadIcon;
-        this.localizationChangeSubscription = this.localization.changes.subscribe(({ rtl }) => {
-            this.direction = rtl ? 'rtl' : 'ltr';
-        });
-    }
-    get dirAttribute() {
-        return this.direction;
+    addFiles(files) {
+        this.uploadService.addFiles(files);
     }
     /**
-     * Defines an SVGIcon to be rendered inside the DropZone.
-     * The input can take either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
+     * @hidden
      */
-    set svgIcon(icon) {
-        if (isDevMode() && icon && this.icon && this.iconClass) {
-            throw new Error('Setting both icon/svgIcon and iconClass options at the same time is not supported.');
-        }
-        this._svgIcon = icon;
-    }
-    get svgIcon() {
-        return this._svgIcon;
+    get selectButtonTabIndex() {
+        return this.disabled ? undefined : this.tabindex;
     }
     /**
      * @hidden
      */
-    textFor(key) {
-        return this.localization.get(key);
+    getIds() {
+        const id = ++idx;
+        const buttonId = `k-fileselect-button-${id}`;
+        const fileListId = `k-fileselect-file-list-${id}`;
+        return { buttonId, fileListId };
     }
     /**
      * @hidden
      */
-    get iconClasses() {
-        if (this.icon) {
-            return `${this.icon}`;
-        }
-        if (!this.icon && !this.iconClass) {
-            return 'upload';
+    writeValue(newValue) {
+        super.writeValue(newValue, validateInitialFileSelectFile, 'addInitialFileSelectFiles');
+    }
+    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.onTabOut).subscribe(() => {
+                if (this.navigation.focused) {
+                    this.ngZone.run(() => {
+                        this.navigation.focused = false;
+                        this.onTouchedCallback();
+                        this.onBlur.emit();
+                    });
+                }
+            });
+        });
     }
-    ngOnDestroy() {
-        if (this.localizationChangeSubscription) {
-            this.localizationChangeSubscription.unsubscribe();
+    subscribeFocus() {
+        this.wrapperFocusSubscription = this.navigation.onWrapperFocus.subscribe(() => {
+            this.onFocus.emit();
+        });
+        this.selectButtonFocusSubscription = this.navigation.onSelectButtonFocus.subscribe(() => {
+            this.fileSelectButton.nativeElement.focus();
+        });
+    }
+    handleKeydown(event) {
+        if (this.disabled) {
+            return;
+        }
+        if (event.target === this.fileSelectButton.nativeElement && (event.keyCode === Keys.Enter || event.keyCode === Keys.Space)) {
+            event.preventDefault();
+            this.fileSelectInput.nativeElement.click();
+            return;
+        }
+        if (hasClasses(event.target, UPLOAD_CLASSES) ||
+            (!isFocusable(event.target) && !hasClasses(event.target, IGNORE_TARGET_CLASSES))) {
+            this.navigation.process(event, 'fileselect');
         }
     }
+    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';
+    }
 }
-UploadDropZoneComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UploadDropZoneComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-UploadDropZoneComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: UploadDropZoneComponent, selector: "kendo-uploaddropzone", inputs: { zoneId: "zoneId", icon: "icon", iconClass: "iconClass", svgIcon: "svgIcon" }, host: { properties: { "class.k-external-dropzone": "this.hostClass", "attr.dir": "this.dirAttribute" } }, providers: [
+FileSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FileSelectComponent, deps: [{ token: UploadService }, { token: i1$1.LocalizationService }, { token: NavigationService }, { token: DropZoneService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+FileSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: FileSelectComponent, isStandalone: true, selector: "kendo-fileselect", inputs: { name: "name" }, outputs: { valueChange: "valueChange" }, host: { properties: { "attr.dir": "this.dir" } }, providers: [
         LocalizationService,
+        NavigationService,
+        UploadService,
+        DropZoneService,
+        FILESELECT_VALUE_ACCESSOR,
         {
             provide: L10N_PREFIX,
-            useValue: 'kendo.uploaddropzone'
+            useValue: 'kendo.fileselect'
+        },
+        {
+            provide: KendoInput,
+            useExisting: forwardRef(() => FileSelectComponent)
         }
-    ], 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'>
+    ], viewQueries: [{ propertyName: "fileSelectInput", first: true, predicate: ["fileSelectInput"], descendants: true, static: true }], exportAs: ["kendoFileSelect"], usesInheritance: true, ngImport: i0, template: `
+        <ng-container kendoFileSelectLocalizedMessages
+            i18n-dropFilesHere="kendo.fileselect.dropFilesHere|The drop zone hint"
+            dropFilesHere="Drop files here to select"
+
+            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 class='k-dropzone-inner' [kendoUploadDropZone]="zoneId">
-            <kendo-icon-wrapper
-                size="xxxlarge"
-                innerCssClass="k-dropzone-icon"
-                [name]="iconClasses"
-                [customFontClass]="iconClass"
-                [svgIcon]="svgIcon"
-            ></kendo-icon-wrapper>
-            <span class="k-dropzone-hint">{{ textFor('externalDropFilesHere') }}</span>
-            <span class="k-dropzone-note">
-                <ng-content></ng-content>
-            </span>
+        <div kendoFileSelectInternalDropZone
+            [restrictions]="restrictions"
+            [multiple]="multiple"
+            [disabled]="disabled">
+            <div class="k-upload-button-wrap">
+            <button 
+                kendoButton
+                #fileSelectButton
+                class="k-upload-button"
+                type="button"
+                role="button"
+                (click)="fileSelectInput.click()"
+                (focus)="onFileSelectButtonFocus()"
+                [id]="focusableId"
+                [attr.aria-label]="textFor('select')"
+                [attr.tabindex]="tabindex"
+                [attr.aria-expanded]="hasFileList"
+                [attr.aria-controls]="hasFileList ? fileListId : undefined"
+            >
+                {{textFor('select')}}
+            </button>
+            <input kendoFileSelect #fileSelectInput
+                [dir]="direction"
+                [accept]="accept"
+                [restrictions]="restrictions"
+                [multiple]="multiple"
+                [disabled]="disabled"
+                [required]="isControlRequired"
+            />
         </div>
-    `, isInline: true, dependencies: [{ kind: "component", type: i5.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: UploadDropZoneDirective, selector: "[kendoUploadDropZone], [kendoFileSelectDropZone]", inputs: ["kendoUploadDropZone"] }, { kind: "directive", type: LocalizedMessagesDirective, selector: "\n    [kendoUploadLocalizedMessages],\n    [kendoFileSelectLocalizedMessages],\n    [kendoUploadDropZoneLocalizedMessages]\n  " }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UploadDropZoneComponent, decorators: [{
+            <div class="k-dropzone-hint">{{textFor('dropFilesHere')}}</div>
+        </div>
+        <ul kendo-upload-file-list
+            class="k-upload-files k-reset"
+            *ngIf="hasFileList"
+            [disabled]="disabled"
+            [fileList]="fileList.files"
+            [fileTemplate]="fileTemplate"
+            [fileInfoTemplate]="fileInfoTemplate"
+            [id]="fileListId">
+        </ul>
+    `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n    [kendoUploadLocalizedMessages],\n    [kendoFileSelectLocalizedMessages],\n    [kendoUploadDropZoneLocalizedMessages]\n  " }, { kind: "directive", type: DropZoneInternalDirective, selector: "\n      [kendoUploadInternalDropZone],\n      [kendoFileSelectInternalDropZone]\n    ", inputs: ["disabled", "multiple", "restrictions"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: FileSelectDirective, selector: "[kendoFileSelect]", inputs: ["dir", "disabled", "multiple", "restrictions", "accept", "required"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FileListComponent, selector: "[kendo-upload-file-list]", inputs: ["disabled", "fileList", "fileTemplate", "fileInfoTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FileSelectComponent, decorators: [{
             type: Component,
             args: [{
-                    exportAs: 'kendoUploadDropZone',
+                    exportAs: 'kendoFileSelect',
                     providers: [
                         LocalizationService,
+                        NavigationService,
+                        UploadService,
+                        DropZoneService,
+                        FILESELECT_VALUE_ACCESSOR,
                         {
                             provide: L10N_PREFIX,
-                            useValue: 'kendo.uploaddropzone'
+                            useValue: 'kendo.fileselect'
+                        },
+                        {
+                            provide: KendoInput,
+                            useExisting: forwardRef(() => FileSelectComponent)
                         }
                     ],
-                    selector: 'kendo-uploaddropzone',
+                    selector: 'kendo-fileselect',
                     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 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 class='k-dropzone-inner' [kendoUploadDropZone]="zoneId">
-            <kendo-icon-wrapper
-                size="xxxlarge"
-                innerCssClass="k-dropzone-icon"
-                [name]="iconClasses"
-                [customFontClass]="iconClass"
-                [svgIcon]="svgIcon"
-            ></kendo-icon-wrapper>
-            <span class="k-dropzone-hint">{{ textFor('externalDropFilesHere') }}</span>
-            <span class="k-dropzone-note">
-                <ng-content></ng-content>
-            </span>
+        <div kendoFileSelectInternalDropZone
+            [restrictions]="restrictions"
+            [multiple]="multiple"
+            [disabled]="disabled">
+            <div class="k-upload-button-wrap">
+            <button 
+                kendoButton
+                #fileSelectButton
+                class="k-upload-button"
+                type="button"
+                role="button"
+                (click)="fileSelectInput.click()"
+                (focus)="onFileSelectButtonFocus()"
+                [id]="focusableId"
+                [attr.aria-label]="textFor('select')"
+                [attr.tabindex]="tabindex"
+                [attr.aria-expanded]="hasFileList"
+                [attr.aria-controls]="hasFileList ? fileListId : undefined"
+            >
+                {{textFor('select')}}
+            </button>
+            <input kendoFileSelect #fileSelectInput
+                [dir]="direction"
+                [accept]="accept"
+                [restrictions]="restrictions"
+                [multiple]="multiple"
+                [disabled]="disabled"
+                [required]="isControlRequired"
+            />
+        </div>
+            <div class="k-dropzone-hint">{{textFor('dropFilesHere')}}</div>
         </div>
-    `
+        <ul kendo-upload-file-list
+            class="k-upload-files k-reset"
+            *ngIf="hasFileList"
+            [disabled]="disabled"
+            [fileList]="fileList.files"
+            [fileTemplate]="fileTemplate"
+            [fileInfoTemplate]="fileInfoTemplate"
+            [id]="fileListId">
+        </ul>
+    `,
+                    standalone: true,
+                    imports: [LocalizedMessagesDirective, DropZoneInternalDirective, ButtonComponent, FileSelectDirective, NgIf, FileListComponent]
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1$1.LocalizationService }]; }, propDecorators: { hostClass: [{
-                type: HostBinding,
-                args: ['class.k-external-dropzone']
-            }], dirAttribute: [{
+        }], 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 }, { type: i0.Injector }]; }, propDecorators: { fileSelectInput: [{
+                type: ViewChild,
+                args: ['fileSelectInput', { static: true }]
+            }], dir: [{
                 type: HostBinding,
                 args: ['attr.dir']
-            }], zoneId: [{
-                type: Input
-            }], icon: [{
-                type: Input
-            }], iconClass: [{
-                type: Input
-            }], svgIcon: [{
+            }], name: [{
                 type: Input
+            }], valueChange: [{
+                type: Output
             }] } });
 
 /**
- * @hidden
+ * 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: "15.2.10", ngImport: i0, type: CustomMessagesComponent, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+CustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CustomMessagesComponent, isStandalone: true, selector: "kendo-upload-messages, kendo-fileselect-messages, kendo-uploaddropzone-messages", providers: [
+        {
+            provide: Messages,
+            useExisting: forwardRef(() => CustomMessagesComponent)
+        }
+    ], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CustomMessagesComponent, decorators: [{
+            type: Component,
+            args: [{
+                    providers: [
+                        {
+                            provide: Messages,
+                            useExisting: forwardRef(() => CustomMessagesComponent)
+                        }
+                    ],
+                    selector: 'kendo-upload-messages, kendo-fileselect-messages, kendo-uploaddropzone-messages',
+                    template: ``,
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }]; } });
+
+/**
+ * Utility array that contains all `FileSelect` related components and directives
  */
-const SHARED_DECLARATIONS = [
-    DropZoneInternalDirective,
-    FileListComponent,
-    FileListItemDirective,
-    FileListItemActionButtonComponent,
-    FileListMultipleItemsComponent,
-    FileListSingleItemComponent,
-    FileSelectDirective,
-    LocalizedMessagesDirective
+const KENDO_FILESELECT = [
+    FileSelectComponent,
+    FileTemplateDirective,
+    FileInfoTemplateDirective,
+    CustomMessagesComponent,
+    UploadDropZoneDirective,
+    UploadDropZoneComponent
 ];
 /**
- * @hidden
+ * Utility array that contains all `Upload` related components and directives
  */
-const PUBLIC_DIRECTIVES = [
+const KENDO_UPLOAD = [
+    UploadComponent,
+    UploadActionButtonsComponent,
+    UploadStatusTotalComponent,
     FileTemplateDirective,
     FileInfoTemplateDirective,
     CustomMessagesComponent,
@@ -4657,106 +4680,66 @@ const PUBLIC_DIRECTIVES = [
     UploadDropZoneComponent
 ];
 /**
- * @hidden
+ * Utility array that contains all `@progress/kendo-angular-upload` related components and directives
  */
-class SharedModule {
-}
-SharedModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SharedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SharedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: SharedModule, declarations: [FileTemplateDirective,
-        FileInfoTemplateDirective,
-        CustomMessagesComponent,
-        UploadDropZoneDirective,
-        UploadDropZoneComponent, DropZoneInternalDirective,
-        FileListComponent,
-        FileListItemDirective,
-        FileListItemActionButtonComponent,
-        FileListMultipleItemsComponent,
-        FileListSingleItemComponent,
-        FileSelectDirective,
-        LocalizedMessagesDirective], imports: [CommonModule, ButtonsModule, ProgressBarModule, IconsModule], exports: [FileTemplateDirective,
-        FileInfoTemplateDirective,
-        CustomMessagesComponent,
-        UploadDropZoneDirective,
-        UploadDropZoneComponent, DropZoneInternalDirective,
-        FileListComponent,
-        FileListItemDirective,
-        FileListItemActionButtonComponent,
-        FileListMultipleItemsComponent,
-        FileListSingleItemComponent,
-        FileSelectDirective,
-        LocalizedMessagesDirective, CommonModule,
-        ButtonsModule] });
-SharedModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SharedModule, imports: [CommonModule, ButtonsModule, ProgressBarModule, IconsModule, CommonModule,
-        ButtonsModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SharedModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        PUBLIC_DIRECTIVES,
-                        SHARED_DECLARATIONS
-                    ],
-                    exports: [
-                        PUBLIC_DIRECTIVES,
-                        SHARED_DECLARATIONS,
-                        CommonModule,
-                        ButtonsModule
-                    ],
-                    imports: [CommonModule, ButtonsModule, ProgressBarModule, IconsModule]
-                }]
-        }] });
-
-const FILESELECT_DECLARATIONS = [
-    FileSelectComponent
+const KENDO_UPLOADS = [
+    ...KENDO_FILESELECT,
+    ...KENDO_UPLOAD
 ];
+
+// IMPORTANT: NgModule export kept for backwards compatibility
 /**
  * Represents the [NgModule](https://angular.io/api/core/NgModule) definition for the FileSelect component.
  */
 class FileSelectModule {
 }
 FileSelectModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FileSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-FileSelectModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: FileSelectModule, declarations: [FileSelectComponent], imports: [SharedModule, IconsModule], exports: [FileTemplateDirective, FileInfoTemplateDirective, CustomMessagesComponent, UploadDropZoneDirective, UploadDropZoneComponent, FileSelectComponent] });
-FileSelectModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FileSelectModule, imports: [SharedModule, IconsModule] });
+FileSelectModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: FileSelectModule, imports: [FileSelectComponent, FileTemplateDirective, FileInfoTemplateDirective, CustomMessagesComponent, UploadDropZoneDirective, UploadDropZoneComponent], exports: [FileSelectComponent, FileTemplateDirective, FileInfoTemplateDirective, CustomMessagesComponent, UploadDropZoneDirective, UploadDropZoneComponent] });
+FileSelectModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FileSelectModule, providers: [
+        IconsService,
+        PopupService,
+        ResizeBatchService
+    ], imports: [FileSelectComponent, CustomMessagesComponent, UploadDropZoneComponent] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FileSelectModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [FILESELECT_DECLARATIONS],
-                    exports: [
-                        PUBLIC_DIRECTIVES,
-                        FILESELECT_DECLARATIONS
-                    ],
-                    imports: [SharedModule, IconsModule]
+                    exports: [...KENDO_FILESELECT],
+                    imports: [...KENDO_FILESELECT],
+                    providers: [
+                        IconsService,
+                        PopupService,
+                        ResizeBatchService
+                    ]
                 }]
         }] });
 
-const UPLOAD_DECLARATIONS = [
-    UploadComponent,
-    UploadActionButtonsComponent,
-    UploadStatusTotalComponent
-];
+// IMPORTANT: NgModule export kept for backwards compatibility
 /**
  * Represents the [NgModule](https://angular.io/api/core/NgModule) definition for the Upload component.
  */
 class UploadModule {
 }
 UploadModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UploadModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-UploadModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: UploadModule, declarations: [UploadComponent,
-        UploadActionButtonsComponent,
-        UploadStatusTotalComponent], imports: [SharedModule, IconsModule], exports: [FileTemplateDirective, FileInfoTemplateDirective, CustomMessagesComponent, UploadDropZoneDirective, UploadDropZoneComponent, UploadComponent,
-        UploadActionButtonsComponent,
-        UploadStatusTotalComponent] });
-UploadModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UploadModule, imports: [SharedModule, IconsModule] });
+UploadModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: UploadModule, imports: [UploadComponent, UploadActionButtonsComponent, UploadStatusTotalComponent, FileTemplateDirective, FileInfoTemplateDirective, CustomMessagesComponent, UploadDropZoneDirective, UploadDropZoneComponent], exports: [UploadComponent, UploadActionButtonsComponent, UploadStatusTotalComponent, FileTemplateDirective, FileInfoTemplateDirective, CustomMessagesComponent, UploadDropZoneDirective, UploadDropZoneComponent] });
+UploadModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UploadModule, providers: [
+        IconsService,
+        PopupService,
+        ResizeBatchService
+    ], imports: [UploadComponent, UploadActionButtonsComponent, UploadStatusTotalComponent, CustomMessagesComponent, UploadDropZoneComponent] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UploadModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [UPLOAD_DECLARATIONS],
-                    exports: [
-                        PUBLIC_DIRECTIVES,
-                        UPLOAD_DECLARATIONS
-                    ],
-                    imports: [SharedModule, IconsModule]
+                    exports: [...KENDO_UPLOAD],
+                    imports: [...KENDO_UPLOAD],
+                    providers: [
+                        IconsService,
+                        PopupService,
+                        ResizeBatchService
+                    ]
                 }]
         }] });
 
+// IMPORTANT: NgModule export kept for backwards compatibility
 /**
  * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
  * definition for the Uploads components.
@@ -4785,16 +4768,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
 class UploadsModule {
 }
 UploadsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UploadsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-UploadsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: UploadsModule, exports: [FileSelectModule,
-        UploadModule] });
-UploadsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UploadsModule, imports: [FileSelectModule,
-        UploadModule] });
+UploadsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: UploadsModule, imports: [FileSelectComponent, FileTemplateDirective, FileInfoTemplateDirective, CustomMessagesComponent, UploadDropZoneDirective, UploadDropZoneComponent, UploadComponent, UploadActionButtonsComponent, UploadStatusTotalComponent, FileTemplateDirective, FileInfoTemplateDirective, CustomMessagesComponent, UploadDropZoneDirective, UploadDropZoneComponent], exports: [FileSelectComponent, FileTemplateDirective, FileInfoTemplateDirective, CustomMessagesComponent, UploadDropZoneDirective, UploadDropZoneComponent, UploadComponent, UploadActionButtonsComponent, UploadStatusTotalComponent, FileTemplateDirective, FileInfoTemplateDirective, CustomMessagesComponent, UploadDropZoneDirective, UploadDropZoneComponent] });
+UploadsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UploadsModule, providers: [
+        IconsService,
+        PopupService,
+        ResizeBatchService
+    ], imports: [FileSelectComponent, CustomMessagesComponent, UploadDropZoneComponent, UploadComponent, UploadActionButtonsComponent, UploadStatusTotalComponent, CustomMessagesComponent, UploadDropZoneComponent] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UploadsModule, decorators: [{
             type: NgModule,
             args: [{
-                    exports: [
-                        FileSelectModule,
-                        UploadModule
+                    exports: [...KENDO_UPLOADS],
+                    imports: [...KENDO_UPLOADS],
+                    providers: [
+                        IconsService,
+                        PopupService,
+                        ResizeBatchService
                     ]
                 }]
         }] });
@@ -4803,5 +4791,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { CancelEvent, ClearEvent, CustomMessagesComponent, DropZoneService, ErrorEvent, FileInfoTemplateDirective, FileListComponent, FileListItemActionButtonComponent, FileListItemBase, FileListMultipleItemsComponent, FileListSingleItemComponent, FileMap, FileSelectComponent, FileSelectDirective, FileSelectModule, FileState, FileTemplateDirective, NavigationService, PauseEvent, RemoveEvent, ResumeEvent, SelectEvent, SuccessEvent, UPLOAD_VALUE_ACCESSOR, UploadActionButtonsComponent, UploadComponent, UploadDropZoneComponent, UploadDropZoneDirective, UploadEvent, UploadModule, UploadProgressEvent, UploadService, UploadStatusTotalComponent, UploadsModule, validateFiles };
+export { CancelEvent, ClearEvent, CustomMessagesComponent, DropZoneService, ErrorEvent, FileInfoTemplateDirective, FileListComponent, FileListItemActionButtonComponent, FileListItemBase, FileListMultipleItemsComponent, FileListSingleItemComponent, FileMap, FileSelectComponent, FileSelectDirective, FileSelectModule, FileState, FileTemplateDirective, KENDO_FILESELECT, KENDO_UPLOAD, KENDO_UPLOADS, NavigationService, PauseEvent, RemoveEvent, ResumeEvent, SelectEvent, SuccessEvent, UPLOAD_VALUE_ACCESSOR, UploadActionButtonsComponent, UploadComponent, UploadDropZoneComponent, UploadDropZoneDirective, UploadEvent, UploadModule, UploadProgressEvent, UploadService, UploadStatusTotalComponent, UploadsModule, validateFiles };