primeng 16.5.1 → 16.6.0

package/fesm2022/primeng-menu.mjs

@@ -1,18 +1,19 @@
-import * as i0 from '@angular/core';
-import { PLATFORM_ID, Pipe, Inject, EventEmitter, forwardRef, Component, ViewEncapsulation, Input, Output, computed, signal, ChangeDetectionStrategy, ViewChild, NgModule } from '@angular/core';
 import { trigger, transition, style, animate } from '@angular/animations';
 import * as i2 from '@angular/common';
 import { isPlatformBrowser, DOCUMENT, CommonModule } from '@angular/common';
-import { DomHandler, ConnectedOverlayScrollHandler } from 'primeng/dom';
-import { UniqueComponentId, ZIndexUtils } from 'primeng/utils';
+import * as i0 from '@angular/core';
+import { PLATFORM_ID, Pipe, Inject, EventEmitter, forwardRef, Component, ViewEncapsulation, Input, Output, computed, signal, ChangeDetectionStrategy, ViewChild, ContentChildren, NgModule } from '@angular/core';
 import * as i3 from '@angular/router';
 import { RouterModule } from '@angular/router';
+import * as i5 from 'primeng/api';
+import { PrimeTemplate } from 'primeng/api';
+import { DomHandler, ConnectedOverlayScrollHandler } from 'primeng/dom';
 import * as i4 from 'primeng/ripple';
 import { RippleModule } from 'primeng/ripple';
 import * as i6 from 'primeng/tooltip';
 import { TooltipModule } from 'primeng/tooltip';
+import { UniqueComponentId, ZIndexUtils } from 'primeng/utils';
 import * as i1 from '@angular/platform-browser';
