@progress/kendo-angular-upload 7.1.4 → 8.0.0-dev.202201190956

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: 1642586091,
     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'
 };
@@ -1840,7 +1840,7 @@ var FileSelectComponent = /** @class */ (function () {
      * @hidden
      */
     FileSelectComponent.prototype.onFileSelectButtonFocus = function (_event) {
-        this.renderer.addClass(this.fileSelectButton.nativeElement, 'k-state-focused');
+        this.renderer.addClass(this.fileSelectButton.nativeElement, 'k-focus');
         if (!this.navigation.focused) {
             this.navigation.focusedIndex = -1;
         }
@@ -1849,7 +1849,7 @@ var FileSelectComponent = /** @class */ (function () {
      * @hidden
      */
     FileSelectComponent.prototype.onFileSelectButtonBlur = function (_event) {
-        this.renderer.removeClass(this.fileSelectButton.nativeElement, 'k-state-focused');
+        this.renderer.removeClass(this.fileSelectButton.nativeElement, 'k-focus');
     };
     FileSelectComponent.prototype.subscribeBlur = function () {
         var _this = this;
@@ -1992,7 +1992,7 @@ var FileSelectComponent = /** @class */ (function () {
         __metadata("design:type", Boolean)
     ], FileSelectComponent.prototype, "hostDefaultClasses", void 0);
     __decorate([
-        HostBinding('class.k-state-disabled'),
+        HostBinding('class.k-disabled'),
         __metadata("design:type", Boolean),
         __metadata("design:paramtypes", [])
     ], FileSelectComponent.prototype, "hostDisabledClass", null);
@@ -2026,7 +2026,7 @@ var FileSelectComponent = /** @class */ (function () {
                 }
             ],
             selector: 'kendo-fileselect',
-            template: "\n        <ng-container kendoFileSelectLocalizedMessages\n            i18n-dropFilesHere=\"kendo.fileselect.dropFilesHere|The drop zone hint\"\n            dropFilesHere=\"Drop files here to select\"\n\n            i18n-invalidFileExtension=\"kendo.fileselect.invalidFileExtension|The text for the invalid allowed extensions restriction message\"\n            invalidFileExtension=\"File type not allowed.\"\n\n            i18n-invalidMaxFileSize=\"kendo.fileselect.invalidMaxFileSize|The text for the invalid max file size restriction message\"\n            invalidMaxFileSize=\"File size too large.\"\n\n            i18n-invalidMinFileSize=\"kendo.fileselect.invalidMinFileSize|The text for the invalid min file size restriction message\"\n            invalidMinFileSize=\"File size too small.\"\n\n            i18n-remove=\"kendo.fileselect.remove|The text for the Remove button\"\n            remove=\"Remove\"\n\n            i18n-select=\"kendo.fileselect.select|The text for the Select button\"\n            select=\"Select files...\"\n        >\n        </ng-container>\n        <div kendoFileSelectInternalDropZone\n            [restrictions]=\"restrictions\"\n            [multiple]=\"multiple\"\n            [disabled]=\"disabled\">\n            <div role=\"button\" #fileSelectButton\n                [id]=\"focusableId\"\n                [attr.aria-label]=\"textFor('select')\"\n                [attr.tabindex]=\"selectButtonTabIndex\"\n                (focus)=\"onFileSelectButtonFocus($event)\"\n                (blur)=\"onFileSelectButtonBlur($event)\"\n                class=\"k-button k-upload-button\">\n                <input #fileSelect kendoFileSelect\n                    [attr.accept]=\"accept ? accept : null\"\n                    [dir]=\"direction\"\n                    [restrictions]=\"restrictions\"\n                    [multiple]=\"multiple\"\n                    [disabled]=\"disabled\" />\n                <span>{{textFor('select')}}</span>\n            </div>\n            <div class=\"k-dropzone-hint\">{{textFor('dropFilesHere')}}</div>\n        </div>\n        <ul kendo-upload-file-list\n            class=\"k-upload-files k-reset\"\n            *ngIf=\"showFileList && fileList.count > 0\"\n            [disabled]=\"disabled\"\n            [fileList]=\"fileList.files\"\n            [fileTemplate]=\"fileTemplate\"\n            [fileInfoTemplate]=\"fileInfoTemplate\">\n        </ul>\n    "
+            template: "\n        <ng-container kendoFileSelectLocalizedMessages\n            i18n-dropFilesHere=\"kendo.fileselect.dropFilesHere|The drop zone hint\"\n            dropFilesHere=\"Drop files here to select\"\n\n            i18n-invalidFileExtension=\"kendo.fileselect.invalidFileExtension|The text for the invalid allowed extensions restriction message\"\n            invalidFileExtension=\"File type not allowed.\"\n\n            i18n-invalidMaxFileSize=\"kendo.fileselect.invalidMaxFileSize|The text for the invalid max file size restriction message\"\n            invalidMaxFileSize=\"File size too large.\"\n\n            i18n-invalidMinFileSize=\"kendo.fileselect.invalidMinFileSize|The text for the invalid min file size restriction message\"\n            invalidMinFileSize=\"File size too small.\"\n\n            i18n-remove=\"kendo.fileselect.remove|The text for the Remove button\"\n            remove=\"Remove\"\n\n            i18n-select=\"kendo.fileselect.select|The text for the Select button\"\n            select=\"Select files...\"\n        >\n        </ng-container>\n        <div kendoFileSelectInternalDropZone\n            [restrictions]=\"restrictions\"\n            [multiple]=\"multiple\"\n            [disabled]=\"disabled\">\n            <div role=\"button\" #fileSelectButton\n                [id]=\"focusableId\"\n                [attr.aria-label]=\"textFor('select')\"\n                [attr.tabindex]=\"selectButtonTabIndex\"\n                (focus)=\"onFileSelectButtonFocus($event)\"\n                (blur)=\"onFileSelectButtonBlur($event)\"\n                class=\"k-button k-button-md k-rounded-md k-button-solid k-button-solid-base k-upload-button\">\n                <input #fileSelect kendoFileSelect\n                    [attr.accept]=\"accept ? accept : null\"\n                    [dir]=\"direction\"\n                    [restrictions]=\"restrictions\"\n                    [multiple]=\"multiple\"\n                    [disabled]=\"disabled\" />\n                <span>{{textFor('select')}}</span>\n            </div>\n            <div class=\"k-dropzone-hint\">{{textFor('dropFilesHere')}}</div>\n        </div>\n        <ul kendo-upload-file-list\n            class=\"k-upload-files k-reset\"\n            *ngIf=\"showFileList && fileList.count > 0\"\n            [disabled]=\"disabled\"\n            [fileList]=\"fileList.files\"\n            [fileTemplate]=\"fileTemplate\"\n            [fileInfoTemplate]=\"fileInfoTemplate\">\n        </ul>\n    "
         }),
         __metadata("design:paramtypes", [UploadService,
             LocalizationService,
@@ -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-icon-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-upload-action\"\n          [ngClass]=\"{ 'k-focus': this.retryFocused }\"\n          [attr.tabIndex]=\"-1\"\n          (focus)=\"onFocus('retry')\"\n          (blur)=\"onBlur('retry')\"\n          (click)=\"onRetryClick()\">\n          <span class=\"k-icon k-button-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-icon-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-upload-action\"\n          [ngClass]=\"{ 'k-focus': this.pauseResumeFocused }\"\n          [attr.tabIndex]=\"-1\"\n          (focus)=\"onFocus('pauseResume')\"\n          (blur)=\"onBlur('pauseResume')\"\n          (click)=\"onPauseResumeClick()\">\n          <span class=\"k-icon k-button-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-icon-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-upload-action\"\n          [ngClass]=\"{ 'k-focus': this.actionFocused }\"\n          [attr.tabIndex]=\"-1\"\n          (focus)=\"onFocus('action')\"\n          (blur)=\"onBlur('action')\"\n          (click)=\"onRemoveCancelClick($event)\">\n          <span class=\"k-icon k-button-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;
 }());
@@ -3686,7 +3690,7 @@ var UploadComponent = /** @class */ (function () {
      * @hidden
      */
     UploadComponent.prototype.onFileSelectButtonFocus = function (_event) {
-        this.renderer.addClass(this.fileSelectButton.nativeElement, 'k-state-focused');
+        this.renderer.addClass(this.fileSelectButton.nativeElement, 'k-focus');
         if (!this.navigation.focused) {
             this.navigation.focusedIndex = -1;
         }
@@ -3695,7 +3699,7 @@ var UploadComponent = /** @class */ (function () {
      * @hidden
      */
     UploadComponent.prototype.onFileSelectButtonBlur = function (_event) {
-        this.renderer.removeClass(this.fileSelectButton.nativeElement, 'k-state-focused');
+        this.renderer.removeClass(this.fileSelectButton.nativeElement, 'k-focus');
     };
     Object.defineProperty(UploadComponent.prototype, "showActionButtons", {
         /**
@@ -4110,7 +4114,7 @@ var UploadComponent = /** @class */ (function () {
         __metadata("design:type", Boolean)
     ], UploadComponent.prototype, "hostDefaultClasses", void 0);
     __decorate([
-        HostBinding('class.k-state-disabled'),
+        HostBinding('class.k-disabled'),
         __metadata("design:type", Boolean),
         __metadata("design:paramtypes", [])
     ], UploadComponent.prototype, "hostDisabledClass", null);
@@ -4144,7 +4148,7 @@ var UploadComponent = /** @class */ (function () {
                 }
             ],
             selector: 'kendo-upload',
-            template: "\n    <ng-container kendoUploadLocalizedMessages\n      i18n-cancel=\"kendo.upload.cancel|The text for the Cancel button\"\n      cancel=\"Cancel\"\n\n      i18n-clearSelectedFiles=\"kendo.upload.clearSelectedFiles|The text for the Clear button\"\n      clearSelectedFiles=\"Clear\"\n\n      i18n-dropFilesHere=\"kendo.upload.dropFilesHere|The drop zone hint\"\n      dropFilesHere=\"Drop files here to upload\"\n\n      i18n-filesBatchStatus=\"kendo.upload.filesBatchStatus|The status message for a batch of files\"\n      filesBatchStatus=\"files\"\n\n      i18n-filesBatchStatusFailed=\"kendo.upload.filesBatchStatusFailed|The status message for a batch of files after failed upload\"\n      filesBatchStatusFailed=\"files failed to upload.\"\n\n      i18n-filesBatchStatusUploaded=\"kendo.upload.filesBatchStatusUploaded|The status message for a batch of files after successful upload\"\n      filesBatchStatusUploaded=\"files successfully uploaded.\"\n\n      i18n-fileStatusFailed=\"kendo.upload.fileStatusFailed|The file status message after failed upload\"\n      fileStatusFailed=\"File failed to upload.\"\n\n      i18n-fileStatusUploaded=\"kendo.upload.fileStatusUploaded|The file status message after successful upload\"\n      fileStatusUploaded=\"File successfully uploaded.\"\n\n      i18n-headerStatusPaused=\"kendo.upload.headerStatusPaused|The header status message when the file upload is paused\"\n      headerStatusPaused=\"Paused\"\n\n      i18n-headerStatusUploaded=\"kendo.upload.headerStatusUploaded|The header status message after file upload completion\"\n      headerStatusUploaded=\"Done\"\n\n      i18n-headerStatusUploading=\"kendo.upload.headerStatusUploading|The header status message during file upload\"\n      headerStatusUploading=\"Uploading...\"\n\n      i18n-invalidFileExtension=\"kendo.upload.invalidFileExtension|The text for the invalid allowed extensions restriction message\"\n      invalidFileExtension=\"File type not allowed.\"\n\n      i18n-invalidMaxFileSize=\"kendo.upload.invalidMaxFileSize|The text for the invalid max file size restriction message\"\n      invalidMaxFileSize=\"File size too large.\"\n\n      i18n-invalidMinFileSize=\"kendo.upload.invalidMinFileSize|The text for the invalid min file size restriction message\"\n      invalidMinFileSize=\"File size too small.\"\n\n      i18n-pause=\"kendo.upload.pause|The text for the Pause button\"\n      pause=\"Pause\"\n\n      i18n-remove=\"kendo.upload.remove|The text for the Remove button\"\n      remove=\"Remove\"\n\n      i18n-resume=\"kendo.upload.resume|The text for the Resume button\"\n      resume=\"Resume\"\n\n      i18n-retry=\"kendo.upload.retry|The text for the Retry button\"\n      retry=\"Retry\"\n\n      i18n-select=\"kendo.upload.select|The text for the Select button\"\n      select=\"Select files...\"\n\n      i18n-uploadSelectedFiles=\"kendo.upload.uploadSelectedFiles|The text for the Upload files button\"\n      uploadSelectedFiles=\"Upload\"\n    >\n    </ng-container>\n    <div kendoUploadInternalDropZone\n      [restrictions]=\"restrictions\"\n      [multiple]=\"multiple\"\n      [disabled]=\"disabled\">\n        <div role=\"button\" #fileSelectButton\n             [id]=\"focusableId\"\n             [attr.aria-label]=\"textFor('select')\"\n             [attr.tabindex]=\"selectButtonTabIndex\"\n             (focus)=\"onFileSelectButtonFocus($event)\"\n             (blur)=\"onFileSelectButtonBlur($event)\"\n             class=\"k-button k-upload-button\">\n          <input #fileSelect kendoFileSelect\n            [attr.accept]=\"accept ? accept : null\"\n            [attr.aria-hidden]=\"true\"\n            [dir]=\"direction\"\n            [restrictions]=\"restrictions\"\n            [multiple]=\"multiple\"\n            [disabled]=\"disabled\" />\n          <span>{{textFor('select')}}</span>\n        </div>\n        <kendo-upload-status-total *ngIf=\"showTotalStatus\"\n          class=\"k-upload-status k-upload-status-total\"\n          [fileList]=\"fileList\">\n        </kendo-upload-status-total>\n        <div class=\"k-dropzone-hint\">{{textFor('dropFilesHere')}}</div>\n    </div>\n    <ul kendo-upload-file-list *ngIf=\"showFileList && fileList.count > 0\"\n        class=\"k-upload-files k-reset\"\n        [disabled]=\"disabled\"\n        [fileList]=\"fileList.files\"\n        [fileTemplate]=\"fileTemplate\"\n        [fileInfoTemplate]=\"fileInfoTemplate\">\n    </ul>\n    <kendo-upload-action-buttons\n      *ngIf=\"showActionButtons\"\n      [disabled]=\"disabled\"\n      [actionsLayout]=\"actionsLayout\">\n    </kendo-upload-action-buttons>\n  "
+            template: "\n    <ng-container kendoUploadLocalizedMessages\n      i18n-cancel=\"kendo.upload.cancel|The text for the Cancel button\"\n      cancel=\"Cancel\"\n\n      i18n-clearSelectedFiles=\"kendo.upload.clearSelectedFiles|The text for the Clear button\"\n      clearSelectedFiles=\"Clear\"\n\n      i18n-dropFilesHere=\"kendo.upload.dropFilesHere|The drop zone hint\"\n      dropFilesHere=\"Drop files here to upload\"\n\n      i18n-filesBatchStatus=\"kendo.upload.filesBatchStatus|The status message for a batch of files\"\n      filesBatchStatus=\"files\"\n\n      i18n-filesBatchStatusFailed=\"kendo.upload.filesBatchStatusFailed|The status message for a batch of files after failed upload\"\n      filesBatchStatusFailed=\"files failed to upload.\"\n\n      i18n-filesBatchStatusUploaded=\"kendo.upload.filesBatchStatusUploaded|The status message for a batch of files after successful upload\"\n      filesBatchStatusUploaded=\"files successfully uploaded.\"\n\n      i18n-fileStatusFailed=\"kendo.upload.fileStatusFailed|The file status message after failed upload\"\n      fileStatusFailed=\"File failed to upload.\"\n\n      i18n-fileStatusUploaded=\"kendo.upload.fileStatusUploaded|The file status message after successful upload\"\n      fileStatusUploaded=\"File successfully uploaded.\"\n\n      i18n-headerStatusPaused=\"kendo.upload.headerStatusPaused|The header status message when the file upload is paused\"\n      headerStatusPaused=\"Paused\"\n\n      i18n-headerStatusUploaded=\"kendo.upload.headerStatusUploaded|The header status message after file upload completion\"\n      headerStatusUploaded=\"Done\"\n\n      i18n-headerStatusUploading=\"kendo.upload.headerStatusUploading|The header status message during file upload\"\n      headerStatusUploading=\"Uploading...\"\n\n      i18n-invalidFileExtension=\"kendo.upload.invalidFileExtension|The text for the invalid allowed extensions restriction message\"\n      invalidFileExtension=\"File type not allowed.\"\n\n      i18n-invalidMaxFileSize=\"kendo.upload.invalidMaxFileSize|The text for the invalid max file size restriction message\"\n      invalidMaxFileSize=\"File size too large.\"\n\n      i18n-invalidMinFileSize=\"kendo.upload.invalidMinFileSize|The text for the invalid min file size restriction message\"\n      invalidMinFileSize=\"File size too small.\"\n\n      i18n-pause=\"kendo.upload.pause|The text for the Pause button\"\n      pause=\"Pause\"\n\n      i18n-remove=\"kendo.upload.remove|The text for the Remove button\"\n      remove=\"Remove\"\n\n      i18n-resume=\"kendo.upload.resume|The text for the Resume button\"\n      resume=\"Resume\"\n\n      i18n-retry=\"kendo.upload.retry|The text for the Retry button\"\n      retry=\"Retry\"\n\n      i18n-select=\"kendo.upload.select|The text for the Select button\"\n      select=\"Select files...\"\n\n      i18n-uploadSelectedFiles=\"kendo.upload.uploadSelectedFiles|The text for the Upload files button\"\n      uploadSelectedFiles=\"Upload\"\n    >\n    </ng-container>\n    <div kendoUploadInternalDropZone\n      [restrictions]=\"restrictions\"\n      [multiple]=\"multiple\"\n      [disabled]=\"disabled\">\n        <div role=\"button\" #fileSelectButton\n             [id]=\"focusableId\"\n             [attr.aria-label]=\"textFor('select')\"\n             [attr.tabindex]=\"selectButtonTabIndex\"\n             (focus)=\"onFileSelectButtonFocus($event)\"\n             (blur)=\"onFileSelectButtonBlur($event)\"\n             class=\"k-button k-button-md k-rounded-md k-button-solid k-button-solid-base k-upload-button\">\n          <input #fileSelect kendoFileSelect\n            [attr.accept]=\"accept ? accept : null\"\n            [attr.aria-hidden]=\"true\"\n            [dir]=\"direction\"\n            [restrictions]=\"restrictions\"\n            [multiple]=\"multiple\"\n            [disabled]=\"disabled\" />\n          <span>{{textFor('select')}}</span>\n        </div>\n        <kendo-upload-status-total *ngIf=\"showTotalStatus\"\n          class=\"k-upload-status k-upload-status-total\"\n          [fileList]=\"fileList\">\n        </kendo-upload-status-total>\n        <div class=\"k-dropzone-hint\">{{textFor('dropFilesHere')}}</div>\n    </div>\n    <ul kendo-upload-file-list *ngIf=\"showFileList && fileList.count > 0\"\n        class=\"k-upload-files k-reset\"\n        [disabled]=\"disabled\"\n        [fileList]=\"fileList.files\"\n        [fileTemplate]=\"fileTemplate\"\n        [fileInfoTemplate]=\"fileInfoTemplate\">\n    </ul>\n    <kendo-upload-action-buttons\n      *ngIf=\"showActionButtons\"\n      [disabled]=\"disabled\"\n      [actionsLayout]=\"actionsLayout\">\n    </kendo-upload-action-buttons>\n  "
         }),
         __metadata("design:paramtypes", [UploadService,
             LocalizationService,
@@ -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-button-md k-rounded-md k-button-solid k-button-solid-base 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-button-md k-rounded-md k-button-solid k-button-solid-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/fileselect.component.js

@@ -284,7 +284,7 @@ var FileSelectComponent = /** @class */ (function () {
      * @hidden
      */
     FileSelectComponent.prototype.onFileSelectButtonFocus = function (_event) {
-        this.renderer.addClass(this.fileSelectButton.nativeElement, 'k-state-focused');
+        this.renderer.addClass(this.fileSelectButton.nativeElement, 'k-focus');
         if (!this.navigation.focused) {
             this.navigation.focusedIndex = -1;
         }
@@ -293,7 +293,7 @@ var FileSelectComponent = /** @class */ (function () {
      * @hidden
      */
     FileSelectComponent.prototype.onFileSelectButtonBlur = function (_event) {
-        this.renderer.removeClass(this.fileSelectButton.nativeElement, 'k-state-focused');
+        this.renderer.removeClass(this.fileSelectButton.nativeElement, 'k-focus');
     };
     FileSelectComponent.prototype.subscribeBlur = function () {
         var _this = this;
@@ -436,7 +436,7 @@ var FileSelectComponent = /** @class */ (function () {
         tslib_1.__metadata("design:type", Boolean)
     ], FileSelectComponent.prototype, "hostDefaultClasses", void 0);
     tslib_1.__decorate([
-        core_1.HostBinding('class.k-state-disabled'),
+        core_1.HostBinding('class.k-disabled'),
         tslib_1.__metadata("design:type", Boolean),
         tslib_1.__metadata("design:paramtypes", [])
     ], FileSelectComponent.prototype, "hostDisabledClass", null);
@@ -470,7 +470,7 @@ var FileSelectComponent = /** @class */ (function () {
                 }
             ],
             selector: 'kendo-fileselect',
-            template: "\n        <ng-container kendoFileSelectLocalizedMessages\n            i18n-dropFilesHere=\"kendo.fileselect.dropFilesHere|The drop zone hint\"\n            dropFilesHere=\"Drop files here to select\"\n\n            i18n-invalidFileExtension=\"kendo.fileselect.invalidFileExtension|The text for the invalid allowed extensions restriction message\"\n            invalidFileExtension=\"File type not allowed.\"\n\n            i18n-invalidMaxFileSize=\"kendo.fileselect.invalidMaxFileSize|The text for the invalid max file size restriction message\"\n            invalidMaxFileSize=\"File size too large.\"\n\n            i18n-invalidMinFileSize=\"kendo.fileselect.invalidMinFileSize|The text for the invalid min file size restriction message\"\n            invalidMinFileSize=\"File size too small.\"\n\n            i18n-remove=\"kendo.fileselect.remove|The text for the Remove button\"\n            remove=\"Remove\"\n\n            i18n-select=\"kendo.fileselect.select|The text for the Select button\"\n            select=\"Select files...\"\n        >\n        </ng-container>\n        <div kendoFileSelectInternalDropZone\n            [restrictions]=\"restrictions\"\n            [multiple]=\"multiple\"\n            [disabled]=\"disabled\">\n            <div role=\"button\" #fileSelectButton\n                [id]=\"focusableId\"\n                [attr.aria-label]=\"textFor('select')\"\n                [attr.tabindex]=\"selectButtonTabIndex\"\n                (focus)=\"onFileSelectButtonFocus($event)\"\n                (blur)=\"onFileSelectButtonBlur($event)\"\n                class=\"k-button k-upload-button\">\n                <input #fileSelect kendoFileSelect\n                    [attr.accept]=\"accept ? accept : null\"\n                    [dir]=\"direction\"\n                    [restrictions]=\"restrictions\"\n                    [multiple]=\"multiple\"\n                    [disabled]=\"disabled\" />\n                <span>{{textFor('select')}}</span>\n            </div>\n            <div class=\"k-dropzone-hint\">{{textFor('dropFilesHere')}}</div>\n        </div>\n        <ul kendo-upload-file-list\n            class=\"k-upload-files k-reset\"\n            *ngIf=\"showFileList && fileList.count > 0\"\n            [disabled]=\"disabled\"\n            [fileList]=\"fileList.files\"\n            [fileTemplate]=\"fileTemplate\"\n            [fileInfoTemplate]=\"fileInfoTemplate\">\n        </ul>\n    "
+            template: "\n        <ng-container kendoFileSelectLocalizedMessages\n            i18n-dropFilesHere=\"kendo.fileselect.dropFilesHere|The drop zone hint\"\n            dropFilesHere=\"Drop files here to select\"\n\n            i18n-invalidFileExtension=\"kendo.fileselect.invalidFileExtension|The text for the invalid allowed extensions restriction message\"\n            invalidFileExtension=\"File type not allowed.\"\n\n            i18n-invalidMaxFileSize=\"kendo.fileselect.invalidMaxFileSize|The text for the invalid max file size restriction message\"\n            invalidMaxFileSize=\"File size too large.\"\n\n            i18n-invalidMinFileSize=\"kendo.fileselect.invalidMinFileSize|The text for the invalid min file size restriction message\"\n            invalidMinFileSize=\"File size too small.\"\n\n            i18n-remove=\"kendo.fileselect.remove|The text for the Remove button\"\n            remove=\"Remove\"\n\n            i18n-select=\"kendo.fileselect.select|The text for the Select button\"\n            select=\"Select files...\"\n        >\n        </ng-container>\n        <div kendoFileSelectInternalDropZone\n            [restrictions]=\"restrictions\"\n            [multiple]=\"multiple\"\n            [disabled]=\"disabled\">\n            <div role=\"button\" #fileSelectButton\n                [id]=\"focusableId\"\n                [attr.aria-label]=\"textFor('select')\"\n                [attr.tabindex]=\"selectButtonTabIndex\"\n                (focus)=\"onFileSelectButtonFocus($event)\"\n                (blur)=\"onFileSelectButtonBlur($event)\"\n                class=\"k-button k-button-md k-rounded-md k-button-solid k-button-solid-base k-upload-button\">\n                <input #fileSelect kendoFileSelect\n                    [attr.accept]=\"accept ? accept : null\"\n                    [dir]=\"direction\"\n                    [restrictions]=\"restrictions\"\n                    [multiple]=\"multiple\"\n                    [disabled]=\"disabled\" />\n                <span>{{textFor('select')}}</span>\n            </div>\n            <div class=\"k-dropzone-hint\">{{textFor('dropFilesHere')}}</div>\n        </div>\n        <ul kendo-upload-file-list\n            class=\"k-upload-files k-reset\"\n            *ngIf=\"showFileList && fileList.count > 0\"\n            [disabled]=\"disabled\"\n            [fileList]=\"fileList.files\"\n            [fileTemplate]=\"fileTemplate\"\n            [fileInfoTemplate]=\"fileInfoTemplate\">\n        </ul>\n    "
         }),
         tslib_1.__metadata("design:paramtypes", [upload_service_1.UploadService,
             kendo_angular_l10n_1.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: 1642586091,
     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-icon-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-upload-action\"\n          [ngClass]=\"{ 'k-focus': this.retryFocused }\"\n          [attr.tabIndex]=\"-1\"\n          (focus)=\"onFocus('retry')\"\n          (blur)=\"onBlur('retry')\"\n          (click)=\"onRetryClick()\">\n          <span class=\"k-icon k-button-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-icon-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-upload-action\"\n          [ngClass]=\"{ 'k-focus': this.pauseResumeFocused }\"\n          [attr.tabIndex]=\"-1\"\n          (focus)=\"onFocus('pauseResume')\"\n          (blur)=\"onBlur('pauseResume')\"\n          (click)=\"onPauseResumeClick()\">\n          <span class=\"k-icon k-button-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-icon-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-upload-action\"\n          [ngClass]=\"{ 'k-focus': this.actionFocused }\"\n          [attr.tabIndex]=\"-1\"\n          (focus)=\"onFocus('action')\"\n          (blur)=\"onBlur('action')\"\n          (click)=\"onRemoveCancelClick($event)\">\n          <span class=\"k-icon k-button-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-button-md k-rounded-md k-button-solid k-button-solid-base 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-button-md k-rounded-md k-button-solid k-button-solid-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,

package/dist/npm/upload.component.js

@@ -495,7 +495,7 @@ var UploadComponent = /** @class */ (function () {
      * @hidden
      */
     UploadComponent.prototype.onFileSelectButtonFocus = function (_event) {
-        this.renderer.addClass(this.fileSelectButton.nativeElement, 'k-state-focused');
+        this.renderer.addClass(this.fileSelectButton.nativeElement, 'k-focus');
         if (!this.navigation.focused) {
             this.navigation.focusedIndex = -1;
         }
@@ -504,7 +504,7 @@ var UploadComponent = /** @class */ (function () {
      * @hidden
      */
     UploadComponent.prototype.onFileSelectButtonBlur = function (_event) {
-        this.renderer.removeClass(this.fileSelectButton.nativeElement, 'k-state-focused');
+        this.renderer.removeClass(this.fileSelectButton.nativeElement, 'k-focus');
     };
     Object.defineProperty(UploadComponent.prototype, "showActionButtons", {
         /**
@@ -919,7 +919,7 @@ var UploadComponent = /** @class */ (function () {
         tslib_1.__metadata("design:type", Boolean)
     ], UploadComponent.prototype, "hostDefaultClasses", void 0);
     tslib_1.__decorate([
-        core_1.HostBinding('class.k-state-disabled'),
+        core_1.HostBinding('class.k-disabled'),
         tslib_1.__metadata("design:type", Boolean),
         tslib_1.__metadata("design:paramtypes", [])
     ], UploadComponent.prototype, "hostDisabledClass", null);
@@ -953,7 +953,7 @@ var UploadComponent = /** @class */ (function () {
                 }
             ],
             selector: 'kendo-upload',
-            template: "\n    <ng-container kendoUploadLocalizedMessages\n      i18n-cancel=\"kendo.upload.cancel|The text for the Cancel button\"\n      cancel=\"Cancel\"\n\n      i18n-clearSelectedFiles=\"kendo.upload.clearSelectedFiles|The text for the Clear button\"\n      clearSelectedFiles=\"Clear\"\n\n      i18n-dropFilesHere=\"kendo.upload.dropFilesHere|The drop zone hint\"\n      dropFilesHere=\"Drop files here to upload\"\n\n      i18n-filesBatchStatus=\"kendo.upload.filesBatchStatus|The status message for a batch of files\"\n      filesBatchStatus=\"files\"\n\n      i18n-filesBatchStatusFailed=\"kendo.upload.filesBatchStatusFailed|The status message for a batch of files after failed upload\"\n      filesBatchStatusFailed=\"files failed to upload.\"\n\n      i18n-filesBatchStatusUploaded=\"kendo.upload.filesBatchStatusUploaded|The status message for a batch of files after successful upload\"\n      filesBatchStatusUploaded=\"files successfully uploaded.\"\n\n      i18n-fileStatusFailed=\"kendo.upload.fileStatusFailed|The file status message after failed upload\"\n      fileStatusFailed=\"File failed to upload.\"\n\n      i18n-fileStatusUploaded=\"kendo.upload.fileStatusUploaded|The file status message after successful upload\"\n      fileStatusUploaded=\"File successfully uploaded.\"\n\n      i18n-headerStatusPaused=\"kendo.upload.headerStatusPaused|The header status message when the file upload is paused\"\n      headerStatusPaused=\"Paused\"\n\n      i18n-headerStatusUploaded=\"kendo.upload.headerStatusUploaded|The header status message after file upload completion\"\n      headerStatusUploaded=\"Done\"\n\n      i18n-headerStatusUploading=\"kendo.upload.headerStatusUploading|The header status message during file upload\"\n      headerStatusUploading=\"Uploading...\"\n\n      i18n-invalidFileExtension=\"kendo.upload.invalidFileExtension|The text for the invalid allowed extensions restriction message\"\n      invalidFileExtension=\"File type not allowed.\"\n\n      i18n-invalidMaxFileSize=\"kendo.upload.invalidMaxFileSize|The text for the invalid max file size restriction message\"\n      invalidMaxFileSize=\"File size too large.\"\n\n      i18n-invalidMinFileSize=\"kendo.upload.invalidMinFileSize|The text for the invalid min file size restriction message\"\n      invalidMinFileSize=\"File size too small.\"\n\n      i18n-pause=\"kendo.upload.pause|The text for the Pause button\"\n      pause=\"Pause\"\n\n      i18n-remove=\"kendo.upload.remove|The text for the Remove button\"\n      remove=\"Remove\"\n\n      i18n-resume=\"kendo.upload.resume|The text for the Resume button\"\n      resume=\"Resume\"\n\n      i18n-retry=\"kendo.upload.retry|The text for the Retry button\"\n      retry=\"Retry\"\n\n      i18n-select=\"kendo.upload.select|The text for the Select button\"\n      select=\"Select files...\"\n\n      i18n-uploadSelectedFiles=\"kendo.upload.uploadSelectedFiles|The text for the Upload files button\"\n      uploadSelectedFiles=\"Upload\"\n    >\n    </ng-container>\n    <div kendoUploadInternalDropZone\n      [restrictions]=\"restrictions\"\n      [multiple]=\"multiple\"\n      [disabled]=\"disabled\">\n        <div role=\"button\" #fileSelectButton\n             [id]=\"focusableId\"\n             [attr.aria-label]=\"textFor('select')\"\n             [attr.tabindex]=\"selectButtonTabIndex\"\n             (focus)=\"onFileSelectButtonFocus($event)\"\n             (blur)=\"onFileSelectButtonBlur($event)\"\n             class=\"k-button k-upload-button\">\n          <input #fileSelect kendoFileSelect\n            [attr.accept]=\"accept ? accept : null\"\n            [attr.aria-hidden]=\"true\"\n            [dir]=\"direction\"\n            [restrictions]=\"restrictions\"\n            [multiple]=\"multiple\"\n            [disabled]=\"disabled\" />\n          <span>{{textFor('select')}}</span>\n        </div>\n        <kendo-upload-status-total *ngIf=\"showTotalStatus\"\n          class=\"k-upload-status k-upload-status-total\"\n          [fileList]=\"fileList\">\n        </kendo-upload-status-total>\n        <div class=\"k-dropzone-hint\">{{textFor('dropFilesHere')}}</div>\n    </div>\n    <ul kendo-upload-file-list *ngIf=\"showFileList && fileList.count > 0\"\n        class=\"k-upload-files k-reset\"\n        [disabled]=\"disabled\"\n        [fileList]=\"fileList.files\"\n        [fileTemplate]=\"fileTemplate\"\n        [fileInfoTemplate]=\"fileInfoTemplate\">\n    </ul>\n    <kendo-upload-action-buttons\n      *ngIf=\"showActionButtons\"\n      [disabled]=\"disabled\"\n      [actionsLayout]=\"actionsLayout\">\n    </kendo-upload-action-buttons>\n  "
+            template: "\n    <ng-container kendoUploadLocalizedMessages\n      i18n-cancel=\"kendo.upload.cancel|The text for the Cancel button\"\n      cancel=\"Cancel\"\n\n      i18n-clearSelectedFiles=\"kendo.upload.clearSelectedFiles|The text for the Clear button\"\n      clearSelectedFiles=\"Clear\"\n\n      i18n-dropFilesHere=\"kendo.upload.dropFilesHere|The drop zone hint\"\n      dropFilesHere=\"Drop files here to upload\"\n\n      i18n-filesBatchStatus=\"kendo.upload.filesBatchStatus|The status message for a batch of files\"\n      filesBatchStatus=\"files\"\n\n      i18n-filesBatchStatusFailed=\"kendo.upload.filesBatchStatusFailed|The status message for a batch of files after failed upload\"\n      filesBatchStatusFailed=\"files failed to upload.\"\n\n      i18n-filesBatchStatusUploaded=\"kendo.upload.filesBatchStatusUploaded|The status message for a batch of files after successful upload\"\n      filesBatchStatusUploaded=\"files successfully uploaded.\"\n\n      i18n-fileStatusFailed=\"kendo.upload.fileStatusFailed|The file status message after failed upload\"\n      fileStatusFailed=\"File failed to upload.\"\n\n      i18n-fileStatusUploaded=\"kendo.upload.fileStatusUploaded|The file status message after successful upload\"\n      fileStatusUploaded=\"File successfully uploaded.\"\n\n      i18n-headerStatusPaused=\"kendo.upload.headerStatusPaused|The header status message when the file upload is paused\"\n      headerStatusPaused=\"Paused\"\n\n      i18n-headerStatusUploaded=\"kendo.upload.headerStatusUploaded|The header status message after file upload completion\"\n      headerStatusUploaded=\"Done\"\n\n      i18n-headerStatusUploading=\"kendo.upload.headerStatusUploading|The header status message during file upload\"\n      headerStatusUploading=\"Uploading...\"\n\n      i18n-invalidFileExtension=\"kendo.upload.invalidFileExtension|The text for the invalid allowed extensions restriction message\"\n      invalidFileExtension=\"File type not allowed.\"\n\n      i18n-invalidMaxFileSize=\"kendo.upload.invalidMaxFileSize|The text for the invalid max file size restriction message\"\n      invalidMaxFileSize=\"File size too large.\"\n\n      i18n-invalidMinFileSize=\"kendo.upload.invalidMinFileSize|The text for the invalid min file size restriction message\"\n      invalidMinFileSize=\"File size too small.\"\n\n      i18n-pause=\"kendo.upload.pause|The text for the Pause button\"\n      pause=\"Pause\"\n\n      i18n-remove=\"kendo.upload.remove|The text for the Remove button\"\n      remove=\"Remove\"\n\n      i18n-resume=\"kendo.upload.resume|The text for the Resume button\"\n      resume=\"Resume\"\n\n      i18n-retry=\"kendo.upload.retry|The text for the Retry button\"\n      retry=\"Retry\"\n\n      i18n-select=\"kendo.upload.select|The text for the Select button\"\n      select=\"Select files...\"\n\n      i18n-uploadSelectedFiles=\"kendo.upload.uploadSelectedFiles|The text for the Upload files button\"\n      uploadSelectedFiles=\"Upload\"\n    >\n    </ng-container>\n    <div kendoUploadInternalDropZone\n      [restrictions]=\"restrictions\"\n      [multiple]=\"multiple\"\n      [disabled]=\"disabled\">\n        <div role=\"button\" #fileSelectButton\n             [id]=\"focusableId\"\n             [attr.aria-label]=\"textFor('select')\"\n             [attr.tabindex]=\"selectButtonTabIndex\"\n             (focus)=\"onFileSelectButtonFocus($event)\"\n             (blur)=\"onFileSelectButtonBlur($event)\"\n             class=\"k-button k-button-md k-rounded-md k-button-solid k-button-solid-base k-upload-button\">\n          <input #fileSelect kendoFileSelect\n            [attr.accept]=\"accept ? accept : null\"\n            [attr.aria-hidden]=\"true\"\n            [dir]=\"direction\"\n            [restrictions]=\"restrictions\"\n            [multiple]=\"multiple\"\n            [disabled]=\"disabled\" />\n          <span>{{textFor('select')}}</span>\n        </div>\n        <kendo-upload-status-total *ngIf=\"showTotalStatus\"\n          class=\"k-upload-status k-upload-status-total\"\n          [fileList]=\"fileList\">\n        </kendo-upload-status-total>\n        <div class=\"k-dropzone-hint\">{{textFor('dropFilesHere')}}</div>\n    </div>\n    <ul kendo-upload-file-list *ngIf=\"showFileList && fileList.count > 0\"\n        class=\"k-upload-files k-reset\"\n        [disabled]=\"disabled\"\n        [fileList]=\"fileList.files\"\n        [fileTemplate]=\"fileTemplate\"\n        [fileInfoTemplate]=\"fileInfoTemplate\">\n    </ul>\n    <kendo-upload-action-buttons\n      *ngIf=\"showActionButtons\"\n      [disabled]=\"disabled\"\n      [actionsLayout]=\"actionsLayout\">\n    </kendo-upload-action-buttons>\n  "
         }),
         tslib_1.__metadata("design:paramtypes", [upload_service_1.UploadService,
             kendo_angular_l10n_1.LocalizationService,