primeng 19.0.0-rc.1 → 19.0.0

package/fesm2022/primeng-panel.mjs

@@ -2,9 +2,9 @@ import { trigger, state, style, transition, animate } from '@angular/animations'
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, EventEmitter, inject, booleanAttribute, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, Output, ContentChild, NgModule } from '@angular/core';
+import { Injectable, EventEmitter, inject, booleanAttribute, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, Output, ContentChild, ViewChild, ContentChildren, NgModule } from '@angular/core';
 import { uuid } from '@primeuix/utils';
-import { Footer, SharedModule } from 'primeng/api';
+import { Footer, PrimeTemplate, SharedModule } from 'primeng/api';
 import { BaseComponent } from 'primeng/basecomponent';
 import * as i2 from 'primeng/button';
 import { ButtonModule } from 'primeng/button';
@@ -133,24 +133,25 @@ const _c1 = ["icon"];
 const _c2 = ["content"];
 const _c3 = ["footer"];
 const _c4 = ["headericons"];
-const _c5 = ["*", [["p-header"]], [["p-footer"]]];
-const _c6 = ["*", "p-header", "p-footer"];
-const _c7 = (a0, a1) => ({ "p-panel p-component": true, "p-panel-toggleable": a0, "p-panel-expanded": a1 });
-const _c8 = a0 => ({ transitionParams: a0, height: "0", opacity: "0" });
-const _c9 = a0 => ({ value: "hidden", params: a0 });
-const _c10 = a0 => ({ transitionParams: a0, height: "*", opacity: "1" });
-const _c11 = a0 => ({ value: "visible", params: a0 });
-const _c12 = (a0, a1, a2) => ({ "p-panel-icons-start": a0, "p-panel-icons-end": a1, "p-panel-icons-center": a2 });
-const _c13 = a0 => ({ $implicit: a0 });
+const _c5 = ["contentWrapper"];
+const _c6 = ["*", [["p-header"]], [["p-footer"]]];
+const _c7 = ["*", "p-header", "p-footer"];
+const _c8 = (a0, a1) => ({ "p-panel p-component": true, "p-panel-toggleable": a0, "p-panel-expanded": a1 });
+const _c9 = a0 => ({ transitionParams: a0, height: "0", opacity: "0" });
+const _c10 = a0 => ({ value: "hidden", params: a0 });
+const _c11 = a0 => ({ transitionParams: a0, height: "*", opacity: "1" });
+const _c12 = a0 => ({ value: "visible", params: a0 });
+const _c13 = (a0, a1, a2) => ({ "p-panel-icons-start": a0, "p-panel-icons-end": a1, "p-panel-icons-center": a2 });
+const _c14 = a0 => ({ $implicit: a0 });
 function Panel_div_1_span_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 10);
+    i0.ɵɵelementStart(0, "span", 11);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵattribute("id", ctx_r1.id + "_header");
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵattribute("id", ctx_r2.id + "_header");
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(ctx_r1._header);
+    i0.ɵɵtextInterpolate(ctx_r2._header);
 } }
 function Panel_div_1_ng_container_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
@@ -162,112 +163,112 @@ function Panel_div_1_5_Template(rf, ctx) { if (rf & 1) {
 function Panel_div_1_p_button_6_ng_container_1_ng_container_1_span_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "span");
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(5);
-    i0.ɵɵclassMap(ctx_r1.expandIcon);
+    const ctx_r2 = i0.ɵɵnextContext(5);
+    i0.ɵɵclassMap(ctx_r2.expandIcon);
 } }
 function Panel_div_1_p_button_6_ng_container_1_ng_container_1_MinusIcon_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "MinusIcon");
 } }
 function Panel_div_1_p_button_6_ng_container_1_ng_container_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
