@progress/kendo-angular-upload 9.0.4 → 11.0.0-develop.79

package/{esm2015/rendering/file-list-item-action-button.component.js → esm2020/rendering/file-list-item-action-button.component.mjs}

@@ -1,9 +1,12 @@
 /**-----------------------------------------------------------------------------------------
-* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Copyright © 2022 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 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';
 import * as i0 from "@angular/core";
 import * as i1 from "../upload.service";
 import * as i2 from "@progress/kendo-angular-l10n";
@@ -113,9 +116,9 @@ export class FileListItemActionButtonComponent {
         return true;
     }
 }
-FileListItemActionButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FileListItemActionButtonComponent, deps: [{ token: i1.UploadService }, { token: i2.LocalizationService }, { token: i3.NavigationService }], target: i0.ɵɵFactoryTarget.Component });
-FileListItemActionButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FileListItemActionButtonComponent, selector: "kendo-upload-file-list-item-action-button", inputs: { file: "file", disabled: "disabled", progress: "progress" }, ngImport: i0, template: `
-      <strong class="k-upload-status">
+FileListItemActionButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FileListItemActionButtonComponent, deps: [{ token: i1.UploadService }, { token: i2.LocalizationService }, { token: i3.NavigationService }], target: i0.ɵɵFactoryTarget.Component });
+FileListItemActionButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: FileListItemActionButtonComponent, selector: "kendo-upload-file-list-item-action-button", inputs: { file: "file", disabled: "disabled", progress: "progress" }, ngImport: i0, template: `
+      <span class="k-upload-actions">
         <span class="k-upload-pct" *ngIf="isUploading || isPaused">{{progress}}%</span>
 
         <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"
@@ -161,14 +164,14 @@ FileListItemActionButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion
             [attr.title]='actionButtonTitle'>
           </span>
         </button>
-      </strong>
+      </span>
     `, isInline: true, directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FileListItemActionButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FileListItemActionButtonComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-upload-file-list-item-action-button',
                     template: `
-      <strong class="k-upload-status">
+      <span class="k-upload-actions">
         <span class="k-upload-pct" *ngIf="isUploading || isPaused">{{progress}}%</span>
 
         <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"
@@ -214,7 +217,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             [attr.title]='actionButtonTitle'>
           </span>
         </button>
-      </strong>
+      </span>
     `
                 }]
         }], ctorParameters: function () { return [{ type: i1.UploadService }, { type: i2.LocalizationService }, { type: i3.NavigationService }]; }, propDecorators: { file: [{

package/{esm2015/rendering/file-list-item-base.js → esm2020/rendering/file-list-item-base.mjs}

@@ -1,8 +1,9 @@
 /**-----------------------------------------------------------------------------------------
-* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Copyright © 2022 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { Component } from '@angular/core';
+import { UploadService } from '../upload.service';
 import { fileHasValidationErrors, filesHaveValidationErrors, getTotalFilesSizeMessage } from '../common/util';
 import * as i0 from "@angular/core";
 import * as i1 from "../upload.service";
@@ -40,9 +41,9 @@ export class FileListItemBase {
         return this.localization.get(key);
     }
 }
-FileListItemBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FileListItemBase, deps: [{ token: i1.UploadService }], target: i0.ɵɵFactoryTarget.Component });
-FileListItemBase.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FileListItemBase, selector: "ng-component", ngImport: i0, template: '', isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FileListItemBase, decorators: [{
+FileListItemBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FileListItemBase, deps: [{ token: i1.UploadService }], target: i0.ɵɵFactoryTarget.Component });
+FileListItemBase.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: FileListItemBase, selector: "ng-component", ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FileListItemBase, decorators: [{
             type: Component,
             args: [{ template: '' }]
         }], ctorParameters: function () { return [{ type: i1.UploadService }]; } });

package/{esm2015/rendering/file-list-item.js → esm2020/rendering/file-list-item.mjs}

@@ -1,10 +1,12 @@
 /**-----------------------------------------------------------------------------------------
-* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Copyright © 2022 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Directive, HostBinding, HostListener, Input } from '@angular/core';
+import { Directive, ElementRef, HostBinding, HostListener, Input } from '@angular/core';
 import { FileState } from '../types';
+import { NavigationService } from '../navigation.service';
 import { filesHaveValidationErrors, hasClasses, IGNORE_TARGET_CLASSES, isFocusable } from '../common/util';
+import { UploadService } from '../upload.service';
 import * as i0 from "@angular/core";
 import * as i1 from "../navigation.service";
 import * as i2 from "../upload.service";
@@ -60,9 +62,9 @@ export class FileListItemDirective {
         }
     }
 }
-FileListItemDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FileListItemDirective, deps: [{ token: i0.ElementRef }, { token: i1.NavigationService }, { token: i2.UploadService }], target: i0.ɵɵFactoryTarget.Directive });
-FileListItemDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: FileListItemDirective, selector: "[kendoUploadFileListItem]", inputs: { files: "files", index: "index" }, host: { listeners: { "focus": "onFocus()", "blur": "onBlur()", "click": "onClick($event)" }, properties: { "class.k-file": "this.fileClass", "attr.data-uid": "this.uidAttribute", "attr.tabIndex": "this.tabIndex", "class.k-file-error": "this.kFileError", "class.k-file-invalid": "this.kFileInvalid", "class.k-file-progress": "this.kFileProgress", "class.k-file-success": "this.kFileSuccess", "class.k-focus": "this.kStateFocused" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FileListItemDirective, decorators: [{
+FileListItemDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FileListItemDirective, deps: [{ token: i0.ElementRef }, { token: i1.NavigationService }, { token: i2.UploadService }], target: i0.ɵɵFactoryTarget.Directive });
+FileListItemDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: FileListItemDirective, selector: "[kendoUploadFileListItem]", inputs: { files: "files", index: "index" }, host: { listeners: { "focus": "onFocus()", "blur": "onBlur()", "click": "onClick($event)" }, properties: { "class.k-file": "this.fileClass", "attr.data-uid": "this.uidAttribute", "attr.tabIndex": "this.tabIndex", "class.k-file-error": "this.kFileError", "class.k-file-invalid": "this.kFileInvalid", "class.k-file-progress": "this.kFileProgress", "class.k-file-success": "this.kFileSuccess", "class.k-focus": "this.kStateFocused" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FileListItemDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoUploadFileListItem]'

package/{esm2015/rendering/file-list-multiple-items.component.js → esm2020/rendering/file-list-multiple-items.component.mjs}

@@ -1,18 +1,23 @@
 /**-----------------------------------------------------------------------------------------
-* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Copyright © 2022 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { Input, Component } from '@angular/core';
-import { animate, state, style, transition, trigger } from '@angular/animations';
 import { FileState } from '../types';
 import { FileListItemBase } from './file-list-item-base';
+import { LocalizationService } from '@progress/kendo-angular-l10n';
+import { UploadService } from '../upload.service';
 import { isPresent } from '../common/util';
+import { FileInfoTemplateDirective } from '../templates/file-info-template.directive';
+import { animate, state, style, transition, trigger } from '@angular/animations';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
 import * as i2 from "../upload.service";
-import * as i3 from "./file-list-item-action-button.component";
-import * as i4 from "@angular/common";
-import * as i5 from "../templates/template-context.directive";
+import * as i3 from "@progress/kendo-angular-progressbar";
+import * as i4 from "./file-list-item-action-button.component";
+import * as i5 from "@angular/common";
+import * as i6 from "@progress/kendo-angular-buttons";
+import * as i7 from "../templates/template-context.directive";
 /**
  * @hidden
  */
