primeng 19.1.3 → 20.0.0-rc.1

package/fesm2022/primeng-panel.mjs

@@ -1,4 +1,4 @@
-import { trigger, state, transition, style, animate } from '@angular/animations';
+import { trigger, state, transition, style as style$1, animate } from '@angular/animations';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
@@ -9,60 +9,34 @@ import { BaseComponent } from 'primeng/basecomponent';
 import * as i2 from 'primeng/button';
 import { ButtonModule } from 'primeng/button';
 import { PlusIcon, MinusIcon } from 'primeng/icons';
+import { css } from '@primeuix/styled';
+import { style } from '@primeuix/styles/panel';
 import { BaseStyle } from 'primeng/base';
 
-const theme = ({ dt }) => `
-.p-panel {
-    border: 1px solid ${dt('panel.border.color')};
-    border-radius: ${dt('panel.border.radius')};
-    background: ${dt('panel.background')};
-    color: ${dt('panel.color')};
-}
-
-.p-panel-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: ${dt('panel.header.padding')};
-    background: ${dt('panel.header.background')};
-    color: ${dt('panel.header.color')};
-    border-style: solid;
-    border-width: ${dt('panel.header.border.width')};
-    border-color: ${dt('panel.header.border.color')};
-    border-radius: ${dt('panel.header.border.radius')};
-}
-
-.p-panel-toggleable .p-panel-header {
-    padding: ${dt('panel.toggleable.header.padding')};
-}
-
-.p-panel-title {
-    line-height: 1;
-    font-weight: ${dt('panel.title.font.weight')};
-}
-
-.p-panel-content {
-    padding: ${dt('panel.content.padding')};
-}
-
-.p-panel-footer {
-    padding: ${dt('panel.footer.padding')};
-}
+const theme = css `
+    ${style}
 
