primeng 19.1.3 → 20.0.0-rc.1

package/fesm2022/primeng-panelmenu.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';
@@ -8,177 +8,32 @@ import { RouterModule } from '@angular/router';
 import { resolve, isNotEmpty, findLast, findSingle, isPrintableCharacter, isEmpty, uuid, equals, focus, getAttribute } from '@primeuix/utils';
 import { SharedModule, PrimeTemplate } from 'primeng/api';
 import { BaseComponent } from 'primeng/basecomponent';
-import { AngleDownIcon, AngleRightIcon, ChevronDownIcon, ChevronRightIcon } from 'primeng/icons';
+import { ChevronDownIcon, ChevronRightIcon } from 'primeng/icons';
 import * as i3 from 'primeng/tooltip';
 import { TooltipModule } from 'primeng/tooltip';
+import { css } from '@primeuix/styled';
+import { style } from '@primeuix/styles/panelmenu';
 import { BaseStyle } from 'primeng/base';
 
-const theme = ({ dt }) => `
-.p-panelmenu {
-    display: flex;
-    flex-direction: column;
-    gap: ${dt('panelmenu.gap')};
-}
-
-.p-panelmenu-panel {
-    background: ${dt('panelmenu.panel.background')};
-    border-width: ${dt('panelmenu.panel.border.width')};
-    border-style: solid;
-    border-color: ${dt('panelmenu.panel.border.color')};
-    color: ${dt('panelmenu.panel.color')};
-    border-radius: ${dt('panelmenu.panel.border.radius')};
-    padding: ${dt('panelmenu.panel.padding')};
-}
-
-.p-panelmenu-panel:first-child {
-    border-width: ${dt('panelmenu.panel.first.border.width')};
-    border-start-start-radius: ${dt('panelmenu.panel.first.top.border.radius')};
-    border-start-end-radius: ${dt('panelmenu.panel.first.top.border.radius')};
-}
-
-.p-panelmenu-panel:last-child {
-    border-width: ${dt('panelmenu.panel.last.border.width')};
-    border-end-start-radius: ${dt('panelmenu.panel.last.bottom.border.radius')};
-    border-end-end-radius: ${dt('panelmenu.panel.last.bottom.border.radius')};
-}
-
-.p-panelmenu-header {
-    outline: 0 none;
-}
-
-.p-panelmenu-header-content {
-    border-radius: ${dt('panelmenu.item.border.radius')};
-    transition: background ${dt('panelmenu.transition.duration')}, color ${dt('panelmenu.transition.duration')}, outline-color ${dt('panelmenu.transition.duration')}, box-shadow ${dt('panelmenu.transition.duration')};
-    outline-color: transparent;
-    color: ${dt('panelmenu.item.color')};
-}
-
-.p-panelmenu-header-link {
-    display: flex;
-    gap: ${dt('panelmenu.item.gap')};
-    padding: ${dt('panelmenu.item.padding')};
-    align-items: center;
-    user-select: none;
-    cursor: pointer;
-    position: relative;
-    text-decoration: none;
-    color: inherit;
-}
-
-.p-panelmenu-header-icon,
-.p-panelmenu-item-icon {
-    color: ${dt('panelmenu.item.icon.color')};
-}
-
-.p-panelmenu-submenu-icon {
-    color: ${dt('panelmenu.submenu.icon.color')};
-}
-
-.p-panelmenu-header:not(.p-panelmenu-header-active)  .p-panelmenu-header-content .p-panelmenu-submenu-icon:dir(rtl) {
-    transform: rotate(180deg);
-}
-
-.p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content {
-    background: ${dt('panelmenu.item.focus.background')};
-    color: ${dt('panelmenu.item.focus.color')};
-}
-
-.p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-header-icon {
-    color: ${dt('panelmenu.item.icon.focus.color')};
-}
-
-.p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-submenu-icon {
-    color: ${dt('panelmenu.submenu.icon.focus.color')};
-}
-
-.p-panelmenu-header:not(.p-disabled) .p-panelmenu-header-content:hover {
-    background: ${dt('panelmenu.item.focus.background')};
-    color: ${dt('panelmenu.item.focus.color')};
-}
-
-.p-panelmenu-header:not(.p-disabled) .p-panelmenu-header-content:hover .p-panelmenu-header-icon {
-    color: ${dt('panelmenu.item.icon.focus.color')};
-}
-
-.p-panelmenu-header:not(.p-disabled) .p-panelmenu-header-content:hover .p-panelmenu-submenu-icon {
-    color: ${dt('panelmenu.submenu.icon.focus.color')};
-}
-
-.p-panelmenu-submenu {
-    margin: 0;
-    padding: 0 0 0 ${dt('panelmenu.submenu.indent')};
-    outline: 0;
-    list-style: none;
-}
-
-.p-panelmenu-submenu:dir(rtl) {
-    padding: 0 ${dt('panelmenu.submenu.indent')} 0 0;
-}
-
-.p-panelmenu-item-link {
-    display: flex;
-    gap: ${dt('panelmenu.item.gap')};
-    padding: ${dt('panelmenu.item.padding')};
-    align-items: center;
-    user-select: none;
-    cursor: pointer;
-    text-decoration: none;
-    color: inherit;
-    position: relative;
-    overflow: hidden;
-}
-
-.p-panelmenu-item-label {
-    line-height: 1;
-}
-
-.p-panelmenu-item-content {
-    border-radius: ${dt('panelmenu.item.border.radius')};
-    transition: background ${dt('panelmenu.transition.duration')}, color ${dt('panelmenu.transition.duration')}, outline-color ${dt('panelmenu.transition.duration')}, box-shadow ${dt('panelmenu.transition.duration')};
-    color: ${dt('panelmenu.item.color')};
-    outline-color: transparent;
-}
-
-.p-panelmenu-item.p-focus > .p-panelmenu-item-content {
-    background: ${dt('panelmenu.item.focus.background')};
-    color: ${dt('panelmenu.item.focus.color')};
-}
-
-.p-panelmenu-item.p-focus > .p-panelmenu-item-content .p-panelmenu-item-icon {
-    color: ${dt('panelmenu.item.focus.color')};
-}
-
-.p-panelmenu-item.p-focus > .p-panelmenu-item-content .p-panelmenu-submenu-icon {
-    color: ${dt('panelmenu.submenu.icon.focus.color')};
-}
-
-.p-panelmenu-item:not(.p-disabled) > .p-panelmenu-item-content:hover {
-    background: ${dt('panelmenu.item.focus.background')};
-    color: ${dt('panelmenu.item.focus.color')};
-}
-
-.p-panelmenu-item:not(.p-disabled) > .p-panelmenu-item-content:hover .p-panelmenu-item-icon {
-    color: ${dt('panelmenu.item.icon.focus.color')};
-}
-
-.p-panelmenu-item:not(.p-disabled) > .p-panelmenu-item-content:hover .p-panelmenu-submenu-icon {
-    color: ${dt('panelmenu.submenu.icon.focus.color')};
-}
-
-
-/*For PrimeNG*/
-
-.p-panelmenu-item:not(.ng-animating) {
-    overflow: hidden;
-}
+const theme = css `
+    ${style}
+    /*For PrimeNG*/
+    .p-panelmenu-item:not(.ng-animating) {
+        overflow: hidden;
+    }
 
-.p-panelmenu-panel {
-    overflow: hidden;
-}
+    .p-panelmenu-panel {
+        overflow: hidden;
+    }
 
