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

package/fesm2020/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: 1693305433,
-    version: '13.4.0',
+    publishDate: 1693335675,
+    version: '13.4.1-develop.1',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -2737,6 +2708,8 @@ class FileSelectDirective {
         this.type = "file";
         this.autocomplete = "off";
         this.tabIndex = -1;
+        this.ariaHidden = true;
+        this.classNames = true;
         this.element = el;
     }
     get nameAttribute() {
@@ -2751,6 +2724,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;
@@ -2778,7 +2754,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: [{
@@ -2792,6 +2768,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"]
@@ -2801,6 +2779,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"]
@@ -2813,6 +2797,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"]]
@@ -2893,11 +2880,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();
@@ -3021,6 +3007,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.
      */
@@ -3063,21 +3057,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;
@@ -3086,7 +3065,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;
@@ -3109,15 +3088,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() {
@@ -3199,6 +3177,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"
@@ -3206,14 +3185,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"
@@ -3229,7 +3204,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: [{
@@ -3283,6 +3258,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"
@@ -3290,14 +3266,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"
@@ -3502,8 +3474,6 @@ class UploadActionButtonsComponent {
         this.localization = localization;
         this.navigation = navigation;
         this.hostDefaultClass = true;
-        this.onAction();
-        this.onFocus();
     }
     get actionButtonsEndClassName() {
         return this.actionsLayout === 'end';
@@ -3517,28 +3487,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();
@@ -3571,6 +3523,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>
@@ -3585,6 +3538,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>
@@ -3743,10 +3697,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();
@@ -3996,6 +3949,14 @@ class UploadComponent {
     setDisabledState(isDisabled) {
         this.disabled = isDisabled;
     }
+    /**
+     * @hidden
+     */
+    onFileSelectButtonFocus() {
+        if (!this.navigation.focused) {
+            this.navigation.focusedIndex = -1;
+        }
+    }
     /**
      * @hidden
      */
@@ -4161,7 +4122,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;
@@ -4176,8 +4137,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;
@@ -4326,23 +4286,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"
@@ -4362,7 +4318,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: [{
@@ -4459,23 +4415,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"

package/file-select.directive.d.ts

@@ -18,16 +18,20 @@ export declare class FileSelectDirective {
     disabled: boolean;
     multiple: boolean;
     restrictions: FileRestrictions;
+    accept: string;
     type: string;
     autocomplete: string;
     tabIndex: number;
+    ariaHidden: boolean;
     element: ElementRef;
     constructor(uploadService: UploadService, navigation: NavigationService, el: ElementRef);
+    classNames: boolean;
     get nameAttribute(): string;
     get multipleAttribute(): string;
     get dirAttribute(): string;
     get disabledAttribute(): string;
+    get acceptAttribute(): string;
     onInputChange(event: any): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<FileSelectDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<FileSelectDirective, "[kendoFileSelect]", never, { "dir": "dir"; "disabled": "disabled"; "multiple": "multiple"; "restrictions": "restrictions"; }, {}, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<FileSelectDirective, "[kendoFileSelect]", never, { "dir": "dir"; "disabled": "disabled"; "multiple": "multiple"; "restrictions": "restrictions"; "accept": "accept"; }, {}, never>;
 }

package/fileselect.component.d.ts

@@ -138,6 +138,10 @@ export declare class FileSelectComponent implements OnInit, OnDestroy {
      * @hidden
      */
     setDisabledState(isDisabled: boolean): void;
+    /**
+     * @hidden
+     */
+    onFileSelectButtonFocus(): void;
     /**
      * Removes specific file from the file list.
      */
@@ -167,14 +171,6 @@ export declare class FileSelectComponent implements OnInit, OnDestroy {
         buttonId: string;
         inputId: string;
     };
-    /**
-     * @hidden
-     */
-    onFileSelectButtonFocus(_event?: any): void;
-    /**
-     * @hidden
-     */
-    onFileSelectButtonBlur(_event?: any): void;
     private subscribeBlur;
     private subscribeFocus;
     private handleKeydown;

package/navigation.service.d.ts

@@ -4,7 +4,6 @@
 *-------------------------------------------------------------------------------------------*/
 import { EventEmitter, NgZone } from '@angular/core';
 import { UploadService } from './upload.service';
-import { Direction } from './types/direction';
 import * as i0 from "@angular/core";
 /**
  * @hidden
@@ -12,11 +11,10 @@ import * as i0 from "@angular/core";
 export declare class NavigationService {
     private uploadService;
     private zone;
-    onActionButtonAction: EventEmitter<string>;
     onActionButtonFocus: EventEmitter<string>;
     onFileAction: EventEmitter<number>;
     onFileFocus: EventEmitter<number>;
-    onTab: EventEmitter<any>;
+    onTabOut: EventEmitter<any>;
     onWrapperFocus: EventEmitter<any>;
     onSelectButtonFocus: EventEmitter<any>;
     actionButtonsVisible: boolean;
@@ -25,17 +23,14 @@ export declare class NavigationService {
     private _focusedIndex;
     constructor(uploadService: UploadService, zone: NgZone);
     action(event: any): Function;
-    process(event: KeyboardEvent): void;
-    computeKeys(direction: Direction): void;
-    invertKeys(direction: Direction, original: any, inverted: any): any;
+    process(event: KeyboardEvent, component?: string): void;
+    computeKeys(): void;
     focusSelectButton(): void;
-    handleEnter(event: any): void;
+    handleEnter(): void;
     handleSpace(): void;
     handleDelete(): void;
     handleEscape(): void;
-    handleLeft(): void;
-    handleRight(): void;
-    handleTab(shifted: boolean): void;
+    handleTab(shifted: any, component: any): void;
     handleDown(event: any): void;
     handleUp(event: any): void;
     get focusedIndex(): number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-upload",
-  "version": "13.4.0",
+  "version": "13.4.1-develop.1",
   "description": "Kendo UI Angular Upload Component",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -23,16 +23,16 @@
     "@angular/core": "13 - 16",
     "@angular/platform-browser": "13 - 16",
     "@progress/kendo-licensing": "^1.0.2",
-    "@progress/kendo-angular-common": "13.4.0",
-    "@progress/kendo-angular-l10n": "13.4.0",
-    "@progress/kendo-angular-icons": "13.4.0",
-    "@progress/kendo-angular-buttons": "13.4.0",
-    "@progress/kendo-angular-progressbar": "13.4.0",
+    "@progress/kendo-angular-common": "13.4.1-develop.1",
+    "@progress/kendo-angular-l10n": "13.4.1-develop.1",
+    "@progress/kendo-angular-icons": "13.4.1-develop.1",
+    "@progress/kendo-angular-buttons": "13.4.1-develop.1",
+    "@progress/kendo-angular-progressbar": "13.4.1-develop.1",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "13.4.0"
+    "@progress/kendo-angular-schematics": "13.4.1-develop.1"
   },
   "schematics": "./schematics/collection.json",
   "module": "fesm2015/progress-kendo-angular-upload.mjs",