@progress/kendo-angular-upload 21.4.1 → 22.0.0-develop.1

package/esm2022/rendering/file-list-item.mjs

@@ -1,115 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2026 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: "18.2.14", 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: "18.2.14", 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: "18.2.14", ngImport: i0, type: FileListItemDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[kendoUploadFileListItem]',
-                    standalone: true
-                }]
-        }], ctorParameters: () => [{ 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']]
-            }] } });

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

@@ -1,201 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2026 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 { 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 FileListMultipleItemsComponent extends FileListItemBase {
-    localization;
-    disabled;
-    files;
-    fileInfoTemplate;
-    filesHaveErrors;
-    copySVGIcon = copyIcon;
-    constructor(localization, uploadService) {
-        super(uploadService);
-        this.localization = localization;
-        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;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FileListMultipleItemsComponent, deps: [{ token: i1.LocalizationService }, { token: i2.UploadService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: FileListMultipleItemsComponent, isStandalone: true, 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"
-            size="xxlarge"
-            [svgIcon]="copySVGIcon"
-            innerCssClass="k-file-icon"
-            >
-          </kendo-icon-wrapper>
-        </span>
-        <span class="k-multiple-files-wrapper">
-          @if (!fileInfoTemplate) {
-            @for (file of files; track file) {
-              <span class="k-file-info">
-                <span [title]="file.name" class="k-file-name">
-                  {{file.name}}
-                </span>
-                    <span [attr.aria-live]="'polite'" [ngClass]="{
-                        'k-file-validation-message': file.validationErrors,
-                        'k-file-size': !file.validationErrors
-                        }"
-                >{{fileStatusText(file)}}</span>
-              </span>
-            }
-            <span class="k-file-summary"
-            >{{batchStatusText}}</span>
-          }
-          @if (fileInfoTemplate) {
-            <ng-container
-              [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, 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: 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"
-            size="xxlarge"
-            [svgIcon]="copySVGIcon"
-            innerCssClass="k-file-icon"
-            >
-          </kendo-icon-wrapper>
-        </span>
-        <span class="k-multiple-files-wrapper">
-          @if (!fileInfoTemplate) {
-            @for (file of files; track file) {
-              <span class="k-file-info">
-                <span [title]="file.name" class="k-file-name">
-                  {{file.name}}
-                </span>
-                    <span [attr.aria-live]="'polite'" [ngClass]="{
-                        'k-file-validation-message': file.validationErrors,
-                        'k-file-size': !file.validationErrors
-                        }"
-                >{{fileStatusText(file)}}</span>
-              </span>
-            }
-            <span class="k-file-summary"
-            >{{batchStatusText}}</span>
-          }
-          @if (fileInfoTemplate) {
-            <ng-container
-              [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>
-        `,
-                    standalone: true,
-                    imports: [ProgressBarComponent, IconWrapperComponent, NgClass, NgTemplateOutlet, FileListItemActionButtonComponent]
-                }]
-        }], ctorParameters: () => [{ type: i1.LocalizationService }, { type: i2.UploadService }], propDecorators: { disabled: [{
-                type: Input
-            }], files: [{
-                type: Input
-            }], fileInfoTemplate: [{
-                type: Input
-            }] } });

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

@@ -1,181 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2026 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
-            }] } });