@@ -58,48 +63,46 @@ export class FileListMultipleItemsComponent extends FileListItemBase {
         return this.files[0].state === FileState.Failed;
     }
 }
-FileListMultipleItemsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FileListMultipleItemsComponent, deps: [{ token: i1.LocalizationService }, { token: i2.UploadService }], target: i0.ɵɵFactoryTarget.Component });
-FileListMultipleItemsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FileListMultipleItemsComponent, selector: "kendo-upload-file-list-multiple-items", inputs: { disabled: "disabled", files: "files", fileInfoTemplate: "fileInfoTemplate" }, usesInheritance: true, ngImport: i0, template: `
-      <div class="k-progressbar" [@progressState]="showProgress">
-        <span class="k-progress" [style.width]="progressComplete + '%'"></span>
-      </div>
-      <span class="k-multiple-files-group-wrapper">
-        <span class="k-file-group k-icon k-i-copy"></span>
-      </span>
-      <span class="k-multiple-files-wrapper">
-        <ng-container *ngIf="!fileInfoTemplate">
-          <span *ngFor="let file of files" class="k-file-name-size-wrapper">
-            <span [title]="file.name" class="k-file-name">
-                {{file.name}}
-            </span>
-            <span [ngClass]="{
-                    'k-text-error': file.validationErrors,
+FileListMultipleItemsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FileListMultipleItemsComponent, deps: [{ token: i1.LocalizationService }, { token: i2.UploadService }], target: i0.ɵɵFactoryTarget.Component });
+FileListMultipleItemsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: FileListMultipleItemsComponent, selector: "kendo-upload-file-list-multiple-items", inputs: { disabled: "disabled", files: "files", fileInfoTemplate: "fileInfoTemplate" }, usesInheritance: true, ngImport: i0, template: `
+        <kendo-progressbar
+            [@progressState]="showProgress"
+            [value]="progressComplete"
+            [label]="{ visible: false }"
+        >
+        </kendo-progressbar>
+        <span class="k-file-icon-wrapper">
+            <span class="k-file-icon k-icon k-i-copy"></span>
+        </span>
+        <span class="k-multiple-files-wrapper">
+            <ng-container *ngIf="!fileInfoTemplate">
+            <span *ngFor="let file of files" class="k-file-name-size-wrapper">
+                <span [title]="file.name" class="k-file-name">
+                    {{file.name}}
+                </span>
+                <span [ngClass]="{
                     'k-file-validation-message': file.validationErrors,
                     'k-file-size': !file.validationErrors