-/* For PrimeNG */
-.p-panel-toggleable.p-panel-expanded > .p-panel-content-container:not(.ng-animating) {
-    overflow: visible
-}
-
-.p-panel-toggleable .p-panel-content-container {
-    overflow: hidden;
-}
+    /* For PrimeNG */
+    .p-panel-collapsed > .p-panel-content-container,
+    .p-panel-content-container.ng-animating {
+        overflow: hidden;
+    }
 `;
 const classes = {
-    root: ({ props }) => [
+    root: ({ instance }) => [
         'p-panel p-component',
         {
-            'p-panel-toggleable': props.toggleable
+            'p-panel-toggleable': instance.toggleable,
+            'p-panel-expanded': !instance.collapsed && instance.toggleable,
+            'p-panel-collapsed': instance.collapsed && instance.toggleable
+        }
+    ],
+    icons: ({ instance }) => [
+        'p-panel-icons',
+        {
+            'p-panel-icons-start': instance.iconPos === 'start',
+            'p-panel-icons-end': instance.iconPos === 'end',
+            'p-panel-icons-center': instance.iconPos === 'center'
         }
     ],
     header: 'p-panel-header',
@@ -77,10 +51,10 @@ class PanelStyle extends BaseStyle {
     name = 'panel';
     theme = theme;
     classes = classes;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: PanelStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: PanelStyle });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: PanelStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: PanelStyle });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: PanelStyle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: PanelStyle, decorators: [{
             type: Injectable
         }] });
 /**
@@ -149,13 +123,13 @@ class Panel extends BaseComponent {
      */
     collapsed;
     /**
-     * Inline style of the component.
-     * @group Props
+     * Id of the component.
      */
-    style;
+    id = uuid('pn_id_');
     /**
      * Style class of the component.
      * @group Props
+     * @deprecated since v20.0.0, use `class` instead.
      */
     styleClass;
     /**
@@ -163,18 +137,6 @@ class Panel extends BaseComponent {
      * @group Props
      */
     iconPos = 'end';
-    /**
-     * Expand icon of the toggle button.
-     * @group Props
-     * @deprecated since v15.4.2, use `headericons` template instead.
-     */
-    expandIcon;
-    /**
-     * Collapse icon of the toggle button.
-     * @group Props
-     * @deprecated since v15.4.2, use `headericons` template instead.
-     */
-    collapseIcon;
     /**
      * Specifies if header of panel cannot be displayed.
      * @group Props
@@ -264,7 +226,6 @@ class Panel extends BaseComponent {
     _footerTemplate;
     _headerIconsTemplate;
     contentWrapperViewChild;
-    id = uuid('pn_id_');
     get buttonAriaLabel() {
         return this._header;
     }
@@ -305,7 +266,7 @@ class Panel extends BaseComponent {
         this.updateTabIndex();
     }
     getBlockableElement() {
-        return this.el.nativeElement.children[0];
+        return this.el.nativeElement;
     }
     updateTabIndex() {
         if (this.contentWrapperViewChild) {
@@ -355,114 +316,93 @@ class Panel extends BaseComponent {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: Panel, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.10", type: Panel, isStandalone: true, selector: "p-panel", inputs: { toggleable: ["toggleable", "toggleable", booleanAttribute], _header: ["header", "_header"], collapsed: ["collapsed", "collapsed", booleanAttribute], style: "style", styleClass: "styleClass", iconPos: "iconPos", expandIcon: "expandIcon", collapseIcon: "collapseIcon", showHeader: ["showHeader", "showHeader", booleanAttribute], toggler: "toggler", transitionOptions: "transitionOptions", toggleButtonProps: "toggleButtonProps" }, outputs: { collapsedChange: "collapsedChange", onBeforeToggle: "onBeforeToggle", onAfterToggle: "onAfterToggle" }, providers: [PanelStyle], queries: [{ propertyName: "footerFacet", first: true, predicate: Footer, descendants: true }, { propertyName: "headerTemplate", first: true, predicate: ["header"] }, { propertyName: "iconTemplate", first: true, predicate: ["icons"] }, { propertyName: "contentTemplate", first: true, predicate: ["content"] }, { propertyName: "footerTemplate", first: true, predicate: ["footer"] }, { propertyName: "headerIconsTemplate", first: true, predicate: ["headericons"] }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "contentWrapperViewChild", first: true, predicate: ["contentWrapper"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
-        <div
-            [attr.id]="id"
-            [attr.data-pc-name]="'panel'"
-            [ngClass]="{
-                'p-panel p-component': true,
-                'p-panel-toggleable': toggleable,
-                'p-panel-expanded': !collapsed && toggleable
-            }"
-            [ngStyle]="style"
-            [class]="styleClass"
-        >
-            <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 || _headerTemplate"></ng-container>
-                <div
-                    class="p-panel-icons"
-                    [ngClass]="{
-                        'p-panel-icons-start': iconPos === 'start',
-                        'p-panel-icons-end': iconPos === 'end',
-                        'p-panel-icons-center': iconPos === 'center'
-                    }"
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Panel, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.0.6", type: Panel, isStandalone: true, selector: "p-panel", inputs: { toggleable: ["toggleable", "toggleable", booleanAttribute], _header: ["header", "_header"], collapsed: ["collapsed", "collapsed", booleanAttribute], id: "id", styleClass: "styleClass", iconPos: "iconPos", showHeader: ["showHeader", "showHeader", booleanAttribute], toggler: "toggler", transitionOptions: "transitionOptions", toggleButtonProps: "toggleButtonProps" }, outputs: { collapsedChange: "collapsedChange", onBeforeToggle: "onBeforeToggle", onAfterToggle: "onAfterToggle" }, host: { attributes: { "data-pc-name": "panel" }, properties: { "id": "id", "class": "cn(cx('root'), styleClass)" } }, providers: [PanelStyle], queries: [{ propertyName: "footerFacet", first: true, predicate: Footer, descendants: true }, { propertyName: "headerTemplate", first: true, predicate: ["header"] }, { propertyName: "iconTemplate", first: true, predicate: ["icons"] }, { propertyName: "contentTemplate", first: true, predicate: ["content"] }, { propertyName: "footerTemplate", first: true, predicate: ["footer"] }, { propertyName: "headerIconsTemplate", first: true, predicate: ["headericons"] }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "contentWrapperViewChild", first: true, predicate: ["contentWrapper"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
+        <div [class]="cx('header')" *ngIf="showHeader" (click)="onHeaderClick($event)" [attr.id]="id + '-titlebar'">
+            <span [class]="cx('title')" *ngIf="_header" [attr.id]="id + '_header'">{{ _header }}</span>
+            <ng-content select="p-header"></ng-content>
+            <ng-container *ngTemplateOutlet="headerTemplate || _headerTemplate"></ng-container>
+            <div [class]="cx('icons')">
+                <ng-template *ngTemplateOutlet="iconTemplate || _iconTemplate"></ng-template>
+                <p-button
+                    *ngIf="toggleable"
+                    [attr.id]="id + '_header'"
+                    severity="secondary"
+                    [text]="true"
+                    [rounded]="true"
+                    type="button"
+                    role="button"
+                    [styleClass]="cx('pcToggleButton')"
+                    [attr.aria-label]="buttonAriaLabel"
+                    [attr.aria-controls]="id + '_content'"
+                    [attr.aria-expanded]="!collapsed"
+                    (click)="onIconClick($event)"
+                    (keydown)="onKeyDown($event)"
+                    [buttonProps]="toggleButtonProps"
                 >
-                    <ng-template *ngTemplateOutlet="iconTemplate || _iconTemplate"></ng-template>
-                    <p-button
-                        *ngIf="toggleable"
-                        [attr.id]="id + '_header'"
-                        severity="secondary"
-                        [text]="true"
-                        [rounded]="true"
-                        type="button"
-                        role="button"
-                        styleClass="p-panel-header-icon p-panel-toggler p-link"
-                        [attr.aria-label]="buttonAriaLabel"
-                        [attr.aria-controls]="id + '_content'"
-                        [attr.aria-expanded]="!collapsed"
-                        (click)="onIconClick($event)"
-                        (keydown)="onKeyDown($event)"
-                        [buttonProps]="toggleButtonProps"
-                    >
-                        <ng-template #icon>
-                            <ng-container *ngIf="!headerIconsTemplate && !_headerIconsTemplate && !toggleButtonProps?.icon">
-                                <ng-container *ngIf="!collapsed">
-                                    <span *ngIf="expandIcon" [class]="expandIcon"></span>
-                                    <MinusIcon *ngIf="!expandIcon" />
-                                </ng-container>
+                    <ng-template #icon>
+                        <ng-container *ngIf="!headerIconsTemplate && !_headerIconsTemplate && !toggleButtonProps?.icon">
+                            <ng-container *ngIf="!collapsed">
+                                <MinusIcon />
+                            </ng-container>
 
-                                <ng-container *ngIf="collapsed">
-                                    <span *ngIf="collapseIcon" [class]="collapseIcon"></span>
-                                    <PlusIcon *ngIf="!collapseIcon" />
-                                </ng-container>
+                            <ng-container *ngIf="collapsed">
+                                <PlusIcon />
                             </ng-container>
+                        </ng-container>
 
-                            <ng-template *ngTemplateOutlet="headerIconsTemplate || _headerIconsTemplate; context: { $implicit: collapsed }"></ng-template>
-                        </ng-template>
-                    </p-button>
-                </div>
+                        <ng-template *ngTemplateOutlet="headerIconsTemplate || _headerIconsTemplate; context: { $implicit: collapsed }"></ng-template>
+                    </ng-template>
+                </p-button>
             </div>
-            <div
-                class="p-panel-content-container"
-                [id]="id + '_content'"
-                role="region"
-                [attr.aria-labelledby]="id + '_header'"
-                [attr.aria-hidden]="collapsed"
-                [attr.tabindex]="collapsed ? '-1' : undefined"
-                [@panelContent]="
-                    collapsed
-                        ? {
-                              value: 'hidden',
-                              params: {
-                                  transitionParams: animating ? transitionOptions : '0ms',
-                                  height: '0',
-                                  opacity: '0'
-                              }
+        </div>
+        <div
+            [class]="cx('contentContainer')"
+            [id]="id + '_content'"
+            role="region"
+            [attr.aria-labelledby]="id + '_header'"
+            [attr.aria-hidden]="collapsed"
+            [attr.tabindex]="collapsed ? '-1' : undefined"
+            [@panelContent]="
+                collapsed
+                    ? {
+                          value: 'hidden',
+                          params: {
+                              transitionParams: animating ? transitionOptions : '0ms',
+                              height: '0',
+                              opacity: '0'
                           }
-                        : {
-                              value: 'visible',
-                              params: {
-                                  transitionParams: animating ? transitionOptions : '0ms',
-                                  height: '*',
-                                  opacity: '1'
-                              }
+                      }
+                    : {
+                          value: 'visible',
+                          params: {
+                              transitionParams: animating ? transitionOptions : '0ms',
+                              height: '*',
+                              opacity: '1'
                           }
-                "
-                (@panelContent.done)="onToggleDone($event)"
-            >
-                <div class="p-panel-content" #contentWrapper>
-                    <ng-content></ng-content>
-                    <ng-container *ngTemplateOutlet="contentTemplate || _contentTemplate"></ng-container>
-                </div>
+                      }
+            "
+            (@panelContent.done)="onToggleDone($event)"
+        >
+            <div [class]="cx('content')" #contentWrapper>
+                <ng-content></ng-content>
+                <ng-container *ngTemplateOutlet="contentTemplate || _contentTemplate"></ng-container>
+            </div>
 
-                <div class="p-panel-footer" *ngIf="footerFacet || footerTemplate || _footerTemplate">
-                    <ng-content select="p-footer"></ng-content>
-                    <ng-container *ngTemplateOutlet="footerTemplate || _footerTemplate"></ng-container>
-                </div>
+            <div [class]="cx('footer')" *ngIf="footerFacet || footerTemplate || _footerTemplate">
+                <ng-content select="p-footer"></ng-content>
+                <ng-container *ngTemplateOutlet="footerTemplate || _footerTemplate"></ng-container>
             </div>
         </div>
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: PlusIcon, selector: "PlusIcon" }, { kind: "component", type: MinusIcon, selector: "MinusIcon" }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SharedModule }], animations: [
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PlusIcon, selector: "PlusIcon" }, { kind: "component", type: MinusIcon, selector: "MinusIcon" }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SharedModule }], animations: [
             trigger('panelContent', [
-                state('hidden', style({
+                state('hidden', style$1({
                     height: '0'
                 })),
-                state('void', style({
+                state('void', style$1({
                     height: '{{height}}'
                 }), { params: { height: '0' } }),
-                state('visible', style({
+                state('visible', style$1({
                     height: '*'
                 })),
                 transition('visible <=> hidden', [animate('{{transitionParams}}')]),
@@ -471,120 +411,99 @@ class Panel extends BaseComponent {
             ])
         ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: Panel, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Panel, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-panel',
                     standalone: true,
                     imports: [CommonModule, PlusIcon, MinusIcon, ButtonModule, SharedModule],
                     template: `
