primeng 19.0.0-rc.1 → 19.0.0

package/fesm2022/primeng-fileupload.mjs

@@ -2,10 +2,10 @@ import * as i1 from '@angular/common';
 import { isPlatformBrowser, CommonModule } from '@angular/common';
 import { HttpClient, HttpEventType } from '@angular/common/http';
 import * as i0 from '@angular/core';
-import { Injectable, EventEmitter, inject, NgZone, booleanAttribute, numberAttribute, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, Output, ContentChild, ViewChild, NgModule } from '@angular/core';
+import { Injectable, EventEmitter, inject, NgZone, booleanAttribute, numberAttribute, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, Output, ContentChild, ViewChild, ContentChildren, NgModule } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import { addClass, removeClass } from '@primeuix/utils';
-import { TranslationKeys, SharedModule } from 'primeng/api';
+import { TranslationKeys, PrimeTemplate, SharedModule } from 'primeng/api';
 import { BaseComponent } from 'primeng/basecomponent';
 import { Button } from 'primeng/button';
 import { PlusIcon, UploadIcon, TimesIcon } from 'primeng/icons';
@@ -242,7 +242,7 @@ function FileUpload_div_0_ng_container_4_ng_container_5_span_2_Template(rf, ctx)
     const ctx_r1 = i0.ɵɵnextContext(4);
     i0.ɵɵattribute("aria-label", true)("data-pc-section", "chooseicon");
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.chooseiconTemplate);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.chooseIconTemplate || ctx_r1._chooseIconTemplate);
 } }
 function FileUpload_div_0_ng_container_4_ng_container_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
@@ -251,9 +251,9 @@ function FileUpload_div_0_ng_container_4_ng_container_5_Template(rf, ctx) { if (
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !ctx_r1.chooseiconTemplate);
+    i0.ɵɵproperty("ngIf", !ctx_r1.chooseIconTemplate && !ctx_r1._chooseIconTemplate);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r1.chooseiconTemplate);
+    i0.ɵɵproperty("ngIf", ctx_r1.chooseIconTemplate || ctx_r1._chooseIconTemplate);
 } }
 function FileUpload_div_0_ng_container_4_p_button_6_span_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "span", 21);
@@ -277,7 +277,7 @@ function FileUpload_div_0_ng_container_4_p_button_6_ng_container_2_span_2_Templa
     const ctx_r1 = i0.ɵɵnextContext(5);
     i0.ɵɵattribute("aria-hidden", true);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.uploadiconTemplate);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.uploadIconTemplate || ctx_r1._uploadIconTemplate);
 } }
 function FileUpload_div_0_ng_container_4_p_button_6_ng_container_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
@@ -286,9 +286,9 @@ function FileUpload_div_0_ng_container_4_p_button_6_ng_container_2_Template(rf,
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !ctx_r1.uploadiconTemplate);
+    i0.ɵɵproperty("ngIf", !ctx_r1.uploadIconTemplate && !ctx_r1._uploadIconTemplate);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r1.uploadiconTemplate);
+    i0.ɵɵproperty("ngIf", ctx_r1.uploadIconTemplate || ctx_r1._uploadIconTemplate);
 } }
 function FileUpload_div_0_ng_container_4_p_button_6_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
@@ -327,7 +327,7 @@ function FileUpload_div_0_ng_container_4_p_button_7_ng_container_2_span_2_Templa
     const ctx_r1 = i0.ɵɵnextContext(5);
     i0.ɵɵattribute("aria-hidden", true);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.canceliconTemplate);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.cancelIconTemplate || ctx_r1._cancelIconTemplate);
 } }
 function FileUpload_div_0_ng_container_4_p_button_7_ng_container_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
