@progress/kendo-angular-upload 7.1.4 → 7.1.5-dev.202111161429

package/dist/es2015/package-metadata.js

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-upload',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1635939353,
+    publishDate: 1637072903,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };

package/dist/es2015/rendering/file-list-item-action-button.component.d.ts

@@ -5,23 +5,25 @@
 import { FileInfo } from '../types';
 import { UploadService } from '../upload.service';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
+import { NavigationService } from './../navigation.service';
 /**
  * @hidden
  */
 export declare class FileListItemActionButtonComponent {
     private uploadService;
     private localization;
+    private navigation;
     file: FileInfo;
     disabled: boolean;
     progress: Number;
     actionFocused: boolean;
     retryFocused: boolean;
     pauseResumeFocused: boolean;
-    constructor(uploadService: UploadService, localization: LocalizationService);
+    constructor(uploadService: UploadService, localization: LocalizationService, navigation: NavigationService);
     onFocus(type: string): void;
     onBlur(type: string): void;
     onRetryClick(): void;
-    onRemoveCancelClick(): void;
+    onRemoveCancelClick(event?: any): void;
     onPauseResumeClick(): void;
     readonly actionButtonTitle: string;
     readonly retryButtonTitle: string;

package/dist/es2015/rendering/file-list-item-action-button.component.js

@@ -7,13 +7,15 @@ import { Input, Component } from '@angular/core';
 import { FileState } from '../types';
 import { UploadService } from '../upload.service';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
+import { NavigationService } from './../navigation.service';
 /**
  * @hidden
  */
 let FileListItemActionButtonComponent = class FileListItemActionButtonComponent {
-    constructor(uploadService, localization) {
+    constructor(uploadService, localization, navigation) {
         this.uploadService = uploadService;
         this.localization = localization;
+        this.navigation = navigation;
         this.actionFocused = false;
         this.retryFocused = false;
         this.pauseResumeFocused = false;
@@ -46,10 +48,11 @@ let FileListItemActionButtonComponent = class FileListItemActionButtonComponent
         }
         this.uploadService.retryFiles(this.file.uid);
     }
-    onRemoveCancelClick() {
+    onRemoveCancelClick(event) {
         if (this.disabled) {
             return;
         }
+        event.stopImmediatePropagation();
         const uid = this.file.uid;
         if (this.file.state === FileState.Uploading) {
             this.uploadService.cancelFiles(uid);
@@ -57,6 +60,7 @@ let FileListItemActionButtonComponent = class FileListItemActionButtonComponent
         else {
             this.uploadService.removeFiles(uid);
         }
+        this.navigation.focusSelectButton();
     }
     onPauseResumeClick() {
         if (this.disabled) {
@@ -160,7 +164,7 @@ FileListItemActionButtonComponent = tslib_1.__decorate([
           [attr.tabIndex]="-1"
           (focus)="onFocus('action')"
           (blur)="onBlur('action')"
-          (click)="onRemoveCancelClick()">
+          (click)="onRemoveCancelClick($event)">
           <span class="k-icon"
             [ngClass]="{
               'k-i-cancel': isUploading,
@@ -174,6 +178,7 @@ FileListItemActionButtonComponent = tslib_1.__decorate([
     `
     }),
     tslib_1.__metadata("design:paramtypes", [UploadService,
-        LocalizationService])
+        LocalizationService,
+        NavigationService])
 ], FileListItemActionButtonComponent);
 export { FileListItemActionButtonComponent };

package/dist/es2015/rendering/upload-action-buttons.component.d.ts

@@ -30,7 +30,9 @@ export declare class UploadActionButtonsComponent implements OnDestroy {
     onFocus(): void;
     focusButton(button: string): void;
     ngOnDestroy(): void;
-    performUpload(_event?: any): void;
-    clearFiles(_event?: any): void;
+    onUploadButtonClick(event?: any): void;
+    performUpload(): void;
+    onClearButtonClick(event?: any): void;
+    clearFiles(): void;
     textFor(key: string): string;
 }

package/dist/es2015/rendering/upload-action-buttons.component.js

@@ -39,7 +39,6 @@ let UploadActionButtonsComponent = class UploadActionButtonsComponent {
             else {
                 this.performUpload();
             }
-            this.navigation.focusSelectButton();
         });
     }
     onFocus() {
@@ -55,14 +54,24 @@ let UploadActionButtonsComponent = class UploadActionButtonsComponent {
         this.actionSubscription.unsubscribe();
         this.focusSubscription.unsubscribe();
     }
-    performUpload(_event) {
+    onUploadButtonClick(event) {
+        event.stopImmediatePropagation();
+        this.performUpload();
+    }
+    performUpload() {
         if (!this.disabled) {
             this.uploadService.uploadFiles();
+            this.navigation.focusSelectButton();
         }
     }
-    clearFiles(_event) {
+    onClearButtonClick(event) {
+        event.stopImmediatePropagation();
+        this.clearFiles();
+    }
+    clearFiles() {
         if (!this.disabled) {
             this.uploadService.clearFiles();
+            this.navigation.focusSelectButton();
         }
     }
     textFor(key) {
@@ -115,12 +124,12 @@ UploadActionButtonsComponent = tslib_1.__decorate([
         template: `
         <button #clearButton type="button" class="k-button k-clear-selected"
             [attr.tabIndex]="-1"
-            (click)="clearFiles($event)">
+            (click)="onClearButtonClick($event)">
                 {{textFor('clearSelectedFiles')}}
         </button>
         <button #uploadButton type="button" class="k-button k-primary k-upload-selected"
             [attr.tabIndex]="-1"
-            (click)="performUpload($event)">
+            (click)="onUploadButtonClick($event)">
                 {{textFor('uploadSelectedFiles')}}
         </button>
     `

package/dist/fesm2015/index.js

@@ -21,7 +21,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-upload',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1635939353,
+    publishDate: 1637072903,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };
@@ -2549,9 +2549,10 @@ FileListComponent = __decorate([
  * @hidden
  */
 let FileListItemActionButtonComponent = class FileListItemActionButtonComponent {
-    constructor(uploadService, localization) {
+    constructor(uploadService, localization, navigation) {
         this.uploadService = uploadService;
         this.localization = localization;
+        this.navigation = navigation;
         this.actionFocused = false;
         this.retryFocused = false;
         this.pauseResumeFocused = false;
@@ -2584,10 +2585,11 @@ let FileListItemActionButtonComponent = class FileListItemActionButtonComponent
         }
         this.uploadService.retryFiles(this.file.uid);
     }
-    onRemoveCancelClick() {
+    onRemoveCancelClick(event) {
         if (this.disabled) {
             return;
         }
+        event.stopImmediatePropagation();
         const uid = this.file.uid;
         if (this.file.state === FileState.Uploading) {
             this.uploadService.cancelFiles(uid);
@@ -2595,6 +2597,7 @@ let FileListItemActionButtonComponent = class FileListItemActionButtonComponent
         else {
             this.uploadService.removeFiles(uid);
         }
+        this.navigation.focusSelectButton();
     }
     onPauseResumeClick() {
         if (this.disabled) {
@@ -2698,7 +2701,7 @@ FileListItemActionButtonComponent = __decorate([
           [attr.tabIndex]="-1"
           (focus)="onFocus('action')"
           (blur)="onBlur('action')"
-          (click)="onRemoveCancelClick()">
+          (click)="onRemoveCancelClick($event)">
           <span class="k-icon"
             [ngClass]="{
               'k-i-cancel': isUploading,
@@ -2712,7 +2715,8 @@ FileListItemActionButtonComponent = __decorate([
     `
     }),
     __metadata("design:paramtypes", [UploadService,
-        LocalizationService])
+        LocalizationService,
+        NavigationService])
 ], FileListItemActionButtonComponent);
 
 /**
@@ -4367,7 +4371,6 @@ let UploadActionButtonsComponent = class UploadActionButtonsComponent {
             else {
                 this.performUpload();
             }
-            this.navigation.focusSelectButton();
         });
     }
     onFocus() {
@@ -4383,14 +4386,24 @@ let UploadActionButtonsComponent = class UploadActionButtonsComponent {
         this.actionSubscription.unsubscribe();
         this.focusSubscription.unsubscribe();
     }
-    performUpload(_event) {
+    onUploadButtonClick(event) {
+        event.stopImmediatePropagation();
+        this.performUpload();
+    }
+    performUpload() {
         if (!this.disabled) {
             this.uploadService.uploadFiles();
+            this.navigation.focusSelectButton();
         }
     }
-    clearFiles(_event) {
+    onClearButtonClick(event) {
+        event.stopImmediatePropagation();
+        this.clearFiles();
+    }
+    clearFiles() {
         if (!this.disabled) {
             this.uploadService.clearFiles();
+            this.navigation.focusSelectButton();
         }
     }
     textFor(key) {
@@ -4443,12 +4456,12 @@ UploadActionButtonsComponent = __decorate([
         template: `
         <button #clearButton type="button" class="k-button k-clear-selected"
             [attr.tabIndex]="-1"
-            (click)="clearFiles($event)">
+            (click)="onClearButtonClick($event)">
                 {{textFor('clearSelectedFiles')}}
         </button>
         <button #uploadButton type="button" class="k-button k-primary k-upload-selected"
             [attr.tabIndex]="-1"
-            (click)="performUpload($event)">
+            (click)="onUploadButtonClick($event)">
                 {{textFor('uploadSelectedFiles')}}
         </button>
     `

package/dist/fesm5/index.js

@@ -21,7 +21,7 @@ var packageMetadata = {
     name: '@progress/kendo-angular-upload',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1635939353,
+    publishDate: 1637072903,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };
@@ -2640,9 +2640,10 @@ var FileListComponent = /** @class */ (function () {
  * @hidden
  */
 var FileListItemActionButtonComponent = /** @class */ (function () {
-    function FileListItemActionButtonComponent(uploadService, localization) {
+    function FileListItemActionButtonComponent(uploadService, localization, navigation) {
         this.uploadService = uploadService;
         this.localization = localization;
+        this.navigation = navigation;
         this.actionFocused = false;
         this.retryFocused = false;
         this.pauseResumeFocused = false;
@@ -2675,10 +2676,11 @@ var FileListItemActionButtonComponent = /** @class */ (function () {
         }
         this.uploadService.retryFiles(this.file.uid);
     };
-    FileListItemActionButtonComponent.prototype.onRemoveCancelClick = function () {
+    FileListItemActionButtonComponent.prototype.onRemoveCancelClick = function (event) {
         if (this.disabled) {
             return;
         }
+        event.stopImmediatePropagation();
         var uid = this.file.uid;
         if (this.file.state === FileState.Uploading) {
             this.uploadService.cancelFiles(uid);
@@ -2686,6 +2688,7 @@ var FileListItemActionButtonComponent = /** @class */ (function () {
         else {
             this.uploadService.removeFiles(uid);
         }
+        this.navigation.focusSelectButton();
     };
     FileListItemActionButtonComponent.prototype.onPauseResumeClick = function () {
         if (this.disabled) {
@@ -2783,10 +2786,11 @@ var FileListItemActionButtonComponent = /** @class */ (function () {
     FileListItemActionButtonComponent = __decorate([
         Component({
             selector: 'kendo-upload-file-list-item-action-button',
-            template: "\n      <strong class=\"k-upload-status\">\n        <span class=\"k-upload-pct\" *ngIf=\"isUploading || isPaused\">{{progress}}%</span>\n\n        <button type=\"button\" *ngIf=\"isFailed\" class=\"k-button k-button-icon k-flat k-upload-action\"\n          [ngClass]=\"{ 'k-state-focused': this.retryFocused }\"\n          [attr.tabIndex]=\"-1\"\n          (focus)=\"onFocus('retry')\"\n          (blur)=\"onBlur('retry')\"\n          (click)=\"onRetryClick()\">\n          <span class=\"k-icon k-retry k-i-refresh-sm\"\n            [attr.aria-label]=\"retryButtonTitle\"\n            [attr.title]=\"retryButtonTitle\">\n          </span>\n        </button>\n\n        <button *ngIf=\"isResumable\" type=\"button\" class=\"k-button k-button-icon k-flat k-upload-action\"\n          [ngClass]=\"{ 'k-state-focused': this.pauseResumeFocused }\"\n          [attr.tabIndex]=\"-1\"\n          (focus)=\"onFocus('pauseResume')\"\n          (blur)=\"onBlur('pauseResume')\"\n          (click)=\"onPauseResumeClick()\">\n          <span class=\"k-icon\"\n            [ngClass]=\"{\n              'k-i-play-sm': isPaused,\n              'k-i-pause-sm': !isPaused\n            }\"\n            [attr.aria-label]='pauseResumeButtonTitle'\n            [attr.title]='pauseResumeButtonTitle'>\n          </span>\n        </button>\n\n        <button type=\"button\" *ngIf=\"isActionButtonVisible\" class=\"k-button k-button-icon k-flat k-upload-action\"\n          [ngClass]=\"{ 'k-state-focused': this.actionFocused }\"\n          [attr.tabIndex]=\"-1\"\n          (focus)=\"onFocus('action')\"\n          (blur)=\"onBlur('action')\"\n          (click)=\"onRemoveCancelClick()\">\n          <span class=\"k-icon\"\n            [ngClass]=\"{\n              'k-i-cancel': isUploading,\n              'k-delete k-i-x': !isUploading\n            }\"\n            [attr.aria-label]='actionButtonTitle'\n            [attr.title]='actionButtonTitle'>\n          </span>\n        </button>\n      </strong>\n    "
+            template: "\n      <strong class=\"k-upload-status\">\n        <span class=\"k-upload-pct\" *ngIf=\"isUploading || isPaused\">{{progress}}%</span>\n\n        <button type=\"button\" *ngIf=\"isFailed\" class=\"k-button k-button-icon k-flat k-upload-action\"\n          [ngClass]=\"{ 'k-state-focused': this.retryFocused }\"\n          [attr.tabIndex]=\"-1\"\n          (focus)=\"onFocus('retry')\"\n          (blur)=\"onBlur('retry')\"\n          (click)=\"onRetryClick()\">\n          <span class=\"k-icon k-retry k-i-refresh-sm\"\n            [attr.aria-label]=\"retryButtonTitle\"\n            [attr.title]=\"retryButtonTitle\">\n          </span>\n        </button>\n\n        <button *ngIf=\"isResumable\" type=\"button\" class=\"k-button k-button-icon k-flat k-upload-action\"\n          [ngClass]=\"{ 'k-state-focused': this.pauseResumeFocused }\"\n          [attr.tabIndex]=\"-1\"\n          (focus)=\"onFocus('pauseResume')\"\n          (blur)=\"onBlur('pauseResume')\"\n          (click)=\"onPauseResumeClick()\">\n          <span class=\"k-icon\"\n            [ngClass]=\"{\n              'k-i-play-sm': isPaused,\n              'k-i-pause-sm': !isPaused\n            }\"\n            [attr.aria-label]='pauseResumeButtonTitle'\n            [attr.title]='pauseResumeButtonTitle'>\n          </span>\n        </button>\n\n        <button type=\"button\" *ngIf=\"isActionButtonVisible\" class=\"k-button k-button-icon k-flat k-upload-action\"\n          [ngClass]=\"{ 'k-state-focused': this.actionFocused }\"\n          [attr.tabIndex]=\"-1\"\n          (focus)=\"onFocus('action')\"\n          (blur)=\"onBlur('action')\"\n          (click)=\"onRemoveCancelClick($event)\">\n          <span class=\"k-icon\"\n            [ngClass]=\"{\n              'k-i-cancel': isUploading,\n              'k-delete k-i-x': !isUploading\n            }\"\n            [attr.aria-label]='actionButtonTitle'\n            [attr.title]='actionButtonTitle'>\n          </span>\n        </button>\n      </strong>\n    "
         }),
         __metadata("design:paramtypes", [UploadService,
-            LocalizationService])
+            LocalizationService,
+            NavigationService])
     ], FileListItemActionButtonComponent);
     return FileListItemActionButtonComponent;
 }());
@@ -4455,7 +4459,6 @@ var UploadActionButtonsComponent = /** @class */ (function () {
             else {
                 _this.performUpload();
             }
-            _this.navigation.focusSelectButton();
         });
     };
     UploadActionButtonsComponent.prototype.onFocus = function () {
@@ -4472,14 +4475,24 @@ var UploadActionButtonsComponent = /** @class */ (function () {
         this.actionSubscription.unsubscribe();
         this.focusSubscription.unsubscribe();
     };
-    UploadActionButtonsComponent.prototype.performUpload = function (_event) {
+    UploadActionButtonsComponent.prototype.onUploadButtonClick = function (event) {
+        event.stopImmediatePropagation();
+        this.performUpload();
+    };
+    UploadActionButtonsComponent.prototype.performUpload = function () {
         if (!this.disabled) {
             this.uploadService.uploadFiles();
+            this.navigation.focusSelectButton();
         }
     };
-    UploadActionButtonsComponent.prototype.clearFiles = function (_event) {
+    UploadActionButtonsComponent.prototype.onClearButtonClick = function (event) {
+        event.stopImmediatePropagation();
+        this.clearFiles();
+    };
+    UploadActionButtonsComponent.prototype.clearFiles = function () {
         if (!this.disabled) {
             this.uploadService.clearFiles();
+            this.navigation.focusSelectButton();
         }
     };
     UploadActionButtonsComponent.prototype.textFor = function (key) {
@@ -4528,7 +4541,7 @@ var UploadActionButtonsComponent = /** @class */ (function () {
     UploadActionButtonsComponent = __decorate([
         Component({
             selector: 'kendo-upload-action-buttons',
-            template: "\n        <button #clearButton type=\"button\" class=\"k-button k-clear-selected\"\n            [attr.tabIndex]=\"-1\"\n            (click)=\"clearFiles($event)\">\n                {{textFor('clearSelectedFiles')}}\n        </button>\n        <button #uploadButton type=\"button\" class=\"k-button k-primary k-upload-selected\"\n            [attr.tabIndex]=\"-1\"\n            (click)=\"performUpload($event)\">\n                {{textFor('uploadSelectedFiles')}}\n        </button>\n    "
+            template: "\n        <button #clearButton type=\"button\" class=\"k-button k-clear-selected\"\n            [attr.tabIndex]=\"-1\"\n            (click)=\"onClearButtonClick($event)\">\n                {{textFor('clearSelectedFiles')}}\n        </button>\n        <button #uploadButton type=\"button\" class=\"k-button k-primary k-upload-selected\"\n            [attr.tabIndex]=\"-1\"\n            (click)=\"onUploadButtonClick($event)\">\n                {{textFor('uploadSelectedFiles')}}\n        </button>\n    "
         }),
         __metadata("design:paramtypes", [UploadService,
             LocalizationService,

package/dist/npm/package-metadata.js

@@ -11,7 +11,7 @@ exports.packageMetadata = {
     name: '@progress/kendo-angular-upload',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1635939353,
+    publishDate: 1637072903,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };

package/dist/npm/rendering/file-list-item-action-button.component.js

@@ -9,13 +9,15 @@ var core_1 = require("@angular/core");
 var types_1 = require("../types");
 var upload_service_1 = require("../upload.service");
 var kendo_angular_l10n_1 = require("@progress/kendo-angular-l10n");
+var navigation_service_1 = require("./../navigation.service");
 /**
  * @hidden
  */
 var FileListItemActionButtonComponent = /** @class */ (function () {
-    function FileListItemActionButtonComponent(uploadService, localization) {
+    function FileListItemActionButtonComponent(uploadService, localization, navigation) {
         this.uploadService = uploadService;
         this.localization = localization;
+        this.navigation = navigation;
         this.actionFocused = false;
         this.retryFocused = false;
         this.pauseResumeFocused = false;
@@ -48,10 +50,11 @@ var FileListItemActionButtonComponent = /** @class */ (function () {
         }
         this.uploadService.retryFiles(this.file.uid);
     };
-    FileListItemActionButtonComponent.prototype.onRemoveCancelClick = function () {
+    FileListItemActionButtonComponent.prototype.onRemoveCancelClick = function (event) {
         if (this.disabled) {
             return;
         }
+        event.stopImmediatePropagation();
         var uid = this.file.uid;
         if (this.file.state === types_1.FileState.Uploading) {
             this.uploadService.cancelFiles(uid);
@@ -59,6 +62,7 @@ var FileListItemActionButtonComponent = /** @class */ (function () {
         else {
             this.uploadService.removeFiles(uid);
         }
+        this.navigation.focusSelectButton();
     };
     FileListItemActionButtonComponent.prototype.onPauseResumeClick = function () {
         if (this.disabled) {
@@ -156,10 +160,11 @@ var FileListItemActionButtonComponent = /** @class */ (function () {
     FileListItemActionButtonComponent = tslib_1.__decorate([
         core_1.Component({
             selector: 'kendo-upload-file-list-item-action-button',
-            template: "\n      <strong class=\"k-upload-status\">\n        <span class=\"k-upload-pct\" *ngIf=\"isUploading || isPaused\">{{progress}}%</span>\n\n        <button type=\"button\" *ngIf=\"isFailed\" class=\"k-button k-button-icon k-flat k-upload-action\"\n          [ngClass]=\"{ 'k-state-focused': this.retryFocused }\"\n          [attr.tabIndex]=\"-1\"\n          (focus)=\"onFocus('retry')\"\n          (blur)=\"onBlur('retry')\"\n          (click)=\"onRetryClick()\">\n          <span class=\"k-icon k-retry k-i-refresh-sm\"\n            [attr.aria-label]=\"retryButtonTitle\"\n            [attr.title]=\"retryButtonTitle\">\n          </span>\n        </button>\n\n        <button *ngIf=\"isResumable\" type=\"button\" class=\"k-button k-button-icon k-flat k-upload-action\"\n          [ngClass]=\"{ 'k-state-focused': this.pauseResumeFocused }\"\n          [attr.tabIndex]=\"-1\"\n          (focus)=\"onFocus('pauseResume')\"\n          (blur)=\"onBlur('pauseResume')\"\n          (click)=\"onPauseResumeClick()\">\n          <span class=\"k-icon\"\n            [ngClass]=\"{\n              'k-i-play-sm': isPaused,\n              'k-i-pause-sm': !isPaused\n            }\"\n            [attr.aria-label]='pauseResumeButtonTitle'\n            [attr.title]='pauseResumeButtonTitle'>\n          </span>\n        </button>\n\n        <button type=\"button\" *ngIf=\"isActionButtonVisible\" class=\"k-button k-button-icon k-flat k-upload-action\"\n          [ngClass]=\"{ 'k-state-focused': this.actionFocused }\"\n          [attr.tabIndex]=\"-1\"\n          (focus)=\"onFocus('action')\"\n          (blur)=\"onBlur('action')\"\n          (click)=\"onRemoveCancelClick()\">\n          <span class=\"k-icon\"\n            [ngClass]=\"{\n              'k-i-cancel': isUploading,\n              'k-delete k-i-x': !isUploading\n            }\"\n            [attr.aria-label]='actionButtonTitle'\n            [attr.title]='actionButtonTitle'>\n          </span>\n        </button>\n      </strong>\n    "
+            template: "\n      <strong class=\"k-upload-status\">\n        <span class=\"k-upload-pct\" *ngIf=\"isUploading || isPaused\">{{progress}}%</span>\n\n        <button type=\"button\" *ngIf=\"isFailed\" class=\"k-button k-button-icon k-flat k-upload-action\"\n          [ngClass]=\"{ 'k-state-focused': this.retryFocused }\"\n          [attr.tabIndex]=\"-1\"\n          (focus)=\"onFocus('retry')\"\n          (blur)=\"onBlur('retry')\"\n          (click)=\"onRetryClick()\">\n          <span class=\"k-icon k-retry k-i-refresh-sm\"\n            [attr.aria-label]=\"retryButtonTitle\"\n            [attr.title]=\"retryButtonTitle\">\n          </span>\n        </button>\n\n        <button *ngIf=\"isResumable\" type=\"button\" class=\"k-button k-button-icon k-flat k-upload-action\"\n          [ngClass]=\"{ 'k-state-focused': this.pauseResumeFocused }\"\n          [attr.tabIndex]=\"-1\"\n          (focus)=\"onFocus('pauseResume')\"\n          (blur)=\"onBlur('pauseResume')\"\n          (click)=\"onPauseResumeClick()\">\n          <span class=\"k-icon\"\n            [ngClass]=\"{\n              'k-i-play-sm': isPaused,\n              'k-i-pause-sm': !isPaused\n            }\"\n            [attr.aria-label]='pauseResumeButtonTitle'\n            [attr.title]='pauseResumeButtonTitle'>\n          </span>\n        </button>\n\n        <button type=\"button\" *ngIf=\"isActionButtonVisible\" class=\"k-button k-button-icon k-flat k-upload-action\"\n          [ngClass]=\"{ 'k-state-focused': this.actionFocused }\"\n          [attr.tabIndex]=\"-1\"\n          (focus)=\"onFocus('action')\"\n          (blur)=\"onBlur('action')\"\n          (click)=\"onRemoveCancelClick($event)\">\n          <span class=\"k-icon\"\n            [ngClass]=\"{\n              'k-i-cancel': isUploading,\n              'k-delete k-i-x': !isUploading\n            }\"\n            [attr.aria-label]='actionButtonTitle'\n            [attr.title]='actionButtonTitle'>\n          </span>\n        </button>\n      </strong>\n    "
         }),
         tslib_1.__metadata("design:paramtypes", [upload_service_1.UploadService,
-            kendo_angular_l10n_1.LocalizationService])
+            kendo_angular_l10n_1.LocalizationService,
+            navigation_service_1.NavigationService])
     ], FileListItemActionButtonComponent);
     return FileListItemActionButtonComponent;
 }());

package/dist/npm/rendering/upload-action-buttons.component.js

@@ -58,7 +58,6 @@ var UploadActionButtonsComponent = /** @class */ (function () {
             else {
                 _this.performUpload();
             }
-            _this.navigation.focusSelectButton();
         });
     };
     UploadActionButtonsComponent.prototype.onFocus = function () {
@@ -75,14 +74,24 @@ var UploadActionButtonsComponent = /** @class */ (function () {
         this.actionSubscription.unsubscribe();
         this.focusSubscription.unsubscribe();
     };
-    UploadActionButtonsComponent.prototype.performUpload = function (_event) {
+    UploadActionButtonsComponent.prototype.onUploadButtonClick = function (event) {
+        event.stopImmediatePropagation();
+        this.performUpload();
+    };
+    UploadActionButtonsComponent.prototype.performUpload = function () {
         if (!this.disabled) {
             this.uploadService.uploadFiles();
+            this.navigation.focusSelectButton();
         }
     };
-    UploadActionButtonsComponent.prototype.clearFiles = function (_event) {
+    UploadActionButtonsComponent.prototype.onClearButtonClick = function (event) {
+        event.stopImmediatePropagation();
+        this.clearFiles();
+    };
+    UploadActionButtonsComponent.prototype.clearFiles = function () {
         if (!this.disabled) {
             this.uploadService.clearFiles();
+            this.navigation.focusSelectButton();
         }
     };
     UploadActionButtonsComponent.prototype.textFor = function (key) {
@@ -131,7 +140,7 @@ var UploadActionButtonsComponent = /** @class */ (function () {
     UploadActionButtonsComponent = tslib_1.__decorate([
         core_1.Component({
             selector: 'kendo-upload-action-buttons',
-            template: "\n        <button #clearButton type=\"button\" class=\"k-button k-clear-selected\"\n            [attr.tabIndex]=\"-1\"\n            (click)=\"clearFiles($event)\">\n                {{textFor('clearSelectedFiles')}}\n        </button>\n        <button #uploadButton type=\"button\" class=\"k-button k-primary k-upload-selected\"\n            [attr.tabIndex]=\"-1\"\n            (click)=\"performUpload($event)\">\n                {{textFor('uploadSelectedFiles')}}\n        </button>\n    "
+            template: "\n        <button #clearButton type=\"button\" class=\"k-button k-clear-selected\"\n            [attr.tabIndex]=\"-1\"\n            (click)=\"onClearButtonClick($event)\">\n                {{textFor('clearSelectedFiles')}}\n        </button>\n        <button #uploadButton type=\"button\" class=\"k-button k-primary k-upload-selected\"\n            [attr.tabIndex]=\"-1\"\n            (click)=\"onUploadButtonClick($event)\">\n                {{textFor('uploadSelectedFiles')}}\n        </button>\n    "
         }),
         tslib_1.__metadata("design:paramtypes", [upload_service_1.UploadService,
             kendo_angular_l10n_1.LocalizationService,