primeng 21.0.0-beta.1 → 21.0.0-rc.1

package/fesm2022/primeng-contextmenu.mjs

@@ -51,10 +51,10 @@ class ContextMenuStyle extends BaseStyle {
     style = style;
     classes = classes;
     inlineStyles = inlineStyles;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ContextMenuStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ContextMenuStyle });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ContextMenuStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ContextMenuStyle });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ContextMenuStyle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ContextMenuStyle, decorators: [{
             type: Injectable
         }] });
 /**
@@ -146,7 +146,7 @@ class ContextMenuSub extends BaseComponent {
     menuBlur = new EventEmitter();
     menuKeydown = new EventEmitter();
     sublistViewChild;
-    render = signal(false, ...(ngDevMode ? [{ debugName: "render" }] : []));
+    render = signal(false, { ...(ngDevMode ? { debugName: "render" } : {}) });
     hostName = 'ContextMenu';
     _componentStyle = inject(ContextMenuStyle);
     $pcContextMenu = inject(CONTEXTMENU_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;
@@ -241,8 +241,8 @@ class ContextMenuSub extends BaseComponent {
             sublist.style.left = itemOuterWidth + 'px';
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ContextMenuSub, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: forwardRef(() => ContextMenu) }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: ContextMenuSub, isStandalone: true, selector: "p-contextMenuSub, p-contextmenu-sub", inputs: { visible: "visible", items: "items", itemTemplate: "itemTemplate", root: ["root", "root", booleanAttribute], autoZIndex: ["autoZIndex", "autoZIndex", booleanAttribute], baseZIndex: ["baseZIndex", "baseZIndex", numberAttribute], popup: ["popup", "popup", booleanAttribute], menuId: "menuId", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", level: ["level", "level", numberAttribute], focusedItemId: "focusedItemId", activeItemPath: "activeItemPath", motionOptions: "motionOptions", tabindex: ["tabindex", "tabindex", numberAttribute] }, outputs: { itemClick: "itemClick", itemMouseEnter: "itemMouseEnter", menuFocus: "menuFocus", menuBlur: "menuBlur", menuKeydown: "menuKeydown" }, providers: [ContextMenuStyle, { provide: CONTEXTMENUSUB_INSTANCE, useExisting: ContextMenuSub }, { provide: PARENT_INSTANCE, useExisting: ContextMenuSub }], viewQueries: [{ propertyName: "sublistViewChild", first: true, predicate: ["sublist"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ContextMenuSub, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: forwardRef(() => ContextMenu) }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: ContextMenuSub, isStandalone: true, selector: "p-contextMenuSub, p-contextmenu-sub", inputs: { visible: "visible", items: "items", itemTemplate: "itemTemplate", root: ["root", "root", booleanAttribute], autoZIndex: ["autoZIndex", "autoZIndex", booleanAttribute], baseZIndex: ["baseZIndex", "baseZIndex", numberAttribute], popup: ["popup", "popup", booleanAttribute], menuId: "menuId", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", level: ["level", "level", numberAttribute], focusedItemId: "focusedItemId", activeItemPath: "activeItemPath", motionOptions: "motionOptions", tabindex: ["tabindex", "tabindex", numberAttribute] }, outputs: { itemClick: "itemClick", itemMouseEnter: "itemMouseEnter", menuFocus: "menuFocus", menuBlur: "menuBlur", menuKeydown: "menuKeydown" }, providers: [ContextMenuStyle, { provide: CONTEXTMENUSUB_INSTANCE, useExisting: ContextMenuSub }, { provide: PARENT_INSTANCE, useExisting: ContextMenuSub }], viewQueries: [{ propertyName: "sublistViewChild", first: true, predicate: ["sublist"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
         @if (render()) {
             <ul
                 #sublist
@@ -302,25 +302,39 @@ class ContextMenuSub extends BaseComponent {
                                     *ngIf="!getItemProp(processedItem, 'routerLink')"
                                     [attr.href]="getItemProp(processedItem, 'url')"
                                     [attr.data-automationid]="getItemProp(processedItem, 'automationId')"
+                                    [attr.title]="getItemProp(processedItem, 'title')"
                                     [target]="getItemProp(processedItem, 'target')"
-                                    [class]="cx('itemLink')"
+                                    [class]="cn(cx('itemLink'), getItemProp(processedItem, 'linkClass'))"
+                                    [ngStyle]="getItemProp(processedItem, 'linkStyle')"
                                     [attr.tabindex]="-1"
                                     [pBind]="getPTOptions(processedItem, index, 'itemLink')"
                                     pRipple
                                 >
                                     <span
                                         *ngIf="getItemProp(processedItem, 'icon')"
-                                        [class]="cn(cx('itemIcon'), getItemProp(processedItem, 'icon'))"
+                                        [class]="cn(cx('itemIcon'), getItemProp(processedItem, 'icon'), getItemProp(processedItem, 'iconClass'))"
                                         [ngStyle]="getItemProp(processedItem, 'iconStyle')"
                                         [pBind]="getPTOptions(processedItem, index, 'itemIcon')"
                                         [attr.aria-hidden]="true"
                                         [attr.tabindex]="-1"
                                     >
                                     </span>
-                                    <span *ngIf="getItemProp(processedItem, 'escape'); else htmlLabel" [class]="cx('itemLabel')" [pBind]="getPTOptions(processedItem, index, 'itemLabel')">
+                                    <span
+                                        *ngIf="getItemProp(processedItem, 'escape'); else htmlLabel"
+                                        [class]="cn(cx('itemLabel'), getItemProp(processedItem, 'labelClass'))"
+                                        [ngStyle]="getItemProp(processedItem, 'labelStyle')"
+                                        [pBind]="getPTOptions(processedItem, index, 'itemLabel')"
+                                    >
                                         {{ getItemLabel(processedItem) }}
                                     </span>
-                                    <ng-template #htmlLabel> <span [class]="cx('itemLabel')" [innerHTML]="getItemLabel(processedItem)" [pBind]="getPTOptions(processedItem, index, 'itemLabel')"></span> </ng-template>
+                                    <ng-template #htmlLabel>
+                                        <span
+                                            [class]="cn(cx('itemLabel'), getItemProp(processedItem, 'labelClass'))"
+                                            [ngStyle]="getItemProp(processedItem, 'labelStyle')"
+                                            [innerHTML]="getItemLabel(processedItem)"
+                                            [pBind]="getPTOptions(processedItem, index, 'itemLabel')"
+                                        ></span>
+                                    </ng-template>
                                     <p-badge *ngIf="getItemProp(processedItem, 'badge')" [class]="getItemProp(processedItem, 'badgeStyleClass')" [value]="getItemProp(processedItem, 'badge')" [unstyled]="unstyled()" />
                                     <ng-container *ngIf="isItemGroup(processedItem)">
                                         <svg
@@ -337,11 +351,13 @@ class ContextMenuSub extends BaseComponent {
                                     *ngIf="getItemProp(processedItem, 'routerLink')"
                                     [routerLink]="getItemProp(processedItem, 'routerLink')"
                                     [attr.data-automationid]="getItemProp(processedItem, 'automationId')"
+                                    [attr.title]="getItemProp(processedItem, 'title')"
                                     [attr.tabindex]="-1"
                                     [queryParams]="getItemProp(processedItem, 'queryParams')"
-                                    [routerLinkActiveOptions]="getItemProp(processedItem, 'routerLinActiveOptions') || { exact: false }"
+                                    [routerLinkActiveOptions]="getItemProp(processedItem, 'routerLinkActiveOptions') || { exact: false }"
                                     [target]="getItemProp(processedItem, 'target')"
-                                    [class]="cx('itemLink')"
+                                    [class]="cn(cx('itemLink'), getItemProp(processedItem, 'linkClass'))"
+                                    [ngStyle]="getItemProp(processedItem, 'linkStyle')"
                                     [fragment]="getItemProp(processedItem, 'fragment')"
                                     [queryParamsHandling]="getItemProp(processedItem, 'queryParamsHandling')"
                                     [preserveFragment]="getItemProp(processedItem, 'preserveFragment')"
@@ -353,18 +369,28 @@ class ContextMenuSub extends BaseComponent {
                                 >
                                     <span
                                         *ngIf="getItemProp(processedItem, 'icon')"
-                                        [class]="cn(cx('itemIcon'), getItemProp(processedItem, 'icon'))"
+                                        [class]="cn(cx('itemIcon'), getItemProp(processedItem, 'icon'), getItemProp(processedItem, 'iconClass'))"
                                         [ngStyle]="getItemProp(processedItem, 'iconStyle')"
                                         [pBind]="getPTOptions(processedItem, index, 'itemIcon')"
                                         [attr.aria-hidden]="true"
                                         [attr.tabindex]="-1"
                                     >
                                     </span>
-                                    <span *ngIf="getItemProp(processedItem, 'escape'); else htmlLabel" [class]="cx('itemLabel')" [pBind]="getPTOptions(processedItem, index, 'itemLabel')">
+                                    <span
+                                        *ngIf="getItemProp(processedItem, 'escape'); else htmlLabel"
+                                        [class]="cn(cx('itemLabel'), getItemProp(processedItem, 'labelClass'))"
+                                        [ngStyle]="getItemProp(processedItem, 'labelStyle')"
+                                        [pBind]="getPTOptions(processedItem, index, 'itemLabel')"
+                                    >
                                         {{ getItemLabel(processedItem) }}
                                     </span>
                                     <ng-template #htmlLabel>
-                                        <span [class]="cx('itemLabel')" [innerHTML]="getItemLabel(processedItem)" [pBind]="getPTOptions(processedItem, index, 'itemLabel')"></span>
+                                        <span
+                                            [class]="cn(cx('itemLabel'), getItemProp(processedItem, 'labelClass'))"
+                                            [ngStyle]="getItemProp(processedItem, 'labelStyle')"
+                                            [innerHTML]="getItemLabel(processedItem)"
+                                            [pBind]="getPTOptions(processedItem, index, 'itemLabel')"
+                                        ></span>
                                     </ng-template>
                                     <p-badge *ngIf="getItemProp(processedItem, 'badge')" [class]="getItemProp(processedItem, 'badgeStyleClass')" [value]="getItemProp(processedItem, 'badge')" [unstyled]="unstyled()" />
                                     <ng-container *ngIf="isItemGroup(processedItem)">
@@ -403,9 +429,9 @@ class ContextMenuSub extends BaseComponent {
                 </ng-template>
             </ul>
         }
-    `, isInline: true, dependencies: [{ kind: "component", type: ContextMenuSub, selector: "p-contextMenuSub, p-contextmenu-sub", inputs: ["visible", "items", "itemTemplate", "root", "autoZIndex", "baseZIndex", "popup", "menuId", "ariaLabel", "ariaLabelledBy", "level", "focusedItemId", "activeItemPath", "motionOptions", "tabindex"], outputs: ["itemClick", "itemMouseEnter", "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: Ripple, selector: "[pRipple]" }, { 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", "ptTooltip", "pTooltipPt", "pTooltipUnstyled"] }, { kind: "directive", type: i4.Bind, selector: "[pBind]", inputs: ["pBind"] }, { kind: "component", type: AngleRightIcon, selector: "[data-p-icon=\"angle-right\"]" }, { kind: "ngmodule", type: BadgeModule }, { kind: "component", type: i5.Badge, selector: "p-badge", inputs: ["styleClass", "badgeSize", "size", "severity", "value", "badgeDisabled"] }, { kind: "ngmodule", type: SharedModule }, { kind: "ngmodule", type: BindModule }, { kind: "ngmodule", type: MotionModule }, { kind: "directive", type: i6.MotionDirective, selector: "[pMotion]", inputs: ["pMotion", "pMotionName", "pMotionType", "pMotionSafe", "pMotionDisabled", "pMotionAppear", "pMotionEnter", "pMotionLeave", "pMotionDuration", "pMotionHideStrategy", "pMotionEnterFromClass", "pMotionEnterToClass", "pMotionEnterActiveClass", "pMotionLeaveFromClass", "pMotionLeaveToClass", "pMotionLeaveActiveClass", "pMotionOptions"], outputs: ["pMotionOnBeforeEnter", "pMotionOnEnter", "pMotionOnAfterEnter", "pMotionOnEnterCancelled", "pMotionOnBeforeLeave", "pMotionOnLeave", "pMotionOnAfterLeave", "pMotionOnLeaveCancelled"] }], encapsulation: i0.ViewEncapsulation.None });
+    `, isInline: true, dependencies: [{ kind: "component", type: ContextMenuSub, selector: "p-contextMenuSub, p-contextmenu-sub", inputs: ["visible", "items", "itemTemplate", "root", "autoZIndex", "baseZIndex", "popup", "menuId", "ariaLabel", "ariaLabelledBy", "level", "focusedItemId", "activeItemPath", "motionOptions", "tabindex"], outputs: ["itemClick", "itemMouseEnter", "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: Ripple, selector: "[pRipple]" }, { 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", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "directive", type: i4.Bind, selector: "[pBind]", inputs: ["pBind"] }, { kind: "component", type: AngleRightIcon, selector: "[data-p-icon=\"angle-right\"]" }, { kind: "ngmodule", type: BadgeModule }, { kind: "component", type: i5.Badge, selector: "p-badge", inputs: ["styleClass", "badgeSize", "size", "severity", "value", "badgeDisabled"] }, { kind: "ngmodule", type: SharedModule }, { kind: "ngmodule", type: BindModule }, { kind: "ngmodule", type: MotionModule }, { kind: "directive", type: i6.MotionDirective, selector: "[pMotion]", inputs: ["pMotion", "pMotionName", "pMotionType", "pMotionSafe", "pMotionDisabled", "pMotionAppear", "pMotionEnter", "pMotionLeave", "pMotionDuration", "pMotionHideStrategy", "pMotionEnterFromClass", "pMotionEnterToClass", "pMotionEnterActiveClass", "pMotionLeaveFromClass", "pMotionLeaveToClass", "pMotionLeaveActiveClass", "pMotionOptions"], outputs: ["pMotionOnBeforeEnter", "pMotionOnEnter", "pMotionOnAfterEnter", "pMotionOnEnterCancelled", "pMotionOnBeforeLeave", "pMotionOnLeave", "pMotionOnAfterLeave", "pMotionOnLeaveCancelled"] }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ContextMenuSub, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ContextMenuSub, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-contextMenuSub, p-contextmenu-sub',
@@ -471,25 +497,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
                                     *ngIf="!getItemProp(processedItem, 'routerLink')"
                                     [attr.href]="getItemProp(processedItem, 'url')"
                                     [attr.data-automationid]="getItemProp(processedItem, 'automationId')"
+                                    [attr.title]="getItemProp(processedItem, 'title')"
                                     [target]="getItemProp(processedItem, 'target')"
-                                    [class]="cx('itemLink')"
+                                    [class]="cn(cx('itemLink'), getItemProp(processedItem, 'linkClass'))"
+                                    [ngStyle]="getItemProp(processedItem, 'linkStyle')"
                                     [attr.tabindex]="-1"
                                     [pBind]="getPTOptions(processedItem, index, 'itemLink')"
                                     pRipple
                                 >
                                     <span
                                         *ngIf="getItemProp(processedItem, 'icon')"
-                                        [class]="cn(cx('itemIcon'), getItemProp(processedItem, 'icon'))"
+                                        [class]="cn(cx('itemIcon'), getItemProp(processedItem, 'icon'), getItemProp(processedItem, 'iconClass'))"
                                         [ngStyle]="getItemProp(processedItem, 'iconStyle')"
                                         [pBind]="getPTOptions(processedItem, index, 'itemIcon')"
                                         [attr.aria-hidden]="true"
                                         [attr.tabindex]="-1"
                                     >
                                     </span>
-                                    <span *ngIf="getItemProp(processedItem, 'escape'); else htmlLabel" [class]="cx('itemLabel')" [pBind]="getPTOptions(processedItem, index, 'itemLabel')">
+                                    <span
+                                        *ngIf="getItemProp(processedItem, 'escape'); else htmlLabel"
+                                        [class]="cn(cx('itemLabel'), getItemProp(processedItem, 'labelClass'))"
+                                        [ngStyle]="getItemProp(processedItem, 'labelStyle')"
+                                        [pBind]="getPTOptions(processedItem, index, 'itemLabel')"
+                                    >
                                         {{ getItemLabel(processedItem) }}
                                     </span>
-                                    <ng-template #htmlLabel> <span [class]="cx('itemLabel')" [innerHTML]="getItemLabel(processedItem)" [pBind]="getPTOptions(processedItem, index, 'itemLabel')"></span> </ng-template>
+                                    <ng-template #htmlLabel>
+                                        <span
+                                            [class]="cn(cx('itemLabel'), getItemProp(processedItem, 'labelClass'))"
+                                            [ngStyle]="getItemProp(processedItem, 'labelStyle')"
+                                            [innerHTML]="getItemLabel(processedItem)"
+                                            [pBind]="getPTOptions(processedItem, index, 'itemLabel')"
+                                        ></span>
+                                    </ng-template>
                                     <p-badge *ngIf="getItemProp(processedItem, 'badge')" [class]="getItemProp(processedItem, 'badgeStyleClass')" [value]="getItemProp(processedItem, 'badge')" [unstyled]="unstyled()" />
                                     <ng-container *ngIf="isItemGroup(processedItem)">
                                         <svg
@@ -506,11 +546,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
                                     *ngIf="getItemProp(processedItem, 'routerLink')"
                                     [routerLink]="getItemProp(processedItem, 'routerLink')"
                                     [attr.data-automationid]="getItemProp(processedItem, 'automationId')"
+                                    [attr.title]="getItemProp(processedItem, 'title')"
                                     [attr.tabindex]="-1"
                                     [queryParams]="getItemProp(processedItem, 'queryParams')"
-                                    [routerLinkActiveOptions]="getItemProp(processedItem, 'routerLinActiveOptions') || { exact: false }"
+                                    [routerLinkActiveOptions]="getItemProp(processedItem, 'routerLinkActiveOptions') || { exact: false }"
                                     [target]="getItemProp(processedItem, 'target')"
-                                    [class]="cx('itemLink')"
+                                    [class]="cn(cx('itemLink'), getItemProp(processedItem, 'linkClass'))"
+                                    [ngStyle]="getItemProp(processedItem, 'linkStyle')"
                                     [fragment]="getItemProp(processedItem, 'fragment')"
                                     [queryParamsHandling]="getItemProp(processedItem, 'queryParamsHandling')"
                                     [preserveFragment]="getItemProp(processedItem, 'preserveFragment')"
@@ -522,18 +564,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
                                 >
                                     <span
                                         *ngIf="getItemProp(processedItem, 'icon')"
-                                        [class]="cn(cx('itemIcon'), getItemProp(processedItem, 'icon'))"
+                                        [class]="cn(cx('itemIcon'), getItemProp(processedItem, 'icon'), getItemProp(processedItem, 'iconClass'))"
                                         [ngStyle]="getItemProp(processedItem, 'iconStyle')"
                                         [pBind]="getPTOptions(processedItem, index, 'itemIcon')"
                                         [attr.aria-hidden]="true"
                                         [attr.tabindex]="-1"
                                     >
                                     </span>
-                                    <span *ngIf="getItemProp(processedItem, 'escape'); else htmlLabel" [class]="cx('itemLabel')" [pBind]="getPTOptions(processedItem, index, 'itemLabel')">
+                                    <span
+                                        *ngIf="getItemProp(processedItem, 'escape'); else htmlLabel"
+                                        [class]="cn(cx('itemLabel'), getItemProp(processedItem, 'labelClass'))"
+                                        [ngStyle]="getItemProp(processedItem, 'labelStyle')"
+                                        [pBind]="getPTOptions(processedItem, index, 'itemLabel')"
+                                    >
                                         {{ getItemLabel(processedItem) }}
                                     </span>
                                     <ng-template #htmlLabel>
-                                        <span [class]="cx('itemLabel')" [innerHTML]="getItemLabel(processedItem)" [pBind]="getPTOptions(processedItem, index, 'itemLabel')"></span>
+                                        <span
+                                            [class]="cn(cx('itemLabel'), getItemProp(processedItem, 'labelClass'))"
+                                            [ngStyle]="getItemProp(processedItem, 'labelStyle')"
+                                            [innerHTML]="getItemLabel(processedItem)"
+                                            [pBind]="getPTOptions(processedItem, index, 'itemLabel')"
+                                        ></span>
                                     </ng-template>
                                     <p-badge *ngIf="getItemProp(processedItem, 'badge')" [class]="getItemProp(processedItem, 'badgeStyleClass')" [value]="getItemProp(processedItem, 'badge')" [unstyled]="unstyled()" />
                                     <ng-container *ngIf="isItemGroup(processedItem)">
@@ -711,18 +763,18 @@ class ContextMenu extends BaseComponent {
      * @defaultValue 'self'
      * @group Props
      */