@@ -336,9 +336,9 @@ function FileUpload_div_0_ng_container_4_p_button_7_ng_container_2_Template(rf,
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !ctx_r1.canceliconTemplate);
+    i0.ɵɵproperty("ngIf", !ctx_r1.cancelIconTemplate && !ctx_r1._cancelIconTemplate);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r1.canceliconTemplate);
+    i0.ɵɵproperty("ngIf", ctx_r1.cancelIconTemplate || ctx_r1._cancelIconTemplate);
 } }
 function FileUpload_div_0_ng_container_4_p_button_7_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
@@ -422,9 +422,9 @@ function FileUpload_div_0_div_12_Conditional_1_div_0_ng_template_9_Template(rf,
     i0.ɵɵtemplate(0, FileUpload_div_0_div_12_Conditional_1_div_0_ng_template_9_TimesIcon_0_Template, 1, 0, "TimesIcon", 9)(1, FileUpload_div_0_div_12_Conditional_1_div_0_ng_template_9_1_Template, 1, 0, null, 11);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(5);
-    i0.ɵɵproperty("ngIf", !ctx_r1.canceliconTemplate);
+    i0.ɵɵproperty("ngIf", !ctx_r1.cancelIconTemplate && !ctx_r1._cancelIconTemplate);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.canceliconTemplate);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.cancelIconTemplate || ctx_r1._cancelIconTemplate);
 } }
 function FileUpload_div_0_div_12_Conditional_1_div_0_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
@@ -463,7 +463,7 @@ function FileUpload_div_0_div_12_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtemplate(0, FileUpload_div_0_div_12_Conditional_2_ng_template_0_Template, 0, 0, "ng-template", 25);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("ngForOf", ctx_r1.files)("ngForTemplate", ctx_r1.fileTemplate);
+    i0.ɵɵproperty("ngForOf", ctx_r1.files)("ngForTemplate", ctx_r1.fileTemplate || ctx_r1._fileTemplate);
 } }
 function FileUpload_div_0_div_12_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 23);
@@ -472,9 +472,9 @@ function FileUpload_div_0_div_12_Template(rf, ctx) { if (rf & 1) {
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(!ctx_r1.fileTemplate ? 1 : -1);
+    i0.ɵɵconditional(!ctx_r1.fileTemplate && !ctx_r1._fileTemplate ? 1 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.fileTemplate ? 2 : -1);
+    i0.ɵɵconditional(ctx_r1.fileTemplate || ctx_r1._fileTemplate ? 2 : -1);
 } }
 function FileUpload_div_0_ng_container_13_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
@@ -486,7 +486,7 @@ function FileUpload_div_0_Conditional_14_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtemplate(0, FileUpload_div_0_Conditional_14_ng_container_0_Template, 1, 0, "ng-container", 11);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.emptyTemplate);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.emptyTemplate || ctx_r1._emptyTemplate);
 } }
 function FileUpload_div_0_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
@@ -512,11 +512,11 @@ function FileUpload_div_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵproperty("multiple", ctx_r1.multiple)("accept", ctx_r1.accept)("disabled", ctx_r1.disabled || ctx_r1.isChooseDisabled());
     i0.ɵɵattribute("aria-label", ctx_r1.browseFilesLabel)("title", "")("data-pc-section", "input");
     i0.ɵɵadvance(3);
-    i0.ɵɵproperty("ngIf", !ctx_r1.headerTemplate);
+    i0.ɵɵproperty("ngIf", !ctx_r1.headerTemplate && !ctx_r1._headerTemplate);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.headerTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction5(24, _c11, ctx_r1.files, ctx_r1.uploadedFiles, ctx_r1.choose.bind(ctx_r1), ctx_r1.clear.bind(ctx_r1), ctx_r1.upload.bind(ctx_r1)));
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.headerTemplate || ctx_r1._headerTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction5(24, _c11, ctx_r1.files, ctx_r1.uploadedFiles, ctx_r1.choose.bind(ctx_r1), ctx_r1.clear.bind(ctx_r1), ctx_r1.upload.bind(ctx_r1)));
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.toolbarTemplate);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.toolbarTemplate || ctx_r1._toolbarTemplate);
     i0.ɵɵadvance();
     i0.ɵɵattribute("data-pc-section", "content");
     i0.ɵɵadvance(2);
