@wawjs/ngx-prime 22.0.0

package/fesm2022/wawjs-ngx-prime-fileupload.mjs

@@ -0,0 +1,1964 @@
+export * from '@wawjs/ngx-prime/types/fileupload';
+import * as i1$1 from '@angular/common';
+import { CommonModule, isPlatformBrowser } from '@angular/common';
+import { HttpClient, HttpEventType } from '@angular/common/http';
+import * as i0 from '@angular/core';
+import { Injectable, inject, ElementRef, input, booleanAttribute, numberAttribute, model, output, Directive, DestroyRef, InjectionToken, ChangeDetectionStrategy, Component, contentChild, viewChild, effect, NgZone, contentChildren, ViewChild, ContentChild, ViewEncapsulation, NgModule } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+import { addClass, removeClass } from '@wawjs/css-prime-utils';
+import { TranslationKeys, PrimeTemplate, SharedModule } from '@wawjs/ngx-prime/api';
+import { Badge } from '@wawjs/ngx-prime/badge';
+import { BaseComponent, PARENT_INSTANCE } from '@wawjs/ngx-prime/basecomponent';
+import * as i1 from '@wawjs/ngx-prime/bind';
+import { Bind } from '@wawjs/ngx-prime/bind';
+import { Button } from '@wawjs/ngx-prime/button';
+import { TimesIcon, PlusIcon, UploadIcon } from '@wawjs/ngx-prime/icons';
+import { Message } from '@wawjs/ngx-prime/message';
+import { ProgressBar } from '@wawjs/ngx-prime/progressbar';
+import { style } from '@wawjs/css-prime-styles/fileupload';
+import { BaseStyle } from '@wawjs/ngx-prime/base';
+import { BaseModelHolder } from '@wawjs/ngx-prime/basemodelholder';
+
+const nativeStyle = `
+input[pFileUpload] { cursor: pointer; }
+input[pFileUpload].p-invalid { outline: 1px solid dt('fileupload.invalid.border.color'); outline-offset: 2px; }
+input[pFileUpload]:disabled { cursor: default; opacity: .6; }
+`;
+const classes = {
+    input: 'p-fileupload-input p-component',
+    root: ({ instance }) => `p-fileupload p-fileupload-${instance.mode()} p-component`,
+    header: 'p-fileupload-header',
+    pcChooseButton: 'p-fileupload-choose-button',
+    pcUploadButton: 'p-fileupload-upload-button',
+    pcCancelButton: 'p-fileupload-cancel-button',
+    content: 'p-fileupload-content',
+    fileList: 'p-fileupload-file-list',
+    file: 'p-fileupload-file',
+    fileThumbnail: 'p-fileupload-file-thumbnail',
+    fileInfo: 'p-fileupload-file-info',
+    fileName: 'p-fileupload-file-name',
+    fileSize: 'p-fileupload-file-size',
+    pcFileBadge: 'p-fileupload-file-badge',
+    fileActions: 'p-fileupload-file-actions',
+    pcFileRemoveButton: 'p-fileupload-file-remove-button',
+    basicContent: 'p-fileupload-basic-content'
+};
+class FileUploadStyle extends BaseStyle {
+    name = 'fileupload';
+    style = `${style}\n${nativeStyle}`;
+    classes = classes;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: FileUploadStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: FileUploadStyle });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: FileUploadStyle, decorators: [{
+            type: Injectable
+        }] });
+/**
+ *
+ * FileUpload is an advanced uploader with dragdrop support, multi file uploads, auto uploading, progress tracking and validations.
+ *
+ * [Live Demo](https://www.ngx-prime.org/fileupload/)
+ *
+ * @module fileuploadstyle
+ *
+ */
+var FileUploadClasses;
+(function (FileUploadClasses) {
+    /**
+     * Class name of the root element
+     */
+    FileUploadClasses["root"] = "p-fileupload";
+    /**
+     * Class name of the header element
+     */
+    FileUploadClasses["header"] = "p-fileupload-header";
+    /**
+     * Class name of the choose button element
+     */
+    FileUploadClasses["pcChooseButton"] = "p-fileupload-choose-button";
+    /**
+     * Class name of the upload button element
+     */
+    FileUploadClasses["pcUploadButton"] = "p-fileupload-upload-button";
+    /**
+     * Class name of the cancel button element
+     */
+    FileUploadClasses["pcCancelButton"] = "p-fileupload-cancel-button";
+    /**
+     * Class name of the content element
+     */
+    FileUploadClasses["content"] = "p-fileupload-content";
+    /**
+     * Class name of the file list element
+     */
+    FileUploadClasses["fileList"] = "p-fileupload-file-list";
+    /**
+     * Class name of the file element
+     */
+    FileUploadClasses["file"] = "p-fileupload-file";
+    /**
+     * Class name of the file thumbnail element
+     */
+    FileUploadClasses["fileThumbnail"] = "p-fileupload-file-thumbnail";
+    /**
+     * Class name of the file info element
+     */
+    FileUploadClasses["fileInfo"] = "p-fileupload-file-info";
+    /**
+     * Class name of the file name element
+     */
+    FileUploadClasses["fileName"] = "p-fileupload-file-name";
+    /**
+     * Class name of the file size element
+     */
+    FileUploadClasses["fileSize"] = "p-fileupload-file-size";
+    /**
+     * Class name of the file badge element
+     */
+    FileUploadClasses["pcFileBadge"] = "p-fileupload-file-badge";
+    /**
+     * Class name of the file actions element
+     */
+    FileUploadClasses["fileActions"] = "p-fileupload-file-actions";
+    /**
+     * Class name of the file remove button element
+     */
+    FileUploadClasses["pcFileRemoveButton"] = "p-fileupload-file-remove-button";
+    /**
+     * Class name of the content in basic mode
+     */
+    FileUploadClasses["basicContent"] = "p-fileupload-basic-content";
+})(FileUploadClasses || (FileUploadClasses = {}));
+
+/**
+ * Adds Prime state attributes to a native file input and emits its selected files.
+ * The browser remains responsible for file selection and form integration.
+ *
+ * @group Components
+ */
+class FileUploadDirective extends BaseModelHolder {
+    componentName = 'FileUpload';
+    element = inject(ElementRef);
+    bindDirectiveInstance = inject(Bind, { self: true });
+    _componentStyle = inject(FileUploadStyle);
+    invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    accept = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "accept" }] : /* istanbul ignore next */ []));
+    multiple = input(false, { ...(ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    capture = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "capture" }] : /* istanbul ignore next */ []));
+    webkitdirectory = input(false, { ...(ngDevMode ? { debugName: "webkitdirectory" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    inputId = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "inputId" }] : /* istanbul ignore next */ []));
+    name = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "name" }] : /* istanbul ignore next */ []));
+    tabindex = input(undefined, { ...(ngDevMode ? { debugName: "tabindex" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    autofocus = input(false, { ...(ngDevMode ? { debugName: "autofocus" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    ariaLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    ariaLabelledBy = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "ariaLabelledBy" }] : /* istanbul ignore next */ []));
+    ariaDescribedBy = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "ariaDescribedBy" }] : /* istanbul ignore next */ []));
+    maxFileSize = input(undefined, { ...(ngDevMode ? { debugName: "maxFileSize" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    fileLimit = input(undefined, { ...(ngDevMode ? { debugName: "fileLimit" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    allowDuplicate = input(false, { ...(ngDevMode ? { debugName: "allowDuplicate" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Signal Forms value contract. Browsers only permit this value to be set by user selection. */
+    value = model([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    touch = output();
+    filesSelected = output();
+    onSelect = output();
+    onError = output();
+    onClear = output();
+    onFocus = output();
+    onBlur = output();
+    onAfterViewChecked() {
+        this.bindDirectiveInstance.setAttrs(this.ptm('input'));
+    }
+    onChange(event) {
+        const files = Array.from(this.element.nativeElement.files ?? []);
+        const validationError = this.getValidationError(files);
+        if (validationError) {
+            this.element.nativeElement.value = '';
+            this.value.set([]);
+            this.writeModelValue([]);
+            this.onError.emit({ originalEvent: event, files, reason: validationError });
+            return;
+        }
+        this.value.set(files);
+        this.filesSelected.emit(files);
+        this.writeModelValue(files);
+        this.onSelect.emit({ originalEvent: event, files, currentFiles: files });
+    }
+    clear() {
+        if (this.disabled())
+            return;
+        this.element.nativeElement.value = '';
+        this.value.set([]);
+        this.writeModelValue([]);
+        this.filesSelected.emit([]);
+        this.onClear.emit();
+    }
+    focus(options) {
+        this.element.nativeElement.focus(options);
+    }
+    choose() {
+        if (!this.disabled())
+            this.element.nativeElement.click();
+    }
+    onInputBlur(event) {
+        this.touch.emit();
+        this.onBlur.emit(event);
+    }
+    getValidationError(files) {
+        const fileLimit = this.fileLimit();
+        const maxFileSize = this.maxFileSize();
+        if (fileLimit !== undefined && files.length > fileLimit)
+            return 'fileLimit';
+        if (maxFileSize !== undefined && files.some((file) => file.size > maxFileSize))
+            return 'maxFileSize';
+        if (!this.allowDuplicate() && new Set(files.map((file) => `${file.name}:${file.size}:${file.lastModified}`)).size !== files.length)
+            return 'duplicate';
+        return undefined;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: FileUploadDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.2", type: FileUploadDirective, isStandalone: true, selector: "input[type='file'][pFileUpload]", inputs: { invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, capture: { classPropertyName: "capture", publicName: "capture", isSignal: true, isRequired: false, transformFunction: null }, webkitdirectory: { classPropertyName: "webkitdirectory", publicName: "webkitdirectory", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, maxFileSize: { classPropertyName: "maxFileSize", publicName: "maxFileSize", isSignal: true, isRequired: false, transformFunction: null }, fileLimit: { classPropertyName: "fileLimit", publicName: "fileLimit", isSignal: true, isRequired: false, transformFunction: null }, allowDuplicate: { classPropertyName: "allowDuplicate", publicName: "allowDuplicate", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touch: "touch", filesSelected: "filesSelected", onSelect: "onSelect", onError: "onError", onClear: "onClear", onFocus: "onFocus", onBlur: "onBlur" }, host: { listeners: { "change": "onChange($event)", "focus": "onFocus.emit($event)", "blur": "onInputBlur($event)" }, properties: { "class": "cx('input')", "class.p-invalid": "invalid()", "attr.data-pc-name": "'fileupload'", "attr.data-pc-section": "'input'", "attr.data-p-invalid": "invalid() || null", "attr.aria-label": "ariaLabel() || null", "attr.aria-labelledby": "ariaLabelledBy() || null", "attr.aria-describedby": "ariaDescribedBy() || null", "attr.id": "inputId() || null", "attr.name": "name() || null", "attr.accept": "accept() || null", "multiple": "multiple()", "attr.capture": "capture() || null", "attr.webkitdirectory": "webkitdirectory() || null", "attr.tabindex": "tabindex() ?? null", "autofocus": "autofocus()", "disabled": "disabled()", "required": "required()" } }, providers: [FileUploadStyle], exportAs: ["pFileUpload"], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: FileUploadDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "input[type='file'][pFileUpload]",
+                    standalone: true,
+                    host: {
+                        '[class]': "cx('input')",
+                        '[class.p-invalid]': 'invalid()',
+                        '[attr.data-pc-name]': "'fileupload'",
+                        '[attr.data-pc-section]': "'input'",
+                        '[attr.data-p-invalid]': 'invalid() || null',
+                        '[attr.aria-label]': 'ariaLabel() || null',
+                        '[attr.aria-labelledby]': 'ariaLabelledBy() || null',
+                        '[attr.aria-describedby]': 'ariaDescribedBy() || null',
+                        '[attr.id]': 'inputId() || null',
+                        '[attr.name]': 'name() || null',
+                        '[attr.accept]': 'accept() || null',
+                        '[multiple]': 'multiple()',
+                        '[attr.capture]': 'capture() || null',
+                        '[attr.webkitdirectory]': 'webkitdirectory() || null',
+                        '[attr.tabindex]': 'tabindex() ?? null',
+                        '[autofocus]': 'autofocus()',
+                        '[disabled]': 'disabled()',
+                        '[required]': 'required()',
+                        '(change)': 'onChange($event)',
+                        '(focus)': 'onFocus.emit($event)',
+                        '(blur)': 'onInputBlur($event)'
+                    },
+                    providers: [FileUploadStyle],
+                    hostDirectives: [Bind],
+                    exportAs: 'pFileUpload'
+                }]
+        }], propDecorators: { invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], capture: [{ type: i0.Input, args: [{ isSignal: true, alias: "capture", required: false }] }], webkitdirectory: [{ type: i0.Input, args: [{ isSignal: true, alias: "webkitdirectory", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], tabindex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabindex", required: false }] }], autofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocus", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledBy", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], maxFileSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFileSize", required: false }] }], fileLimit: [{ type: i0.Input, args: [{ isSignal: true, alias: "fileLimit", required: false }] }], allowDuplicate: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowDuplicate", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], touch: [{ type: i0.Output, args: ["touch"] }], filesSelected: [{ type: i0.Output, args: ["filesSelected"] }], onSelect: [{ type: i0.Output, args: ["onSelect"] }], onError: [{ type: i0.Output, args: ["onError"] }], onClear: [{ type: i0.Output, args: ["onClear"] }], onFocus: [{ type: i0.Output, args: ["onFocus"] }], onBlur: [{ type: i0.Output, args: ["onBlur"] }] } });
+/** Clears the selected files of a native `pFileUpload` input. */
+class FileUploadClearDirective {
+    uploader = input.required({ ...(ngDevMode ? { debugName: "uploader" } : /* istanbul ignore next */ {}), alias: 'pFileUploadClear' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: FileUploadClearDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.2", type: FileUploadClearDirective, isStandalone: true, selector: "button[pFileUploadClear]", inputs: { uploader: { classPropertyName: "uploader", publicName: "pFileUploadClear", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "type": "button" }, listeners: { "click": "uploader().clear()" }, properties: { "disabled": "uploader().disabled()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: FileUploadClearDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[pFileUploadClear]',
+                    standalone: true,
+                    host: {
+                        type: 'button',
+                        '[disabled]': 'uploader().disabled()',
+                        '(click)': 'uploader().clear()'
+                    }
+                }]
+        }], propDecorators: { uploader: [{ type: i0.Input, args: [{ isSignal: true, alias: "pFileUploadClear", required: true }] }] } });
+/** Holds an explicit native upload queue and optionally sends it with XMLHttpRequest. */
+class FileUploadQueueDirective {
+    destroyRef = inject(DestroyRef);
+    request;
+    uploader = input.required({ ...(ngDevMode ? { debugName: "uploader" } : /* istanbul ignore next */ {}), alias: 'pFileUploadQueue' });
+    url = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "url" }] : /* istanbul ignore next */ []));
+    method = input('post', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "method" }] : /* istanbul ignore next */ []));
+    name = input('files', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    headers = input({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "headers" }] : /* istanbul ignore next */ []));
+    withCredentials = input(false, { ...(ngDevMode ? { debugName: "withCredentials" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    auto = input(false, { ...(ngDevMode ? { debugName: "auto" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    files = model([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "files" }] : /* istanbul ignore next */ []));
+    uploadedFiles = model([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "uploadedFiles" }] : /* istanbul ignore next */ []));
+    progress = model(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "progress" }] : /* istanbul ignore next */ []));
+    uploading = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "uploading" }] : /* istanbul ignore next */ []));
+    onSelect = output();
+    onBeforeUpload = output();
+    onSend = output();
+    onProgress = output();
+    onUpload = output();
+    onError = output();
+    onRemove = output();
+    onClear = output();
+    ngOnInit() {
+        const subscription = this.uploader().filesSelected.subscribe((files) => this.add(files));
+        this.destroyRef.onDestroy(() => subscription.unsubscribe());
+    }
+    add(files) {
+        if (this.disabled())
+            return;
+        const next = [...this.files()];
+        for (const file of files)
+            if (!next.some((item) => item.name === file.name && item.size === file.size && item.lastModified === file.lastModified))
+                next.push(file);
+        this.files.set(next);
+        this.onSelect.emit(next);
+        if (this.auto() && next.length)
+            this.upload();
+    }
+    remove(file, event) {
+        this.files.set(this.files().filter((item) => item !== file));
+        this.onRemove.emit({ originalEvent: event, file });
+    }
+    clear() {
+        if (this.uploading())
+            this.cancel();
+        this.files.set([]);
+        this.progress.set(0);
+        this.uploader().clear();
+        this.onClear.emit();
+    }
+    choose() {
+        this.uploader().choose();
+    }
+    cancel() {
+        this.request?.abort();
+        this.request = undefined;
+        this.uploading.set(false);
+        this.progress.set(0);
+    }
+    upload() {
+        const files = this.files(), url = this.url();
+        if (!files.length || !url || this.disabled() || this.uploading())
+            return;
+        const formData = new FormData();
+        files.forEach((file) => formData.append(this.name(), file, file.name));
+        this.onBeforeUpload.emit(formData);
+        const request = (this.request = new XMLHttpRequest());
+        request.open(this.method().toUpperCase(), url);
+        request.withCredentials = this.withCredentials();
+        Object.entries(this.headers()).forEach(([key, value]) => request.setRequestHeader(key, value));
+        request.upload.onprogress = (event) => {
+            const progress = event.lengthComputable ? Math.round((event.loaded * 100) / event.total) : 0;
+            this.progress.set(progress);
+            this.onProgress.emit({ originalEvent: event, progress });
+        };
+        request.onload = () => {
+            this.uploading.set(false);
+            if (request.status >= 200 && request.status < 300) {
+                this.uploadedFiles.set([...this.uploadedFiles(), ...files]);
+                this.files.set([]);
+                this.onUpload.emit({ originalEvent: new Event('load'), files });
+            }
+            else
+                this.onError.emit({ originalEvent: new Event('error'), files });
+            this.progress.set(0);
+            this.request = undefined;
+        };
+        request.onerror = () => {
+            this.uploading.set(false);
+            this.onError.emit({ originalEvent: new Event('error'), files });
+            this.request = undefined;
+        };
+        this.uploading.set(true);
+        request.send(formData);
+        this.onSend.emit({ originalEvent: new Event('send'), formData });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: FileUploadQueueDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.2", type: FileUploadQueueDirective, isStandalone: true, selector: "[pFileUploadQueue]", inputs: { uploader: { classPropertyName: "uploader", publicName: "pFileUploadQueue", isSignal: true, isRequired: true, transformFunction: null }, url: { classPropertyName: "url", publicName: "url", isSignal: true, isRequired: false, transformFunction: null }, method: { classPropertyName: "method", publicName: "method", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, headers: { classPropertyName: "headers", publicName: "headers", isSignal: true, isRequired: false, transformFunction: null }, withCredentials: { classPropertyName: "withCredentials", publicName: "withCredentials", isSignal: true, isRequired: false, transformFunction: null }, auto: { classPropertyName: "auto", publicName: "auto", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, files: { classPropertyName: "files", publicName: "files", isSignal: true, isRequired: false, transformFunction: null }, uploadedFiles: { classPropertyName: "uploadedFiles", publicName: "uploadedFiles", isSignal: true, isRequired: false, transformFunction: null }, progress: { classPropertyName: "progress", publicName: "progress", isSignal: true, isRequired: false, transformFunction: null }, uploading: { classPropertyName: "uploading", publicName: "uploading", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { files: "filesChange", uploadedFiles: "uploadedFilesChange", progress: "progressChange", uploading: "uploadingChange", onSelect: "onSelect", onBeforeUpload: "onBeforeUpload", onSend: "onSend", onProgress: "onProgress", onUpload: "onUpload", onError: "onError", onRemove: "onRemove", onClear: "onClear" }, host: { properties: { "attr.data-pc-name": "'fileupload'", "attr.data-pc-section": "'queue'", "attr.aria-busy": "uploading() || null" } }, exportAs: ["pFileUploadQueue"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: FileUploadQueueDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[pFileUploadQueue]', standalone: true, exportAs: 'pFileUploadQueue', host: { '[attr.data-pc-name]': "'fileupload'", '[attr.data-pc-section]': "'queue'", '[attr.aria-busy]': 'uploading() || null' } }]
+        }], propDecorators: { uploader: [{ type: i0.Input, args: [{ isSignal: true, alias: "pFileUploadQueue", required: true }] }], url: [{ type: i0.Input, args: [{ isSignal: true, alias: "url", required: false }] }], method: [{ type: i0.Input, args: [{ isSignal: true, alias: "method", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], headers: [{ type: i0.Input, args: [{ isSignal: true, alias: "headers", required: false }] }], withCredentials: [{ type: i0.Input, args: [{ isSignal: true, alias: "withCredentials", required: false }] }], auto: [{ type: i0.Input, args: [{ isSignal: true, alias: "auto", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], files: [{ type: i0.Input, args: [{ isSignal: true, alias: "files", required: false }] }, { type: i0.Output, args: ["filesChange"] }], uploadedFiles: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadedFiles", required: false }] }, { type: i0.Output, args: ["uploadedFilesChange"] }], progress: [{ type: i0.Input, args: [{ isSignal: true, alias: "progress", required: false }] }, { type: i0.Output, args: ["progressChange"] }], uploading: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploading", required: false }] }, { type: i0.Output, args: ["uploadingChange"] }], onSelect: [{ type: i0.Output, args: ["onSelect"] }], onBeforeUpload: [{ type: i0.Output, args: ["onBeforeUpload"] }], onSend: [{ type: i0.Output, args: ["onSend"] }], onProgress: [{ type: i0.Output, args: ["onProgress"] }], onUpload: [{ type: i0.Output, args: ["onUpload"] }], onError: [{ type: i0.Output, args: ["onError"] }], onRemove: [{ type: i0.Output, args: ["onRemove"] }], onClear: [{ type: i0.Output, args: ["onClear"] }] } });
+class FileUploadChooseDirective {
+    queue = input.required({ ...(ngDevMode ? { debugName: "queue" } : /* istanbul ignore next */ {}), alias: 'pFileUploadChoose' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: FileUploadChooseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.2", type: FileUploadChooseDirective, isStandalone: true, selector: "button[pFileUploadChoose]", inputs: { queue: { classPropertyName: "queue", publicName: "pFileUploadChoose", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "type": "button" }, listeners: { "click": "queue().choose()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: FileUploadChooseDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'button[pFileUploadChoose]', standalone: true, host: { type: 'button', '(click)': 'queue().choose()' } }]
+        }], propDecorators: { queue: [{ type: i0.Input, args: [{ isSignal: true, alias: "pFileUploadChoose", required: true }] }] } });
+class FileUploadUploadDirective {
+    queue = input.required({ ...(ngDevMode ? { debugName: "queue" } : /* istanbul ignore next */ {}), alias: 'pFileUploadUpload' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: FileUploadUploadDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.2", type: FileUploadUploadDirective, isStandalone: true, selector: "button[pFileUploadUpload]", inputs: { queue: { classPropertyName: "queue", publicName: "pFileUploadUpload", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "type": "button" }, listeners: { "click": "queue().upload()" }, properties: { "disabled": "queue().uploading() || !queue().files().length" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: FileUploadUploadDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'button[pFileUploadUpload]', standalone: true, host: { type: 'button', '[disabled]': 'queue().uploading() || !queue().files().length', '(click)': 'queue().upload()' } }]
+        }], propDecorators: { queue: [{ type: i0.Input, args: [{ isSignal: true, alias: "pFileUploadUpload", required: true }] }] } });
+class FileUploadCancelDirective {
+    queue = input.required({ ...(ngDevMode ? { debugName: "queue" } : /* istanbul ignore next */ {}), alias: 'pFileUploadCancel' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: FileUploadCancelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.2", type: FileUploadCancelDirective, isStandalone: true, selector: "button[pFileUploadCancel]", inputs: { queue: { classPropertyName: "queue", publicName: "pFileUploadCancel", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "type": "button" }, listeners: { "click": "queue().cancel()" }, properties: { "disabled": "!queue().uploading()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: FileUploadCancelDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'button[pFileUploadCancel]', standalone: true, host: { type: 'button', '[disabled]': '!queue().uploading()', '(click)': 'queue().cancel()' } }]
+        }], propDecorators: { queue: [{ type: i0.Input, args: [{ isSignal: true, alias: "pFileUploadCancel", required: true }] }] } });
+class FileUploadDropZoneDirective {
+    queue = input.required({ ...(ngDevMode ? { debugName: "queue" } : /* istanbul ignore next */ {}), alias: 'pFileUploadDropZone' });
+    onDragOver(event) {
+        event.preventDefault();
+    }
+    onDrop(event) {
+        event.preventDefault();
+        this.queue().add(Array.from(event.dataTransfer?.files ?? []));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: FileUploadDropZoneDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.2", type: FileUploadDropZoneDirective, isStandalone: true, selector: "[pFileUploadDropZone]", inputs: { queue: { classPropertyName: "queue", publicName: "pFileUploadDropZone", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "dragover": "onDragOver($event)", "drop": "onDrop($event)" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: FileUploadDropZoneDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[pFileUploadDropZone]', standalone: true, host: { '(dragover)': 'onDragOver($event)', '(drop)': 'onDrop($event)' } }]
+        }], propDecorators: { queue: [{ type: i0.Input, args: [{ isSignal: true, alias: "pFileUploadDropZone", required: true }] }] } });
+
+const FILEUPLOAD_INSTANCE = new InjectionToken('FILEUPLOAD_INSTANCE');
+class FileContent extends BaseComponent {
+    _componentStyle = inject(FileUploadStyle);
+    $pcFileUpload = inject(FILEUPLOAD_INSTANCE);
+    onRemove = output();
+    files = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "files" }] : /* istanbul ignore next */ []));
+    badgeSeverity = input('warn', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "badgeSeverity" }] : /* istanbul ignore next */ []));
+    badgeValue = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "badgeValue" }] : /* istanbul ignore next */ []));
+    previewWidth = input(50, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "previewWidth" }] : /* istanbul ignore next */ []));
+    fileRemoveIconTemplate = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "fileRemoveIconTemplate" }] : /* istanbul ignore next */ []));
+    onRemoveClick(event, index) {
+        this.onRemove.emit({ event, index });
+    }
+    formatSize(bytes) {
+        const k = 1024;
+        const dm = 3;
+        const sizes = this.config.getTranslation(TranslationKeys.FILE_SIZE_TYPES);
+        if (bytes === 0) {
+            return `0 ${sizes[0]}`;
+        }
+        const i = Math.floor(Math.log(bytes) / Math.log(k));
+        const formattedSize = (bytes / Math.pow(k, i)).toFixed(dm);
+        return `${formattedSize} ${sizes[i]}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: FileContent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: FileContent, isStandalone: true, selector: "[pFileContent]", inputs: { files: { classPropertyName: "files", publicName: "files", isSignal: true, isRequired: false, transformFunction: null }, badgeSeverity: { classPropertyName: "badgeSeverity", publicName: "badgeSeverity", isSignal: true, isRequired: false, transformFunction: null }, badgeValue: { classPropertyName: "badgeValue", publicName: "badgeValue", isSignal: true, isRequired: false, transformFunction: null }, previewWidth: { classPropertyName: "previewWidth", publicName: "previewWidth", isSignal: true, isRequired: false, transformFunction: null }, fileRemoveIconTemplate: { classPropertyName: "fileRemoveIconTemplate", publicName: "fileRemoveIconTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onRemove: "onRemove" }, providers: [FileUploadStyle], usesInheritance: true, ngImport: i0, template: `@for (file of files(); track file?.name + '-' + $index; let index = $index) {
+        <div [class]="cx('file')" [pBind]="$pcFileUpload.ptm('file')">
+            <img role="presentation" [class]="cx('fileThumbnail')" [attr.alt]="file.name" [src]="file.objectURL" [width]="previewWidth()" [pBind]="$pcFileUpload.ptm('fileThumbnail')" />
+            <div [class]="cx('fileInfo')" [pBind]="$pcFileUpload.ptm('fileInfo')">
+                <div [class]="cx('fileName')" [pBind]="$pcFileUpload.ptm('fileName')">{{ file.name }}</div>
+                <span [class]="cx('fileSize')" [pBind]="$pcFileUpload.ptm('fileSize')">{{ formatSize(file.size) }}</span>
+            </div>
+            <p-badge [value]="badgeValue()" [severity]="badgeSeverity()" [class]="cx('pcFileBadge')" [pt]="$pcFileUpload.ptm('pcFileBadge')" [unstyled]="unstyled()" />
+            <div [class]="cx('fileActions')" [pBind]="$pcFileUpload.ptm('fileActions')">
+                <p-button (onClick)="onRemoveClick($event, index)" [styleClass]="cx('pcFileRemoveButton')" text rounded severity="danger" [pt]="$pcFileUpload.ptm('pcFileRemoveButton')" [unstyled]="unstyled()">
+                    <ng-template #icon let-iconClass="class">
+                        @if (fileRemoveIconTemplate()) {
+                            <ng-template *ngTemplateOutlet="fileRemoveIconTemplate(); context: { class: iconClass, file: file, index: index }"></ng-template>
+                        } @else {
+                            <svg data-p-icon="times" [class]="iconClass" [attr.aria-hidden]="true" />
+                        }
+                    </ng-template>
+                </p-button>
+            </div>
+        </div>
+    }`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: Badge, selector: "p-badge", inputs: ["styleClass", "badgeSize", "size", "severity", "value", "badgeDisabled"] }, { kind: "component", type: Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: TimesIcon, selector: "[data-p-icon=\"times\"]" }, { kind: "directive", type: Bind, selector: "[pBind]", inputs: ["pBind"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: FileContent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[pFileContent]',
+                    standalone: true,
+                    template: `@for (file of files(); track file?.name + '-' + $index; let index = $index) {
+        <div [class]="cx('file')" [pBind]="$pcFileUpload.ptm('file')">
+            <img role="presentation" [class]="cx('fileThumbnail')" [attr.alt]="file.name" [src]="file.objectURL" [width]="previewWidth()" [pBind]="$pcFileUpload.ptm('fileThumbnail')" />
+            <div [class]="cx('fileInfo')" [pBind]="$pcFileUpload.ptm('fileInfo')">
+                <div [class]="cx('fileName')" [pBind]="$pcFileUpload.ptm('fileName')">{{ file.name }}</div>
+                <span [class]="cx('fileSize')" [pBind]="$pcFileUpload.ptm('fileSize')">{{ formatSize(file.size) }}</span>
+            </div>
+            <p-badge [value]="badgeValue()" [severity]="badgeSeverity()" [class]="cx('pcFileBadge')" [pt]="$pcFileUpload.ptm('pcFileBadge')" [unstyled]="unstyled()" />
+            <div [class]="cx('fileActions')" [pBind]="$pcFileUpload.ptm('fileActions')">
+                <p-button (onClick)="onRemoveClick($event, index)" [styleClass]="cx('pcFileRemoveButton')" text rounded severity="danger" [pt]="$pcFileUpload.ptm('pcFileRemoveButton')" [unstyled]="unstyled()">
+                    <ng-template #icon let-iconClass="class">
+                        @if (fileRemoveIconTemplate()) {
+                            <ng-template *ngTemplateOutlet="fileRemoveIconTemplate(); context: { class: iconClass, file: file, index: index }"></ng-template>
+                        } @else {
+                            <svg data-p-icon="times" [class]="iconClass" [attr.aria-hidden]="true" />
+                        }
+                    </ng-template>
+                </p-button>
+            </div>
+        </div>
+    }`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [FileUploadStyle],
+                    imports: [CommonModule, Badge, Button, TimesIcon, Bind]
+                }]
+        }], propDecorators: { onRemove: [{ type: i0.Output, args: ["onRemove"] }], files: [{ type: i0.Input, args: [{ isSignal: true, alias: "files", required: false }] }], badgeSeverity: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgeSeverity", required: false }] }], badgeValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgeValue", required: false }] }], previewWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "previewWidth", required: false }] }], fileRemoveIconTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "fileRemoveIconTemplate", required: false }] }] } });
+/**
+ * FileUpload is an advanced uploader with dragdrop support, multi file uploads, auto uploading, progress tracking and validations.
+ *
+ * @deprecated since v22. Compose `pFileUpload`, `pFileUploadQueue`, and its companion directives instead. This component remains available through v22 for compatibility.
+ * @group Components
+ */
+class FileUpload extends BaseComponent {
+    componentName = 'FileUpload';
+    bindDirectiveInstance = inject(Bind, { self: true });
+    onAfterViewChecked() {
+        this.bindDirectiveInstance.setAttrs(this.ptm('host'));
+    }
+    /**
+     * Name of the request parameter to identify the files at backend.
+     * @group Props
+     */
+    name = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "name" }] : /* istanbul ignore next */ []));
+    /**
+     * Remote url to upload the files.
+     * @group Props
+     */
+    url = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "url" }] : /* istanbul ignore next */ []));
+    /**
+     * HTTP method to send the files to the url such as "post" and "put".
+     * @group Props
+     */
+    method = input('post', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "method" }] : /* istanbul ignore next */ []));
+    /**
+     * Used to select multiple files at once from file dialog.
+     * @group Props
+     */
+    multiple = input(undefined, { ...(ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Comma-separated list of pattern to restrict the allowed file types. Can be any combination of either the MIME types (such as "image/*") or the file extensions (such as ".jpg").
+     * @group Props
+     */
+    accept = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "accept" }] : /* istanbul ignore next */ []));
+    /**
+     * Disables the upload functionality.
+     * @group Props
+     */
+    disabled = input(undefined, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * When enabled, upload begins automatically after selection is completed.
+     * @group Props
+     */
+    auto = input(undefined, { ...(ngDevMode ? { debugName: "auto" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Cross-site Access-Control requests should be made using credentials such as cookies, authorization headers or TLS client certificates.
+     * @group Props
+     */
+    withCredentials = input(undefined, { ...(ngDevMode ? { debugName: "withCredentials" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Maximum file size allowed in bytes.
+     * @group Props
+     */
+    maxFileSize = input(undefined, { ...(ngDevMode ? { debugName: "maxFileSize" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /**
+     * Summary message of the invalid file size.
+     * @group Props
+     */
+    invalidFileSizeMessageSummary = input('{0}: Invalid file size, ', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "invalidFileSizeMessageSummary" }] : /* istanbul ignore next */ []));
+    /**
+     * Detail message of the invalid file size.
+     * @group Props
+     */
+    invalidFileSizeMessageDetail = input('maximum upload size is {0}.', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "invalidFileSizeMessageDetail" }] : /* istanbul ignore next */ []));
+    /**
+     * Summary message of the invalid file type.
+     * @group Props
+     */
+    invalidFileTypeMessageSummary = input('{0}: Invalid file type, ', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "invalidFileTypeMessageSummary" }] : /* istanbul ignore next */ []));
+    /**
+     * Detail message of the invalid file type.
+     * @group Props
+     */
+    invalidFileTypeMessageDetail = input('allowed file types: {0}.', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "invalidFileTypeMessageDetail" }] : /* istanbul ignore next */ []));
+    /**
+     * Detail message of the invalid file type.
+     * @group Props
+     */
+    invalidFileLimitMessageDetail = input('limit is {0} at most.', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "invalidFileLimitMessageDetail" }] : /* istanbul ignore next */ []));
+    /**
+     * Summary message of the invalid file type.
+     * @group Props
+     */
+    invalidFileLimitMessageSummary = input('Maximum number of files exceeded, ', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "invalidFileLimitMessageSummary" }] : /* istanbul ignore next */ []));
+    /**
+     * Inline style of the element.
+     * @group Props
+     */
+    style = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "style" }] : /* istanbul ignore next */ []));
+    /**
+     * Class of the element.
+     * @group Props
+     */
+    styleClass = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "styleClass" }] : /* istanbul ignore next */ []));
+    /**
+     * Width of the image thumbnail in pixels.
+     * @group Props
+     */
+    previewWidth = input(50, { ...(ngDevMode ? { debugName: "previewWidth" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /**
+     * Label of the choose button. Defaults to ngx-prime Locale configuration.
+     * @group Props
+     */
+    chooseLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "chooseLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Label of the upload button. Defaults to ngx-prime Locale configuration.
+     * @group Props
+     */
+    uploadLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "uploadLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Label of the cancel button. Defaults to ngx-prime Locale configuration.
+     * @group Props
+     */
+    cancelLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "cancelLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Icon of the choose button.
+     * @group Props
+     */
+    chooseIcon = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "chooseIcon" }] : /* istanbul ignore next */ []));
+    /**
+     * Icon of the upload button.
+     * @group Props
+     */
+    uploadIcon = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "uploadIcon" }] : /* istanbul ignore next */ []));
+    /**
+     * Icon of the cancel button.
+     * @group Props
+     */
+    cancelIcon = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "cancelIcon" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether to show the upload button.
+     * @group Props
+     */
+    showUploadButton = input(true, { ...(ngDevMode ? { debugName: "showUploadButton" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Whether to show the cancel button.
+     * @group Props
+     */
+    showCancelButton = input(true, { ...(ngDevMode ? { debugName: "showCancelButton" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Defines the UI of the component.
+     * @group Props
+     */
+    mode = input('advanced', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+    /**
+     * HttpHeaders class represents the header configuration options for an HTTP request.
+     * @group Props
+     */
+    headers = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "headers" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether to use the default upload or a manual implementation defined in uploadHandler callback. Defaults to ngx-prime Locale configuration.
+     * @group Props
+     */
+    customUpload = input(undefined, { ...(ngDevMode ? { debugName: "customUpload" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Maximum number of files that can be uploaded.
+     * @group Props
+     */
+    fileLimit = input(undefined, { ...(ngDevMode ? { debugName: "fileLimit" } : /* istanbul ignore next */ {}), transform: (value) => numberAttribute(value, undefined) });
+    /**
+     * Style class of the upload button.
+     * @group Props
+     */
+    uploadStyleClass = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "uploadStyleClass" }] : /* istanbul ignore next */ []));
+    /**
+     * Style class of the cancel button.
+     * @group Props
+     */
+    cancelStyleClass = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "cancelStyleClass" }] : /* istanbul ignore next */ []));
+    /**
+     * Style class of the remove button.
+     * @group Props
+     */
+    removeStyleClass = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "removeStyleClass" }] : /* istanbul ignore next */ []));
+    /**
+     * Style class of the choose button.
+     * @group Props
+     */
+    chooseStyleClass = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "chooseStyleClass" }] : /* istanbul ignore next */ []));
+    /**
+     * Used to pass all properties of the ButtonProps to the choose button inside the component.
+     * @group Props
+     */
+    chooseButtonProps = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "chooseButtonProps" }] : /* istanbul ignore next */ []));
+    /**
+     * Used to pass all properties of the ButtonProps to the upload button inside the component.
+     * @group Props
+     */
+    uploadButtonProps = input({ severity: 'secondary' }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "uploadButtonProps" }] : /* istanbul ignore next */ []));
+    /**
+     * Used to pass all properties of the ButtonProps to the cancel button inside the component.
+     * @group Props
+     */
+    cancelButtonProps = input({ severity: 'secondary' }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cancelButtonProps" }] : /* istanbul ignore next */ []));
+    /**
+     * Callback to invoke before file upload is initialized.
+     * @param {FileBeforeUploadEvent} event - Custom upload event.
+     * @group Emits
+     */
+    onBeforeUpload = output();
+    /**
+     * An event indicating that the request was sent to the server. Useful when a request may be retried multiple times, to distinguish between retries on the final event stream.
+     * @param {FileSendEvent} event - Custom send event.
+     * @group Emits
+     */
+    onSend = output();
+    /**
+     * Callback to invoke when file upload is complete.
+     * @param {FileUploadEvent} event - Custom upload event.
+     * @group Emits
+     */
+    onUpload = output();
+    /**
+     * Callback to invoke if file upload fails.
+     * @param {FileUploadErrorEvent} event - Custom error event.
+     * @group Emits
+     */
+    onError = output();
+    /**
+     * Callback to invoke when files in queue are removed without uploading using clear all button.
+     * @param {Event} event - Browser event.
+     * @group Emits
+     */
+    onClear = output();
+    /**
+     * Callback to invoke when a file is removed without uploading using clear button of a file.
+     * @param {FileRemoveEvent} event - Remove event.
+     * @group Emits
+     */
+    onRemove = output();
+    /**
+     * Callback to invoke when files are selected.
+     * @param {FileSelectEvent} event - Select event.
+     * @group Emits
+     */
+    onSelect = output();
+    /**
+     * Callback to invoke when files are being uploaded.
+     * @param {FileProgressEvent} event - Progress event.
+     * @group Emits
+     */
+    onProgress = output();
+    /**
+     * Callback to invoke in custom upload mode to upload the files manually.
+     * @param {FileUploadHandlerEvent} event - Upload handler event.
+     * @group Emits
+     */
+    uploadHandler = output();
+    /**
+     * This event is triggered if an error occurs while loading an image file.
+     * @param {Event} event - Browser event.
+     * @group Emits
+     */
+    onImageError = output();
+    /**
+     * This event is triggered if an error occurs while loading an image file.
+     * @param {RemoveUploadedFileEvent} event - Remove event.
+     * @group Emits
+     */
+    onRemoveUploadedFile = output();
+    /**
+     * Custom file template.
+     * @group Templates
+     */
+    fileTemplate = contentChild('file', { ...(ngDevMode ? { debugName: "fileTemplate" } : /* istanbul ignore next */ {}), descendants: false });
+    /**
+     * Custom header template.
+     * @param {FileUploadHeaderTemplateContext} context - header template context.
+     * @group Templates
+     */
+    headerTemplate = contentChild('header', { ...(ngDevMode ? { debugName: "headerTemplate" } : /* istanbul ignore next */ {}), descendants: false });
+    /**
+     * Custom content template.
+     * @param {FileUploadContentTemplateContext} context - content template context.
+     * @group Templates
+     */
+    contentTemplate;
+    /**
+     * Custom toolbar template.
+     * @group Templates
+     */
+    toolbarTemplate = contentChild('toolbar', { ...(ngDevMode ? { debugName: "toolbarTemplate" } : /* istanbul ignore next */ {}), descendants: false });
+    /**
+     * Custom choose icon template.
+     * @group Templates
+     */
+    chooseIconTemplate;
+    /**
+     * Custom file label template.
+     * @param {FileUploadFileLabelTemplateContext} context - file label template context.
+     * @group Templates
+     */
+    fileLabelTemplate = contentChild('filelabel', { ...(ngDevMode ? { debugName: "fileLabelTemplate" } : /* istanbul ignore next */ {}), descendants: false });
+    /**
+     * Custom upload icon template.
+     * @group Templates
+     */
+    uploadIconTemplate;
+    /**
+     * Custom cancel icon template.
+     * @group Templates
+     */
+    cancelIconTemplate;
+    /**
+     * Custom empty state template.
+     * @group Templates
+     */
+    emptyTemplate;
+    advancedFileInput;
+    basicFileInput = viewChild('basicfileinput', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "basicFileInput" }] : /* istanbul ignore next */ []));
+    content = viewChild('content', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "content" }] : /* istanbul ignore next */ []));
+    /**
+     * Accepts the public `files` binding without giving up the mutable queue
+     * maintained by FileUpload itself. The queue is deliberately kept behind
+     * the `files` accessor: selecting, removing and clearing files are local
+     * operations, whereas a bound input replaces the complete queue.
+     */
+    // eslint-disable-next-line @angular-eslint/no-input-rename
+    inputFiles = input(undefined, { ...(ngDevMode ? { debugName: "inputFiles" } : /* istanbul ignore next */ {}), alias: 'files' });
+    syncInputFiles = effect(() => {
+        const files = this.inputFiles();
+        if (files !== undefined) {
+            this.files = files;
+        }
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "syncInputFiles" }] : /* istanbul ignore next */ []));
+    set files(files) {
+        this._files = [];
+        for (let i = 0; i < files.length; i++) {
+            let file = files[i];
+            if (this.validate(file)) {
+                if (this.isImage(file)) {
+                    file.objectURL = this.sanitizer.bypassSecurityTrustUrl(window.URL.createObjectURL(files[i]));
+                }
+                this._files.push(files[i]);
+            }
+        }
+    }
+    get files() {
+        return this._files;
+    }
+    get basicButtonLabel() {
+        if (this.auto() || !this.hasFiles()) {
+            return this.chooseLabel();
+        }
+        return this.uploadLabel() ?? this.files[0].name;
+    }
+    _files = [];
+    progress = 0;
+    dragHighlight;
+    msgs;
+    uploadedFileCount = 0;
+    focus;
+    uploading;
+    duplicateIEEvent; // flag to recognize duplicate onchange event for file input
+    translationSubscription;
+    dragOverListener;
+    uploadedFiles = [];
+    sanitizer = inject(DomSanitizer);
+    zone = inject(NgZone);
+    http = inject(HttpClient);
+    _componentStyle = inject(FileUploadStyle);
+    onInit() {
+        this.translationSubscription = this.config.translationObserver.subscribe(() => {
+            this.cd.markForCheck();
+        });
+    }
+    onAfterViewInit() {
+        if (isPlatformBrowser(this.platformId)) {
+            if (this.mode() === 'advanced') {
+                this.zone.runOutsideAngular(() => {
+                    const content = this.content();
+                    if (content) {
+                        this.dragOverListener = this.renderer.listen(content.nativeElement, 'dragover', this.onDragOver.bind(this));
+                    }
+                });
+            }
+        }
+    }
+    _headerTemplate;
+    _contentTemplate;
+    _toolbarTemplate;
+    _chooseIconTemplate;
+    _uploadIconTemplate;
+    _cancelIconTemplate;
+    _emptyTemplate;
+    _fileTemplate;
+    _fileLabelTemplate;
+    templates = contentChildren(PrimeTemplate, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "templates" }] : /* istanbul ignore next */ []));
+    onAfterContentInit() {
+        this.templates()?.forEach((item) => {
+            switch (item.getType()) {
+                case 'header':
+                    this._headerTemplate = item.template;
+                    break;
+                case 'file':
+                    this._fileTemplate = item.template;
+                    break;
+                case 'content':
+                    this._contentTemplate = item.template;
+                    break;
+                case 'toolbar':
+                    this._toolbarTemplate = item.template;
+                    break;
+                case 'chooseicon':
+                    this._chooseIconTemplate = item.template;
+                    break;
+                case 'uploadicon':
+                    this._uploadIconTemplate = item.template;
+                    break;
+                case 'cancelicon':
+                    this._cancelIconTemplate = item.template;
+                    break;
+                case 'empty':
+                    this._emptyTemplate = item.template;
+                    break;
+                case 'filelabel':
+                    this._fileLabelTemplate = item.template;
+                    break;
+                default:
+                    this._fileTemplate = item.template;
+                    break;
+            }
+        });
+    }
+    basicFileChosenLabel() {
+        if (this.auto())
+            return this.chooseButtonLabel;
+        else if (this.hasFiles()) {
+            if (this.files && this.files.length === 1)
+                return this.files[0].name;
+            return this.config.getTranslation('fileChosenMessage')?.replace('{0}', this.files.length);
+        }
+        return this.config.getTranslation('noFileChosenMessage') || '';
+    }
+    completedLabel() {
+        return this.config.getTranslation('completed') || '';
+    }
+    getTranslation(option) {
+        return this.config.getTranslation(option);
+    }
+    choose() {
+        this.advancedFileInput?.nativeElement.click();
+    }
+    onFileSelect(event) {
+        if (event.type !== 'drop' && this.isIE11() && this.duplicateIEEvent) {
+            this.duplicateIEEvent = false;
+            return;
+        }
+        if (!this.multiple()) {
+            this.files = [];
+        }
+        this.msgs = [];
+        this.files = this.files || [];
+        let files = event.dataTransfer ? event.dataTransfer.files : event.target.files;
+        for (let i = 0; i < files.length; i++) {
+            let file = files[i];
+            if (!this.isFileSelected(file)) {
+                if (this.validate(file)) {
+                    if (this.isImage(file)) {
+                        file.objectURL = this.sanitizer.bypassSecurityTrustUrl(window.URL.createObjectURL(files[i]));
+                    }
+                    this.files.push(files[i]);
+                }
+            }
+        }
+        this.onSelect.emit({ originalEvent: event, files: files, currentFiles: this.files });
+        // this will check the fileLimit with the uploaded files
+        this.checkFileLimit(files);
+        if (this.hasFiles() && this.auto() && (this.mode() !== 'advanced' || !this.isFileLimitExceeded())) {
+            this.upload();
+        }
+        if (event.type !== 'drop' && this.isIE11()) {
+            this.clearIEInput();
+        }
+        else {
+            this.clearInputElement();
+        }
+    }
+    isFileSelected(file) {
+        for (let sFile of this.files) {
+            if (sFile.name + sFile.type + sFile.size === file.name + file.type + file.size) {
+                return true;
+            }
+        }
+        return false;
+    }
+    isIE11() {
+        if (isPlatformBrowser(this.platformId)) {
+            return !!this.document.defaultView['MSInputMethodContext'] && !!this.document['documentMode'];
+        }
+    }
+    validate(file) {
+        this.msgs = this.msgs || [];
+        const accept = this.accept();
+        if (accept && !this.isFileTypeValid(file)) {
+            const text = `${this.invalidFileTypeMessageSummary().replace('{0}', file.name)} ${this.invalidFileTypeMessageDetail().replace('{0}', accept)}`;
+            this.msgs.push({
+                severity: 'error',
+                text: text
+            });
+            return false;
+        }
+        const maxFileSize = this.maxFileSize();
+        if (maxFileSize && file.size > maxFileSize) {
+            const text = `${this.invalidFileSizeMessageSummary().replace('{0}', file.name)} ${this.invalidFileSizeMessageDetail().replace('{0}', this.formatSize(maxFileSize))}`;
+            this.msgs.push({
+                severity: 'error',
+                text: text
+            });
+            return false;
+        }
+        return true;
+    }
+    isFileTypeValid(file) {
+        let acceptableTypes = this.accept()
+            ?.split(',')
+            .map((type) => type.trim());
+        for (let type of acceptableTypes) {
+            let acceptable = this.isWildcard(type) ? this.getTypeClass(file.type) === this.getTypeClass(type) : file.type == type || this.getFileExtension(file).toLowerCase() === type.toLowerCase();
+            if (acceptable) {
+                return true;
+            }
+        }
+        return false;
+    }
+    getTypeClass(fileType) {
+        return fileType.substring(0, fileType.indexOf('/'));
+    }
+    isWildcard(fileType) {
+        return fileType.indexOf('*') !== -1;
+    }
+    getFileExtension(file) {
+        return '.' + file.name.split('.').pop();
+    }
+    isImage(file) {
+        return /^image\//.test(file.type);
+    }
+    onImageLoad(img) {
+        window.URL.revokeObjectURL(img.src);
+    }
+    /**
+     * Uploads the selected files.
+     * @group Method
+     */
+    uploader() {
+        if (this.customUpload()) {
+            if (this.fileLimit()) {
+                this.uploadedFileCount += this.files.length;
+            }
+            this.uploadHandler.emit({
+                files: this.files
+            });
+            this.cd.markForCheck();
+        }
+        else {
+            this.uploading = true;
+            this.msgs = [];
+            let formData = new FormData();
+            this.onBeforeUpload.emit({
+                formData: formData
+            });
+            for (let i = 0; i < this.files.length; i++) {
+                formData.append(this.name(), this.files[i], this.files[i].name);
+            }
+            this.http
+                .request(this.method(), this.url(), {
+                body: formData,
+                headers: this.headers(),
+                reportProgress: true,
+                observe: 'events',
+                withCredentials: this.withCredentials()
+            })
+                .subscribe((event) => {
+                switch (event.type) {
+                    case HttpEventType.Sent:
+                        this.onSend.emit({
+                            originalEvent: event,
+                            formData: formData
+                        });
+                        break;
+                    case HttpEventType.Response:
+                        this.uploading = false;
+                        this.progress = 0;
+                        if (event['status'] >= 200 && event['status'] < 300) {
+                            if (this.fileLimit()) {
+                                this.uploadedFileCount += this.files.length;
+                            }
+                            this.onUpload.emit({ originalEvent: event, files: this.files });
+                        }
+                        else {
+                            this.onError.emit({ files: this.files });
+                        }
+                        this.uploadedFiles = [...this.uploadedFiles, ...this.files];
+                        this.clear();
+                        break;
+                    case HttpEventType.UploadProgress: {
+                        if (event['loaded']) {
+                            this.progress = Math.round((event['loaded'] * 100) / event['total']);
+                        }
+                        this.onProgress.emit({ originalEvent: event, progress: this.progress });
+                        break;
+                    }
+                }
+                this.cd.markForCheck();
+            }, (error) => {
+                this.uploading = false;
+                this.onError.emit({ files: this.files, error: error });
+            });
+        }
+    }
+    onRemoveClick(e) {
+        const { event, index } = e;
+        if (this.hasFiles()) {
+            this.remove(event, index);
+        }
+    }
+    onRemoveUploadedFileClick(e) {
+        const { index } = e;
+        if (this.hasUploadedFiles()) {
+            this.removeUploadedFile(index);
+        }
+    }
+    /**
+     * Clears the files list.
+     * @group Method
+     */
+    clear() {
+        this.files = [];
+        this.onClear.emit(undefined);
+        this.clearInputElement();
+        this.msgs = [];
+        this.cd.markForCheck();
+    }
+    /**
+     * Removes a single file.
+     * @param {Event} event - Browser event.
+     * @param {Number} index - Index of the file.
+     * @group Method
+     */
+    remove(event, index) {
+        this.clearInputElement();
+        this.onRemove.emit({ originalEvent: event, file: this.files[index] });
+        this.files.splice(index, 1);
+        this.checkFileLimit(this.files);
+    }
+    /**
+     * Removes uploaded file.
+     * @param {Number} index - Index of the file to be removed.
+     * @group Method
+     */
+    removeUploadedFile(index) {
+        let removedFile = this.uploadedFiles.splice(index, 1)[0];
+        this.uploadedFiles = [...this.uploadedFiles];
+        this.onRemoveUploadedFile.emit({ file: removedFile, files: this.uploadedFiles });
+    }
+    isFileLimitExceeded() {
+        const isAutoMode = this.auto();
+        const totalFileCount = isAutoMode ? this.files.length : this.files.length + this.uploadedFileCount;
+        const fileLimit = this.fileLimit();
+        if (fileLimit && fileLimit <= totalFileCount && this.focus) {
+            this.focus = false;
+        }
+        return fileLimit && fileLimit < totalFileCount;
+    }
+    isChooseDisabled() {
+        const fileLimit = this.fileLimit();
+        if (this.auto()) {
+            return fileLimit && fileLimit <= this.files.length;
+        }
+        else {
+            return fileLimit && fileLimit <= this.files.length + this.uploadedFileCount;
+        }
+    }
+    checkFileLimit(files) {
+        this.msgs ??= [];
+        const fileLimit = this.fileLimit();
+        const hasExistingValidationMessages = this.msgs.length > 0 && fileLimit && fileLimit < files.length;
+        if (this.isFileLimitExceeded() || hasExistingValidationMessages) {
+            const text = `${this.invalidFileLimitMessageSummary().replace('{0}', this.fileLimit().toString())} ${this.invalidFileLimitMessageDetail().replace('{0}', this.fileLimit().toString())}`;
+            this.msgs.push({
+                severity: 'error',
+                text: text
+            });
+        }
+        else {
+            this.msgs = this.msgs.filter((msg) => !msg.text.includes(this.invalidFileLimitMessageSummary()));
+        }
+    }
+    clearInputElement() {
+        if (this.advancedFileInput && this.advancedFileInput.nativeElement) {
+            this.advancedFileInput.nativeElement.value = '';
+        }
+        const basicFileInput = this.basicFileInput();
+        if (basicFileInput && basicFileInput.nativeElement) {
+            basicFileInput.nativeElement.value = '';
+        }
+    }
+    clearIEInput() {
+        if (this.advancedFileInput && this.advancedFileInput.nativeElement) {
+            this.duplicateIEEvent = true; //IE11 fix to prevent onFileChange trigger again
+            this.advancedFileInput.nativeElement.value = '';
+        }
+    }
+    hasFiles() {
+        return this.files && this.files.length > 0;
+    }
+    hasUploadedFiles() {
+        return this.uploadedFiles && this.uploadedFiles.length > 0;
+    }
+    onDragEnter(e) {
+        if (!this.disabled()) {
+            e.stopPropagation();
+            e.preventDefault();
+        }
+    }
+    onDragOver(e) {
+        if (!this.disabled()) {
+            !this.$unstyled() && addClass(this.content()?.nativeElement, 'p-fileupload-highlight');
+            this.content()?.nativeElement.setAttribute('data-p-highlight', true);
+            this.dragHighlight = true;
+            e.stopPropagation();
+            e.preventDefault();
+        }
+    }
+    onDragLeave() {
+        if (!this.disabled()) {
+            !this.$unstyled() && removeClass(this.content()?.nativeElement, 'p-fileupload-highlight');
+            this.content()?.nativeElement.setAttribute('data-p-highlight', false);
+        }
+    }
+    onDrop(event) {
+        if (!this.disabled()) {
+            !this.$unstyled() && removeClass(this.content()?.nativeElement, 'p-fileupload-highlight');
+            this.content()?.nativeElement.setAttribute('data-p-highlight', false);
+            event.stopPropagation();
+            event.preventDefault();
+            let files = event.dataTransfer ? event.dataTransfer.files : event.target.files;
+            let allowDrop = this.multiple() || (files && files.length === 1);
+            if (allowDrop) {
+                this.onFileSelect(event);
+            }
+        }
+    }
+    onFocus() {
+        this.focus = true;
+    }
+    onBlur() {
+        this.focus = false;
+    }
+    formatSize(bytes) {
+        const k = 1024;
+        const dm = 3;
+        const sizes = this.getTranslation(TranslationKeys.FILE_SIZE_TYPES);
+        if (bytes === 0) {
+            return `0 ${sizes[0]}`;
+        }
+        const i = Math.floor(Math.log(bytes) / Math.log(k));
+        const formattedSize = (bytes / Math.pow(k, i)).toFixed(dm);
+        return `${formattedSize} ${sizes[i]}`;
+    }
+    upload() {
+        if (this.hasFiles())
+            this.uploader();
+    }
+    onBasicUploaderClick() {
+        this.basicFileInput()?.nativeElement.click();
+    }
+    onBasicKeydown(event) {
+        switch (event.code) {
+            case 'Space':
+            case 'Enter':
+                this.onBasicUploaderClick();
+                event.preventDefault();
+                break;
+        }
+    }
+    imageError(event) {
+        this.onImageError.emit(event);
+    }
+    getBlockableElement() {
+        return this.el.nativeElement.children[0];
+    }
+    get chooseButtonLabel() {
+        return this.chooseLabel() || this.config.getTranslation(TranslationKeys.CHOOSE);
+    }
+    get uploadButtonLabel() {
+        return this.uploadLabel() || this.config.getTranslation(TranslationKeys.UPLOAD);
+    }
+    get cancelButtonLabel() {
+        return this.cancelLabel() || this.config.getTranslation(TranslationKeys.CANCEL);
+    }
+    get browseFilesLabel() {
+        return this.config.getTranslation(TranslationKeys.ARIA)[TranslationKeys.BROWSE_FILES];
+    }
+    get pendingLabel() {
+        return this.config.getTranslation(TranslationKeys.PENDING);
+    }
+    onDestroy() {
+        const content = this.content();
+        if (content && content.nativeElement) {
+            if (this.dragOverListener) {
+                this.dragOverListener();
+                this.dragOverListener = null;
+            }
+        }
+        if (this.translationSubscription) {
+            this.translationSubscription.unsubscribe();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: FileUpload, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: FileUpload, isStandalone: true, selector: "p-fileupload, p-fileUpload", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, url: { classPropertyName: "url", publicName: "url", isSignal: true, isRequired: false, transformFunction: null }, method: { classPropertyName: "method", publicName: "method", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, auto: { classPropertyName: "auto", publicName: "auto", isSignal: true, isRequired: false, transformFunction: null }, withCredentials: { classPropertyName: "withCredentials", publicName: "withCredentials", isSignal: true, isRequired: false, transformFunction: null }, maxFileSize: { classPropertyName: "maxFileSize", publicName: "maxFileSize", isSignal: true, isRequired: false, transformFunction: null }, invalidFileSizeMessageSummary: { classPropertyName: "invalidFileSizeMessageSummary", publicName: "invalidFileSizeMessageSummary", isSignal: true, isRequired: false, transformFunction: null }, invalidFileSizeMessageDetail: { classPropertyName: "invalidFileSizeMessageDetail", publicName: "invalidFileSizeMessageDetail", isSignal: true, isRequired: false, transformFunction: null }, invalidFileTypeMessageSummary: { classPropertyName: "invalidFileTypeMessageSummary", publicName: "invalidFileTypeMessageSummary", isSignal: true, isRequired: false, transformFunction: null }, invalidFileTypeMessageDetail: { classPropertyName: "invalidFileTypeMessageDetail", publicName: "invalidFileTypeMessageDetail", isSignal: true, isRequired: false, transformFunction: null }, invalidFileLimitMessageDetail: { classPropertyName: "invalidFileLimitMessageDetail", publicName: "invalidFileLimitMessageDetail", isSignal: true, isRequired: false, transformFunction: null }, invalidFileLimitMessageSummary: { classPropertyName: "invalidFileLimitMessageSummary", publicName: "invalidFileLimitMessageSummary", isSignal: true, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, previewWidth: { classPropertyName: "previewWidth", publicName: "previewWidth", isSignal: true, isRequired: false, transformFunction: null }, chooseLabel: { classPropertyName: "chooseLabel", publicName: "chooseLabel", isSignal: true, isRequired: false, transformFunction: null }, uploadLabel: { classPropertyName: "uploadLabel", publicName: "uploadLabel", isSignal: true, isRequired: false, transformFunction: null }, cancelLabel: { classPropertyName: "cancelLabel", publicName: "cancelLabel", isSignal: true, isRequired: false, transformFunction: null }, chooseIcon: { classPropertyName: "chooseIcon", publicName: "chooseIcon", isSignal: true, isRequired: false, transformFunction: null }, uploadIcon: { classPropertyName: "uploadIcon", publicName: "uploadIcon", isSignal: true, isRequired: false, transformFunction: null }, cancelIcon: { classPropertyName: "cancelIcon", publicName: "cancelIcon", isSignal: true, isRequired: false, transformFunction: null }, showUploadButton: { classPropertyName: "showUploadButton", publicName: "showUploadButton", isSignal: true, isRequired: false, transformFunction: null }, showCancelButton: { classPropertyName: "showCancelButton", publicName: "showCancelButton", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, headers: { classPropertyName: "headers", publicName: "headers", isSignal: true, isRequired: false, transformFunction: null }, customUpload: { classPropertyName: "customUpload", publicName: "customUpload", isSignal: true, isRequired: false, transformFunction: null }, fileLimit: { classPropertyName: "fileLimit", publicName: "fileLimit", isSignal: true, isRequired: false, transformFunction: null }, uploadStyleClass: { classPropertyName: "uploadStyleClass", publicName: "uploadStyleClass", isSignal: true, isRequired: false, transformFunction: null }, cancelStyleClass: { classPropertyName: "cancelStyleClass", publicName: "cancelStyleClass", isSignal: true, isRequired: false, transformFunction: null }, removeStyleClass: { classPropertyName: "removeStyleClass", publicName: "removeStyleClass", isSignal: true, isRequired: false, transformFunction: null }, chooseStyleClass: { classPropertyName: "chooseStyleClass", publicName: "chooseStyleClass", isSignal: true, isRequired: false, transformFunction: null }, chooseButtonProps: { classPropertyName: "chooseButtonProps", publicName: "chooseButtonProps", isSignal: true, isRequired: false, transformFunction: null }, uploadButtonProps: { classPropertyName: "uploadButtonProps", publicName: "uploadButtonProps", isSignal: true, isRequired: false, transformFunction: null }, cancelButtonProps: { classPropertyName: "cancelButtonProps", publicName: "cancelButtonProps", isSignal: true, isRequired: false, transformFunction: null }, inputFiles: { classPropertyName: "inputFiles", publicName: "files", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onBeforeUpload: "onBeforeUpload", onSend: "onSend", onUpload: "onUpload", onError: "onError", onClear: "onClear", onRemove: "onRemove", onSelect: "onSelect", onProgress: "onProgress", uploadHandler: "uploadHandler", onImageError: "onImageError", onRemoveUploadedFile: "onRemoveUploadedFile" }, providers: [FileUploadStyle, { provide: FILEUPLOAD_INSTANCE, useExisting: FileUpload }, { provide: PARENT_INSTANCE, useExisting: FileUpload }], queries: [{ propertyName: "fileTemplate", first: true, predicate: ["file"], isSignal: true }, { propertyName: "headerTemplate", first: true, predicate: ["header"], isSignal: true }, { propertyName: "toolbarTemplate", first: true, predicate: ["toolbar"], isSignal: true }, { propertyName: "fileLabelTemplate", first: true, predicate: ["filelabel"], isSignal: true }, { propertyName: "templates", predicate: PrimeTemplate, isSignal: true }, { propertyName: "contentTemplate", first: true, predicate: ["content"] }, { propertyName: "chooseIconTemplate", first: true, predicate: ["chooseicon"] }, { propertyName: "uploadIconTemplate", first: true, predicate: ["uploadicon"] }, { propertyName: "cancelIconTemplate", first: true, predicate: ["cancelicon"] }, { propertyName: "emptyTemplate", first: true, predicate: ["empty"] }], viewQueries: [{ propertyName: "basicFileInput", first: true, predicate: ["basicfileinput"], descendants: true, isSignal: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true, isSignal: true }, { propertyName: "advancedFileInput", first: true, predicate: ["advancedfileinput"], descendants: true }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `
+        @if (mode() === 'advanced') {
+            <div [class]="cn(cx('root'), styleClass())" [ngStyle]="style()" [pBind]="ptm('root')">
+                <input
+                    [attr.aria-label]="browseFilesLabel"
+                    #advancedfileinput
+                    type="file"
+                    (change)="onFileSelect($event)"
+                    [multiple]="multiple()"
+                    [accept]="accept()"
+                    [disabled]="disabled() || isChooseDisabled()"
+                    [attr.title]="''"
+                    [pBind]="ptm('input')"
+                />
+                <div [class]="cx('header')" [pBind]="ptm('header')">
+                    @if (!headerTemplate() && !_headerTemplate) {
+                        <p-button
+                            [styleClass]="cn(cx('pcChooseButton'), chooseStyleClass())"
+                            [disabled]="disabled() || isChooseDisabled()"
+                            (focus)="onFocus()"
+                            [label]="chooseButtonLabel"
+                            (blur)="onBlur()"
+                            (onClick)="choose()"
+                            (keydown.enter)="choose()"
+                            [buttonProps]="chooseButtonProps()"
+                            [pt]="ptm('pcChooseButton')"
+                            [unstyled]="unstyled()"
+                        >
+                            <input
+                                [attr.aria-label]="browseFilesLabel"
+                                #advancedfileinput
+                                type="file"
+                                (change)="onFileSelect($event)"
+                                [multiple]="multiple()"
+                                [accept]="accept()"
+                                [disabled]="disabled() || isChooseDisabled()"
+                                [attr.title]="''"
+                                [pBind]="ptm('input')"
+                            />
+                            <ng-template #icon>
+                                @if (chooseIcon()) {
+                                    <span [class]="chooseIcon()" [attr.aria-label]="true" [pBind]="ptm('pcChooseButton')?.icon"></span>
+                                }
+                                @if (!chooseIcon()) {
+                                    <ng-container>
+                                        @if (!chooseIconTemplate && !_chooseIconTemplate) {
+                                            <svg data-p-icon="plus" [attr.aria-label]="true" [pBind]="ptm('pcChooseButton')?.icon" />
+                                        }
+                                        @if (chooseIconTemplate || _chooseIconTemplate) {
+                                            <span [attr.aria-label]="true" [pBind]="ptm('pcChooseButton')?.icon">
+                                                <ng-template *ngTemplateOutlet="chooseIconTemplate || _chooseIconTemplate"></ng-template>
+                                            </span>
+                                        }
+                                    </ng-container>
+                                }
+                            </ng-template>
+                        </p-button>
+
+                        @if (!auto() && showUploadButton()) {
+                            <p-button
+                                [label]="uploadButtonLabel"
+                                (onClick)="upload()"
+                                [disabled]="!hasFiles() || isFileLimitExceeded()"
+                                [styleClass]="cn(cx('pcUploadButton'), uploadStyleClass())"
+                                [buttonProps]="uploadButtonProps()"
+                                [pt]="ptm('pcUploadButton')"
+                                [unstyled]="unstyled()"
+                            >
+                                <ng-template #icon>
+                                    @if (uploadIcon()) {
+                                        <span [ngClass]="uploadIcon()" [attr.aria-hidden]="true" [pBind]="ptm('pcUploadButton')?.icon"></span>
+                                    }
+                                    @if (!uploadIcon()) {
+                                        <ng-container>
+                                            @if (!uploadIconTemplate && !_uploadIconTemplate) {
+                                                <svg data-p-icon="upload" [pBind]="ptm('pcUploadButton')?.icon" />
+                                            }
+                                            @if (uploadIconTemplate || _uploadIconTemplate) {
+                                                <span [attr.aria-hidden]="true" [pBind]="ptm('pcUploadButton')?.icon">
+                                                    <ng-template *ngTemplateOutlet="uploadIconTemplate || _uploadIconTemplate"></ng-template>
+                                                </span>
+                                            }
+                                        </ng-container>
+                                    }
+                                </ng-template>
+                            </p-button>
+                        }
+                        @if (!auto() && showCancelButton()) {
+                            <p-button
+                                [label]="cancelButtonLabel"
+                                (onClick)="clear()"
+                                [disabled]="!hasFiles() || uploading"
+                                [styleClass]="cn(cx('pcCancelButton'), cancelStyleClass())"
+                                [buttonProps]="cancelButtonProps()"
+                                [pt]="ptm('pcCancelButton')"
+                                [unstyled]="unstyled()"
+                            >
+                                <ng-template #icon>
+                                    @if (cancelIcon()) {
+                                        <span [ngClass]="cancelIcon()"></span>
+                                    }
+                                    @if (!cancelIcon()) {
+                                        <ng-container>
+                                            @if (!cancelIconTemplate && !_cancelIconTemplate) {
+                                                <svg data-p-icon="times" [attr.aria-hidden]="true" />
+                                            }
+                                            @if (cancelIconTemplate || _cancelIconTemplate) {
+                                                <span [attr.aria-hidden]="true">
+                                                    <ng-template *ngTemplateOutlet="cancelIconTemplate || _cancelIconTemplate"></ng-template>
+                                                </span>
+                                            }
+                                        </ng-container>
+                                    }
+                                </ng-template>
+                            </p-button>
+                        }
+                    }
+                    <ng-container
+                        *ngTemplateOutlet="
+                            headerTemplate() || _headerTemplate;
+                            context: {
+                                $implicit: files,
+                                uploadedFiles: uploadedFiles,
+                                chooseCallback: choose.bind(this),
+                                clearCallback: clear.bind(this),
+                                uploadCallback: upload.bind(this)
+                            }
+                        "
+                    ></ng-container>
+                    <ng-container *ngTemplateOutlet="toolbarTemplate() || _toolbarTemplate"></ng-container>
+                </div>
+                <div #content [class]="cx('content')" (dragenter)="onDragEnter($event)" (dragleave)="onDragLeave($event)" (drop)="onDrop($event)" [pBind]="ptm('content')">
+                    @if (contentTemplate || _contentTemplate) {
+                        <ng-container
+                            *ngTemplateOutlet="
+                                contentTemplate || _contentTemplate;
+                                context: {
+                                    $implicit: files,
+                                    uploadedFiles: uploadedFiles,
+                                    chooseCallback: choose.bind(this),
+                                    clearCallback: clear.bind(this),
+                                    removeUploadedFileCallback: removeUploadedFile.bind(this),
+                                    removeFileCallback: remove.bind(this),
+                                    progress: progress,
+                                    messages: msgs
+                                }
+                            "
+                        ></ng-container>
+                    } @else {
+                        @if (hasFiles()) {
+                            <p-progressbar [value]="progress" [showValue]="false" [pt]="ptm('pcProgressBar')"></p-progressbar>
+                        }
+                        @for (message of msgs; track message) {
+                            <p-message [severity]="message.severity" [text]="message.text" [pt]="ptm('pcMessage')" [unstyled]="unstyled()"></p-message>
+                        }
+
+                        @if (hasFiles()) {
+                            <div [class]="cx('fileList')" [pBind]="ptm('fileList')">
+                                @for (file of files; track file) {
+                                    <ng-container *ngTemplateOutlet="fileTemplate() || _fileTemplate; context: { $implicit: file }"></ng-container>
+                                }
+                                @if (!fileTemplate() && !_fileTemplate) {
+                                    <div
+                                        pFileContent
+                                        [unstyled]="unstyled()"
+                                        [files]="files"
+                                        (onRemove)="onRemoveClick($event)"
+                                        [badgeValue]="pendingLabel"
+                                        [previewWidth]="previewWidth()"
+                                        [fileRemoveIconTemplate]="cancelIconTemplate || _cancelIconTemplate"
+                                    ></div>
+                                }
+                            </div>
+                        }
+                        @if (hasUploadedFiles()) {
+                            <div [class]="cx('fileList')" [pBind]="ptm('fileList')">
+                                @for (file of uploadedFiles; track file) {
+                                    <ng-container *ngTemplateOutlet="fileTemplate() || _fileTemplate; context: { $implicit: file }"></ng-container>
+                                }
+                                @if (!fileTemplate() && !_fileTemplate) {
+                                    <div
+                                        pFileContent
+                                        [unstyled]="unstyled()"
+                                        [files]="uploadedFiles"
+                                        (onRemove)="onRemoveUploadedFileClick($event)"
+                                        [badgeValue]="completedLabel()"
+                                        badgeSeverity="success"
+                                        [previewWidth]="previewWidth()"
+                                        [fileRemoveIconTemplate]="cancelIconTemplate || _cancelIconTemplate"
+                                    ></div>
+                                }
+                            </div>
+                        }
+                    }
+                    @if ((emptyTemplate || _emptyTemplate) && !hasFiles() && !hasUploadedFiles()) {
+                        <ng-container *ngTemplateOutlet="emptyTemplate || _emptyTemplate" [pBind]="ptm('empty')"></ng-container>
+                    }
+                </div>
+            </div>
+        }
+        @if (mode() === 'basic') {
+            <div [class]="cn(cx('root'), styleClass())" [pBind]="ptm('root')">
+                @for (message of msgs; track message) {
+                    <p-message [severity]="message.severity" [text]="message.text" [pt]="ptm('pcMessage')" [unstyled]="unstyled()"></p-message>
+                }
+
+                <div [class]="cx('basicContent')" [pBind]="ptm('basicContent')">
+                    <p-button
+                        [styleClass]="cn(cx('pcChooseButton'), chooseStyleClass())"
+                        [disabled]="disabled()"
+                        [label]="chooseButtonLabel"
+                        [style]="style()"
+                        (onClick)="onBasicUploaderClick()"
+                        (keydown)="onBasicKeydown($event)"
+                        [buttonProps]="chooseButtonProps()"
+                        [pt]="ptm('pcChooseButton')"
+                        [unstyled]="unstyled()"
+                    >
+                        <ng-template #icon>
+                            @if (hasFiles() && !auto()) {
+                                @if (uploadIcon()) {
+                                    <span class="p-button-icon p-button-icon-left" [ngClass]="uploadIcon()" [pBind]="ptm('pcChooseButton')?.icon"></span>
+                                }
+                                @if (!uploadIcon()) {
+                                    <ng-container>
+                                        @if (!uploadIconTemplate && !_uploadIconTemplate) {
+                                            <svg data-p-icon="upload" [class]="'p-button-icon p-button-icon-left'" [pBind]="ptm('pcChooseButton')?.icon" />
+                                        }
+                                        @if (_uploadIconTemplate || uploadIconTemplate) {
+                                            <span class="p-button-icon p-button-icon-left" [pBind]="ptm('pcChooseButton')?.icon">
+                                                <ng-template *ngTemplateOutlet="_uploadIconTemplate || uploadIconTemplate"></ng-template>
+                                            </span>
+                                        }
+                                    </ng-container>
+                                }
+                            } @else {
+                                @if (chooseIcon()) {
+                                    <span class="p-button-icon p-button-icon-left pi" [ngClass]="chooseIcon()" [pBind]="ptm('pcChooseButton')?.icon"></span>
+                                }
+                                @if (!chooseIcon()) {
+                                    <ng-container>
+                                        @if (!chooseIconTemplate && !_chooseIconTemplate) {
+                                            <svg data-p-icon="plus" [pBind]="ptm('pcChooseButton')?.icon" />
+                                        }
+                                        <ng-template *ngTemplateOutlet="chooseIconTemplate || _chooseIconTemplate"></ng-template>
+                                    </ng-container>
+                                }
+                            }
+                        </ng-template>
+                        <input
+                            [attr.aria-label]="browseFilesLabel"
+                            #basicfileinput
+                            type="file"
+                            [accept]="accept()"
+                            [multiple]="multiple()"
+                            [disabled]="disabled()"
+                            (change)="onFileSelect($event)"
+                            (focus)="onFocus()"
+                            (blur)="onBlur()"
+                            [pBind]="ptm('input')"
+                        />
+                    </p-button>
+                    @if (!auto()) {
+                        @if (!fileLabelTemplate() && !_fileLabelTemplate) {
+                            <span>
+                                {{ basicFileChosenLabel() }}
+                            </span>
+                        } @else {
+                            <ng-container *ngTemplateOutlet="fileLabelTemplate() || _fileLabelTemplate; context: { $implicit: files }"></ng-container>
+                        }
+                    }
+                </div>
+            </div>
+        }
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: ProgressBar, selector: "p-progressBar, p-progressbar, p-progress-bar", inputs: ["value", "showValue", "styleClass", "valueStyleClass", "unit", "mode", "color"] }, { kind: "component", type: Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant", "motionOptions"], outputs: ["onClose"] }, { kind: "component", type: PlusIcon, selector: "[data-p-icon=\"plus\"]" }, { kind: "component", type: UploadIcon, selector: "[data-p-icon=\"upload\"]" }, { kind: "component", type: TimesIcon, selector: "[data-p-icon=\"times\"]" }, { kind: "ngmodule", type: SharedModule }, { kind: "component", type: FileContent, selector: "[pFileContent]", inputs: ["files", "badgeSeverity", "badgeValue", "previewWidth", "fileRemoveIconTemplate"], outputs: ["onRemove"] }, { kind: "directive", type: Bind, selector: "[pBind]", inputs: ["pBind"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: FileUpload, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'p-fileupload, p-fileUpload',
+                    standalone: true,
+                    imports: [CommonModule, Button, ProgressBar, Message, PlusIcon, UploadIcon, TimesIcon, SharedModule, FileContent, Bind],
+                    template: `
+        @if (mode() === 'advanced') {
+            <div [class]="cn(cx('root'), styleClass())" [ngStyle]="style()" [pBind]="ptm('root')">
+                <input
+                    [attr.aria-label]="browseFilesLabel"
+                    #advancedfileinput
+                    type="file"
+                    (change)="onFileSelect($event)"
+                    [multiple]="multiple()"
+                    [accept]="accept()"
+                    [disabled]="disabled() || isChooseDisabled()"
+                    [attr.title]="''"
+                    [pBind]="ptm('input')"
+                />
+                <div [class]="cx('header')" [pBind]="ptm('header')">
+                    @if (!headerTemplate() && !_headerTemplate) {
+                        <p-button
+                            [styleClass]="cn(cx('pcChooseButton'), chooseStyleClass())"
+                            [disabled]="disabled() || isChooseDisabled()"
+                            (focus)="onFocus()"
+                            [label]="chooseButtonLabel"
+                            (blur)="onBlur()"
+                            (onClick)="choose()"
+                            (keydown.enter)="choose()"
+                            [buttonProps]="chooseButtonProps()"
+                            [pt]="ptm('pcChooseButton')"
+                            [unstyled]="unstyled()"
+                        >
+                            <input
+                                [attr.aria-label]="browseFilesLabel"
+                                #advancedfileinput
+                                type="file"
+                                (change)="onFileSelect($event)"
+                                [multiple]="multiple()"
+                                [accept]="accept()"
+                                [disabled]="disabled() || isChooseDisabled()"
+                                [attr.title]="''"
+                                [pBind]="ptm('input')"
+                            />
+                            <ng-template #icon>
+                                @if (chooseIcon()) {
+                                    <span [class]="chooseIcon()" [attr.aria-label]="true" [pBind]="ptm('pcChooseButton')?.icon"></span>
+                                }
+                                @if (!chooseIcon()) {
+                                    <ng-container>
+                                        @if (!chooseIconTemplate && !_chooseIconTemplate) {
+                                            <svg data-p-icon="plus" [attr.aria-label]="true" [pBind]="ptm('pcChooseButton')?.icon" />
+                                        }
+                                        @if (chooseIconTemplate || _chooseIconTemplate) {
+                                            <span [attr.aria-label]="true" [pBind]="ptm('pcChooseButton')?.icon">
+                                                <ng-template *ngTemplateOutlet="chooseIconTemplate || _chooseIconTemplate"></ng-template>
+                                            </span>
+                                        }
+                                    </ng-container>
+                                }
+                            </ng-template>
+                        </p-button>
+
+                        @if (!auto() && showUploadButton()) {
+                            <p-button
+                                [label]="uploadButtonLabel"
+                                (onClick)="upload()"
+                                [disabled]="!hasFiles() || isFileLimitExceeded()"
+                                [styleClass]="cn(cx('pcUploadButton'), uploadStyleClass())"
+                                [buttonProps]="uploadButtonProps()"
+                                [pt]="ptm('pcUploadButton')"
+                                [unstyled]="unstyled()"
+                            >
+                                <ng-template #icon>
+                                    @if (uploadIcon()) {
+                                        <span [ngClass]="uploadIcon()" [attr.aria-hidden]="true" [pBind]="ptm('pcUploadButton')?.icon"></span>
+                                    }
+                                    @if (!uploadIcon()) {
+                                        <ng-container>
+                                            @if (!uploadIconTemplate && !_uploadIconTemplate) {
+                                                <svg data-p-icon="upload" [pBind]="ptm('pcUploadButton')?.icon" />
+                                            }
+                                            @if (uploadIconTemplate || _uploadIconTemplate) {
+                                                <span [attr.aria-hidden]="true" [pBind]="ptm('pcUploadButton')?.icon">
+                                                    <ng-template *ngTemplateOutlet="uploadIconTemplate || _uploadIconTemplate"></ng-template>
+                                                </span>
+                                            }
+                                        </ng-container>
+                                    }
+                                </ng-template>
+                            </p-button>
+                        }
+                        @if (!auto() && showCancelButton()) {
+                            <p-button
+                                [label]="cancelButtonLabel"
+                                (onClick)="clear()"
+                                [disabled]="!hasFiles() || uploading"
+                                [styleClass]="cn(cx('pcCancelButton'), cancelStyleClass())"
+                                [buttonProps]="cancelButtonProps()"
+                                [pt]="ptm('pcCancelButton')"
+                                [unstyled]="unstyled()"
+                            >
+                                <ng-template #icon>
+                                    @if (cancelIcon()) {
+                                        <span [ngClass]="cancelIcon()"></span>
+                                    }
+                                    @if (!cancelIcon()) {
+                                        <ng-container>
+                                            @if (!cancelIconTemplate && !_cancelIconTemplate) {
+                                                <svg data-p-icon="times" [attr.aria-hidden]="true" />
+                                            }
+                                            @if (cancelIconTemplate || _cancelIconTemplate) {
+                                                <span [attr.aria-hidden]="true">
+                                                    <ng-template *ngTemplateOutlet="cancelIconTemplate || _cancelIconTemplate"></ng-template>
+                                                </span>
+                                            }
+                                        </ng-container>
+                                    }
+                                </ng-template>
+                            </p-button>
+                        }
+                    }
+                    <ng-container
+                        *ngTemplateOutlet="
+                            headerTemplate() || _headerTemplate;
+                            context: {
+                                $implicit: files,
+                                uploadedFiles: uploadedFiles,
+                                chooseCallback: choose.bind(this),
+                                clearCallback: clear.bind(this),
+                                uploadCallback: upload.bind(this)
+                            }
+                        "
+                    ></ng-container>
+                    <ng-container *ngTemplateOutlet="toolbarTemplate() || _toolbarTemplate"></ng-container>
+                </div>
+                <div #content [class]="cx('content')" (dragenter)="onDragEnter($event)" (dragleave)="onDragLeave($event)" (drop)="onDrop($event)" [pBind]="ptm('content')">
+                    @if (contentTemplate || _contentTemplate) {
+                        <ng-container
+                            *ngTemplateOutlet="
+                                contentTemplate || _contentTemplate;
+                                context: {
+                                    $implicit: files,
+                                    uploadedFiles: uploadedFiles,
+                                    chooseCallback: choose.bind(this),
+                                    clearCallback: clear.bind(this),
+                                    removeUploadedFileCallback: removeUploadedFile.bind(this),
+                                    removeFileCallback: remove.bind(this),
+                                    progress: progress,
+                                    messages: msgs
+                                }
+                            "
+                        ></ng-container>
+                    } @else {
+                        @if (hasFiles()) {
+                            <p-progressbar [value]="progress" [showValue]="false" [pt]="ptm('pcProgressBar')"></p-progressbar>
+                        }
+                        @for (message of msgs; track message) {
+                            <p-message [severity]="message.severity" [text]="message.text" [pt]="ptm('pcMessage')" [unstyled]="unstyled()"></p-message>
+                        }
+
+                        @if (hasFiles()) {
+                            <div [class]="cx('fileList')" [pBind]="ptm('fileList')">
+                                @for (file of files; track file) {
+                                    <ng-container *ngTemplateOutlet="fileTemplate() || _fileTemplate; context: { $implicit: file }"></ng-container>
+                                }
+                                @if (!fileTemplate() && !_fileTemplate) {
+                                    <div
+                                        pFileContent
+                                        [unstyled]="unstyled()"
+                                        [files]="files"
+                                        (onRemove)="onRemoveClick($event)"
+                                        [badgeValue]="pendingLabel"
+                                        [previewWidth]="previewWidth()"
+                                        [fileRemoveIconTemplate]="cancelIconTemplate || _cancelIconTemplate"
+                                    ></div>
+                                }
+                            </div>
+                        }
+                        @if (hasUploadedFiles()) {
+                            <div [class]="cx('fileList')" [pBind]="ptm('fileList')">
+                                @for (file of uploadedFiles; track file) {
+                                    <ng-container *ngTemplateOutlet="fileTemplate() || _fileTemplate; context: { $implicit: file }"></ng-container>
+                                }
+                                @if (!fileTemplate() && !_fileTemplate) {
+                                    <div
+                                        pFileContent
+                                        [unstyled]="unstyled()"
+                                        [files]="uploadedFiles"
+                                        (onRemove)="onRemoveUploadedFileClick($event)"
+                                        [badgeValue]="completedLabel()"
+                                        badgeSeverity="success"
+                                        [previewWidth]="previewWidth()"
+                                        [fileRemoveIconTemplate]="cancelIconTemplate || _cancelIconTemplate"
+                                    ></div>
+                                }
+                            </div>
+                        }
+                    }
+                    @if ((emptyTemplate || _emptyTemplate) && !hasFiles() && !hasUploadedFiles()) {
+                        <ng-container *ngTemplateOutlet="emptyTemplate || _emptyTemplate" [pBind]="ptm('empty')"></ng-container>
+                    }
+                </div>
+            </div>
+        }
+        @if (mode() === 'basic') {
+            <div [class]="cn(cx('root'), styleClass())" [pBind]="ptm('root')">
+                @for (message of msgs; track message) {
+                    <p-message [severity]="message.severity" [text]="message.text" [pt]="ptm('pcMessage')" [unstyled]="unstyled()"></p-message>
+                }
+
+                <div [class]="cx('basicContent')" [pBind]="ptm('basicContent')">
+                    <p-button
+                        [styleClass]="cn(cx('pcChooseButton'), chooseStyleClass())"
+                        [disabled]="disabled()"
+                        [label]="chooseButtonLabel"
+                        [style]="style()"
+                        (onClick)="onBasicUploaderClick()"
+                        (keydown)="onBasicKeydown($event)"
+                        [buttonProps]="chooseButtonProps()"
+                        [pt]="ptm('pcChooseButton')"
+                        [unstyled]="unstyled()"
+                    >
+                        <ng-template #icon>
+                            @if (hasFiles() && !auto()) {
+                                @if (uploadIcon()) {
+                                    <span class="p-button-icon p-button-icon-left" [ngClass]="uploadIcon()" [pBind]="ptm('pcChooseButton')?.icon"></span>
+                                }
+                                @if (!uploadIcon()) {
+                                    <ng-container>
+                                        @if (!uploadIconTemplate && !_uploadIconTemplate) {
+                                            <svg data-p-icon="upload" [class]="'p-button-icon p-button-icon-left'" [pBind]="ptm('pcChooseButton')?.icon" />
+                                        }
+                                        @if (_uploadIconTemplate || uploadIconTemplate) {
+                                            <span class="p-button-icon p-button-icon-left" [pBind]="ptm('pcChooseButton')?.icon">
+                                                <ng-template *ngTemplateOutlet="_uploadIconTemplate || uploadIconTemplate"></ng-template>
+                                            </span>
+                                        }
+                                    </ng-container>
+                                }
+                            } @else {
+                                @if (chooseIcon()) {
+                                    <span class="p-button-icon p-button-icon-left pi" [ngClass]="chooseIcon()" [pBind]="ptm('pcChooseButton')?.icon"></span>
+                                }
+                                @if (!chooseIcon()) {
+                                    <ng-container>
+                                        @if (!chooseIconTemplate && !_chooseIconTemplate) {
+                                            <svg data-p-icon="plus" [pBind]="ptm('pcChooseButton')?.icon" />
+                                        }
+                                        <ng-template *ngTemplateOutlet="chooseIconTemplate || _chooseIconTemplate"></ng-template>
+                                    </ng-container>
+                                }
+                            }
+                        </ng-template>
+                        <input
+                            [attr.aria-label]="browseFilesLabel"
+                            #basicfileinput
+                            type="file"
+                            [accept]="accept()"
+                            [multiple]="multiple()"
+                            [disabled]="disabled()"
+                            (change)="onFileSelect($event)"
+                            (focus)="onFocus()"
+                            (blur)="onBlur()"
+                            [pBind]="ptm('input')"
+                        />
+                    </p-button>
+                    @if (!auto()) {
+                        @if (!fileLabelTemplate() && !_fileLabelTemplate) {
+                            <span>
+                                {{ basicFileChosenLabel() }}
+                            </span>
+                        } @else {
+                            <ng-container *ngTemplateOutlet="fileLabelTemplate() || _fileLabelTemplate; context: { $implicit: files }"></ng-container>
+                        }
+                    }
+                </div>
+            </div>
+        }
+    `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    providers: [FileUploadStyle, { provide: FILEUPLOAD_INSTANCE, useExisting: FileUpload }, { provide: PARENT_INSTANCE, useExisting: FileUpload }],
+                    hostDirectives: [Bind]
+                }]
+        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], url: [{ type: i0.Input, args: [{ isSignal: true, alias: "url", required: false }] }], method: [{ type: i0.Input, args: [{ isSignal: true, alias: "method", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], auto: [{ type: i0.Input, args: [{ isSignal: true, alias: "auto", required: false }] }], withCredentials: [{ type: i0.Input, args: [{ isSignal: true, alias: "withCredentials", required: false }] }], maxFileSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFileSize", required: false }] }], invalidFileSizeMessageSummary: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalidFileSizeMessageSummary", required: false }] }], invalidFileSizeMessageDetail: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalidFileSizeMessageDetail", required: false }] }], invalidFileTypeMessageSummary: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalidFileTypeMessageSummary", required: false }] }], invalidFileTypeMessageDetail: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalidFileTypeMessageDetail", required: false }] }], invalidFileLimitMessageDetail: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalidFileLimitMessageDetail", required: false }] }], invalidFileLimitMessageSummary: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalidFileLimitMessageSummary", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], previewWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "previewWidth", required: false }] }], chooseLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "chooseLabel", required: false }] }], uploadLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadLabel", required: false }] }], cancelLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelLabel", required: false }] }], chooseIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "chooseIcon", required: false }] }], uploadIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadIcon", required: false }] }], cancelIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelIcon", required: false }] }], showUploadButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showUploadButton", required: false }] }], showCancelButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCancelButton", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], headers: [{ type: i0.Input, args: [{ isSignal: true, alias: "headers", required: false }] }], customUpload: [{ type: i0.Input, args: [{ isSignal: true, alias: "customUpload", required: false }] }], fileLimit: [{ type: i0.Input, args: [{ isSignal: true, alias: "fileLimit", required: false }] }], uploadStyleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadStyleClass", required: false }] }], cancelStyleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelStyleClass", required: false }] }], removeStyleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeStyleClass", required: false }] }], chooseStyleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "chooseStyleClass", required: false }] }], chooseButtonProps: [{ type: i0.Input, args: [{ isSignal: true, alias: "chooseButtonProps", required: false }] }], uploadButtonProps: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadButtonProps", required: false }] }], cancelButtonProps: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelButtonProps", required: false }] }], onBeforeUpload: [{ type: i0.Output, args: ["onBeforeUpload"] }], onSend: [{ type: i0.Output, args: ["onSend"] }], onUpload: [{ type: i0.Output, args: ["onUpload"] }], onError: [{ type: i0.Output, args: ["onError"] }], onClear: [{ type: i0.Output, args: ["onClear"] }], onRemove: [{ type: i0.Output, args: ["onRemove"] }], onSelect: [{ type: i0.Output, args: ["onSelect"] }], onProgress: [{ type: i0.Output, args: ["onProgress"] }], uploadHandler: [{ type: i0.Output, args: ["uploadHandler"] }], onImageError: [{ type: i0.Output, args: ["onImageError"] }], onRemoveUploadedFile: [{ type: i0.Output, args: ["onRemoveUploadedFile"] }], fileTemplate: [{ type: i0.ContentChild, args: ['file', { ...{ descendants: false }, isSignal: true }] }], headerTemplate: [{ type: i0.ContentChild, args: ['header', { ...{ descendants: false }, isSignal: true }] }], contentTemplate: [{
+                type: ContentChild,
+                args: ['content', { descendants: false }]
+            }], toolbarTemplate: [{ type: i0.ContentChild, args: ['toolbar', { ...{ descendants: false }, isSignal: true }] }], chooseIconTemplate: [{
+                type: ContentChild,
+                args: ['chooseicon', { descendants: false }]
+            }], fileLabelTemplate: [{ type: i0.ContentChild, args: ['filelabel', { ...{ descendants: false }, isSignal: true }] }], uploadIconTemplate: [{
+                type: ContentChild,
+                args: ['uploadicon', { descendants: false }]
+            }], cancelIconTemplate: [{
+                type: ContentChild,
+                args: ['cancelicon', { descendants: false }]
+            }], emptyTemplate: [{
+                type: ContentChild,
+                args: ['empty', { descendants: false }]
+            }], advancedFileInput: [{
+                type: ViewChild,
+                args: ['advancedfileinput']
+            }], basicFileInput: [{ type: i0.ViewChild, args: ['basicfileinput', { isSignal: true }] }], content: [{ type: i0.ViewChild, args: ['content', { isSignal: true }] }], inputFiles: [{ type: i0.Input, args: [{ isSignal: true, alias: "files", required: false }] }], templates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => PrimeTemplate), { isSignal: true }] }] } });
+class FileUploadModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: FileUploadModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.2", ngImport: i0, type: FileUploadModule, imports: [FileUpload, FileUploadDirective, FileUploadClearDirective, FileUploadQueueDirective, FileUploadChooseDirective, FileUploadUploadDirective, FileUploadCancelDirective, FileUploadDropZoneDirective, SharedModule], exports: [FileUpload, FileUploadDirective, FileUploadClearDirective, FileUploadQueueDirective, FileUploadChooseDirective, FileUploadUploadDirective, FileUploadCancelDirective, FileUploadDropZoneDirective, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: FileUploadModule, imports: [FileUpload, SharedModule, SharedModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: FileUploadModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [FileUpload, FileUploadDirective, FileUploadClearDirective, FileUploadQueueDirective, FileUploadChooseDirective, FileUploadUploadDirective, FileUploadCancelDirective, FileUploadDropZoneDirective, SharedModule],
+                    exports: [FileUpload, FileUploadDirective, FileUploadClearDirective, FileUploadQueueDirective, FileUploadChooseDirective, FileUploadUploadDirective, FileUploadCancelDirective, FileUploadDropZoneDirective, SharedModule]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FileContent, FileUpload, FileUploadCancelDirective, FileUploadChooseDirective, FileUploadClasses, FileUploadClearDirective, FileUploadDirective, FileUploadDropZoneDirective, FileUploadModule, FileUploadQueueDirective, FileUploadStyle, FileUploadUploadDirective };
+//# sourceMappingURL=wawjs-ngx-prime-fileupload.mjs.map