-        <div
-            [attr.id]="id"
-            [attr.data-pc-name]="'panel'"
-            [ngClass]="{
-                'p-panel p-component': true,
-                'p-panel-toggleable': toggleable,
-                'p-panel-expanded': !collapsed && toggleable
-            }"
-            [ngStyle]="style"
-            [class]="styleClass"
-        >
-            <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 || _headerTemplate"></ng-container>
-                <div
-                    class="p-panel-icons"
-                    [ngClass]="{
-                        'p-panel-icons-start': iconPos === 'start',
-                        'p-panel-icons-end': iconPos === 'end',
-                        'p-panel-icons-center': iconPos === 'center'
-                    }"
+        <div [class]="cx('header')" *ngIf="showHeader" (click)="onHeaderClick($event)" [attr.id]="id + '-titlebar'">
+            <span [class]="cx('title')" *ngIf="_header" [attr.id]="id + '_header'">{{ _header }}</span>
+            <ng-content select="p-header"></ng-content>
+            <ng-container *ngTemplateOutlet="headerTemplate || _headerTemplate"></ng-container>
+            <div [class]="cx('icons')">
+                <ng-template *ngTemplateOutlet="iconTemplate || _iconTemplate"></ng-template>
+                <p-button
+                    *ngIf="toggleable"
+                    [attr.id]="id + '_header'"
+                    severity="secondary"
+                    [text]="true"
+                    [rounded]="true"
+                    type="button"
+                    role="button"
+                    [styleClass]="cx('pcToggleButton')"
+                    [attr.aria-label]="buttonAriaLabel"
+                    [attr.aria-controls]="id + '_content'"
+                    [attr.aria-expanded]="!collapsed"
+                    (click)="onIconClick($event)"
+                    (keydown)="onKeyDown($event)"
+                    [buttonProps]="toggleButtonProps"
                 >
