primeng 20.1.2 → 20.3.0-rc.1

package/fesm2022/primeng-panelmenu.mjs

@@ -1,21 +1,24 @@
-import { trigger, state, transition, style as style$1, animate } from '@angular/animations';
-import * as i1 from '@angular/common';
+export * from 'primeng/types/panelmenu';
+import { trigger, state, transition, style as style$2, animate } from '@angular/animations';
+import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, EventEmitter, inject, forwardRef, booleanAttribute, numberAttribute, ViewChild, Output, Input, ViewEncapsulation, Component, signal, computed, ChangeDetectionStrategy, ContentChildren, ContentChild, NgModule } from '@angular/core';
-import * as i2 from '@angular/router';
+import { Injectable, InjectionToken, EventEmitter, inject, ElementRef, forwardRef, booleanAttribute, numberAttribute, Output, Input, ViewEncapsulation, Component, signal, computed, ViewChild, ChangeDetectionStrategy, ContentChildren, ContentChild, NgModule } from '@angular/core';
+import * as i3 from '@angular/router';
 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 { BaseComponent, PARENT_INSTANCE } from 'primeng/basecomponent';
+import * as i1 from 'primeng/bind';
+import { Bind, BindModule } from 'primeng/bind';
 import { ChevronDownIcon, ChevronRightIcon } from 'primeng/icons';
-import * as i3 from 'primeng/tooltip';
+import * as i4 from 'primeng/tooltip';
 import { TooltipModule } from 'primeng/tooltip';
-import { style } from '@primeuix/styles/panelmenu';
+import { style as style$1 } from '@primeuix/styles/panelmenu';
 import { BaseStyle } from 'primeng/base';
 
