Refactor #13910

primefaces · Oct 25, 2023 · ea4c2b0 · ea4c2b0
1 parent 1e5b43c
commit ea4c2b0
Show file tree

Hide file tree

Showing 7 changed files with 47 additions and 22 deletions.
diff --git a/src/app/components/contextmenu/contextmenu.ts b/src/app/components/contextmenu/contextmenu.ts
@@ -168,7 +168,7 @@ import { ObjectUtils, UniqueComponentId, ZIndexUtils } from 'primeng/utils';
                             </a>
                         </ng-container>
                         <ng-container *ngIf="itemTemplate">
-                            <ng-template *ngTemplateOutlet="itemTemplate; context: { $implicit: processedItem }"></ng-template>
+                            <ng-template *ngTemplateOutlet="itemTemplate; context: { $implicit: processedItem.item }"></ng-template>
                         </ng-container>
                     </div>
 

diff --git a/src/app/components/megamenu/megamenu.ts b/src/app/components/megamenu/megamenu.ts
@@ -162,7 +162,7 @@ import { ObjectUtils, UniqueComponentId } from 'primeng/utils';
                             </a>
                         </ng-container>
                         <ng-container *ngIf="itemTemplate">
-                            <ng-template *ngTemplateOutlet="itemTemplate; context: { $implicit: processedItem }"></ng-template>
+                            <ng-template *ngTemplateOutlet="itemTemplate; context: { $implicit: processedItem.item }"></ng-template>
                         </ng-container>
                     </div>
                     <div *ngIf="isItemVisible(processedItem) && isItemGroup(processedItem)" class="p-megamenu-panel" [attr.data-pc-section]="'panel'">

