@progress/kendo-angular-upload 11.1.0-develop.2 → 11.1.0-develop.4

package/esm2020/fileselect.component.mjs

@@ -140,7 +140,9 @@ export class FileSelectComponent {
         return this.direction;
     }
     ngOnInit() {
-        this.renderer.removeAttribute(this.wrapper, "tabindex");
+        const { buttonId, inputId } = this.getIds();
+        this.focusableId = buttonId;
+        this.inputElementId = inputId;
         if (this.zoneId) {
             this.dropZoneService.addComponent(this, this.zoneId);
         }
@@ -154,14 +156,6 @@ export class FileSelectComponent {
             this.subs.add(this.renderer.listen(this.wrapper, 'keydown', event => this.handleKeydown(event)));
         });
     }
-    ngAfterViewInit() {
-        const { buttonId, inputId } = this.getIds();
-        const button = this.fileSelectButton.nativeElement;
-        const input = this.fileSelectInput.nativeElement;
-        this.renderer.setAttribute(button, 'id', buttonId);
-        this.renderer.setAttribute(button, 'aria-controls', inputId);
-        this.renderer.setAttribute(input, 'id', inputId);
-    }
     /**
      * @hidden
      */
@@ -410,7 +404,8 @@ FileSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
                 role="button"
                 [id]="focusableId"
                 [attr.aria-label]="textFor('select')"
-                [attr.tabindex]="selectButtonTabIndex"
+                [attr.tabindex]="tabindex"
+                [attr.aria-controls]="inputElementId"
                 (focus)="onFileSelectButtonFocus($event)"
                 (blur)="onFileSelectButtonBlur($event)"
             >
@@ -419,6 +414,7 @@ FileSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
             <input
                 #fileSelectInput
                 kendoFileSelect
+                [id]="inputElementId"
                 [attr.accept]="accept ? accept : null"
                 [attr.aria-hidden]="true"
                 [dir]="direction"
@@ -491,7 +487,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 role="button"
                 [id]="focusableId"
                 [attr.aria-label]="textFor('select')"
-                [attr.tabindex]="selectButtonTabIndex"
+                [attr.tabindex]="tabindex"
+                [attr.aria-controls]="inputElementId"
                 (focus)="onFileSelectButtonFocus($event)"
                 (blur)="onFileSelectButtonBlur($event)"
             >
@@ -500,6 +497,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             <input
                 #fileSelectInput
                 kendoFileSelect
+                [id]="inputElementId"
                 [attr.accept]="accept ? accept : null"
                 [attr.aria-hidden]="true"
                 [dir]="direction"
