primeng 17.15.0 → 17.16.0

package/fesm2022/primeng-fileupload.mjs

@@ -294,11 +294,13 @@ class FileUpload {
     dragHighlight;
     msgs;
     fileTemplate;
+    headerTemplate;
     contentTemplate;
     toolbarTemplate;
     chooseIconTemplate;
     uploadIconTemplate;
     cancelIconTemplate;
+    emptyTemplate;
     uploadedFileCount = 0;
     focus;
     uploading;
@@ -319,6 +321,9 @@ class FileUpload {
     ngAfterContentInit() {
         this.templates?.forEach((item) => {
             switch (item.getType()) {
+                case 'header':
+                    this.headerTemplate = item.template;
+                    break;
                 case 'file':
                     this.fileTemplate = item.template;
                     break;
@@ -337,6 +342,9 @@ class FileUpload {
                 case 'cancelicon':
                     this.cancelIconTemplate = item.template;
                     break;
+                case 'empty':
+                    this.emptyTemplate = item.template;
+                    break;
                 default:
                     this.fileTemplate = item.template;
                     break;
@@ -680,61 +688,63 @@ class FileUpload {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: FileUpload, deps: [{ token: DOCUMENT }, { token: PLATFORM_ID }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i1.DomSanitizer }, { token: i0.NgZone }, { token: i2.HttpClient }, { token: i0.ChangeDetectorRef }, { token: i3.PrimeNGConfig }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.3.1", type: FileUpload, selector: "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", numberAttribute], uploadStyleClass: "uploadStyleClass", cancelStyleClass: "cancelStyleClass", removeStyleClass: "removeStyleClass", chooseStyleClass: "chooseStyleClass", files: "files" }, outputs: { onBeforeUpload: "onBeforeUpload", onSend: "onSend", onUpload: "onUpload", onError: "onError", onClear: "onClear", onRemove: "onRemove", onSelect: "onSelect", onProgress: "onProgress", uploadHandler: "uploadHandler", onImageError: "onImageError" }, host: { classAttribute: "p-element" }, queries: [{ 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 }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.3.1", type: FileUpload, selector: "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, null)], uploadStyleClass: "uploadStyleClass", cancelStyleClass: "cancelStyleClass", removeStyleClass: "removeStyleClass", chooseStyleClass: "chooseStyleClass", files: "files" }, outputs: { onBeforeUpload: "onBeforeUpload", onSend: "onSend", onUpload: "onUpload", onError: "onError", onClear: "onClear", onRemove: "onRemove", onSelect: "onSelect", onProgress: "onProgress", uploadHandler: "uploadHandler", onImageError: "onImageError" }, host: { classAttribute: "p-element" }, queries: [{ 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 }], ngImport: i0, template: `
         <div [ngClass]="'p-fileupload p-fileupload-advanced p-component'" [ngStyle]="style" [class]="styleClass" *ngIf="mode === 'advanced'" [attr.data-pc-name]="'fileupload'" [attr.data-pc-section]="'root'">
             <div class="p-fileupload-buttonbar" [attr.data-pc-section]="'buttonbar'">
-                <span
-                    class="p-button p-component p-fileupload-choose"
-                    [ngClass]="{ 'p-focus': focus, 'p-disabled': disabled || isChooseDisabled() }"
-                    (focus)="onFocus()"
-                    (blur)="onBlur()"
-                    pRipple
-                    (click)="choose()"
-                    (keydown.enter)="choose()"
-                    tabindex="0"
-                    [class]="chooseStyleClass"
-                    [attr.data-pc-section]="'choosebutton'"
-                >
-                    <input
-                        [attr.aria-label]="browseFilesLabel"
-                        #advancedfileinput
-                        type="file"
-                        (change)="onFileSelect($event)"
-                        [multiple]="multiple"
-                        [accept]="accept"
-                        [disabled]="disabled || isChooseDisabled()"
-                        [attr.title]="''"
-                        [attr.data-pc-section]="'input'"
-                    />
-                    <span *ngIf="chooseIcon" [ngClass]="'p-button-icon p-button-icon-left'" [class]="chooseIcon" [attr.aria-label]="true" [attr.data-pc-section]="'chooseicon'"></span>
-                    <ng-container *ngIf="!chooseIcon">
-                        <PlusIcon *ngIf="!chooseIconTemplate" [styleClass]="'p-button-icon p-button-icon-left'" [attr.aria-label]="true" [attr.data-pc-section]="'chooseicon'" />
-                        <span *ngIf="chooseIconTemplate" class="p-button-icon p-button-icon-left" [attr.aria-label]="true" [attr.data-pc-section]="'chooseicon'">
-                            <ng-template *ngTemplateOutlet="chooseIconTemplate"></ng-template>
-                        </span>
-                    </ng-container>
-                    <span class="p-button-label" [attr.data-pc-section]="'choosebuttonlabel'">{{ chooseButtonLabel }}</span>
-                </span>
-
-                <p-button *ngIf="!auto && showUploadButton" type="button" [label]="uploadButtonLabel" (onClick)="upload()" [disabled]="!hasFiles() || isFileLimitExceeded()" [styleClass]="uploadStyleClass">
-                    <span *ngIf="uploadIcon" [ngClass]="uploadIcon" [attr.aria-hidden]="true" class="p-button-icon p-button-icon-left"></span>
-                    <ng-container *ngIf="!uploadIcon">
-                        <UploadIcon *ngIf="!uploadIconTemplate" [styleClass]="'p-button-icon p-button-icon-left'" />
-                        <span *ngIf="uploadIconTemplate" class="p-button-icon p-button-icon-left" [attr.aria-hidden]="true">
-                            <ng-template *ngTemplateOutlet="uploadIconTemplate"></ng-template>
-                        </span>
-                    </ng-container>
-                </p-button>
-                <p-button *ngIf="!auto && showCancelButton" type="button" [label]="cancelButtonLabel" (onClick)="clear()" [disabled]="!hasFiles() || uploading" [styleClass]="cancelStyleClass">
-                    <span *ngIf="cancelIcon" [ngClass]="cancelIcon" class="p-button-icon p-button-icon-left"></span>
-                    <ng-container *ngIf="!cancelIcon">
-                        <TimesIcon *ngIf="!cancelIconTemplate" [styleClass]="'p-button-icon p-button-icon-left'" [attr.aria-hidden]="true" />
-                        <span *ngIf="cancelIconTemplate" class="p-button-icon p-button-icon-left" [attr.aria-hidden]="true">
-                            <ng-template *ngTemplateOutlet="cancelIconTemplate"></ng-template>
-                        </span>
-                    </ng-container>
-                </p-button>
+                <ng-container *ngIf="!headerTemplate">
+                    <span
+                        class="p-button p-component p-fileupload-choose"
+                        [ngClass]="{ 'p-focus': focus, 'p-disabled': disabled || isChooseDisabled() }"
+                        (focus)="onFocus()"
+                        (blur)="onBlur()"
+                        pRipple
+                        (click)="choose()"
+                        (keydown.enter)="choose()"
+                        tabindex="0"
+                        [class]="chooseStyleClass"
+                        [attr.data-pc-section]="'choosebutton'"
+                    >
+                        <input
+                            [attr.aria-label]="browseFilesLabel"
+                            #advancedfileinput
+                            type="file"
+                            (change)="onFileSelect($event)"
+                            [multiple]="multiple"
+                            [accept]="accept"
+                            [disabled]="disabled || isChooseDisabled()"
+                            [attr.title]="''"
+                            [attr.data-pc-section]="'input'"
+                        />
+                        <span *ngIf="chooseIcon" [ngClass]="'p-button-icon p-button-icon-left'" [class]="chooseIcon" [attr.aria-label]="true" [attr.data-pc-section]="'chooseicon'"></span>
+                        <ng-container *ngIf="!chooseIcon">
+                            <PlusIcon *ngIf="!chooseIconTemplate" [styleClass]="'p-button-icon p-button-icon-left'" [attr.aria-label]="true" [attr.data-pc-section]="'chooseicon'" />
+                            <span *ngIf="chooseIconTemplate" class="p-button-icon p-button-icon-left" [attr.aria-label]="true" [attr.data-pc-section]="'chooseicon'">
+                                <ng-template *ngTemplateOutlet="chooseIconTemplate"></ng-template>
+                            </span>
+                        </ng-container>
+                        <span class="p-button-label" [attr.data-pc-section]="'choosebuttonlabel'">{{ chooseButtonLabel }}</span>
+                    </span>
 
+                    <p-button *ngIf="!auto && showUploadButton" type="button" [label]="uploadButtonLabel" (onClick)="upload()" [disabled]="!hasFiles() || isFileLimitExceeded()" [styleClass]="uploadStyleClass">
+                        <span *ngIf="uploadIcon" [ngClass]="uploadIcon" [attr.aria-hidden]="true" class="p-button-icon p-button-icon-left"></span>
+                        <ng-container *ngIf="!uploadIcon">
+                            <UploadIcon *ngIf="!uploadIconTemplate" [styleClass]="'p-button-icon p-button-icon-left'" />
+                            <span *ngIf="uploadIconTemplate" class="p-button-icon p-button-icon-left" [attr.aria-hidden]="true">
+                                <ng-template *ngTemplateOutlet="uploadIconTemplate"></ng-template>
+                            </span>
+                        </ng-container>
+                    </p-button>
+                    <p-button *ngIf="!auto && showCancelButton" type="button" [label]="cancelButtonLabel" (onClick)="clear()" [disabled]="!hasFiles() || uploading" [styleClass]="cancelStyleClass">
+                        <span *ngIf="cancelIcon" [ngClass]="cancelIcon" class="p-button-icon p-button-icon-left"></span>
+                        <ng-container *ngIf="!cancelIcon">
+                            <TimesIcon *ngIf="!cancelIconTemplate" [styleClass]="'p-button-icon p-button-icon-left'" [attr.aria-hidden]="true" />
+                            <span *ngIf="cancelIconTemplate" class="p-button-icon p-button-icon-left" [attr.aria-hidden]="true">
+                                <ng-template *ngTemplateOutlet="cancelIconTemplate"></ng-template>
+                            </span>
+                        </ng-container>
+                    </p-button>
+                </ng-container>
+                <ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
                 <ng-container *ngTemplateOutlet="toolbarTemplate"></ng-container>
             </div>
             <div #content class="p-fileupload-content" (dragenter)="onDragEnter($event)" (dragleave)="onDragLeave($event)" (drop)="onDrop($event)" [attr.data-pc-section]="'content'">
@@ -761,6 +771,9 @@ class FileUpload {
                     </div>
                 </div>
                 <ng-container *ngTemplateOutlet="contentTemplate; context: { $implicit: files }"></ng-container>
+                <div *ngIf="emptyTemplate && !hasFiles() && !uploadedFileCount" class="p-fileupload-empty">
+                    <ng-container *ngTemplateOutlet="emptyTemplate"></ng-container>
+                </div>
             </div>
         </div>
         <div class="p-fileupload p-fileupload-basic p-component" *ngIf="mode === 'basic'" [attr.data-pc-name]="'fileupload'">
@@ -816,58 +829,60 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImpor
             args: [{ selector: 'p-fileUpload', template: `
         <div [ngClass]="'p-fileupload p-fileupload-advanced p-component'" [ngStyle]="style" [class]="styleClass" *ngIf="mode === 'advanced'" [attr.data-pc-name]="'fileupload'" [attr.data-pc-section]="'root'">
             <div class="p-fileupload-buttonbar" [attr.data-pc-section]="'buttonbar'">
-                <span
-                    class="p-button p-component p-fileupload-choose"
-                    [ngClass]="{ 'p-focus': focus, 'p-disabled': disabled || isChooseDisabled() }"
-                    (focus)="onFocus()"
-                    (blur)="onBlur()"
-                    pRipple
-                    (click)="choose()"
-                    (keydown.enter)="choose()"
-                    tabindex="0"
-                    [class]="chooseStyleClass"
-                    [attr.data-pc-section]="'choosebutton'"
-                >
-                    <input
-                        [attr.aria-label]="browseFilesLabel"
-                        #advancedfileinput
-                        type="file"
-                        (change)="onFileSelect($event)"
-                        [multiple]="multiple"
-                        [accept]="accept"
-                        [disabled]="disabled || isChooseDisabled()"
-                        [attr.title]="''"
-                        [attr.data-pc-section]="'input'"
-                    />
-                    <span *ngIf="chooseIcon" [ngClass]="'p-button-icon p-button-icon-left'" [class]="chooseIcon" [attr.aria-label]="true" [attr.data-pc-section]="'chooseicon'"></span>
-                    <ng-container *ngIf="!chooseIcon">
-                        <PlusIcon *ngIf="!chooseIconTemplate" [styleClass]="'p-button-icon p-button-icon-left'" [attr.aria-label]="true" [attr.data-pc-section]="'chooseicon'" />
-                        <span *ngIf="chooseIconTemplate" class="p-button-icon p-button-icon-left" [attr.aria-label]="true" [attr.data-pc-section]="'chooseicon'">
-                            <ng-template *ngTemplateOutlet="chooseIconTemplate"></ng-template>
-                        </span>
-                    </ng-container>
-                    <span class="p-button-label" [attr.data-pc-section]="'choosebuttonlabel'">{{ chooseButtonLabel }}</span>
-                </span>
-
-                <p-button *ngIf="!auto && showUploadButton" type="button" [label]="uploadButtonLabel" (onClick)="upload()" [disabled]="!hasFiles() || isFileLimitExceeded()" [styleClass]="uploadStyleClass">
-                    <span *ngIf="uploadIcon" [ngClass]="uploadIcon" [attr.aria-hidden]="true" class="p-button-icon p-button-icon-left"></span>
-                    <ng-container *ngIf="!uploadIcon">
-                        <UploadIcon *ngIf="!uploadIconTemplate" [styleClass]="'p-button-icon p-button-icon-left'" />
-                        <span *ngIf="uploadIconTemplate" class="p-button-icon p-button-icon-left" [attr.aria-hidden]="true">
-                            <ng-template *ngTemplateOutlet="uploadIconTemplate"></ng-template>
-                        </span>
-                    </ng-container>
-                </p-button>
-                <p-button *ngIf="!auto && showCancelButton" type="button" [label]="cancelButtonLabel" (onClick)="clear()" [disabled]="!hasFiles() || uploading" [styleClass]="cancelStyleClass">
-                    <span *ngIf="cancelIcon" [ngClass]="cancelIcon" class="p-button-icon p-button-icon-left"></span>
-                    <ng-container *ngIf="!cancelIcon">
-                        <TimesIcon *ngIf="!cancelIconTemplate" [styleClass]="'p-button-icon p-button-icon-left'" [attr.aria-hidden]="true" />
-                        <span *ngIf="cancelIconTemplate" class="p-button-icon p-button-icon-left" [attr.aria-hidden]="true">
-                            <ng-template *ngTemplateOutlet="cancelIconTemplate"></ng-template>
-                        </span>
-                    </ng-container>
-                </p-button>
+                <ng-container *ngIf="!headerTemplate">
+                    <span
+                        class="p-button p-component p-fileupload-choose"
+                        [ngClass]="{ 'p-focus': focus, 'p-disabled': disabled || isChooseDisabled() }"
+                        (focus)="onFocus()"
+                        (blur)="onBlur()"
+                        pRipple
+                        (click)="choose()"
+                        (keydown.enter)="choose()"
+                        tabindex="0"
+                        [class]="chooseStyleClass"
+                        [attr.data-pc-section]="'choosebutton'"
+                    >
+                        <input
+                            [attr.aria-label]="browseFilesLabel"
+                            #advancedfileinput
+                            type="file"
+                            (change)="onFileSelect($event)"
+                            [multiple]="multiple"
+                            [accept]="accept"
+                            [disabled]="disabled || isChooseDisabled()"
+                            [attr.title]="''"
+                            [attr.data-pc-section]="'input'"
+                        />
+                        <span *ngIf="chooseIcon" [ngClass]="'p-button-icon p-button-icon-left'" [class]="chooseIcon" [attr.aria-label]="true" [attr.data-pc-section]="'chooseicon'"></span>
+                        <ng-container *ngIf="!chooseIcon">
+                            <PlusIcon *ngIf="!chooseIconTemplate" [styleClass]="'p-button-icon p-button-icon-left'" [attr.aria-label]="true" [attr.data-pc-section]="'chooseicon'" />
+                            <span *ngIf="chooseIconTemplate" class="p-button-icon p-button-icon-left" [attr.aria-label]="true" [attr.data-pc-section]="'chooseicon'">
+                                <ng-template *ngTemplateOutlet="chooseIconTemplate"></ng-template>
+                            </span>
+                        </ng-container>
+                        <span class="p-button-label" [attr.data-pc-section]="'choosebuttonlabel'">{{ chooseButtonLabel }}</span>
+                    </span>
 
+                    <p-button *ngIf="!auto && showUploadButton" type="button" [label]="uploadButtonLabel" (onClick)="upload()" [disabled]="!hasFiles() || isFileLimitExceeded()" [styleClass]="uploadStyleClass">
+                        <span *ngIf="uploadIcon" [ngClass]="uploadIcon" [attr.aria-hidden]="true" class="p-button-icon p-button-icon-left"></span>
+                        <ng-container *ngIf="!uploadIcon">
+                            <UploadIcon *ngIf="!uploadIconTemplate" [styleClass]="'p-button-icon p-button-icon-left'" />
+                            <span *ngIf="uploadIconTemplate" class="p-button-icon p-button-icon-left" [attr.aria-hidden]="true">
+                                <ng-template *ngTemplateOutlet="uploadIconTemplate"></ng-template>
+                            </span>
+                        </ng-container>
+                    </p-button>
+                    <p-button *ngIf="!auto && showCancelButton" type="button" [label]="cancelButtonLabel" (onClick)="clear()" [disabled]="!hasFiles() || uploading" [styleClass]="cancelStyleClass">
+                        <span *ngIf="cancelIcon" [ngClass]="cancelIcon" class="p-button-icon p-button-icon-left"></span>
+                        <ng-container *ngIf="!cancelIcon">
+                            <TimesIcon *ngIf="!cancelIconTemplate" [styleClass]="'p-button-icon p-button-icon-left'" [attr.aria-hidden]="true" />
+                            <span *ngIf="cancelIconTemplate" class="p-button-icon p-button-icon-left" [attr.aria-hidden]="true">
+                                <ng-template *ngTemplateOutlet="cancelIconTemplate"></ng-template>
+                            </span>
+                        </ng-container>
+                    </p-button>
+                </ng-container>
+                <ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
                 <ng-container *ngTemplateOutlet="toolbarTemplate"></ng-container>
             </div>
             <div #content class="p-fileupload-content" (dragenter)="onDragEnter($event)" (dragleave)="onDragLeave($event)" (drop)="onDrop($event)" [attr.data-pc-section]="'content'">
@@ -894,6 +909,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImpor
                     </div>
                 </div>
                 <ng-container *ngTemplateOutlet="contentTemplate; context: { $implicit: files }"></ng-container>
+                <div *ngIf="emptyTemplate && !hasFiles() && !uploadedFileCount" class="p-fileupload-empty">
+                    <ng-container *ngTemplateOutlet="emptyTemplate"></ng-container>
+                </div>
             </div>
         </div>
         <div class="p-fileupload p-fileupload-basic p-component" *ngIf="mode === 'basic'" [attr.data-pc-name]="'fileupload'">
@@ -1020,7 +1038,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImpor
                 args: [{ transform: booleanAttribute }]
             }], fileLimit: [{
                 type: Input,
-                args: [{ transform: numberAttribute }]
+                args: [{ transform: (value) => numberAttribute(value, null) }]
             }], uploadStyleClass: [{
                 type: Input
             }], cancelStyleClass: [{