diff --git a/src/app/components/menubar/menubar.ts b/src/app/components/menubar/menubar.ts
@@ -179,7 +179,7 @@ export class MenubarService {
                             </a>
                         </ng-container>
                         <ng-container *ngIf="itemTemplate">
-                            <ng-template *ngTemplateOutlet="itemTemplate; context: { $implicit: processedItem }"></ng-template>
+                            <ng-template *ngTemplateOutlet="itemTemplate; context: { $implicit: processedItem.item }"></ng-template>
                         </ng-container>
                     </div>
                     <p-menubarSub

diff --git a/src/app/components/panelmenu/panelmenu.ts b/src/app/components/panelmenu/panelmenu.ts
@@ -122,7 +122,7 @@ import { ObjectUtils, UniqueComponentId } from 'primeng/utils';
                             </a>
                         </ng-container>
                         <ng-container *ngIf="itemTemplate">
-                            <ng-template *ngTemplateOutlet="itemTemplate; context: { $implicit: processedItem }"></ng-template>
+                            <ng-template *ngTemplateOutlet="itemTemplate; context: { $implicit: processedItem.item }"></ng-template>
                         </ng-container>
                     </div>
                     <div class="p-toggleable-content" [@submenu]="getAnimation(processedItem)">

diff --git a/src/app/components/tabmenu/tabmenu.ts b/src/app/components/tabmenu/tabmenu.ts
@@ -55,13 +55,16 @@ import { ObjectUtils } from 'primeng/utils';
                             [class]="item.styleClass"
                             [attr.data-p-disabled]="disabled(item)"
                             [attr.data-p-highlight]="focusedItemInfo() === item"
+                            (click)="itemClick($event, item)"
+                            (keydown)="onKeydownItem($event, i, item)"
+                            (focus)="onMenuItemFocus(item)"
                             [ngClass]="{ 'p-tabmenuitem': true, 'p-disabled': getItemProp(item, 'disabled'), 'p-highlight': isActive(item), 'p-hidden': item.visible === false }"
                             pTooltip
                             [tooltipOptions]="item.tooltipOptions"
                         >
                             <a
                                 #tabLink
-                                *ngIf="!item.routerLink"
+                                *ngIf="!item.routerLink && !itemTemplate"
                                 class="p-menuitem-link"
                                 role="menuitem"
                                 [attr.href]="getItemProp(item, 'url')"
@@ -70,31 +73,24 @@ import { ObjectUtils } from 'primeng/utils';
                                 [attr.aria-label]="getItemProp(item, 'label')"
                                 [attr.tabindex]="disabled(item) ? -1 : 0"
                                 [target]="getItemProp(item, 'target')"
-                                (click)="itemClick($event, item)"
-                                (keydown)="onKeydownItem($event, i, item)"
-                                (focus)="onMenuItemFocus(item)"
                                 pRipple
                             >
-                                <ng-container *ngIf="!itemTemplate">
+                                <ng-container>
                                     <span class="p-menuitem-icon" [ngClass]="item.icon" *ngIf="item.icon" [ngStyle]="item.iconStyle"></span>
                                     <span class="p-menuitem-text" *ngIf="item.escape !== false; else htmlLabel">{{ getItemProp(item, 'label') }}</span>
                                     <ng-template #htmlLabel><span class="p-menuitem-text" [innerHTML]="getItemProp(item, 'label')"></span></ng-template>
                                     <span class="p-menuitem-badge" *ngIf="item.badge" [ngClass]="item.badgeStyleClass">{{ getItemProp(item, 'badge') }}</span>
                                 </ng-container>
-                                <ng-container *ngTemplateOutlet="itemTemplate; context: { $implicit: item, index: i }"></ng-container>
                             </a>
                             <a
                                 #tabLink
-                                *ngIf="item.routerLink"
+                                *ngIf="item.routerLink && !itemTemplate"
                                 [routerLink]="item.routerLink"
                                 [queryParams]="item.queryParams"
                                 [routerLinkActive]="'p-menuitem-link-active'"
                                 [routerLinkActiveOptions]="item.routerLinkActiveOptions || { exact: false }"
                                 role="menuitem"
                                 class="p-menuitem-link"
-                                (click)="itemClick($event, item)"
-                                (keydown)="onKeydownItem($event, i, item)"
-                                (focus)="onMenuItemFocus(item)"
                                 [target]="item.target"
                                 [attr.id]="getItemProp(item, 'id')"
                                 [attr.aria-disabled]="disabled(item)"
@@ -108,14 +104,14 @@ import { ObjectUtils } from 'primeng/utils';
                                 [state]="item.state"
                                 pRipple
                             >
-                                <ng-container *ngIf="!itemTemplate">
+                                <ng-container>
                                     <span class="p-menuitem-icon" [attr.aria-hidden]="true" [ngClass]="item.icon" *ngIf="item.icon" [ngStyle]="item.iconStyle"></span>
                                     <span class="p-menuitem-text" *ngIf="item.escape !== false; else htmlRouteLabel">{{ getItemProp(item, 'label') }}</span>
                                     <ng-template #htmlRouteLabel><span class="p-menuitem-text" [innerHTML]="getItemProp(item, 'label')"></span></ng-template>
                                     <span class="p-menuitem-badge" *ngIf="item.badge" [ngClass]="item.badgeStyleClass">{{ getItemProp(item, 'badge') }}</span>
                                 </ng-container>
-                                <ng-container *ngTemplateOutlet="itemTemplate; context: { $implicit: item, index: i }"></ng-container>
                             </a>
+                            <ng-container *ngTemplateOutlet="itemTemplate; context: { $implicit: item, index: i }"></ng-container>
                         </li>
                         <li #inkbar class="p-tabmenu-ink-bar" role="none"></li>
                     </ul>

diff --git a/src/app/components/tieredmenu/tieredmenu.ts b/src/app/components/tieredmenu/tieredmenu.ts
@@ -164,7 +164,7 @@ import { ObjectUtils, UniqueComponentId, ZIndexUtils } from 'primeng/utils';
                             </a>
                         </ng-container>
                         <ng-container *ngIf="itemTemplate">
-                            <ng-template *ngTemplateOutlet="itemTemplate; context: { $implicit: processedItem }"></ng-template>
+                            <ng-template *ngTemplateOutlet="itemTemplate; context: { $implicit: processedItem.item }"></ng-template>
                         </ng-container>
                     </div>
 

diff --git a/src/app/showcase/doc/tabmenu/templatedoc.ts b/src/app/showcase/doc/tabmenu/templatedoc.ts
@@ -10,7 +10,18 @@ import { Code } from '../../domain/code';
         </app-docsectiontext>
         <div class="card">
             <p-tabMenu [model]="items" [activeItem]="activeItem">
-                <ng-template pTemplate="item" let-item let-i="index"> {{ i }} - Custom {{ item.label }} </ng-template>
+                <ng-template pTemplate="item" let-item>
+                    <a class="p-menuitem-link flex justify-content-between align-items-center p-3">
+                        <div>
+                            <span [class]="item.icon"></span>
+                            <span> {{ item.label }}</span>
+                        </div>
+                        <div>
+                            <span *ngIf="item.shortcut" [class]="item.shortcutClass">{{ item.shortcut }}</span>
+                            <p-badge *ngIf="item.badge" [value]="item.badge" [severity]="item.badgeSeverity"></p-badge>
+                        </div>
+                    </a>
+                </ng-template>
             </p-tabMenu>
         </div>
         <app-code [code]="code" selector="tab-menu-template-demo"></app-code>
@@ -40,16 +51,34 @@ export class TemplateDoc implements OnInit {
     code: Code = {
         basic: `
 <p-tabMenu [model]="items" [activeItem]="activeItem">
-    <ng-template pTemplate="item" let-item let-i="index">
-        {{i}} - Custom {{item.label}}
+    <ng-template pTemplate="item" let-item>
+        <a class="p-menuitem-link flex justify-content-between align-items-center p-3">
+            <div>
+                <span [class]="item.icon"></span>
+                <span> {{ item.label }}</span>
+            </div>
+            <div>
+                <span *ngIf="item.shortcut" [class]="item.shortcutClass">{{ item.shortcut }}</span>
+                <p-badge *ngIf="item.badge" [value]="item.badge" [severity]="item.badgeSeverity"></p-badge>
+            </div>
+        </a>
     </ng-template>
 </p-tabMenu>`,
 
         html: `
 <div class="card">
     <p-tabMenu [model]="items" [activeItem]="activeItem">
-        <ng-template pTemplate="item" let-item let-i="index">
-            {{i}} - Custom {{item.label}}
+        <ng-template pTemplate="item" let-item>
+            <a class="p-menuitem-link flex justify-content-between align-items-center p-3">
+                <div>
+                    <span [class]="item.icon"></span>
+                    <span> {{ item.label }}</span>
+                </div>
+                <div>
+                    <span *ngIf="item.shortcut" [class]="item.shortcutClass">{{ item.shortcut }}</span>
+                    <p-badge *ngIf="item.badge" [value]="item.badge" [severity]="item.badgeSeverity"></p-badge>
+                </div>
+            </a>
         </ng-template>
     </p-tabMenu>
 </div>`,