-    i0.ɵɵtemplate(1, Panel_div_1_p_button_6_ng_container_1_ng_container_1_span_1_Template, 1, 2, "span", 14)(2, Panel_div_1_p_button_6_ng_container_1_ng_container_1_MinusIcon_2_Template, 1, 0, "MinusIcon", 12);
+    i0.ɵɵtemplate(1, Panel_div_1_p_button_6_ng_container_1_ng_container_1_span_1_Template, 1, 2, "span", 15)(2, Panel_div_1_p_button_6_ng_container_1_ng_container_1_MinusIcon_2_Template, 1, 0, "MinusIcon", 13);
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(4);
+    const ctx_r2 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r1.expandIcon);
+    i0.ɵɵproperty("ngIf", ctx_r2.expandIcon);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !ctx_r1.expandIcon);
+    i0.ɵɵproperty("ngIf", !ctx_r2.expandIcon);
 } }
 function Panel_div_1_p_button_6_ng_container_1_ng_container_2_span_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "span");
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(5);
-    i0.ɵɵclassMap(ctx_r1.collapseIcon);
+    const ctx_r2 = i0.ɵɵnextContext(5);
+    i0.ɵɵclassMap(ctx_r2.collapseIcon);
 } }
 function Panel_div_1_p_button_6_ng_container_1_ng_container_2_PlusIcon_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "PlusIcon");
 } }
 function Panel_div_1_p_button_6_ng_container_1_ng_container_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
-    i0.ɵɵtemplate(1, Panel_div_1_p_button_6_ng_container_1_ng_container_2_span_1_Template, 1, 2, "span", 14)(2, Panel_div_1_p_button_6_ng_container_1_ng_container_2_PlusIcon_2_Template, 1, 0, "PlusIcon", 12);
+    i0.ɵɵtemplate(1, Panel_div_1_p_button_6_ng_container_1_ng_container_2_span_1_Template, 1, 2, "span", 15)(2, Panel_div_1_p_button_6_ng_container_1_ng_container_2_PlusIcon_2_Template, 1, 0, "PlusIcon", 13);
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(4);
+    const ctx_r2 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r1.collapseIcon);
+    i0.ɵɵproperty("ngIf", ctx_r2.collapseIcon);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !ctx_r1.collapseIcon);
+    i0.ɵɵproperty("ngIf", !ctx_r2.collapseIcon);
 } }
 function Panel_div_1_p_button_6_ng_container_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