@@ -540,10 +538,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }], fileTemplate: [{
                 type: ContentChild,
-                args: [FileTemplateDirective, { static: false }]
+                args: [FileTemplateDirective]
             }], fileInfoTemplate: [{
                 type: ContentChild,
-                args: [FileInfoTemplateDirective, { static: false }]
+                args: [FileInfoTemplateDirective]
             }], fileSelectInput: [{
                 type: ViewChild,
                 args: ['fileSelectInput', { static: true }]

package/esm2020/index.mjs

@@ -18,7 +18,6 @@ export { FileListItemActionButtonComponent } from './rendering/file-list-item-ac
 export { FileListMultipleItemsComponent } from './rendering/file-list-multiple-items.component';
 export { FileTemplateDirective } from './templates/file-template.directive';
 export { FileInfoTemplateDirective } from './templates/file-info-template.directive';
-export { TemplateContextDirective } from './templates/template-context.directive';
 export { UploadStatusTotalComponent } from './rendering/upload-status-total.component';
 export { UploadActionButtonsComponent } from './rendering/upload-action-buttons.component';
 export { UploadDropZoneDirective } from './dropzone-external.directive';

package/esm2020/package-metadata.mjs

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-upload',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1674229054,
-    version: '11.1.0-develop.2',
+    publishDate: 1674490316,
+    version: '11.1.0-develop.4',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };

package/esm2020/rendering/file-list-multiple-items.component.mjs

@@ -18,8 +18,6 @@ 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
  */
@@ -84,33 +82,34 @@ FileListMultipleItemsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
         </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 *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 [ngClass]="{
-                    'k-file-validation-message': file.validationErrors,
-                    'k-file-size': !file.validationErrors
-                    }"
-                >{{fileStatusText(file)}}</span>
-            </span>
-            <span class="k-file-summary"
-            >{{batchStatusText}}</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>
+            <ng-container 
+                *ngIf="fileInfoTemplate"
+                [ngTemplateOutlet]="fileInfoTemplate.templateRef"
+                [ngTemplateOutletContext]="{
+                    templateRef: fileInfoTemplate.templateRef,
+                    state: files[0].state,
+                    $implicit: files
+                }"></ng-container>
         </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: [
+    `, 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: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], animations: [
         trigger('progressState', [
             state('active', style({ opacity: 1 })),
             state('inactive', style({ opacity: 0 })),
@@ -149,26 +148,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
         </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 *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 [ngClass]="{
-                    'k-file-validation-message': file.validationErrors,
-                    'k-file-size': !file.validationErrors
-                    }"
-                >{{fileStatusText(file)}}</span>
-            </span>
-            <span class="k-file-summary"
-            >{{batchStatusText}}</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>
+            <ng-container 
+                *ngIf="fileInfoTemplate"
+                [ngTemplateOutlet]="fileInfoTemplate.templateRef"
+                [ngTemplateOutletContext]="{
+                    templateRef: fileInfoTemplate.templateRef,
+                    state: files[0].state,
+                    $implicit: files
+                }"></ng-container>
         </span>
         <kendo-upload-file-list-item-action-button
             [file]='files[0]'

package/esm2020/rendering/file-list-single-item.component.mjs

@@ -19,8 +19,6 @@ 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
  */
@@ -93,28 +91,26 @@ FileListSingleItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
         </span>
         <span class="k-file-info">
             <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>
+                <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>
+            <ng-container *ngIf="fileInfoTemplate" [ngTemplateOutlet]="fileInfoTemplate.templateRef" [ngTemplateOutletContext]="{
+                    templateRef: fileInfoTemplate.templateRef,
+                    state: file.state,
+                    $implicit: [file]
+                }"></ng-container>
         </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.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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i8.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }], animations: [
+    `, 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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], animations: [
         trigger('progressState', [
             state('active', style({ opacity: 1 })),
             state('inactive', style({ opacity: 0 })),
@@ -153,21 +149,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
         </span>
         <span class="k-file-info">
             <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>
+                <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>
+            <ng-container *ngIf="fileInfoTemplate" [ngTemplateOutlet]="fileInfoTemplate.templateRef" [ngTemplateOutletContext]="{
+                    templateRef: fileInfoTemplate.templateRef,
+                    state: file.state,
+                    $implicit: [file]
+                }"></ng-container>
         </span>
         <kendo-upload-file-list-item-action-button
             [file]='file'

package/esm2020/rendering/file-list.component.mjs

@@ -18,8 +18,6 @@ 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 "@progress/kendo-angular-buttons";
-import * as i8 from "../templates/template-context.directive";
 /**
  * @hidden
  */
@@ -74,66 +72,62 @@ export class FileListComponent {
 }
 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
-      let-index="index">
-      <li kendoUploadFileListItem [files]='files' [index]='index'>
-          <kendo-upload-file-list-single-item
-            class='k-file-single'
-            *ngIf='files.length === 1 && !fileTemplate'
-            [disabled]='disabled'
-            [file]='files[0]'
-            [fileInfoTemplate]="fileInfoTemplate">
-          </kendo-upload-file-list-single-item>
-          <kendo-upload-file-list-multiple-items
-            class='k-file-multiple'
-            *ngIf='files.length > 1 && !fileTemplate'
-            [disabled]='disabled'
-            [files]='files'
-            [fileInfoTemplate]="fileInfoTemplate">
-          </kendo-upload-file-list-multiple-items>
-          <ng-template *ngIf="fileTemplate"
-              [templateContext]="{
-                templateRef: fileTemplate.templateRef,
-                state: files[0].state,
-                $implicit: files
-              }"></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"] }, { type: i8.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }] });
+        <ng-template ngFor
+            [ngForOf]="fileList"
+            let-files
+            let-index="index">
+            <li kendoUploadFileListItem [files]='files' [index]='index'>
+                <kendo-upload-file-list-single-item
+                    class='k-file-single'
+                    *ngIf='files.length === 1 && !fileTemplate'
+                    [disabled]='disabled'
+                    [file]='files[0]'
+                    [fileInfoTemplate]="fileInfoTemplate"></kendo-upload-file-list-single-item>
+                <kendo-upload-file-list-multiple-items
+                    class='k-file-multiple'
+                    *ngIf='files.length > 1 && !fileTemplate'
+                    [disabled]='disabled'
+                    [files]='files'
+                    [fileInfoTemplate]="fileInfoTemplate"></kendo-upload-file-list-multiple-items>
+                <ng-container
+                    *ngIf="fileTemplate" [ngTemplateOutlet]="fileTemplate.templateRef" [ngTemplateOutletContext]="{
+                            templateRef: fileTemplate.templateRef,
+                            state: files[0].state,
+                            $implicit: files
+                        }"></ng-container>
+            </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: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FileListComponent, decorators: [{
             type: Component,
             args: [{
                     selector: '[kendo-upload-file-list]',
                     template: `
-    <ng-template ngFor
-      [ngForOf]="fileList"
-      let-files
-      let-index="index">
-      <li kendoUploadFileListItem [files]='files' [index]='index'>
-          <kendo-upload-file-list-single-item
-            class='k-file-single'
-            *ngIf='files.length === 1 && !fileTemplate'
-            [disabled]='disabled'
-            [file]='files[0]'
-            [fileInfoTemplate]="fileInfoTemplate">
-          </kendo-upload-file-list-single-item>
-          <kendo-upload-file-list-multiple-items
-            class='k-file-multiple'
-            *ngIf='files.length > 1 && !fileTemplate'
-            [disabled]='disabled'
-            [files]='files'
-            [fileInfoTemplate]="fileInfoTemplate">
-          </kendo-upload-file-list-multiple-items>
-          <ng-template *ngIf="fileTemplate"
-              [templateContext]="{
-                templateRef: fileTemplate.templateRef,
-                state: files[0].state,
-                $implicit: files
-              }"></ng-template>
-      </li>
-    </ng-template>
+        <ng-template ngFor
+            [ngForOf]="fileList"
+            let-files
+            let-index="index">
+            <li kendoUploadFileListItem [files]='files' [index]='index'>
+                <kendo-upload-file-list-single-item
+                    class='k-file-single'
+                    *ngIf='files.length === 1 && !fileTemplate'
+                    [disabled]='disabled'
+                    [file]='files[0]'
+                    [fileInfoTemplate]="fileInfoTemplate"></kendo-upload-file-list-single-item>
+                <kendo-upload-file-list-multiple-items
+                    class='k-file-multiple'
+                    *ngIf='files.length > 1 && !fileTemplate'
+                    [disabled]='disabled'
+                    [files]='files'
+                    [fileInfoTemplate]="fileInfoTemplate"></kendo-upload-file-list-multiple-items>
+                <ng-container
+                    *ngIf="fileTemplate" [ngTemplateOutlet]="fileTemplate.templateRef" [ngTemplateOutletContext]="{
+                            templateRef: fileTemplate.templateRef,
+                            state: files[0].state,
+                            $implicit: files
+                        }"></ng-container>
+            </li>
+        </ng-template>
     `
                 }]
         }], ctorParameters: function () { return [{ type: i1.UploadService }, { type: i2.NavigationService }]; }, propDecorators: { disabled: [{

package/esm2020/shared.module.mjs

@@ -15,7 +15,6 @@ import { FileListSingleItemComponent } from './rendering/file-list-single-item.c
 import { FileSelectDirective } from './file-select.directive';
 import { FileTemplateDirective } from './templates/file-template.directive';
 import { LocalizedMessagesDirective } from './localization/localized-messages.directive';
-import { TemplateContextDirective } from './templates/template-context.directive';
 import { UploadDropZoneDirective } from './dropzone-external.directive';
 import { UploadDropZoneComponent } from './dropzone.component';
 import { ButtonsModule } from '@progress/kendo-angular-buttons';
@@ -33,8 +32,7 @@ export const SHARED_DECLARATIONS = [
     FileListMultipleItemsComponent,
     FileListSingleItemComponent,
     FileSelectDirective,
-    LocalizedMessagesDirective,
-    TemplateContextDirective
+    LocalizedMessagesDirective
 ];
 /**
  * @hidden
@@ -63,8 +61,7 @@ SharedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "
         FileListMultipleItemsComponent,
         FileListSingleItemComponent,
         FileSelectDirective,
-        LocalizedMessagesDirective,
-        TemplateContextDirective], imports: [CommonModule, ButtonsModule, ProgressBarModule, IconsModule], exports: [FileTemplateDirective,
+        LocalizedMessagesDirective], imports: [CommonModule, ButtonsModule, ProgressBarModule, IconsModule], exports: [FileTemplateDirective,
         FileInfoTemplateDirective,
         CustomMessagesComponent,
         UploadDropZoneDirective,
@@ -75,8 +72,7 @@ SharedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "
         FileListMultipleItemsComponent,
         FileListSingleItemComponent,
         FileSelectDirective,
-        LocalizedMessagesDirective,
-        TemplateContextDirective, CommonModule,
+        LocalizedMessagesDirective, CommonModule,
         ButtonsModule] });
 SharedModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SharedModule, imports: [[CommonModule, ButtonsModule, ProgressBarModule, IconsModule], CommonModule,
         ButtonsModule] });