@progress/kendo-angular-upload
Version:
Kendo UI Angular Upload Component
182 lines (181 loc) • 9.13 kB
JavaScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2025 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 { fileGroupClass, isPresent, fileSVGGroupIcon } from '../common/util';
import { FileInfoTemplateDirective } from '../templates/file-info-template.directive';
import { animate, state, style, transition, trigger } from '@angular/animations';
import { FileListItemActionButtonComponent } from './file-list-item-action-button.component';
import { NgClass, NgTemplateOutlet } from '@angular/common';
import { IconWrapperComponent } from '@progress/kendo-angular-icons';
import { ProgressBarComponent } from '@progress/kendo-angular-progressbar';
import * as i0 from "@angular/core";
import * as i1 from "@progress/kendo-angular-l10n";
import * as i2 from "../upload.service";
/**
* @hidden
*/
export class FileListSingleItemComponent extends FileListItemBase {
localization;
disabled;
file;
fileInfoTemplate;
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 fileGroupClass(this.file.extension);
}
get fileSVGGroupIcon() {
return fileSVGGroupIcon(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;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FileListSingleItemComponent, deps: [{ token: i1.LocalizationService }, { token: i2.UploadService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: FileListSingleItemComponent, isStandalone: true, 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">
<kendo-icon-wrapper
size="xxlarge"
[name]="fileGroupClass"
[svgIcon]="fileSVGGroupIcon"
innerCssClass="k-file-icon"
>
</kendo-icon-wrapper>
</span>
<span class="k-file-info">
@if (!fileInfoTemplate) {
<span class="k-file-name" [title]="file.name">{{ file.name }}</span>
<span [attr.aria-live]="'polite'" [ngClass]="{
'k-file-validation-message': file.validationErrors,
'k-file-size': !file.validationErrors && isNotYetUploaded,
'k-file-summary': isUploadSuccessful || isUploadFailed
}"
>{{fileStatusText}}</span>
}
@if (fileInfoTemplate) {
<ng-container [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, dependencies: [{ kind: "component", type: ProgressBarComponent, selector: "kendo-progressbar", inputs: ["label", "progressCssStyle", "progressCssClass", "emptyCssStyle", "emptyCssClass", "animation"], outputs: ["animationEnd"], exportAs: ["kendoProgressBar"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: FileListItemActionButtonComponent, selector: "kendo-upload-file-list-item-action-button", inputs: ["file", "disabled", "progress"] }], 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: "18.2.14", 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: `
<kendo-progressbar
[@progressState]="showProgress"
[value]="progressComplete"
[label]="{ visible: false }"
>
</kendo-progressbar>
<span class="k-file-icon-wrapper">
<kendo-icon-wrapper
size="xxlarge"
[name]="fileGroupClass"
[svgIcon]="fileSVGGroupIcon"
innerCssClass="k-file-icon"
>
</kendo-icon-wrapper>
</span>
<span class="k-file-info">
@if (!fileInfoTemplate) {
<span class="k-file-name" [title]="file.name">{{ file.name }}</span>
<span [attr.aria-live]="'polite'" [ngClass]="{
'k-file-validation-message': file.validationErrors,
'k-file-size': !file.validationErrors && isNotYetUploaded,
'k-file-summary': isUploadSuccessful || isUploadFailed
}"
>{{fileStatusText}}</span>
}
@if (fileInfoTemplate) {
<ng-container [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>
`,
standalone: true,
imports: [ProgressBarComponent, IconWrapperComponent, NgClass, NgTemplateOutlet, FileListItemActionButtonComponent]
}]
}], ctorParameters: () => [{ type: i1.LocalizationService }, { type: i2.UploadService }], propDecorators: { disabled: [{
type: Input
}], file: [{
type: Input
}], fileInfoTemplate: [{
type: Input
}] } });