-    appendTo = input(undefined, ...(ngDevMode ? [{ debugName: "appendTo" }] : []));
+    appendTo = input(undefined, { ...(ngDevMode ? { debugName: "appendTo" } : {}) });
     /**
      * The motion options.
      * @group Props
      */
-    motionOptions = input(undefined, ...(ngDevMode ? [{ debugName: "motionOptions" }] : []));
+    motionOptions = input(undefined, { ...(ngDevMode ? { debugName: "motionOptions" } : {}) });
     computedMotionOptions = computed(() => {
         return {
             ...this.ptm('motion'),
             ...this.motionOptions()
         };
-    }, ...(ngDevMode ? [{ debugName: "computedMotionOptions" }] : []));
+    }, { ...(ngDevMode ? { debugName: "computedMotionOptions" } : {}) });
     /**
      * Callback to invoke when overlay menu is shown.
      * @group Emits
@@ -744,21 +796,22 @@ class ContextMenu extends BaseComponent {
     touchEndListener;
     pageX;
     pageY;
-    visible = signal(false, ...(ngDevMode ? [{ debugName: "visible" }] : []));
-    render = signal(false, ...(ngDevMode ? [{ debugName: "render" }] : []));
+    visible = signal(false, { ...(ngDevMode ? { debugName: "visible" } : {}) });
+    render = signal(false, { ...(ngDevMode ? { debugName: "render" } : {}) });
     focused = false;
-    activeItemPath = signal([], ...(ngDevMode ? [{ debugName: "activeItemPath" }] : []));
-    focusedItemInfo = signal({ index: -1, level: 0, parentKey: '', item: null }, ...(ngDevMode ? [{ debugName: "focusedItemInfo" }] : []));
-    submenuVisible = signal(false, ...(ngDevMode ? [{ debugName: "submenuVisible" }] : []));
-    $appendTo = computed(() => this.appendTo() || this.config.overlayAppendTo(), ...(ngDevMode ? [{ debugName: "$appendTo" }] : []));
+    activeItemPath = signal([], { ...(ngDevMode ? { debugName: "activeItemPath" } : {}) });
+    focusedItemInfo = signal({ index: -1, level: 0, parentKey: '', item: null }, { ...(ngDevMode ? { debugName: "focusedItemInfo" } : {}) });
+    submenuVisible = signal(false, { ...(ngDevMode ? { debugName: "submenuVisible" } : {}) });
+    $appendTo = computed(() => this.appendTo() || this.config.overlayAppendTo(), { ...(ngDevMode ? { debugName: "$appendTo" } : {}) });
     searchValue = '';
     searchTimeout;
     _processedItems;
     _model;
     pressTimer;
+    hideCallback;
     matchMediaListener;
     query;
-    queryMatches;
+    queryMatches = signal(false, { ...(ngDevMode ? { debugName: "queryMatches" } : {}) });
     _componentStyle = inject(ContextMenuStyle);
     get visibleItems() {
         const processedItem = this.activeItemPath().find((p) => p.key === this.focusedItemInfo().parentKey);
@@ -841,12 +894,12 @@ class ContextMenu extends BaseComponent {
         }
     }
     /**
-     * Defines template option for item.
+     * Custom item template.
      * @group Templates
      */
     itemTemplate;
     /**
-     * Defines template option for submenuIcon.
+     * Custom submenu icon template.
      * @group Templates
      */
     submenuIconTemplate;
