primeng 20.3.0 → 21.0.0-rc.1

package/fesm2022/primeng-fileupload.mjs

@@ -40,10 +40,10 @@ class FileUploadStyle extends BaseStyle {
     name = 'fileupload';
     style = style;
     classes = classes;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FileUploadStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FileUploadStyle });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: FileUploadStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: FileUploadStyle });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FileUploadStyle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: FileUploadStyle, decorators: [{
             type: Injectable
         }] });
 /**
@@ -128,11 +128,11 @@ class FileContent extends BaseComponent {
     _componentStyle = inject(FileUploadStyle);
     $pcFileUpload = inject(FILEUPLOAD_INSTANCE);
     onRemove = output();
-    files = input(...(ngDevMode ? [undefined, { debugName: "files" }] : []));
-    badgeSeverity = input('warn', ...(ngDevMode ? [{ debugName: "badgeSeverity" }] : []));
-    badgeValue = input(...(ngDevMode ? [undefined, { debugName: "badgeValue" }] : []));
-    previewWidth = input(50, ...(ngDevMode ? [{ debugName: "previewWidth" }] : []));
-    fileRemoveIconTemplate = input(...(ngDevMode ? [undefined, { debugName: "fileRemoveIconTemplate" }] : []));
+    files = input(undefined, { ...(ngDevMode ? { debugName: "files" } : {}) });
+    badgeSeverity = input('warn', { ...(ngDevMode ? { debugName: "badgeSeverity" } : {}) });
+    badgeValue = input(undefined, { ...(ngDevMode ? { debugName: "badgeValue" } : {}) });
+    previewWidth = input(50, { ...(ngDevMode ? { debugName: "previewWidth" } : {}) });
+    fileRemoveIconTemplate = input(undefined, { ...(ngDevMode ? { debugName: "fileRemoveIconTemplate" } : {}) });
     onRemoveClick(event, index) {
         this.onRemove.emit({ event, index });
     }
@@ -147,17 +147,17 @@ class FileContent extends BaseComponent {
         const formattedSize = (bytes / Math.pow(k, i)).toFixed(dm);
         return `${formattedSize} ${sizes[i]}`;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FileContent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", 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) {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: FileContent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", 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')" />
+            <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')">
+                <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>
@@ -170,7 +170,7 @@ class FileContent extends BaseComponent {
         </div>
     }`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.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: "20.3.4", ngImport: i0, type: FileContent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: FileContent, decorators: [{
             type: Component,
             args: [{
                     selector: '[pFileContent]',
@@ -182,9 +182,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 <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')" />
+            <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')">
+                <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>
@@ -200,7 +200,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                     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.
  * @group Components
@@ -462,47 +462,50 @@ class FileUpload extends BaseComponent {
      */
     onRemoveUploadedFile = new EventEmitter();
     /**
-     * Template for file.
+     * Custom file template.
      * @group Templates
      */
     fileTemplate;
     /**
-     * Template for header.
+     * Custom header template.
+     * @param {FileUploadHeaderTemplateContext} context - header template context.
      * @group Templates
      */
     headerTemplate;
     /**
-     * Template for content.
+     * Custom content template.
+     * @param {FileUploadContentTemplateContext} context - content template context.
      * @group Templates
      */
     contentTemplate;
     /**
-     * Template for toolbar.
+     * Custom toolbar template.
      * @group Templates
      */
     toolbarTemplate;
     /**
-     * Template for choose icon.
+     * Custom choose icon template.
      * @group Templates
      */
     chooseIconTemplate;
     /**
-     * Template for file label.
+     * Custom file label template.
+     * @param {FileUploadFileLabelTemplateContext} context - file label template context.
      * @group Templates
      */
     fileLabelTemplate;
     /**
-     * Template for upload icon.
+     * Custom upload icon template.
      * @group Templates
      */
     uploadIconTemplate;
     /**
-     * Template for cancel icon.
+     * Custom cancel icon template.
      * @group Templates
      */
     cancelIconTemplate;
     /**
-     * Template for empty state.
+     * Custom empty state template.
      * @group Templates
      */
     emptyTemplate;