-                    <ng-template *ngTemplateOutlet="iconTemplate || _iconTemplate"></ng-template>
-                    <p-button
-                        *ngIf="toggleable"
-                        [attr.id]="id + '_header'"
-                        severity="secondary"
-                        [text]="true"
-                        [rounded]="true"
-                        type="button"
-                        role="button"
-                        styleClass="p-panel-header-icon p-panel-toggler p-link"
-                        [attr.aria-label]="buttonAriaLabel"
-                        [attr.aria-controls]="id + '_content'"
-                        [attr.aria-expanded]="!collapsed"
-                        (click)="onIconClick($event)"
-                        (keydown)="onKeyDown($event)"
-                        [buttonProps]="toggleButtonProps"
-                    >
-                        <ng-template #icon>
-                            <ng-container *ngIf="!headerIconsTemplate && !_headerIconsTemplate && !toggleButtonProps?.icon">
-                                <ng-container *ngIf="!collapsed">
-                                    <span *ngIf="expandIcon" [class]="expandIcon"></span>
-                                    <MinusIcon *ngIf="!expandIcon" />
-                                </ng-container>
+                    <ng-template #icon>
+                        <ng-container *ngIf="!headerIconsTemplate && !_headerIconsTemplate && !toggleButtonProps?.icon">
+                            <ng-container *ngIf="!collapsed">
+                                <MinusIcon />
+                            </ng-container>
 