+    .p-panelmenu-root-list,
+    .p-panelmenu-submenu,
+    .p-panelmenu-item-link {
+        outline: 0 none;
+    }
 `;
 const classes = {
-    root: 'p-panelmenu p-component',
+    root: () => ['p-panelmenu p-component'],
     panel: 'p-panelmenu-panel',
     header: ({ instance, item }) => [
         'p-panelmenu-header',
@@ -191,13 +46,13 @@ const classes = {
     headerLink: 'p-panelmenu-header-link',
     headerIcon: 'p-panelmenu-header-icon',
     headerLabel: 'p-panelmenu-header-label',
-    contentContainer: 'p-panelmenu-content-container',
+    contentContainer: ({ instance, processedItem }) => ['p-panelmenu-content-container', { 'p-panelmenu-expanded': instance.isItemActive(processedItem) }],
     content: 'p-panelmenu-content',
     rootList: 'p-panelmenu-root-list',
     item: ({ instance, processedItem }) => [
         'p-panelmenu-item',
         {
-            'p-focus': instance.isItemFocused(processedItem),
+            'p-focus': instance.isItemFocused(processedItem) && !instance.isItemDisabled(processedItem),
             'p-disabled': instance.isItemDisabled(processedItem)
         }
     ],
@@ -207,16 +62,17 @@ const classes = {
     itemLabel: 'p-panelmenu-item-label',
     submenuIcon: 'p-panelmenu-submenu-icon',
     submenu: 'p-panelmenu-submenu',
-    separator: 'p-menuitem-separator'
+    separator: 'p-menuitem-separator',
+    badge: 'p-menuitem-badge'
 };
 class PanelMenuStyle extends BaseStyle {
     name = 'panelmenu';
     theme = theme;
     classes = classes;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: PanelMenuStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: PanelMenuStyle });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: PanelMenuStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: PanelMenuStyle });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: PanelMenuStyle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: PanelMenuStyle, decorators: [{
             type: Injectable
         }] });
 /**
@@ -318,6 +174,7 @@ class PanelMenuSub extends BaseComponent {
     menuKeyDown = new EventEmitter();
     listViewChild;
     panelMenu = inject(forwardRef(() => PanelMenu));
+    _componentStyle = inject(PanelMenuStyle);
     getItemId(processedItem) {
         return processedItem.item?.id ?? `${this.panelId}_${processedItem.key}`;
     }
@@ -373,11 +230,11 @@ class PanelMenuSub extends BaseComponent {
     onItemToggle(event) {
         this.itemToggle.emit(event);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: PanelMenuSub, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.10", type: PanelMenuSub, isStandalone: true, selector: "p-panelMenuSub, p-panelmenu-sub", inputs: { panelId: "panelId", focusedItemId: "focusedItemId", items: "items", itemTemplate: "itemTemplate", level: ["level", "level", numberAttribute], activeItemPath: "activeItemPath", root: ["root", "root", booleanAttribute], tabindex: ["tabindex", "tabindex", numberAttribute], transitionOptions: "transitionOptions", parentExpanded: ["parentExpanded", "parentExpanded", booleanAttribute] }, outputs: { itemToggle: "itemToggle", menuFocus: "menuFocus", menuBlur: "menuBlur", menuKeyDown: "menuKeyDown" }, viewQueries: [{ propertyName: "listViewChild", first: true, predicate: ["list"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: PanelMenuSub, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.0.6", type: PanelMenuSub, isStandalone: true, selector: "p-panelMenuSub, p-panelmenu-sub", inputs: { panelId: "panelId", focusedItemId: "focusedItemId", items: "items", itemTemplate: "itemTemplate", level: ["level", "level", numberAttribute], activeItemPath: "activeItemPath", root: ["root", "root", booleanAttribute], tabindex: ["tabindex", "tabindex", numberAttribute], transitionOptions: "transitionOptions", parentExpanded: ["parentExpanded", "parentExpanded", booleanAttribute] }, outputs: { itemToggle: "itemToggle", menuFocus: "menuFocus", menuBlur: "menuBlur", menuKeyDown: "menuKeyDown" }, providers: [PanelMenuStyle], viewQueries: [{ propertyName: "listViewChild", first: true, predicate: ["list"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
         <ul
             #list
-            [ngClass]="{ 'p-panelmenu-submenu': true }"
+            [class]="root ? cn(cx('rootList'), cx('submenu')) : cx('submenu')"
             role="tree"
             [tabindex]="-1"
             [attr.aria-activedescendant]="focusedItemId"
@@ -388,10 +245,9 @@ class PanelMenuSub extends BaseComponent {
             (keydown)="menuKeyDown.emit($event)"
         >
             <ng-template ngFor let-processedItem let-index="index" [ngForOf]="items">
-                <li *ngIf="processedItem.separator" class="p-menuitem-separator" role="separator"></li>
+                <li *ngIf="processedItem.separator" [class]="cn(cx('separator'), getItemProp(processedItem, 'styleClass'))" role="separator"></li>
                 <li
                     *ngIf="!processedItem.separator && isItemVisible(processedItem)"
-                    [ngClass]="getItemClass(processedItem)"
                     role="treeitem"
                     [attr.id]="getItemId(processedItem)"
                     [attr.aria-label]="getItemProp(processedItem, 'label')"
@@ -399,36 +255,32 @@ class PanelMenuSub extends BaseComponent {
                     [attr.aria-level]="level + 1"
                     [attr.aria-setsize]="getAriaSetSize()"
                     [attr.aria-posinset]="getAriaPosInset(index)"
-                    [class]="getItemProp(processedItem, 'styleClass')"
-                    [class.p-hidden]="processedItem.visible === false"
-                    [class.p-focus]="isItemFocused(processedItem) && !isItemDisabled(processedItem)"
+                    [class]="cn(cx('item', { processedItem }, processedItem.styleClass))"
                     [ngStyle]="getItemProp(processedItem, 'style')"
                     [pTooltip]="getItemProp(processedItem, 'tooltip')"
                     [attr.data-p-disabled]="isItemDisabled(processedItem)"
                     [tooltipOptions]="getItemProp(processedItem, 'tooltipOptions')"
                 >
-                    <div class="p-panelmenu-item-content" (click)="onItemClick($event, processedItem)">
+                    <div [class]="cx('itemContent')" (click)="onItemClick($event, processedItem)">
                         <ng-container *ngIf="!itemTemplate">
                             <a
                                 *ngIf="!getItemProp(processedItem, 'routerLink')"
                                 [attr.href]="getItemProp(processedItem, 'url')"
-                                class="p-panelmenu-item-link"
-                                [ngClass]="{ 'p-disabled': getItemProp(processedItem, 'disabled') }"
+                                [class]="cx('itemLink')"
                                 [target]="getItemProp(processedItem, 'target')"
                                 [attr.data-pc-section]="'action'"
                                 [attr.tabindex]="!!parentExpanded ? '0' : '-1'"
                             >
                                 <ng-container *ngIf="isItemGroup(processedItem)">
                                     <ng-container *ngIf="!panelMenu.submenuIconTemplate && !panelMenu._submenuIconTemplate">
-                                        <AngleDownIcon [styleClass]="'p-panelmenu-submenu-icon'" *ngIf="isItemActive(processedItem)" [ngStyle]="getItemProp(processedItem, 'iconStyle')" />
-                                        <AngleRightIcon [styleClass]="'p-panelmenu-submenu-icon'" *ngIf="!isItemActive(processedItem)" [ngStyle]="getItemProp(processedItem, 'iconStyle')" />
+                                        <ChevronDownIcon [styleClass]="cn(cx('submenuIcon'), getItemProp(processedItem, 'icon'))" *ngIf="isItemActive(processedItem)" [ngStyle]="getItemProp(processedItem, 'iconStyle')" />
+                                        <ChevronRightIcon [styleClass]="cn(cx('submenuIcon'), getItemProp(processedItem, 'icon'))" *ngIf="!isItemActive(processedItem)" [ngStyle]="getItemProp(processedItem, 'iconStyle')" />
                                     </ng-container>
                                     <ng-template *ngTemplateOutlet="panelMenu.submenuIconTemplate || panelMenu._submenuIconTemplate"></ng-template>
                                 </ng-container>
-                                <span class="p-panelmenu-submenu-icon" [ngClass]="processedItem.icon" *ngIf="processedItem.icon" [ngStyle]="getItemProp(processedItem, 'iconStyle')"></span>
-                                <span class="p-panelmenu-item-label" *ngIf="processedItem.item?.escape !== false; else htmlLabel">{{ getItemProp(processedItem, 'label') }}</span>
-                                <ng-template #htmlLabel><span class="p-panelmenu-item-label" [innerHTML]="getItemProp(processedItem, 'label')"></span></ng-template>
-                                <span class="p-menuitem-badge" *ngIf="processedItem.badge" [ngClass]="processedItem.badgeStyleClass">{{ processedItem.badge }}</span>
+                                <span [class]="cx('itemIcon', { processedItem })" *ngIf="processedItem.icon" [ngStyle]="getItemProp(processedItem, 'iconStyle')"></span>
+                                <span [class]="cx('itemLabel')" *ngIf="processedItem.item?.escape !== false; else htmlLabel">{{ getItemProp(processedItem, 'label') }}</span>
+                                <ng-template #htmlLabel><span [class]="cx('itemLabel')" [innerHTML]="getItemProp(processedItem, 'label')"></span></ng-template>
                             </a>
                             <a
                                 *ngIf="getItemProp(processedItem, 'routerLink')"
@@ -436,8 +288,7 @@ class PanelMenuSub extends BaseComponent {
                                 [queryParams]="getItemProp(processedItem, 'queryParams')"
                                 [routerLinkActive]="'p-panelmenu-item-link-active'"
                                 [routerLinkActiveOptions]="getItemProp(processedItem, 'routerLinkActiveOptions') || { exact: false }"
-                                class="p-panelmenu-item-link"
-                                [ngClass]="{ 'p-disabled': getItemProp(processedItem, 'disabled') }"
+                                [class]="cx('itemLink')"
                                 [target]="getItemProp(processedItem, 'target')"
                                 [attr.title]="getItemProp(processedItem, 'title')"
                                 [fragment]="getItemProp(processedItem, 'fragment')"
@@ -451,22 +302,22 @@ class PanelMenuSub extends BaseComponent {
                             >
                                 <ng-container *ngIf="isItemGroup(processedItem)">
                                     <ng-container *ngIf="!panelMenu.submenuIconTemplate && !panelMenu._submenuIconTemplate">
-                                        <AngleDownIcon *ngIf="isItemActive(processedItem)" [styleClass]="'p-panelmenu-submenu-icon'" [ngStyle]="getItemProp(processedItem, 'iconStyle')" />
-                                        <AngleRightIcon *ngIf="!isItemActive(processedItem)" [styleClass]="'p-panelmenu-submenu-icon'" [ngStyle]="getItemProp(processedItem, 'iconStyle')" />
+                                        <ChevronDownIcon *ngIf="isItemActive(processedItem)" [styleClass]="cn(cx('submenuIcon'), getItemProp(processedItem, 'icon'))" [ngStyle]="getItemProp(processedItem, 'iconStyle')" />
+                                        <ChevronRightIcon *ngIf="!isItemActive(processedItem)" [styleClass]="cn(cx('submenuIcon'), getItemProp(processedItem, 'icon'))" [ngStyle]="getItemProp(processedItem, 'iconStyle')" />
                                     </ng-container>
                                     <ng-template *ngTemplateOutlet="panelMenu.submenuIconTemplate && panelMenu._submenuIconTemplate"></ng-template>
                                 </ng-container>
-                                <span class="p-panelmenu-submenu-icon" [ngClass]="processedItem.icon" *ngIf="processedItem.icon" [ngStyle]="getItemProp(processedItem, 'iconStyle')"></span>
-                                <span class="p-panelmenu-item-label" *ngIf="getItemProp(processedItem, 'escape') !== false; else htmlRouteLabel">{{ getItemProp(processedItem, 'label') }}</span>
-                                <ng-template #htmlRouteLabel><span class="p-panelmenu-item-label" [innerHTML]="getItemProp(processedItem, 'label')"></span></ng-template>
-                                <span class="p-menuitem-badge" *ngIf="processedItem.badge" [ngClass]="getItemProp(processedItem, 'badgeStyleClass')">{{ getItemProp(processedItem, 'badge') }}</span>
+                                <span [class]="cn(cx('itemIcon'), getItemProp(processedItem, 'icon'))" *ngIf="processedItem.icon" [ngStyle]="getItemProp(processedItem, 'iconStyle')"></span>
+                                <span *ngIf="getItemProp(processedItem, 'label')" [class]="cx('itemLabel')" [innerHTML]="getItemProp(processedItem, 'label')"></span>
+
+                                <span [class]="cn(cx('badge'), getItemProp(processedItem, 'badgeStyleClass'))" *ngIf="processedItem.badge">{{ processedItem.badge }}</span>
                             </a>
                         </ng-container>
                         <ng-container *ngIf="itemTemplate">
                             <ng-template *ngTemplateOutlet="itemTemplate; context: { $implicit: processedItem.item }"></ng-template>
                         </ng-container>
                     </div>
-                    <div class="p-toggleable-content" [@submenu]="getAnimation(processedItem)">
+                    <div [@submenu]="getAnimation(processedItem)">
                         <p-panelmenu-sub
                             *ngIf="isItemVisible(processedItem) && isItemGroup(processedItem) && isItemExpanded(processedItem)"
                             [id]="getItemId(processedItem) + '_list'"
@@ -484,12 +335,12 @@ class PanelMenuSub extends BaseComponent {
                 </li>
             </ng-template>
         </ul>
-    `, isInline: true, dependencies: [{ kind: "component", type: PanelMenuSub, selector: "p-panelMenuSub, p-panelmenu-sub", inputs: ["panelId", "focusedItemId", "items", "itemTemplate", "level", "activeItemPath", "root", "tabindex", "transitionOptions", "parentExpanded"], outputs: ["itemToggle", "menuFocus", "menuBlur", "menuKeyDown"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i3.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: AngleDownIcon, selector: "AngleDownIcon" }, { kind: "component", type: AngleRightIcon, selector: "AngleRightIcon" }, { kind: "ngmodule", type: SharedModule }], animations: [
+    `, isInline: true, dependencies: [{ kind: "component", type: PanelMenuSub, selector: "p-panelMenuSub, p-panelmenu-sub", inputs: ["panelId", "focusedItemId", "items", "itemTemplate", "level", "activeItemPath", "root", "tabindex", "transitionOptions", "parentExpanded"], outputs: ["itemToggle", "menuFocus", "menuBlur", "menuKeyDown"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i3.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "component", type: ChevronDownIcon, selector: "ChevronDownIcon" }, { kind: "component", type: ChevronRightIcon, selector: "ChevronRightIcon" }, { kind: "ngmodule", type: SharedModule }], animations: [
             trigger('submenu', [
-                state('hidden', style({
+                state('hidden', style$1({
                     height: '0'
                 })),
-                state('visible', style({
+                state('visible', style$1({
                     height: '*'
                 })),
                 transition('visible <=> hidden', [animate('{{transitionParams}}')]),
@@ -497,16 +348,16 @@ class PanelMenuSub extends BaseComponent {
             ])
         ], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: PanelMenuSub, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: PanelMenuSub, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-panelMenuSub, p-panelmenu-sub',
-                    imports: [CommonModule, RouterModule, TooltipModule, AngleDownIcon, AngleRightIcon, SharedModule],
+                    imports: [CommonModule, RouterModule, TooltipModule, ChevronDownIcon, ChevronRightIcon, SharedModule],
                     standalone: true,
                     template: `
         <ul
             #list
-            [ngClass]="{ 'p-panelmenu-submenu': true }"
+            [class]="root ? cn(cx('rootList'), cx('submenu')) : cx('submenu')"
             role="tree"
             [tabindex]="-1"
             [attr.aria-activedescendant]="focusedItemId"
@@ -517,10 +368,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
             (keydown)="menuKeyDown.emit($event)"
         >
             <ng-template ngFor let-processedItem let-index="index" [ngForOf]="items">
-                <li *ngIf="processedItem.separator" class="p-menuitem-separator" role="separator"></li>
+                <li *ngIf="processedItem.separator" [class]="cn(cx('separator'), getItemProp(processedItem, 'styleClass'))" role="separator"></li>
                 <li
                     *ngIf="!processedItem.separator && isItemVisible(processedItem)"
-                    [ngClass]="getItemClass(processedItem)"
                     role="treeitem"
                     [attr.id]="getItemId(processedItem)"
                     [attr.aria-label]="getItemProp(processedItem, 'label')"
@@ -528,36 +378,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                     [attr.aria-level]="level + 1"
                     [attr.aria-setsize]="getAriaSetSize()"
                     [attr.aria-posinset]="getAriaPosInset(index)"
-                    [class]="getItemProp(processedItem, 'styleClass')"
-                    [class.p-hidden]="processedItem.visible === false"
-                    [class.p-focus]="isItemFocused(processedItem) && !isItemDisabled(processedItem)"
+                    [class]="cn(cx('item', { processedItem }, processedItem.styleClass))"
                     [ngStyle]="getItemProp(processedItem, 'style')"
                     [pTooltip]="getItemProp(processedItem, 'tooltip')"
                     [attr.data-p-disabled]="isItemDisabled(processedItem)"
                     [tooltipOptions]="getItemProp(processedItem, 'tooltipOptions')"
                 >
-                    <div class="p-panelmenu-item-content" (click)="onItemClick($event, processedItem)">
+                    <div [class]="cx('itemContent')" (click)="onItemClick($event, processedItem)">
                         <ng-container *ngIf="!itemTemplate">
                             <a
                                 *ngIf="!getItemProp(processedItem, 'routerLink')"
                                 [attr.href]="getItemProp(processedItem, 'url')"
-                                class="p-panelmenu-item-link"
-                                [ngClass]="{ 'p-disabled': getItemProp(processedItem, 'disabled') }"
+                                [class]="cx('itemLink')"
                                 [target]="getItemProp(processedItem, 'target')"
                                 [attr.data-pc-section]="'action'"
                                 [attr.tabindex]="!!parentExpanded ? '0' : '-1'"
                             >
                                 <ng-container *ngIf="isItemGroup(processedItem)">
                                     <ng-container *ngIf="!panelMenu.submenuIconTemplate && !panelMenu._submenuIconTemplate">
-                                        <AngleDownIcon [styleClass]="'p-panelmenu-submenu-icon'" *ngIf="isItemActive(processedItem)" [ngStyle]="getItemProp(processedItem, 'iconStyle')" />
-                                        <AngleRightIcon [styleClass]="'p-panelmenu-submenu-icon'" *ngIf="!isItemActive(processedItem)" [ngStyle]="getItemProp(processedItem, 'iconStyle')" />
+                                        <ChevronDownIcon [styleClass]="cn(cx('submenuIcon'), getItemProp(processedItem, 'icon'))" *ngIf="isItemActive(processedItem)" [ngStyle]="getItemProp(processedItem, 'iconStyle')" />
+                                        <ChevronRightIcon [styleClass]="cn(cx('submenuIcon'), getItemProp(processedItem, 'icon'))" *ngIf="!isItemActive(processedItem)" [ngStyle]="getItemProp(processedItem, 'iconStyle')" />
                                     </ng-container>
                                     <ng-template *ngTemplateOutlet="panelMenu.submenuIconTemplate || panelMenu._submenuIconTemplate"></ng-template>
                                 </ng-container>
-                                <span class="p-panelmenu-submenu-icon" [ngClass]="processedItem.icon" *ngIf="processedItem.icon" [ngStyle]="getItemProp(processedItem, 'iconStyle')"></span>
-                                <span class="p-panelmenu-item-label" *ngIf="processedItem.item?.escape !== false; else htmlLabel">{{ getItemProp(processedItem, 'label') }}</span>
-                                <ng-template #htmlLabel><span class="p-panelmenu-item-label" [innerHTML]="getItemProp(processedItem, 'label')"></span></ng-template>
-                                <span class="p-menuitem-badge" *ngIf="processedItem.badge" [ngClass]="processedItem.badgeStyleClass">{{ processedItem.badge }}</span>
+                                <span [class]="cx('itemIcon', { processedItem })" *ngIf="processedItem.icon" [ngStyle]="getItemProp(processedItem, 'iconStyle')"></span>
+                                <span [class]="cx('itemLabel')" *ngIf="processedItem.item?.escape !== false; else htmlLabel">{{ getItemProp(processedItem, 'label') }}</span>
+                                <ng-template #htmlLabel><span [class]="cx('itemLabel')" [innerHTML]="getItemProp(processedItem, 'label')"></span></ng-template>
                             </a>
                             <a
                                 *ngIf="getItemProp(processedItem, 'routerLink')"
@@ -565,8 +411,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                                 [queryParams]="getItemProp(processedItem, 'queryParams')"
                                 [routerLinkActive]="'p-panelmenu-item-link-active'"
                                 [routerLinkActiveOptions]="getItemProp(processedItem, 'routerLinkActiveOptions') || { exact: false }"
-                                class="p-panelmenu-item-link"
-                                [ngClass]="{ 'p-disabled': getItemProp(processedItem, 'disabled') }"
+                                [class]="cx('itemLink')"
                                 [target]="getItemProp(processedItem, 'target')"
                                 [attr.title]="getItemProp(processedItem, 'title')"
                                 [fragment]="getItemProp(processedItem, 'fragment')"
@@ -580,22 +425,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                             >
                                 <ng-container *ngIf="isItemGroup(processedItem)">
                                     <ng-container *ngIf="!panelMenu.submenuIconTemplate && !panelMenu._submenuIconTemplate">
-                                        <AngleDownIcon *ngIf="isItemActive(processedItem)" [styleClass]="'p-panelmenu-submenu-icon'" [ngStyle]="getItemProp(processedItem, 'iconStyle')" />
-                                        <AngleRightIcon *ngIf="!isItemActive(processedItem)" [styleClass]="'p-panelmenu-submenu-icon'" [ngStyle]="getItemProp(processedItem, 'iconStyle')" />
+                                        <ChevronDownIcon *ngIf="isItemActive(processedItem)" [styleClass]="cn(cx('submenuIcon'), getItemProp(processedItem, 'icon'))" [ngStyle]="getItemProp(processedItem, 'iconStyle')" />
+                                        <ChevronRightIcon *ngIf="!isItemActive(processedItem)" [styleClass]="cn(cx('submenuIcon'), getItemProp(processedItem, 'icon'))" [ngStyle]="getItemProp(processedItem, 'iconStyle')" />
                                     </ng-container>
                                     <ng-template *ngTemplateOutlet="panelMenu.submenuIconTemplate && panelMenu._submenuIconTemplate"></ng-template>
                                 </ng-container>
-                                <span class="p-panelmenu-submenu-icon" [ngClass]="processedItem.icon" *ngIf="processedItem.icon" [ngStyle]="getItemProp(processedItem, 'iconStyle')"></span>
-                                <span class="p-panelmenu-item-label" *ngIf="getItemProp(processedItem, 'escape') !== false; else htmlRouteLabel">{{ getItemProp(processedItem, 'label') }}</span>
-                                <ng-template #htmlRouteLabel><span class="p-panelmenu-item-label" [innerHTML]="getItemProp(processedItem, 'label')"></span></ng-template>
-                                <span class="p-menuitem-badge" *ngIf="processedItem.badge" [ngClass]="getItemProp(processedItem, 'badgeStyleClass')">{{ getItemProp(processedItem, 'badge') }}</span>
+                                <span [class]="cn(cx('itemIcon'), getItemProp(processedItem, 'icon'))" *ngIf="processedItem.icon" [ngStyle]="getItemProp(processedItem, 'iconStyle')"></span>
+                                <span *ngIf="getItemProp(processedItem, 'label')" [class]="cx('itemLabel')" [innerHTML]="getItemProp(processedItem, 'label')"></span>
+
+                                <span [class]="cn(cx('badge'), getItemProp(processedItem, 'badgeStyleClass'))" *ngIf="processedItem.badge">{{ processedItem.badge }}</span>
                             </a>
                         </ng-container>
                         <ng-container *ngIf="itemTemplate">
                             <ng-template *ngTemplateOutlet="itemTemplate; context: { $implicit: processedItem.item }"></ng-template>
                         </ng-container>
                     </div>
-                    <div class="p-toggleable-content" [@submenu]="getAnimation(processedItem)">
+                    <div [@submenu]="getAnimation(processedItem)">
                         <p-panelmenu-sub
                             *ngIf="isItemVisible(processedItem) && isItemGroup(processedItem) && isItemExpanded(processedItem)"
                             [id]="getItemId(processedItem) + '_list'"
@@ -616,17 +461,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
     `,
                     animations: [
                         trigger('submenu', [
-                            state('hidden', style({
+                            state('hidden', style$1({
                                 height: '0'
                             })),
-                            state('visible', style({
+                            state('visible', style$1({
                                 height: '*'
                             })),
                             transition('visible <=> hidden', [animate('{{transitionParams}}')]),
                             transition('void => *', animate(0))
                         ])
                     ],
-                    encapsulation: ViewEncapsulation.None
+                    encapsulation: ViewEncapsulation.None,
+                    providers: [PanelMenuStyle]
                 }]
         }], propDecorators: { panelId: [{
                 type: Input
@@ -989,8 +835,8 @@ class PanelMenuList extends BaseComponent {
         }, 500);
         return matched;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: PanelMenuList, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.10", type: PanelMenuList, isStandalone: true, selector: "p-panelMenuList, p-panel-menu-list", inputs: { panelId: "panelId", id: "id", items: "items", itemTemplate: "itemTemplate", parentExpanded: ["parentExpanded", "parentExpanded", booleanAttribute], expanded: ["expanded", "expanded", booleanAttribute], transitionOptions: "transitionOptions", root: ["root", "root", booleanAttribute], tabindex: ["tabindex", "tabindex", numberAttribute], activeItem: "activeItem" }, outputs: { itemToggle: "itemToggle", headerFocus: "headerFocus" }, viewQueries: [{ propertyName: "subMenuViewChild", first: true, predicate: ["submenu"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: PanelMenuList, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.0.6", type: PanelMenuList, isStandalone: true, selector: "p-panelMenuList, p-panel-menu-list", inputs: { panelId: "panelId", id: "id", items: "items", itemTemplate: "itemTemplate", parentExpanded: ["parentExpanded", "parentExpanded", booleanAttribute], expanded: ["expanded", "expanded", booleanAttribute], transitionOptions: "transitionOptions", root: ["root", "root", booleanAttribute], tabindex: ["tabindex", "tabindex", numberAttribute], activeItem: "activeItem" }, outputs: { itemToggle: "itemToggle", headerFocus: "headerFocus" }, viewQueries: [{ propertyName: "subMenuViewChild", first: true, predicate: ["submenu"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
         <p-panelmenu-sub
             #submenu
             [root]="true"
@@ -1010,7 +856,7 @@ class PanelMenuList extends BaseComponent {
         ></p-panelmenu-sub>
     `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: PanelMenuSub, selector: "p-panelMenuSub, p-panelmenu-sub", inputs: ["panelId", "focusedItemId", "items", "itemTemplate", "level", "activeItemPath", "root", "tabindex", "transitionOptions", "parentExpanded"], outputs: ["itemToggle", "menuFocus", "menuBlur", "menuKeyDown"] }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "ngmodule", type: SharedModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: PanelMenuList, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: PanelMenuList, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-panelMenuList, p-panel-menu-list',
@@ -1080,13 +926,9 @@ class PanelMenu extends BaseComponent {
      * @group Props
      */
     model;
-    /**
-     * Inline style of the component.
-     * @group Props
-     */
-    style;
     /**
      * Style class of the component.
+     * @deprecated since v20.0.0, use `class` instead.
      * @group Props
      */
     styleClass;
@@ -1112,10 +954,15 @@ class PanelMenu extends BaseComponent {
     tabindex = 0;
     containerViewChild;
     /**
-     * Template option of submenuicon.
+     * Template option of submenu icon.
      * @group Templates
      */
     submenuIconTemplate;
+    /**
+     * Template option of header icon.
+     * @group Templates
+     */
+    headerIconTemplate;
     /**
      * Template option of item.
      * @group Templates
@@ -1123,6 +970,7 @@ class PanelMenu extends BaseComponent {
     itemTemplate;
     templates;
     _submenuIconTemplate;
+    _headerIconTemplate;
     _itemTemplate;
     animating;
     activeItem = signal(null);
@@ -1137,6 +985,9 @@ class PanelMenu extends BaseComponent {
                 case 'submenuicon':
                     this._submenuIconTemplate = item.template;
                     break;
+                case 'headericon':
+                    this._headerIconTemplate = item.template;
+                    break;
                 case 'item':
                     this._itemTemplate = item.template;
                     break;
@@ -1289,125 +1140,117 @@ class PanelMenu extends BaseComponent {
         headerAction ? headerAction.click() : this.onHeaderClick(event, item, index);
         event.preventDefault();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: PanelMenu, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.10", type: PanelMenu, isStandalone: true, selector: "p-panelMenu, p-panelmenu, p-panel-menu", inputs: { model: "model", style: "style", styleClass: "styleClass", multiple: ["multiple", "multiple", booleanAttribute], transitionOptions: "transitionOptions", id: "id", tabindex: ["tabindex", "tabindex", numberAttribute] }, providers: [PanelMenuStyle], queries: [{ propertyName: "submenuIconTemplate", first: true, predicate: ["submenuicon"] }, { propertyName: "itemTemplate", first: true, predicate: ["item"] }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "containerViewChild", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
-        <div [class]="styleClass" [ngStyle]="style" [ngClass]="'p-panelmenu p-component'" #container>
-            <ng-container *ngFor="let item of model; let f = first; let l = last; let i = index">
-                <div *ngIf="isItemVisible(item)" class="p-panelmenu-panel" [ngClass]="getItemProp(item, 'headerClass')" [ngStyle]="getItemProp(item, 'style')" [attr.data-pc-section]="'panel'">
-                    <div
-                        [ngClass]="{
-                            'p-component p-panelmenu-header': true,
-                            'p-panelmenu-header-active': isItemActive(item) && !!item.items,
-                            'p-disabled': isItemDisabled(item)
-                        }"
-                        [class]="getItemProp(item, 'styleClass')"
-                        [ngStyle]="getItemProp(item, 'style')"
-                        [pTooltip]="getItemProp(item, 'tooltip')"
-                        [attr.id]="getHeaderId(item, i)"
-                        [tabindex]="0"
-                        role="button"
-                        [tooltipOptions]="getItemProp(item, 'tooltipOptions')"
-                        [attr.aria-expanded]="isItemActive(item)"
-                        [attr.aria-label]="getItemProp(item, 'label')"
-                        [attr.aria-controls]="getContentId(item, i)"
-                        [attr.aria-disabled]="isItemDisabled(item)"
-                        [attr.data-p-highlight]="isItemActive(item)"
-                        [attr.data-p-disabled]="isItemDisabled(item)"
-                        [attr.data-pc-section]="'header'"
-                        (click)="onHeaderClick($event, item, i)"
-                        (keydown)="onHeaderKeyDown($event, item, i)"
-                    >
-                        <div class="p-panelmenu-header-content">
-                            <ng-container *ngIf="!itemTemplate && !_itemTemplate">
-                                <a
-                                    *ngIf="!getItemProp(item, 'routerLink')"
-                                    [attr.href]="getItemProp(item, 'url')"
-                                    [attr.tabindex]="-1"
-                                    [target]="getItemProp(item, 'target')"
-                                    [attr.title]="getItemProp(item, 'title')"
-                                    class="p-panelmenu-header-link"
-                                    [attr.data-pc-section]="'headeraction'"
-                                >
-                                    <ng-container *ngIf="isItemGroup(item)">
-                                        <ng-container *ngIf="!submenuIconTemplate && !_submenuIconTemplate">
-                                            <ChevronDownIcon [styleClass]="'p-panelmenu-submenu-icon'" *ngIf="isItemActive(item)" />
-                                            <ChevronRightIcon [styleClass]="'p-panelmenu-submenu-icon'" *ngIf="!isItemActive(item)" />
-                                        </ng-container>
-                                        <ng-template *ngTemplateOutlet="submenuIconTemplate || _submenuIconTemplate"></ng-template>
-                                    </ng-container>
-                                    <span class="p-panelmenu-submenu-icon" [ngClass]="item.icon" *ngIf="item.icon" [ngStyle]="getItemProp(item, 'iconStyle')"></span>
-                                    <span class="p-panelmenu-header-label" *ngIf="getItemProp(item, 'escape') !== false; else htmlLabel">{{ getItemProp(item, 'label') }}</span>
-                                    <ng-template #htmlLabel><span class="p-panelmenu-header-label" [innerHTML]="getItemProp(item, 'label')"></span></ng-template>
-                                    <span class="p-menuitem-badge" *ngIf="getItemProp(item, 'badge')" [ngClass]="getItemProp(item, 'badgeStyleClass')">{{ getItemProp(item, 'badge') }}</span>
-                                </a>
-                            </ng-container>
-                            <ng-container *ngTemplateOutlet="itemTemplate; context: { $implicit: item }"></ng-container>
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: PanelMenu, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.0.6", type: PanelMenu, isStandalone: true, selector: "p-panelMenu, p-panelmenu, p-panel-menu", inputs: { model: "model", styleClass: "styleClass", multiple: ["multiple", "multiple", booleanAttribute], transitionOptions: "transitionOptions", id: "id", tabindex: ["tabindex", "tabindex", numberAttribute] }, host: { attributes: { "data-pc-section": "root", "data-pc-name": "panelmenu" }, properties: { "class": "cn(cx(\"root\"), styleClass)" } }, providers: [PanelMenuStyle], queries: [{ propertyName: "submenuIconTemplate", first: true, predicate: ["submenuicon"] }, { propertyName: "headerIconTemplate", first: true, predicate: ["headericon"] }, { propertyName: "itemTemplate", first: true, predicate: ["item"] }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "containerViewChild", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
+        <ng-container *ngFor="let item of model; let f = first; let l = last; let i = index">
+            <div *ngIf="isItemVisible(item)" [class]="cn(cx('panel'), getItemProp(item, 'headerClass'))" [ngStyle]="getItemProp(item, 'style')" [attr.data-pc-section]="'panel'">
+                <div
+                    [class]="cn(cx('header', { item }), getItemProp(item, 'styleClass'))"
+                    [ngStyle]="getItemProp(item, 'style')"
+                    [pTooltip]="getItemProp(item, 'tooltip')"
+                    [attr.id]="getHeaderId(item, i)"
+                    [tabindex]="0"
+                    role="button"
+                    [tooltipOptions]="getItemProp(item, 'tooltipOptions')"
+                    [attr.aria-expanded]="isItemActive(item)"
+                    [attr.aria-label]="getItemProp(item, 'label')"
+                    [attr.aria-controls]="getContentId(item, i)"
+                    [attr.aria-disabled]="isItemDisabled(item)"
+                    [attr.data-p-highlight]="isItemActive(item)"
+                    [attr.data-p-disabled]="isItemDisabled(item)"
+                    [attr.data-pc-section]="'header'"
+                    (click)="onHeaderClick($event, item, i)"
+                    (keydown)="onHeaderKeyDown($event, item, i)"
+                >
+                    <div [class]="cx('headerContent')">
+                        <ng-container *ngIf="!itemTemplate && !_itemTemplate">
                             <a
-                                *ngIf="getItemProp(item, 'routerLink')"
-                                [routerLink]="getItemProp(item, 'routerLink')"
-                                [queryParams]="getItemProp(item, 'queryParams')"
-                                [routerLinkActive]="'p-panelmenu-item-link-active'"
-                                [routerLinkActiveOptions]="getItemProp(item, 'routerLinkActiveOptions') || { exact: false }"
-                                [target]="getItemProp(item, 'target')"
-                                class="p-panelmenu-header-link"
+                                *ngIf="!getItemProp(item, 'routerLink')"
+                                [attr.href]="getItemProp(item, 'url')"
                                 [attr.tabindex]="-1"
-                                [fragment]="getItemProp(item, 'fragment')"
-                                [queryParamsHandling]="getItemProp(item, 'queryParamsHandling')"
-                                [preserveFragment]="getItemProp(item, 'preserveFragment')"
-                                [skipLocationChange]="getItemProp(item, 'skipLocationChange')"
-                                [replaceUrl]="getItemProp(item, 'replaceUrl')"
-                                [state]="getItemProp(item, 'state')"
+                                [target]="getItemProp(item, 'target')"
+                                [attr.title]="getItemProp(item, 'title')"
+                                [class]="cx('headerLink')"
                                 [attr.data-pc-section]="'headeraction'"
                             >
                                 <ng-container *ngIf="isItemGroup(item)">
-                                    <ng-container *ngIf="!submenuIconTemplate && !_submenuIconTemplate">
-                                        <ChevronDownIcon [styleClass]="'p-panelmenu-submenu-icon'" *ngIf="isItemActive(item)" />
-                                        <ChevronRightIcon [styleClass]="'p-panelmenu-submenu-icon'" *ngIf="!isItemActive(item)" />
+                                    <ng-container *ngIf="!headerIconTemplate && !_headerIconTemplate">
+                                        <ChevronDownIcon [styleClass]="cx('headerIcon')" *ngIf="isItemActive(item)" />
+                                        <ChevronRightIcon [styleClass]="cx('headerIcon')" *ngIf="!isItemActive(item)" />
                                     </ng-container>
-                                    <ng-template *ngTemplateOutlet="submenuIconTemplate || _submenuIconTemplate"></ng-template>
+                                    <ng-template *ngTemplateOutlet="headerIconTemplate || _headerIconTemplate"></ng-template>
                                 </ng-container>
-                                <span class="p-panelmenu-submenu-icon" [ngClass]="item.icon" *ngIf="item.icon" [ngStyle]="getItemProp(item, 'iconStyle')"></span>
-                                <span class="p-panelmenu-header-label" *ngIf="getItemProp(item, 'escape') !== false; else htmlRouteLabel">{{ getItemProp(item, 'label') }}</span>
-                                <ng-template #htmlRouteLabel><span class="p-panelmenu-header-label" [innerHTML]="getItemProp(item, 'label')"></span></ng-template>
-                                <span class="p-menuitem-badge" *ngIf="getItemProp(item, 'badge')" [ngClass]="getItemProp(item, 'badgeStyleClass')">{{ getItemProp(item, 'badge') }}</span>
+                                <span [class]="cn(cx('headerIcon'), item.icon)" *ngIf="item.icon" [ngStyle]="getItemProp(item, 'iconStyle')"></span>
+                                <span [class]="cx('headerLabel')" *ngIf="getItemProp(item, 'escape') !== false; else htmlLabel">{{ getItemProp(item, 'label') }}</span>
+                                <ng-template #htmlLabel><span [class]="cx('headerLabel')" [innerHTML]="getItemProp(item, 'label')"></span></ng-template>
+                                <span [class]="cn(cx('badge'), getItemProp(item, 'badgeStyleClass'))" *ngIf="getItemProp(item, 'badge')">{{ getItemProp(item, 'badge') }}</span>
                             </a>
-                        </div>
+                        </ng-container>
+                        <ng-container *ngTemplateOutlet="itemTemplate; context: { $implicit: item }"></ng-container>
+                        <a
+                            *ngIf="getItemProp(item, 'routerLink')"
+                            [routerLink]="getItemProp(item, 'routerLink')"
+                            [queryParams]="getItemProp(item, 'queryParams')"
+                            [routerLinkActive]="'p-panelmenu-item-link-active'"
+                            [routerLinkActiveOptions]="getItemProp(item, 'routerLinkActiveOptions') || { exact: false }"
+                            [target]="getItemProp(item, 'target')"
+                            [class]="cx('headerLink')"
+                            [attr.tabindex]="-1"
+                            [fragment]="getItemProp(item, 'fragment')"
+                            [queryParamsHandling]="getItemProp(item, 'queryParamsHandling')"
+                            [preserveFragment]="getItemProp(item, 'preserveFragment')"
+                            [skipLocationChange]="getItemProp(item, 'skipLocationChange')"
+                            [replaceUrl]="getItemProp(item, 'replaceUrl')"
+                            [state]="getItemProp(item, 'state')"
+                            [attr.data-pc-section]="'headeraction'"
+                        >
+                            <ng-container *ngIf="isItemGroup(item)">
+                                <ng-container *ngIf="!headerIconTemplate && !_headerIconTemplate">
+                                    <ChevronDownIcon [styleClass]="cx('headerIcon')" *ngIf="isItemActive(item)" />
+                                    <ChevronRightIcon [styleClass]="cx('headerIcon')" *ngIf="!isItemActive(item)" />
+                                </ng-container>
+                                <ng-template *ngTemplateOutlet="headerIconTemplate || _headerIconTemplate"></ng-template>
+                            </ng-container>
+                            <span [class]="cn(cx('headerIcon'), item.icon)" *ngIf="item.icon" [ngStyle]="getItemProp(item, 'iconStyle')"></span>
+                            <span [class]="cx('headerLabel')" *ngIf="getItemProp(item, 'escape') !== false; else htmlRouteLabel">{{ getItemProp(item, 'label') }}</span>
+                            <ng-template #htmlRouteLabel><span [class]="cx('headerLabel')" [innerHTML]="getItemProp(item, 'label')"></span></ng-template>
+                            <span *ngIf="getItemProp(item, 'badge')" [class]="cn(cx('badge'), getItemProp(item, 'badgeStyleClass'))">{{ getItemProp(item, 'badge') }}</span>
+                        </a>
                     </div>
-                    <div
-                        *ngIf="isItemGroup(item)"
-                        class="p-panelmenu-content-container"
-                        [@rootItem]="getAnimation(item)"
-                        (@rootItem.done)="onToggleDone()"
-                        role="region"
-                        [attr.id]="getContentId(item, i)"
-                        [attr.aria-labelledby]="getHeaderId(item, i)"
-                        [attr.data-pc-section]="'toggleablecontent'"
-                        [ngClass]="{ 'p-panelmenu-expanded': isItemActive(item) }"
-                    >
-                        <div class="p-panelmenu-content" [attr.data-pc-section]="'menucontent'">
-                            <p-panelMenuList
-                                [panelId]="getPanelId(i, item)"
-                                [items]="getItemProp(item, 'items')"
-                                [itemTemplate]="itemTemplate || _itemTemplate"
-                                [transitionOptions]="transitionOptions"
-                                [root]="true"
-                                [activeItem]="activeItem()"
-                                [tabindex]="tabindex"
-                                [parentExpanded]="isItemActive(item)"
-                                (headerFocus)="updateFocusedHeader($event)"
-                            ></p-panelMenuList>
-                        </div>
+                </div>
+                <div
+                    *ngIf="isItemGroup(item)"
+                    [class]="cx('contentContainer', { processedItem: item })"
+                    [@rootItem]="getAnimation(item)"
+                    (@rootItem.done)="onToggleDone()"
+                    role="region"
+                    [attr.id]="getContentId(item, i)"
+                    [attr.aria-labelledby]="getHeaderId(item, i)"
+                    [attr.data-pc-section]="'toggleablecontent'"
+                >
+                    <div [class]="cx('content')" [attr.data-pc-section]="'menucontent'">
+                        <p-panelMenuList
+                            [panelId]="getPanelId(i, item)"
+                            [items]="getItemProp(item, 'items')"
+                            [itemTemplate]="itemTemplate || _itemTemplate"
+                            [transitionOptions]="transitionOptions"
+                            [root]="true"
+                            [activeItem]="activeItem()"
+                            [tabindex]="tabindex"
+                            [parentExpanded]="isItemActive(item)"
+                            (headerFocus)="updateFocusedHeader($event)"
+                        ></p-panelMenuList>
                     </div>
                 </div>
-            </ng-container>
-        </div>
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: PanelMenuList, selector: "p-panelMenuList, p-panel-menu-list", inputs: ["panelId", "id", "items", "itemTemplate", "parentExpanded", "expanded", "transitionOptions", "root", "tabindex", "activeItem"], outputs: ["itemToggle", "headerFocus"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i3.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: ChevronDownIcon, selector: "ChevronDownIcon" }, { kind: "component", type: ChevronRightIcon, selector: "ChevronRightIcon" }, { kind: "ngmodule", type: SharedModule }], animations: [
+            </div>
+        </ng-container>
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: PanelMenuList, selector: "p-panelMenuList, p-panel-menu-list", inputs: ["panelId", "id", "items", "itemTemplate", "parentExpanded", "expanded", "transitionOptions", "root", "tabindex", "activeItem"], outputs: ["itemToggle", "headerFocus"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i3.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "component", type: ChevronDownIcon, selector: "ChevronDownIcon" }, { kind: "component", type: ChevronRightIcon, selector: "ChevronRightIcon" }, { kind: "ngmodule", type: SharedModule }], animations: [
             trigger('rootItem', [
-                state('hidden', style({
+                state('hidden', style$1({
                     height: '0',
                     visibility: 'hidden'
                 })),
-                state('visible', style({
+                state('visible', style$1({
                     height: '*',
                     visibility: '*'
                 })),
@@ -1416,131 +1259,123 @@ class PanelMenu extends BaseComponent {
             ])
         ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: PanelMenu, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: PanelMenu, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-panelMenu, p-panelmenu, p-panel-menu',
                     imports: [CommonModule, PanelMenuList, RouterModule, TooltipModule, ChevronDownIcon, ChevronRightIcon, SharedModule],
                     standalone: true,
                     template: `
-        <div [class]="styleClass" [ngStyle]="style" [ngClass]="'p-panelmenu p-component'" #container>
-            <ng-container *ngFor="let item of model; let f = first; let l = last; let i = index">
-                <div *ngIf="isItemVisible(item)" class="p-panelmenu-panel" [ngClass]="getItemProp(item, 'headerClass')" [ngStyle]="getItemProp(item, 'style')" [attr.data-pc-section]="'panel'">
-                    <div
-                        [ngClass]="{
-                            'p-component p-panelmenu-header': true,
-                            'p-panelmenu-header-active': isItemActive(item) && !!item.items,
-                            'p-disabled': isItemDisabled(item)
-                        }"
-                        [class]="getItemProp(item, 'styleClass')"
-                        [ngStyle]="getItemProp(item, 'style')"
-                        [pTooltip]="getItemProp(item, 'tooltip')"
-                        [attr.id]="getHeaderId(item, i)"
-                        [tabindex]="0"
-                        role="button"
-                        [tooltipOptions]="getItemProp(item, 'tooltipOptions')"
-                        [attr.aria-expanded]="isItemActive(item)"
-                        [attr.aria-label]="getItemProp(item, 'label')"
-                        [attr.aria-controls]="getContentId(item, i)"
-                        [attr.aria-disabled]="isItemDisabled(item)"
-                        [attr.data-p-highlight]="isItemActive(item)"
-                        [attr.data-p-disabled]="isItemDisabled(item)"
-                        [attr.data-pc-section]="'header'"
-                        (click)="onHeaderClick($event, item, i)"
-                        (keydown)="onHeaderKeyDown($event, item, i)"
-                    >
-                        <div class="p-panelmenu-header-content">
-                            <ng-container *ngIf="!itemTemplate && !_itemTemplate">
-                                <a
-                                    *ngIf="!getItemProp(item, 'routerLink')"
-                                    [attr.href]="getItemProp(item, 'url')"
-                                    [attr.tabindex]="-1"
-                                    [target]="getItemProp(item, 'target')"
-                                    [attr.title]="getItemProp(item, 'title')"
-                                    class="p-panelmenu-header-link"
-                                    [attr.data-pc-section]="'headeraction'"
-                                >
-                                    <ng-container *ngIf="isItemGroup(item)">
-                                        <ng-container *ngIf="!submenuIconTemplate && !_submenuIconTemplate">
-                                            <ChevronDownIcon [styleClass]="'p-panelmenu-submenu-icon'" *ngIf="isItemActive(item)" />
-                                            <ChevronRightIcon [styleClass]="'p-panelmenu-submenu-icon'" *ngIf="!isItemActive(item)" />
-                                        </ng-container>
-                                        <ng-template *ngTemplateOutlet="submenuIconTemplate || _submenuIconTemplate"></ng-template>
-                                    </ng-container>
-                                    <span class="p-panelmenu-submenu-icon" [ngClass]="item.icon" *ngIf="item.icon" [ngStyle]="getItemProp(item, 'iconStyle')"></span>
-                                    <span class="p-panelmenu-header-label" *ngIf="getItemProp(item, 'escape') !== false; else htmlLabel">{{ getItemProp(item, 'label') }}</span>
-                                    <ng-template #htmlLabel><span class="p-panelmenu-header-label" [innerHTML]="getItemProp(item, 'label')"></span></ng-template>
-                                    <span class="p-menuitem-badge" *ngIf="getItemProp(item, 'badge')" [ngClass]="getItemProp(item, 'badgeStyleClass')">{{ getItemProp(item, 'badge') }}</span>
-                                </a>
-                            </ng-container>
-                            <ng-container *ngTemplateOutlet="itemTemplate; context: { $implicit: item }"></ng-container>
+        <ng-container *ngFor="let item of model; let f = first; let l = last; let i = index">
+            <div *ngIf="isItemVisible(item)" [class]="cn(cx('panel'), getItemProp(item, 'headerClass'))" [ngStyle]="getItemProp(item, 'style')" [attr.data-pc-section]="'panel'">
+                <div
+                    [class]="cn(cx('header', { item }), getItemProp(item, 'styleClass'))"
+                    [ngStyle]="getItemProp(item, 'style')"
+                    [pTooltip]="getItemProp(item, 'tooltip')"
+                    [attr.id]="getHeaderId(item, i)"
+                    [tabindex]="0"
+                    role="button"
+                    [tooltipOptions]="getItemProp(item, 'tooltipOptions')"
+                    [attr.aria-expanded]="isItemActive(item)"
+                    [attr.aria-label]="getItemProp(item, 'label')"
+                    [attr.aria-controls]="getContentId(item, i)"
+                    [attr.aria-disabled]="isItemDisabled(item)"
+                    [attr.data-p-highlight]="isItemActive(item)"
+                    [attr.data-p-disabled]="isItemDisabled(item)"
+                    [attr.data-pc-section]="'header'"
+                    (click)="onHeaderClick($event, item, i)"
+                    (keydown)="onHeaderKeyDown($event, item, i)"
+                >
+                    <div [class]="cx('headerContent')">
+                        <ng-container *ngIf="!itemTemplate && !_itemTemplate">
                             <a
-                                *ngIf="getItemProp(item, 'routerLink')"
-                                [routerLink]="getItemProp(item, 'routerLink')"
-                                [queryParams]="getItemProp(item, 'queryParams')"
-                                [routerLinkActive]="'p-panelmenu-item-link-active'"
-                                [routerLinkActiveOptions]="getItemProp(item, 'routerLinkActiveOptions') || { exact: false }"
-                                [target]="getItemProp(item, 'target')"
-                                class="p-panelmenu-header-link"
+                                *ngIf="!getItemProp(item, 'routerLink')"
+                                [attr.href]="getItemProp(item, 'url')"
                                 [attr.tabindex]="-1"
-                                [fragment]="getItemProp(item, 'fragment')"
-                                [queryParamsHandling]="getItemProp(item, 'queryParamsHandling')"
-                                [preserveFragment]="getItemProp(item, 'preserveFragment')"
-                                [skipLocationChange]="getItemProp(item, 'skipLocationChange')"
-                                [replaceUrl]="getItemProp(item, 'replaceUrl')"
-                                [state]="getItemProp(item, 'state')"
+                                [target]="getItemProp(item, 'target')"
+                                [attr.title]="getItemProp(item, 'title')"
+                                [class]="cx('headerLink')"
                                 [attr.data-pc-section]="'headeraction'"
                             >
                                 <ng-container *ngIf="isItemGroup(item)">
-                                    <ng-container *ngIf="!submenuIconTemplate && !_submenuIconTemplate">
-                                        <ChevronDownIcon [styleClass]="'p-panelmenu-submenu-icon'" *ngIf="isItemActive(item)" />
-                                        <ChevronRightIcon [styleClass]="'p-panelmenu-submenu-icon'" *ngIf="!isItemActive(item)" />
+                                    <ng-container *ngIf="!headerIconTemplate && !_headerIconTemplate">
+                                        <ChevronDownIcon [styleClass]="cx('headerIcon')" *ngIf="isItemActive(item)" />
+                                        <ChevronRightIcon [styleClass]="cx('headerIcon')" *ngIf="!isItemActive(item)" />
                                     </ng-container>
-                                    <ng-template *ngTemplateOutlet="submenuIconTemplate || _submenuIconTemplate"></ng-template>
+                                    <ng-template *ngTemplateOutlet="headerIconTemplate || _headerIconTemplate"></ng-template>
                                 </ng-container>
-                                <span class="p-panelmenu-submenu-icon" [ngClass]="item.icon" *ngIf="item.icon" [ngStyle]="getItemProp(item, 'iconStyle')"></span>
-                                <span class="p-panelmenu-header-label" *ngIf="getItemProp(item, 'escape') !== false; else htmlRouteLabel">{{ getItemProp(item, 'label') }}</span>
-                                <ng-template #htmlRouteLabel><span class="p-panelmenu-header-label" [innerHTML]="getItemProp(item, 'label')"></span></ng-template>
-                                <span class="p-menuitem-badge" *ngIf="getItemProp(item, 'badge')" [ngClass]="getItemProp(item, 'badgeStyleClass')">{{ getItemProp(item, 'badge') }}</span>
+                                <span [class]="cn(cx('headerIcon'), item.icon)" *ngIf="item.icon" [ngStyle]="getItemProp(item, 'iconStyle')"></span>
+                                <span [class]="cx('headerLabel')" *ngIf="getItemProp(item, 'escape') !== false; else htmlLabel">{{ getItemProp(item, 'label') }}</span>
+                                <ng-template #htmlLabel><span [class]="cx('headerLabel')" [innerHTML]="getItemProp(item, 'label')"></span></ng-template>
+                                <span [class]="cn(cx('badge'), getItemProp(item, 'badgeStyleClass'))" *ngIf="getItemProp(item, 'badge')">{{ getItemProp(item, 'badge') }}</span>
                             </a>
-                        </div>
+                        </ng-container>
+                        <ng-container *ngTemplateOutlet="itemTemplate; context: { $implicit: item }"></ng-container>
+                        <a
+                            *ngIf="getItemProp(item, 'routerLink')"
+                            [routerLink]="getItemProp(item, 'routerLink')"
+                            [queryParams]="getItemProp(item, 'queryParams')"
+                            [routerLinkActive]="'p-panelmenu-item-link-active'"
+                            [routerLinkActiveOptions]="getItemProp(item, 'routerLinkActiveOptions') || { exact: false }"
+                            [target]="getItemProp(item, 'target')"
+                            [class]="cx('headerLink')"
+                            [attr.tabindex]="-1"
+                            [fragment]="getItemProp(item, 'fragment')"
+                            [queryParamsHandling]="getItemProp(item, 'queryParamsHandling')"
+                            [preserveFragment]="getItemProp(item, 'preserveFragment')"
+                            [skipLocationChange]="getItemProp(item, 'skipLocationChange')"
+                            [replaceUrl]="getItemProp(item, 'replaceUrl')"
+                            [state]="getItemProp(item, 'state')"
+                            [attr.data-pc-section]="'headeraction'"
+                        >
+                            <ng-container *ngIf="isItemGroup(item)">
+                                <ng-container *ngIf="!headerIconTemplate && !_headerIconTemplate">
+                                    <ChevronDownIcon [styleClass]="cx('headerIcon')" *ngIf="isItemActive(item)" />
+                                    <ChevronRightIcon [styleClass]="cx('headerIcon')" *ngIf="!isItemActive(item)" />
+                                </ng-container>
+                                <ng-template *ngTemplateOutlet="headerIconTemplate || _headerIconTemplate"></ng-template>
+                            </ng-container>
+                            <span [class]="cn(cx('headerIcon'), item.icon)" *ngIf="item.icon" [ngStyle]="getItemProp(item, 'iconStyle')"></span>
+                            <span [class]="cx('headerLabel')" *ngIf="getItemProp(item, 'escape') !== false; else htmlRouteLabel">{{ getItemProp(item, 'label') }}</span>
+                            <ng-template #htmlRouteLabel><span [class]="cx('headerLabel')" [innerHTML]="getItemProp(item, 'label')"></span></ng-template>
+                            <span *ngIf="getItemProp(item, 'badge')" [class]="cn(cx('badge'), getItemProp(item, 'badgeStyleClass'))">{{ getItemProp(item, 'badge') }}</span>
+                        </a>
                     </div>
-                    <div
-                        *ngIf="isItemGroup(item)"
-                        class="p-panelmenu-content-container"
-                        [@rootItem]="getAnimation(item)"
-                        (@rootItem.done)="onToggleDone()"
-                        role="region"
-                        [attr.id]="getContentId(item, i)"
-                        [attr.aria-labelledby]="getHeaderId(item, i)"
-                        [attr.data-pc-section]="'toggleablecontent'"
-                        [ngClass]="{ 'p-panelmenu-expanded': isItemActive(item) }"
-                    >
-                        <div class="p-panelmenu-content" [attr.data-pc-section]="'menucontent'">
-                            <p-panelMenuList
-                                [panelId]="getPanelId(i, item)"
-                                [items]="getItemProp(item, 'items')"
-                                [itemTemplate]="itemTemplate || _itemTemplate"
-                                [transitionOptions]="transitionOptions"
-                                [root]="true"
-                                [activeItem]="activeItem()"
-                                [tabindex]="tabindex"
-                                [parentExpanded]="isItemActive(item)"
-                                (headerFocus)="updateFocusedHeader($event)"
-                            ></p-panelMenuList>
-                        </div>
+                </div>
+                <div
+                    *ngIf="isItemGroup(item)"
+                    [class]="cx('contentContainer', { processedItem: item })"
+                    [@rootItem]="getAnimation(item)"
+                    (@rootItem.done)="onToggleDone()"
+                    role="region"
+                    [attr.id]="getContentId(item, i)"
+                    [attr.aria-labelledby]="getHeaderId(item, i)"
+                    [attr.data-pc-section]="'toggleablecontent'"
+                >
+                    <div [class]="cx('content')" [attr.data-pc-section]="'menucontent'">
+                        <p-panelMenuList
+                            [panelId]="getPanelId(i, item)"
+                            [items]="getItemProp(item, 'items')"
+                            [itemTemplate]="itemTemplate || _itemTemplate"
+                            [transitionOptions]="transitionOptions"
+                            [root]="true"
+                            [activeItem]="activeItem()"
+                            [tabindex]="tabindex"
+                            [parentExpanded]="isItemActive(item)"
+                            (headerFocus)="updateFocusedHeader($event)"
+                        ></p-panelMenuList>
                     </div>
                 </div>
-            </ng-container>
-        </div>
+            </div>
+        </ng-container>
     `,
                     animations: [
                         trigger('rootItem', [
-                            state('hidden', style({
+                            state('hidden', style$1({
                                 height: '0',
                                 visibility: 'hidden'
                             })),
-                            state('visible', style({
+                            state('visible', style$1({
                                 height: '*',
                                 visibility: '*'
                             })),
@@ -1550,12 +1385,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                     ],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
-                    providers: [PanelMenuStyle]
+                    providers: [PanelMenuStyle],
+                    host: {
+                        '[class]': 'cn(cx("root"), styleClass)',
+                        'data-pc-section': 'root',
+                        'data-pc-name': 'panelmenu'
+                    }
                 }]
         }], propDecorators: { model: [{
                 type: Input
-            }], style: [{
-                type: Input
             }], styleClass: [{
                 type: Input
             }], multiple: [{
@@ -1574,6 +1412,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
             }], submenuIconTemplate: [{
                 type: ContentChild,
                 args: ['submenuicon', { descendants: false }]
+            }], headerIconTemplate: [{
+                type: ContentChild,
+                args: ['headericon', { descendants: false }]
             }], itemTemplate: [{
                 type: ContentChild,
                 args: ['item', { descendants: false }]
@@ -1582,11 +1423,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                 args: [PrimeTemplate]
             }] } });
 class PanelMenuModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: PanelMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.10", ngImport: i0, type: PanelMenuModule, imports: [PanelMenu, SharedModule], exports: [PanelMenu, SharedModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: PanelMenuModule, imports: [PanelMenu, SharedModule, SharedModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: PanelMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.6", ngImport: i0, type: PanelMenuModule, imports: [PanelMenu, SharedModule], exports: [PanelMenu, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: PanelMenuModule, imports: [PanelMenu, SharedModule, SharedModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: PanelMenuModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: PanelMenuModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [PanelMenu, SharedModule],