@progress/kendo-angular-upload
Version:
Kendo UI Angular Upload Component
116 lines (115 loc) • 5.12 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 { 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";
/**
* @hidden
*/
export class FileListItemDirective {
navigationService;
uploadService;
files;
index;
fileClass = true;
focused = false;
element;
constructor(el, navigationService, uploadService) {
this.navigationService = navigationService;
this.uploadService = uploadService;
this.element = el;
}
focus() {
this.element.nativeElement.focus();
}
get uidAttribute() {
return this.files[0].uid;
}
get tabIndex() {
return this.navigationService.focusedFileIndex === this.index ? '0' : '-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)) || !!event.target.closest('.k-upload-action')) {
this.navigationService.focusedIndex = this.navigationService.focusedFileIndex = this.index;
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FileListItemDirective, deps: [{ token: i0.ElementRef }, { token: i1.NavigationService }, { token: i2.UploadService }], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: FileListItemDirective, isStandalone: true, 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: "16.2.12", ngImport: i0, type: FileListItemDirective, decorators: [{
type: Directive,
args: [{
selector: '[kendoUploadFileListItem]',
standalone: true
}]
}], 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-focus']
}], onFocus: [{
type: HostListener,
args: ['focus']
}], onBlur: [{
type: HostListener,
args: ['blur']
}], onClick: [{
type: HostListener,
args: ['click', ['$event']]
}] } });