-const theme = /*css*/ `
-    ${style}
+const style = /*css*/ `
+    ${style$1}
     /*For PrimeNG*/
     .p-panelmenu-item:not(.ng-animating) {
         overflow: hidden;
@@ -66,12 +69,12 @@ const classes = {
 };
 class PanelMenuStyle extends BaseStyle {
     name = 'panelmenu';
-    theme = theme;
+    style = style;
     classes = classes;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PanelMenuStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PanelMenuStyle });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PanelMenuStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PanelMenuStyle });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PanelMenuStyle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PanelMenuStyle, decorators: [{
             type: Injectable
         }] });
 /**
@@ -156,6 +159,8 @@ var PanelMenuClasses;
     PanelMenuClasses["separator"] = "p-menuitem-separator";
 })(PanelMenuClasses || (PanelMenuClasses = {}));
 
+const PANELMENU_INSTANCE = new InjectionToken('PANELMENU_INSTANCE');
+const PANELMENUSUB_INSTANCE = new InjectionToken('PANELMENUSUB_INSTANCE');
 class PanelMenuSub extends BaseComponent {
     panelId;
     focusedItemId;
@@ -171,9 +176,25 @@ class PanelMenuSub extends BaseComponent {
     menuFocus = new EventEmitter();
     menuBlur = new EventEmitter();
     menuKeyDown = new EventEmitter();
-    listViewChild;
+    listViewChild = inject(ElementRef);
     panelMenu = inject(forwardRef(() => PanelMenu));
     _componentStyle = inject(PanelMenuStyle);
+    bindDirectiveInstance = inject(Bind, { self: true });
+    $pcPanelMenu = inject(PANELMENU_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;
+    onAfterViewChecked() {
+        this.bindDirectiveInstance.setAttrs(this.ptm(this.root ? 'rootList' : 'submenu'));
+    }
+    getPTOptions(processedItem, index, key) {
+        return this.ptm(key, {
+            context: {
+                item: processedItem.item,
+                index,
+                active: this.isItemActive(processedItem),
+                focused: this.isItemFocused(processedItem),
+                disabled: this.isItemDisabled(processedItem)
+            }
+        });
+    }
     getItemId(processedItem) {
         return processedItem.item?.id ?? `${this.panelId}_${processedItem.key}`;
     }
@@ -229,117 +250,131 @@ class PanelMenuSub extends BaseComponent {
     onItemToggle(event) {
         this.itemToggle.emit(event);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PanelMenuSub, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.3.0", 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
-            [class]="root ? cn(cx('rootList'), cx('submenu')) : cx('submenu')"
-            role="tree"
-            [tabindex]="-1"
-            [attr.aria-activedescendant]="focusedItemId"
-            [attr.data-pc-section]="'menu'"
-            [attr.aria-hidden]="!parentExpanded"
-            (focusin)="menuFocus.emit($event)"
-            (focusout)="menuBlur.emit($event)"
-            (keydown)="menuKeyDown.emit($event)"
-        >
-            <ng-template ngFor let-processedItem let-index="index" [ngForOf]="items">
-                <li *ngIf="processedItem.separator" [class]="cn(cx('separator'), getItemProp(processedItem, 'styleClass'))" role="separator"></li>
-                <li
-                    *ngIf="!processedItem.separator && isItemVisible(processedItem)"
-                    role="treeitem"
-                    [attr.id]="getItemId(processedItem)"
-                    [attr.aria-label]="getItemProp(processedItem, 'label')"
-                    [attr.aria-expanded]="isItemGroup(processedItem) ? isItemActive(processedItem) : undefined"
-                    [attr.aria-level]="level + 1"
-                    [attr.aria-setsize]="getAriaSetSize()"
-                    [attr.aria-posinset]="getAriaPosInset(index)"
-                    [class]="cn(cx('item', { processedItem }), getItemProp(processedItem, 'styleClass'))"
-                    [ngStyle]="getItemProp(processedItem, 'style')"
-                    [pTooltip]="getItemProp(processedItem, 'tooltip')"
-                    [attr.data-p-disabled]="isItemDisabled(processedItem)"
-                    [tooltipOptions]="getItemProp(processedItem, 'tooltipOptions')"
-                >
-                    <div [class]="cx('itemContent')" (click)="onItemClick($event, processedItem)">
-                        <ng-container *ngIf="!itemTemplate">
-                            <a
-                                *ngIf="!getItemProp(processedItem, 'routerLink')"
-                                [attr.href]="getItemProp(processedItem, 'url')"
-                                [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">
-                                        <svg data-p-icon="chevron-down" [class]="cn(cx('submenuIcon'), getItemProp(processedItem, 'icon'))" *ngIf="isItemActive(processedItem)" [ngStyle]="getItemProp(processedItem, 'iconStyle')" />
-                                        <svg data-p-icon="chevron-right" [class]="cn(cx('submenuIcon'), getItemProp(processedItem, 'icon'))" *ngIf="!isItemActive(processedItem)" [ngStyle]="getItemProp(processedItem, 'iconStyle')" />
-                                    </ng-container>
-                                    <ng-template *ngTemplateOutlet="panelMenu.submenuIconTemplate || panelMenu._submenuIconTemplate"></ng-template>
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PanelMenuSub, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.3.4", type: PanelMenuSub, isStandalone: true, selector: "ul[pPanelMenuSub]", 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" }, host: { attributes: { "role": "tree" }, listeners: { "focusin": "menuFocus.emit($event)", "focusout": "menuBlur.emit($event)", "keydown": "menuKeyDown.emit($event)" }, properties: { "class": "root ? cn(cx(\"rootList\"), cx(\"submenu\")) : cx(\"submenu\")", "tabindex": "-1", "attr.aria-activedescendant": "focusedItemId", "attr.aria-hidden": "!parentExpanded" } }, providers: [PanelMenuStyle, { provide: PANELMENUSUB_INSTANCE, useExisting: PanelMenuSub }, { provide: PARENT_INSTANCE, useExisting: PanelMenuSub }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `
+        <ng-template ngFor let-processedItem let-index="index" [ngForOf]="items">
+            <li *ngIf="processedItem.separator" [class]="cn(cx('separator'), getItemProp(processedItem, 'styleClass'))" role="separator" [pBind]="ptm('separator')"></li>
+            <li
+                *ngIf="!processedItem.separator && isItemVisible(processedItem)"
+                role="treeitem"
+                [attr.id]="getItemId(processedItem)"
+                [attr.aria-label]="getItemProp(processedItem, 'label')"
+                [attr.aria-expanded]="isItemGroup(processedItem) ? isItemActive(processedItem) : undefined"
+                [attr.aria-level]="level + 1"
+                [attr.aria-setsize]="getAriaSetSize()"
+                [attr.aria-posinset]="getAriaPosInset(index)"
+                [class]="cn(cx('item', { processedItem }), getItemProp(processedItem, 'styleClass'))"
+                [ngStyle]="getItemProp(processedItem, 'style')"
+                [pTooltip]="getItemProp(processedItem, 'tooltip')"
+                [pBind]="getPTOptions(processedItem, index, 'item')"
+                [attr.data-p-disabled]="isItemDisabled(processedItem)"
+                [tooltipOptions]="getItemProp(processedItem, 'tooltipOptions')"
+            >
+                <div [class]="cx('itemContent')" [pBind]="getPTOptions(processedItem, index, 'itemContent')" (click)="onItemClick($event, processedItem)">
+                    <ng-container *ngIf="!itemTemplate">
+                        <a
+                            *ngIf="!getItemProp(processedItem, 'routerLink')"
+                            [attr.href]="getItemProp(processedItem, 'url')"
+                            [class]="cx('itemLink')"
+                            [target]="getItemProp(processedItem, 'target')"
+                            [attr.tabindex]="!!parentExpanded ? '0' : '-1'"
+                            [pBind]="getPTOptions(processedItem, index, 'itemLink')"
+                        >
+                            <ng-container *ngIf="isItemGroup(processedItem)">
+                                <ng-container *ngIf="!panelMenu.submenuIconTemplate && !panelMenu._submenuIconTemplate">
+                                    <svg
+                                        data-p-icon="chevron-down"
+                                        [class]="cn(cx('submenuIcon'), getItemProp(processedItem, 'icon'))"
+                                        *ngIf="isItemActive(processedItem)"
+                                        [ngStyle]="getItemProp(processedItem, 'iconStyle')"
+                                        [pBind]="getPTOptions(processedItem, index, 'submenuIcon')"
+                                    />
+                                    <svg
+                                        data-p-icon="chevron-right"
+                                        [class]="cn(cx('submenuIcon'), getItemProp(processedItem, 'icon'))"
+                                        *ngIf="!isItemActive(processedItem)"
+                                        [ngStyle]="getItemProp(processedItem, 'iconStyle')"
+                                        [pBind]="getPTOptions(processedItem, index, 'submenuIcon')"
+                                    />
                                 </ng-container>
-                                <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')"
-                                [routerLink]="getItemProp(processedItem, 'routerLink')"
-                                [queryParams]="getItemProp(processedItem, 'queryParams')"
-                                [routerLinkActive]="'p-panelmenu-item-link-active'"
-                                [routerLinkActiveOptions]="getItemProp(processedItem, 'routerLinkActiveOptions') || { exact: false }"
-                                [class]="cx('itemLink')"
-                                [target]="getItemProp(processedItem, 'target')"
-                                [attr.title]="getItemProp(processedItem, 'title')"
-                                [fragment]="getItemProp(processedItem, 'fragment')"
-                                [queryParamsHandling]="getItemProp(processedItem, 'queryParamsHandling')"
-                                [preserveFragment]="getItemProp(processedItem, 'preserveFragment')"
-                                [skipLocationChange]="getItemProp(processedItem, 'skipLocationChange')"
-                                [replaceUrl]="getItemProp(processedItem, 'replaceUrl')"
-                                [state]="getItemProp(processedItem, 'state')"
-                                [attr.data-pc-section]="'action'"
-                                [attr.tabindex]="!!parentExpanded ? '0' : '-1'"
-                            >
-                                <ng-container *ngIf="isItemGroup(processedItem)">
-                                    <ng-container *ngIf="!panelMenu.submenuIconTemplate && !panelMenu._submenuIconTemplate">
-                                        <svg data-p-icon="chevron-down" *ngIf="isItemActive(processedItem)" [class]="cn(cx('submenuIcon'), getItemProp(processedItem, 'icon'))" [ngStyle]="getItemProp(processedItem, 'iconStyle')" />
-                                        <svg data-p-icon="chevron-right" *ngIf="!isItemActive(processedItem)" [class]="cn(cx('submenuIcon'), getItemProp(processedItem, 'icon'))" [ngStyle]="getItemProp(processedItem, 'iconStyle')" />
-                                    </ng-container>
-                                    <ng-template *ngTemplateOutlet="panelMenu.submenuIconTemplate && panelMenu._submenuIconTemplate"></ng-template>
+                                <ng-template *ngTemplateOutlet="panelMenu.submenuIconTemplate || panelMenu._submenuIconTemplate"></ng-template>
+                            </ng-container>
+                            <span [class]="cn(cx('itemIcon'), getItemProp(processedItem, 'icon'))" *ngIf="processedItem.icon" [ngStyle]="getItemProp(processedItem, 'iconStyle')" [pBind]="getPTOptions(processedItem, index, 'itemIcon')"></span>
+                            <span [class]="cx('itemLabel')" *ngIf="processedItem.item?.escape !== false; else htmlLabel" [pBind]="getPTOptions(processedItem, index, 'itemLabel')">{{ getItemProp(processedItem, 'label') }}</span>
+                            <ng-template #htmlLabel><span [class]="cx('itemLabel')" [innerHTML]="getItemProp(processedItem, 'label')" [pBind]="getPTOptions(processedItem, index, 'itemLabel')"></span></ng-template>
+                        </a>
+                        <a
+                            *ngIf="getItemProp(processedItem, 'routerLink')"
+                            [routerLink]="getItemProp(processedItem, 'routerLink')"
+                            [queryParams]="getItemProp(processedItem, 'queryParams')"
+                            [routerLinkActive]="'p-panelmenu-item-link-active'"
+                            [routerLinkActiveOptions]="getItemProp(processedItem, 'routerLinkActiveOptions') || { exact: false }"
+                            [class]="cx('itemLink')"
+                            [target]="getItemProp(processedItem, 'target')"
+                            [attr.title]="getItemProp(processedItem, 'title')"
+                            [fragment]="getItemProp(processedItem, 'fragment')"
+                            [queryParamsHandling]="getItemProp(processedItem, 'queryParamsHandling')"
+                            [preserveFragment]="getItemProp(processedItem, 'preserveFragment')"
+                            [skipLocationChange]="getItemProp(processedItem, 'skipLocationChange')"
+                            [replaceUrl]="getItemProp(processedItem, 'replaceUrl')"
+                            [state]="getItemProp(processedItem, 'state')"
+                            [attr.tabindex]="!!parentExpanded ? '0' : '-1'"
+                            [pBind]="getPTOptions(processedItem, index, 'itemLink')"
+                        >
+                            <ng-container *ngIf="isItemGroup(processedItem)">
+                                <ng-container *ngIf="!panelMenu.submenuIconTemplate && !panelMenu._submenuIconTemplate">
+                                    <svg
+                                        data-p-icon="chevron-down"
+                                        *ngIf="isItemActive(processedItem)"
+                                        [class]="cn(cx('submenuIcon'), getItemProp(processedItem, 'icon'))"
+                                        [ngStyle]="getItemProp(processedItem, 'iconStyle')"
+                                        [pBind]="getPTOptions(processedItem, index, 'submenuIcon')"
+                                    />
+                                    <svg
+                                        data-p-icon="chevron-right"
+                                        *ngIf="!isItemActive(processedItem)"
+                                        [class]="cn(cx('submenuIcon'), getItemProp(processedItem, 'icon'))"
+                                        [ngStyle]="getItemProp(processedItem, 'iconStyle')"
+                                        [pBind]="getPTOptions(processedItem, index, 'submenuIcon')"
+                                    />
                                 </ng-container>
-                                <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>
+                                <ng-template *ngTemplateOutlet="panelMenu.submenuIconTemplate && panelMenu._submenuIconTemplate"></ng-template>
+                            </ng-container>
+                            <span [class]="cn(cx('itemIcon'), getItemProp(processedItem, 'icon'))" *ngIf="processedItem.icon" [ngStyle]="getItemProp(processedItem, 'iconStyle')" [pBind]="getPTOptions(processedItem, index, 'itemIcon')"></span>
+                            <span *ngIf="getItemProp(processedItem, 'label')" [class]="cx('itemLabel')" [innerHTML]="getItemProp(processedItem, 'label')" [pBind]="getPTOptions(processedItem, index, 'itemLabel')"></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 [@submenu]="getAnimation(processedItem)">
-                        <p-panelmenu-sub
-                            *ngIf="isItemVisible(processedItem) && isItemGroup(processedItem) && isItemExpanded(processedItem)"
-                            [id]="getItemId(processedItem) + '_list'"
-                            [panelId]="panelId"
-                            [items]="processedItem?.items"
-                            [itemTemplate]="itemTemplate"
-                            [transitionOptions]="transitionOptions"
-                            [focusedItemId]="focusedItemId"
-                            [activeItemPath]="activeItemPath"
-                            [level]="level + 1"
-                            [parentExpanded]="!!parentExpanded && isItemExpanded(processedItem)"
-                            (itemToggle)="onItemToggle($event)"
-                        ></p-panelmenu-sub>
-                    </div>
-                </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.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: "[data-p-icon=\"chevron-down\"]" }, { kind: "component", type: ChevronRightIcon, selector: "[data-p-icon=\"chevron-right\"]" }, { kind: "ngmodule", type: SharedModule }], animations: [
+                            <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 [@submenu]="getAnimation(processedItem)">
+                    <ul
+                        pPanelMenuSub
+                        *ngIf="isItemVisible(processedItem) && isItemGroup(processedItem) && isItemExpanded(processedItem)"
+                        [id]="getItemId(processedItem) + '_list'"
+                        [panelId]="panelId"
+                        [items]="processedItem?.items"
+                        [itemTemplate]="itemTemplate"
+                        [transitionOptions]="transitionOptions"
+                        [focusedItemId]="focusedItemId"
+                        [activeItemPath]="activeItemPath"
+                        [level]="level + 1"
+                        [pt]="pt()"
+                        [parentExpanded]="!!parentExpanded && isItemExpanded(processedItem)"
+                        (itemToggle)="onItemToggle($event)"
+                    ></ul>
+                </div>
+            </li>
+        </ng-template>
+    `, isInline: true, dependencies: [{ kind: "component", type: PanelMenuSub, selector: "ul[pPanelMenuSub]", inputs: ["panelId", "focusedItemId", "items", "itemTemplate", "level", "activeItemPath", "root", "tabindex", "transitionOptions", "parentExpanded"], outputs: ["itemToggle", "menuFocus", "menuBlur", "menuKeyDown"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i3.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i4.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip"] }, { kind: "directive", type: i1.Bind, selector: "[pBind]", inputs: ["pBind"] }, { kind: "component", type: ChevronDownIcon, selector: "[data-p-icon=\"chevron-down\"]" }, { kind: "component", type: ChevronRightIcon, selector: "[data-p-icon=\"chevron-right\"]" }, { kind: "ngmodule", type: SharedModule }, { kind: "ngmodule", type: BindModule }], animations: [
             trigger('submenu', [
-                state('hidden', style$1({
+                state('hidden', style$2({
                     height: '0'
                 })),
-                state('visible', style$1({
+                state('visible', style$2({
                     height: '*'
                 })),
                 transition('visible <=> hidden', [animate('{{transitionParams}}')]),
@@ -347,123 +382,137 @@ class PanelMenuSub extends BaseComponent {
             ])
         ], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PanelMenuSub, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PanelMenuSub, decorators: [{
             type: Component,
             args: [{
-                    selector: 'p-panelMenuSub, p-panelmenu-sub',
-                    imports: [CommonModule, RouterModule, TooltipModule, ChevronDownIcon, ChevronRightIcon, SharedModule],
+                    selector: 'ul[pPanelMenuSub]',
+                    imports: [CommonModule, RouterModule, TooltipModule, ChevronDownIcon, ChevronRightIcon, SharedModule, BindModule],
                     standalone: true,
                     template: `
-        <ul
-            #list
-            [class]="root ? cn(cx('rootList'), cx('submenu')) : cx('submenu')"
-            role="tree"
-            [tabindex]="-1"
-            [attr.aria-activedescendant]="focusedItemId"
-            [attr.data-pc-section]="'menu'"
-            [attr.aria-hidden]="!parentExpanded"
-            (focusin)="menuFocus.emit($event)"
-            (focusout)="menuBlur.emit($event)"
-            (keydown)="menuKeyDown.emit($event)"
-        >
-            <ng-template ngFor let-processedItem let-index="index" [ngForOf]="items">
-                <li *ngIf="processedItem.separator" [class]="cn(cx('separator'), getItemProp(processedItem, 'styleClass'))" role="separator"></li>
-                <li
-                    *ngIf="!processedItem.separator && isItemVisible(processedItem)"
-                    role="treeitem"
-                    [attr.id]="getItemId(processedItem)"
-                    [attr.aria-label]="getItemProp(processedItem, 'label')"
-                    [attr.aria-expanded]="isItemGroup(processedItem) ? isItemActive(processedItem) : undefined"
-                    [attr.aria-level]="level + 1"
-                    [attr.aria-setsize]="getAriaSetSize()"
-                    [attr.aria-posinset]="getAriaPosInset(index)"
-                    [class]="cn(cx('item', { processedItem }), getItemProp(processedItem, 'styleClass'))"
-                    [ngStyle]="getItemProp(processedItem, 'style')"
-                    [pTooltip]="getItemProp(processedItem, 'tooltip')"
-                    [attr.data-p-disabled]="isItemDisabled(processedItem)"
-                    [tooltipOptions]="getItemProp(processedItem, 'tooltipOptions')"
-                >
-                    <div [class]="cx('itemContent')" (click)="onItemClick($event, processedItem)">
-                        <ng-container *ngIf="!itemTemplate">
-                            <a
-                                *ngIf="!getItemProp(processedItem, 'routerLink')"
-                                [attr.href]="getItemProp(processedItem, 'url')"
-                                [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">
-                                        <svg data-p-icon="chevron-down" [class]="cn(cx('submenuIcon'), getItemProp(processedItem, 'icon'))" *ngIf="isItemActive(processedItem)" [ngStyle]="getItemProp(processedItem, 'iconStyle')" />
-                                        <svg data-p-icon="chevron-right" [class]="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-template ngFor let-processedItem let-index="index" [ngForOf]="items">
+            <li *ngIf="processedItem.separator" [class]="cn(cx('separator'), getItemProp(processedItem, 'styleClass'))" role="separator" [pBind]="ptm('separator')"></li>
+            <li
+                *ngIf="!processedItem.separator && isItemVisible(processedItem)"
+                role="treeitem"
+                [attr.id]="getItemId(processedItem)"
+                [attr.aria-label]="getItemProp(processedItem, 'label')"
+                [attr.aria-expanded]="isItemGroup(processedItem) ? isItemActive(processedItem) : undefined"
+                [attr.aria-level]="level + 1"
+                [attr.aria-setsize]="getAriaSetSize()"
+                [attr.aria-posinset]="getAriaPosInset(index)"
+                [class]="cn(cx('item', { processedItem }), getItemProp(processedItem, 'styleClass'))"
+                [ngStyle]="getItemProp(processedItem, 'style')"
+                [pTooltip]="getItemProp(processedItem, 'tooltip')"
+                [pBind]="getPTOptions(processedItem, index, 'item')"
+                [attr.data-p-disabled]="isItemDisabled(processedItem)"
+                [tooltipOptions]="getItemProp(processedItem, 'tooltipOptions')"
+            >
+                <div [class]="cx('itemContent')" [pBind]="getPTOptions(processedItem, index, 'itemContent')" (click)="onItemClick($event, processedItem)">
+                    <ng-container *ngIf="!itemTemplate">
+                        <a
+                            *ngIf="!getItemProp(processedItem, 'routerLink')"
+                            [attr.href]="getItemProp(processedItem, 'url')"
+                            [class]="cx('itemLink')"
+                            [target]="getItemProp(processedItem, 'target')"
+                            [attr.tabindex]="!!parentExpanded ? '0' : '-1'"
+                            [pBind]="getPTOptions(processedItem, index, 'itemLink')"
+                        >
+                            <ng-container *ngIf="isItemGroup(processedItem)">
+                                <ng-container *ngIf="!panelMenu.submenuIconTemplate && !panelMenu._submenuIconTemplate">
+                                    <svg
+                                        data-p-icon="chevron-down"
+                                        [class]="cn(cx('submenuIcon'), getItemProp(processedItem, 'icon'))"
+                                        *ngIf="isItemActive(processedItem)"
+                                        [ngStyle]="getItemProp(processedItem, 'iconStyle')"
+                                        [pBind]="getPTOptions(processedItem, index, 'submenuIcon')"
+                                    />
+                                    <svg
+                                        data-p-icon="chevron-right"
+                                        [class]="cn(cx('submenuIcon'), getItemProp(processedItem, 'icon'))"
+                                        *ngIf="!isItemActive(processedItem)"
+                                        [ngStyle]="getItemProp(processedItem, 'iconStyle')"
+                                        [pBind]="getPTOptions(processedItem, index, 'submenuIcon')"
+                                    />
                                 </ng-container>
-                                <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')"
-                                [routerLink]="getItemProp(processedItem, 'routerLink')"
-                                [queryParams]="getItemProp(processedItem, 'queryParams')"
-                                [routerLinkActive]="'p-panelmenu-item-link-active'"
-                                [routerLinkActiveOptions]="getItemProp(processedItem, 'routerLinkActiveOptions') || { exact: false }"
-                                [class]="cx('itemLink')"
-                                [target]="getItemProp(processedItem, 'target')"
-                                [attr.title]="getItemProp(processedItem, 'title')"
-                                [fragment]="getItemProp(processedItem, 'fragment')"
-                                [queryParamsHandling]="getItemProp(processedItem, 'queryParamsHandling')"
-                                [preserveFragment]="getItemProp(processedItem, 'preserveFragment')"
-                                [skipLocationChange]="getItemProp(processedItem, 'skipLocationChange')"
-                                [replaceUrl]="getItemProp(processedItem, 'replaceUrl')"
-                                [state]="getItemProp(processedItem, 'state')"
-                                [attr.data-pc-section]="'action'"
-                                [attr.tabindex]="!!parentExpanded ? '0' : '-1'"
-                            >
-                                <ng-container *ngIf="isItemGroup(processedItem)">
-                                    <ng-container *ngIf="!panelMenu.submenuIconTemplate && !panelMenu._submenuIconTemplate">
-                                        <svg data-p-icon="chevron-down" *ngIf="isItemActive(processedItem)" [class]="cn(cx('submenuIcon'), getItemProp(processedItem, 'icon'))" [ngStyle]="getItemProp(processedItem, 'iconStyle')" />
-                                        <svg data-p-icon="chevron-right" *ngIf="!isItemActive(processedItem)" [class]="cn(cx('submenuIcon'), getItemProp(processedItem, 'icon'))" [ngStyle]="getItemProp(processedItem, 'iconStyle')" />
-                                    </ng-container>
-                                    <ng-template *ngTemplateOutlet="panelMenu.submenuIconTemplate && panelMenu._submenuIconTemplate"></ng-template>
+                                <ng-template *ngTemplateOutlet="panelMenu.submenuIconTemplate || panelMenu._submenuIconTemplate"></ng-template>
+                            </ng-container>
+                            <span [class]="cn(cx('itemIcon'), getItemProp(processedItem, 'icon'))" *ngIf="processedItem.icon" [ngStyle]="getItemProp(processedItem, 'iconStyle')" [pBind]="getPTOptions(processedItem, index, 'itemIcon')"></span>
+                            <span [class]="cx('itemLabel')" *ngIf="processedItem.item?.escape !== false; else htmlLabel" [pBind]="getPTOptions(processedItem, index, 'itemLabel')">{{ getItemProp(processedItem, 'label') }}</span>
+                            <ng-template #htmlLabel><span [class]="cx('itemLabel')" [innerHTML]="getItemProp(processedItem, 'label')" [pBind]="getPTOptions(processedItem, index, 'itemLabel')"></span></ng-template>
+                        </a>
+                        <a
+                            *ngIf="getItemProp(processedItem, 'routerLink')"
+                            [routerLink]="getItemProp(processedItem, 'routerLink')"
+                            [queryParams]="getItemProp(processedItem, 'queryParams')"
+                            [routerLinkActive]="'p-panelmenu-item-link-active'"
+                            [routerLinkActiveOptions]="getItemProp(processedItem, 'routerLinkActiveOptions') || { exact: false }"
+                            [class]="cx('itemLink')"
+                            [target]="getItemProp(processedItem, 'target')"
+                            [attr.title]="getItemProp(processedItem, 'title')"
+                            [fragment]="getItemProp(processedItem, 'fragment')"
+                            [queryParamsHandling]="getItemProp(processedItem, 'queryParamsHandling')"
+                            [preserveFragment]="getItemProp(processedItem, 'preserveFragment')"
+                            [skipLocationChange]="getItemProp(processedItem, 'skipLocationChange')"
+                            [replaceUrl]="getItemProp(processedItem, 'replaceUrl')"
+                            [state]="getItemProp(processedItem, 'state')"
+                            [attr.tabindex]="!!parentExpanded ? '0' : '-1'"
+                            [pBind]="getPTOptions(processedItem, index, 'itemLink')"
+                        >
+                            <ng-container *ngIf="isItemGroup(processedItem)">
+                                <ng-container *ngIf="!panelMenu.submenuIconTemplate && !panelMenu._submenuIconTemplate">
+                                    <svg
+                                        data-p-icon="chevron-down"
+                                        *ngIf="isItemActive(processedItem)"
+                                        [class]="cn(cx('submenuIcon'), getItemProp(processedItem, 'icon'))"
+                                        [ngStyle]="getItemProp(processedItem, 'iconStyle')"
+                                        [pBind]="getPTOptions(processedItem, index, 'submenuIcon')"
+                                    />
+                                    <svg
+                                        data-p-icon="chevron-right"
+                                        *ngIf="!isItemActive(processedItem)"
+                                        [class]="cn(cx('submenuIcon'), getItemProp(processedItem, 'icon'))"
+                                        [ngStyle]="getItemProp(processedItem, 'iconStyle')"
+                                        [pBind]="getPTOptions(processedItem, index, 'submenuIcon')"
+                                    />
                                 </ng-container>
-                                <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>
+                                <ng-template *ngTemplateOutlet="panelMenu.submenuIconTemplate && panelMenu._submenuIconTemplate"></ng-template>
+                            </ng-container>
+                            <span [class]="cn(cx('itemIcon'), getItemProp(processedItem, 'icon'))" *ngIf="processedItem.icon" [ngStyle]="getItemProp(processedItem, 'iconStyle')" [pBind]="getPTOptions(processedItem, index, 'itemIcon')"></span>
+                            <span *ngIf="getItemProp(processedItem, 'label')" [class]="cx('itemLabel')" [innerHTML]="getItemProp(processedItem, 'label')" [pBind]="getPTOptions(processedItem, index, 'itemLabel')"></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 [@submenu]="getAnimation(processedItem)">
-                        <p-panelmenu-sub
-                            *ngIf="isItemVisible(processedItem) && isItemGroup(processedItem) && isItemExpanded(processedItem)"
-                            [id]="getItemId(processedItem) + '_list'"
-                            [panelId]="panelId"
-                            [items]="processedItem?.items"
-                            [itemTemplate]="itemTemplate"
-                            [transitionOptions]="transitionOptions"
-                            [focusedItemId]="focusedItemId"
-                            [activeItemPath]="activeItemPath"
-                            [level]="level + 1"
-                            [parentExpanded]="!!parentExpanded && isItemExpanded(processedItem)"
-                            (itemToggle)="onItemToggle($event)"
-                        ></p-panelmenu-sub>
-                    </div>
-                </li>
-            </ng-template>
-        </ul>
+                            <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 [@submenu]="getAnimation(processedItem)">
+                    <ul
+                        pPanelMenuSub
+                        *ngIf="isItemVisible(processedItem) && isItemGroup(processedItem) && isItemExpanded(processedItem)"
+                        [id]="getItemId(processedItem) + '_list'"
+                        [panelId]="panelId"
+                        [items]="processedItem?.items"
+                        [itemTemplate]="itemTemplate"
+                        [transitionOptions]="transitionOptions"
+                        [focusedItemId]="focusedItemId"
+                        [activeItemPath]="activeItemPath"
+                        [level]="level + 1"
+                        [pt]="pt()"
+                        [parentExpanded]="!!parentExpanded && isItemExpanded(processedItem)"
+                        (itemToggle)="onItemToggle($event)"
+                    ></ul>
+                </div>
+            </li>
+        </ng-template>
     `,
                     animations: [
                         trigger('submenu', [
-                            state('hidden', style$1({
+                            state('hidden', style$2({
                                 height: '0'
                             })),
-                            state('visible', style$1({
+                            state('visible', style$2({
                                 height: '*'
                             })),
                             transition('visible <=> hidden', [animate('{{transitionParams}}')]),
@@ -471,7 +520,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                         ])
                     ],
                     encapsulation: ViewEncapsulation.None,
-                    providers: [PanelMenuStyle]
+                    providers: [PanelMenuStyle, { provide: PANELMENUSUB_INSTANCE, useExisting: PanelMenuSub }, { provide: PARENT_INSTANCE, useExisting: PanelMenuSub }],
+                    host: {
+                        '[class]': 'root ? cn(cx("rootList"), cx("submenu")) : cx("submenu")',
+                        role: 'tree',
+                        '[tabindex]': '-1',
+                        '[attr.aria-activedescendant]': 'focusedItemId',
+                        '[attr.aria-hidden]': '!parentExpanded',
+                        '(focusin)': 'menuFocus.emit($event)',
+                        '(focusout)': 'menuBlur.emit($event)',
+                        '(keydown)': 'menuKeyDown.emit($event)'
+                    },
+                    hostDirectives: [Bind]
                 }]
         }], propDecorators: { panelId: [{
                 type: Input
@@ -505,9 +565,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                 type: Output
             }], menuKeyDown: [{
                 type: Output
-            }], listViewChild: [{
-                type: ViewChild,
-                args: ['list']
             }] } });
 class PanelMenuList extends BaseComponent {
     panelId;
@@ -537,7 +594,7 @@ class PanelMenuList extends BaseComponent {
         const focusedItem = this.focusedItem();
         return focusedItem && focusedItem.item?.id ? focusedItem.item.id : isNotEmpty(this.focusedItem()) ? `${this.panelId}_${this.focusedItem().key}` : undefined;
     }
-    ngOnChanges(changes) {
+    onChanges(changes) {
         this.processedItems.set(this.createProcessedItems(changes?.items?.currentValue || this.items || []));
     }
     getItemProp(processedItem, name) {
@@ -559,7 +616,7 @@ class PanelMenuList extends BaseComponent {
         return isNotEmpty(processedItem.items);
     }
     isElementInPanel(event, element) {
-        const panel = event.currentTarget.closest('[data-pc-section="panel"]');
+        const panel = event.currentTarget.closest('[data-pc-name="panelmenu"]');
         return panel && panel.contains(element);
     }
     isItemMatched(processedItem) {
@@ -772,7 +829,7 @@ class PanelMenuList extends BaseComponent {
     onEnterKey(event) {
         if (isNotEmpty(this.focusedItem())) {
             const element = findSingle(this.subMenuViewChild.listViewChild.nativeElement, `li[id="${`${this.focusedItemId}`}"]`);
-            const anchorElement = element && (findSingle(element, '[data-pc-section="action"]') || findSingle(element, 'a,button'));
+            const anchorElement = element && (findSingle(element, 'a') || findSingle(element, 'button'));
             anchorElement ? anchorElement.click() : element && element.click();
         }
         event.preventDefault();
@@ -800,23 +857,24 @@ class PanelMenuList extends BaseComponent {
         let matched = false;
         if (isNotEmpty(this.focusedItem())) {
             const focusedItemIndex = this.visibleItems().findIndex((processedItem) => processedItem.key === this.focusedItem().key);
-            matchedItem = this.visibleItems()
-                .slice(focusedItemIndex)
-                .find((processedItem) => this.isItemMatched(processedItem));
+            matchedItem =
+                this.visibleItems()
+                    .slice(focusedItemIndex)
+                    .find((processedItem) => this.isItemMatched(processedItem)) || null;
             matchedItem = isEmpty(matchedItem)
                 ? this.visibleItems()
                     .slice(0, focusedItemIndex)
-                    .find((processedItem) => this.isItemMatched(processedItem))
+                    .find((processedItem) => this.isItemMatched(processedItem)) || null
                 : matchedItem;
         }
         else {
-            matchedItem = this.visibleItems().find((processedItem) => this.isItemMatched(processedItem));
+            matchedItem = this.visibleItems().find((processedItem) => this.isItemMatched(processedItem)) || null;
         }
         if (isNotEmpty(matchedItem)) {
             matched = true;
         }
         if (isEmpty(matchedItem) && isEmpty(this.focusedItem())) {
-            matchedItem = this.findFirstItem();
+            matchedItem = this.findFirstItem() || null;
         }
         if (isNotEmpty(matchedItem)) {
             this.changeFocusedItem({
@@ -834,11 +892,12 @@ class PanelMenuList extends BaseComponent {
         }, 500);
         return matched;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PanelMenuList, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.3.0", 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
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PanelMenuList, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.3.4", type: PanelMenuList, isStandalone: true, selector: "ul[pPanelMenuList]", 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, ngImport: i0, template: `
+        <ul
+            pPanelMenuSub
             #submenu
-            [root]="true"
+            [root]="root"
             [id]="panelId + '_list'"
             [panelId]="panelId"
             [tabindex]="tabindex"
@@ -852,19 +911,21 @@ class PanelMenuList extends BaseComponent {
             (keydown)="onKeyDown($event)"
             (menuFocus)="onFocus($event)"
             (menuBlur)="onBlur($event)"
-        ></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 });
+            [pt]="pt()"
+        ></ul>
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: PanelMenuSub, selector: "ul[pPanelMenuSub]", 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: "20.3.0", ngImport: i0, type: PanelMenuList, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PanelMenuList, decorators: [{
             type: Component,
             args: [{
-                    selector: 'p-panelMenuList, p-panel-menu-list',
+                    selector: 'ul[pPanelMenuList]',
                     imports: [CommonModule, PanelMenuSub, RouterModule, TooltipModule, SharedModule],
                     standalone: true,
                     template: `
-        <p-panelmenu-sub
+        <ul
+            pPanelMenuSub
             #submenu
-            [root]="true"
+            [root]="root"
             [id]="panelId + '_list'"
             [panelId]="panelId"
             [tabindex]="tabindex"
@@ -878,7 +939,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
             (keydown)="onKeyDown($event)"
             (menuFocus)="onFocus($event)"
             (menuBlur)="onBlur($event)"
-        ></p-panelmenu-sub>
+            [pt]="pt()"
+        ></ul>
     `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None
@@ -974,11 +1036,24 @@ class PanelMenu extends BaseComponent {
     animating;
     activeItem = signal(null, ...(ngDevMode ? [{ debugName: "activeItem" }] : []));
     _componentStyle = inject(PanelMenuStyle);
-    ngOnInit() {
-        super.ngOnInit();
+    bindDirectiveInstance = inject(Bind, { self: true });
+    $pcPanelMenu = inject(PANELMENU_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;
+    onAfterViewChecked() {
+        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
+    }
+    getPTOptions(key, item, index) {
+        return this.ptm(key, {
+            context: {
+                item: item,
+                index,
+                active: this.isItemActive(item)
+            }
+        });
+    }
+    onInit() {
         this.id = this.id || uuid('pn_id_');
     }
-    ngAfterContentInit() {
+    onAfterContentInit() {
         this.templates?.forEach((item) => {
             switch (item.getType()) {
                 case 'submenuicon':
@@ -1050,8 +1125,8 @@ class PanelMenu extends BaseComponent {
     }
     updateFocusedHeader(event) {
         const { originalEvent, focusOnNext, selfCheck } = event;
-        const panelElement = originalEvent.currentTarget.closest('[data-pc-section="panel"]');
-        const header = selfCheck ? findSingle(panelElement, '[data-pc-section="header"]') : focusOnNext ? this.findNextHeader(panelElement) : this.findPrevHeader(panelElement);
+        const panelElement = originalEvent.currentTarget.closest('.p-panelmenu-panel');
+        const header = selfCheck ? findSingle(panelElement, '.p-panelmenu-header') : focusOnNext ? this.findNextHeader(panelElement) : this.findPrevHeader(panelElement);
         header ? this.changeFocusedHeader(originalEvent, header) : focusOnNext ? this.onHeaderHomeKey(originalEvent) : this.onHeaderEndKey(originalEvent);
     }
     changeFocusedHeader(event, element) {
@@ -1059,19 +1134,19 @@ class PanelMenu extends BaseComponent {
     }
     findNextHeader(panelElement, selfCheck = false) {
         const nextPanelElement = selfCheck ? panelElement : panelElement.nextElementSibling;
-        const headerElement = findSingle(nextPanelElement, '[data-pc-section="header"]');
+        const headerElement = findSingle(nextPanelElement, '.p-panelmenu-header');
         return headerElement ? (getAttribute(headerElement, 'data-p-disabled') ? this.findNextHeader(headerElement.parentElement) : headerElement) : null;
     }
     findPrevHeader(panelElement, selfCheck = false) {
         const prevPanelElement = selfCheck ? panelElement : panelElement.previousElementSibling;
-        const headerElement = findSingle(prevPanelElement, '[data-pc-section="header"]');
+        const headerElement = findSingle(prevPanelElement, '.p-panelmenu-header');
         return headerElement ? (getAttribute(headerElement, 'data-p-disabled') ? this.findPrevHeader(headerElement.parentElement) : headerElement) : null;
     }
     findFirstHeader() {
-        return this.findNextHeader(this.containerViewChild.nativeElement.firstElementChild, true);
+        return this.containerViewChild?.nativeElement ? this.findNextHeader(this.containerViewChild.nativeElement.firstElementChild, true) : null;
     }
     findLastHeader() {
-        return this.findPrevHeader(this.containerViewChild.nativeElement.lastElementChild, true);
+        return this.containerViewChild?.nativeElement ? this.findPrevHeader(this.containerViewChild.nativeElement.lastElementChild, true) : null;
     }
     onHeaderClick(event, item, index) {
         if (this.isItemDisabled(item)) {
@@ -1116,13 +1191,13 @@ class PanelMenu extends BaseComponent {
         }
     }
     onHeaderArrowDownKey(event) {
-        const rootList = getAttribute(event.currentTarget, 'data-p-highlight') === true ? findSingle(event.currentTarget.nextElementSibling, '[data-pc-section="menu"]') : null;
+        const rootList = getAttribute(event.currentTarget, 'data-p-highlight') === true ? findSingle(event.currentTarget.nextElementSibling, 'ul.p-panelmenu-root-list') : null;
         rootList ? focus(rootList) : this.updateFocusedHeader({ originalEvent: event, focusOnNext: true });
         event.preventDefault();
     }
     onHeaderArrowUpKey(event) {
         const prevHeader = this.findPrevHeader(event.currentTarget.parentElement) || this.findLastHeader();
-        const rootList = getAttribute(prevHeader, 'data-p-highlight') === true ? findSingle(prevHeader.nextElementSibling, '[data-pc-section="menu"]') : null;
+        const rootList = getAttribute(prevHeader, 'data-p-highlight') === true ? findSingle(prevHeader.nextElementSibling, 'ul.p-panelmenu-root-list') : null;
         rootList ? focus(rootList) : this.updateFocusedHeader({ originalEvent: event, focusOnNext: false });
         event.preventDefault();
     }
@@ -1135,14 +1210,14 @@ class PanelMenu extends BaseComponent {
         event.preventDefault();
     }
     onHeaderEnterKey(event, item, index) {
-        const headerAction = findSingle(event.currentTarget, '[data-pc-section="headeraction"]');
+        const headerAction = findSingle(event.currentTarget, 'a.p-panelmenu-header-link');
         headerAction ? headerAction.click() : this.onHeaderClick(event, item, index);
         event.preventDefault();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PanelMenu, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.3.0", 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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PanelMenu, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.3.4", 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: { properties: { "class": "cn(cx(\"root\"), styleClass)" } }, providers: [PanelMenuStyle, { provide: PANELMENU_INSTANCE, useExisting: PanelMenu }, { provide: PARENT_INSTANCE, useExisting: PanelMenu }], 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, hostDirectives: [{ directive: i1.Bind }], 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 *ngIf="isItemVisible(item)" [class]="cn(cx('panel'), getItemProp(item, 'headerClass'))" [ngStyle]="getItemProp(item, 'style')" [pBind]="ptm('panel')">
                 <div
                     [class]="cn(cx('header', { item }), getItemProp(item, 'styleClass'))"
                     [ngStyle]="getItemProp(item, 'style')"
@@ -1157,11 +1232,11 @@ class PanelMenu extends BaseComponent {
                     [attr.aria-disabled]="isItemDisabled(item)"
                     [attr.data-p-highlight]="isItemActive(item)"
                     [attr.data-p-disabled]="isItemDisabled(item)"
-                    [attr.data-pc-section]="'header'"
+                    [pBind]="getPTOptions('header', item, i)"
                     (click)="onHeaderClick($event, item, i)"
                     (keydown)="onHeaderKeyDown($event, item, i)"
                 >
-                    <div [class]="cx('headerContent')">
+                    <div [class]="cx('headerContent')" [pBind]="getPTOptions('headerContent', item, i)">
                         <ng-container *ngIf="!itemTemplate && !_itemTemplate">
                             <a
                                 *ngIf="!getItemProp(item, 'routerLink')"
@@ -1170,18 +1245,18 @@ class PanelMenu extends BaseComponent {
                                 [target]="getItemProp(item, 'target')"
                                 [attr.title]="getItemProp(item, 'title')"
                                 [class]="cx('headerLink')"
-                                [attr.data-pc-section]="'headeraction'"
+                                [pBind]="getPTOptions('headerLink', item, i)"
                             >
                                 <ng-container *ngIf="isItemGroup(item)">
                                     <ng-container *ngIf="!headerIconTemplate && !_headerIconTemplate">
-                                        <svg data-p-icon="chevron-down" [class]="cx('headerIcon')" *ngIf="isItemActive(item)" />
-                                        <svg data-p-icon="chevron-right" [class]="cx('headerIcon')" *ngIf="!isItemActive(item)" />
+                                        <svg data-p-icon="chevron-down" [class]="cx('submenuIcon')" *ngIf="isItemActive(item)" [pBind]="getPTOptions('submenuIcon', item, i)" />
+                                        <svg data-p-icon="chevron-right" [class]="cx('submenuIcon')" *ngIf="!isItemActive(item)" [pBind]="getPTOptions('submenuIcon', item, i)" />
                                     </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 htmlLabel">{{ getItemProp(item, 'label') }}</span>
-                                <ng-template #htmlLabel><span [class]="cx('headerLabel')" [innerHTML]="getItemProp(item, 'label')"></span></ng-template>
+                                <span [class]="cn(cx('headerIcon'), item.icon)" *ngIf="item.icon" [ngStyle]="getItemProp(item, 'iconStyle')" [pBind]="getPTOptions('headerIcon', item, i)"></span>
+                                <span [class]="cx('headerLabel')" *ngIf="getItemProp(item, 'escape') !== false; else htmlLabel" [pBind]="getPTOptions('headerLabel', item, i)">{{ getItemProp(item, 'label') }}</span>
+                                <ng-template #htmlLabel><span [class]="cx('headerLabel')" [innerHTML]="getItemProp(item, 'label')" [pBind]="getPTOptions('headerLabel', item, i)"></span></ng-template>
                                 <span [class]="cn(cx('badge'), getItemProp(item, 'badgeStyleClass'))" *ngIf="getItemProp(item, 'badge')">{{ getItemProp(item, 'badge') }}</span>
                             </a>
                         </ng-container>
@@ -1201,18 +1276,18 @@ class PanelMenu extends BaseComponent {
                             [skipLocationChange]="getItemProp(item, 'skipLocationChange')"
                             [replaceUrl]="getItemProp(item, 'replaceUrl')"
                             [state]="getItemProp(item, 'state')"
-                            [attr.data-pc-section]="'headeraction'"
+                            [pBind]="getPTOptions('headerLink', item, i)"
                         >
                             <ng-container *ngIf="isItemGroup(item)">
                                 <ng-container *ngIf="!headerIconTemplate && !_headerIconTemplate">
-                                    <svg data-p-icon="chevron-down" [class]="cx('headerIcon')" *ngIf="isItemActive(item)" />
-                                    <svg data-p-icon="chevron-right" [class]="cx('headerIcon')" *ngIf="!isItemActive(item)" />
+                                    <svg data-p-icon="chevron-down" [class]="cx('submenuIcon')" *ngIf="isItemActive(item)" [pBind]="getPTOptions('submenuIcon', item, i)" />
+                                    <svg data-p-icon="chevron-right" [class]="cx('submenuIcon')" *ngIf="!isItemActive(item)" [pBind]="getPTOptions('submenuIcon', item, i)" />
                                 </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 [class]="cn(cx('headerIcon'), item.icon)" *ngIf="item.icon" [ngStyle]="getItemProp(item, 'iconStyle')" [pBind]="getPTOptions('headerIcon', item, i)"></span>
+                            <span [class]="cx('headerLabel')" *ngIf="getItemProp(item, 'escape') !== false; else htmlRouteLabel" [pBind]="getPTOptions('headerLabel', item, i)">{{ getItemProp(item, 'label') }}</span>
+                            <ng-template #htmlRouteLabel><span [class]="cx('headerLabel')" [innerHTML]="getItemProp(item, 'label')" [pBind]="getPTOptions('headerLabel', item, i)"></span></ng-template>
                             <span *ngIf="getItemProp(item, 'badge')" [class]="cn(cx('badge'), getItemProp(item, 'badgeStyleClass'))">{{ getItemProp(item, 'badge') }}</span>
                         </a>
                     </div>
@@ -1225,10 +1300,11 @@ class PanelMenu extends BaseComponent {
                     role="region"
                     [attr.id]="getContentId(item, i)"
                     [attr.aria-labelledby]="getHeaderId(item, i)"
-                    [attr.data-pc-section]="'toggleablecontent'"
+                    [pBind]="ptm('contentContainer')"
                 >
-                    <div [class]="cx('content')" [attr.data-pc-section]="'menucontent'">
-                        <p-panelMenuList
+                    <div [class]="cx('content')" [pBind]="ptm('content')">
+                        <ul
+                            pPanelMenuList
                             [panelId]="getPanelId(i, item)"
                             [items]="getItemProp(item, 'items')"
                             [itemTemplate]="itemTemplate || _itemTemplate"
@@ -1238,18 +1314,19 @@ class PanelMenu extends BaseComponent {
                             [tabindex]="tabindex"
                             [parentExpanded]="isItemActive(item)"
                             (headerFocus)="updateFocusedHeader($event)"
-                        ></p-panelMenuList>
+                            [pt]="pt()"
+                        ></ul>
                     </div>
                 </div>
             </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: "[data-p-icon=\"chevron-down\"]" }, { kind: "component", type: ChevronRightIcon, selector: "[data-p-icon=\"chevron-right\"]" }, { kind: "ngmodule", type: SharedModule }], animations: [
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: PanelMenuList, selector: "ul[pPanelMenuList]", inputs: ["panelId", "id", "items", "itemTemplate", "parentExpanded", "expanded", "transitionOptions", "root", "tabindex", "activeItem"], outputs: ["itemToggle", "headerFocus"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i3.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i4.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip"] }, { kind: "directive", type: i1.Bind, selector: "[pBind]", inputs: ["pBind"] }, { kind: "component", type: ChevronDownIcon, selector: "[data-p-icon=\"chevron-down\"]" }, { kind: "component", type: ChevronRightIcon, selector: "[data-p-icon=\"chevron-right\"]" }, { kind: "ngmodule", type: SharedModule }, { kind: "ngmodule", type: BindModule }], animations: [
             trigger('rootItem', [
-                state('hidden', style$1({
+                state('hidden', style$2({
                     height: '0',
                     visibility: 'hidden'
                 })),
-                state('visible', style$1({
+                state('visible', style$2({
                     height: '*',
                     visibility: '*'
                 })),
@@ -1258,15 +1335,15 @@ class PanelMenu extends BaseComponent {
             ])
         ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PanelMenu, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PanelMenu, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-panelMenu, p-panelmenu, p-panel-menu',
-                    imports: [CommonModule, PanelMenuList, RouterModule, TooltipModule, ChevronDownIcon, ChevronRightIcon, SharedModule],
+                    imports: [CommonModule, PanelMenuList, RouterModule, TooltipModule, ChevronDownIcon, ChevronRightIcon, SharedModule, BindModule],
                     standalone: true,
                     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 *ngIf="isItemVisible(item)" [class]="cn(cx('panel'), getItemProp(item, 'headerClass'))" [ngStyle]="getItemProp(item, 'style')" [pBind]="ptm('panel')">
                 <div
                     [class]="cn(cx('header', { item }), getItemProp(item, 'styleClass'))"
                     [ngStyle]="getItemProp(item, 'style')"
@@ -1281,11 +1358,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                     [attr.aria-disabled]="isItemDisabled(item)"
                     [attr.data-p-highlight]="isItemActive(item)"
                     [attr.data-p-disabled]="isItemDisabled(item)"
-                    [attr.data-pc-section]="'header'"
+                    [pBind]="getPTOptions('header', item, i)"
                     (click)="onHeaderClick($event, item, i)"
                     (keydown)="onHeaderKeyDown($event, item, i)"
                 >
-                    <div [class]="cx('headerContent')">
+                    <div [class]="cx('headerContent')" [pBind]="getPTOptions('headerContent', item, i)">
                         <ng-container *ngIf="!itemTemplate && !_itemTemplate">
                             <a
                                 *ngIf="!getItemProp(item, 'routerLink')"
@@ -1294,18 +1371,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                                 [target]="getItemProp(item, 'target')"
                                 [attr.title]="getItemProp(item, 'title')"
                                 [class]="cx('headerLink')"
-                                [attr.data-pc-section]="'headeraction'"
+                                [pBind]="getPTOptions('headerLink', item, i)"
                             >
                                 <ng-container *ngIf="isItemGroup(item)">
                                     <ng-container *ngIf="!headerIconTemplate && !_headerIconTemplate">
-                                        <svg data-p-icon="chevron-down" [class]="cx('headerIcon')" *ngIf="isItemActive(item)" />
-                                        <svg data-p-icon="chevron-right" [class]="cx('headerIcon')" *ngIf="!isItemActive(item)" />
+                                        <svg data-p-icon="chevron-down" [class]="cx('submenuIcon')" *ngIf="isItemActive(item)" [pBind]="getPTOptions('submenuIcon', item, i)" />
+                                        <svg data-p-icon="chevron-right" [class]="cx('submenuIcon')" *ngIf="!isItemActive(item)" [pBind]="getPTOptions('submenuIcon', item, i)" />
                                     </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 htmlLabel">{{ getItemProp(item, 'label') }}</span>
-                                <ng-template #htmlLabel><span [class]="cx('headerLabel')" [innerHTML]="getItemProp(item, 'label')"></span></ng-template>
+                                <span [class]="cn(cx('headerIcon'), item.icon)" *ngIf="item.icon" [ngStyle]="getItemProp(item, 'iconStyle')" [pBind]="getPTOptions('headerIcon', item, i)"></span>
+                                <span [class]="cx('headerLabel')" *ngIf="getItemProp(item, 'escape') !== false; else htmlLabel" [pBind]="getPTOptions('headerLabel', item, i)">{{ getItemProp(item, 'label') }}</span>
+                                <ng-template #htmlLabel><span [class]="cx('headerLabel')" [innerHTML]="getItemProp(item, 'label')" [pBind]="getPTOptions('headerLabel', item, i)"></span></ng-template>
                                 <span [class]="cn(cx('badge'), getItemProp(item, 'badgeStyleClass'))" *ngIf="getItemProp(item, 'badge')">{{ getItemProp(item, 'badge') }}</span>
                             </a>
                         </ng-container>
@@ -1325,18 +1402,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                             [skipLocationChange]="getItemProp(item, 'skipLocationChange')"
                             [replaceUrl]="getItemProp(item, 'replaceUrl')"
                             [state]="getItemProp(item, 'state')"
-                            [attr.data-pc-section]="'headeraction'"
+                            [pBind]="getPTOptions('headerLink', item, i)"
                         >
                             <ng-container *ngIf="isItemGroup(item)">
                                 <ng-container *ngIf="!headerIconTemplate && !_headerIconTemplate">
-                                    <svg data-p-icon="chevron-down" [class]="cx('headerIcon')" *ngIf="isItemActive(item)" />
-                                    <svg data-p-icon="chevron-right" [class]="cx('headerIcon')" *ngIf="!isItemActive(item)" />
+                                    <svg data-p-icon="chevron-down" [class]="cx('submenuIcon')" *ngIf="isItemActive(item)" [pBind]="getPTOptions('submenuIcon', item, i)" />
+                                    <svg data-p-icon="chevron-right" [class]="cx('submenuIcon')" *ngIf="!isItemActive(item)" [pBind]="getPTOptions('submenuIcon', item, i)" />
                                 </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 [class]="cn(cx('headerIcon'), item.icon)" *ngIf="item.icon" [ngStyle]="getItemProp(item, 'iconStyle')" [pBind]="getPTOptions('headerIcon', item, i)"></span>
+                            <span [class]="cx('headerLabel')" *ngIf="getItemProp(item, 'escape') !== false; else htmlRouteLabel" [pBind]="getPTOptions('headerLabel', item, i)">{{ getItemProp(item, 'label') }}</span>
+                            <ng-template #htmlRouteLabel><span [class]="cx('headerLabel')" [innerHTML]="getItemProp(item, 'label')" [pBind]="getPTOptions('headerLabel', item, i)"></span></ng-template>
                             <span *ngIf="getItemProp(item, 'badge')" [class]="cn(cx('badge'), getItemProp(item, 'badgeStyleClass'))">{{ getItemProp(item, 'badge') }}</span>
                         </a>
                     </div>
@@ -1349,10 +1426,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                     role="region"
                     [attr.id]="getContentId(item, i)"
                     [attr.aria-labelledby]="getHeaderId(item, i)"
-                    [attr.data-pc-section]="'toggleablecontent'"
+                    [pBind]="ptm('contentContainer')"
                 >
-                    <div [class]="cx('content')" [attr.data-pc-section]="'menucontent'">
-                        <p-panelMenuList
+                    <div [class]="cx('content')" [pBind]="ptm('content')">
+                        <ul
+                            pPanelMenuList
                             [panelId]="getPanelId(i, item)"
                             [items]="getItemProp(item, 'items')"
                             [itemTemplate]="itemTemplate || _itemTemplate"
@@ -1362,7 +1440,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                             [tabindex]="tabindex"
                             [parentExpanded]="isItemActive(item)"
                             (headerFocus)="updateFocusedHeader($event)"
-                        ></p-panelMenuList>
+                            [pt]="pt()"
+                        ></ul>
                     </div>
                 </div>
             </div>
@@ -1370,11 +1449,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
     `,
                     animations: [
                         trigger('rootItem', [
-                            state('hidden', style$1({
+                            state('hidden', style$2({
                                 height: '0',
                                 visibility: 'hidden'
                             })),
-                            state('visible', style$1({
+                            state('visible', style$2({
                                 height: '*',
                                 visibility: '*'
                             })),
@@ -1384,12 +1463,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                     ],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
-                    providers: [PanelMenuStyle],
+                    providers: [PanelMenuStyle, { provide: PANELMENU_INSTANCE, useExisting: PanelMenu }, { provide: PARENT_INSTANCE, useExisting: PanelMenu }],
                     host: {
-                        '[class]': 'cn(cx("root"), styleClass)',
-                        'data-pc-section': 'root',
-                        'data-pc-name': 'panelmenu'
-                    }
+                        '[class]': 'cn(cx("root"), styleClass)'
+                    },
+                    hostDirectives: [Bind]
                 }]
         }], propDecorators: { model: [{
                 type: Input
@@ -1422,11 +1500,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                 args: [PrimeTemplate]
             }] } });
 class PanelMenuModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PanelMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: PanelMenuModule, imports: [PanelMenu, SharedModule], exports: [PanelMenu, SharedModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PanelMenuModule, imports: [PanelMenu, SharedModule, SharedModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PanelMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.4", ngImport: i0, type: PanelMenuModule, imports: [PanelMenu, SharedModule], exports: [PanelMenu, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PanelMenuModule, imports: [PanelMenu, SharedModule, SharedModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PanelMenuModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PanelMenuModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [PanelMenu, SharedModule],