@progress/kendo-angular-upload 8.0.2-dev.202203071504 → 9.0.0-dev.202204131914

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

@@ -2,16 +2,17 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import * as tslib_1 from "tslib";
 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";
+import * as i3 from "./../navigation.service";
+import * as i4 from "@angular/common";
 /**
  * @hidden
  */
-let FileListItemActionButtonComponent = class FileListItemActionButtonComponent {
+export class FileListItemActionButtonComponent {
     constructor(uploadService, localization, navigation) {
         this.uploadService = uploadService;
         this.localization = localization;
@@ -111,23 +112,62 @@ let FileListItemActionButtonComponent = class FileListItemActionButtonComponent
         }
         return true;
     }
-};
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Object)
-], FileListItemActionButtonComponent.prototype, "file", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Boolean)
-], FileListItemActionButtonComponent.prototype, "disabled", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Number)
-], FileListItemActionButtonComponent.prototype, "progress", void 0);
-FileListItemActionButtonComponent = tslib_1.__decorate([
-    Component({
-        selector: 'kendo-upload-file-list-item-action-button',
-        template: `
+}
+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">
+        <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"
+          [ngClass]="{ 'k-focus': this.retryFocused }"
+          [attr.tabIndex]="-1"
+          (focus)="onFocus('retry')"
+          (blur)="onBlur('retry')"
+          (click)="onRetryClick()">
+          <span class="k-icon k-button-icon k-retry k-i-refresh-sm"
+            [attr.aria-label]="retryButtonTitle"
+            [attr.title]="retryButtonTitle">
+          </span>
+        </button>
+
+        <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"
+          [ngClass]="{ 'k-focus': this.pauseResumeFocused }"
+          [attr.tabIndex]="-1"
+          (focus)="onFocus('pauseResume')"
+          (blur)="onBlur('pauseResume')"
+          (click)="onPauseResumeClick()">
+          <span class="k-icon k-button-icon"
+            [ngClass]="{
+              'k-i-play-sm': isPaused,
+              'k-i-pause-sm': !isPaused
+            }"
+            [attr.aria-label]='pauseResumeButtonTitle'
+            [attr.title]='pauseResumeButtonTitle'>
+          </span>
+        </button>
+
+        <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"
+          [ngClass]="{ 'k-focus': this.actionFocused }"
+          [attr.tabIndex]="-1"
+          (focus)="onFocus('action')"
+          (blur)="onBlur('action')"
+          (click)="onRemoveCancelClick($event)">
+          <span class="k-icon k-button-icon"
+            [ngClass]="{
+              'k-i-cancel': isUploading,
+              'k-delete k-i-x': !isUploading
+            }"
+            [attr.aria-label]='actionButtonTitle'
+            [attr.title]='actionButtonTitle'>
+          </span>
+        </button>
+      </strong>
+    `, 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: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-upload-file-list-item-action-button',
+                    template: `
       <strong class="k-upload-status">
         <span class="k-upload-pct" *ngIf="isUploading || isPaused">{{progress}}%</span>
 
@@ -176,9 +216,11 @@ FileListItemActionButtonComponent = tslib_1.__decorate([
         </button>
       </strong>
     `
-    }),
-    tslib_1.__metadata("design:paramtypes", [UploadService,
-        LocalizationService,
-        NavigationService])
-], FileListItemActionButtonComponent);
-export { FileListItemActionButtonComponent };
+                }]
+        }], ctorParameters: function () { return [{ type: i1.UploadService }, { type: i2.LocalizationService }, { type: i3.NavigationService }]; }, propDecorators: { file: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], progress: [{
+                type: Input
+            }] } });

package/{dist/es2015 → esm2015}/rendering/file-list-item-base.js

@@ -2,7 +2,10 @@
 * Copyright © 2021 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 { fileHasValidationErrors, filesHaveValidationErrors, getTotalFilesSizeMessage } from '../common/util';
+import * as i0 from "@angular/core";
+import * as i1 from "../upload.service";
 /**
  * @hidden
  */
@@ -37,3 +40,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: [{
+            type: Component,
+            args: [{ template: '' }]
+        }], ctorParameters: function () { return [{ type: i1.UploadService }]; } });

package/esm2015/rendering/file-list-item.js

@@ -0,0 +1,107 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 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 { FileState } from '../types';
+import { filesHaveValidationErrors, hasClasses, IGNORE_TARGET_CLASSES, isFocusable } from '../common/util';
+import * as i0 from "@angular/core";
+import * as i1 from "../navigation.service";
+import * as i2 from "../upload.service";
+/**
+ * @hidden
+ */
+export class FileListItemDirective {
+    constructor(el, navigationService, uploadService) {
+        this.navigationService = navigationService;
+        this.uploadService = uploadService;
+        this.fileClass = true;
+        this.focused = false;
+        this.element = el;
+    }
+    focus() {
+        this.element.nativeElement.focus();
+    }
+    get uidAttribute() {
+        return this.files[0].uid;
+    }
+    get tabIndex() {
+        return "-1";
+    }
+    get kFileError() {
+        return this.files[0].state === FileState.Failed;
+    }
+    get kFileInvalid() {
+        return filesHaveValidationErrors(this.files);
+    }
+    get kFileProgress() {
+        return this.files[0].state === FileState.Uploading ||
+            this.files[0].state === FileState.Paused;
+    }
+    get kFileSuccess() {
+        if (this.uploadService.component === 'Upload') {
+            return this.files[0].state === FileState.Uploaded ||
+                this.files[0].state === FileState.Initial;
+        }
+        return false;
+    }
+    get kStateFocused() {
+        return this.focused;
+    }
+    onFocus() {
+        this.focused = true;
+    }
+    onBlur() {
+        this.focused = false;
+    }
+    onClick(event) {
+        if (!isFocusable(event.target) && !hasClasses(event.target, IGNORE_TARGET_CLASSES)) {
+            this.navigationService.focusedIndex = this.index;
+        }
+    }
+}
+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-state-focused": "this.kStateFocused" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FileListItemDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoUploadFileListItem]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.NavigationService }, { type: i2.UploadService }]; }, propDecorators: { files: [{
+                type: Input
+            }], index: [{
+                type: Input
+            }], fileClass: [{
+                type: HostBinding,
+                args: ['class.k-file']
+            }], uidAttribute: [{
+                type: HostBinding,
+                args: ['attr.data-uid']
+            }], tabIndex: [{
+                type: HostBinding,
+                args: ['attr.tabIndex']
+            }], kFileError: [{
+                type: HostBinding,
+                args: ['class.k-file-error']
+            }], kFileInvalid: [{
+                type: HostBinding,
+                args: ['class.k-file-invalid']
+            }], kFileProgress: [{
+                type: HostBinding,
+                args: ['class.k-file-progress']
+            }], kFileSuccess: [{
+                type: HostBinding,
+                args: ['class.k-file-success']
+            }], kStateFocused: [{
+                type: HostBinding,
+                args: ['class.k-state-focused']
+            }], onFocus: [{
+                type: HostListener,
+                args: ["focus"]
+            }], onBlur: [{
+                type: HostListener,
+                args: ["blur"]
+            }], onClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }] } });

package/esm2015/rendering/file-list-multiple-items.component.js

@@ -0,0 +1,172 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 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 { isPresent } from '../common/util';
+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";
+/**
+ * @hidden
+ */
+export class FileListMultipleItemsComponent extends FileListItemBase {
+    constructor(localization, uploadService) {
+        super(uploadService);
+        this.localization = localization;
+        this.subscribeUploadProgress((args) => {
+            if (args.files[0].uid === this.files[0].uid) {
+                this.progressComplete = args.percentComplete;
+            }
+        });
+    }
+    get showProgress() {
+        const showProgress = this.files[0].state === FileState.Uploading || this.files[0].state === FileState.Paused;
+        return showProgress ? 'active' : 'inactive';
+    }
+    ngOnInit() {
+        this.filesHaveErrors = super.filesHaveValidationErrors(this.files);
+    }
+    fileStatusText(file) {
+        const errors = file.validationErrors;
+        if (!isPresent(errors)) {
+            return this.getTotalFilesSizeMessage([file]);
+        }
+        return this.getFileValidationMessage(file);
+    }
+    get batchStatusText() {
+        const state = this.files[0].state;
+        const fileCount = this.files.length;
+        if (state === FileState.Uploaded) {
+            return `${fileCount} ${this.textFor('filesBatchStatusUploaded')}`;
+        }
+        if (state === FileState.Failed) {
+            return `${fileCount} ${this.textFor('filesBatchStatusFailed')}`;
+        }
+        return `${fileCount} ${this.textFor('filesBatchStatus')}`;
+    }
+    get isUploadSuccessful() {
+        return this.files[0].state === FileState.Uploaded;
+    }
+    get isUploadFailed() {
+        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,
+                    '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: [
+        trigger('progressState', [
+            state('active', style({ opacity: 1 })),
+            state('inactive', style({ opacity: 0 })),
+            transition('void => active', style({ opacity: 0 })),
+            transition('inactive => active', style({ opacity: 1 })),
+            transition('active => inactive', animate('1s 2s ease-out'))
+        ])
+    ] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FileListMultipleItemsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    animations: [
+                        trigger('progressState', [
+                            state('active', style({ opacity: 1 })),
+                            state('inactive', style({ opacity: 0 })),
+                            transition('void => active', style({ opacity: 0 })),
+                            transition('inactive => active', style({ opacity: 1 })),
+                            transition('active => inactive', animate('1s 2s ease-out'))
+                        ])
+                    ],
+                    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,
+                    '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>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i2.UploadService }]; }, propDecorators: { disabled: [{
+                type: Input
+            }], files: [{
+                type: Input
+            }], fileInfoTemplate: [{
+                type: Input
+            }] } });

package/esm2015/rendering/file-list-single-item.component.js

@@ -0,0 +1,154 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 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 { getFileGroupCssClass, isPresent } from '../common/util';
+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";
+/**
+ * @hidden
+ */
+export class FileListSingleItemComponent extends FileListItemBase {
+    constructor(localization, uploadService) {
+        super(uploadService);
+        this.localization = localization;
+        this.subscribeUploadProgress((args) => {
+            if (args.files[0].uid === this.file.uid) {
+                this.progressComplete = args.percentComplete;
+            }
+        });
+    }
+    get fileStatusText() {
+        const errors = this.file.validationErrors;
+        if (this.file.state === FileState.Uploaded) {
+            return `${this.textFor('fileStatusUploaded')}`;
+        }
+        if (this.file.state === FileState.Failed) {
+            return `${this.textFor('fileStatusFailed')}`;
+        }
+        if (!isPresent(errors)) {
+            return this.getTotalFilesSizeMessage([this.file]);
+        }
+        return this.getFileValidationMessage(this.file);
+    }
+    get showProgress() {
+        const showProgress = this.file.state === FileState.Uploading || this.file.state === FileState.Paused;
+        return showProgress ? 'active' : 'inactive';
+    }
+    get fileGroupClass() {
+        return getFileGroupCssClass(this.file.extension ? this.file.extension : '');
+    }
+    get isUploadSuccessful() {
+        return this.file.state === FileState.Uploaded;
+    }
+    get isUploadFailed() {
+        return this.file.state === FileState.Failed;
+    }
+    get isNotYetUploaded() {
+        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
+                }"
+          >{{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: [
+        trigger('progressState', [
+            state('active', style({ opacity: 1 })),
+            state('inactive', style({ opacity: 0 })),
+            transition('void => active', style({ opacity: 0 })),
+            transition('inactive => active', style({ opacity: 1 })),
+            transition('active => inactive', animate('1s 2s ease-out'))
+        ])
+    ] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FileListSingleItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    animations: [
+                        trigger('progressState', [
+                            state('active', style({ opacity: 1 })),
+                            state('inactive', style({ opacity: 0 })),
+                            transition('void => active', style({ opacity: 0 })),
+                            transition('inactive => active', style({ opacity: 1 })),
+                            transition('active => inactive', animate('1s 2s ease-out'))
+                        ])
+                    ],
+                    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
+                }"
+          >{{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: [{
+                type: Input
+            }], file: [{
+                type: Input
+            }], fileInfoTemplate: [{
+                type: Input
+            }] } });