-import * as i5 from 'primeng/api';
 
 class SafeHtmlPipe {
     platformId;
@@ -41,6 +42,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
                 }] }, { type: i1.DomSanitizer }]; } });
 class MenuItemContent {
     item;
+    itemTemplate;
     id;
     onMenuItemClick = new EventEmitter();
     menu;
@@ -51,49 +53,53 @@ class MenuItemContent {
         this.onMenuItemClick.emit({ originalEvent: event, item: { ...item, id: this.id } });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: MenuItemContent, deps: [{ token: forwardRef(() => Menu) }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", type: MenuItemContent, selector: "[pMenuItemContent]", inputs: { item: ["pMenuItemContent", "item"], id: "id" }, outputs: { onMenuItemClick: "onMenuItemClick" }, host: { classAttribute: "p-element" }, ngImport: i0, template: `
-        <div [attr.data-pc-section]="'content'" class="p-menuitem-content">
-            <a
-                *ngIf="!item?.routerLink"
-                [attr.title]="item.title"
-                [attr.href]="item.url || null"
-                [attr.data-automationid]="item.automationId"
-                [attr.tabindex]="-1"
-                [attr.data-pc-section]="'action'"
-                [attr.aria-hidden]="true"
-                class="p-menuitem-link"
-                [target]="item.target"
-                [ngClass]="{ 'p-disabled': item.disabled }"
-                (click)="onItemClick($event, item)"
-                pRipple
-            >
-                <ng-container *ngTemplateOutlet="itemContent"></ng-container>
-            </a>
-            <a
-                *ngIf="item?.routerLink"
-                [routerLink]="item.routerLink"
-                [attr.data-automationid]="item.automationId"
-                [attr.tabindex]="-1"
-                [attr.data-pc-section]="'action'"
-                [attr.aria-hidden]="true"
-                [attr.title]="item.title"
-                [queryParams]="item.queryParams"
-                routerLinkActive="p-menuitem-link-active"
-                [routerLinkActiveOptions]="item.routerLinkActiveOptions || { exact: false }"
-                class="p-menuitem-link"
-                [target]="item.target"
-                [ngClass]="{ 'p-disabled': item.disabled }"
-                (click)="onItemClick($event, item)"
-                [fragment]="item.fragment"
-                [queryParamsHandling]="item.queryParamsHandling"
-                [preserveFragment]="item.preserveFragment"
-                [skipLocationChange]="item.skipLocationChange"
-                [replaceUrl]="item.replaceUrl"
-                [state]="item.state"
-                pRipple
-            >
-                <ng-container *ngTemplateOutlet="itemContent"></ng-container>
-            </a>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", type: MenuItemContent, selector: "[pMenuItemContent]", inputs: { item: ["pMenuItemContent", "item"], itemTemplate: "itemTemplate", id: "id" }, outputs: { onMenuItemClick: "onMenuItemClick" }, host: { classAttribute: "p-element" }, ngImport: i0, template: `
+        <div [attr.data-pc-section]="'content'" class="p-menuitem-content" (click)="onItemClick($event, item)">
+            <ng-container *ngIf="!itemTemplate">
+                <a
+                    *ngIf="!item?.routerLink"
+                    [attr.title]="item.title"
+                    [attr.href]="item.url || null"
+                    [attr.data-automationid]="item.automationId"
+                    [attr.tabindex]="-1"
+                    [attr.data-pc-section]="'action'"
+                    [attr.aria-hidden]="true"
+                    class="p-menuitem-link"
+                    [target]="item.target"
+                    [ngClass]="{ 'p-disabled': item.disabled }"
+                    pRipple
+                >
+                    <ng-container *ngTemplateOutlet="itemContent; context: { $implicit: item }"></ng-container>
+                </a>
+                <a
+                    *ngIf="item?.routerLink"
+                    [routerLink]="item.routerLink"
+                    [attr.data-automationid]="item.automationId"
+                    [attr.tabindex]="-1"
+                    [attr.data-pc-section]="'action'"
+                    [attr.aria-hidden]="true"
+                    [attr.title]="item.title"
+                    [queryParams]="item.queryParams"
+                    routerLinkActive="p-menuitem-link-active"
+                    [routerLinkActiveOptions]="item.routerLinkActiveOptions || { exact: false }"
+                    class="p-menuitem-link"
+                    [target]="item.target"
+                    [ngClass]="{ 'p-disabled': item.disabled }"
+                    [fragment]="item.fragment"
+                    [queryParamsHandling]="item.queryParamsHandling"
+                    [preserveFragment]="item.preserveFragment"
+                    [skipLocationChange]="item.skipLocationChange"
+                    [replaceUrl]="item.replaceUrl"
+                    [state]="item.state"
+                    pRipple
+                >
+                    <ng-container *ngTemplateOutlet="itemContent; context: { $implicit: item }"></ng-container>
+                </a>
+            </ng-container>
+
+            <ng-container *ngIf="itemTemplate">
+                <ng-template *ngTemplateOutlet="itemTemplate; context: { $implicit: item }"></ng-template>
+            </ng-container>
 
             <ng-template #itemContent>
                 <span class="p-menuitem-icon" *ngIf="item.icon" [ngClass]="item.icon" [class]="item.iconClass" [ngStyle]="item.iconStyle"></span>
@@ -109,48 +115,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
             args: [{
                     selector: '[pMenuItemContent]',
                     template: `
-        <div [attr.data-pc-section]="'content'" class="p-menuitem-content">
-            <a
-                *ngIf="!item?.routerLink"
-                [attr.title]="item.title"
-                [attr.href]="item.url || null"
-                [attr.data-automationid]="item.automationId"
-                [attr.tabindex]="-1"
-                [attr.data-pc-section]="'action'"
-                [attr.aria-hidden]="true"
-                class="p-menuitem-link"
-                [target]="item.target"
-                [ngClass]="{ 'p-disabled': item.disabled }"
-                (click)="onItemClick($event, item)"
-                pRipple
-            >
-                <ng-container *ngTemplateOutlet="itemContent"></ng-container>
-            </a>
-            <a
-                *ngIf="item?.routerLink"
-                [routerLink]="item.routerLink"
-                [attr.data-automationid]="item.automationId"
-                [attr.tabindex]="-1"
-                [attr.data-pc-section]="'action'"
-                [attr.aria-hidden]="true"
-                [attr.title]="item.title"
-                [queryParams]="item.queryParams"
-                routerLinkActive="p-menuitem-link-active"
-                [routerLinkActiveOptions]="item.routerLinkActiveOptions || { exact: false }"
-                class="p-menuitem-link"
-                [target]="item.target"
-                [ngClass]="{ 'p-disabled': item.disabled }"
-                (click)="onItemClick($event, item)"
-                [fragment]="item.fragment"
-                [queryParamsHandling]="item.queryParamsHandling"
-                [preserveFragment]="item.preserveFragment"
-                [skipLocationChange]="item.skipLocationChange"
-                [replaceUrl]="item.replaceUrl"
-                [state]="item.state"
-                pRipple
-            >
-                <ng-container *ngTemplateOutlet="itemContent"></ng-container>
-            </a>
+        <div [attr.data-pc-section]="'content'" class="p-menuitem-content" (click)="onItemClick($event, item)">
+            <ng-container *ngIf="!itemTemplate">
+                <a
+                    *ngIf="!item?.routerLink"
+                    [attr.title]="item.title"
+                    [attr.href]="item.url || null"
+                    [attr.data-automationid]="item.automationId"
+                    [attr.tabindex]="-1"
+                    [attr.data-pc-section]="'action'"
+                    [attr.aria-hidden]="true"
+                    class="p-menuitem-link"
+                    [target]="item.target"
+                    [ngClass]="{ 'p-disabled': item.disabled }"
+                    pRipple
+                >
+                    <ng-container *ngTemplateOutlet="itemContent; context: { $implicit: item }"></ng-container>
+                </a>
+                <a
+                    *ngIf="item?.routerLink"
+                    [routerLink]="item.routerLink"
+                    [attr.data-automationid]="item.automationId"
+                    [attr.tabindex]="-1"
+                    [attr.data-pc-section]="'action'"
+                    [attr.aria-hidden]="true"
+                    [attr.title]="item.title"
+                    [queryParams]="item.queryParams"
+                    routerLinkActive="p-menuitem-link-active"
+                    [routerLinkActiveOptions]="item.routerLinkActiveOptions || { exact: false }"
+                    class="p-menuitem-link"
+                    [target]="item.target"
+                    [ngClass]="{ 'p-disabled': item.disabled }"
+                    [fragment]="item.fragment"
+                    [queryParamsHandling]="item.queryParamsHandling"
+                    [preserveFragment]="item.preserveFragment"
+                    [skipLocationChange]="item.skipLocationChange"
+                    [replaceUrl]="item.replaceUrl"
+                    [state]="item.state"
+                    pRipple
+                >
+                    <ng-container *ngTemplateOutlet="itemContent; context: { $implicit: item }"></ng-container>
+                </a>
+            </ng-container>
+
+            <ng-container *ngIf="itemTemplate">
+                <ng-template *ngTemplateOutlet="itemTemplate; context: { $implicit: item }"></ng-template>
+            </ng-container>
 
             <ng-template #itemContent>
                 <span class="p-menuitem-icon" *ngIf="item.icon" [ngClass]="item.icon" [class]="item.iconClass" [ngStyle]="item.iconStyle"></span>
@@ -171,9 +181,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
                 }] }]; }, propDecorators: { item: [{
                 type: Input,
                 args: ['pMenuItemContent']
+            }], itemTemplate: [{
+                type: Input
             }], id: [{
-                type: Input,
-                args: ['id']
+                type: Input
             }], onMenuItemClick: [{
                 type: Output
             }] } });
@@ -278,6 +289,10 @@ class Menu {
     onFocus = new EventEmitter();
     listViewChild;
     containerViewChild;
+    templates;
+    startTemplate;
+    endTemplate;
+    itemTemplate;
     container;
     scrollHandler;
     documentClickListener;
@@ -333,6 +348,24 @@ class Menu {
             this.bindDocumentClickListener();
         }
     }
+    ngAfterContentInit() {
+        this.templates?.forEach((item) => {
+            switch (item.getType()) {
+                case 'start':
+                    this.startTemplate = item.template;
+                    break;
+                case 'end':
+                    this.endTemplate = item.template;
+                    break;
+                case 'itemTemplate':
+                    this.itemTemplate = item.template;
+                    break;
+                default:
+                    this.itemTemplate = item.template;
+                    break;
+            }
+        });
+    }
     onOverlayAnimationStart(event) {
         switch (event.toState) {
             case 'visible':
@@ -644,7 +677,7 @@ class Menu {
         return item.visible === false;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: Menu, deps: [{ token: DOCUMENT }, { token: PLATFORM_ID }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i5.PrimeNGConfig }, { token: i5.OverlayService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", type: Menu, selector: "p-menu", inputs: { model: "model", popup: "popup", style: "style", styleClass: "styleClass", appendTo: "appendTo", autoZIndex: "autoZIndex", baseZIndex: "baseZIndex", showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", id: "id", tabindex: "tabindex" }, outputs: { onShow: "onShow", onHide: "onHide", onBlur: "onBlur", onFocus: "onFocus" }, host: { classAttribute: "p-element" }, viewQueries: [{ propertyName: "listViewChild", first: true, predicate: ["list"], descendants: true }, { propertyName: "containerViewChild", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", type: Menu, selector: "p-menu", inputs: { model: "model", popup: "popup", style: "style", styleClass: "styleClass", appendTo: "appendTo", autoZIndex: "autoZIndex", baseZIndex: "baseZIndex", showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", id: "id", tabindex: "tabindex" }, outputs: { onShow: "onShow", onHide: "onHide", onBlur: "onBlur", onFocus: "onFocus" }, host: { classAttribute: "p-element" }, queries: [{ propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "listViewChild", first: true, predicate: ["list"], descendants: true }, { propertyName: "containerViewChild", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: `
         <div
             #container
             [ngClass]="{ 'p-menu p-component': true, 'p-menu-overlay': popup }"
@@ -659,6 +692,9 @@ class Menu {
             [attr.data-pc-name]="'menu'"
             [attr.id]="id"
         >
+            <div *ngIf="startTemplate" class="p-menu-start" [attr.data-pc-section]="'start'">
+                <ng-container *ngTemplateOutlet="startTemplate"></ng-container>
+            </div>
             <ul
                 #list
                 class="p-menu-list p-reset"
@@ -694,6 +730,7 @@ class Menu {
                             class="p-menuitem"
                             *ngIf="!item.separator"
                             [pMenuItemContent]="item"
+                            [itemTemplate]="itemTemplate"
                             [ngClass]="{ 'p-hidden': item.visible === false || submenu.visible === false, 'p-focus': focusedOptionId() && menuitemId(item, id, i, j) === focusedOptionId(), 'p-disabled': disabled(item.disabled) }"
                             [ngStyle]="item.style"
                             [class]="item.styleClass"
@@ -716,6 +753,7 @@ class Menu {
                         class="p-menuitem"
                         *ngIf="!item.separator"
                         [pMenuItemContent]="item"
+                        [itemTemplate]="itemTemplate"
                         [ngClass]="{ 'p-hidden': item.visible === false, 'p-focus': focusedOptionId() && menuitemId(item, id, i, j) === focusedOptionId(), 'p-disabled': disabled(item.disabled) }"
                         [ngStyle]="item.style"
                         [class]="item.styleClass"
@@ -732,8 +770,11 @@ class Menu {
                     ></li>
                 </ng-template>
             </ul>
+            <div *ngIf="endTemplate" class="p-menu-end" [attr.data-pc-section]="'end'">
+                <ng-container *ngTemplateOutlet="endTemplate"></ng-container>
+            </div>
         </div>
-    `, isInline: true, styles: ["@layer primeng{.p-menu-overlay{position:absolute;top:0;left:0}.p-menu ul{margin:0;padding:0;list-style:none}.p-menu .p-submenu-header{align-items:center}.p-menu .p-menuitem-link{cursor:pointer;display:flex;align-items:center;text-decoration:none;overflow:hidden;position:relative}.p-menu .p-menuitem-text{line-height:1}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i6.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: MenuItemContent, selector: "[pMenuItemContent]", inputs: ["pMenuItemContent", "id"], outputs: ["onMenuItemClick"] }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }], animations: [trigger('overlayAnimation', [transition(':enter', [style({ opacity: 0, transform: 'scaleY(0.8)' }), animate('{{showTransitionParams}}')]), transition(':leave', [animate('{{hideTransitionParams}}', style({ opacity: 0 }))])])], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    `, isInline: true, styles: ["@layer primeng{.p-menu-overlay{position:absolute;top:0;left:0}.p-menu ul{margin:0;padding:0;list-style:none}.p-menu .p-submenu-header{align-items:center}.p-menu .p-menuitem-link{cursor:pointer;display:flex;align-items:center;text-decoration:none;overflow:hidden;position:relative}.p-menu .p-menuitem-text{line-height:1}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: "directive", type: i6.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: MenuItemContent, selector: "[pMenuItemContent]", inputs: ["pMenuItemContent", "itemTemplate", "id"], outputs: ["onMenuItemClick"] }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }], animations: [trigger('overlayAnimation', [transition(':enter', [style({ opacity: 0, transform: 'scaleY(0.8)' }), animate('{{showTransitionParams}}')]), transition(':leave', [animate('{{hideTransitionParams}}', style({ opacity: 0 }))])])], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: Menu, decorators: [{
             type: Component,
@@ -752,6 +793,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
             [attr.data-pc-name]="'menu'"
             [attr.id]="id"
         >
+            <div *ngIf="startTemplate" class="p-menu-start" [attr.data-pc-section]="'start'">
+                <ng-container *ngTemplateOutlet="startTemplate"></ng-container>
+            </div>
             <ul
                 #list
                 class="p-menu-list p-reset"
@@ -787,6 +831,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
                             class="p-menuitem"
                             *ngIf="!item.separator"
                             [pMenuItemContent]="item"
+                            [itemTemplate]="itemTemplate"
                             [ngClass]="{ 'p-hidden': item.visible === false || submenu.visible === false, 'p-focus': focusedOptionId() && menuitemId(item, id, i, j) === focusedOptionId(), 'p-disabled': disabled(item.disabled) }"
                             [ngStyle]="item.style"
                             [class]="item.styleClass"
@@ -809,6 +854,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
                         class="p-menuitem"
                         *ngIf="!item.separator"
                         [pMenuItemContent]="item"
+                        [itemTemplate]="itemTemplate"
                         [ngClass]="{ 'p-hidden': item.visible === false, 'p-focus': focusedOptionId() && menuitemId(item, id, i, j) === focusedOptionId(), 'p-disabled': disabled(item.disabled) }"
                         [ngStyle]="item.style"
                         [class]="item.styleClass"
@@ -825,6 +871,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
                     ></li>
                 </ng-template>
             </ul>
+            <div *ngIf="endTemplate" class="p-menu-end" [attr.data-pc-section]="'end'">
+                <ng-container *ngTemplateOutlet="endTemplate"></ng-container>
+            </div>
         </div>
     `, animations: [trigger('overlayAnimation', [transition(':enter', [style({ opacity: 0, transform: 'scaleY(0.8)' }), animate('{{showTransitionParams}}')]), transition(':leave', [animate('{{hideTransitionParams}}', style({ opacity: 0 }))])])], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'p-element'
@@ -875,6 +924,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
             }], containerViewChild: [{
                 type: ViewChild,
                 args: ['container']
+            }], templates: [{
+                type: ContentChildren,
+                args: [PrimeTemplate]
             }] } });
 class MenuModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: MenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });