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

package/{esm2015/package-metadata.js → esm2020/package-metadata.mjs}

@@ -1,5 +1,5 @@
 /**-----------------------------------------------------------------------------------------
-* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 /**
@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-upload',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1668699030,
+    publishDate: 1673510538,
     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'
+    licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };

package/{esm2015/kendo-angular-upload.js → esm2020/progress-kendo-angular-upload.mjs}

@@ -1,8 +1,8 @@
 /**-----------------------------------------------------------------------------------------
-* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 /**
  * Generated bundle index. Do not edit.
  */
-export * from './main';
+export * from './index';

package/esm2020/rendering/file-list-item-action-button.component.mjs

@@ -0,0 +1,262 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 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 { arrowRotateCwSmallIcon, cancelIcon, pauseSmIcon, playSmIcon, xIcon } from '@progress/kendo-svg-icons';
+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 "@progress/kendo-angular-icons";
+import * as i5 from "@angular/common";
+/**
+ * @hidden
+ */
+export class FileListItemActionButtonComponent {
+    constructor(uploadService, localization, navigation) {
+        this.uploadService = uploadService;
+        this.localization = localization;
+        this.navigation = navigation;
+        this.actionFocused = false;
+        this.retryFocused = false;
+        this.pauseResumeFocused = false;
+        this.retrySVGIcon = arrowRotateCwSmallIcon;
+        this.playSVGIcon = playSmIcon;
+        this.pauseSVGIcon = pauseSmIcon;
+        this.cancelSVGIcon = cancelIcon;
+        this.deleteSVGIcon = xIcon;
+    }
+    onFocus(type) {
+        if (type === 'action') {
+            this.actionFocused = true;
+        }
+        if (type === 'retry') {
+            this.retryFocused = true;
+        }
+        if (type === 'pauseResume') {
+            this.pauseResumeFocused = true;
+        }
+    }
+    onBlur(type) {
+        if (type === 'retry') {
+            this.retryFocused = false;
+        }
+        if (type === 'action') {
+            this.actionFocused = false;
+        }
+        if (type === 'pauseResume') {
+            this.pauseResumeFocused = false;
+        }
+    }
+    onRetryClick() {
+        if (this.disabled) {
+            return;
+        }
+        this.uploadService.retryFiles(this.file.uid);
+    }
+    onRemoveCancelClick(event) {
+        if (this.disabled) {
+            return;
+        }
+        event.stopImmediatePropagation();
+        const uid = this.file.uid;
+        if (this.file.state === FileState.Uploading) {
+            this.uploadService.cancelFiles(uid);
+        }
+        else {
+            this.uploadService.removeFiles(uid);
+        }
+        this.navigation.focusSelectButton();
+    }
+    onPauseResumeClick() {
+        if (this.disabled) {
+            return;
+        }
+        const uid = this.file.uid;
+        if (this.file.state === FileState.Paused) {
+            this.uploadService.resumeFile(uid);
+        }
+        else {
+            this.uploadService.pauseFile(uid);
+        }
+    }
+    get actionButtonTitle() {
+        if (this.file.state === FileState.Uploading) {
+            return this.localization.get('cancel');
+        }
+        return this.localization.get('remove');
+    }
+    get retryButtonTitle() {
+        return this.localization.get('retry');
+    }
+    get pauseResumeButtonTitle() {
+        if (this.file.state === FileState.Uploading) {
+            return this.localization.get('pause');
+        }
+        return this.localization.get('resume');
+    }
+    get isUploading() {
+        return this.file.state === FileState.Uploading;
+    }
+    get isFailed() {
+        return this.file.state === FileState.Failed;
+    }
+    get isPaused() {
+        return this.file.state === FileState.Paused;
+    }
+    get isResumable() {
+        const service = this.uploadService;
+        const isResumable = service.async.chunk && service.chunk.resumable;
+        const isUploading = (this.file.state === FileState.Paused) || (this.file.state === FileState.Uploading);
+        return isResumable && isUploading;
+    }
+    get isActionButtonVisible() {
+        if ((this.file.state === FileState.Uploaded || this.file.state === FileState.Initial) &&
+            !this.uploadService.async.removeUrl && this.uploadService.component === 'Upload') {
+            return false;
+        }
+        return true;
+    }
+}
+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
+            *ngIf="isFailed"
+            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.retryFocused }"
+            [attr.tabIndex]="-1"
+
+            (focus)="onFocus('retry')"
+            (blur)="onBlur('retry')"
+            (click)="onRetryClick()"
+        >
+            <kendo-icon-wrapper
+                name="refresh-sm"
+                [svgIcon]="retrySVGIcon"
+                innerCssClass="k-retry"
+                [attr.aria-label]="retryButtonTitle"
+                [attr.title]="retryButtonTitle"
+            ></kendo-icon-wrapper>
+        </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()"
+        >
+            <kendo-icon-wrapper
+                [name]="isPaused ? 'play-sm' : 'pause-sm'"
+                [svgIcon]="isPaused ? playSVGIcon : pauseSVGIcon"
+                [attr.aria-label]='pauseResumeButtonTitle'
+                [attr.title]='pauseResumeButtonTitle'
+            ></kendo-icon-wrapper>
+        </button>
+
+        <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"
+            type="button"
+            [attr.tabIndex]="-1"
+            (focus)="onFocus('action')"
+            (blur)="onBlur('action')"
+            [ngClass]="{ 'k-focus': this.actionFocused }"
+            (click)="onRemoveCancelClick($event)"
+        >
+            <kendo-icon-wrapper
+                [name]="isUploading ? 'cancel' : 'x'"
+                [svgIcon]="isUploading ? cancelSVGIcon : deleteSVGIcon"
+                [innerCssClass]="!isUploading ? 'k-delete' : ''"
+                [attr.aria-label]='actionButtonTitle'
+                [attr.title]='actionButtonTitle'
+            ></kendo-icon-wrapper>
+        </button>
+    </span>
+    `, isInline: true, components: [{ type: i4.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+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: `
+    <span class="k-upload-actions">
+        <span class="k-upload-pct" *ngIf="isUploading || isPaused">{{progress}}%</span>
+
+        <button
+            *ngIf="isFailed"
+            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.retryFocused }"
+            [attr.tabIndex]="-1"
+
+            (focus)="onFocus('retry')"
+            (blur)="onBlur('retry')"
+            (click)="onRetryClick()"
+        >
+            <kendo-icon-wrapper
+                name="refresh-sm"
+                [svgIcon]="retrySVGIcon"
+                innerCssClass="k-retry"
+                [attr.aria-label]="retryButtonTitle"
+                [attr.title]="retryButtonTitle"
+            ></kendo-icon-wrapper>
+        </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()"
+        >
+            <kendo-icon-wrapper
+                [name]="isPaused ? 'play-sm' : 'pause-sm'"
+                [svgIcon]="isPaused ? playSVGIcon : pauseSVGIcon"
+                [attr.aria-label]='pauseResumeButtonTitle'
+                [attr.title]='pauseResumeButtonTitle'
+            ></kendo-icon-wrapper>
+        </button>
+
+        <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"
+            type="button"
+            [attr.tabIndex]="-1"
+            (focus)="onFocus('action')"
+            (blur)="onBlur('action')"
+            [ngClass]="{ 'k-focus': this.actionFocused }"
+            (click)="onRemoveCancelClick($event)"
+        >
+            <kendo-icon-wrapper
+                [name]="isUploading ? 'cancel' : 'x'"
+                [svgIcon]="isUploading ? cancelSVGIcon : deleteSVGIcon"
+                [innerCssClass]="!isUploading ? 'k-delete' : ''"
+                [attr.aria-label]='actionButtonTitle'
+                [attr.title]='actionButtonTitle'
+            ></kendo-icon-wrapper>
+        </button>
+    </span>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i1.UploadService }, { type: i2.LocalizationService }, { type: i3.NavigationService }]; }, propDecorators: { file: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], progress: [{
+                type: Input
+            }] } });

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 © 2023 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 © 2023 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/esm2020/rendering/file-list-multiple-items.component.mjs

