@progress/kendo-angular-upload
Version:
Kendo UI Angular Upload Component
222 lines (215 loc) • 8.8 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 { 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 { ButtonComponent } from '@progress/kendo-angular-buttons';
import { NgIf } from '@angular/common';
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";
/**
* @hidden
*/
export class FileListItemActionButtonComponent {
uploadService;
localization;
navigation;
file;
disabled;
progress;
retrySVGIcon = arrowRotateCwSmallIcon;
playSVGIcon = playSmIcon;
pauseSVGIcon = pauseSmIcon;
cancelSVGIcon = cancelIcon;
deleteSVGIcon = xIcon;
constructor(uploadService, localization, navigation) {
this.uploadService = uploadService;
this.localization = localization;
this.navigation = navigation;
}
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;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FileListItemActionButtonComponent, deps: [{ token: i1.UploadService }, { token: i2.LocalizationService }, { token: i3.NavigationService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FileListItemActionButtonComponent, isStandalone: true, 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"
kendoButton
type="button"
class="k-upload-action k-retry"
fillMode="flat"
[attr.tabIndex]="-1"
[attr.aria-hidden]="true"
[attr.title]="retryButtonTitle"
[svgIcon]="retrySVGIcon"
icon="refresh-sm"
(pointerdown)="$event.preventDefault()"
(click)="onRetryClick()"
></button>
<button
*ngIf="isResumable"
kendoButton
type="button"
class="k-upload-action"
fillMode="flat"
[attr.tabIndex]="-1"
[attr.aria-hidden]="true"
[attr.title]="pauseResumeButtonTitle"
[svgIcon]="isPaused ? playSVGIcon : pauseSVGIcon"
[icon]="isPaused ? 'play-sm' : 'pause-sm'"
(pointerdown)="$event.preventDefault()"
(click)="onPauseResumeClick()"
></button>
<button
*ngIf="isActionButtonVisible"
kendoButton
class="k-upload-action"
[class.k-delete]="!isUploading"
fillMode="flat"
type="button"
[attr.tabIndex]="-1"
[attr.aria-hidden]="true"
[attr.title]="actionButtonTitle"
[svgIcon]="isUploading ? cancelSVGIcon : deleteSVGIcon"
[icon]="isUploading ? 'cancel' : 'x'"
(click)="onRemoveCancelClick($event)"
></button>
</span>
`, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", 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"
kendoButton
type="button"
class="k-upload-action k-retry"
fillMode="flat"
[attr.tabIndex]="-1"
[attr.aria-hidden]="true"
[attr.title]="retryButtonTitle"
[svgIcon]="retrySVGIcon"
icon="refresh-sm"
(pointerdown)="$event.preventDefault()"
(click)="onRetryClick()"
></button>
<button
*ngIf="isResumable"
kendoButton
type="button"
class="k-upload-action"
fillMode="flat"
[attr.tabIndex]="-1"
[attr.aria-hidden]="true"
[attr.title]="pauseResumeButtonTitle"
[svgIcon]="isPaused ? playSVGIcon : pauseSVGIcon"
[icon]="isPaused ? 'play-sm' : 'pause-sm'"
(pointerdown)="$event.preventDefault()"
(click)="onPauseResumeClick()"
></button>
<button
*ngIf="isActionButtonVisible"
kendoButton
class="k-upload-action"
[class.k-delete]="!isUploading"
fillMode="flat"
type="button"
[attr.tabIndex]="-1"
[attr.aria-hidden]="true"
[attr.title]="actionButtonTitle"
[svgIcon]="isUploading ? cancelSVGIcon : deleteSVGIcon"
[icon]="isUploading ? 'cancel' : 'x'"
(click)="onRemoveCancelClick($event)"
></button>
</span>
`,
standalone: true,
imports: [NgIf, ButtonComponent]
}]
}], ctorParameters: function () { return [{ type: i1.UploadService }, { type: i2.LocalizationService }, { type: i3.NavigationService }]; }, propDecorators: { file: [{
type: Input
}], disabled: [{
type: Input
}], progress: [{
type: Input
}] } });