primeng 18.0.0 → 18.0.2

package/fesm2022/primeng-megamenu.mjs

@@ -1,11 +1,11 @@
 import * as i1 from '@angular/common';
 import { CommonModule, isPlatformBrowser } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, EventEmitter, inject, forwardRef, numberAttribute, booleanAttribute, Component, ViewEncapsulation, Input, Output, ViewChild, signal, effect, ChangeDetectionStrategy, ContentChild, NgModule } from '@angular/core';
+import { Injectable, EventEmitter, inject, forwardRef, numberAttribute, booleanAttribute, Component, ViewEncapsulation, Input, Output, ViewChild, signal, effect, ChangeDetectionStrategy, ContentChild, ContentChildren, NgModule } from '@angular/core';
 import * as i2 from '@angular/router';
 import { RouterModule } from '@angular/router';
 import { resolve, isNotEmpty, uuid, isEmpty, focus, findSingle, isPrintableCharacter, findLastIndex, isTouchDevice } from '@primeuix/utils';
-import { SharedModule } from 'primeng/api';
+import { SharedModule, PrimeTemplate } from 'primeng/api';
 import * as i4 from 'primeng/badge';
 import { BadgeModule } from 'primeng/badge';
 import { BaseComponent } from 'primeng/basecomponent';
@@ -600,9 +600,9 @@ function MegaMenuSub_ul_0_ng_template_3_li_1_ng_container_3_a_1_ng_container_6_T
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(6);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !ctx_r1.megaMenu.submenuiconTemplate);
+    i0.ɵɵproperty("ngIf", !ctx_r1.megaMenu.submenuIconTemplate && !ctx_r1.megaMenu._submenuIconTemplate);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.megaMenu.submenuiconTemplate);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.megaMenu.submenuIconTemplate || ctx_r1.megaMenu._submenuIconTemplate);
 } }
 function MegaMenuSub_ul_0_ng_template_3_li_1_ng_container_3_a_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "a", 18);
@@ -692,9 +692,9 @@ function MegaMenuSub_ul_0_ng_template_3_li_1_ng_container_3_a_2_ng_container_6_T
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(6);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !ctx_r1.megaMenu.submenuiconTemplate);
+    i0.ɵɵproperty("ngIf", !ctx_r1.megaMenu.submenuIconTemplate && !ctx_r1.megaMenu._submenuIconTemplate);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.megaMenu.submenuiconTemplate);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.megaMenu.submenuIconTemplate || ctx_r1.megaMenu._submenuIconTemplate);
 } }
 function MegaMenuSub_ul_0_ng_template_3_li_1_ng_container_3_a_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "a", 30);
@@ -847,28 +847,32 @@ function MegaMenu_div_2_Template(rf, ctx) { if (rf & 1) {
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.startTemplate);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.startTemplate || ctx_r1._startTemplate);
 } }
-function MegaMenu_ng_container_3_a_1_ng_container_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementContainerStart(0);
-    i0.ɵɵelement(1, "BarsIcon");
-    i0.ɵɵelementContainerEnd();
+function MegaMenu_ng_container_3_a_1_BarsIcon_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "BarsIcon");
+} }
+function MegaMenu_ng_container_3_a_1_3_ng_template_0_Template(rf, ctx) { }
+function MegaMenu_ng_container_3_a_1_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, MegaMenu_ng_container_3_a_1_3_ng_template_0_Template, 0, 0, "ng-template");
 } }
 function MegaMenu_ng_container_3_a_1_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "a", 11, 2);
     i0.ɵɵlistener("click", function MegaMenu_ng_container_3_a_1_Template_a_click_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.menuButtonClick($event)); })("keydown", function MegaMenu_ng_container_3_a_1_Template_a_keydown_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.menuButtonKeydown($event)); });