-    i0.ɵɵtemplate(1, Panel_div_1_p_button_6_ng_container_1_ng_container_1_Template, 3, 2, "ng-container", 12)(2, Panel_div_1_p_button_6_ng_container_1_ng_container_2_Template, 3, 2, "ng-container", 12);
+    i0.ɵɵtemplate(1, Panel_div_1_p_button_6_ng_container_1_ng_container_1_Template, 3, 2, "ng-container", 13)(2, Panel_div_1_p_button_6_ng_container_1_ng_container_2_Template, 3, 2, "ng-container", 13);
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(3);
+    const ctx_r2 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !ctx_r1.collapsed);
+    i0.ɵɵproperty("ngIf", !ctx_r2.collapsed);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r1.collapsed);
+    i0.ɵɵproperty("ngIf", ctx_r2.collapsed);
 } }
 function Panel_div_1_p_button_6_2_ng_template_0_Template(rf, ctx) { }
 function Panel_div_1_p_button_6_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtemplate(0, Panel_div_1_p_button_6_2_ng_template_0_Template, 0, 0, "ng-template");
 } }
 function Panel_div_1_p_button_6_Template(rf, ctx) { if (rf & 1) {
-    const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "p-button", 11);
-    i0.ɵɵlistener("click", function Panel_div_1_p_button_6_Template_p_button_click_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onIconClick($event)); })("keydown", function Panel_div_1_p_button_6_Template_p_button_keydown_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onKeyDown($event)); });
-    i0.ɵɵtemplate(1, Panel_div_1_p_button_6_ng_container_1_Template, 3, 2, "ng-container", 12)(2, Panel_div_1_p_button_6_2_Template, 1, 0, null, 13);
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "p-button", 12);
+    i0.ɵɵlistener("click", function Panel_div_1_p_button_6_Template_p_button_click_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onIconClick($event)); })("keydown", function Panel_div_1_p_button_6_Template_p_button_keydown_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onKeyDown($event)); });
+    i0.ɵɵtemplate(1, Panel_div_1_p_button_6_ng_container_1_Template, 3, 2, "ng-container", 13)(2, Panel_div_1_p_button_6_2_Template, 1, 0, null, 14);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("text", true)("rounded", true)("buttonProps", ctx_r1.toggleButtonProps);
-    i0.ɵɵattribute("id", ctx_r1.id + "_header")("aria-label", ctx_r1.buttonAriaLabel)("aria-controls", ctx_r1.id + "_content")("aria-expanded", !ctx_r1.collapsed);
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("text", true)("rounded", true)("buttonProps", ctx_r2.toggleButtonProps);
+    i0.ɵɵattribute("id", ctx_r2.id + "_header")("aria-label", ctx_r2.buttonAriaLabel)("aria-controls", ctx_r2.id + "_content")("aria-expanded", !ctx_r2.collapsed);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !ctx_r1.headericonsTemplate && !(ctx_r1.toggleButtonProps == null ? null : ctx_r1.toggleButtonProps.icon));
+    i0.ɵɵproperty("ngIf", !ctx_r2.headerIconsTemplate && !ctx_r2._headerIconsTemplate && !(ctx_r2.toggleButtonProps == null ? null : ctx_r2.toggleButtonProps.icon));
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.headericonsTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(10, _c13, ctx_r1.collapsed));
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.headerIconsTemplate || ctx_r2._headerIconsTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(10, _c14, ctx_r2.collapsed));
 } }
 function Panel_div_1_Template(rf, ctx) { if (rf & 1) {
-    const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 6);
-    i0.ɵɵlistener("click", function Panel_div_1_Template_div_click_0_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onHeaderClick($event)); });
-    i0.ɵɵtemplate(1, Panel_div_1_span_1_Template, 2, 2, "span", 7);
+    const _r2 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 7);
+    i0.ɵɵlistener("click", function Panel_div_1_Template_div_click_0_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onHeaderClick($event)); });
+    i0.ɵɵtemplate(1, Panel_div_1_span_1_Template, 2, 2, "span", 8);
     i0.ɵɵprojection(2, 1);
-    i0.ɵɵtemplate(3, Panel_div_1_ng_container_3_Template, 1, 0, "ng-container", 4);
-    i0.ɵɵelementStart(4, "div", 8);
-    i0.ɵɵtemplate(5, Panel_div_1_5_Template, 1, 0, null, 4)(6, Panel_div_1_p_button_6_Template, 3, 12, "p-button", 9);
+    i0.ɵɵtemplate(3, Panel_div_1_ng_container_3_Template, 1, 0, "ng-container", 5);
+    i0.ɵɵelementStart(4, "div", 9);
+    i0.ɵɵtemplate(5, Panel_div_1_5_Template, 1, 0, null, 5)(6, Panel_div_1_p_button_6_Template, 3, 12, "p-button", 10);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵattribute("id", ctx_r1.id + "-titlebar");
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵattribute("id", ctx_r2.id + "-titlebar");
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r1._header);
+    i0.ɵɵproperty("ngIf", ctx_r2._header);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.headerTemplate);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.headerTemplate || ctx_r2._headerTemplate);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction3(6, _c12, ctx_r1.iconPos === "start", ctx_r1.iconPos === "end", ctx_r1.iconPos === "center"));
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction3(6, _c13, ctx_r2.iconPos === "start", ctx_r2.iconPos === "end", ctx_r2.iconPos === "center"));
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.iconTemplate);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.iconTemplate || ctx_r2._iconTemplate);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r1.toggleable);
+    i0.ɵɵproperty("ngIf", ctx_r2.toggleable);
 } }
-function Panel_ng_container_5_Template(rf, ctx) { if (rf & 1) {
+function Panel_ng_container_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
 } }