@@ -0,0 +1,186 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 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 { 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 { copyIcon } from '@progress/kendo-svg-icons';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-l10n";
+import * as i2 from "../upload.service";
+import * as i3 from "@progress/kendo-angular-progressbar";
+import * as i4 from "@progress/kendo-angular-icons";
+import * as i5 from "./file-list-item-action-button.component";
+import * as i6 from "@angular/common";
+import * as i7 from "@progress/kendo-angular-buttons";
+import * as i8 from "../templates/template-context.directive";
+/**
+ * @hidden
+ */
+export class FileListMultipleItemsComponent extends FileListItemBase {
+    constructor(localization, uploadService) {
+        super(uploadService);
+        this.localization = localization;
+        this.copySVGIcon = copyIcon;
+        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: "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">
+            <kendo-icon-wrapper
+                name="copy"
+                [svgIcon]="copySVGIcon"
+                innerCssClass="k-file-icon"
+            >
+            </kendo-icon-wrapper>
+        </span>
+        <span class="k-multiple-files-wrapper">
+            <ng-container *ngIf="!fileInfoTemplate">
+            <span *ngFor="let file of files" class="k-file-info">
+                <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-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.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: i5.FileListItemActionButtonComponent, selector: "kendo-upload-file-list-item-action-button", inputs: ["file", "disabled", "progress"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i8.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: "13.3.11", 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: `
+        <kendo-progressbar
+            [@progressState]="showProgress"
+            [value]="progressComplete"
+            [label]="{ visible: false }"
+        >
+        </kendo-progressbar>
+        <span class="k-file-icon-wrapper">
+            <kendo-icon-wrapper
+                name="copy"
+                [svgIcon]="copySVGIcon"
+                innerCssClass="k-file-icon"
+            >
+            </kendo-icon-wrapper>
+        </span>
+        <span class="k-multiple-files-wrapper">
+            <ng-container *ngIf="!fileInfoTemplate">
+            <span *ngFor="let file of files" class="k-file-info">
+                <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-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: [{
+                type: Input
+            }], files: [{
+                type: Input
+            }], fileInfoTemplate: [{
+                type: Input
+            }] } });