-    i0.ɵɵtemplate(2, MegaMenu_ng_container_3_a_1_ng_container_2_Template, 2, 0, "ng-container", 5);
+    i0.ɵɵtemplate(2, MegaMenu_ng_container_3_a_1_BarsIcon_2_Template, 1, 0, "BarsIcon", 5)(3, MegaMenu_ng_container_3_a_1_3_Template, 1, 0, null, 6);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵattribute("aria-haspopup", ctx_r1.model.length && ctx_r1.model.length > 0 ? true : false)("aria-expanded", ctx_r1.mobileActive)("aria-controls", ctx_r1.id)("aria-label", ctx_r1.config.translation.aria.navigation);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngIf", !ctx_r1.buttonTemplate);
+    i0.ɵɵproperty("ngIf", !ctx_r1.buttonIconTemplate && !ctx_r1._buttonIconTemplate);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.buttonIconTemplate || ctx_r1._buttonIconTemplate);
 } }
 function MegaMenu_ng_container_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
-    i0.ɵɵtemplate(1, MegaMenu_ng_container_3_a_1_Template, 3, 5, "a", 10);
+    i0.ɵɵtemplate(1, MegaMenu_ng_container_3_a_1_Template, 4, 6, "a", 10);
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -888,7 +892,7 @@ function MegaMenu_div_7_Template(rf, ctx) { if (rf & 1) {
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.endTemplate);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.endTemplate || ctx_r1._endTemplate);
 } }
 class MegaMenuSub extends BaseComponent {
     id;
@@ -1109,14 +1113,14 @@ class MegaMenuSub extends BaseComponent {
                                 </ng-template>
                                 <p-badge *ngIf="getItemProp(processedItem, 'badge')" [styleClass]="getItemProp(processedItem, 'badgeStyleClass')" [value]="getItemProp(processedItem, 'badge')" />
                                 <ng-container *ngIf="isItemGroup(processedItem)">
-                                    <ng-container *ngIf="!megaMenu.submenuiconTemplate">
+                                    <ng-container *ngIf="!megaMenu.submenuIconTemplate && !megaMenu._submenuIconTemplate">
                                         @if (orientation === 'horizontal' || mobileActive) {
                                             <AngleDownIcon [ngClass]="'p-megamenu-submenu-icon'" [attr.data-pc-section]="'submenuicon'" [attr.aria-hidden]="true" />
                                         } @else {
                                             <AngleRightIcon [ngClass]="'p-megamenu-submenu-icon'" [attr.data-pc-section]="'submenuicon'" *ngIf="orientation === 'vertical'" [attr.aria-hidden]="true" />
                                         }
                                     </ng-container>
-                                    <ng-template *ngTemplateOutlet="megaMenu.submenuiconTemplate" [attr.data-pc-section]="'submenuicon'" [attr.aria-hidden]="true"></ng-template>
+                                    <ng-template *ngTemplateOutlet="megaMenu.submenuIconTemplate || megaMenu._submenuIconTemplate" [attr.data-pc-section]="'submenuicon'" [attr.aria-hidden]="true"></ng-template>
                                 </ng-container>
                             </a>
                             <a
@@ -1152,11 +1156,11 @@ class MegaMenuSub extends BaseComponent {
                                 <ng-template #htmlRouteLabel><span class="p-megamenu-item-label" [innerHTML]="getItemLabel(processedItem)" [attr.data-pc-section]="'label'"></span></ng-template>
                                 <p-badge *ngIf="getItemProp(processedItem, 'badge')" [styleClass]="getItemProp(processedItem, 'badgeStyleClass')" [value]="getItemProp(processedItem, 'badge')" />
                                 <ng-container *ngIf="isItemGroup(processedItem)">
-                                    <ng-container *ngIf="!megaMenu.submenuiconTemplate">
+                                    <ng-container *ngIf="!megaMenu.submenuIconTemplate && !megaMenu._submenuIconTemplate">
                                         <AngleDownIcon [styleClass]="'p-megamenu-submenu-icon'" [attr.data-pc-section]="'submenuicon'" *ngIf="orientation === 'horizontal'" [attr.aria-hidden]="true" />
                                         <AngleRightIcon [styleClass]="'p-megamenu-submenu-icon'" [attr.data-pc-section]="'submenuicon'" *ngIf="orientation === 'vertical'" [attr.aria-hidden]="true" />
                                     </ng-container>
-                                    <ng-template *ngTemplateOutlet="megaMenu.submenuiconTemplate" [attr.data-pc-section]="'submenuicon'" [attr.aria-hidden]="true"></ng-template>
+                                    <ng-template *ngTemplateOutlet="megaMenu.submenuIconTemplate || megaMenu._submenuIconTemplate" [attr.data-pc-section]="'submenuicon'" [attr.aria-hidden]="true"></ng-template>
                                 </ng-container>
                             </a>
                         </ng-container>
@@ -1326,12 +1330,12 @@ class MegaMenu extends BaseComponent {
      * Defines template option for menu icon.
      * @group Templates
      */
-    menuiconTemplate;
+    menuIconTemplate;
     /**
      * Defines template option for submenu icon.
      * @group Templates
      */
-    submenuiconTemplate;
+    submenuIconTemplate;
     /**
      * Defines template option for submenu icon.
      * @group Templates
@@ -1346,10 +1350,18 @@ class MegaMenu extends BaseComponent {
      * Custom menu button icon template on responsive mode.
      * @group Templates
      */
-    buttoniconTemplate;
+    buttonIconTemplate;
+    templates;
     menubuttonViewChild;
     rootmenu;
     container;
+    _startTemplate;
+    _endTemplate;
+    _menuIconTemplate;
+    _submenuIconTemplate;
+    _itemTemplate;
+    _buttonTemplate;
+    _buttonIconTemplate;
     outsideClickListener;
     resizeListener;
     dirty = false;
@@ -1407,6 +1419,36 @@ class MegaMenu extends BaseComponent {
         this.bindMatchMediaListener();
         this.id = this.id || uuid('pn_id_');
     }
+    ngAfterContentInit() {
+        this.templates?.forEach((item) => {
+            switch (item.getType()) {
+                case 'start':
+                    this._startTemplate = item.template;
+                    break;
+                case 'end':
+                    this._endTemplate = item.template;
+                    break;
+                case 'menuicon':
+                    this._menuIconTemplate = item.template;
+                    break;
+                case 'submenuicon':
+                    this._submenuIconTemplate = item.template;
+                    break;
+                case 'item':
+                    this._itemTemplate = item.template;
+                    break;
+                case 'button':
+                    this._buttonTemplate = item.template;
+                    break;
+                case 'buttonicon':
+                    this._buttonIconTemplate = item.template;
+                    break;
+                default:
+                    this._itemTemplate = item.template;
+                    break;
+            }
+        });
+    }
     bindMatchMediaListener() {
         if (isPlatformBrowser(this.platformId)) {
             if (!this.matchMediaListener) {
@@ -1889,22 +1931,24 @@ class MegaMenu extends BaseComponent {
     }
     static ɵfac = function MegaMenu_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MegaMenu)(); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MegaMenu, selectors: [["p-megaMenu"], ["p-megamenu"], ["p-mega-menu"]], contentQueries: function MegaMenu_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
-            i0.ɵɵcontentQuery(dirIndex, _c6, 5);
-            i0.ɵɵcontentQuery(dirIndex, _c7, 5);
-            i0.ɵɵcontentQuery(dirIndex, _c8, 5);
-            i0.ɵɵcontentQuery(dirIndex, _c9, 5);
-            i0.ɵɵcontentQuery(dirIndex, _c10, 5);
-            i0.ɵɵcontentQuery(dirIndex, _c11, 5);
-            i0.ɵɵcontentQuery(dirIndex, _c12, 5);
+            i0.ɵɵcontentQuery(dirIndex, _c6, 4);
+            i0.ɵɵcontentQuery(dirIndex, _c7, 4);
+            i0.ɵɵcontentQuery(dirIndex, _c8, 4);
+            i0.ɵɵcontentQuery(dirIndex, _c9, 4);
+            i0.ɵɵcontentQuery(dirIndex, _c10, 4);
+            i0.ɵɵcontentQuery(dirIndex, _c11, 4);
+            i0.ɵɵcontentQuery(dirIndex, _c12, 4);
+            i0.ɵɵcontentQuery(dirIndex, PrimeTemplate, 4);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.startTemplate = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.endTemplate = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.menuiconTemplate = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.submenuiconTemplate = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.menuIconTemplate = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.submenuIconTemplate = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.itemTemplate = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.buttonTemplate = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.buttoniconTemplate = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.buttonIconTemplate = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.templates = _t);
         } }, viewQuery: function MegaMenu_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(_c13, 5);
             i0.ɵɵviewQuery(_c14, 5);
@@ -1929,16 +1973,16 @@ class MegaMenu extends BaseComponent {
             i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction4(31, _c17, ctx.queryMatches, ctx.mobileActive, ctx.orientation == "horizontal", ctx.orientation == "vertical"))("ngStyle", ctx.style);
             i0.ɵɵattribute("data-pc-section", "root")("data-pc-name", "megamenu")("id", ctx.id);
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("ngIf", ctx.startTemplate);
+            i0.ɵɵproperty("ngIf", ctx.startTemplate || ctx._startTemplate);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", !ctx.buttonTemplate);
+            i0.ɵɵproperty("ngIf", !ctx.buttonTemplate && !ctx._buttonTemplate);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngTemplateOutlet", ctx.buttonTemplate);
+            i0.ɵɵproperty("ngTemplateOutlet", ctx.buttonTemplate || ctx._buttonTemplate);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("itemTemplate", ctx.itemTemplate)("items", ctx.processedItems)("menuId", ctx.id)("root", true)("orientation", ctx.orientation)("ariaLabel", ctx.ariaLabel)("disabled", ctx.disabled)("tabindex", !ctx.disabled ? ctx.tabindex : -1)("activeItem", ctx.activeItem())("level", 0)("ariaLabelledBy", ctx.ariaLabelledBy)("focusedItemId", ctx.focused ? ctx.focusedItemId : undefined)("mobileActive", ctx.mobileActive)("queryMatches", ctx.queryMatches)("scrollHeight", ctx.scrollHeight);
+            i0.ɵɵproperty("itemTemplate", ctx.itemTemplate || ctx._itemTemplate)("items", ctx.processedItems)("menuId", ctx.id)("root", true)("orientation", ctx.orientation)("ariaLabel", ctx.ariaLabel)("disabled", ctx.disabled)("tabindex", !ctx.disabled ? ctx.tabindex : -1)("activeItem", ctx.activeItem())("level", 0)("ariaLabelledBy", ctx.ariaLabelledBy)("focusedItemId", ctx.focused ? ctx.focusedItemId : undefined)("mobileActive", ctx.mobileActive)("queryMatches", ctx.queryMatches)("scrollHeight", ctx.scrollHeight);
             i0.ɵɵattribute("id", ctx.id + "_list");
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("ngIf", ctx.endTemplate);
+            i0.ɵɵproperty("ngIf", ctx.endTemplate || ctx._endTemplate);
         } }, dependencies: [CommonModule, i1.NgClass, i1.NgIf, i1.NgTemplateOutlet, i1.NgStyle, RouterModule, MegaMenuSub, TooltipModule, BarsIcon, BadgeModule, SharedModule], encapsulation: 2, changeDetection: 0 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MegaMenu, [{
@@ -1946,7 +1990,7 @@ class MegaMenu extends BaseComponent {
         args: [{
                 selector: 'p-megaMenu, p-megamenu, p-mega-menu',
                 standalone: true,
-                imports: [CommonModule, RouterModule, MegaMenuSub, Ripple, TooltipModule, AngleDownIcon, AngleRightIcon, BarsIcon, BadgeModule, SharedModule],
+                imports: [CommonModule, RouterModule, MegaMenuSub, TooltipModule, BarsIcon, BadgeModule, SharedModule],
                 template: `
         <div
             [ngClass]="{
@@ -1964,10 +2008,10 @@ class MegaMenu extends BaseComponent {
             [attr.id]="id"
             #container
         >
-            <div class="p-megamenu-start" *ngIf="startTemplate">
-                <ng-container *ngTemplateOutlet="startTemplate"></ng-container>
+            <div class="p-megamenu-start" *ngIf="startTemplate || _startTemplate">
+                <ng-container *ngTemplateOutlet="startTemplate || _startTemplate"></ng-container>
             </div>
-            <ng-container *ngIf="!buttonTemplate">
+            <ng-container *ngIf="!buttonTemplate && !_buttonTemplate">
                 <a
                     *ngIf="model && model.length > 0"
                     #menubutton
@@ -1981,15 +2025,14 @@ class MegaMenu extends BaseComponent {
                     (click)="menuButtonClick($event)"
                     (keydown)="menuButtonKeydown($event)"
                 >
-                    <ng-container *ngIf="!buttonTemplate">
-                        <BarsIcon />
-                    </ng-container>
+                    <BarsIcon *ngIf="!buttonIconTemplate && !_buttonIconTemplate" />
+                    <ng-template *ngTemplateOutlet="buttonIconTemplate || _buttonIconTemplate"></ng-template>
                 </a>
             </ng-container>
-            <ng-container *ngTemplateOutlet="buttonTemplate"></ng-container>
+            <ng-container *ngTemplateOutlet="buttonTemplate || _buttonTemplate"></ng-container>
             <p-megamenu-sub
                 #rootmenu
-                [itemTemplate]="itemTemplate"
+                [itemTemplate]="itemTemplate || _itemTemplate"
                 [items]="processedItems"
                 [attr.id]="id + '_list'"
                 [menuId]="id"
@@ -2011,8 +2054,8 @@ class MegaMenu extends BaseComponent {
                 [queryMatches]="queryMatches"
                 [scrollHeight]="scrollHeight"
             ></p-megamenu-sub>
-            <div class="p-megamenu-end" *ngIf="endTemplate">
-                <ng-container *ngTemplateOutlet="endTemplate"></ng-container>
+            <div class="p-megamenu-end" *ngIf="endTemplate || _endTemplate">
+                <ng-container *ngTemplateOutlet="endTemplate || _endTemplate"></ng-container>
             </div>
         </div>
     `,
@@ -2046,25 +2089,28 @@ class MegaMenu extends BaseComponent {
             args: [{ transform: numberAttribute }]
         }], startTemplate: [{
             type: ContentChild,
-            args: ['start']
+            args: ['start', { descendants: false }]
         }], endTemplate: [{
             type: ContentChild,
-            args: ['end']
-        }], menuiconTemplate: [{
+            args: ['end', { descendants: false }]
+        }], menuIconTemplate: [{
             type: ContentChild,
-            args: ['menuicon']
-        }], submenuiconTemplate: [{
+            args: ['menuicon', { descendants: false }]
+        }], submenuIconTemplate: [{
             type: ContentChild,
-            args: ['submenuicon']
+            args: ['submenuicon', { descendants: false }]
         }], itemTemplate: [{
             type: ContentChild,
-            args: ['item']
+            args: ['item', { descendants: false }]
         }], buttonTemplate: [{
             type: ContentChild,
-            args: ['button']
-        }], buttoniconTemplate: [{
+            args: ['button', { descendants: false }]
+        }], buttonIconTemplate: [{
             type: ContentChild,
-            args: ['buttonicon']
+            args: ['buttonicon', { descendants: false }]
+        }], templates: [{
+            type: ContentChildren,
+            args: [PrimeTemplate]
         }], menubuttonViewChild: [{
             type: ViewChild,
             args: ['menubutton']