@progress/kendo-angular-upload 13.4.0-develop.9 → 13.4.1-develop.1

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

@@ -1334,11 +1334,10 @@ class NavigationService {
     constructor(uploadService, zone) {
         this.uploadService = uploadService;
         this.zone = zone;
-        this.onActionButtonAction = new EventEmitter();
         this.onActionButtonFocus = new EventEmitter();
         this.onFileAction = new EventEmitter();
         this.onFileFocus = new EventEmitter();
-        this.onTab = new EventEmitter();
+        this.onTabOut = new EventEmitter();
         this.onWrapperFocus = new EventEmitter();
         this.onSelectButtonFocus = new EventEmitter();
         this.actionButtonsVisible = false;
@@ -1349,99 +1348,75 @@ class NavigationService {
         const key = event.keyCode;
         return this.keyBindings[key];
     }
-    process(event) {
+    process(event, component) {
         const handler = this.action(event);
         if (handler) {
-            handler(event);
+            handler(event, component);
         }
     }
-    computeKeys(direction) {
+    computeKeys() {
         this.keyBindings = {
             [Keys.Space]: () => this.handleSpace(),
-            [Keys.Enter]: (event) => this.handleEnter(event),
+            [Keys.Enter]: () => this.handleEnter(),
             [Keys.Escape]: () => this.handleEscape(),
             [Keys.Delete]: () => this.handleDelete(),
-            [Keys.Tab]: (event) => this.handleTab(event.shiftKey),
+            [Keys.Tab]: (event, component) => this.handleTab(event.shiftKey, component),
             [Keys.ArrowUp]: (event) => this.handleUp(event),
-            [Keys.ArrowDown]: (event) => this.handleDown(event),
-            [this.invertKeys(direction, Keys.ArrowLeft, Keys.ArrowRight)]: () => this.handleLeft(),
-            [this.invertKeys(direction, Keys.ArrowRight, Keys.ArrowLeft)]: () => this.handleRight()
+            [Keys.ArrowDown]: (event) => this.handleDown(event)
         };
     }
-    invertKeys(direction, original, inverted) {
-        return direction === 'rtl' ? inverted : original;
-    }
     focusSelectButton() {
         this.focused = true;
         this._focusedIndex = -1;
         this.onSelectButtonFocus.emit();
     }
-    handleEnter(event) {
-        if (this.lastIndex >= 0) {
-            this.zone.run(() => {
-                if (this.focusedIndex <= this.lastFileIndex) {
-                    this.onFileAction.emit(Keys.Enter);
-                    return;
-                }
-                if (this.actionButtonsVisible && this.focusedIndex <= this.lastIndex) {
-                    event.preventDefault();
-                    this.onActionButtonAction.emit(this.focusedIndex < this.lastIndex ? "clear" : "upload");
-                }
-            });
+    handleEnter() {
+        if (this.lastIndex >= 0 && this.focusedIndex >= 0 && this.focusedIndex <= this.lastFileIndex) {
+            this.zone.run(() => this.onFileAction.emit(Keys.Enter));
         }
     }
     handleSpace() {
-        if (this.focusedIndex >= 0 && this.focusedIndex <= this.lastFileIndex) {
+        if (this.lastIndex >= 0 && this.focusedIndex >= 0 && this.focusedIndex <= this.lastFileIndex) {
             this.zone.run(() => this.onFileAction.emit(Keys.Space));
         }
     }
     handleDelete() {
         if (this.focusedIndex >= 0 && this.focusedIndex <= this.lastFileIndex) {
-            this.zone.run(() => {
-                this.onFileAction.emit(Keys.Delete);
-            });
+            this.zone.run(() => this.onFileAction.emit(Keys.Delete));
         }
     }
     handleEscape() {
         if (this.focusedIndex >= 0 && this.focusedIndex <= this.lastFileIndex) {
-            this.onFileAction.emit(Keys.Escape);
-        }
-    }
-    handleLeft() {
-        if (this.actionButtonsVisible && this.focusedIndex === this.lastIndex) {
-            this.focusedIndex -= 1;
-            this.zone.run(() => {
-                this.onActionButtonFocus.emit("clear");
-            });
-        }
-    }
-    handleRight() {
-        if (this.actionButtonsVisible && this.focusedIndex === this.lastIndex - 1) {
-            this.focusedIndex += 1;
-            this.zone.run(() => {
-                this.onActionButtonFocus.emit("upload");
-            });
+            this.zone.run(() => this.onFileAction.emit(Keys.Escape));
         }
     }
-    handleTab(shifted) {
-        if (this.focusedIndex === -1) {
+    handleTab(shifted, component) {
+        /* Select Files button is focused */
+        if (this.focusedIndex === -1 && this.actionButtonsVisible && !shifted) {
             this.focusedIndex = this.lastFileIndex + 1;
-            this.zone.run(() => this.onActionButtonFocus.emit("clear"));
             return;
         }
+        /* File in the list is focused */
+        if (this.focusedIndex > -1 && this.focusedIndex <= this.lastFileIndex) {
+            if (shifted) {
+                this.focusedIndex = -1;
+            }
+            else if (component !== 'fileselect' && this.actionButtonsVisible) {
+                this.focusedIndex = this.lastFileIndex + 1;
+                return;
+            }
+        }
+        /* Clear button is focused */
         if (this.focusedIndex === this.lastFileIndex + 1) {
-            this.focusedIndex += 1;
-            this.zone.run(() => this.onActionButtonFocus.emit("upload"));
+            this.focusedIndex = shifted ? -1 : this.lastIndex;
             return;
         }
-        if (this.focusedIndex === this.lastIndex && shifted) {
+        /* Upload button is focused */
+        if (this.focusedIndex === this.lastIndex && this.actionButtonsVisible && shifted) {
             this.focusedIndex -= 1;
             return;
         }
-        if (this.focusedIndex === this.lastFileIndex + 1 && shifted) {
-            this.focusedIndex = -1;
-            this.zone.run(() => this.onSelectButtonFocus.emit());
-        }
+        this.onTabOut.emit();
     }
     handleDown(event) {
         if (this.lastIndex >= 0 && this.focusedIndex < this.lastIndex) {
@@ -1452,10 +1427,6 @@ class NavigationService {
                     this.onFileFocus.emit(this.focusedIndex);
                     return;
                 }
-                if (this.actionButtonsVisible && this.focusedIndex === this.lastFileIndex) {
-                    this.focusedIndex += 1;
-                    this.onActionButtonFocus.emit("clear");
-                }
             });
         }
     }
@@ -1539,8 +1510,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-upload',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1692905463,
-    version: '13.4.0-develop.9',
+    publishDate: 1693335675,
+    version: '13.4.1-develop.1',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -2739,6 +2710,8 @@ class FileSelectDirective {
         this.type = "file";
         this.autocomplete = "off";
         this.tabIndex = -1;
+        this.ariaHidden = true;
+        this.classNames = true;
         this.element = el;
     }
     get nameAttribute() {
@@ -2753,6 +2726,9 @@ class FileSelectDirective {
     get disabledAttribute() {
         return this.disabled ? "true" : null;
     }
+    get acceptAttribute() {
+        return this.accept ? this.accept : null;
+    }
     onInputChange(event) {
         const ua = navigator.userAgent;
         const webkit = /(webkit)[ \/]([\w.]+)/i;
@@ -2780,7 +2756,7 @@ class FileSelectDirective {
     }
 }
 FileSelectDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FileSelectDirective, deps: [{ token: UploadService }, { token: NavigationService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-FileSelectDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: FileSelectDirective, selector: "[kendoFileSelect]", inputs: { dir: "dir", disabled: "disabled", multiple: "multiple", restrictions: "restrictions" }, host: { listeners: { "change": "onInputChange($event)" }, properties: { "attr.type": "this.type", "attr.autocomplete": "this.autocomplete", "attr.tabindex": "this.tabIndex", "attr.name": "this.nameAttribute", "attr.multiple": "this.multipleAttribute", "attr.dir": "this.dirAttribute", "attr.disabled": "this.disabledAttribute" } }, ngImport: i0 });
+FileSelectDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: FileSelectDirective, selector: "[kendoFileSelect]", inputs: { dir: "dir", disabled: "disabled", multiple: "multiple", restrictions: "restrictions", accept: "accept" }, 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" } }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FileSelectDirective, decorators: [{
             type: Directive,
             args: [{
@@ -2794,6 +2770,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], restrictions: [{
                 type: Input
+            }], accept: [{
+                type: Input
             }], type: [{
                 type: HostBinding,
                 args: ["attr.type"]
@@ -2803,6 +2781,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             }], tabIndex: [{
                 type: HostBinding,
                 args: ["attr.tabindex"]
+            }], ariaHidden: [{
+                type: HostBinding,
+                args: ["attr.aria-hidden"]
+            }], classNames: [{
+                type: HostBinding,
+                args: ["class.k-hidden"]
             }], nameAttribute: [{
                 type: HostBinding,
                 args: ["attr.name"]
@@ -2815,6 +2799,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             }], disabledAttribute: [{
                 type: HostBinding,
                 args: ["attr.disabled"]
+            }], acceptAttribute: [{
+                type: HostBinding,
+                args: ["attr.accept"]
             }], onInputChange: [{
                 type: HostListener,
                 args: ["change", ["$event"]]
@@ -2895,11 +2882,10 @@ class FileSelectComponent {
         validatePackage(packageMetadata);
         this.wrapper = wrapper.nativeElement;
         this.direction = localization.rtl ? 'rtl' : 'ltr';
-        this.navigation.computeKeys(this.direction);
+        this.navigation.computeKeys();
         this.fileList = this.uploadService.files;
         this.localizationChangeSubscription = localization.changes.subscribe(({ rtl }) => {
             this.direction = rtl ? 'rtl' : 'ltr';
-            this.navigation.computeKeys(this.direction);
         });
         this.subscribeBlur();
         this.subscribeFocus();
@@ -3023,6 +3009,14 @@ class FileSelectComponent {
     setDisabledState(isDisabled) {
         this.disabled = isDisabled;
     }
+    /**
+     * @hidden
+     */
+    onFileSelectButtonFocus() {
+        if (!this.navigation.focused) {
+            this.navigation.focusedIndex = -1;
+        }
+    }
     /**
      * Removes specific file from the file list.
      */
@@ -3065,21 +3059,6 @@ class FileSelectComponent {
         return { buttonId, inputId };
     }
     ;
-    /**
-     * @hidden
-     */
-    onFileSelectButtonFocus(_event) {
-        this.renderer.addClass(this.fileSelectButton.nativeElement, 'k-focus');
-        if (!this.navigation.focused) {
-            this.navigation.focusedIndex = -1;
-        }
-    }
-    /**
-     * @hidden
-     */
-    onFileSelectButtonBlur(_event) {
-        this.renderer.removeClass(this.fileSelectButton.nativeElement, 'k-focus');
-    }
     subscribeBlur() {
         if (!isDocumentAvailable()) {
             return;
@@ -3088,7 +3067,7 @@ class FileSelectComponent {
             this.documentClick = fromEvent(document, 'click').pipe(filter((event) => {
                 return !(this.wrapper !== event.target && this.wrapper.contains(event.target));
             }));
-            this.blurSubscription = merge(this.documentClick, this.navigation.onTab).subscribe(() => {
+            this.blurSubscription = merge(this.documentClick, this.navigation.onTabOut).subscribe(() => {
                 if (this.navigation.focused) {
                     this.ngZone.run(() => {
                         this.navigation.focused = false;
@@ -3111,15 +3090,14 @@ class FileSelectComponent {
         if (this.disabled) {
             return;
         }
-        if ((event.keyCode === Keys.Enter || event.keyCode === Keys.Space) &&
-            event.target === this.fileSelectButton.nativeElement) {
+        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);
+            this.navigation.process(event, 'fileselect');
         }
     }
     attachEventHandlers() {
@@ -3201,6 +3179,7 @@ FileSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
                 type="button"
                 role="button"
                 (click)="fileSelectInput.click()"
+                (focus)="onFileSelectButtonFocus()"
                 [id]="focusableId"
                 [attr.aria-label]="textFor('select')"
                 [attr.tabindex]="tabindex"
@@ -3208,14 +3187,10 @@ FileSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
             >
                 {{textFor('select')}}
             </button>
-            <input
-                #fileSelectInput
-                kendoFileSelect
-                class="k-hidden"
+            <input kendoFileSelect #fileSelectInput
                 [id]="inputElementId"
-                [attr.accept]="accept ? accept : null"
-                [attr.aria-hidden]="true"
                 [dir]="direction"
+                [accept]="accept"
                 [restrictions]="restrictions"
                 [multiple]="multiple"
                 [disabled]="disabled"
@@ -3231,7 +3206,7 @@ FileSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
             [fileTemplate]="fileTemplate"
             [fileInfoTemplate]="fileInfoTemplate">
         </ul>
-    `, isInline: true, components: [{ type: i5.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: FileListComponent, selector: "[kendo-upload-file-list]", inputs: ["disabled", "fileList", "fileTemplate", "fileInfoTemplate"] }], directives: [{ type: LocalizedMessagesDirective, selector: "\n    [kendoUploadLocalizedMessages],\n    [kendoFileSelectLocalizedMessages],\n    [kendoUploadDropZoneLocalizedMessages]\n  " }, { type: DropZoneInternalDirective, selector: "\n      [kendoUploadInternalDropZone],\n      [kendoFileSelectInternalDropZone]\n    ", inputs: ["disabled", "multiple", "restrictions"] }, { type: FileSelectDirective, selector: "[kendoFileSelect]", inputs: ["dir", "disabled", "multiple", "restrictions"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    `, isInline: true, components: [{ type: i5.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: FileListComponent, selector: "[kendo-upload-file-list]", inputs: ["disabled", "fileList", "fileTemplate", "fileInfoTemplate"] }], directives: [{ type: LocalizedMessagesDirective, selector: "\n    [kendoUploadLocalizedMessages],\n    [kendoFileSelectLocalizedMessages],\n    [kendoUploadDropZoneLocalizedMessages]\n  " }, { type: DropZoneInternalDirective, selector: "\n      [kendoUploadInternalDropZone],\n      [kendoFileSelectInternalDropZone]\n    ", inputs: ["disabled", "multiple", "restrictions"] }, { type: FileSelectDirective, selector: "[kendoFileSelect]", inputs: ["dir", "disabled", "multiple", "restrictions", "accept"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FileSelectComponent, decorators: [{
             type: Component,
             args: [{
@@ -3285,6 +3260,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type="button"
                 role="button"
                 (click)="fileSelectInput.click()"
+                (focus)="onFileSelectButtonFocus()"
                 [id]="focusableId"
                 [attr.aria-label]="textFor('select')"
                 [attr.tabindex]="tabindex"
@@ -3292,14 +3268,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             >
                 {{textFor('select')}}
             </button>
-            <input
-                #fileSelectInput
-                kendoFileSelect
-                class="k-hidden"
+            <input kendoFileSelect #fileSelectInput
                 [id]="inputElementId"
-                [attr.accept]="accept ? accept : null"
-                [attr.aria-hidden]="true"
                 [dir]="direction"
+                [accept]="accept"
                 [restrictions]="restrictions"
                 [multiple]="multiple"
                 [disabled]="disabled"
@@ -3504,8 +3476,6 @@ class UploadActionButtonsComponent {
         this.localization = localization;
         this.navigation = navigation;
         this.hostDefaultClass = true;
-        this.onAction();
-        this.onFocus();
     }
     get actionButtonsEndClassName() {
         return this.actionsLayout === 'end';
@@ -3519,28 +3489,10 @@ class UploadActionButtonsComponent {
     get actionButtonsCenterClassName() {
         return this.actionsLayout === 'center';
     }
-    onAction() {
-        this.actionSubscription = this.navigation.onActionButtonAction.subscribe((button) => {
-            if (button === "clear") {
-                this.clearFiles();
-            }
-            else {
-                this.performUpload();
-            }
-        });
-    }
-    onFocus() {
-        this.focusSubscription = this.navigation.onActionButtonFocus.subscribe((button) => {
-            this.focusButton(button);
-        });
-    }
-    focusButton(button) {
-        const el = (button === "clear") ? this.clearButton : this.uploadButton;
-        el.nativeElement.focus();
-    }
-    ngOnDestroy() {
-        this.actionSubscription.unsubscribe();
-        this.focusSubscription.unsubscribe();
+    onUploadButtonFocus() {
+        if (!this.navigation.focused) {
+            this.navigation.focusedIndex = this.navigation.lastIndex;
+        }
     }
     onUploadButtonClick(event) {
         event.stopImmediatePropagation();
@@ -3573,6 +3525,7 @@ UploadActionButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
                 {{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>
@@ -3587,6 +3540,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 {{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>
@@ -3744,10 +3698,9 @@ class UploadComponent {
         this.fileList = this.uploadService.files;
         this.localizationChangeSubscription = localization.changes.subscribe(({ rtl }) => {
             this.direction = rtl ? 'rtl' : 'ltr';
-            this.navigation.computeKeys(this.direction);
         });
         this.direction = localization.rtl ? 'rtl' : 'ltr';
-        this.navigation.computeKeys(this.direction);
+        this.navigation.computeKeys();
         this.wrapper = wrapper.nativeElement;
         this.subscribeBlur();
         this.subscribeFocus();
@@ -3997,6 +3950,14 @@ class UploadComponent {
     setDisabledState(isDisabled) {
         this.disabled = isDisabled;
     }
+    /**
+     * @hidden
+     */
+    onFileSelectButtonFocus() {
+        if (!this.navigation.focused) {
+            this.navigation.focusedIndex = -1;
+        }
+    }
     /**
      * @hidden
      */
@@ -4162,7 +4123,7 @@ class UploadComponent {
             this.documentClick = fromEvent(document, 'click').pipe(filter((event) => {
                 return !(this.wrapper !== event.target && this.wrapper.contains(event.target));
             }));
-            this.blurSubscription = merge(this.documentClick, this.navigation.onTab).subscribe(() => {
+            this.blurSubscription = merge(this.documentClick, this.navigation.onTabOut).subscribe(() => {
                 if (this.navigation.focused) {
                     this.zone.run(() => {
                         this.navigation.focused = false;
@@ -4177,8 +4138,7 @@ class UploadComponent {
         if (this.disabled) {
             return;
         }
-        if ((event.keyCode === Keys.Enter || event.keyCode === Keys.Space) &&
-            event.target === this.fileSelectButton.nativeElement) {
+        if (event.target === this.fileSelectButton.nativeElement && (event.keyCode === Keys.Enter || event.keyCode === Keys.Space)) {
             event.preventDefault();
             this.fileSelectInput.nativeElement.click();
             return;
@@ -4327,23 +4287,19 @@ UploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
                 type="button"
                 role="button"
                 (click)="fileSelectInput.click()"
+                (focus)="onFileSelectButtonFocus()"
                 [id]="focusableId"
                 [attr.aria-label]="textFor('select')"
                 [attr.tabindex]="tabindex"
             >
                 {{textFor('select')}}
             </button>
-            <input
-                #fileSelectInput
-                kendoFileSelect
-                class="k-hidden"
-                [attr.accept]="accept ? accept : null"
-                [attr.aria-hidden]="true"
+            <input kendoFileSelect #fileSelectInput
                 [dir]="direction"
+                [accept]="accept"
                 [restrictions]="restrictions"
                 [multiple]="multiple"
-                [disabled]="disabled"
-            />
+                [disabled]="disabled" />
         </div>
         <kendo-upload-status-total *ngIf="showTotalStatus"
             class="k-upload-status"
@@ -4363,7 +4319,7 @@ UploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
         [disabled]="disabled"
         [actionsLayout]="actionsLayout">
     </kendo-upload-action-buttons>
-    `, isInline: true, components: [{ type: i5.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: UploadStatusTotalComponent, selector: "kendo-upload-status-total", inputs: ["fileList"] }, { type: FileListComponent, selector: "[kendo-upload-file-list]", inputs: ["disabled", "fileList", "fileTemplate", "fileInfoTemplate"] }, { type: UploadActionButtonsComponent, selector: "kendo-upload-action-buttons", inputs: ["disabled", "actionsLayout"] }], directives: [{ type: LocalizedMessagesDirective, selector: "\n    [kendoUploadLocalizedMessages],\n    [kendoFileSelectLocalizedMessages],\n    [kendoUploadDropZoneLocalizedMessages]\n  " }, { type: DropZoneInternalDirective, selector: "\n      [kendoUploadInternalDropZone],\n      [kendoFileSelectInternalDropZone]\n    ", inputs: ["disabled", "multiple", "restrictions"] }, { type: FileSelectDirective, selector: "[kendoFileSelect]", inputs: ["dir", "disabled", "multiple", "restrictions"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    `, isInline: true, components: [{ type: i5.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: UploadStatusTotalComponent, selector: "kendo-upload-status-total", inputs: ["fileList"] }, { type: FileListComponent, selector: "[kendo-upload-file-list]", inputs: ["disabled", "fileList", "fileTemplate", "fileInfoTemplate"] }, { type: UploadActionButtonsComponent, selector: "kendo-upload-action-buttons", inputs: ["disabled", "actionsLayout"] }], directives: [{ type: LocalizedMessagesDirective, selector: "\n    [kendoUploadLocalizedMessages],\n    [kendoFileSelectLocalizedMessages],\n    [kendoUploadDropZoneLocalizedMessages]\n  " }, { type: DropZoneInternalDirective, selector: "\n      [kendoUploadInternalDropZone],\n      [kendoFileSelectInternalDropZone]\n    ", inputs: ["disabled", "multiple", "restrictions"] }, { type: FileSelectDirective, selector: "[kendoFileSelect]", inputs: ["dir", "disabled", "multiple", "restrictions", "accept"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: UploadComponent, decorators: [{
             type: Component,
             args: [{
@@ -4460,23 +4416,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type="button"
                 role="button"
                 (click)="fileSelectInput.click()"
+                (focus)="onFileSelectButtonFocus()"
                 [id]="focusableId"
                 [attr.aria-label]="textFor('select')"
                 [attr.tabindex]="tabindex"
             >
                 {{textFor('select')}}
             </button>
-            <input
-                #fileSelectInput
-                kendoFileSelect
-                class="k-hidden"
-                [attr.accept]="accept ? accept : null"
-                [attr.aria-hidden]="true"
+            <input kendoFileSelect #fileSelectInput
                 [dir]="direction"
+                [accept]="accept"
                 [restrictions]="restrictions"
                 [multiple]="multiple"
-                [disabled]="disabled"
-            />
+                [disabled]="disabled" />
         </div>
         <kendo-upload-status-total *ngIf="showTotalStatus"
             class="k-upload-status"