@@ -904,9 +957,10 @@ class ContextMenu extends BaseComponent {
             if (!this.matchMediaListener) {
                 const query = window.matchMedia(`(max-width: ${this.breakpoint})`);
                 this.query = query;
-                this.queryMatches = query.matches;
+                this.queryMatches.set(query.matches);
                 this.matchMediaListener = () => {
-                    this.queryMatches = query.matches;
+                    this.queryMatches.set(query.matches);
+                    this.cd.markForCheck();
                 };
                 query.addEventListener('change', this.matchMediaListener);
             }
@@ -1113,7 +1167,7 @@ class ContextMenu extends BaseComponent {
         }
         this.focusedItemInfo.set({ index, level, parentKey, item: processedItem.item });
         isFocus && focus(this.rootmenu?.sublistViewChild?.nativeElement);
-        if (type === 'hover' && this.queryMatches) {
+        if (type === 'hover' && this.queryMatches()) {
             return;
         }
         this.activeItemPath.set(activeItemPath);
@@ -1130,20 +1184,18 @@ class ContextMenu extends BaseComponent {
     }
     onBeforeEnter(event) {
         this.container = event.element;
-        this.position();
+        this.appendOverlay();
         this.moveOnTop();
+        this.position();
         this.$attrSelector && this.container?.setAttribute(this.$attrSelector, '');
-        this.appendOverlay();
     }
     onAfterEnter() {
         this.bindGlobalListeners();
         focus(this.rootmenu?.sublistViewChild?.nativeElement);
     }
-    onBeforeLeave() {
+    onAfterLeave() {
         this.restoreOverlayAppend();
         this.onOverlayHide();
-    }
-    onAfterLeave() {
         this.handleSubmenuAfterLeave?.();
         this.render.set(false);
     }
@@ -1188,6 +1240,7 @@ class ContextMenu extends BaseComponent {
     hide() {
         this.visible.set(false);
         this.onHide.emit();
+        this.hideCallback?.();
         this.activeItemPath.set([]);
         this.focusedItemInfo.set({ index: -1, level: 0, parentKey: '', item: null });
     }
@@ -1354,8 +1407,8 @@ class ContextMenu extends BaseComponent {
         this.restoreOverlayAppend();
         this.onOverlayHide();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ContextMenu, deps: [{ token: i7.OverlayService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: ContextMenu, isStandalone: true, selector: "p-contextMenu, p-contextmenu, p-context-menu", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: false, isRequired: false, transformFunction: null }, triggerEvent: { classPropertyName: "triggerEvent", publicName: "triggerEvent", isSignal: false, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: false, isRequired: false, transformFunction: null }, global: { classPropertyName: "global", publicName: "global", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, style: { classPropertyName: "style", publicName: "style", isSignal: false, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: false, isRequired: false, transformFunction: null }, autoZIndex: { classPropertyName: "autoZIndex", publicName: "autoZIndex", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, baseZIndex: { classPropertyName: "baseZIndex", publicName: "baseZIndex", isSignal: false, isRequired: false, transformFunction: numberAttribute }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, breakpoint: { classPropertyName: "breakpoint", publicName: "breakpoint", isSignal: false, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: false, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: false, isRequired: false, transformFunction: null }, pressDelay: { classPropertyName: "pressDelay", publicName: "pressDelay", isSignal: false, isRequired: false, transformFunction: numberAttribute }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null }, motionOptions: { classPropertyName: "motionOptions", publicName: "motionOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onShow: "onShow", onHide: "onHide" }, providers: [ContextMenuStyle, { provide: CONTEXTMENU_INSTANCE, useExisting: ContextMenu }], queries: [{ propertyName: "itemTemplate", first: true, predicate: ["item"] }, { propertyName: "submenuIconTemplate", first: true, predicate: ["submenuicon"] }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "rootmenu", first: true, predicate: ["rootmenu"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ContextMenu, deps: [{ token: i7.OverlayService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: ContextMenu, isStandalone: true, selector: "p-contextMenu, p-contextmenu, p-context-menu", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: false, isRequired: false, transformFunction: null }, triggerEvent: { classPropertyName: "triggerEvent", publicName: "triggerEvent", isSignal: false, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: false, isRequired: false, transformFunction: null }, global: { classPropertyName: "global", publicName: "global", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, style: { classPropertyName: "style", publicName: "style", isSignal: false, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: false, isRequired: false, transformFunction: null }, autoZIndex: { classPropertyName: "autoZIndex", publicName: "autoZIndex", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, baseZIndex: { classPropertyName: "baseZIndex", publicName: "baseZIndex", isSignal: false, isRequired: false, transformFunction: numberAttribute }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, breakpoint: { classPropertyName: "breakpoint", publicName: "breakpoint", isSignal: false, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: false, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: false, isRequired: false, transformFunction: null }, pressDelay: { classPropertyName: "pressDelay", publicName: "pressDelay", isSignal: false, isRequired: false, transformFunction: numberAttribute }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null }, motionOptions: { classPropertyName: "motionOptions", publicName: "motionOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onShow: "onShow", onHide: "onHide" }, providers: [ContextMenuStyle, { provide: CONTEXTMENU_INSTANCE, useExisting: ContextMenu }], queries: [{ propertyName: "itemTemplate", first: true, predicate: ["item"] }, { propertyName: "submenuIconTemplate", first: true, predicate: ["submenuicon"] }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "rootmenu", first: true, predicate: ["rootmenu"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
         @if (render()) {
             <div
                 #container
@@ -1370,7 +1423,6 @@ class ContextMenu extends BaseComponent {
                 [pMotionOptions]="computedMotionOptions()"
                 (pMotionOnBeforeEnter)="onBeforeEnter($event)"
                 (pMotionOnAfterEnter)="onAfterEnter()"
-                (pMotionOnBeforeLeave)="onBeforeLeave()"
                 (pMotionOnAfterLeave)="onAfterLeave()"
             >
                 <p-contextmenu-sub
@@ -1399,7 +1451,7 @@ class ContextMenu extends BaseComponent {
         }
     `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ContextMenuSub, selector: "p-contextMenuSub, p-contextmenu-sub", inputs: ["visible", "items", "itemTemplate", "root", "autoZIndex", "baseZIndex", "popup", "menuId", "ariaLabel", "ariaLabelledBy", "level", "focusedItemId", "activeItemPath", "motionOptions", "tabindex"], outputs: ["itemClick", "itemMouseEnter", "menuFocus", "menuBlur", "menuKeydown"] }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i4.Bind, selector: "[pBind]", inputs: ["pBind"] }, { kind: "ngmodule", type: BadgeModule }, { kind: "ngmodule", type: SharedModule }, { kind: "ngmodule", type: BindModule }, { kind: "ngmodule", type: MotionModule }, { kind: "directive", type: i6.MotionDirective, selector: "[pMotion]", inputs: ["pMotion", "pMotionName", "pMotionType", "pMotionSafe", "pMotionDisabled", "pMotionAppear", "pMotionEnter", "pMotionLeave", "pMotionDuration", "pMotionHideStrategy", "pMotionEnterFromClass", "pMotionEnterToClass", "pMotionEnterActiveClass", "pMotionLeaveFromClass", "pMotionLeaveToClass", "pMotionLeaveActiveClass", "pMotionOptions"], outputs: ["pMotionOnBeforeEnter", "pMotionOnEnter", "pMotionOnAfterEnter", "pMotionOnEnterCancelled", "pMotionOnBeforeLeave", "pMotionOnLeave", "pMotionOnAfterLeave", "pMotionOnLeaveCancelled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ContextMenu, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ContextMenu, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-contextMenu, p-contextmenu, p-context-menu',
@@ -1420,7 +1472,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
                 [pMotionOptions]="computedMotionOptions()"
                 (pMotionOnBeforeEnter)="onBeforeEnter($event)"
                 (pMotionOnAfterEnter)="onAfterEnter()"
-                (pMotionOnBeforeLeave)="onBeforeLeave()"
                 (pMotionOnAfterLeave)="onAfterLeave()"
             >
                 <p-contextmenu-sub
@@ -1500,11 +1551,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
                 args: [PrimeTemplate]
             }] } });
 class ContextMenuModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ContextMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.0", ngImport: i0, type: ContextMenuModule, imports: [ContextMenu, SharedModule], exports: [ContextMenu, SharedModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ContextMenuModule, imports: [ContextMenu, SharedModule, SharedModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ContextMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.1", ngImport: i0, type: ContextMenuModule, imports: [ContextMenu, SharedModule], exports: [ContextMenu, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ContextMenuModule, imports: [ContextMenu, SharedModule, SharedModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ContextMenuModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ContextMenuModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [ContextMenu, SharedModule],