@progress/kendo-angular-upload 16.3.0-develop.2 → 16.3.0-develop.4

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

@@ -5,10 +5,10 @@
 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, Inject, HostListener, Input, HostBinding, Component, ViewChildren, forwardRef, ElementRef, ContentChild, ViewChild, Output, isDevMode, NgModule } 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 { fileAudioIcon, fileVideoIcon, fileImageIcon, fileTxtIcon, filePresentationIcon, fileDataIcon, fileProgrammingIcon, filePdfIcon, fileConfigIcon, fileZipIcon, fileDiscImageIcon, arrowRotateCwSmallIcon, playSmIcon, pauseSmIcon, cancelIcon, xIcon, copyIcon, fileIcon, checkIcon, exclamationCircleIcon, uploadIcon } from '@progress/kendo-svg-icons';
-import { NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';
+import { NgControl, NG_VALUE_ACCESSOR } from '@angular/forms';
 import * as i1$1 from '@progress/kendo-angular-l10n';
 import { ComponentMessages, LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { fromEvent, merge } from 'rxjs';
@@ -827,7 +827,7 @@ const IGNORE_TARGET_CLASSES = 'k-icon k-select k-input k-multiselect-wrap';
 /**
  * @hidden
  */
-const UPLOAD_CLASSES = 'k-upload-button k-clear-selected k-upload-selected k-upload-action';
+const UPLOAD_CLASSES = 'k-upload-button k-clear-selected k-upload-selected k-upload-action k-file';
 const isVisible = (element) => {
     const rect = element.getBoundingClientRect();
     return !!(rect.width && rect.height) && window.getComputedStyle(element).visibility !== 'hidden';
@@ -1340,7 +1340,9 @@ class NavigationService {
         this.onWrapperFocus = new EventEmitter();
         this.onSelectButtonFocus = new EventEmitter();
         this.actionButtonsVisible = false;
+        this.fileListVisible = false;
         this.focused = false;
+        this.focusedFileIndex = 0;
         this._focusedIndex = -1;
     }
     action(event) {
@@ -1359,9 +1361,9 @@ class NavigationService {
             [Keys.Enter]: () => this.handleEnter(),
             [Keys.Escape]: () => this.handleEscape(),
             [Keys.Delete]: () => this.handleDelete(),
-            [Keys.Tab]: (event, component) => this.handleTab(event.shiftKey, component),
-            [Keys.ArrowUp]: (event) => this.handleUp(event),
-            [Keys.ArrowDown]: (event) => this.handleDown(event)
+            [Keys.Tab]: (event, component) => this.handleTab(event, component),
+            [Keys.ArrowUp]: (event) => this.handleUpDown(event, -1),
+            [Keys.ArrowDown]: (event) => this.handleUpDown(event, 1)
         };
     }
     focusSelectButton() {
@@ -1389,10 +1391,13 @@ class NavigationService {
             this.zone.run(() => this.onFileAction.emit(Keys.Escape));
         }
     }
-    handleTab(shifted, component) {
+    handleTab(event, component) {
+        const shifted = event.shiftKey;
         /* Select Files button is focused */
-        if (this.focusedIndex === -1 && this.actionButtonsVisible && !shifted) {
-            this.focusedIndex = this.lastFileIndex + 1;
+        if (this.focusedIndex === -1 && this.fileListVisible && !shifted) {
+            this.focusedIndex = this.focusedFileIndex;
+            event.preventDefault();
+            this.onFileFocus.emit(this.focusedFileIndex);
             return;
         }
         /* File in the list is focused */
@@ -1407,7 +1412,11 @@ class NavigationService {
         }
         /* Clear button is focused */
         if (this.focusedIndex === this.lastFileIndex + 1) {
-            this.focusedIndex = shifted ? -1 : this.lastIndex;
+            this.focusedIndex = shifted ? this.focusedFileIndex : this.lastIndex;
+            if (shifted) {
+                event.preventDefault();
+                this.onFileFocus.emit(this.focusedFileIndex);
+            }
             return;
         }
         /* Upload button is focused */
@@ -1417,35 +1426,15 @@ class NavigationService {
         }
         this.onTabOut.emit();
     }
-    handleDown(event) {
-        if (this.lastIndex >= 0 && this.focusedIndex < this.lastIndex) {
+    handleUpDown(event, direction) {
+        const focusOnFileList = this.focusedIndex > -1 && this.uploadService.files.count >= 0;
+        const nextFocusableIndexInBoundaries = direction > 0 ? this.focusedFileIndex < this.lastFileIndex : this.focusedFileIndex > 0;
+        const focusNextFile = focusOnFileList && nextFocusableIndexInBoundaries;
+        if (focusNextFile) {
             event.preventDefault();
             this.zone.run(() => {
-                if (this.focusedIndex < this.lastFileIndex) {
-                    this.focusedIndex += 1;
-                    this.onFileFocus.emit(this.focusedIndex);
-                    return;
-                }
-            });
-        }
-    }
-    handleUp(event) {
-        if (this.lastIndex >= 0 && this.focusedIndex > -1) {
-            event.preventDefault();
-            this.zone.run(() => {
-                this.focusedIndex -= 1;
-                if (this.focusedIndex === -1) {
-                    this.onSelectButtonFocus.emit();
-                    return;
-                }
-                if (this.focusedIndex <= this.lastFileIndex) {
-                    this.onFileFocus.emit(this.focusedIndex);
-                    return;
-                }
-                if (this.actionButtonsVisible && this.focusedIndex <= this.lastIndex) {
-                    this.focusedIndex = this.lastFileIndex;
-                    this.onFileFocus.emit(this.focusedIndex);
-                }
+                this.focusedIndex += direction;
+                this.focusedFileIndex += direction;
             });
         }
     }
@@ -1509,8 +1498,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-upload',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1718182279,
-    version: '16.3.0-develop.2',
+    publishDate: 1718190520,
+    version: '16.3.0-develop.4',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -1548,6 +1537,240 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
 
+/**
+ * @hidden
+ */
+class UploadFileSelectBase {
+    constructor(uploadService, navigation, cdr, injector, zone) {
+        this.uploadService = uploadService;
+        this.navigation = navigation;
+        this.cdr = cdr;
+        this.injector = injector;
+        this.zone = zone;
+        /**
+         * Disables the component.
+         *
+         * @default false
+         */
+        this.disabled = false;
+        /**
+         * Enables the selection of multiple files
+         * If set to `false`, only one file can be selected at a time.
+         * @default true
+         */
+        this.multiple = true;
+        /**
+         * Toggles the visibility of the file list.
+         * @default true
+         */
+        this.showFileList = true;
+        /**
+         * Specifies the [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
+         * @default 0
+         */
+        this.tabindex = 0;
+        /**
+         * @hidden
+         */
+        this.focusableId = `k-${guid()}`;
+        /**
+         * @hidden
+         */
+        this.hostDefaultClasses = true;
+        /**
+         * Fires when the user navigates outside the component.
+         */
+        this.onBlur = new EventEmitter();
+        /**
+         * Fires when the component is focused.
+         */
+        this.onFocus = new EventEmitter();
+        /**
+         * Fires when files are selected. If prevented, the selected files will not be added to the list.
+         */
+        this.select = new EventEmitter();
+        /**
+         * Fires when a file is about to be removed. If prevented, the file will remain in the list.
+         */
+        this.remove = new EventEmitter();
+        /**
+         * @hidden
+         */
+        this._restrictions = {
+            allowedExtensions: [],
+            maxFileSize: 0,
+            minFileSize: 0
+        };
+        this.onTouchedCallback = (_) => { };
+        this.onChangeCallback = (_) => { };
+        this.fileList = this.uploadService.files;
+    }
+    /**
+     * Sets the restrictions for selected files.
+     */
+    set restrictions(restrictions) {
+        const parsedRestrictions = Object.assign({}, this.restrictions, restrictions);
+        this._restrictions = parsedRestrictions;
+    }
+    get restrictions() {
+        return this._restrictions;
+    }
+    /**
+     * @hidden
+     */
+    get hostDisabledClass() {
+        return this.disabled;
+    }
+    /**
+     * @hidden
+     */
+    get formControl() {
+        const ngControl = this.injector.get(NgControl, null);
+        return (ngControl === null || ngControl === void 0 ? void 0 : ngControl.control) || null;
+    }
+    /**
+     * @hidden
+     */
+    get isControlRequired() {
+        return isControlRequired(this.formControl);
+    }
+    /**
+     * @hidden
+     */
+    get hasFileList() {
+        const hasFileList = this.showFileList && this.fileList.count > 0;
+        this.navigation.fileListVisible = hasFileList;
+        return hasFileList;
+    }
+    /**
+     * @hidden
+     */
+    writeValue(newValue, validation, callback) {
+        let isValid = true;
+        if (newValue instanceof Array) {
+            newValue.forEach((file) => {
+                if (!validation(file)) {
+                    isValid = false;
+                }
+            });
+            if (isValid) {
+                this.uploadService[callback](newValue);
+            }
+        }
+        if (newValue === null) {
+            this.fileList.clear();
+        }
+        this.cdr.markForCheck();
+    }
+    /**
+     * @hidden
+     */
+    registerOnChange(fn) {
+        this.onChangeCallback = fn;
+    }
+    /**
+     * @hidden
+     */
+    registerOnTouched(fn) {
+        this.onTouchedCallback = fn;
+    }
+    /**
+     * @hidden
+     */
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    /**
+     * @hidden
+     */
+    onFileSelectButtonFocus() {
+        if (!this.navigation.focused) {
+            this.navigation.focusedIndex = -1;
+        }
+    }
+    /**
+     * Focuses the component's `Select files` button.
+     */
+    focus() {
+        this.zone.runOutsideAngular(() => {
+            setTimeout(() => {
+                this.fileSelectButton.nativeElement.focus();
+                this.navigation.focused = true;
+            });
+        });
+    }
+    /**
+     * @hidden
+     * @deprecated
+     */
+    focusComponent() {
+        this.focus();
+    }
+    /**
+     * Blurs the component if it was previously focused.
+     */
+    blur() {
+        if (this.navigation.focused) {
+            this.navigation.focused = false;
+            document.activeElement.blur();
+        }
+    }
+    /**
+     * @hidden
+     * @deprecated
+     */
+    blurComponent() {
+        this.blur();
+    }
+}
+UploadFileSelectBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UploadFileSelectBase, deps: [{ token: UploadService }, { token: NavigationService }, { token: i0.ChangeDetectorRef }, { token: i0.Injector }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+UploadFileSelectBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: UploadFileSelectBase, inputs: { accept: "accept", disabled: "disabled", multiple: "multiple", showFileList: "showFileList", tabindex: "tabindex", restrictions: "restrictions", zoneId: "zoneId", focusableId: "focusableId" }, outputs: { onBlur: "blur", onFocus: "focus", select: "select", remove: "remove" }, host: { properties: { "class.k-upload": "this.hostDefaultClasses", "class.k-disabled": "this.hostDisabledClass" } }, queries: [{ propertyName: "fileTemplate", first: true, predicate: FileTemplateDirective, descendants: true }, { propertyName: "fileInfoTemplate", first: true, predicate: FileInfoTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "fileSelectButton", first: true, predicate: ["fileSelectButton"], descendants: true, read: ElementRef, static: true }], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UploadFileSelectBase, decorators: [{
+            type: Directive,
+            args: [{}]
+        }], ctorParameters: function () { return [{ type: UploadService }, { type: NavigationService }, { type: i0.ChangeDetectorRef }, { type: i0.Injector }, { type: i0.NgZone }]; }, propDecorators: { fileTemplate: [{
+                type: ContentChild,
+                args: [FileTemplateDirective]
+            }], fileInfoTemplate: [{
+                type: ContentChild,
+                args: [FileInfoTemplateDirective]
+            }], fileSelectButton: [{
+                type: ViewChild,
+                args: ['fileSelectButton', { static: true, read: ElementRef }]
+            }], accept: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], multiple: [{
+                type: Input
+            }], showFileList: [{
+                type: Input
+            }], tabindex: [{
+                type: Input
+            }], restrictions: [{
+                type: Input
+            }], zoneId: [{
+                type: Input
+            }], focusableId: [{
+                type: Input
+            }], hostDefaultClasses: [{
+                type: HostBinding,
+                args: ['class.k-upload']
+            }], hostDisabledClass: [{
+                type: HostBinding,
+                args: ['class.k-disabled']
+            }], onBlur: [{
+                type: Output,
+                args: ['blur']
+            }], onFocus: [{
+                type: Output,
+                args: ['focus']
+            }], select: [{
+                type: Output
+            }], remove: [{
+                type: Output
+            }] } });
+
 /**
  * @hidden
  */
@@ -1775,7 +1998,7 @@ class FileListItemDirective {
         return this.files[0].uid;
     }
     get tabIndex() {
-        return "-1";
+        return this.navigationService.focusedFileIndex === this.index ? '0' : '-1';
     }
     get kFileError() {
         return this.files[0].state === FileState.Failed;
@@ -1804,8 +2027,8 @@ class FileListItemDirective {
         this.focused = false;
     }
     onClick(event) {
-        if (!isFocusable(event.target) && !hasClasses(event.target, IGNORE_TARGET_CLASSES)) {
-            this.navigationService.focusedIndex = this.index;
+        if ((!isFocusable(event.target) && !hasClasses(event.target, IGNORE_TARGET_CLASSES)) || !!event.target.closest('.k-upload-action')) {
+            this.navigationService.focusedIndex = this.navigationService.focusedFileIndex = this.index;
         }
     }
 }
@@ -1846,10 +2069,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 args: ['class.k-focus']
             }], onFocus: [{
                 type: HostListener,
-                args: ["focus"]
+                args: ['focus']
             }], onBlur: [{
                 type: HostListener,
-                args: ["blur"]
+                args: ['blur']
             }], onClick: [{
                 type: HostListener,
                 args: ['click', ['$event']]
@@ -1904,37 +2127,12 @@ class FileListItemActionButtonComponent {
         this.uploadService = uploadService;
         this.localization = localization;
         this.navigation = navigation;
-        this.actionFocused = false;
-        this.retryFocused = false;
-        this.pauseResumeFocused = false;
         this.retrySVGIcon = arrowRotateCwSmallIcon;
         this.playSVGIcon = playSmIcon;
         this.pauseSVGIcon = pauseSmIcon;
         this.cancelSVGIcon = cancelIcon;
         this.deleteSVGIcon = xIcon;
     }
-    onFocus(type) {
-        if (type === 'action') {
-            this.actionFocused = true;
-        }
-        if (type === 'retry') {
-            this.retryFocused = true;
-        }
-        if (type === 'pauseResume') {
-            this.pauseResumeFocused = true;
-        }
-    }
-    onBlur(type) {
-        if (type === 'retry') {
-            this.retryFocused = false;
-        }
-        if (type === 'action') {
-            this.actionFocused = false;
-        }
-        if (type === 'pauseResume') {
-            this.pauseResumeFocused = false;
-        }
-    }
     onRetryClick() {
         if (this.disabled) {
             return;
@@ -2012,64 +2210,50 @@ FileListItemActionButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion
 
         <button
             *ngIf="isFailed"
+            kendoButton
             type="button"
-            class="k-button k-icon-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-upload-action"
-            [ngClass]="{ 'k-focus': this.retryFocused }"
+            class="k-upload-action k-retry"
+            fillMode="flat"
             [attr.tabIndex]="-1"
             [attr.aria-hidden]="true"
-            (focus)="onFocus('retry')"
-            (blur)="onBlur('retry')"
+            [attr.title]="retryButtonTitle"
+            [svgIcon]="retrySVGIcon"
+            icon="refresh-sm"
+            (pointerdown)="$event.preventDefault()"
             (click)="onRetryClick()"
-        >
-            <kendo-icon-wrapper
-                name="refresh-sm"
-                [svgIcon]="retrySVGIcon"
-                innerCssClass="k-retry"
-                [attr.aria-label]="retryButtonTitle"
-                [attr.title]="retryButtonTitle"
-            ></kendo-icon-wrapper>
-        </button>
+        ></button>
 
         <button
             *ngIf="isResumable"
+            kendoButton
             type="button"
-            class="k-button k-icon-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-upload-action"
-            [ngClass]="{ 'k-focus': this.pauseResumeFocused }"
+            class="k-upload-action"
+            fillMode="flat"
             [attr.tabIndex]="-1"
             [attr.aria-hidden]="true"
-            (focus)="onFocus('pauseResume')"
-            (blur)="onBlur('pauseResume')"
+            [attr.title]="pauseResumeButtonTitle"
+            [svgIcon]="isPaused ? playSVGIcon : pauseSVGIcon"
+            [icon]="isPaused ? 'play-sm' : 'pause-sm'"
+            (pointerdown)="$event.preventDefault()"
             (click)="onPauseResumeClick()"
-        >
-            <kendo-icon-wrapper
-                [name]="isPaused ? 'play-sm' : 'pause-sm'"
-                [svgIcon]="isPaused ? playSVGIcon : pauseSVGIcon"
-                [attr.aria-label]='pauseResumeButtonTitle'
-                [attr.title]='pauseResumeButtonTitle'
-            ></kendo-icon-wrapper>
-        </button>
+        ></button>
 
         <button 
             *ngIf="isActionButtonVisible"
-            class="k-button k-icon-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-upload-action"
+            kendoButton
+            class="k-upload-action"
+            [class.k-delete]="!isUploading"
+            fillMode="flat"
             type="button"
             [attr.tabIndex]="-1"
             [attr.aria-hidden]="true"
-            (focus)="onFocus('action')"
-            (blur)="onBlur('action')"
-            [ngClass]="{ 'k-focus': this.actionFocused }"
+            [attr.title]="actionButtonTitle"
+            [svgIcon]="isUploading ? cancelSVGIcon : deleteSVGIcon"
+            [icon]="isUploading ? 'cancel' : 'x'"
             (click)="onRemoveCancelClick($event)"
-        >
-            <kendo-icon-wrapper
-                [name]="isUploading ? 'cancel' : 'x'"
-                [svgIcon]="isUploading ? cancelSVGIcon : deleteSVGIcon"
-                [innerCssClass]="!isUploading ? 'k-delete' : ''"
-                [attr.aria-label]='actionButtonTitle'
-                [attr.title]='actionButtonTitle'
-            ></kendo-icon-wrapper>
-        </button>
+        ></button>
     </span>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
+    `, 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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FileListItemActionButtonComponent, decorators: [{
             type: Component,
             args: [{
@@ -2080,62 +2264,48 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
 
         <button
             *ngIf="isFailed"
+            kendoButton
             type="button"
-            class="k-button k-icon-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-upload-action"
-            [ngClass]="{ 'k-focus': this.retryFocused }"
+            class="k-upload-action k-retry"
+            fillMode="flat"
             [attr.tabIndex]="-1"
             [attr.aria-hidden]="true"
-            (focus)="onFocus('retry')"
-            (blur)="onBlur('retry')"
+            [attr.title]="retryButtonTitle"
+            [svgIcon]="retrySVGIcon"
+            icon="refresh-sm"
+            (pointerdown)="$event.preventDefault()"
             (click)="onRetryClick()"
-        >
-            <kendo-icon-wrapper
-                name="refresh-sm"
-                [svgIcon]="retrySVGIcon"
-                innerCssClass="k-retry"
-                [attr.aria-label]="retryButtonTitle"
-                [attr.title]="retryButtonTitle"
-            ></kendo-icon-wrapper>
-        </button>
+        ></button>
 
         <button
             *ngIf="isResumable"
+            kendoButton
             type="button"
-            class="k-button k-icon-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-upload-action"
-            [ngClass]="{ 'k-focus': this.pauseResumeFocused }"
+            class="k-upload-action"
+            fillMode="flat"
             [attr.tabIndex]="-1"
             [attr.aria-hidden]="true"
-            (focus)="onFocus('pauseResume')"
-            (blur)="onBlur('pauseResume')"
+            [attr.title]="pauseResumeButtonTitle"
+            [svgIcon]="isPaused ? playSVGIcon : pauseSVGIcon"
+            [icon]="isPaused ? 'play-sm' : 'pause-sm'"
+            (pointerdown)="$event.preventDefault()"
             (click)="onPauseResumeClick()"
-        >
-            <kendo-icon-wrapper
-                [name]="isPaused ? 'play-sm' : 'pause-sm'"
-                [svgIcon]="isPaused ? playSVGIcon : pauseSVGIcon"
-                [attr.aria-label]='pauseResumeButtonTitle'
-                [attr.title]='pauseResumeButtonTitle'
-            ></kendo-icon-wrapper>
-        </button>
+        ></button>
 
         <button 
             *ngIf="isActionButtonVisible"
-            class="k-button k-icon-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-upload-action"
+            kendoButton
+            class="k-upload-action"
+            [class.k-delete]="!isUploading"
+            fillMode="flat"
             type="button"
             [attr.tabIndex]="-1"
             [attr.aria-hidden]="true"
-            (focus)="onFocus('action')"
-            (blur)="onBlur('action')"
-            [ngClass]="{ 'k-focus': this.actionFocused }"
+            [attr.title]="actionButtonTitle"
+            [svgIcon]="isUploading ? cancelSVGIcon : deleteSVGIcon"
+            [icon]="isUploading ? 'cancel' : 'x'"
             (click)="onRemoveCancelClick($event)"
-        >
-            <kendo-icon-wrapper
-                [name]="isUploading ? 'cancel' : 'x'"
-                [svgIcon]="isUploading ? cancelSVGIcon : deleteSVGIcon"
-                [innerCssClass]="!isUploading ? 'k-delete' : ''"
-                [attr.aria-label]='actionButtonTitle'
-                [attr.title]='actionButtonTitle'
-            ></kendo-icon-wrapper>
-        </button>
+        ></button>
     </span>
     `
                 }]
@@ -2485,6 +2655,7 @@ class FileListComponent {
     constructor(uploadService, navigation) {
         this.uploadService = uploadService;
         this.navigation = navigation;
+        this.fileListRole = 'list';
         this.onItemFocus();
         this.onItemAction();
     }
@@ -2500,7 +2671,9 @@ class FileListComponent {
     }
     itemActionHandler(key) {
         const index = this.navigation.focusedIndex;
-        const item = this.fileListItems.toArray()[index];
+        const filesArray = this.fileListItems.toArray();
+        const numberOfFiles = filesArray.length;
+        const item = filesArray[index];
         const uid = item.uidAttribute;
         const files = this.uploadService.files.get(uid);
         if (key === Keys.Escape && files[0].state === FileState.Uploading) {
@@ -2519,7 +2692,16 @@ class FileListComponent {
             else if (this.hasDelete(item)) {
                 this.uploadService.removeFiles(uid);
             }
-            this.navigation.focusSelectButton();
+            if (index < numberOfFiles - 1) {
+                filesArray[index + 1].focus();
+            }
+            else if (numberOfFiles === 1) {
+                this.navigation.focusSelectButton();
+            }
+            else if (index === numberOfFiles - 1) {
+                this.navigation.focusedIndex = this.navigation.focusedFileIndex = index - 1;
+                filesArray[index - 1].focus();
+            }
         }
         const isUploadChunk = this.uploadService.async.chunk;
         const canTogglePauseResume = key === Keys.Space && files[0].state !== FileState.Uploaded;
@@ -2541,12 +2723,12 @@ 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" }, viewQueries: [{ propertyName: "fileListItems", predicate: FileListItemDirective, descendants: true }], ngImport: i0, template: `
+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: `
         <ng-template ngFor
             [ngForOf]="fileList"
             let-files
             let-index="index">
-            <li kendoUploadFileListItem [files]='files' [index]='index'>
+            <li kendoUploadFileListItem [files]='files' [index]='index' role="listitem">
                 <kendo-upload-file-list-single-item
                     class='k-file-single'
                     *ngIf='files.length === 1 && !fileTemplate'
@@ -2577,7 +2759,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             [ngForOf]="fileList"
             let-files
             let-index="index">
-            <li kendoUploadFileListItem [files]='files' [index]='index'>
+            <li kendoUploadFileListItem [files]='files' [index]='index' role="listitem">
                 <kendo-upload-file-list-single-item
                     class='k-file-single'
                     *ngIf='files.length === 1 && !fileTemplate'
@@ -2611,6 +2793,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }], fileListItems: [{
                 type: ViewChildren,
                 args: [FileListItemDirective]
+            }], fileListRole: [{
+                type: HostBinding,
+                args: ['attr.role']
             }] } });
 
 /**
@@ -2823,8 +3008,9 @@ const FILESELECT_VALUE_ACCESSOR = {
     useExisting: forwardRef(() => FileSelectComponent)
 };
 let idx$1 = 0;
-class FileSelectComponent {
+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;
@@ -2833,54 +3019,10 @@ class FileSelectComponent {
         this.renderer = renderer;
         this.cdr = cdr;
         this.injector = injector;
-        /**
-         * Disables the FileSelect.
-         * To learn how to disable the component in reactive forms, refer to the article on [Forms Support](slug:formssupport_fileselect#toc-managing-the-fileselect-disabled-state-in-reactive-forms).
-         * @default false
-         */
-        this.disabled = false;
-        /**
-         * Enables the selection of multiple files
-         * ([see example]({% slug fileprocessing_upload %}#toc-upload-of-sinlge-or-multiple-files)).
-         * If set to `false`, only one file can be selected at a time.
-         * @default true
-         */
-        this.multiple = true;
-        /**
-         * Toggles the visibility of the file list.
-         * @default true
-         */
-        this.showFileList = true;
-        /**
-         * Specifies the [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the FileSelect.
-         * @default 0
-         */
-        this.tabindex = 0;
-        /**
-         * @hidden
-         */
-        this.focusableId = `k-${guid()}`;
-        /**
-         * Fires when the user navigates outside the component.
-         */
-        this.onBlur = new EventEmitter();
-        /**
-         * Fires when the component is focused.
-         */
-        this.onFocus = new EventEmitter();
-        /**
-         * Fires when files are selected. If prevented, the selected files will not be added to the list.
-         */
-        this.select = new EventEmitter();
-        /**
-         * Fires when a file is about to be removed. If prevented, the file will remain in the list.
-         */
-        this.remove = new EventEmitter();
         /**
          * Fires when the value of the component has changed as a result of a successful `select` or `remove` operation.
          */
         this.valueChange = new EventEmitter();
-        this.hostDefaultClasses = true;
         /**
          * @hidden
          */
@@ -2889,13 +3031,10 @@ class FileSelectComponent {
             maxFileSize: 0,
             minFileSize: 0
         };
-        this.onTouchedCallback = (_) => { };
-        this.onChangeCallback = (_) => { };
         validatePackage(packageMetadata);
         this.wrapper = wrapper.nativeElement;
         this.direction = localization.rtl ? 'rtl' : 'ltr';
         this.navigation.computeKeys();
-        this.fileList = this.uploadService.files;
         this.localizationChangeSubscription = localization.changes.subscribe(({ rtl }) => {
             this.direction = rtl ? 'rtl' : 'ltr';
         });
@@ -2904,6 +3043,9 @@ class FileSelectComponent {
         this.attachEventHandlers();
         this.setDefaultSettings();
     }
+    get dir() {
+        return this.direction;
+    }
     /**
      * Sets the `name` attribute of the `input` element of the FileSelect.
      */
@@ -2913,42 +3055,10 @@ class FileSelectComponent {
     get name() {
         return this.uploadService.async.saveField;
     }
-    /**
-     * Sets the restrictions for selected files.
-     */
-    set restrictions(restrictions) {
-        const parsedRestrictions = Object.assign({}, this._restrictions, restrictions);
-        this._restrictions = parsedRestrictions;
-    }
-    get restrictions() {
-        return this._restrictions;
-    }
-    get hostDisabledClass() {
-        return this.disabled;
-    }
-    get dir() {
-        return this.direction;
-    }
-    get hostRole() {
-        return 'application';
-    }
-    /**
-     * @hidden
-     */
-    get formControl() {
-        const ngControl = this.injector.get(NgControl, null);
-        return (ngControl === null || ngControl === void 0 ? void 0 : ngControl.control) || null;
-    }
-    /**
-     * @hidden
-     */
-    get isControlRequired() {
-        return isControlRequired(this.formControl);
-    }
     ngOnInit() {
-        const { buttonId, inputId } = this.getIds();
+        const { buttonId, fileListId } = this.getIds();
         this.focusableId = buttonId;
-        this.inputElementId = inputId;
+        this.fileListId = fileListId;
         if (this.zoneId) {
             this.dropZoneService.addComponent(this, this.zoneId);
         }
@@ -2966,80 +3076,24 @@ class FileSelectComponent {
      * @hidden
      */
     textFor(key) {
-        return this.localization.get(key);
-    }
-    /**
-     * Focuses the underlying input element.
-     */
-    focus() {
-        setTimeout(() => {
-            this.fileSelectButton.nativeElement.focus();
-            this.navigation.focused = true;
-            this.onFocus.emit();
-        });
-    }
-    ngOnDestroy() {
-        this.fileList.clear();
-        if (this.blurSubscription) {
-            this.blurSubscription.unsubscribe();
-        }
-        if (this.wrapperFocusSubscription) {
-            this.wrapperFocusSubscription.unsubscribe();
-        }
-        if (this.selectButtonFocusSubscription) {
-            this.selectButtonFocusSubscription.unsubscribe();
-        }
-        if (this.localizationChangeSubscription) {
-            this.localizationChangeSubscription.unsubscribe();
-        }
-        if (this.subs) {
-            this.subs.unsubscribe();
-        }
-    }
-    /**
-     * @hidden
-     */
-    writeValue(newValue) {
-        let isValid = true;
-        if (newValue instanceof Array) {
-            newValue.forEach((file) => {
-                if (!validateInitialFileSelectFile(file)) {
-                    isValid = false;
-                }
-            });
-            if (isValid) {
-                this.uploadService.addInitialFileSelectFiles(newValue);
-            }
-        }
-        if (newValue === null) {
-            this.fileList.clear();
-        }
-        this.cdr.markForCheck();
-    }
-    /**
-     * @hidden
-     */
-    registerOnChange(fn) {
-        this.onChangeCallback = fn;
-    }
-    /**
-     * @hidden
-     */
-    registerOnTouched(fn) {
-        this.onTouchedCallback = fn;
-    }
-    /**
-     * @hidden
-     */
-    setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
-    }
-    /**
-     * @hidden
-     */
-    onFileSelectButtonFocus() {
-        if (!this.navigation.focused) {
-            this.navigation.focusedIndex = -1;
+        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();
         }
     }
     /**
@@ -3080,8 +3134,14 @@ class FileSelectComponent {
     getIds() {
         const id = ++idx$1;
         const buttonId = `k-fileselect-button-${id}`;
-        const inputId = `k-fileselect-input-${id}`;
-        return { buttonId, inputId };
+        const fileListId = `k-fileselect-file-list-${id}`;
+        return { buttonId, fileListId };
+    }
+    /**
+     * @hidden
+     */
+    writeValue(newValue) {
+        super.writeValue(newValue, validateInitialFileSelectFile, 'addInitialFileSelectFiles');
     }
     subscribeBlur() {
         if (!isDocumentAvailable()) {
@@ -3156,7 +3216,7 @@ class FileSelectComponent {
     }
 }
 FileSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FileSelectComponent, deps: [{ token: UploadService }, { token: i1$1.LocalizationService }, { token: NavigationService }, { token: DropZoneService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-FileSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: FileSelectComponent, selector: "kendo-fileselect", inputs: { accept: "accept", disabled: "disabled", multiple: "multiple", name: "name", showFileList: "showFileList", tabindex: "tabindex", restrictions: "restrictions", zoneId: "zoneId", focusableId: "focusableId" }, outputs: { onBlur: "blur", onFocus: "focus", select: "select", remove: "remove", valueChange: "valueChange" }, host: { properties: { "class.k-upload": "this.hostDefaultClasses", "class.k-disabled": "this.hostDisabledClass", "attr.dir": "this.dir", "attr.role": "this.hostRole" } }, providers: [
+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,
@@ -3170,7 +3230,7 @@ FileSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
             provide: KendoInput,
             useExisting: forwardRef(() => FileSelectComponent)
         }
-    ], queries: [{ propertyName: "fileTemplate", first: true, predicate: FileTemplateDirective, descendants: true }, { propertyName: "fileInfoTemplate", first: true, predicate: FileInfoTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "fileSelectInput", first: true, predicate: ["fileSelectInput"], descendants: true, static: true }, { propertyName: "fileSelectButton", first: true, predicate: ["fileSelectButton"], descendants: true, read: ElementRef, static: true }], exportAs: ["kendoFileSelect"], ngImport: i0, template: `
+    ], 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"
@@ -3207,12 +3267,12 @@ FileSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
                 [id]="focusableId"
                 [attr.aria-label]="textFor('select')"
                 [attr.tabindex]="tabindex"
-                [attr.aria-controls]="inputElementId"
+                [attr.aria-expanded]="hasFileList"
+                [attr.aria-controls]="hasFileList ? fileListId : undefined"
             >
                 {{textFor('select')}}
             </button>
             <input kendoFileSelect #fileSelectInput
-                [id]="inputElementId"
                 [dir]="direction"
                 [accept]="accept"
                 [restrictions]="restrictions"
@@ -3225,11 +3285,12 @@ FileSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
         </div>
         <ul kendo-upload-file-list
             class="k-upload-files k-reset"
-            *ngIf="showFileList && fileList.count > 0"
+            *ngIf="hasFileList"
             [disabled]="disabled"
             [fileList]="fileList.files"
             [fileTemplate]="fileTemplate"
-            [fileInfoTemplate]="fileInfoTemplate">
+            [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: [{
@@ -3289,12 +3350,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 [id]="focusableId"
                 [attr.aria-label]="textFor('select')"
                 [attr.tabindex]="tabindex"
-                [attr.aria-controls]="inputElementId"
+                [attr.aria-expanded]="hasFileList"
+                [attr.aria-controls]="hasFileList ? fileListId : undefined"
             >
                 {{textFor('select')}}
             </button>
             <input kendoFileSelect #fileSelectInput
-                [id]="inputElementId"
                 [dir]="direction"
                 [accept]="accept"
                 [restrictions]="restrictions"
@@ -3307,68 +3368,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
         </div>
         <ul kendo-upload-file-list
             class="k-upload-files k-reset"
-            *ngIf="showFileList && fileList.count > 0"
+            *ngIf="hasFileList"
             [disabled]="disabled"
             [fileList]="fileList.files"
             [fileTemplate]="fileTemplate"
-            [fileInfoTemplate]="fileInfoTemplate">
+            [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: { accept: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], multiple: [{
-                type: Input
-            }], name: [{
-                type: Input
-            }], showFileList: [{
-                type: Input
-            }], tabindex: [{
-                type: Input
-            }], restrictions: [{
-                type: Input
-            }], zoneId: [{
-                type: Input
-            }], focusableId: [{
-                type: Input
-            }], fileTemplate: [{
-                type: ContentChild,
-                args: [FileTemplateDirective]
-            }], fileInfoTemplate: [{
-                type: ContentChild,
-                args: [FileInfoTemplateDirective]
-            }], fileSelectInput: [{
+        }], 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 }]
-            }], fileSelectButton: [{
-                type: ViewChild,
-                args: ['fileSelectButton', { static: true, read: ElementRef }]
-            }], onBlur: [{
-                type: Output,
-                args: ['blur']
-            }], onFocus: [{
-                type: Output,
-                args: ['focus']
-            }], select: [{
-                type: Output
-            }], remove: [{
-                type: Output
-            }], valueChange: [{
-                type: Output
-            }], hostDefaultClasses: [{
-                type: HostBinding,
-                args: ['class.k-upload']
-            }], hostDisabledClass: [{
-                type: HostBinding,
-                args: ['class.k-disabled']
             }], dir: [{
                 type: HostBinding,
                 args: ['attr.dir']
-            }], hostRole: [{
-                type: HostBinding,
-                args: ['attr.role']
+            }], name: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
             }] } });
 
 /**
@@ -3611,8 +3629,9 @@ let idx = 0;
 /**
  * Represents the [Kendo UI Upload component for Angular]({% slug overview_upload %}).
  */
-class UploadComponent {
+class UploadComponent extends UploadFileSelectBase {
     constructor(uploadService, localization, navigation, dropZoneService, zone, renderer, cdr, wrapper, injector) {
+        super(uploadService, navigation, cdr, injector, zone);
         this.uploadService = uploadService;
         this.localization = localization;
         this.navigation = navigation;
@@ -3627,41 +3646,15 @@ class UploadComponent {
          * @default false
          */
         this.chunkable = false;
-        /**
-         * Enables the selection of multiple files
-         * ([see example]({% slug fileprocessing_upload %}#toc-upload-of-sinlge-or-multiple-files)).
-         * If set to `false`, only one file can be selected at a time.
-         * @default true
-         */
-        this.multiple = true;
-        /**
-         * Disables the Upload ([see example]({% slug disabledstate_upload %})).
-         * To learn how to disable the component in reactive forms, refer to the article on [Forms Support](slug:formssupport_upload#toc-managing-the-upload-disabled-state-in-reactive-forms).
-         * @default false
-         */
-        this.disabled = false;
         /**
          * Toggles the visibility of the file list.
          * @default true
          */
         this.showFileList = true;
-        /**
-         * Specifies the [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
-         * @default 0
-         */
-        this.tabindex = 0;
-        /**
-         * @hidden
-         */
-        this.focusableId = `k-${guid()}`;
         /**
          * Specifies the possible layout of the action buttons.
          */
         this.actionsLayout = 'end';
-        /**
-         * Fires when the user navigates outside the component.
-         */
-        this.onBlur = new EventEmitter();
         /**
          * Fires when the upload is canceled while in progress.
          */
@@ -3678,26 +3671,14 @@ class UploadComponent {
          * Fires when an `upload` or `remove` operation has failed.
          */
         this.error = new EventEmitter();
-        /**
-         * Fires when the component is focused.
-         */
-        this.onFocus = new EventEmitter();
         /**
          * Fires when the upload of a file has been paused.
          */
         this.pause = new EventEmitter();
-        /**
-         * Fires when an uploaded file is about to be removed. If prevented, the files will remain in the list.
-         */
-        this.remove = new EventEmitter();
         /**
          * Fires when the upload of a file has been resumed.
          */
         this.resume = new EventEmitter();
-        /**
-         * Fires when files are selected. If prevented, the selected files will not be added to the list.
-         */
-        this.select = new EventEmitter();
         /**
          * Fires when an `upload` or `remove` operation is successfully completed.
          */
@@ -3714,17 +3695,6 @@ class UploadComponent {
          * Fires when the value of the component has changed as a result of a successful `upload`, `remove` or `clear` operation.
          */
         this.valueChange = new EventEmitter();
-        this.hostDefaultClasses = true;
-        /**
-         * @hidden
-         */
-        this._restrictions = {
-            allowedExtensions: [],
-            maxFileSize: 0,
-            minFileSize: 0
-        };
-        this.onTouchedCallback = (_) => { };
-        this.onChangeCallback = (_) => { };
         validatePackage(packageMetadata);
         this.fileList = this.uploadService.files;
         this.localizationChangeSubscription = localization.changes.subscribe(({ rtl }) => {
@@ -3882,42 +3852,14 @@ class UploadComponent {
     get tabIndex() {
         return this.tabindex;
     }
-    /**
-     * Sets the restrictions for selected files ([see example]({% slug api_upload_filerestrictions %})).
-     */
-    set restrictions(restrictions) {
-        const parsedRestrictions = Object.assign({}, this._restrictions, restrictions);
-        this._restrictions = parsedRestrictions;
-    }
-    get restrictions() {
-        return this._restrictions;
-    }
-    get hostRole() {
-        return 'application';
-    }
-    get hostDisabledClass() {
-        return this.disabled;
-    }
     get dir() {
         return this.direction;
     }
-    /**
-     * @hidden
-     */
-    get formControl() {
-        const ngControl = this.injector.get(NgControl, null);
-        return (ngControl === null || ngControl === void 0 ? void 0 : ngControl.control) || null;
-    }
-    /**
-     * @hidden
-     */
-    get isControlRequired() {
-        return isControlRequired(this.formControl);
-    }
     ngOnInit() {
         this.verifySettings();
-        const { buttonId } = this.getIds();
+        const { buttonId, fileListId } = this.getIds();
         this.focusableId = buttonId;
+        this.fileListId = fileListId;
         this.uploadService.setChunkSettings(this.chunkable);
         if (this.zoneId) {
             this.dropZoneService.addComponent(this, this.zoneId);
@@ -3960,47 +3902,7 @@ class UploadComponent {
      * @hidden
      */
     writeValue(newValue) {
-        let isValid = true;
-        if (newValue instanceof Array) {
-            newValue.forEach((file) => {
-                if (!validateInitialFileInfo(file)) {
-                    isValid = false;
-                }
-            });
-            if (isValid) {
-                this.uploadService.addInitialFiles(newValue);
-            }
-        }
-        if (newValue === null) {
-            this.fileList.clear();
-        }
-        this.cdr.markForCheck();
-    }
-    /**
-     * @hidden
-     */
-    registerOnChange(fn) {
-        this.onChangeCallback = fn;
-    }
-    /**
-     * @hidden
-     */
-    registerOnTouched(fn) {
-        this.onTouchedCallback = fn;
-    }
-    /**
-     * @hidden
-     */
-    setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
-    }
-    /**
-     * @hidden
-     */
-    onFileSelectButtonFocus() {
-        if (!this.navigation.focused) {
-            this.navigation.focusedIndex = -1;
-        }
+        super.writeValue(newValue, validateInitialFileInfo, 'addInitialFiles');
     }
     /**
      * @hidden
@@ -4047,42 +3949,8 @@ class UploadComponent {
     getIds() {
         const id = ++idx;
         const buttonId = `k-upload-button-${id}`;
-        const inputId = `k-upload-input-${id}`;
-        return { buttonId, inputId };
-    }
-    /**
-     * Focuses the underlying input element.
-     */
-    focus() {
-        setTimeout(() => {
-            this.fileSelectButton.nativeElement.focus();
-            this.navigation.focused = true;
-            this.onFocus.emit();
-        });
-    }
-    /**
-     * @hidden
-     * @deprecated
-     */
-    focusComponent() {
-        this.focus();
-    }
-    /**
-     * Blurs the Upload if it was previously focused.
-     */
-    blur() {
-        if (this.navigation.focused) {
-            this.navigation.focused = false;
-            document.activeElement.blur();
-            this.onBlur.emit();
-        }
-    }
-    /**
-     * @hidden
-     * @deprecated
-     */
-    blurComponent() {
-        this.blur();
+        const fileListId = `k-upload-file-list-${id}`;
+        return { buttonId, fileListId };
     }
     /**
      * Pauses the upload process of a file that is currently uploading.
@@ -4240,7 +4108,7 @@ class UploadComponent {
     }
 }
 UploadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UploadComponent, deps: [{ token: UploadService }, { token: i1$1.LocalizationService }, { token: NavigationService }, { token: DropZoneService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-UploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: UploadComponent, selector: "kendo-upload", inputs: { autoUpload: "autoUpload", batch: "batch", withCredentials: "withCredentials", saveField: "saveField", saveHeaders: "saveHeaders", saveMethod: "saveMethod", saveUrl: "saveUrl", responseType: "responseType", removeField: "removeField", removeHeaders: "removeHeaders", removeMethod: "removeMethod", removeUrl: "removeUrl", chunkable: "chunkable", concurrent: "concurrent", multiple: "multiple", disabled: "disabled", showFileList: "showFileList", tabindex: "tabindex", zoneId: "zoneId", tabIndex: "tabIndex", accept: "accept", restrictions: "restrictions", focusableId: "focusableId", actionsLayout: "actionsLayout" }, outputs: { onBlur: "blur", cancel: "cancel", clear: "clear", complete: "complete", error: "error", onFocus: "focus", pause: "pause", remove: "remove", resume: "resume", select: "select", success: "success", upload: "upload", uploadProgress: "uploadProgress", valueChange: "valueChange" }, host: { properties: { "class.k-upload": "this.hostDefaultClasses", "attr.role": "this.hostRole", "class.k-disabled": "this.hostDisabledClass", "attr.dir": "this.dir" } }, providers: [
+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: [
         LocalizationService,
         NavigationService,
         UploadService,
@@ -4254,7 +4122,7 @@ UploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versio
             provide: KendoInput,
             useExisting: forwardRef(() => UploadComponent)
         }
-    ], queries: [{ propertyName: "fileTemplate", first: true, predicate: FileTemplateDirective, descendants: true }, { propertyName: "fileInfoTemplate", first: true, predicate: FileInfoTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "fileSelectInput", first: true, predicate: ["fileSelectInput"], descendants: true, static: true }, { propertyName: "fileSelectButton", first: true, predicate: ["fileSelectButton"], descendants: true, read: ElementRef, static: true }], exportAs: ["kendoUpload"], usesOnChanges: true, ngImport: i0, template: `
+    ], viewQueries: [{ propertyName: "fileSelectInput", first: true, predicate: ["fileSelectInput"], descendants: true, static: true }], exportAs: ["kendoUpload"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
     <ng-container kendoUploadLocalizedMessages
         i18n-cancel="kendo.upload.cancel|The text for the Cancel button"
         cancel="Cancel"
@@ -4328,12 +4196,13 @@ UploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versio
                 #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>
@@ -4351,12 +4220,13 @@ UploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versio
         </kendo-upload-status-total>
         <div class="k-dropzone-hint">{{textFor('dropFilesHere')}}</div>
     </div>
-    <ul kendo-upload-file-list *ngIf="showFileList && fileList.count > 0"
+    <ul kendo-upload-file-list *ngIf="hasFileList"
         class="k-upload-files k-reset"
         [disabled]="disabled"
         [fileList]="fileList.files"
         [fileTemplate]="fileTemplate"
-        [fileInfoTemplate]="fileInfoTemplate">
+        [fileInfoTemplate]="fileInfoTemplate"
+        [id]="fileListId">
     </ul>
     <kendo-upload-action-buttons
         *ngIf="showActionButtons"
@@ -4458,12 +4328,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 #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>
@@ -4481,12 +4352,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
         </kendo-upload-status-total>
         <div class="k-dropzone-hint">{{textFor('dropFilesHere')}}</div>
     </div>
-    <ul kendo-upload-file-list *ngIf="showFileList && fileList.count > 0"
+    <ul kendo-upload-file-list *ngIf="hasFileList"
         class="k-upload-files k-reset"
         [disabled]="disabled"
         [fileList]="fileList.files"
         [fileTemplate]="fileTemplate"
-        [fileInfoTemplate]="fileInfoTemplate">
+        [fileInfoTemplate]="fileInfoTemplate"
+        [id]="fileListId">
     </ul>
     <kendo-upload-action-buttons
         *ngIf="showActionButtons"
@@ -4523,42 +4395,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Input
             }], concurrent: [{
                 type: Input
-            }], multiple: [{
-                type: Input
-            }], disabled: [{
-                type: Input
             }], showFileList: [{
                 type: Input
-            }], tabindex: [{
-                type: Input
-            }], zoneId: [{
-                type: Input
             }], tabIndex: [{
                 type: Input,
                 args: ['tabIndex']
-            }], accept: [{
-                type: Input
-            }], restrictions: [{
-                type: Input
-            }], focusableId: [{
-                type: Input
             }], actionsLayout: [{
                 type: Input
-            }], fileTemplate: [{
-                type: ContentChild,
-                args: [FileTemplateDirective]
-            }], fileInfoTemplate: [{
-                type: ContentChild,
-                args: [FileInfoTemplateDirective]
             }], fileSelectInput: [{
                 type: ViewChild,
                 args: ['fileSelectInput', { static: true }]
-            }], fileSelectButton: [{
-                type: ViewChild,
-                args: ['fileSelectButton', { static: true, read: ElementRef }]
-            }], onBlur: [{
-                type: Output,
-                args: ['blur']
             }], cancel: [{
                 type: Output
             }], clear: [{
@@ -4567,17 +4413,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Output
             }], error: [{
                 type: Output
-            }], onFocus: [{
-                type: Output,
-                args: ['focus']
             }], pause: [{
                 type: Output
-            }], remove: [{
-                type: Output
             }], resume: [{
                 type: Output
-            }], select: [{
-                type: Output
             }], success: [{
                 type: Output
             }], upload: [{
@@ -4586,15 +4425,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Output
             }], valueChange: [{
                 type: Output
-            }], hostDefaultClasses: [{
-                type: HostBinding,
-                args: ['class.k-upload']
-            }], hostRole: [{
-                type: HostBinding,
-                args: ['attr.role']
-            }], hostDisabledClass: [{
-                type: HostBinding,
-                args: ['class.k-disabled']
             }], dir: [{
                 type: HostBinding,
                 args: ['attr.dir']