-                  }"
-            >{{fileStatusText(file)}}</span>
-          </span>
-          <span class="k-file-information"
-            [ngClass]="{
-              'k-text-success': isUploadSuccessful,
-              'k-text-error': isUploadFailed
-            }"
-          >{{batchStatusText}}</span>
-        </ng-container>
-        <ng-template *ngIf="fileInfoTemplate"
-            [templateContext]="{
-              templateRef: fileInfoTemplate.templateRef,
-              state: files[0].state,
-              $implicit: files
-            }">
-        </ng-template>
-      </span>
-      <kendo-upload-file-list-item-action-button
-        [file]='files[0]'
-        [disabled]='disabled'
-        [progress]='progressComplete'>
-      </kendo-upload-file-list-item-action-button>
-    `, isInline: true, components: [{ type: i3.FileListItemActionButtonComponent, selector: "kendo-upload-file-list-item-action-button", inputs: ["file", "disabled", "progress"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }], animations: [
+                    }"
+                >{{fileStatusText(file)}}</span>
+            </span>
+            <span class="k-file-summary"
+            >{{batchStatusText}}</span>
+            </ng-container>
+            <ng-template *ngIf="fileInfoTemplate"
+                [templateContext]="{
+                templateRef: fileInfoTemplate.templateRef,
+                state: files[0].state,
+                $implicit: files
+                }">
+            </ng-template>
+        </span>
+        <kendo-upload-file-list-item-action-button
+            [file]='files[0]'
+            [disabled]='disabled'
+            [progress]='progressComplete'>
+        </kendo-upload-file-list-item-action-button>
+    `, isInline: true, components: [{ type: i3.ProgressBarComponent, selector: "kendo-progressbar", inputs: ["label", "progressCssStyle", "progressCssClass", "emptyCssStyle", "emptyCssClass", "animation"], outputs: ["animationEnd"], exportAs: ["kendoProgressBar"] }, { type: i4.FileListItemActionButtonComponent, selector: "kendo-upload-file-list-item-action-button", inputs: ["file", "disabled", "progress"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i7.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }], animations: [
         trigger('progressState', [
             state('active', style({ opacity: 1 })),
             state('inactive', style({ opacity: 0 })),
@@ -108,7 +111,7 @@ FileListMultipleItemsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
             transition('active => inactive', animate('1s 2s ease-out'))
         ])
     ] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FileListMultipleItemsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FileListMultipleItemsComponent, decorators: [{
             type: Component,
             args: [{
                     animations: [
@@ -122,45 +125,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     ],
                     selector: 'kendo-upload-file-list-multiple-items',
                     template: `
-      <div class="k-progressbar" [@progressState]="showProgress">
-        <span class="k-progress" [style.width]="progressComplete + '%'"></span>
-      </div>
-      <span class="k-multiple-files-group-wrapper">
-        <span class="k-file-group k-icon k-i-copy"></span>
-      </span>
-      <span class="k-multiple-files-wrapper">
-        <ng-container *ngIf="!fileInfoTemplate">
-          <span *ngFor="let file of files" class="k-file-name-size-wrapper">
-            <span [title]="file.name" class="k-file-name">
-                {{file.name}}
-            </span>
-            <span [ngClass]="{
-                    'k-text-error': file.validationErrors,
+        <kendo-progressbar
+            [@progressState]="showProgress"
+            [value]="progressComplete"
+            [label]="{ visible: false }"
+        >
+        </kendo-progressbar>
+        <span class="k-file-icon-wrapper">
+            <span class="k-file-icon k-icon k-i-copy"></span>
+        </span>
+        <span class="k-multiple-files-wrapper">
+            <ng-container *ngIf="!fileInfoTemplate">
+            <span *ngFor="let file of files" class="k-file-name-size-wrapper">
+                <span [title]="file.name" class="k-file-name">
+                    {{file.name}}
+                </span>
+                <span [ngClass]="{
                     'k-file-validation-message': file.validationErrors,
                     'k-file-size': !file.validationErrors
-                  }"
-            >{{fileStatusText(file)}}</span>
-          </span>
-          <span class="k-file-information"
-            [ngClass]="{
-              'k-text-success': isUploadSuccessful,
-              'k-text-error': isUploadFailed
-            }"
-          >{{batchStatusText}}</span>
-        </ng-container>
-        <ng-template *ngIf="fileInfoTemplate"
-            [templateContext]="{
-              templateRef: fileInfoTemplate.templateRef,
-              state: files[0].state,
-              $implicit: files
-            }">
-        </ng-template>
-      </span>
-      <kendo-upload-file-list-item-action-button
-        [file]='files[0]'
-        [disabled]='disabled'
-        [progress]='progressComplete'>
-      </kendo-upload-file-list-item-action-button>
+                    }"
+                >{{fileStatusText(file)}}</span>
+            </span>
+            <span class="k-file-summary"
+            >{{batchStatusText}}</span>
+            </ng-container>
+            <ng-template *ngIf="fileInfoTemplate"
+                [templateContext]="{
+                templateRef: fileInfoTemplate.templateRef,
+                state: files[0].state,
+                $implicit: files
+                }">
+            </ng-template>
+        </span>
+        <kendo-upload-file-list-item-action-button
+            [file]='files[0]'
+            [disabled]='disabled'
+            [progress]='progressComplete'>
+        </kendo-upload-file-list-item-action-button>
     `
                 }]
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i2.UploadService }]; }, propDecorators: { disabled: [{

package/{esm2015/rendering/file-list-single-item.component.js → esm2020/rendering/file-list-single-item.component.mjs}

@@ -1,18 +1,23 @@
 /**-----------------------------------------------------------------------------------------
-* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Copyright © 2022 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { Input, Component } from '@angular/core';
-import { animate, state, style, transition, trigger } from '@angular/animations';
 import { FileState } from '../types';
 import { FileListItemBase } from './file-list-item-base';
+import { LocalizationService } from '@progress/kendo-angular-l10n';
+import { UploadService } from '../upload.service';
 import { getFileGroupCssClass, isPresent } from '../common/util';
+import { FileInfoTemplateDirective } from '../templates/file-info-template.directive';
+import { animate, state, style, transition, trigger } from '@angular/animations';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
 import * as i2 from "../upload.service";
-import * as i3 from "./file-list-item-action-button.component";
-import * as i4 from "@angular/common";
-import * as i5 from "../templates/template-context.directive";
+import * as i3 from "@progress/kendo-angular-progressbar";
+import * as i4 from "./file-list-item-action-button.component";
+import * as i5 from "@angular/common";
+import * as i6 from "@progress/kendo-angular-buttons";
+import * as i7 from "../templates/template-context.directive";
 /**
  * @hidden
  */
@@ -56,40 +61,41 @@ export class FileListSingleItemComponent extends FileListItemBase {
         return !this.isUploadFailed && !this.isUploadSuccessful;
     }
 }
-FileListSingleItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FileListSingleItemComponent, deps: [{ token: i1.LocalizationService }, { token: i2.UploadService }], target: i0.ɵɵFactoryTarget.Component });
-FileListSingleItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FileListSingleItemComponent, selector: "kendo-upload-file-list-single-item", inputs: { disabled: "disabled", file: "file", fileInfoTemplate: "fileInfoTemplate" }, usesInheritance: true, ngImport: i0, template: `
-      <div class="k-progressbar" [@progressState]="showProgress">
-        <span class="k-progress" [style.width]="progressComplete + '%'"></span>
-      </div>
-      <span class="k-file-group-wrapper">
-        <span class="k-file-group k-icon" [ngClass]="fileGroupClass"></span>
-      </span>
-      <span class="k-file-name-size-wrapper">
-        <ng-container *ngIf="!fileInfoTemplate">
-          <span class="k-file-name" [title]="file.name">{{ file.name }}</span>
-          <span [ngClass]="{
-                  'k-file-validation-message': file.validationErrors,
-                  'k-file-size': !file.validationErrors && isNotYetUploaded,
-                  'k-text-success': isUploadSuccessful,
-                  'k-text-error': file.validationErrors || isUploadFailed,
-                  'k-file-information': isUploadSuccessful || isUploadFailed
+FileListSingleItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FileListSingleItemComponent, deps: [{ token: i1.LocalizationService }, { token: i2.UploadService }], target: i0.ɵɵFactoryTarget.Component });
+FileListSingleItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: FileListSingleItemComponent, selector: "kendo-upload-file-list-single-item", inputs: { disabled: "disabled", file: "file", fileInfoTemplate: "fileInfoTemplate" }, usesInheritance: true, ngImport: i0, template: `
+        <kendo-progressbar
+            [@progressState]="showProgress"
+            [value]="progressComplete"
+            [label]="{ visible: false }"
+        >
+        </kendo-progressbar>
+        <span class="k-file-icon-wrapper"> 
+            <span class="k-file-icon k-icon" [ngClass]="fileGroupClass"></span>
+        </span>
+        <span class="k-file-name-size-wrapper">
+            <ng-container *ngIf="!fileInfoTemplate">
+            <span class="k-file-name" [title]="file.name">{{ file.name }}</span>
+            <span [ngClass]="{
+                'k-file-validation-message': file.validationErrors,
+                'k-file-size': !file.validationErrors && isNotYetUploaded,
+                'k-file-summary': isUploadSuccessful || isUploadFailed
                 }"