-function Panel_div_6_ng_container_2_Template(rf, ctx) { if (rf & 1) {
+function Panel_div_7_ng_container_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
 } }
-function Panel_div_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 15);
+function Panel_div_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 16);
     i0.ɵɵprojection(1, 2);
-    i0.ɵɵtemplate(2, Panel_div_6_ng_container_2_Template, 1, 0, "ng-container", 4);
+    i0.ɵɵtemplate(2, Panel_div_7_ng_container_2_Template, 1, 0, "ng-container", 5);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
+    const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.footerTemplate);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.footerTemplate || ctx_r2._footerTemplate);
 } }
 /**
  * Panel is a container with the optional content toggle feature.
@@ -399,7 +400,13 @@ class Panel extends BaseComponent {
      * @see {@link PanelHeaderIconsTemplateContext}
      * @group Templates
      */
-    headericonsTemplate;
+    headerIconsTemplate;
+    _headerTemplate;
+    _iconTemplate;
+    _contentTemplate;
+    _footerTemplate;
+    _headerIconsTemplate;
+    contentWrapperViewChild;
     id = uuid('pn_id_');
     get buttonAriaLabel() {
         return this._header;
@@ -433,14 +440,29 @@ class Panel extends BaseComponent {
     expand() {
         this.collapsed = false;
         this.collapsedChange.emit(this.collapsed);
+        this.updateTabIndex();
     }
     collapse() {
         this.collapsed = true;
         this.collapsedChange.emit(this.collapsed);
+        this.updateTabIndex();
     }
     getBlockableElement() {
         return this.el.nativeElement.children[0];
     }
+    updateTabIndex() {
+        if (this.contentWrapperViewChild) {
+            const focusableElements = this.contentWrapperViewChild.nativeElement.querySelectorAll('input, button, select, a, textarea, [tabindex]:not([tabindex="-1"])');
+            focusableElements.forEach((element) => {
+                if (this.collapsed) {
+                    element.setAttribute('tabindex', '-1');
+                }
+                else {
+                    element.removeAttribute('tabindex');
+                }
+            });
+        }
+    }
     onKeyDown(event) {
         if (event.code === 'Enter' || event.code === 'Space') {
             this.toggle(event);
@@ -451,14 +473,40 @@ class Panel extends BaseComponent {
         this.animating = false;
         this.onAfterToggle.emit({ originalEvent: event, collapsed: this.collapsed });
     }
+    templates;
+    ngAfterContentInit() {
+        this.templates.forEach((item) => {
+            switch (item.getType()) {
+                case 'header':
+                    this._headerTemplate = item.template;
+                    break;
+                case 'content':
+                    this._contentTemplate = item.template;
+                    break;
+                case 'footer':
+                    this._footerTemplate = item.template;
+                    break;
+                case 'icons':
+                    this._iconTemplate = item.template;
+                    break;
+                case 'headericons':
+                    this._headerIconsTemplate = item.template;
+                    break;
+                default:
+                    this._contentTemplate = item.template;
+                    break;
+            }
+        });
+    }
     static ɵfac = /*@__PURE__*/ (() => { let ɵPanel_BaseFactory; return function Panel_Factory(__ngFactoryType__) { return (ɵPanel_BaseFactory || (ɵPanel_BaseFactory = i0.ɵɵgetInheritedFactory(Panel)))(__ngFactoryType__ || Panel); }; })();
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Panel, selectors: [["p-panel"]], contentQueries: function Panel_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
             i0.ɵɵcontentQuery(dirIndex, Footer, 5);
-            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, _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, PrimeTemplate, 4);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.footerFacet = _t.first);
@@ -466,32 +514,39 @@ class Panel extends BaseComponent {
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.iconTemplate = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.contentTemplate = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.footerTemplate = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.headericonsTemplate = _t.first);
-        } }, inputs: { toggleable: [2, "toggleable", "toggleable", booleanAttribute], _header: [0, "header", "_header"], collapsed: [2, "collapsed", "collapsed", booleanAttribute], style: "style", styleClass: "styleClass", iconPos: "iconPos", expandIcon: "expandIcon", collapseIcon: "collapseIcon", showHeader: [2, "showHeader", "showHeader", booleanAttribute], toggler: "toggler", transitionOptions: "transitionOptions", toggleButtonProps: "toggleButtonProps" }, outputs: { collapsedChange: "collapsedChange", onBeforeToggle: "onBeforeToggle", onAfterToggle: "onAfterToggle" }, features: [i0.ɵɵProvidersFeature([PanelStyle]), i0.ɵɵInputTransformsFeature, i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c6, decls: 7, vars: 25, consts: [[3, "ngClass", "ngStyle"], ["class", "p-panel-header", 3, "click", 4, "ngIf"], ["role", "region", 1, "p-panel-content-container", 3, "id"], [1, "p-panel-content"], [4, "ngTemplateOutlet"], ["class", "p-panel-footer", 4, "ngIf"], [1, "p-panel-header", 3, "click"], ["class", "p-panel-title", 4, "ngIf"], [1, "p-panel-icons", 3, "ngClass"], ["severity", "secondary", "type", "button", "role", "button", "styleClass", "p-panel-header-icon p-panel-toggler p-link", 3, "text", "rounded", "buttonProps", "click", "keydown", 4, "ngIf"], [1, "p-panel-title"], ["severity", "secondary", "type", "button", "role", "button", "styleClass", "p-panel-header-icon p-panel-toggler p-link", 3, "click", "keydown", "text", "rounded", "buttonProps"], [4, "ngIf"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], [3, "class", 4, "ngIf"], [1, "p-panel-footer"]], template: function Panel_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵprojectionDef(_c5);
-            i0.ɵɵelementStart(0, "div", 0);
-            i0.ɵɵtemplate(1, Panel_div_1_Template, 7, 10, "div", 1);
-            i0.ɵɵelementStart(2, "div", 2);
-            i0.ɵɵlistener("@panelContent.done", function Panel_Template_div_animation_panelContent_done_2_listener($event) { return ctx.onToggleDone($event); });
-            i0.ɵɵelementStart(3, "div", 3);
-            i0.ɵɵprojection(4);
-            i0.ɵɵtemplate(5, Panel_ng_container_5_Template, 1, 0, "ng-container", 4);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.headerIconsTemplate = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.templates = _t);
+        } }, viewQuery: function Panel_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuery(_c5, 5);
+        } if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.contentWrapperViewChild = _t.first);
+        } }, inputs: { toggleable: [2, "toggleable", "toggleable", booleanAttribute], _header: [0, "header", "_header"], collapsed: [2, "collapsed", "collapsed", booleanAttribute], style: "style", styleClass: "styleClass", iconPos: "iconPos", expandIcon: "expandIcon", collapseIcon: "collapseIcon", showHeader: [2, "showHeader", "showHeader", booleanAttribute], toggler: "toggler", transitionOptions: "transitionOptions", toggleButtonProps: "toggleButtonProps" }, outputs: { collapsedChange: "collapsedChange", onBeforeToggle: "onBeforeToggle", onAfterToggle: "onAfterToggle" }, features: [i0.ɵɵProvidersFeature([PanelStyle]), i0.ɵɵInputTransformsFeature, i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c7, decls: 8, vars: 25, consts: [["contentWrapper", ""], [3, "ngClass", "ngStyle"], ["class", "p-panel-header", 3, "click", 4, "ngIf"], ["role", "region", 1, "p-panel-content-container", 3, "id"], [1, "p-panel-content"], [4, "ngTemplateOutlet"], ["class", "p-panel-footer", 4, "ngIf"], [1, "p-panel-header", 3, "click"], ["class", "p-panel-title", 4, "ngIf"], [1, "p-panel-icons", 3, "ngClass"], ["severity", "secondary", "type", "button", "role", "button", "styleClass", "p-panel-header-icon p-panel-toggler p-link", 3, "text", "rounded", "buttonProps", "click", "keydown", 4, "ngIf"], [1, "p-panel-title"], ["severity", "secondary", "type", "button", "role", "button", "styleClass", "p-panel-header-icon p-panel-toggler p-link", 3, "click", "keydown", "text", "rounded", "buttonProps"], [4, "ngIf"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], [3, "class", 4, "ngIf"], [1, "p-panel-footer"]], template: function Panel_Template(rf, ctx) { if (rf & 1) {
+            const _r1 = i0.ɵɵgetCurrentView();
+            i0.ɵɵprojectionDef(_c6);
+            i0.ɵɵelementStart(0, "div", 1);
+            i0.ɵɵtemplate(1, Panel_div_1_Template, 7, 10, "div", 2);
+            i0.ɵɵelementStart(2, "div", 3);
+            i0.ɵɵlistener("@panelContent.done", function Panel_Template_div_animation_panelContent_done_2_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onToggleDone($event)); });
+            i0.ɵɵelementStart(3, "div", 4, 0);
+            i0.ɵɵprojection(5);
+            i0.ɵɵtemplate(6, Panel_ng_container_6_Template, 1, 0, "ng-container", 5);
             i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(6, Panel_div_6_Template, 3, 1, "div", 5);
+            i0.ɵɵtemplate(7, Panel_div_7_Template, 3, 1, "div", 6);
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
             i0.ɵɵclassMap(ctx.styleClass);
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(14, _c7, ctx.toggleable, !ctx.collapsed && ctx.toggleable))("ngStyle", ctx.style);
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(14, _c8, ctx.toggleable, !ctx.collapsed && ctx.toggleable))("ngStyle", ctx.style);
             i0.ɵɵattribute("id", ctx.id)("data-pc-name", "panel");
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", ctx.showHeader);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("id", ctx.id + "_content")("@panelContent", ctx.collapsed ? i0.ɵɵpureFunction1(19, _c9, i0.ɵɵpureFunction1(17, _c8, ctx.animating ? ctx.transitionOptions : "0ms")) : i0.ɵɵpureFunction1(23, _c11, i0.ɵɵpureFunction1(21, _c10, ctx.animating ? ctx.transitionOptions : "0ms")));
+            i0.ɵɵproperty("id", ctx.id + "_content")("@panelContent", ctx.collapsed ? i0.ɵɵpureFunction1(19, _c10, i0.ɵɵpureFunction1(17, _c9, ctx.animating ? ctx.transitionOptions : "0ms")) : i0.ɵɵpureFunction1(23, _c12, i0.ɵɵpureFunction1(21, _c11, ctx.animating ? ctx.transitionOptions : "0ms")));
             i0.ɵɵattribute("aria-labelledby", ctx.id + "_header")("aria-hidden", ctx.collapsed)("tabindex", ctx.collapsed ? "-1" : undefined);
-            i0.ɵɵadvance(3);
-            i0.ɵɵproperty("ngTemplateOutlet", ctx.contentTemplate);
+            i0.ɵɵadvance(4);
+            i0.ɵɵproperty("ngTemplateOutlet", ctx.contentTemplate || ctx._contentTemplate);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", ctx.footerFacet || ctx.footerTemplate);
+            i0.ɵɵproperty("ngIf", ctx.footerFacet || ctx.footerTemplate || ctx._footerTemplate);
         } }, dependencies: [CommonModule, i1.NgClass, i1.NgIf, i1.NgTemplateOutlet, i1.NgStyle, PlusIcon, MinusIcon, ButtonModule, i2.Button, SharedModule], encapsulation: 2, data: { animation: [
                 trigger('panelContent', [
                     state('hidden', style({
@@ -530,7 +585,7 @@ class Panel extends BaseComponent {
             <div class="p-panel-header" *ngIf="showHeader" (click)="onHeaderClick($event)" [attr.id]="id + '-titlebar'">
                 <span class="p-panel-title" *ngIf="_header" [attr.id]="id + '_header'">{{ _header }}</span>
                 <ng-content select="p-header"></ng-content>
-                <ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
+                <ng-container *ngTemplateOutlet="headerTemplate || _headerTemplate"></ng-container>
                 <div
                     class="p-panel-icons"
                     [ngClass]="{
@@ -539,7 +594,7 @@ class Panel extends BaseComponent {
                         'p-panel-icons-center': iconPos === 'center'
                     }"
                 >
-                    <ng-template *ngTemplateOutlet="iconTemplate"></ng-template>
+                    <ng-template *ngTemplateOutlet="iconTemplate || _iconTemplate"></ng-template>
                     <p-button
                         *ngIf="toggleable"
                         [attr.id]="id + '_header'"
@@ -556,7 +611,7 @@ class Panel extends BaseComponent {
                         (keydown)="onKeyDown($event)"
                         [buttonProps]="toggleButtonProps"
                     >
-                        <ng-container *ngIf="!headericonsTemplate && !toggleButtonProps?.icon">
+                        <ng-container *ngIf="!headerIconsTemplate && !_headerIconsTemplate && !toggleButtonProps?.icon">
                             <ng-container *ngIf="!collapsed">
                                 <span *ngIf="expandIcon" [class]="expandIcon"></span>
                                 <MinusIcon *ngIf="!expandIcon" />
@@ -568,7 +623,7 @@ class Panel extends BaseComponent {
                             </ng-container>
                         </ng-container>
 
-                        <ng-template *ngTemplateOutlet="headericonsTemplate; context: { $implicit: collapsed }"></ng-template>
+                        <ng-template *ngTemplateOutlet="headerIconsTemplate || _headerIconsTemplate; context: { $implicit: collapsed }"></ng-template>
                     </p-button>
                 </div>
             </div>
@@ -600,14 +655,14 @@ class Panel extends BaseComponent {
                 "
                 (@panelContent.done)="onToggleDone($event)"
             >
-                <div class="p-panel-content">
+                <div class="p-panel-content" #contentWrapper>
                     <ng-content></ng-content>
-                    <ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
+                    <ng-container *ngTemplateOutlet="contentTemplate || _contentTemplate"></ng-container>
                 </div>
 
-                <div class="p-panel-footer" *ngIf="footerFacet || footerTemplate">
+                <div class="p-panel-footer" *ngIf="footerFacet || footerTemplate || _footerTemplate">
                     <ng-content select="p-footer"></ng-content>
-                    <ng-container *ngTemplateOutlet="footerTemplate"></ng-container>
+                    <ng-container *ngTemplateOutlet="footerTemplate || _footerTemplate"></ng-container>
                 </div>
             </div>
         </div>
@@ -671,21 +726,27 @@ class Panel extends BaseComponent {
             args: [Footer]
         }], headerTemplate: [{
             type: ContentChild,
-            args: ['header']
+            args: ['header', { descendants: false }]
         }], iconTemplate: [{
             type: ContentChild,
-            args: ['icon']
+            args: ['icon', { descendants: false }]
         }], contentTemplate: [{
             type: ContentChild,
-            args: ['content']
+            args: ['content', { descendants: false }]
         }], footerTemplate: [{
             type: ContentChild,
-            args: ['footer']
-        }], headericonsTemplate: [{
+            args: ['footer', { descendants: false }]
+        }], headerIconsTemplate: [{
             type: ContentChild,
-            args: ['headericons']
+            args: ['headericons', { descendants: false }]
+        }], contentWrapperViewChild: [{
+            type: ViewChild,
+            args: ['contentWrapper']
+        }], templates: [{
+            type: ContentChildren,
+            args: [PrimeTemplate]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(Panel, { className: "Panel", filePath: "panel.ts", lineNumber: 184 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(Panel, { className: "Panel", filePath: "panel.ts", lineNumber: 183 }); })();
 class PanelModule {
     static ɵfac = function PanelModule_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PanelModule)(); };
     static ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: PanelModule });