@@ -526,9 +526,9 @@ function FileUpload_div_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngIf", ctx_r1.hasFiles());
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.contentTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction8(30, _c12, ctx_r1.files, ctx_r1.uploadedFiles, ctx_r1.choose.bind(ctx_r1), ctx_r1.clear.bind(ctx_r1), ctx_r1.removeUploadedFile.bind(ctx_r1), ctx_r1.remove.bind(ctx_r1), ctx_r1.progress, ctx_r1.msgs));
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.contentTemplate || ctx_r1._contentTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction8(30, _c12, ctx_r1.files, ctx_r1.uploadedFiles, ctx_r1.choose.bind(ctx_r1), ctx_r1.clear.bind(ctx_r1), ctx_r1.removeUploadedFile.bind(ctx_r1), ctx_r1.remove.bind(ctx_r1), ctx_r1.progress, ctx_r1.msgs));
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.emptyTemplate && !ctx_r1.hasFiles() && !ctx_r1.hasUploadedFiles() ? 14 : -1);
+    i0.ɵɵconditional(ctx_r1.emptyTemplate && ctx_r1._emptyTemplate && !ctx_r1.hasFiles() && !ctx_r1.hasUploadedFiles() ? 14 : -1);
 } }
 function FileUpload_div_1_For_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "p-message", 14);
@@ -558,7 +558,7 @@ function FileUpload_div_1_ng_template_4_Conditional_0_ng_container_1_span_2_Temp
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(5);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.uploadiconTemplate);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1._uploadIconTemplate || ctx_r1.uploadIconTemplate);
 } }
 function FileUpload_div_1_ng_template_4_Conditional_0_ng_container_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
@@ -567,9 +567,9 @@ function FileUpload_div_1_ng_template_4_Conditional_0_ng_container_1_Template(rf
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !ctx_r1.uploadiconTemplate);
+    i0.ɵɵproperty("ngIf", !ctx_r1.uploadIconTemplate && !ctx_r1._uploadIconTemplate);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r1.uploadiconTemplate);
+    i0.ɵɵproperty("ngIf", ctx_r1._uploadIconTemplate || ctx_r1.uploadIconTemplate);
 } }
 function FileUpload_div_1_ng_template_4_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtemplate(0, FileUpload_div_1_ng_template_4_Conditional_0_span_0_Template, 1, 1, "span", 36)(1, FileUpload_div_1_ng_template_4_Conditional_0_ng_container_1_Template, 3, 2, "ng-container", 9);
@@ -601,9 +601,9 @@ function FileUpload_div_1_ng_template_4_Conditional_1_ng_container_1_Template(rf
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !ctx_r1.chooseiconTemplate);
+    i0.ɵɵproperty("ngIf", !ctx_r1.chooseIconTemplate && !ctx_r1._chooseIconTemplate);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.chooseiconTemplate);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.chooseIconTemplate || ctx_r1._chooseIconTemplate);
 } }
 function FileUpload_div_1_ng_template_4_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtemplate(0, FileUpload_div_1_ng_template_4_Conditional_1_span_0_Template, 1, 1, "span", 42)(1, FileUpload_div_1_ng_template_4_Conditional_1_ng_container_1_Template, 3, 2, "ng-container", 9);
