primeng 18.0.0-rc.1 → 18.0.0

package/fesm2022/primeng-panelmenu.mjs

@@ -32,14 +32,14 @@ const theme = ({ dt }) => `
 
 .p-panelmenu-panel:first-child {
     border-width: ${dt('panelmenu.panel.first.border.width')};
-    border-top-left-radius: ${dt('panelmenu.panel.first.top.border.radius')};
-    border-top-right-radius: ${dt('panelmenu.panel.first.top.border.radius')};
+    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-bottom-left-radius: ${dt('panelmenu.panel.last.bottom.border.radius')};
-    border-bottom-right-radius: ${dt('panelmenu.panel.last.bottom.border.radius')};
+    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 {
@@ -74,6 +74,10 @@ const theme = ({ dt }) => `
     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')};
@@ -107,6 +111,10 @@ const theme = ({ dt }) => `
     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')};
@@ -338,9 +346,9 @@ function PanelMenuSub_ng_template_2_li_1_ng_container_2_a_1_ng_container_1_Templ
 } if (rf & 2) {
     const ctx_r3 = i0.ɵɵnextContext(5);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !ctx_r3.panelMenu.submenuIconTemplate);
+    i0.ɵɵproperty("ngIf", !ctx_r3.panelMenu.submenuiconTemplate);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r3.panelMenu.submenuIconTemplate);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r3.panelMenu.submenuiconTemplate);
 } }
 function PanelMenuSub_ng_template_2_li_1_ng_container_2_a_1_span_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "span", 22);
@@ -432,9 +440,9 @@ function PanelMenuSub_ng_template_2_li_1_ng_container_2_a_2_ng_container_1_Templ
 } if (rf & 2) {
     const ctx_r3 = i0.ɵɵnextContext(5);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !ctx_r3.panelMenu.submenuIconTemplate);
+    i0.ɵɵproperty("ngIf", !ctx_r3.panelMenu.submenuiconTemplate);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r3.panelMenu.submenuIconTemplate);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r3.panelMenu.submenuiconTemplate);
 } }
 function PanelMenuSub_ng_template_2_li_1_ng_container_2_a_2_span_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "span", 22);
@@ -601,9 +609,9 @@ function PanelMenu_ng_container_2_div_1_ng_container_3_a_1_ng_container_1_Templa
 } if (rf & 2) {
     const ctx_r4 = i0.ɵɵnextContext(5);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !ctx_r4.submenuIconTemplate);
+    i0.ɵɵproperty("ngIf", !ctx_r4.submenuiconTemplate);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r4.submenuIconTemplate);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r4.submenuiconTemplate);
 } }
 function PanelMenu_ng_container_2_div_1_ng_container_3_a_1_span_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "span", 21);
@@ -705,9 +713,9 @@ function PanelMenu_ng_container_2_div_1_a_5_ng_container_1_Template(rf, ctx) { i
 } if (rf & 2) {
     const ctx_r4 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !ctx_r4.submenuIconTemplate);
+    i0.ɵɵproperty("ngIf", !ctx_r4.submenuiconTemplate);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r4.submenuIconTemplate);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r4.submenuiconTemplate);
 } }
 function PanelMenu_ng_container_2_div_1_a_5_span_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "span", 21);
@@ -899,7 +907,7 @@ class PanelMenuSub extends BaseComponent {
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.listViewChild = _t.first);
-        } }, inputs: { panelId: "panelId", focusedItemId: "focusedItemId", items: "items", itemTemplate: "itemTemplate", level: [2, "level", "level", numberAttribute], activeItemPath: "activeItemPath", root: [2, "root", "root", booleanAttribute], tabindex: [2, "tabindex", "tabindex", numberAttribute], transitionOptions: "transitionOptions", parentExpanded: [2, "parentExpanded", "parentExpanded", booleanAttribute] }, outputs: { itemToggle: "itemToggle", menuFocus: "menuFocus", menuBlur: "menuBlur", menuKeyDown: "menuKeyDown" }, standalone: true, features: [i0.ɵɵInputTransformsFeature, i0.ɵɵInheritDefinitionFeature, i0.ɵɵStandaloneFeature], decls: 3, vars: 7, consts: [["list", ""], ["htmlLabel", ""], ["htmlRouteLabel", ""], ["role", "tree", 3, "focusin", "focusout", "keydown", "ngClass", "tabindex"], ["ngFor", "", 3, "ngForOf"], ["class", "p-menuitem-separator", "role", "separator", 4, "ngIf"], ["role", "treeitem", 3, "ngClass", "class", "p-hidden", "p-focus", "ngStyle", "pTooltip", "tooltipOptions", 4, "ngIf"], ["role", "separator", 1, "p-menuitem-separator"], ["role", "treeitem", 3, "ngClass", "ngStyle", "pTooltip", "tooltipOptions"], [1, "p-menuitem-content", 3, "click"], [4, "ngIf"], [1, "p-toggleable-content"], [3, "id", "panelId", "items", "itemTemplate", "transitionOptions", "focusedItemId", "activeItemPath", "level", "parentExpanded", "itemToggle", 4, "ngIf"], ["class", "p-panelmenu-item-link", 3, "ngClass", "target", 4, "ngIf"], ["class", "p-panelmenu-item-link", 3, "routerLink", "queryParams", "routerLinkActive", "routerLinkActiveOptions", "ngClass", "target", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", 4, "ngIf"], [1, "p-panelmenu-item-link", 3, "ngClass", "target"], ["class", "p-panelmenu-submenu-icon", 3, "ngClass", "ngStyle", 4, "ngIf"], ["class", "p-panelmenu-item-label", 4, "ngIf", "ngIfElse"], ["class", "p-menuitem-badge", 3, "ngClass", 4, "ngIf"], [4, "ngTemplateOutlet"], [3, "styleClass", "ngStyle", 4, "ngIf"], [3, "styleClass", "ngStyle"], [1, "p-panelmenu-submenu-icon", 3, "ngClass", "ngStyle"], [1, "p-panelmenu-item-label"], [1, "p-panelmenu-item-label", 3, "innerHTML"], [1, "p-menuitem-badge", 3, "ngClass"], [1, "p-panelmenu-item-link", 3, "routerLink", "queryParams", "routerLinkActive", "routerLinkActiveOptions", "ngClass", "target", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], [3, "itemToggle", "id", "panelId", "items", "itemTemplate", "transitionOptions", "focusedItemId", "activeItemPath", "level", "parentExpanded"]], template: function PanelMenuSub_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { panelId: "panelId", focusedItemId: "focusedItemId", items: "items", itemTemplate: "itemTemplate", level: [2, "level", "level", numberAttribute], activeItemPath: "activeItemPath", root: [2, "root", "root", booleanAttribute], tabindex: [2, "tabindex", "tabindex", numberAttribute], transitionOptions: "transitionOptions", parentExpanded: [2, "parentExpanded", "parentExpanded", booleanAttribute] }, outputs: { itemToggle: "itemToggle", menuFocus: "menuFocus", menuBlur: "menuBlur", menuKeyDown: "menuKeyDown" }, standalone: true, features: [i0.ɵɵInputTransformsFeature, i0.ɵɵInheritDefinitionFeature, i0.ɵɵStandaloneFeature], decls: 3, vars: 7, consts: [["list", ""], ["htmlLabel", ""], ["htmlRouteLabel", ""], ["role", "tree", 3, "focusin", "focusout", "keydown", "ngClass", "tabindex"], ["ngFor", "", 3, "ngForOf"], ["class", "p-menuitem-separator", "role", "separator", 4, "ngIf"], ["role", "treeitem", 3, "ngClass", "class", "p-hidden", "p-focus", "ngStyle", "pTooltip", "tooltipOptions", 4, "ngIf"], ["role", "separator", 1, "p-menuitem-separator"], ["role", "treeitem", 3, "ngClass", "ngStyle", "pTooltip", "tooltipOptions"], [1, "p-panelmenu-item-content", 3, "click"], [4, "ngIf"], [1, "p-toggleable-content"], [3, "id", "panelId", "items", "itemTemplate", "transitionOptions", "focusedItemId", "activeItemPath", "level", "parentExpanded", "itemToggle", 4, "ngIf"], ["class", "p-panelmenu-item-link", 3, "ngClass", "target", 4, "ngIf"], ["class", "p-panelmenu-item-link", 3, "routerLink", "queryParams", "routerLinkActive", "routerLinkActiveOptions", "ngClass", "target", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", 4, "ngIf"], [1, "p-panelmenu-item-link", 3, "ngClass", "target"], ["class", "p-panelmenu-submenu-icon", 3, "ngClass", "ngStyle", 4, "ngIf"], ["class", "p-panelmenu-item-label", 4, "ngIf", "ngIfElse"], ["class", "p-menuitem-badge", 3, "ngClass", 4, "ngIf"], [4, "ngTemplateOutlet"], [3, "styleClass", "ngStyle", 4, "ngIf"], [3, "styleClass", "ngStyle"], [1, "p-panelmenu-submenu-icon", 3, "ngClass", "ngStyle"], [1, "p-panelmenu-item-label"], [1, "p-panelmenu-item-label", 3, "innerHTML"], [1, "p-menuitem-badge", 3, "ngClass"], [1, "p-panelmenu-item-link", 3, "routerLink", "queryParams", "routerLinkActive", "routerLinkActiveOptions", "ngClass", "target", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], [3, "itemToggle", "id", "panelId", "items", "itemTemplate", "transitionOptions", "focusedItemId", "activeItemPath", "level", "parentExpanded"]], template: function PanelMenuSub_Template(rf, ctx) { if (rf & 1) {
             const _r1 = i0.ɵɵgetCurrentView();
             i0.ɵɵelementStart(0, "ul", 3, 0);
             i0.ɵɵlistener("focusin", function PanelMenuSub_Template_ul_focusin_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.menuFocus.emit($event)); })("focusout", function PanelMenuSub_Template_ul_focusout_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.menuBlur.emit($event)); })("keydown", function PanelMenuSub_Template_ul_keydown_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.menuKeyDown.emit($event)); });
@@ -962,7 +970,7 @@ class PanelMenuSub extends BaseComponent {
                     [attr.data-p-disabled]="isItemDisabled(processedItem)"
                     [tooltipOptions]="getItemProp(processedItem, 'tooltipOptions')"
                 >
-                    <div class="p-menuitem-content" (click)="onItemClick($event, processedItem)">
+                    <div class="p-panelmenu-item-content" (click)="onItemClick($event, processedItem)">
                         <ng-container *ngIf="!itemTemplate">
                             <a
                                 *ngIf="!getItemProp(processedItem, 'routerLink')"
@@ -974,11 +982,11 @@ class PanelMenuSub extends BaseComponent {
                                 [attr.tabindex]="!!parentExpanded ? '0' : '-1'"
                             >
                                 <ng-container *ngIf="isItemGroup(processedItem)">
-                                    <ng-container *ngIf="!panelMenu.submenuIconTemplate">
+                                    <ng-container *ngIf="!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')" />
                                     </ng-container>
-                                    <ng-template *ngTemplateOutlet="panelMenu.submenuIconTemplate"></ng-template>
+                                    <ng-template *ngTemplateOutlet="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>
@@ -1005,11 +1013,11 @@ class PanelMenuSub extends BaseComponent {
                                 [attr.tabindex]="!!parentExpanded ? '0' : '-1'"
                             >
                                 <ng-container *ngIf="isItemGroup(processedItem)">
-                                    <ng-container *ngIf="!panelMenu.submenuIconTemplate">
+                                    <ng-container *ngIf="!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')" />
                                     </ng-container>
-                                    <ng-template *ngTemplateOutlet="panelMenu.submenuIconTemplate"></ng-template>
+                                    <ng-template *ngTemplateOutlet="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>
@@ -1537,7 +1545,7 @@ class PanelMenu extends BaseComponent {
      * Template option of submenuicon.
      * @group Templates
      */
-    submenuIconTemplate;
+    submenuiconTemplate;
     /**
      * Template option of item.
      * @group Templates
@@ -1550,21 +1558,6 @@ class PanelMenu extends BaseComponent {
         super.ngOnInit();
         this.id = this.id || uuid('pn_id_');
     }
-    ngAfterContentInit() {
-        this.templates?.forEach((item) => {
-            switch (item.getType()) {
-                case 'submenuicon':
-                    this.submenuIconTemplate = item.template;
-                    break;
-                case 'item':
-                    this.itemTemplate = item.template;
-                    break;
-                default:
-                    this.itemTemplate = item.template;
-                    break;
-            }
-        });
-    }
     /**
      * Collapses open panels.
      * @group Method
@@ -1714,14 +1707,14 @@ class PanelMenu extends BaseComponent {
             i0.ɵɵcontentQuery(dirIndex, _c7, 5);
         } if (rf & 2) {
             let _t;
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.submenuIconTemplate = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.submenuiconTemplate = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.itemTemplate = _t.first);
         } }, viewQuery: function PanelMenu_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(_c8, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.containerViewChild = _t.first);
-        } }, inputs: { model: "model", style: "style", styleClass: "styleClass", multiple: [2, "multiple", "multiple", booleanAttribute], transitionOptions: "transitionOptions", id: "id", tabindex: [2, "tabindex", "tabindex", numberAttribute] }, standalone: true, features: [i0.ɵɵProvidersFeature([PanelMenuStyle]), i0.ɵɵInputTransformsFeature, i0.ɵɵInheritDefinitionFeature, i0.ɵɵStandaloneFeature], decls: 3, vars: 5, consts: [["container", ""], ["htmlLabel", ""], ["htmlRouteLabel", ""], [3, "ngStyle", "ngClass"], [4, "ngFor", "ngForOf"], ["class", "p-panelmenu-panel", 3, "ngClass", "ngStyle", 4, "ngIf"], [1, "p-panelmenu-panel", 3, "ngClass", "ngStyle"], ["role", "button", 3, "click", "keydown", "ngClass", "ngStyle", "pTooltip", "tabindex", "tooltipOptions"], [1, "p-panelmenu-header-content"], [4, "ngIf"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], ["class", "p-panelmenu-header-action", 3, "routerLink", "queryParams", "routerLinkActive", "routerLinkActiveOptions", "target", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", 4, "ngIf"], ["class", "p-panelmenu-content-container", "role", "region", 3, "ngClass", 4, "ngIf"], ["class", "p-panelmenu-header-link", 3, "target", 4, "ngIf"], [1, "p-panelmenu-header-link", 3, "target"], ["class", "p-panelmenu-submenu-icon", 3, "ngClass", "ngStyle", 4, "ngIf"], ["class", "p-panelmenu-header-label", 4, "ngIf", "ngIfElse"], ["class", "p-menuitem-badge", 3, "ngClass", 4, "ngIf"], [4, "ngTemplateOutlet"], [3, "styleClass", 4, "ngIf"], [3, "styleClass"], [1, "p-panelmenu-submenu-icon", 3, "ngClass", "ngStyle"], [1, "p-panelmenu-header-label"], [1, "p-panelmenu-header-label", 3, "innerHTML"], [1, "p-menuitem-badge", 3, "ngClass"], [1, "p-panelmenu-header-action", 3, "routerLink", "queryParams", "routerLinkActive", "routerLinkActiveOptions", "target", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state"], ["role", "region", 1, "p-panelmenu-content-container", 3, "ngClass"], [1, "p-panelmenu-content"], [3, "headerFocus", "panelId", "items", "itemTemplate", "transitionOptions", "root", "activeItem", "tabindex", "parentExpanded"]], template: function PanelMenu_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { model: "model", style: "style", styleClass: "styleClass", multiple: [2, "multiple", "multiple", booleanAttribute], transitionOptions: "transitionOptions", id: "id", tabindex: [2, "tabindex", "tabindex", numberAttribute] }, standalone: true, features: [i0.ɵɵProvidersFeature([PanelMenuStyle]), i0.ɵɵInputTransformsFeature, i0.ɵɵInheritDefinitionFeature, i0.ɵɵStandaloneFeature], decls: 3, vars: 5, consts: [["container", ""], ["htmlLabel", ""], ["htmlRouteLabel", ""], [3, "ngStyle", "ngClass"], [4, "ngFor", "ngForOf"], ["class", "p-panelmenu-panel", 3, "ngClass", "ngStyle", 4, "ngIf"], [1, "p-panelmenu-panel", 3, "ngClass", "ngStyle"], ["role", "button", 3, "click", "keydown", "ngClass", "ngStyle", "pTooltip", "tabindex", "tooltipOptions"], [1, "p-panelmenu-header-content"], [4, "ngIf"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], ["class", "p-panelmenu-header-link", 3, "routerLink", "queryParams", "routerLinkActive", "routerLinkActiveOptions", "target", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", 4, "ngIf"], ["class", "p-panelmenu-content-container", "role", "region", 3, "ngClass", 4, "ngIf"], ["class", "p-panelmenu-header-link", 3, "target", 4, "ngIf"], [1, "p-panelmenu-header-link", 3, "target"], ["class", "p-panelmenu-submenu-icon", 3, "ngClass", "ngStyle", 4, "ngIf"], ["class", "p-panelmenu-header-label", 4, "ngIf", "ngIfElse"], ["class", "p-menuitem-badge", 3, "ngClass", 4, "ngIf"], [4, "ngTemplateOutlet"], [3, "styleClass", 4, "ngIf"], [3, "styleClass"], [1, "p-panelmenu-submenu-icon", 3, "ngClass", "ngStyle"], [1, "p-panelmenu-header-label"], [1, "p-panelmenu-header-label", 3, "innerHTML"], [1, "p-menuitem-badge", 3, "ngClass"], [1, "p-panelmenu-header-link", 3, "routerLink", "queryParams", "routerLinkActive", "routerLinkActiveOptions", "target", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state"], ["role", "region", 1, "p-panelmenu-content-container", 3, "ngClass"], [1, "p-panelmenu-content"], [3, "headerFocus", "panelId", "items", "itemTemplate", "transitionOptions", "root", "activeItem", "tabindex", "parentExpanded"]], template: function PanelMenu_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 3, 0);
             i0.ɵɵtemplate(2, PanelMenu_ng_container_2_Template, 2, 1, "ng-container", 4);
             i0.ɵɵelementEnd();
@@ -1733,10 +1726,12 @@ class PanelMenu extends BaseComponent {
         } }, dependencies: [CommonModule, i1.NgClass, i1.NgForOf, i1.NgIf, i1.NgTemplateOutlet, i1.NgStyle, PanelMenuList, RouterModule, i2.RouterLink, i2.RouterLinkActive, TooltipModule, i3.Tooltip, ChevronDownIcon, ChevronRightIcon, SharedModule], encapsulation: 2, data: { animation: [
                 trigger('rootItem', [
                     state('hidden', style({
-                        height: '0'
+                        height: '0',
+                        visibility: 'hidden'
                     })),
                     state('visible', style({
-                        height: '*'
+                        height: '*',
+                        visibility: '*'
                     })),
                     transition('visible <=> hidden', [animate('{{transitionParams}}')]),
                     transition('void => *', animate(0))
@@ -1788,11 +1783,11 @@ class PanelMenu extends BaseComponent {
                                     [attr.data-pc-section]="'headeraction'"
                                 >
                                     <ng-container *ngIf="isItemGroup(item)">
-                                        <ng-container *ngIf="!submenuIconTemplate">
+                                        <ng-container *ngIf="!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"></ng-template>
+                                        <ng-template *ngTemplateOutlet="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>
@@ -1808,7 +1803,7 @@ class PanelMenu extends BaseComponent {
                                 [routerLinkActive]="'p-panelmenu-item-link-active'"
                                 [routerLinkActiveOptions]="getItemProp(item, 'routerLinkActiveOptions') || { exact: false }"
                                 [target]="getItemProp(item, 'target')"
-                                class="p-panelmenu-header-action"
+                                class="p-panelmenu-header-link"
                                 [attr.tabindex]="-1"
                                 [fragment]="getItemProp(item, 'fragment')"
                                 [queryParamsHandling]="getItemProp(item, 'queryParamsHandling')"
@@ -1819,11 +1814,11 @@ class PanelMenu extends BaseComponent {
                                 [attr.data-pc-section]="'headeraction'"
                             >
                                 <ng-container *ngIf="isItemGroup(item)">
-                                    <ng-container *ngIf="!submenuIconTemplate">
+                                    <ng-container *ngIf="!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"></ng-template>
+                                    <ng-template *ngTemplateOutlet="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 htmlRouteLabel">{{ getItemProp(item, 'label') }}</span>
@@ -1864,10 +1859,12 @@ class PanelMenu extends BaseComponent {
                 animations: [
                     trigger('rootItem', [
                         state('hidden', style({
-                            height: '0'
+                            height: '0',
+                            visibility: 'hidden'
                         })),
                         state('visible', style({
-                            height: '*'
+                            height: '*',
+                            visibility: '*'
                         })),
                         transition('visible <=> hidden', [animate('{{transitionParams}}')]),
                         transition('void => *', animate(0))
@@ -1896,7 +1893,7 @@ class PanelMenu extends BaseComponent {
         }], containerViewChild: [{
             type: ViewChild,
             args: ['container']
-        }], submenuIconTemplate: [{
+        }], submenuiconTemplate: [{
             type: ContentChild,
             args: ['submenuicon']
         }], itemTemplate: [{