-          >{{fileStatusText}}</span>
-        </ng-container>
-        <ng-template *ngIf="fileInfoTemplate"
-            [templateContext]="{
-              templateRef: fileInfoTemplate.templateRef,
-              state: file.state,
-              $implicit: [file]
-            }">
-        </ng-template>
-      </span>
-      <kendo-upload-file-list-item-action-button
-        [file]='file'
-        [disabled]='disabled'
-        [progress]='progressComplete'>
-      </kendo-upload-file-list-item-action-button>
-    `, isInline: true, components: [{ type: i3.FileListItemActionButtonComponent, selector: "kendo-upload-file-list-item-action-button", inputs: ["file", "disabled", "progress"] }], directives: [{ type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }], animations: [
+            >{{fileStatusText}}</span>
+            </ng-container>
+            <ng-template *ngIf="fileInfoTemplate"
+                [templateContext]="{
+                templateRef: fileInfoTemplate.templateRef,
+                state: file.state,
+                $implicit: [file]
+                }">
+            </ng-template>
+        </span>
+        <kendo-upload-file-list-item-action-button
+            [file]='file'
+            [disabled]='disabled'
+            [progress]='progressComplete'>
+        </kendo-upload-file-list-item-action-button>
+    `, isInline: true, components: [{ type: i3.ProgressBarComponent, selector: "kendo-progressbar", inputs: ["label", "progressCssStyle", "progressCssClass", "emptyCssStyle", "emptyCssClass", "animation"], outputs: ["animationEnd"], exportAs: ["kendoProgressBar"] }, { type: i4.FileListItemActionButtonComponent, selector: "kendo-upload-file-list-item-action-button", inputs: ["file", "disabled", "progress"] }], directives: [{ type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i7.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }], animations: [
         trigger('progressState', [
             state('active', style({ opacity: 1 })),
             state('inactive', style({ opacity: 0 })),
@@ -98,7 +104,7 @@ FileListSingleItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
             transition('active => inactive', animate('1s 2s ease-out'))
         ])
     ] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FileListSingleItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FileListSingleItemComponent, decorators: [{
             type: Component,
             args: [{
                     animations: [
@@ -112,37 +118,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     ],
                     selector: 'kendo-upload-file-list-single-item',
                     template: `
-      <div class="k-progressbar" [@progressState]="showProgress">
-        <span class="k-progress" [style.width]="progressComplete + '%'"></span>
-      </div>
-      <span class="k-file-group-wrapper">
-        <span class="k-file-group k-icon" [ngClass]="fileGroupClass"></span>
-      </span>
-      <span class="k-file-name-size-wrapper">
-        <ng-container *ngIf="!fileInfoTemplate">
-          <span class="k-file-name" [title]="file.name">{{ file.name }}</span>
-          <span [ngClass]="{
-                  'k-file-validation-message': file.validationErrors,
-                  'k-file-size': !file.validationErrors && isNotYetUploaded,
-                  'k-text-success': isUploadSuccessful,
-                  'k-text-error': file.validationErrors || isUploadFailed,
-                  'k-file-information': isUploadSuccessful || isUploadFailed
+        <kendo-progressbar
+            [@progressState]="showProgress"
+            [value]="progressComplete"
+            [label]="{ visible: false }"
+        >
+        </kendo-progressbar>
+        <span class="k-file-icon-wrapper"> 
+            <span class="k-file-icon k-icon" [ngClass]="fileGroupClass"></span>
+        </span>
+        <span class="k-file-name-size-wrapper">
+            <ng-container *ngIf="!fileInfoTemplate">
+            <span class="k-file-name" [title]="file.name">{{ file.name }}</span>
+            <span [ngClass]="{
+                'k-file-validation-message': file.validationErrors,
+                'k-file-size': !file.validationErrors && isNotYetUploaded,
+                'k-file-summary': isUploadSuccessful || isUploadFailed
                 }"
-          >{{fileStatusText}}</span>
-        </ng-container>
-        <ng-template *ngIf="fileInfoTemplate"
-            [templateContext]="{
-              templateRef: fileInfoTemplate.templateRef,
-              state: file.state,
-              $implicit: [file]
-            }">
-        </ng-template>
-      </span>
-      <kendo-upload-file-list-item-action-button
-        [file]='file'
-        [disabled]='disabled'
-        [progress]='progressComplete'>
-      </kendo-upload-file-list-item-action-button>
+            >{{fileStatusText}}</span>
+            </ng-container>
+            <ng-template *ngIf="fileInfoTemplate"
+                [templateContext]="{
+                templateRef: fileInfoTemplate.templateRef,
+                state: file.state,
+                $implicit: [file]
+                }">
+            </ng-template>
+        </span>
+        <kendo-upload-file-list-item-action-button
+            [file]='file'
+            [disabled]='disabled'
+            [progress]='progressComplete'>
+        </kendo-upload-file-list-item-action-button>
     `
                 }]
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i2.UploadService }]; }, propDecorators: { disabled: [{

package/{esm2015/rendering/file-list.component.js → esm2020/rendering/file-list.component.mjs}

@@ -1,12 +1,16 @@
 /**-----------------------------------------------------------------------------------------
-* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Copyright © 2022 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 /* eslint-disable @angular-eslint/component-selector */
-import { Input, Component, ViewChildren } from '@angular/core';
+import { Input, Component, ViewChildren, QueryList } from '@angular/core';
 import { Keys } from '@progress/kendo-angular-common';
 import { FileState } from '../types';
+import { FileTemplateDirective } from '../templates/file-template.directive';
 import { FileListItemDirective } from './file-list-item';
+import { NavigationService } from '../navigation.service';
+import { UploadService } from '../upload.service';
+import { FileInfoTemplateDirective } from '../templates/file-info-template.directive';
 import * as i0 from "@angular/core";
 import * as i1 from "../upload.service";
 import * as i2 from "../navigation.service";
@@ -14,7 +18,8 @@ import * as i3 from "./file-list-single-item.component";
 import * as i4 from "./file-list-multiple-items.component";
 import * as i5 from "@angular/common";
 import * as i6 from "./file-list-item";
-import * as i7 from "../templates/template-context.directive";
+import * as i7 from "@progress/kendo-angular-buttons";
+import * as i8 from "../templates/template-context.directive";
 /**
  * @hidden
  */
@@ -36,10 +41,10 @@ export class FileListComponent {
         });
     }
     itemActionHandler(key) {
-        let index = this.navigation.focusedIndex;
-        let item = this.fileListItems.toArray()[index];
-        let uid = item.uidAttribute;
-        let files = this.uploadService.files.get(uid);
+        const index = this.navigation.focusedIndex;
+        const item = this.fileListItems.toArray()[index];
+        const uid = item.uidAttribute;
+        const files = this.uploadService.files.get(uid);
         if (key === Keys.Escape && files[0].state === FileState.Uploading) {
             this.uploadService.cancelFiles(uid);
             this.navigation.focusSelectButton();
@@ -67,8 +72,8 @@ export class FileListComponent {
         this.actionSubscription.unsubscribe();
     }
 }
-FileListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FileListComponent, deps: [{ token: i1.UploadService }, { token: i2.NavigationService }], target: i0.ɵɵFactoryTarget.Component });
-FileListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FileListComponent, selector: "[kendo-upload-file-list]", inputs: { disabled: "disabled", fileList: "fileList", fileTemplate: "fileTemplate", fileInfoTemplate: "fileInfoTemplate" }, viewQueries: [{ propertyName: "fileListItems", predicate: FileListItemDirective, descendants: true }], ngImport: i0, template: `
+FileListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FileListComponent, deps: [{ token: i1.UploadService }, { token: i2.NavigationService }], target: i0.ɵɵFactoryTarget.Component });
+FileListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: FileListComponent, selector: "[kendo-upload-file-list]", inputs: { disabled: "disabled", fileList: "fileList", fileTemplate: "fileTemplate", fileInfoTemplate: "fileInfoTemplate" }, viewQueries: [{ propertyName: "fileListItems", predicate: FileListItemDirective, descendants: true }], ngImport: i0, template: `
     <ng-template ngFor
       [ngForOf]="fileList"
       let-files
@@ -96,8 +101,8 @@ FileListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
               }"></ng-template>
       </li>
     </ng-template>
-    `, isInline: true, components: [{ type: i3.FileListSingleItemComponent, selector: "kendo-upload-file-list-single-item", inputs: ["disabled", "file", "fileInfoTemplate"] }, { type: i4.FileListMultipleItemsComponent, selector: "kendo-upload-file-list-multiple-items", inputs: ["disabled", "files", "fileInfoTemplate"] }], directives: [{ type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.FileListItemDirective, selector: "[kendoUploadFileListItem]", inputs: ["files", "index"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FileListComponent, decorators: [{
+    `, isInline: true, components: [{ type: i3.FileListSingleItemComponent, selector: "kendo-upload-file-list-single-item", inputs: ["disabled", "file", "fileInfoTemplate"] }, { type: i4.FileListMultipleItemsComponent, selector: "kendo-upload-file-list-multiple-items", inputs: ["disabled", "files", "fileInfoTemplate"] }], directives: [{ type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.FileListItemDirective, selector: "[kendoUploadFileListItem]", inputs: ["files", "index"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i8.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FileListComponent, decorators: [{
             type: Component,
             args: [{
                     selector: '[kendo-upload-file-list]',