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

package/esm2022/upload.component.mjs

@@ -1,901 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2026 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the project root for more information
-*-------------------------------------------------------------------------------------------*/
-/* eslint-disable @typescript-eslint/no-unused-vars */
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { HttpHeaders } from '@angular/common/http';
-import { Component, ElementRef, EventEmitter, forwardRef, HostBinding, Input, NgZone, Output, Renderer2, ViewChild, isDevMode, ChangeDetectorRef, Injector } from '@angular/core';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { isDocumentAvailable, KendoInput, Keys, isChanged } from '@progress/kendo-angular-common';
-import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
-import { fromEvent, merge } from 'rxjs';
-import { filter } from 'rxjs/operators';
-import { validatePackage } from '@progress/kendo-licensing';
-import { packageMetadata } from './package-metadata';
-import { FileState } from './types';
-import { NavigationService } from './navigation.service';
-import { UploadService } from './upload.service';
-import { hasClasses, IGNORE_TARGET_CLASSES, isFocusable, UPLOAD_CLASSES, validateInitialFileInfo } from './common/util';
-import { DropZoneService } from './dropzone.service';
-import { UploadFileSelectBase } from './common/base';
-import { UploadActionButtonsComponent } from './rendering/upload-action-buttons.component';
-import { FileListComponent } from './rendering/file-list.component';
-import { UploadStatusTotalComponent } from './rendering/upload-status-total.component';
-import { FileSelectDirective } from './file-select.directive';
-import { ButtonComponent } from '@progress/kendo-angular-buttons';
-import { DropZoneInternalDirective } from './dropzone-internal.directive';
-import { LocalizedMessagesDirective } from './localization/localized-messages.directive';
-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";
-import * as i4 from "./dropzone.service";
-/**
- * @hidden
- */
-export const UPLOAD_VALUE_ACCESSOR = {
-    multi: true,
-    provide: NG_VALUE_ACCESSOR,
-    useExisting: forwardRef(() => UploadComponent)
-};
-let idx = 0;
-/**
- * Represents the [Kendo UI Upload component for Angular]({% slug overview_upload %}).
- *
- * @example
- * ```html
- * <kendo-upload
- *    [saveUrl]="uploadSaveUrl"
- *    [removeUrl]="uploadRemoveUrl">
- * </kendo-upload>
- * ```
- *
- * @remarks
- * Supported children components are: {@link CustomMessagesComponent}
- */
-export class UploadComponent extends UploadFileSelectBase {
-    uploadService;
-    localization;
-    navigation;
-    dropZoneService;
-    zone;
-    renderer;
-    cdr;
-    injector;
-    /**
-     * Specifies whether selected files upload automatically
-     * ([see example]({% slug fileprocessing_upload %}#toc-automatic-upload-of-files)).
-     * Set `autoUpload` to `false` to change this behavior.
-     *
-     * @default true
-     */
-    set autoUpload(autoUpload) {
-        this.uploadService.async.autoUpload = autoUpload;
-    }
-    get autoUpload() {
-        return this.uploadService.async.autoUpload;
-    }
-    /**
-     * Specifies whether all files in the selection upload in a single request
-     * ([see example]({% slug fileprocessing_upload %}#toc-upload-of-batches-of-files)).
-     * Files selected one after the other upload in separate requests.
-     *
-     * @default false
-     */
-    set batch(batch) {
-        this.uploadService.async.batch = batch;
-    }
-    get batch() {
-        return this.uploadService.async.batch;
-    }
-    /**
-     * Specifies whether credentials (cookies, headers) are sent for cross-site requests
-     * ([see example]({% slug credentials_upload %}#toc-attaching-credentials-to-requests)).
-     * Set `withCredentials` has no effect on same-site requests.
-     * Use the `saveHeaders` or `removeHeaders` property to add credentials to the request.
-     * You can also use the [`upload`]({% slug api_upload_uploadevent %}) event.
-     *
-     * @default true
-     */
-    set withCredentials(withCredentials) {
-        this.uploadService.async.withCredentials = withCredentials;
-    }
-    get withCredentials() {
-        return this.uploadService.async.withCredentials;
-    }
-    /**
-     * Specifies the [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) key which contains the files submitted to `saveUrl`.
-     *
-     */
-    set saveField(saveField) {
-        this.uploadService.async.saveField = saveField;
-    }
-    get saveField() {
-        return this.uploadService.async.saveField;
-    }
-    /**
-     * Specifies the [`HttpHeaders`](https://angular.io/api/common/http/HttpHeaders) attached to each upload request.
-     */
-    set saveHeaders(saveHeaders) {
-        this.uploadService.async.saveHeaders = saveHeaders;
-    }
-    get saveHeaders() {
-        return this.uploadService.async.saveHeaders;
-    }
-    /**
-     * Specifies the [`RequestMethod`](https://angular.io/api/http/RequestMethod) of the upload request.
-     *
-     */
-    set saveMethod(saveMethod) {
-        this.uploadService.async.saveMethod = saveMethod;
-    }
-    get saveMethod() {
-        return this.uploadService.async.saveMethod;
-    }
-    /**
-     * Specifies the URL of the endpoint for the upload request.
-     * The request [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) key uses the name from the `saveField` property.
-     * This key contains the list of files to be uploaded.
-     */
-    set saveUrl(saveUrl) {
-        this.uploadService.async.saveUrl = saveUrl;
-    }
-    get saveUrl() {
-        return this.uploadService.async.saveUrl;
-    }
-    /**
-     * Specifies the expected [`response type`](https://angular.io/api/common/http/HttpRequest#responseType) of the server.
-     * The response type determines how the response is parsed.
-     *
-     * @default 'json'
-     */
-    set responseType(responseType) {
-        this.uploadService.async.responseType = responseType;
-    }
-    get responseType() {
-        return this.uploadService.async.responseType;
-    }
-    /**
-     * Specifies the [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) key which contains the list of file names submitted to `removeUrl`.
-     *
-     */
-    set removeField(removeField) { this.uploadService.async.removeField = removeField; }
-    get removeField() { return this.uploadService.async.removeField; }
-    /**
-     * Specifies the [`HttpHeaders`](https://angular.io/api/common/http/HttpHeaders) attached to each `remove` request.
-     */
-    set removeHeaders(removeHeaders) {
-        this.uploadService.async.removeHeaders = removeHeaders;
-    }
-    get removeHeaders() {
-        return this.uploadService.async.removeHeaders;
-    }
-    /**
-     * Specifies the [`RequestMethod`](https://angular.io/api/http/RequestMethod) of the `remove` request.
-     *
-     */
-    set removeMethod(removeMethod) {
-        this.uploadService.async.removeMethod = removeMethod;
-    }
-    get removeMethod() {
-        return this.uploadService.async.removeMethod;
-    }
-    /**
-     * Specifies the URL of the endpoint for the `remove` request.
-     * The [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) request key uses the name from the `removeField` property.
-     * This key contains the list of file names to be removed.
-     */
-    set removeUrl(removeUrl) {
-        this.uploadService.async.removeUrl = removeUrl;
-    }
-    get removeUrl() {
-        return this.uploadService.async.removeUrl;
-    }
-    /**
-     * Specifies whether the chunk functionality of the Upload is enabled.
-     *
-     * @default false
-     */
-    chunkable = false;
-    /**
-     * Specifies whether selected files upload simultaneously or one by one.
-     *
-     * @default true
-     */
-    set concurrent(concurrent) {
-        this.uploadService.async.concurrent = concurrent;
-    }
-    get concurrent() {
-        return this.uploadService.async.concurrent;
-    }
-    /**
-     * Specifies whether the file list is visible.
-     *
-     * @default true
-     */
-    showFileList = true;
-    /**
-     * @hidden
-     */
-    set tabIndex(tabIndex) {
-        this.tabindex = tabIndex;
-    }
-    get tabIndex() {
-        return this.tabindex;
-    }
-    /**
-     * Specifies the layout of the action buttons.
-     *
-     * @default 'end'
-     */
-    actionsLayout = 'end';
-    fileSelectInput;
-    /**
-     * Fires when the upload is canceled while in progress.
-     */
-    cancel = new EventEmitter();
-    /**
-     * Fires when the file list is about to be cleared.
-     * Prevent this event to keep the files in the list.
-     */
-    clear = new EventEmitter();
-    /**
-     * Fires when all active uploads complete successfully or with errors.
-     */
-    complete = new EventEmitter();
-    /**
-     * Fires when an `upload` or `remove` operation fails.
-     */
-    error = new EventEmitter();
-    /**
-     * Fires when the upload of a file is paused.
-     */
-    pause = new EventEmitter();
-    /**
-     * Fires when the upload of a file is resumed.
-     */
-    resume = new EventEmitter();
-    /**
-     * Fires when an `upload` or `remove` operation completes successfully.
-     */
-    success = new EventEmitter();
-    /**
-     * Fires when one or more files are about to be uploaded.
-     * Prevent this event to stop the files from uploading and being added to the file list.
-     */
-    upload = new EventEmitter();
-    /**
-     * Fires when one or more files are uploading.
-     */
-    uploadProgress = new EventEmitter();
-    /**
-     * Fires when the component value changes after a successful `upload`, `remove`, or `clear` operation.
-     */
-    valueChange = new EventEmitter();
-    get dir() {
-        return this.direction;
-    }
-    direction;
-    wrapper;
-    fileListId;
-    documentClick;
-    blurSubscription;
-    wrapperFocusSubscription;
-    selectButtonFocusSubscription;
-    localizationChangeSubscription;
-    subs;
-    constructor(uploadService, localization, navigation, dropZoneService, zone, renderer, cdr, wrapper, injector) {
-        super(uploadService, navigation, cdr, injector, zone);
-        this.uploadService = uploadService;
-        this.localization = localization;
-        this.navigation = navigation;
-        this.dropZoneService = dropZoneService;
-        this.zone = zone;
-        this.renderer = renderer;
-        this.cdr = cdr;
-        this.injector = injector;
-        validatePackage(packageMetadata);
-        this.fileList = this.uploadService.files;
-        this.localizationChangeSubscription = localization.changes.subscribe(({ rtl }) => {
-            this.direction = rtl ? 'rtl' : 'ltr';
-        });
-        this.direction = localization.rtl ? 'rtl' : 'ltr';
-        this.navigation.computeKeys();
-        this.wrapper = wrapper.nativeElement;
-        this.subscribeBlur();
-        this.subscribeFocus();
-        this.attachEventHandlers();
-    }
-    ngOnInit() {
-        this.verifySettings();
-        const { buttonId, fileListId } = this.getIds();
-        this.focusableId = buttonId;
-        this.fileListId = fileListId;
-        this.uploadService.setChunkSettings(this.chunkable);
-        if (this.zoneId) {
-            this.dropZoneService.addComponent(this, this.zoneId);
-        }
-        this.zone.runOutsideAngular(() => {
-            this.subs.add(this.renderer.listen(this.wrapper, 'keydown', event => this.handleKeydown(event)));
-        });
-    }
-    ngOnChanges(changes) {
-        if (isChanged("chunkable", changes)) {
-            const newChunkable = changes.chunkable.currentValue;
-            if (typeof newChunkable === 'boolean') {
-                this.uploadService.async.chunk = newChunkable;
-            }
-            if (typeof newChunkable === "object" && newChunkable !== null) {
-                this.uploadService.async.chunk = true;
-                this.uploadService.chunk = Object.assign({}, this.uploadService.chunk, newChunkable);
-            }
-        }
-    }
-    ngOnDestroy() {
-        this.fileList.clear();
-        if (this.zoneId) {
-            this.dropZoneService.clearComponent(this, this.zoneId);
-        }
-        if (this.blurSubscription) {
-            this.blurSubscription.unsubscribe();
-        }
-        if (this.wrapperFocusSubscription) {
-            this.wrapperFocusSubscription.unsubscribe();
-        }
-        if (this.selectButtonFocusSubscription) {
-            this.selectButtonFocusSubscription.unsubscribe();
-        }
-        if (this.localizationChangeSubscription) {
-            this.localizationChangeSubscription.unsubscribe();
-        }
-        if (this.subs) {
-            this.subs.unsubscribe();
-        }
-    }
-    /**
-     * @hidden
-     */
-    writeValue(newValue) {
-        super.writeValue(newValue, validateInitialFileInfo, 'addInitialFiles');
-    }
-    /**
-     * @hidden
-     */
-    get showActionButtons() {
-        let areVisible = false;
-        if (!this.autoUpload) {
-            const hasFilesToUpload = this.fileList.filesToUpload.length > 0;
-            const uploadingFiles = this.fileList.hasFileWithState([FileState.Uploading]);
-            if (this.concurrent && hasFilesToUpload) {
-                areVisible = true;
-            }
-            if (!this.concurrent && hasFilesToUpload && !uploadingFiles) {
-                areVisible = true;
-            }
-        }
-        this.navigation.actionButtonsVisible = areVisible;
-        return areVisible;
-    }
-    /**
-     * @hidden
-     */
-    get showTotalStatus() {
-        const states = [
-            FileState.Uploaded,
-            FileState.Uploading,
-            FileState.Failed,
-            FileState.Paused
-        ];
-        if (this.fileList.hasFileWithState(states)) {
-            return true;
-        }
-        return false;
-    }
-    /**
-     * @hidden
-     */
-    textFor(key) {
-        return this.localization.get(key);
-    }
-    /**
-     * @hidden
-     */
-    getIds() {
-        const id = ++idx;
-        const buttonId = `k-upload-button-${id}`;
-        const fileListId = `k-upload-file-list-${id}`;
-        return { buttonId, fileListId };
-    }
-    /**
-     * Pauses the upload process of a file that is currently uploading.
-     * This method requires the `chunkable` option of the Upload to be enabled.
-     *
-     * @param uid The `uid` of the file that will be paused.
-     */
-    pauseFileByUid(uid) {
-        this.uploadService.pauseFile(uid);
-    }
-    /**
-     * Resumes the upload process for a file that was previously paused.
-     * This method requires the `chunkable` option of the Upload to be enabled.
-     *
-     * @param uid The `uid` of the file that will be resumed.
-     */
-    resumeFileByUid(uid) {
-        this.uploadService.resumeFile(uid);
-    }
-    /**
-     * Removes a file or a batch of files.
-     *
-     * @param uid The `uid` of the file or a batch of files that will be removed.
-     */
-    removeFilesByUid(uid) {
-        this.uploadService.removeFiles(uid);
-    }
-    /**
-     * Retries the upload of a file or batch of files that failed to upload.
-     *
-     * @param uid The `uid` of the file or a batch of files to be retried.
-     */
-    retryUploadByUid(uid) {
-        this.uploadService.retryFiles(uid);
-    }
-    /**
-     * Cancels the upload of a file or a batch of files.
-     *
-     * @param uid The `uid` of the file or a batch of files that will be canceled.
-     */
-    cancelUploadByUid(uid) {
-        this.uploadService.cancelFiles(uid);
-    }
-    /**
-     * Uploads the currently selected files that pass the set restrictions.
-     */
-    uploadFiles() {
-        if (this.fileList.filesToUpload.length) {
-            this.uploadService.uploadFiles();
-        }
-    }
-    /**
-     * Clears all files from the UI without sending requests to the remove handler.
-     */
-    clearFiles() {
-        this.uploadService.clearFiles();
-    }
-    /**
-     * @hidden
-     * Used by the external dropzone to add files to the Upload
-     */
-    addFiles(files) {
-        this.uploadService.addFiles(files);
-    }
-    /**
-     * @hidden
-     * Used to determine if the component is empty.
-     */
-    isEmpty() {
-        return false;
-    }
-    verifySettings() {
-        if (isDevMode()) {
-            if (this.batch && this.chunkable !== false) {
-                throw new Error('The file chunking functionality requires the batch setting to be disabled.');
-            }
-        }
-    }
-    subscribeBlur() {
-        if (!isDocumentAvailable()) {
-            return;
-        }
-        this.zone.runOutsideAngular(() => {
-            this.documentClick = fromEvent(document, 'click').pipe(filter((event) => {
-                return !(this.wrapper !== event.target && this.wrapper.contains(event.target));
-            }));
-            this.blurSubscription = merge(this.documentClick, this.navigation.onTabOut).subscribe(() => {
-                if (this.navigation.focused) {
-                    this.zone.run(() => {
-                        this.navigation.focused = false;
-                        this.onTouchedCallback();
-                        this.onBlur.emit();
-                    });
-                }
-            });
-        });
-    }
-    handleKeydown(event) {
-        if (this.disabled) {
-            return;
-        }
-        if (event.target === this.fileSelectButton.nativeElement && (event.code === Keys.Enter || event.code === Keys.Space)) {
-            event.preventDefault();
-            this.fileSelectInput.nativeElement.click();
-            return;
-        }
-        if (hasClasses(event.target, UPLOAD_CLASSES) ||
-            (!isFocusable(event.target) && !hasClasses(event.target, IGNORE_TARGET_CLASSES))) {
-            this.navigation.process(event);
-        }
-    }
-    subscribeFocus() {
-        this.wrapperFocusSubscription = this.navigation.onWrapperFocus.subscribe(() => {
-            this.onFocus.emit();
-        });
-        this.selectButtonFocusSubscription = this.navigation.onSelectButtonFocus.subscribe(() => {
-            this.fileSelectButton.nativeElement.focus();
-        });
-    }
-    attachEventHandlers() {
-        this.subs = this.uploadService.cancelEvent.subscribe((args) => {
-            this.cancel.emit(args);
-        });
-        this.subs.add(this.uploadService.changeEvent.subscribe((files) => {
-            this.onChangeCallback(files);
-            this.valueChange.emit(files);
-        }));
-        this.subs.add(this.uploadService.clearEvent.subscribe((args) => {
-            this.clear.emit(args);
-        }));
-        this.subs.add(this.uploadService.completeEvent.subscribe(() => {
-            this.complete.emit();
-        }));
-        this.subs.add(this.uploadService.errorEvent.subscribe((args) => {
-            this.error.emit(args);
-        }));
-        this.subs.add(this.uploadService.pauseEvent.subscribe((args) => {
-            this.pause.emit(args);
-        }));
-        this.subs.add(this.uploadService.removeEvent.subscribe((args) => {
-            this.remove.emit(args);
-        }));
-        this.subs.add(this.uploadService.resumeEvent.subscribe((args) => {
-            this.resume.emit(args);
-        }));
-        this.subs.add(this.uploadService.selectEvent.subscribe((args) => {
-            this.select.emit(args);
-        }));
-        this.subs.add(this.uploadService.successEvent.subscribe((args) => {
-            this.success.emit(args);
-        }));
-        this.subs.add(this.uploadService.uploadEvent.subscribe((args) => {
-            this.upload.emit(args);
-        }));
-        this.subs.add(this.uploadService.uploadProgressEvent.subscribe((args) => {
-            this.uploadProgress.emit(args);
-        }));
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: UploadComponent, deps: [{ token: i1.UploadService }, { token: i2.LocalizationService }, { token: i3.NavigationService }, { token: i4.DropZoneService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: UploadComponent, isStandalone: true, selector: "kendo-upload", inputs: { autoUpload: "autoUpload", batch: "batch", withCredentials: "withCredentials", saveField: "saveField", saveHeaders: "saveHeaders", saveMethod: "saveMethod", saveUrl: "saveUrl", responseType: "responseType", removeField: "removeField", removeHeaders: "removeHeaders", removeMethod: "removeMethod", removeUrl: "removeUrl", chunkable: "chunkable", concurrent: "concurrent", showFileList: "showFileList", tabIndex: "tabIndex", actionsLayout: "actionsLayout" }, outputs: { cancel: "cancel", clear: "clear", complete: "complete", error: "error", pause: "pause", resume: "resume", success: "success", upload: "upload", uploadProgress: "uploadProgress", valueChange: "valueChange" }, host: { properties: { "attr.dir": "this.dir" } }, providers: [
-            LocalizationService,
-            NavigationService,
-            UploadService,
-            DropZoneService,
-            UPLOAD_VALUE_ACCESSOR,
-            {
-                provide: L10N_PREFIX,
-                useValue: 'kendo.upload'
-            },
-            {
-                provide: KendoInput,
-                useExisting: forwardRef(() => UploadComponent)
-            }
-        ], viewQueries: [{ propertyName: "fileSelectInput", first: true, predicate: ["fileSelectInput"], descendants: true, static: true }], exportAs: ["kendoUpload"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
-    <ng-container kendoUploadLocalizedMessages
-      i18n-cancel="kendo.upload.cancel|The text for the Cancel button"
-      cancel="Cancel"
-    
-      i18n-clearSelectedFiles="kendo.upload.clearSelectedFiles|The text for the Clear button"
-      clearSelectedFiles="Clear"
-    
-      i18n-dropFilesHere="kendo.upload.dropFilesHere|The drop zone hint"
-      dropFilesHere="Drop files here to upload"
-    
-      i18n-filesBatchStatus="kendo.upload.filesBatchStatus|The status message for a batch of files"
-      filesBatchStatus="files"
-    
-      i18n-filesBatchStatusFailed="kendo.upload.filesBatchStatusFailed|The status message for a batch of files after failed upload"
-      filesBatchStatusFailed="files failed to upload."
-    
-      i18n-filesBatchStatusUploaded="kendo.upload.filesBatchStatusUploaded|The status message for a batch of files after successful upload"
-      filesBatchStatusUploaded="files successfully uploaded."
-    
-      i18n-fileStatusFailed="kendo.upload.fileStatusFailed|The file status message after failed upload"
-      fileStatusFailed="File failed to upload."
-    
-      i18n-fileStatusUploaded="kendo.upload.fileStatusUploaded|The file status message after successful upload"
-      fileStatusUploaded="File successfully uploaded."
-    
-      i18n-headerStatusPaused="kendo.upload.headerStatusPaused|The header status message when the file upload is paused"
-      headerStatusPaused="Paused"
-    
-      i18n-headerStatusUploaded="kendo.upload.headerStatusUploaded|The header status message after file upload completion"
-      headerStatusUploaded="Done"
-    
-      i18n-headerStatusUploading="kendo.upload.headerStatusUploading|The header status message during file upload"
-      headerStatusUploading="Uploading..."
-    
-      i18n-invalidFileExtension="kendo.upload.invalidFileExtension|The text for the invalid allowed extensions restriction message"
-      invalidFileExtension="File type not allowed."
-    
-      i18n-invalidMaxFileSize="kendo.upload.invalidMaxFileSize|The text for the invalid max file size restriction message"
-      invalidMaxFileSize="File size too large."
-    
-      i18n-invalidMinFileSize="kendo.upload.invalidMinFileSize|The text for the invalid min file size restriction message"
-      invalidMinFileSize="File size too small."
-    
-      i18n-pause="kendo.upload.pause|The text for the Pause button"
-      pause="Pause"
-    
-      i18n-remove="kendo.upload.remove|The text for the Remove button"
-      remove="Remove"
-    
-      i18n-resume="kendo.upload.resume|The text for the Resume button"
-      resume="Resume"
-    
-      i18n-retry="kendo.upload.retry|The text for the Retry button"
-      retry="Retry"
-    
-      i18n-select="kendo.upload.select|The text for the Select button"
-      select="Select files..."
-    
-      i18n-uploadSelectedFiles="kendo.upload.uploadSelectedFiles|The text for the Upload files button"
-      uploadSelectedFiles="Upload"
-      >
-    </ng-container>
-    <div kendoUploadInternalDropZone
-      [restrictions]="restrictions"
-      [multiple]="multiple"
-      [disabled]="disabled"
-      >
-      <div class="k-upload-button-wrap">
-        <button
-          kendoButton
-          #fileSelectButton
-          class="k-upload-button"
-          type="button"
-          (click)="fileSelectInput.click()"
-          (focus)="onFileSelectButtonFocus()"
-          [id]="focusableId"
-          [attr.aria-label]="textFor('select')"
-          [attr.tabindex]="tabindex"
-          [attr.aria-expanded]="hasFileList"
-          [attr.aria-controls]="hasFileList ? fileListId : undefined"
-          >
-          {{textFor('select')}}
-        </button>
-        <input kendoFileSelect #fileSelectInput
-          [dir]="direction"
-          [accept]="accept"
-          [restrictions]="restrictions"
-          [multiple]="multiple"
-          [disabled]="disabled"
-          [required]="isControlRequired" />
-      </div>
-      @if (showTotalStatus) {
-        <kendo-upload-status-total
-          class="k-upload-status"
-          [fileList]="fileList">
-        </kendo-upload-status-total>
-      }
-      <div class="k-dropzone-hint">{{textFor('dropFilesHere')}}</div>
-    </div>
-    @if (hasFileList) {
-      <ul kendo-upload-file-list
-        class="k-upload-files k-reset"
-        [disabled]="disabled"
-        [fileList]="fileList.files"
-        [fileTemplate]="fileTemplate"
-        [fileInfoTemplate]="fileInfoTemplate"
-        [id]="fileListId">
-      </ul>
-    }
-    @if (showActionButtons) {
-      <kendo-upload-action-buttons
-        [disabled]="disabled"
-        [actionsLayout]="actionsLayout">
-      </kendo-upload-action-buttons>
-    }
-    `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n    [kendoUploadLocalizedMessages],\n    [kendoFileSelectLocalizedMessages],\n    [kendoUploadDropZoneLocalizedMessages]\n  " }, { kind: "directive", type: DropZoneInternalDirective, selector: "\n      [kendoUploadInternalDropZone],\n      [kendoFileSelectInternalDropZone]\n    ", inputs: ["disabled", "multiple", "restrictions"] }, { 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"] }, { kind: "directive", type: FileSelectDirective, selector: "[kendoFileSelect]", inputs: ["dir", "disabled", "multiple", "restrictions", "accept", "required"] }, { kind: "component", type: UploadStatusTotalComponent, selector: "kendo-upload-status-total", inputs: ["fileList"] }, { kind: "component", type: FileListComponent, selector: "[kendo-upload-file-list]", inputs: ["disabled", "fileList", "fileTemplate", "fileInfoTemplate"] }, { kind: "component", type: UploadActionButtonsComponent, selector: "kendo-upload-action-buttons", inputs: ["disabled", "actionsLayout"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: UploadComponent, decorators: [{
-            type: Component,
-            args: [{
-                    exportAs: 'kendoUpload',
-                    providers: [
-                        LocalizationService,
-                        NavigationService,
-                        UploadService,
-                        DropZoneService,
-                        UPLOAD_VALUE_ACCESSOR,
-                        {
-                            provide: L10N_PREFIX,
-                            useValue: 'kendo.upload'
-                        },
-                        {
-                            provide: KendoInput,
-                            useExisting: forwardRef(() => UploadComponent)
-                        }
-                    ],
-                    selector: 'kendo-upload',
-                    template: `
-    <ng-container kendoUploadLocalizedMessages
-      i18n-cancel="kendo.upload.cancel|The text for the Cancel button"
-      cancel="Cancel"
-    
-      i18n-clearSelectedFiles="kendo.upload.clearSelectedFiles|The text for the Clear button"
-      clearSelectedFiles="Clear"
-    
-      i18n-dropFilesHere="kendo.upload.dropFilesHere|The drop zone hint"
-      dropFilesHere="Drop files here to upload"
-    
-      i18n-filesBatchStatus="kendo.upload.filesBatchStatus|The status message for a batch of files"
-      filesBatchStatus="files"
-    
-      i18n-filesBatchStatusFailed="kendo.upload.filesBatchStatusFailed|The status message for a batch of files after failed upload"
-      filesBatchStatusFailed="files failed to upload."
-    
-      i18n-filesBatchStatusUploaded="kendo.upload.filesBatchStatusUploaded|The status message for a batch of files after successful upload"
-      filesBatchStatusUploaded="files successfully uploaded."
-    
-      i18n-fileStatusFailed="kendo.upload.fileStatusFailed|The file status message after failed upload"
-      fileStatusFailed="File failed to upload."
-    
-      i18n-fileStatusUploaded="kendo.upload.fileStatusUploaded|The file status message after successful upload"
-      fileStatusUploaded="File successfully uploaded."
-    
-      i18n-headerStatusPaused="kendo.upload.headerStatusPaused|The header status message when the file upload is paused"
-      headerStatusPaused="Paused"
-    
-      i18n-headerStatusUploaded="kendo.upload.headerStatusUploaded|The header status message after file upload completion"
-      headerStatusUploaded="Done"
-    
-      i18n-headerStatusUploading="kendo.upload.headerStatusUploading|The header status message during file upload"
-      headerStatusUploading="Uploading..."
-    
-      i18n-invalidFileExtension="kendo.upload.invalidFileExtension|The text for the invalid allowed extensions restriction message"
-      invalidFileExtension="File type not allowed."
-    
-      i18n-invalidMaxFileSize="kendo.upload.invalidMaxFileSize|The text for the invalid max file size restriction message"
-      invalidMaxFileSize="File size too large."
-    
-      i18n-invalidMinFileSize="kendo.upload.invalidMinFileSize|The text for the invalid min file size restriction message"
-      invalidMinFileSize="File size too small."
-    
-      i18n-pause="kendo.upload.pause|The text for the Pause button"
-      pause="Pause"
-    
-      i18n-remove="kendo.upload.remove|The text for the Remove button"
-      remove="Remove"
-    
-      i18n-resume="kendo.upload.resume|The text for the Resume button"
-      resume="Resume"
-    
-      i18n-retry="kendo.upload.retry|The text for the Retry button"
-      retry="Retry"
-    
-      i18n-select="kendo.upload.select|The text for the Select button"
-      select="Select files..."
-    
-      i18n-uploadSelectedFiles="kendo.upload.uploadSelectedFiles|The text for the Upload files button"
-      uploadSelectedFiles="Upload"
-      >
-    </ng-container>
-    <div kendoUploadInternalDropZone
-      [restrictions]="restrictions"
-      [multiple]="multiple"
-      [disabled]="disabled"
-      >
-      <div class="k-upload-button-wrap">
-        <button
-          kendoButton
-          #fileSelectButton
-          class="k-upload-button"
-          type="button"
-          (click)="fileSelectInput.click()"
-          (focus)="onFileSelectButtonFocus()"
-          [id]="focusableId"
-          [attr.aria-label]="textFor('select')"
-          [attr.tabindex]="tabindex"
-          [attr.aria-expanded]="hasFileList"
-          [attr.aria-controls]="hasFileList ? fileListId : undefined"
-          >
-          {{textFor('select')}}
-        </button>
-        <input kendoFileSelect #fileSelectInput
-          [dir]="direction"
-          [accept]="accept"
-          [restrictions]="restrictions"
-          [multiple]="multiple"
-          [disabled]="disabled"
-          [required]="isControlRequired" />
-      </div>
-      @if (showTotalStatus) {
-        <kendo-upload-status-total
-          class="k-upload-status"
-          [fileList]="fileList">
-        </kendo-upload-status-total>
-      }
-      <div class="k-dropzone-hint">{{textFor('dropFilesHere')}}</div>
-    </div>
-    @if (hasFileList) {
-      <ul kendo-upload-file-list
-        class="k-upload-files k-reset"
-        [disabled]="disabled"
-        [fileList]="fileList.files"
-        [fileTemplate]="fileTemplate"
-        [fileInfoTemplate]="fileInfoTemplate"
-        [id]="fileListId">
-      </ul>
-    }
-    @if (showActionButtons) {
-      <kendo-upload-action-buttons
-        [disabled]="disabled"
-        [actionsLayout]="actionsLayout">
-      </kendo-upload-action-buttons>
-    }
-    `,
-                    standalone: true,
-                    imports: [LocalizedMessagesDirective, DropZoneInternalDirective, ButtonComponent, FileSelectDirective, UploadStatusTotalComponent, FileListComponent, UploadActionButtonsComponent]
-                }]
-        }], ctorParameters: () => [{ type: i1.UploadService }, { type: i2.LocalizationService }, { type: i3.NavigationService }, { type: i4.DropZoneService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.Injector }], propDecorators: { autoUpload: [{
-                type: Input
-            }], batch: [{
-                type: Input
-            }], withCredentials: [{
-                type: Input
-            }], saveField: [{
-                type: Input
-            }], saveHeaders: [{
-                type: Input
-            }], saveMethod: [{
-                type: Input
-            }], saveUrl: [{
-                type: Input
-            }], responseType: [{
-                type: Input
-            }], removeField: [{
-                type: Input
-            }], removeHeaders: [{
-                type: Input
-            }], removeMethod: [{
-                type: Input
-            }], removeUrl: [{
-                type: Input
-            }], chunkable: [{
-                type: Input
-            }], concurrent: [{
-                type: Input
-            }], showFileList: [{
-                type: Input
-            }], tabIndex: [{
-                type: Input,
-                args: ['tabIndex']
-            }], actionsLayout: [{
-                type: Input
-            }], fileSelectInput: [{
-                type: ViewChild,
-                args: ['fileSelectInput', { static: true }]
-            }], cancel: [{
-                type: Output
-            }], clear: [{
-                type: Output
-            }], complete: [{
-                type: Output
-            }], error: [{
-                type: Output
-            }], pause: [{
-                type: Output
-            }], resume: [{
-                type: Output
-            }], success: [{
-                type: Output
-            }], upload: [{
-                type: Output
-            }], uploadProgress: [{
-                type: Output
-            }], valueChange: [{
-                type: Output
-            }], dir: [{
-                type: HostBinding,
-                args: ['attr.dir']
-            }] } });