-                                <ng-container *ngIf="collapsed">
-                                    <span *ngIf="collapseIcon" [class]="collapseIcon"></span>
-                                    <PlusIcon *ngIf="!collapseIcon" />
-                                </ng-container>
+                            <ng-container *ngIf="collapsed">
+                                <PlusIcon />
                             </ng-container>
+                        </ng-container>
 
-                            <ng-template *ngTemplateOutlet="headerIconsTemplate || _headerIconsTemplate; context: { $implicit: collapsed }"></ng-template>
-                        </ng-template>
-                    </p-button>
-                </div>
+                        <ng-template *ngTemplateOutlet="headerIconsTemplate || _headerIconsTemplate; context: { $implicit: collapsed }"></ng-template>
+                    </ng-template>
+                </p-button>
             </div>
-            <div
-                class="p-panel-content-container"
-                [id]="id + '_content'"
-                role="region"
-                [attr.aria-labelledby]="id + '_header'"
-                [attr.aria-hidden]="collapsed"
-                [attr.tabindex]="collapsed ? '-1' : undefined"
-                [@panelContent]="
-                    collapsed
-                        ? {
-                              value: 'hidden',
-                              params: {
-                                  transitionParams: animating ? transitionOptions : '0ms',
-                                  height: '0',
-                                  opacity: '0'
-                              }
+        </div>
+        <div
+            [class]="cx('contentContainer')"
+            [id]="id + '_content'"
+            role="region"
+            [attr.aria-labelledby]="id + '_header'"
+            [attr.aria-hidden]="collapsed"
+            [attr.tabindex]="collapsed ? '-1' : undefined"
+            [@panelContent]="
+                collapsed
+                    ? {
+                          value: 'hidden',
+                          params: {
+                              transitionParams: animating ? transitionOptions : '0ms',
+                              height: '0',
+                              opacity: '0'
                           }
-                        : {
-                              value: 'visible',
-                              params: {
-                                  transitionParams: animating ? transitionOptions : '0ms',
-                                  height: '*',
-                                  opacity: '1'
-                              }
+                      }
+                    : {
+                          value: 'visible',
+                          params: {
+                              transitionParams: animating ? transitionOptions : '0ms',
+                              height: '*',
+                              opacity: '1'
                           }
-                "
-                (@panelContent.done)="onToggleDone($event)"
-            >
-                <div class="p-panel-content" #contentWrapper>
-                    <ng-content></ng-content>
-                    <ng-container *ngTemplateOutlet="contentTemplate || _contentTemplate"></ng-container>
-                </div>
+                      }
+            "
+            (@panelContent.done)="onToggleDone($event)"
+        >
+            <div [class]="cx('content')" #contentWrapper>
+                <ng-content></ng-content>
+                <ng-container *ngTemplateOutlet="contentTemplate || _contentTemplate"></ng-container>
+            </div>
 
-                <div class="p-panel-footer" *ngIf="footerFacet || footerTemplate || _footerTemplate">
-                    <ng-content select="p-footer"></ng-content>
-                    <ng-container *ngTemplateOutlet="footerTemplate || _footerTemplate"></ng-container>
-                </div>
+            <div [class]="cx('footer')" *ngIf="footerFacet || footerTemplate || _footerTemplate">
+                <ng-content select="p-footer"></ng-content>
+                <ng-container *ngTemplateOutlet="footerTemplate || _footerTemplate"></ng-container>
             </div>
         </div>
     `,
                     animations: [
                         trigger('panelContent', [
-                            state('hidden', style({
+                            state('hidden', style$1({
                                 height: '0'
                             })),
-                            state('void', style({
+                            state('void', style$1({
                                 height: '{{height}}'
                             }), { params: { height: '0' } }),
-                            state('visible', style({
+                            state('visible', style$1({
                                 height: '*'
                             })),
                             transition('visible <=> hidden', [animate('{{transitionParams}}')]),
@@ -594,7 +513,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                     ],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
-                    providers: [PanelStyle]
+                    providers: [PanelStyle],
+                    host: {
+                        '[id]': 'id',
+                        'data-pc-name': 'panel',
+                        '[class]': "cn(cx('root'), styleClass)"
+                    }
                 }]
         }], propDecorators: { toggleable: [{
                 type: Input,
@@ -605,16 +529,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
             }], collapsed: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
-            }], style: [{
+            }], id: [{
                 type: Input
             }], styleClass: [{
                 type: Input
             }], iconPos: [{
                 type: Input
-            }], expandIcon: [{
-                type: Input
-            }], collapseIcon: [{
-                type: Input
             }], showHeader: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
@@ -656,11 +576,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                 args: [PrimeTemplate]
             }] } });
 class PanelModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: PanelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.10", ngImport: i0, type: PanelModule, imports: [Panel, SharedModule], exports: [Panel, SharedModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: PanelModule, imports: [Panel, SharedModule, SharedModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: PanelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.6", ngImport: i0, type: PanelModule, imports: [Panel, SharedModule], exports: [Panel, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: PanelModule, imports: [Panel, SharedModule, SharedModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: PanelModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: PanelModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [Panel, SharedModule],