primeng 20.3.0 → 21.0.0-rc.1

package/fesm2022/primeng-megamenu.mjs

@@ -27,7 +27,7 @@ const classes = {
     root: ({ instance }) => [
         'p-megamenu p-component',
         {
-            'p-megamenu-mobile': instance.queryMatches,
+            'p-megamenu-mobile': instance.queryMatches(),
             'p-megamenu-mobile-active': instance.mobileActive,
             'p-megamenu-horizontal': instance.orientation === 'horizontal',
             'p-megamenu-vertical': instance.orientation === 'vertical'
@@ -62,7 +62,7 @@ const classes = {
     column: ({ instance, processedItem }) => {
         let length = instance.isItemGroup(processedItem) ? processedItem.items.length : 0;
         let columnClass;
-        if (instance.megaMenu.queryMatches)
+        if (instance.megaMenu.queryMatches())
             columnClass = 'p-megamenu-col-12';
         else {
             switch (length) {
@@ -94,10 +94,10 @@ class MegaMenuStyle extends BaseStyle {
     style = style;
     classes = classes;
     inlineStyles = inlineStyles;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: MegaMenuStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: MegaMenuStyle });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MegaMenuStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MegaMenuStyle });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: MegaMenuStyle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MegaMenuStyle, decorators: [{
             type: Injectable
         }] });
 /**
@@ -209,6 +209,7 @@ class MegaMenuSub extends BaseComponent {
     menuFocus = new EventEmitter();
     menuBlur = new EventEmitter();
     menuKeydown = new EventEmitter();
+    menuMouseDown = new EventEmitter();
     megaMenu = inject(forwardRef(() => MegaMenu));
     _componentStyle = inject(MegaMenuStyle);
     onAfterViewChecked() {
@@ -275,8 +276,8 @@ class MegaMenuSub extends BaseComponent {
         };
         return this.ptm(key, ptContext);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: MegaMenuSub, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: MegaMenuSub, isStandalone: true, selector: "p-megaMenuSub, p-megamenu-sub, ul[pMegaMenuSub]", inputs: { id: "id", items: "items", itemTemplate: "itemTemplate", menuId: "menuId", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", level: ["level", "level", numberAttribute], focusedItemId: "focusedItemId", disabled: ["disabled", "disabled", booleanAttribute], orientation: "orientation", activeItem: "activeItem", submenu: "submenu", queryMatches: ["queryMatches", "queryMatches", booleanAttribute], mobileActive: ["mobileActive", "mobileActive", booleanAttribute], scrollHeight: "scrollHeight", tabindex: ["tabindex", "tabindex", numberAttribute], root: ["root", "root", booleanAttribute] }, outputs: { itemClick: "itemClick", itemMouseEnter: "itemMouseEnter", menuFocus: "menuFocus", menuBlur: "menuBlur", menuKeydown: "menuKeydown" }, host: { listeners: { "keydown": "menuKeydown.emit($event)", "focus": "menuFocus.emit($event)", "blur": "menuBlur.emit($event)" }, properties: { "class": "root ? cx(\"rootList\") : cx(\"submenu\")", "style": "sx(\"rootList\")", "style.display": "isSubmenuVisible(submenu) ? null : \"none\"", "attr.role": "root ? \"menubar\" : \"menu\"", "attr.id": "id", "attr.aria-orientation": "orientation", "tabindex": "tabindex", "attr.aria-activedescendant": "focusedItemId", "attr.data-pc-section": "root ? \"rootlist\" : \"submenu\"" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MegaMenuSub, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: MegaMenuSub, isStandalone: true, selector: "p-megaMenuSub, p-megamenu-sub, ul[pMegaMenuSub]", inputs: { id: "id", items: "items", itemTemplate: "itemTemplate", menuId: "menuId", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", level: ["level", "level", numberAttribute], focusedItemId: "focusedItemId", disabled: ["disabled", "disabled", booleanAttribute], orientation: "orientation", activeItem: "activeItem", submenu: "submenu", queryMatches: ["queryMatches", "queryMatches", booleanAttribute], mobileActive: ["mobileActive", "mobileActive", booleanAttribute], scrollHeight: "scrollHeight", tabindex: ["tabindex", "tabindex", numberAttribute], root: ["root", "root", booleanAttribute] }, outputs: { itemClick: "itemClick", itemMouseEnter: "itemMouseEnter", menuFocus: "menuFocus", menuBlur: "menuBlur", menuKeydown: "menuKeydown", menuMouseDown: "menuMouseDown" }, host: { listeners: { "keydown": "menuKeydown.emit($event)", "focus": "menuFocus.emit($event)", "blur": "menuBlur.emit($event)", "mousedown": "menuMouseDown.emit($event)" }, properties: { "class": "root ? cx(\"rootList\") : cx(\"submenu\")", "style": "sx(\"rootList\")", "style.display": "isSubmenuVisible(submenu) ? null : \"none\"", "attr.role": "root ? \"menubar\" : \"menu\"", "attr.id": "id", "attr.aria-orientation": "orientation", "tabindex": "tabindex", "attr.aria-activedescendant": "focusedItemId", "attr.data-pc-section": "root ? \"rootlist\" : \"submenu\"" } }, providers: [
             { provide: MEGAMENU_SUB_INSTANCE, useExisting: MegaMenuSub },
             { provide: PARENT_INSTANCE, useExisting: MegaMenuSub }
         ], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `
@@ -312,6 +313,7 @@ class MegaMenuSub extends BaseComponent {
                 pTooltip
                 [tooltipOptions]="getItemProp(processedItem, 'tooltipOptions')"
                 [pBind]="getPTOptions(processedItem, index, 'item')"
+                [pTooltipUnstyled]="unstyled()"
             >
                 <div [class]="cx('itemContent')" [pBind]="getPTOptions(processedItem, index, 'itemContent')" (click)="onItemClick($event, processedItem)" (mouseenter)="onItemMouseEnter({ $event, processedItem })">
                     <ng-container *ngIf="!itemTemplate">
@@ -319,27 +321,39 @@ class MegaMenuSub 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')"
                                 [attr.tabindex]="-1"
                                 [pBind]="getPTOptions(processedItem, index, 'itemIcon')"
                             >
                             </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')" />
+                            <p-badge *ngIf="getItemProp(processedItem, 'badge')" [class]="getItemProp(processedItem, 'badgeStyleClass')" [value]="getItemProp(processedItem, 'badge')" [unstyled]="unstyled()" />
                             <ng-container *ngIf="isItemGroup(processedItem)">
                                 <ng-container *ngIf="!megaMenu.submenuIconTemplate && !megaMenu._submenuIconTemplate">
                                     @if (orientation === 'horizontal' || mobileActive) {
@@ -355,12 +369,14 @@ class MegaMenuSub 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')"
                             [routerLinkActive]="'p-megamenu-item-link-active'"
                             [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')"
@@ -371,15 +387,28 @@ class MegaMenuSub extends BaseComponent {
                             pRipple
                         >
                             <span
-                                [class]="cn(cx('itemIcon'), getItemProp(processedItem, 'icon'))"
+                                [class]="cn(cx('itemIcon'), getItemProp(processedItem, 'icon'), getItemProp(processedItem, 'iconClass'))"
                                 *ngIf="getItemProp(processedItem, 'icon')"
                                 [ngStyle]="getItemProp(processedItem, 'iconStyle')"
                                 [attr.tabindex]="-1"
                                 [pBind]="getPTOptions(processedItem, index, 'itemIcon')"
                             ></span>
-                            <span [class]="cx('itemLabel')" *ngIf="getItemProp(processedItem, 'escape'); else htmlRouteLabel" [pBind]="getPTOptions(processedItem, index, 'itemLabel')">{{ getItemLabel(processedItem) }}</span>
-                            <ng-template #htmlRouteLabel><span [class]="cx('itemLabel')" [innerHTML]="getItemLabel(processedItem)" [pBind]="getPTOptions(processedItem, index, 'itemLabel')"></span></ng-template>
-                            <p-badge *ngIf="getItemProp(processedItem, 'badge')" [styleClass]="getItemProp(processedItem, 'badgeStyleClass')" [value]="getItemProp(processedItem, 'badge')" />
+                            <span
+                                [class]="cn(cx('itemLabel'), getItemProp(processedItem, 'labelClass'))"
+                                [ngStyle]="getItemProp(processedItem, 'labelStyle')"
+                                *ngIf="getItemProp(processedItem, 'escape'); else htmlRouteLabel"
+                                [pBind]="getPTOptions(processedItem, index, 'itemLabel')"
+                                >{{ getItemLabel(processedItem) }}</span
+                            >
+                            <ng-template #htmlRouteLabel
+                                ><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')" [styleClass]="getItemProp(processedItem, 'badgeStyleClass')" [value]="getItemProp(processedItem, 'badge')" [unstyled]="unstyled()" />
                             <ng-container *ngIf="isItemGroup(processedItem)">
                                 <ng-container *ngIf="!megaMenu.submenuIconTemplate && !megaMenu._submenuIconTemplate">
                                     <svg data-p-icon="angle-down" [class]="cx('submenuIcon')" [pBind]="getPTOptions(processedItem, index, 'submenuIcon')" *ngIf="orientation === 'horizontal'" [attr.aria-hidden]="true" />
@@ -411,15 +440,16 @@ class MegaMenuSub extends BaseComponent {
                                 (itemClick)="itemClick.emit($event)"
                                 (itemMouseEnter)="onItemMouseEnter($event)"
                                 [pt]="pt()"
+                                [unstyled]="unstyled()"
                             ></ul>
                         </div>
                     </div>
                 </div>
             </li>
         </ng-template>
-    `, isInline: true, dependencies: [{ kind: "component", type: MegaMenuSub, selector: "p-megaMenuSub, p-megamenu-sub, ul[pMegaMenuSub]", inputs: ["id", "items", "itemTemplate", "menuId", "ariaLabel", "ariaLabelledBy", "level", "focusedItemId", "disabled", "orientation", "activeItem", "submenu", "queryMatches", "mobileActive", "scrollHeight", "tabindex", "root"], outputs: ["itemClick", "itemMouseEnter", "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: "directive", type: Ripple, selector: "[pRipple]" }, { 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: AngleDownIcon, selector: "[data-p-icon=\"angle-down\"]" }, { 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 }], encapsulation: i0.ViewEncapsulation.None });
+    `, isInline: true, dependencies: [{ kind: "component", type: MegaMenuSub, selector: "p-megaMenuSub, p-megamenu-sub, ul[pMegaMenuSub]", inputs: ["id", "items", "itemTemplate", "menuId", "ariaLabel", "ariaLabelledBy", "level", "focusedItemId", "disabled", "orientation", "activeItem", "submenu", "queryMatches", "mobileActive", "scrollHeight", "tabindex", "root"], outputs: ["itemClick", "itemMouseEnter", "menuFocus", "menuBlur", "menuKeydown", "menuMouseDown"] }, { 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: "directive", type: Ripple, selector: "[pRipple]" }, { 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", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "directive", type: i1.Bind, selector: "[pBind]", inputs: ["pBind"] }, { kind: "component", type: AngleDownIcon, selector: "[data-p-icon=\"angle-down\"]" }, { 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 }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: MegaMenuSub, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MegaMenuSub, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-megaMenuSub, p-megamenu-sub, ul[pMegaMenuSub]',
@@ -458,6 +488,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 pTooltip
                 [tooltipOptions]="getItemProp(processedItem, 'tooltipOptions')"
                 [pBind]="getPTOptions(processedItem, index, 'item')"
+                [pTooltipUnstyled]="unstyled()"
             >
                 <div [class]="cx('itemContent')" [pBind]="getPTOptions(processedItem, index, 'itemContent')" (click)="onItemClick($event, processedItem)" (mouseenter)="onItemMouseEnter({ $event, processedItem })">
                     <ng-container *ngIf="!itemTemplate">
@@ -465,27 +496,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", 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')"
                                 [attr.tabindex]="-1"
                                 [pBind]="getPTOptions(processedItem, index, 'itemIcon')"
                             >
                             </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')" />
+                            <p-badge *ngIf="getItemProp(processedItem, 'badge')" [class]="getItemProp(processedItem, 'badgeStyleClass')" [value]="getItemProp(processedItem, 'badge')" [unstyled]="unstyled()" />
                             <ng-container *ngIf="isItemGroup(processedItem)">
                                 <ng-container *ngIf="!megaMenu.submenuIconTemplate && !megaMenu._submenuIconTemplate">
                                     @if (orientation === 'horizontal' || mobileActive) {
@@ -501,12 +544,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", 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')"
                             [routerLinkActive]="'p-megamenu-item-link-active'"
                             [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')"
@@ -517,15 +562,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                             pRipple
                         >
                             <span
-                                [class]="cn(cx('itemIcon'), getItemProp(processedItem, 'icon'))"
+                                [class]="cn(cx('itemIcon'), getItemProp(processedItem, 'icon'), getItemProp(processedItem, 'iconClass'))"
                                 *ngIf="getItemProp(processedItem, 'icon')"
                                 [ngStyle]="getItemProp(processedItem, 'iconStyle')"
                                 [attr.tabindex]="-1"
                                 [pBind]="getPTOptions(processedItem, index, 'itemIcon')"
                             ></span>
-                            <span [class]="cx('itemLabel')" *ngIf="getItemProp(processedItem, 'escape'); else htmlRouteLabel" [pBind]="getPTOptions(processedItem, index, 'itemLabel')">{{ getItemLabel(processedItem) }}</span>
-                            <ng-template #htmlRouteLabel><span [class]="cx('itemLabel')" [innerHTML]="getItemLabel(processedItem)" [pBind]="getPTOptions(processedItem, index, 'itemLabel')"></span></ng-template>
-                            <p-badge *ngIf="getItemProp(processedItem, 'badge')" [styleClass]="getItemProp(processedItem, 'badgeStyleClass')" [value]="getItemProp(processedItem, 'badge')" />
+                            <span
+                                [class]="cn(cx('itemLabel'), getItemProp(processedItem, 'labelClass'))"
+                                [ngStyle]="getItemProp(processedItem, 'labelStyle')"
+                                *ngIf="getItemProp(processedItem, 'escape'); else htmlRouteLabel"
+                                [pBind]="getPTOptions(processedItem, index, 'itemLabel')"
+                                >{{ getItemLabel(processedItem) }}</span
+                            >
+                            <ng-template #htmlRouteLabel
+                                ><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')" [styleClass]="getItemProp(processedItem, 'badgeStyleClass')" [value]="getItemProp(processedItem, 'badge')" [unstyled]="unstyled()" />
                             <ng-container *ngIf="isItemGroup(processedItem)">
                                 <ng-container *ngIf="!megaMenu.submenuIconTemplate && !megaMenu._submenuIconTemplate">
                                     <svg data-p-icon="angle-down" [class]="cx('submenuIcon')" [pBind]="getPTOptions(processedItem, index, 'submenuIcon')" *ngIf="orientation === 'horizontal'" [attr.aria-hidden]="true" />
@@ -557,6 +615,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                                 (itemClick)="itemClick.emit($event)"
                                 (itemMouseEnter)="onItemMouseEnter($event)"
                                 [pt]="pt()"
+                                [unstyled]="unstyled()"
                             ></ul>
                         </div>
                     </div>
@@ -581,7 +640,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                         '[attr.data-pc-section]': 'root ? "rootlist" : "submenu"',
                         '(keydown)': 'menuKeydown.emit($event)',
                         '(focus)': 'menuFocus.emit($event)',
-                        '(blur)': 'menuBlur.emit($event)'
+                        '(blur)': 'menuBlur.emit($event)',
+                        '(mousedown)': 'menuMouseDown.emit($event)'
                     },
                     hostDirectives: [Bind]
                 }]
@@ -635,6 +695,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 type: Output
             }], menuKeydown: [{
                 type: Output
+            }], menuMouseDown: [{
+                type: Output
             }] } });
 /**
  * MegaMenu is navigation component that displays submenus together.
@@ -720,7 +782,9 @@ class MegaMenu extends BaseComponent {
      */
     submenuIconTemplate;
     /**
-     * Defines template option for submenu icon.
+     * Custom item template.
+     * @param {MegaMenuItemTemplateContext} context - item context.
+     * @see {@link MegaMenuItemTemplateContext}
      * @group Templates
      */
     itemTemplate;
@@ -748,8 +812,8 @@ class MegaMenu extends BaseComponent {
     resizeListener;
     dirty = false;
     focused = false;
-    activeItem = signal(null, ...(ngDevMode ? [{ debugName: "activeItem" }] : []));
-    focusedItemInfo = signal({ index: -1, level: 0, parentKey: '', item: null }, ...(ngDevMode ? [{ debugName: "focusedItemInfo" }] : []));
+    activeItem = signal(null, { ...(ngDevMode ? { debugName: "activeItem" } : {}) });
+    focusedItemInfo = signal({ index: -1, level: 0, parentKey: '', item: null }, { ...(ngDevMode ? { debugName: "focusedItemInfo" } : {}) });
     searchValue = '';
     searchTimeout;
     _processedItems;
@@ -757,7 +821,7 @@ class MegaMenu extends BaseComponent {
     _componentStyle = inject(MegaMenuStyle);
     matchMediaListener;
     query;
-    queryMatches = false;
+    queryMatches = signal(false, { ...(ngDevMode ? { debugName: "queryMatches" } : {}) });
     mobileActive = false;
     get visibleItems() {
         const processedItem = isNotEmpty(this.activeItem()) ? this.activeItem() : null;
@@ -838,9 +902,9 @@ class MegaMenu 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.mobileActive = false;
                     this.cd.markForCheck();
                 };
@@ -880,6 +944,7 @@ class MegaMenu extends BaseComponent {
         return item ? resolve(item[name]) : undefined;
     }
     onItemClick(event) {
+        this.dirty = true;
         const { originalEvent, processedItem } = event;
         const grouped = this.isProcessedItemGroup(processedItem);
         const root = isEmpty(processedItem.parent);
@@ -936,7 +1001,7 @@ class MegaMenu extends BaseComponent {
     scrollInView(index = -1) {
         const id = index !== -1 ? `${this.id}_${index}` : this.focusedItemId;
         let element;
-        if (id === null && this.queryMatches) {
+        if (id === null && this.queryMatches()) {
             element = this.menubuttonViewChild?.nativeElement;
         }
         else {
@@ -972,19 +1037,34 @@ class MegaMenu extends BaseComponent {
         isFocus && focus(this.rootmenu?.el?.nativeElement);
         this.dirty = false;
     }
+    onMenuMouseDown(event) {
+        this.dirty = true;
+    }
     onMenuFocus(event) {
         this.focused = true;
-        if (this.focusedItemInfo().index === -1) {
+        const relatedTarget = event.relatedTarget;
+        const isFromOutside = !relatedTarget || !this.el.nativeElement.contains(relatedTarget);
+        if (isFromOutside && this.focusedItemInfo().index === -1 && isEmpty(this.activeItem()) && !this.dirty) {
             const index = this.findFirstFocusedItemIndex();
             const processedItem = this.findVisibleItem(index);
             this.focusedItemInfo.set({ index, key: processedItem.key, parentKey: processedItem.parentKey, item: processedItem.item });
         }
     }
     onMenuBlur(event) {
-        this.focused = false;
-        this.focusedItemInfo.set({ index: -1, level: 0, parentKey: '', item: null });
-        this.searchValue = '';
-        this.dirty = false;
+        const relatedTarget = event.relatedTarget;
+        if (relatedTarget && this.el.nativeElement.contains(relatedTarget)) {
+            return;
+        }
+        setTimeout(() => {
+            const activeElement = this.document.activeElement;
+            if (activeElement && this.el.nativeElement.contains(activeElement)) {
+                return;
+            }
+            this.focused = false;
+            this.focusedItemInfo.set({ index: -1, level: 0, parentKey: '', item: null });
+            this.searchValue = '';
+            this.dirty = false;
+        });
     }
     onKeyDown(event) {
         const metaKey = event.metaKey || event.ctrlKey;
@@ -1314,8 +1394,8 @@ class MegaMenu extends BaseComponent {
         this.unbindResizeListener();
         this.unbindMatchMediaListener();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: MegaMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.3.4", type: MegaMenu, isStandalone: true, selector: "p-megaMenu, p-megamenu, p-mega-menu", inputs: { model: "model", styleClass: "styleClass", orientation: "orientation", id: "id", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", breakpoint: "breakpoint", scrollHeight: "scrollHeight", disabled: ["disabled", "disabled", booleanAttribute], tabindex: ["tabindex", "tabindex", numberAttribute] }, host: { properties: { "class": "cn(cx(\"root\"), styleClass)", "id": "id" } }, providers: [MegaMenuStyle, { provide: MEGAMENU_INSTANCE, useExisting: MegaMenu }, { provide: PARENT_INSTANCE, useExisting: MegaMenu }], queries: [{ propertyName: "startTemplate", first: true, predicate: ["start"] }, { propertyName: "endTemplate", first: true, predicate: ["end"] }, { propertyName: "menuIconTemplate", first: true, predicate: ["menuicon"] }, { propertyName: "submenuIconTemplate", first: true, predicate: ["submenuicon"] }, { propertyName: "itemTemplate", first: true, predicate: ["item"] }, { propertyName: "buttonTemplate", first: true, predicate: ["button"] }, { propertyName: "buttonIconTemplate", first: true, predicate: ["buttonicon"] }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "menubuttonViewChild", first: true, predicate: ["menubutton"], descendants: true }, { propertyName: "rootmenu", first: true, predicate: ["rootmenu"], descendants: true }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MegaMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.0.1", type: MegaMenu, isStandalone: true, selector: "p-megaMenu, p-megamenu, p-mega-menu", inputs: { model: "model", styleClass: "styleClass", orientation: "orientation", id: "id", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", breakpoint: "breakpoint", scrollHeight: "scrollHeight", disabled: ["disabled", "disabled", booleanAttribute], tabindex: ["tabindex", "tabindex", numberAttribute] }, host: { properties: { "class": "cn(cx(\"root\"), styleClass)", "id": "id" } }, providers: [MegaMenuStyle, { provide: MEGAMENU_INSTANCE, useExisting: MegaMenu }, { provide: PARENT_INSTANCE, useExisting: MegaMenu }], queries: [{ propertyName: "startTemplate", first: true, predicate: ["start"] }, { propertyName: "endTemplate", first: true, predicate: ["end"] }, { propertyName: "menuIconTemplate", first: true, predicate: ["menuicon"] }, { propertyName: "submenuIconTemplate", first: true, predicate: ["submenuicon"] }, { propertyName: "itemTemplate", first: true, predicate: ["item"] }, { propertyName: "buttonTemplate", first: true, predicate: ["button"] }, { propertyName: "buttonIconTemplate", first: true, predicate: ["buttonicon"] }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "menubuttonViewChild", first: true, predicate: ["menubutton"], descendants: true }, { propertyName: "rootmenu", first: true, predicate: ["rootmenu"], descendants: true }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `
         <div [class]="cx('start')" *ngIf="startTemplate || _startTemplate" [pBind]="ptm('start')">
             <ng-container *ngTemplateOutlet="startTemplate || _startTemplate"></ng-container>
         </div>
@@ -1360,17 +1440,19 @@ class MegaMenu extends BaseComponent {
             (menuFocus)="onMenuFocus($event)"
             (menuBlur)="onMenuBlur($event)"
             (menuKeydown)="onKeyDown($event)"
+            (menuMouseDown)="onMenuMouseDown($event)"
             (itemMouseEnter)="onItemMouseEnter($event)"
-            [queryMatches]="queryMatches"
+            [queryMatches]="queryMatches()"
             [scrollHeight]="scrollHeight"
             [pt]="pt()"
+            [unstyled]="unstyled()"
         ></ul>
         <div [class]="cx('end')" *ngIf="endTemplate || _endTemplate" [pBind]="ptm('end')">
             <ng-container *ngTemplateOutlet="endTemplate || _endTemplate"></ng-container>
         </div>
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: RouterModule }, { kind: "component", type: MegaMenuSub, selector: "p-megaMenuSub, p-megamenu-sub, ul[pMegaMenuSub]", inputs: ["id", "items", "itemTemplate", "menuId", "ariaLabel", "ariaLabelledBy", "level", "focusedItemId", "disabled", "orientation", "activeItem", "submenu", "queryMatches", "mobileActive", "scrollHeight", "tabindex", "root"], outputs: ["itemClick", "itemMouseEnter", "menuFocus", "menuBlur", "menuKeydown"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i1.Bind, selector: "[pBind]", inputs: ["pBind"] }, { kind: "component", type: BarsIcon, selector: "[data-p-icon=\"bars\"]" }, { kind: "ngmodule", type: BadgeModule }, { kind: "ngmodule", type: SharedModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: RouterModule }, { kind: "component", type: MegaMenuSub, selector: "p-megaMenuSub, p-megamenu-sub, ul[pMegaMenuSub]", inputs: ["id", "items", "itemTemplate", "menuId", "ariaLabel", "ariaLabelledBy", "level", "focusedItemId", "disabled", "orientation", "activeItem", "submenu", "queryMatches", "mobileActive", "scrollHeight", "tabindex", "root"], outputs: ["itemClick", "itemMouseEnter", "menuFocus", "menuBlur", "menuKeydown", "menuMouseDown"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i1.Bind, selector: "[pBind]", inputs: ["pBind"] }, { kind: "component", type: BarsIcon, selector: "[data-p-icon=\"bars\"]" }, { kind: "ngmodule", type: BadgeModule }, { kind: "ngmodule", type: SharedModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: MegaMenu, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MegaMenu, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-megaMenu, p-megamenu, p-mega-menu',
@@ -1421,10 +1503,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
             (menuFocus)="onMenuFocus($event)"
             (menuBlur)="onMenuBlur($event)"
             (menuKeydown)="onKeyDown($event)"
+            (menuMouseDown)="onMenuMouseDown($event)"
             (itemMouseEnter)="onItemMouseEnter($event)"
-            [queryMatches]="queryMatches"
+            [queryMatches]="queryMatches()"
             [scrollHeight]="scrollHeight"
             [pt]="pt()"
+            [unstyled]="unstyled()"
         ></ul>
         <div [class]="cx('end')" *ngIf="endTemplate || _endTemplate" [pBind]="ptm('end')">
             <ng-container *ngTemplateOutlet="endTemplate || _endTemplate"></ng-container>
@@ -1493,11 +1577,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 args: ['rootmenu']
             }] } });
 class MegaMenuModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: MegaMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.4", ngImport: i0, type: MegaMenuModule, imports: [MegaMenu, SharedModule], exports: [MegaMenu, SharedModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: MegaMenuModule, imports: [MegaMenu, SharedModule, SharedModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MegaMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.1", ngImport: i0, type: MegaMenuModule, imports: [MegaMenu, SharedModule], exports: [MegaMenu, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MegaMenuModule, imports: [MegaMenu, SharedModule, SharedModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: MegaMenuModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MegaMenuModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [MegaMenu, SharedModule],