@@ -892,7 +895,8 @@ class FileUpload extends BaseComponent {
     }
     onDragOver(e) {
         if (!this.disabled) {
-            addClass(this.content?.nativeElement, 'p-fileupload-highlight');
+            !this.$unstyled() && addClass(this.content?.nativeElement, 'p-fileupload-highlight');
+            this.content?.nativeElement.setAttribute('data-p-highlight', true);
             this.dragHighlight = true;
             e.stopPropagation();
             e.preventDefault();
@@ -900,12 +904,14 @@ class FileUpload extends BaseComponent {
     }
     onDragLeave(event) {
         if (!this.disabled) {
-            removeClass(this.content?.nativeElement, 'p-fileupload-highlight');
+            !this.$unstyled() && removeClass(this.content?.nativeElement, 'p-fileupload-highlight');
+            this.content?.nativeElement.setAttribute('data-p-highlight', false);
         }
     }
     onDrop(event) {
         if (!this.disabled) {
-            removeClass(this.content?.nativeElement, 'p-fileupload-highlight');
+            !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;
@@ -980,21 +986,10 @@ class FileUpload extends BaseComponent {
             this.translationSubscription.unsubscribe();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FileUpload, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: FileUpload, isStandalone: true, selector: "p-fileupload, p-fileUpload", inputs: { name: "name", url: "url", method: "method", multiple: ["multiple", "multiple", booleanAttribute], accept: "accept", disabled: ["disabled", "disabled", booleanAttribute], auto: ["auto", "auto", booleanAttribute], withCredentials: ["withCredentials", "withCredentials", booleanAttribute], maxFileSize: ["maxFileSize", "maxFileSize", numberAttribute], invalidFileSizeMessageSummary: "invalidFileSizeMessageSummary", invalidFileSizeMessageDetail: "invalidFileSizeMessageDetail", invalidFileTypeMessageSummary: "invalidFileTypeMessageSummary", invalidFileTypeMessageDetail: "invalidFileTypeMessageDetail", invalidFileLimitMessageDetail: "invalidFileLimitMessageDetail", invalidFileLimitMessageSummary: "invalidFileLimitMessageSummary", style: "style", styleClass: "styleClass", previewWidth: ["previewWidth", "previewWidth", numberAttribute], chooseLabel: "chooseLabel", uploadLabel: "uploadLabel", cancelLabel: "cancelLabel", chooseIcon: "chooseIcon", uploadIcon: "uploadIcon", cancelIcon: "cancelIcon", showUploadButton: ["showUploadButton", "showUploadButton", booleanAttribute], showCancelButton: ["showCancelButton", "showCancelButton", booleanAttribute], mode: "mode", headers: "headers", customUpload: ["customUpload", "customUpload", booleanAttribute], fileLimit: ["fileLimit", "fileLimit", (value) => numberAttribute(value, undefined)], uploadStyleClass: "uploadStyleClass", cancelStyleClass: "cancelStyleClass", removeStyleClass: "removeStyleClass", chooseStyleClass: "chooseStyleClass", chooseButtonProps: "chooseButtonProps", uploadButtonProps: "uploadButtonProps", cancelButtonProps: "cancelButtonProps", files: "files" }, 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"] }, { propertyName: "headerTemplate", first: true, predicate: ["header"] }, { propertyName: "contentTemplate", first: true, predicate: ["content"] }, { propertyName: "toolbarTemplate", first: true, predicate: ["toolbar"] }, { propertyName: "chooseIconTemplate", first: true, predicate: ["chooseicon"] }, { propertyName: "fileLabelTemplate", first: true, predicate: ["filelabel"] }, { propertyName: "uploadIconTemplate", first: true, predicate: ["uploadicon"] }, { propertyName: "cancelIconTemplate", first: true, predicate: ["cancelicon"] }, { propertyName: "emptyTemplate", first: true, predicate: ["empty"] }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "advancedFileInput", first: true, predicate: ["advancedfileinput"], descendants: true }, { propertyName: "basicFileInput", first: true, predicate: ["basicfileinput"], descendants: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true }], usesInheritance: true, hostDirectives: [{ directive: i2.Bind }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: FileUpload, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: FileUpload, isStandalone: true, selector: "p-fileupload, p-fileUpload", inputs: { name: "name", url: "url", method: "method", multiple: ["multiple", "multiple", booleanAttribute], accept: "accept", disabled: ["disabled", "disabled", booleanAttribute], auto: ["auto", "auto", booleanAttribute], withCredentials: ["withCredentials", "withCredentials", booleanAttribute], maxFileSize: ["maxFileSize", "maxFileSize", numberAttribute], invalidFileSizeMessageSummary: "invalidFileSizeMessageSummary", invalidFileSizeMessageDetail: "invalidFileSizeMessageDetail", invalidFileTypeMessageSummary: "invalidFileTypeMessageSummary", invalidFileTypeMessageDetail: "invalidFileTypeMessageDetail", invalidFileLimitMessageDetail: "invalidFileLimitMessageDetail", invalidFileLimitMessageSummary: "invalidFileLimitMessageSummary", style: "style", styleClass: "styleClass", previewWidth: ["previewWidth", "previewWidth", numberAttribute], chooseLabel: "chooseLabel", uploadLabel: "uploadLabel", cancelLabel: "cancelLabel", chooseIcon: "chooseIcon", uploadIcon: "uploadIcon", cancelIcon: "cancelIcon", showUploadButton: ["showUploadButton", "showUploadButton", booleanAttribute], showCancelButton: ["showCancelButton", "showCancelButton", booleanAttribute], mode: "mode", headers: "headers", customUpload: ["customUpload", "customUpload", booleanAttribute], fileLimit: ["fileLimit", "fileLimit", (value) => numberAttribute(value, undefined)], uploadStyleClass: "uploadStyleClass", cancelStyleClass: "cancelStyleClass", removeStyleClass: "removeStyleClass", chooseStyleClass: "chooseStyleClass", chooseButtonProps: "chooseButtonProps", uploadButtonProps: "uploadButtonProps", cancelButtonProps: "cancelButtonProps", files: "files" }, 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"] }, { propertyName: "headerTemplate", first: true, predicate: ["header"] }, { propertyName: "contentTemplate", first: true, predicate: ["content"] }, { propertyName: "toolbarTemplate", first: true, predicate: ["toolbar"] }, { propertyName: "chooseIconTemplate", first: true, predicate: ["chooseicon"] }, { propertyName: "fileLabelTemplate", first: true, predicate: ["filelabel"] }, { propertyName: "uploadIconTemplate", first: true, predicate: ["uploadicon"] }, { propertyName: "cancelIconTemplate", first: true, predicate: ["cancelicon"] }, { propertyName: "emptyTemplate", first: true, predicate: ["empty"] }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "advancedFileInput", first: true, predicate: ["advancedfileinput"], descendants: true }, { propertyName: "basicFileInput", first: true, predicate: ["basicfileinput"], descendants: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true }], usesInheritance: true, hostDirectives: [{ directive: i2.Bind }], ngImport: i0, template: `
         <div [class]="cn(cx('root'), styleClass)" [ngStyle]="style" *ngIf="mode === 'advanced'" [pBind]="ptm('root')">
-            <input
-                [attr.aria-label]="browseFilesLabel"
-                #advancedfileinput
-                type="file"
-                (change)="onFileSelect($event)"
-                [multiple]="multiple"
-                [accept]="accept"
-                [disabled]="disabled || isChooseDisabled()"
-                [attr.title]="''"
-                [style.display]="'none'"
-                [pBind]="ptm('input')"
-            />
+            <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')">
                 <ng-container *ngIf="!headerTemplate && !_headerTemplate">
                     <p-button
@@ -1007,6 +1002,7 @@ class FileUpload extends BaseComponent {
                         (keydown.enter)="choose()"
                         [buttonProps]="chooseButtonProps"
                         [pt]="ptm('pcChooseButton')"
+                        [unstyled]="unstyled()"
                     >
                         <input
                             [attr.aria-label]="browseFilesLabel"
@@ -1038,6 +1034,7 @@ class FileUpload extends BaseComponent {
                         [styleClass]="cn(cx('pcUploadButton'), uploadStyleClass)"
                         [buttonProps]="uploadButtonProps"
                         [pt]="ptm('pcUploadButton')"
+                        [unstyled]="unstyled()"
                     >
                         <ng-template #icon>
                             <span *ngIf="uploadIcon" [ngClass]="uploadIcon" [attr.aria-hidden]="true" [pBind]="ptm('pcUploadButton')?.icon"></span>
@@ -1057,6 +1054,7 @@ class FileUpload extends BaseComponent {
                         [styleClass]="cn(cx('pcCancelButton'), cancelStyleClass)"
                         [buttonProps]="cancelButtonProps"
                         [pt]="ptm('pcCancelButton')"
+                        [unstyled]="unstyled()"
                     >
                         <ng-template #icon>
                             <span *ngIf="cancelIcon" [ngClass]="cancelIcon"></span>
@@ -1103,14 +1101,22 @@ class FileUpload extends BaseComponent {
                 } @else {
                     <p-progressbar [value]="progress" [showValue]="false" *ngIf="hasFiles()" [pt]="ptm('pcProgressBar')"></p-progressbar>
                     @for (message of msgs; track message) {
-                        <p-message [severity]="message.severity" [text]="message.text" [pt]="ptm('pcMessage')"></p-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')">
                             <ng-template ngFor [ngForOf]="files" [ngForTemplate]="fileTemplate || _fileTemplate"></ng-template>
                             @if (!fileTemplate && !_fileTemplate) {
-                                <div pFileContent [files]="files" (onRemove)="onRemoveClick($event)" [badgeValue]="pendingLabel" [previewWidth]="previewWidth" [fileRemoveIconTemplate]="cancelIconTemplate || _cancelIconTemplate"></div>
+                                <div
+                                    pFileContent
+                                    [unstyled]="unstyled()"
+                                    [files]="files"
+                                    (onRemove)="onRemoveClick($event)"
+                                    [badgeValue]="pendingLabel"
+                                    [previewWidth]="previewWidth"
+                                    [fileRemoveIconTemplate]="cancelIconTemplate || _cancelIconTemplate"
+                                ></div>
                             }
                         </div>
                     }
@@ -1120,6 +1126,7 @@ class FileUpload extends BaseComponent {
                             @if (!fileTemplate && !_fileTemplate) {
                                 <div
                                     pFileContent
+                                    [unstyled]="unstyled()"
                                     [files]="uploadedFiles"
                                     (onRemove)="onRemoveUploadedFileClick($event)"
                                     [badgeValue]="completedLabel()"
@@ -1138,7 +1145,7 @@ class FileUpload extends BaseComponent {
         </div>
         <div [class]="cn(cx('root'), styleClass)" *ngIf="mode === 'basic'" [pBind]="ptm('root')">
             @for (message of msgs; track message) {
-                <p-message [severity]="message.severity" [text]="message.text" [pt]="ptm('pcMessage')"></p-message>
+                <p-message [severity]="message.severity" [text]="message.text" [pt]="ptm('pcMessage')" [unstyled]="unstyled()"></p-message>
             }
 
             <div [class]="cx('basicContent')" [pBind]="ptm('basicContent')">
@@ -1151,6 +1158,7 @@ class FileUpload extends BaseComponent {
                     (keydown)="onBasicKeydown($event)"
                     [buttonProps]="chooseButtonProps"
                     [pt]="ptm('pcChooseButton')"
+                    [unstyled]="unstyled()"
                 >
                     <ng-template #icon>
                         @if (hasFiles() && !auto) {
@@ -1182,9 +1190,9 @@ class FileUpload extends BaseComponent {
                 }
             </div>
         </div>
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.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"], 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 });
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.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: "20.3.4", ngImport: i0, type: FileUpload, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: FileUpload, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-fileupload, p-fileUpload',
@@ -1192,18 +1200,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                     imports: [CommonModule, Button, ProgressBar, Message, PlusIcon, UploadIcon, TimesIcon, SharedModule, FileContent, Bind],
                     template: `
         <div [class]="cn(cx('root'), styleClass)" [ngStyle]="style" *ngIf="mode === 'advanced'" [pBind]="ptm('root')">
-            <input
-                [attr.aria-label]="browseFilesLabel"
-                #advancedfileinput
-                type="file"
-                (change)="onFileSelect($event)"
-                [multiple]="multiple"
-                [accept]="accept"
-                [disabled]="disabled || isChooseDisabled()"
-                [attr.title]="''"
-                [style.display]="'none'"
-                [pBind]="ptm('input')"
-            />
+            <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')">
                 <ng-container *ngIf="!headerTemplate && !_headerTemplate">
                     <p-button
@@ -1216,6 +1213,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                         (keydown.enter)="choose()"
                         [buttonProps]="chooseButtonProps"
                         [pt]="ptm('pcChooseButton')"
+                        [unstyled]="unstyled()"
                     >
                         <input
                             [attr.aria-label]="browseFilesLabel"
@@ -1247,6 +1245,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                         [styleClass]="cn(cx('pcUploadButton'), uploadStyleClass)"
                         [buttonProps]="uploadButtonProps"
                         [pt]="ptm('pcUploadButton')"
+                        [unstyled]="unstyled()"
                     >
                         <ng-template #icon>
                             <span *ngIf="uploadIcon" [ngClass]="uploadIcon" [attr.aria-hidden]="true" [pBind]="ptm('pcUploadButton')?.icon"></span>
@@ -1266,6 +1265,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                         [styleClass]="cn(cx('pcCancelButton'), cancelStyleClass)"
                         [buttonProps]="cancelButtonProps"
                         [pt]="ptm('pcCancelButton')"
+                        [unstyled]="unstyled()"
                     >
                         <ng-template #icon>
                             <span *ngIf="cancelIcon" [ngClass]="cancelIcon"></span>
@@ -1312,14 +1312,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 } @else {
                     <p-progressbar [value]="progress" [showValue]="false" *ngIf="hasFiles()" [pt]="ptm('pcProgressBar')"></p-progressbar>
                     @for (message of msgs; track message) {
-                        <p-message [severity]="message.severity" [text]="message.text" [pt]="ptm('pcMessage')"></p-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')">
                             <ng-template ngFor [ngForOf]="files" [ngForTemplate]="fileTemplate || _fileTemplate"></ng-template>
                             @if (!fileTemplate && !_fileTemplate) {
-                                <div pFileContent [files]="files" (onRemove)="onRemoveClick($event)" [badgeValue]="pendingLabel" [previewWidth]="previewWidth" [fileRemoveIconTemplate]="cancelIconTemplate || _cancelIconTemplate"></div>
+                                <div
+                                    pFileContent
+                                    [unstyled]="unstyled()"
+                                    [files]="files"
+                                    (onRemove)="onRemoveClick($event)"
+                                    [badgeValue]="pendingLabel"
+                                    [previewWidth]="previewWidth"
+                                    [fileRemoveIconTemplate]="cancelIconTemplate || _cancelIconTemplate"
+                                ></div>
                             }
                         </div>
                     }
@@ -1329,6 +1337,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                             @if (!fileTemplate && !_fileTemplate) {
                                 <div
                                     pFileContent
+                                    [unstyled]="unstyled()"
                                     [files]="uploadedFiles"
                                     (onRemove)="onRemoveUploadedFileClick($event)"
                                     [badgeValue]="completedLabel()"
@@ -1347,7 +1356,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
         </div>
         <div [class]="cn(cx('root'), styleClass)" *ngIf="mode === 'basic'" [pBind]="ptm('root')">
             @for (message of msgs; track message) {
-                <p-message [severity]="message.severity" [text]="message.text" [pt]="ptm('pcMessage')"></p-message>
+                <p-message [severity]="message.severity" [text]="message.text" [pt]="ptm('pcMessage')" [unstyled]="unstyled()"></p-message>
             }
 
             <div [class]="cx('basicContent')" [pBind]="ptm('basicContent')">
@@ -1360,6 +1369,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                     (keydown)="onBasicKeydown($event)"
                     [buttonProps]="chooseButtonProps"
                     [pt]="ptm('pcChooseButton')"
+                    [unstyled]="unstyled()"
                 >
                     <ng-template #icon>
                         @if (hasFiles() && !auto) {
@@ -1546,11 +1556,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 args: [PrimeTemplate]
             }] } });
 class FileUploadModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FileUploadModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.4", ngImport: i0, type: FileUploadModule, imports: [FileUpload, SharedModule], exports: [FileUpload, SharedModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FileUploadModule, imports: [FileUpload, SharedModule, SharedModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: FileUploadModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.1", ngImport: i0, type: FileUploadModule, imports: [FileUpload, SharedModule], exports: [FileUpload, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: FileUploadModule, imports: [FileUpload, SharedModule, SharedModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FileUploadModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: FileUploadModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [FileUpload, SharedModule],