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

package/dist/es/package-metadata.js

@@ -9,7 +9,7 @@ export 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'
 };

package/dist/es/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
  */
 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;
@@ -46,10 +48,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);
@@ -57,6 +60,7 @@ var FileListItemActionButtonComponent = /** @class */ (function () {
         else {
             this.uploadService.removeFiles(uid);
         }
+        this.navigation.focusSelectButton();
     };
     FileListItemActionButtonComponent.prototype.onPauseResumeClick = function () {
         if (this.disabled) {
@@ -154,10 +158,11 @@ var FileListItemActionButtonComponent = /** @class */ (function () {
     FileListItemActionButtonComponent = tslib_1.__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    "
         }),
         tslib_1.__metadata("design:paramtypes", [UploadService,
-            LocalizationService])
+            LocalizationService,
+            NavigationService])
     ], FileListItemActionButtonComponent);
     return FileListItemActionButtonComponent;
 }());

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

@@ -56,7 +56,6 @@ var UploadActionButtonsComponent = /** @class */ (function () {
             else {
                 _this.performUpload();
             }
-            _this.navigation.focusSelectButton();
         });
     };
     UploadActionButtonsComponent.prototype.onFocus = function () {
@@ -73,14 +72,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) {
@@ -129,7 +138,7 @@ var UploadActionButtonsComponent = /** @class */ (function () {
     UploadActionButtonsComponent = tslib_1.__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    "
         }),
         tslib_1.__metadata("design:paramtypes", [UploadService,
             LocalizationService,

package/dist/es/upload.component.js

@@ -493,7 +493,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;
         }
@@ -502,7 +502,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", {
         /**
@@ -917,7 +917,7 @@ var UploadComponent = /** @class */ (function () {
         tslib_1.__metadata("design:type", Boolean)
     ], UploadComponent.prototype, "hostDefaultClasses", void 0);
     tslib_1.__decorate([
-        HostBinding('class.k-state-disabled'),
+        HostBinding('class.k-disabled'),
         tslib_1.__metadata("design:type", Boolean),
         tslib_1.__metadata("design:paramtypes", [])
     ], UploadComponent.prototype, "hostDisabledClass", null);
@@ -951,7 +951,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", [UploadService,
             LocalizationService,

package/dist/es2015/fileselect.component.js

@@ -259,7 +259,7 @@ let FileSelectComponent = FileSelectComponent_1 = class FileSelectComponent {
      * @hidden
      */
     onFileSelectButtonFocus(_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;
         }
@@ -268,7 +268,7 @@ let FileSelectComponent = FileSelectComponent_1 = class FileSelectComponent {
      * @hidden
      */
     onFileSelectButtonBlur(_event) {
-        this.renderer.removeClass(this.fileSelectButton.nativeElement, 'k-state-focused');
+        this.renderer.removeClass(this.fileSelectButton.nativeElement, 'k-focus');
     }
     subscribeBlur() {
         if (!isDocumentAvailable()) {
@@ -408,7 +408,7 @@ tslib_1.__decorate([
     tslib_1.__metadata("design:type", Boolean)
 ], FileSelectComponent.prototype, "hostDefaultClasses", void 0);
 tslib_1.__decorate([
-    HostBinding('class.k-state-disabled'),
+    HostBinding('class.k-disabled'),
     tslib_1.__metadata("design:type", Boolean),
     tslib_1.__metadata("design:paramtypes", [])
 ], FileSelectComponent.prototype, "hostDisabledClass", null);
@@ -473,7 +473,7 @@ FileSelectComponent = FileSelectComponent_1 = tslib_1.__decorate([
                 [attr.tabindex]="selectButtonTabIndex"
                 (focus)="onFileSelectButtonFocus($event)"
                 (blur)="onFileSelectButtonBlur($event)"
-                class="k-button k-upload-button">
+                class="k-button k-button-md k-rounded-md k-button-solid k-button-solid-base k-upload-button">
                 <input #fileSelect kendoFileSelect
                     [attr.accept]="accept ? accept : null"
                     [dir]="direction"