@@ -636,13 +636,13 @@ function FileUpload_div_1_Conditional_8_Conditional_1_Template(rf, ctx) { if (rf
     i0.ɵɵtemplate(0, FileUpload_div_1_Conditional_8_Conditional_1_ng_container_0_Template, 1, 0, "ng-container", 10);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.fileLabelTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c13, ctx_r1.files));
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.fileLabelTemplate || ctx_r1._fileLabelTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c13, ctx_r1.files));
 } }
 function FileUpload_div_1_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtemplate(0, FileUpload_div_1_Conditional_8_Conditional_0_Template, 2, 3, "span", 44)(1, FileUpload_div_1_Conditional_8_Conditional_1_Template, 1, 4, "ng-container");
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵconditional(!ctx_r1.fileLabelTemplate ? 0 : 1);
+    i0.ɵɵconditional(!ctx_r1.fileLabelTemplate && !ctx_r1._fileLabelTemplate ? 0 : 1);
 } }
 function FileUpload_div_1_Template(rf, ctx) { if (rf & 1) {
     const _r11 = i0.ɵɵgetCurrentView();
@@ -952,22 +952,22 @@ class FileUpload extends BaseComponent {
      * Template for choose icon.
      * @group Templates
      */
-    chooseiconTemplate;
+    chooseIconTemplate;
     /**
      * Template for file label.
      * @group Templates
      */
-    filelabelTemplate;
+    fileLabelTemplate;
     /**
      * Template for upload icon.
      * @group Templates
      */
-    uploadiconTemplate;
+    uploadIconTemplate;
     /**
      * Template for cancel icon.
      * @group Templates
      */
-    canceliconTemplate;
+    cancelIconTemplate;
     /**
      * Template for empty state.
      * @group Templates
@@ -1030,6 +1030,52 @@ class FileUpload extends BaseComponent {
             }
         }
     }
+    _headerTemplate;
+    _contentTemplate;
+    _toolbarTemplate;
+    _chooseIconTemplate;
+    _uploadIconTemplate;
+    _cancelIconTemplate;
+    _emptyTemplate;
+    _fileTemplate;
+    _fileLabelTemplate;
+    templates;
+    ngAfterContentInit() {
+        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;
@@ -1387,26 +1433,28 @@ class FileUpload extends BaseComponent {
     }
     static ɵfac = /*@__PURE__*/ (() => { let ɵFileUpload_BaseFactory; return function FileUpload_Factory(__ngFactoryType__) { return (ɵFileUpload_BaseFactory || (ɵFileUpload_BaseFactory = i0.ɵɵgetInheritedFactory(FileUpload)))(__ngFactoryType__ || FileUpload); }; })();
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FileUpload, selectors: [["p-fileupload"], ["p-fileUpload"]], contentQueries: function FileUpload_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
-            i0.ɵɵcontentQuery(dirIndex, _c0, 5);
-            i0.ɵɵcontentQuery(dirIndex, _c1, 5);
-            i0.ɵɵcontentQuery(dirIndex, _c2, 5);
-            i0.ɵɵcontentQuery(dirIndex, _c3, 5);
-            i0.ɵɵcontentQuery(dirIndex, _c4, 5);
-            i0.ɵɵcontentQuery(dirIndex, _c5, 5);
-            i0.ɵɵcontentQuery(dirIndex, _c6, 5);
-            i0.ɵɵcontentQuery(dirIndex, _c7, 5);
-            i0.ɵɵcontentQuery(dirIndex, _c8, 5);
+            i0.ɵɵcontentQuery(dirIndex, _c0, 4);
+            i0.ɵɵcontentQuery(dirIndex, _c1, 4);
+            i0.ɵɵcontentQuery(dirIndex, _c2, 4);
+            i0.ɵɵcontentQuery(dirIndex, _c3, 4);
+            i0.ɵɵcontentQuery(dirIndex, _c4, 4);
+            i0.ɵɵcontentQuery(dirIndex, _c5, 4);
+            i0.ɵɵcontentQuery(dirIndex, _c6, 4);
+            i0.ɵɵcontentQuery(dirIndex, _c7, 4);
+            i0.ɵɵcontentQuery(dirIndex, _c8, 4);
+            i0.ɵɵcontentQuery(dirIndex, PrimeTemplate, 4);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.fileTemplate = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.headerTemplate = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.contentTemplate = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.toolbarTemplate = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.chooseiconTemplate = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.filelabelTemplate = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.uploadiconTemplate = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.canceliconTemplate = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.chooseIconTemplate = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.fileLabelTemplate = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.uploadIconTemplate = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.cancelIconTemplate = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.emptyTemplate = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.templates = _t);
         } }, viewQuery: function FileUpload_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(_c9, 5);
             i0.ɵɵviewQuery(_c10, 5);
@@ -1445,7 +1493,7 @@ class FileUpload extends BaseComponent {
                 [style.display]="'none'"
             />
             <div class="p-fileupload-header">
-                <ng-container *ngIf="!headerTemplate">
+                <ng-container *ngIf="!headerTemplate && !_headerTemplate">
                     <p-button
                         [styleClass]="'p-fileupload-choose-button ' + chooseStyleClass"
                         [disabled]="disabled || isChooseDisabled()"
@@ -1471,9 +1519,9 @@ class FileUpload extends BaseComponent {
                         />
                         <span *ngIf="chooseIcon" [class]="chooseIcon" [attr.aria-label]="true" [attr.data-pc-section]="'chooseicon'"></span>
                         <ng-container *ngIf="!chooseIcon">
-                            <PlusIcon *ngIf="!chooseiconTemplate" [attr.aria-label]="true" [attr.data-pc-section]="'chooseicon'" />
-                            <span *ngIf="chooseiconTemplate" [attr.aria-label]="true" [attr.data-pc-section]="'chooseicon'">
-                                <ng-template *ngTemplateOutlet="chooseiconTemplate"></ng-template>
+                            <PlusIcon *ngIf="!chooseIconTemplate && !_chooseIconTemplate" [attr.aria-label]="true" [attr.data-pc-section]="'chooseicon'" />
+                            <span *ngIf="chooseIconTemplate || _chooseIconTemplate" [attr.aria-label]="true" [attr.data-pc-section]="'chooseicon'">
+                                <ng-template *ngTemplateOutlet="chooseIconTemplate || _chooseIconTemplate"></ng-template>
                             </span>
                         </ng-container>
                     </p-button>
@@ -1488,25 +1536,25 @@ class FileUpload extends BaseComponent {
                     >
                         <span *ngIf="uploadIcon" [ngClass]="uploadIcon" [attr.aria-hidden]="true"></span>
                         <ng-container *ngIf="!uploadIcon">
-                            <UploadIcon *ngIf="!uploadiconTemplate" />
-                            <span *ngIf="uploadiconTemplate" [attr.aria-hidden]="true">
-                                <ng-template *ngTemplateOutlet="uploadiconTemplate"></ng-template>
+                            <UploadIcon *ngIf="!uploadIconTemplate && !_uploadIconTemplate" />
+                            <span *ngIf="uploadIconTemplate || _uploadIconTemplate" [attr.aria-hidden]="true">
+                                <ng-template *ngTemplateOutlet="uploadIconTemplate || _uploadIconTemplate"></ng-template>
                             </span>
                         </ng-container>
                     </p-button>
                     <p-button *ngIf="!auto && showCancelButton" [label]="cancelButtonLabel" (onClick)="clear()" [disabled]="!hasFiles() || uploading" [styleClass]="'p-fileupload-cancel-button ' + cancelStyleClass" [buttonProps]="cancelButtonProps">
                         <span *ngIf="cancelIcon" [ngClass]="cancelIcon"></span>
                         <ng-container *ngIf="!cancelIcon">
-                            <TimesIcon *ngIf="!canceliconTemplate" [attr.aria-hidden]="true" />
-                            <span *ngIf="canceliconTemplate" [attr.aria-hidden]="true">
-                                <ng-template *ngTemplateOutlet="canceliconTemplate"></ng-template>
+                            <TimesIcon *ngIf="!cancelIconTemplate && !_cancelIconTemplate" [attr.aria-hidden]="true" />
+                            <span *ngIf="cancelIconTemplate || _cancelIconTemplate" [attr.aria-hidden]="true">
+                                <ng-template *ngTemplateOutlet="cancelIconTemplate || _cancelIconTemplate"></ng-template>
                             </span>
                         </ng-container>
                     </p-button>
                 </ng-container>
                 <ng-container
                     *ngTemplateOutlet="
-                        headerTemplate;
+                        headerTemplate || _headerTemplate;
                         context: {
                             $implicit: files,
                             uploadedFiles: uploadedFiles,
@@ -1516,7 +1564,7 @@ class FileUpload extends BaseComponent {
                         }
                     "
                 ></ng-container>
-                <ng-container *ngTemplateOutlet="toolbarTemplate"></ng-container>
+                <ng-container *ngTemplateOutlet="toolbarTemplate || _toolbarTemplate"></ng-container>
             </div>
             <div #content class="p-fileupload-content" (dragenter)="onDragEnter($event)" (dragleave)="onDragLeave($event)" (drop)="onDrop($event)" [attr.data-pc-section]="'content'">
                 <p-progressbar [value]="progress" [showValue]="false" *ngIf="hasFiles()"></p-progressbar>
@@ -1525,7 +1573,7 @@ class FileUpload extends BaseComponent {
                 }
 
                 <div class="p-fileupload-file-list" *ngIf="hasFiles()">
-                    @if (!fileTemplate) {
+                    @if (!fileTemplate && !_fileTemplate) {
                         <div class="p-fileupload-file" *ngFor="let file of files; let i = index">
                             <img [src]="file.objectURL" *ngIf="isImage(file)" [width]="previewWidth" (error)="imageError($event)" class="p-fileupload-file-thumbnail" />
                             <div class="p-fileupload-file-info">
@@ -1535,20 +1583,20 @@ class FileUpload extends BaseComponent {
                             <div class="p-fileupload-file-actions">
                                 <p-button (onClick)="remove($event, i)" [disabled]="uploading" text rounded severity="danger" [styleClass]="'p-fileupload-file-remove-button ' + removeStyleClass">
                                     <ng-template #icon>
-                                        <TimesIcon *ngIf="!canceliconTemplate" />
-                                        <ng-template *ngTemplateOutlet="canceliconTemplate"></ng-template>
+                                        <TimesIcon *ngIf="!cancelIconTemplate && !_cancelIconTemplate" />
+                                        <ng-template *ngTemplateOutlet="cancelIconTemplate || _cancelIconTemplate"></ng-template>
                                     </ng-template>
                                 </p-button>
                             </div>
                         </div>
                     }
-                    @if (fileTemplate) {
-                        <ng-template ngFor [ngForOf]="files" [ngForTemplate]="fileTemplate"></ng-template>
+                    @if (fileTemplate || _fileTemplate) {
+                        <ng-template ngFor [ngForOf]="files" [ngForTemplate]="fileTemplate || _fileTemplate"></ng-template>
                     }
                 </div>
                 <ng-container
                     *ngTemplateOutlet="
-                        contentTemplate;
+                        contentTemplate || _contentTemplate;
                         context: {
                             $implicit: files,
                             uploadedFiles: uploadedFiles,
@@ -1561,8 +1609,8 @@ class FileUpload extends BaseComponent {
                         }
                     "
                 ></ng-container>
-                @if (emptyTemplate && !hasFiles() && !hasUploadedFiles()) {
-                    <ng-container *ngTemplateOutlet="emptyTemplate"></ng-container>
+                @if (emptyTemplate && _emptyTemplate && !hasFiles() && !hasUploadedFiles()) {
+                    <ng-container *ngTemplateOutlet="emptyTemplate || _emptyTemplate"></ng-container>
                 }
             </div>
         </div>
@@ -1585,16 +1633,16 @@ class FileUpload extends BaseComponent {
                     @if (hasFiles() && !auto) {
                         <span *ngIf="uploadIcon" class="p-button-icon p-button-icon-left" [ngClass]="uploadIcon"></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">
-                                <ng-template *ngTemplateOutlet="uploadiconTemplate"></ng-template>
+                            <UploadIcon *ngIf="!uploadIconTemplate && !_uploadIconTemplate" [styleClass]="'p-button-icon p-button-icon-left'" />
+                            <span *ngIf="_uploadIconTemplate || uploadIconTemplate" class="p-button-icon p-button-icon-left">
+                                <ng-template *ngTemplateOutlet="_uploadIconTemplate || uploadIconTemplate"></ng-template>
                             </span>
                         </ng-container>
                     } @else {
                         <span *ngIf="chooseIcon" class="p-button-icon p-button-icon-left pi" [ngClass]="chooseIcon"></span>
                         <ng-container *ngIf="!chooseIcon">
-                            <PlusIcon *ngIf="!chooseiconTemplate" [attr.data-pc-section]="'uploadicon'" />
-                            <ng-template *ngTemplateOutlet="chooseiconTemplate"></ng-template>
+                            <PlusIcon *ngIf="!chooseIconTemplate && !_chooseIconTemplate" [attr.data-pc-section]="'uploadicon'" />
+                            <ng-template *ngTemplateOutlet="chooseIconTemplate || _chooseIconTemplate"></ng-template>
                         </ng-container>
                     }
                 </ng-template>
@@ -1612,12 +1660,12 @@ class FileUpload extends BaseComponent {
                 />
             </p-button>
             @if (!auto) {
-                @if (!fileLabelTemplate) {
+                @if (!fileLabelTemplate && !_fileLabelTemplate) {
                     <span [class]="cx('filelabel')">
                         {{ basicFileChosenLabel() }}
                     </span>
                 } @else {
-                    <ng-container *ngTemplateOutlet="fileLabelTemplate; context: { $implicit: files }"></ng-container>
+                    <ng-container *ngTemplateOutlet="fileLabelTemplate || _fileLabelTemplate; context: { $implicit: files }"></ng-container>
                 }
             }
         </div>
@@ -1734,31 +1782,31 @@ class FileUpload extends BaseComponent {
             type: Output
         }], fileTemplate: [{
             type: ContentChild,
-            args: ['file']
+            args: ['file', { descendants: false }]
         }], headerTemplate: [{
             type: ContentChild,
-            args: ['header']
+            args: ['header', { descendants: false }]
         }], contentTemplate: [{
             type: ContentChild,
-            args: ['content']
+            args: ['content', { descendants: false }]
         }], toolbarTemplate: [{
             type: ContentChild,
-            args: ['toolbar']
-        }], chooseiconTemplate: [{
+            args: ['toolbar', { descendants: false }]
+        }], chooseIconTemplate: [{
             type: ContentChild,
-            args: ['chooseicon']
-        }], filelabelTemplate: [{
+            args: ['chooseicon', { descendants: false }]
+        }], fileLabelTemplate: [{
             type: ContentChild,
-            args: ['filelabel']
-        }], uploadiconTemplate: [{
+            args: ['filelabel', { descendants: false }]
+        }], uploadIconTemplate: [{
             type: ContentChild,
-            args: ['uploadicon']
-        }], canceliconTemplate: [{
+            args: ['uploadicon', { descendants: false }]
+        }], cancelIconTemplate: [{
             type: ContentChild,
-            args: ['cancelicon']
+            args: ['cancelicon', { descendants: false }]
         }], emptyTemplate: [{
             type: ContentChild,
-            args: ['empty']
+            args: ['empty', { descendants: false }]
         }], advancedFileInput: [{
             type: ViewChild,
             args: ['advancedfileinput']
@@ -1770,8 +1818,11 @@ class FileUpload extends BaseComponent {
             args: ['content']
         }], files: [{
             type: Input
+        }], templates: [{
+            type: ContentChildren,
+            args: [PrimeTemplate]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FileUpload, { className: "FileUpload", filePath: "fileupload.ts", lineNumber: 241 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FileUpload, { className: "FileUpload", filePath: "fileupload.ts", lineNumber: 243 }); })();
 class FileUploadModule {
     static ɵfac = function FileUploadModule_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || FileUploadModule)(); };
     static ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: FileUploadModule });