Skip to content

Commit

Permalink
Merge pull request #15559 from primefaces/panelmenu-update
Browse files Browse the repository at this point in the history 
Panelmenu Update
  • Loading branch information
@cetincakiroglu
cetincakiroglu authored May 14, 2024
2 parents d191f54 + 06e1ca0 commit cf947b0
Show file tree
Hide file tree
Showing 3 changed files with 61 additions and 57 deletions.
10 changes: 2 additions & 8 deletions src/app/components/panelmenu/panelmenu.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -742,7 +742,7 @@ export class PanelMenuList implements OnChanges {
(keydown)="onHeaderKeyDown($event, item, i)"
>
<div class="p-panelmenu-header-content">
<ng-container *ngIf="!headerContentTemplate">
<ng-container *ngIf="!itemTemplate">
<a
*ngIf="!getItemProp(item, 'routerLink')"
[attr.href]="getItemProp(item, 'url')"
Expand All @@ -765,7 +765,7 @@ export class PanelMenuList implements OnChanges {
<span class="p-menuitem-badge" *ngIf="getItemProp(item, 'badge')" [ngClass]="getItemProp(item, 'badgeStyleClass')">{{ getItemProp(item, 'badge') }}</span>
</a>
</ng-container>
<ng-container *ngTemplateOutlet="headerContentTemplate; context: { $implicit: item }"></ng-container>
<ng-container *ngTemplateOutlet="itemTemplate; context: { $implicit: item }"></ng-container>
<a
*ngIf="getItemProp(item, 'routerLink')"
[routerLink]="getItemProp(item, 'routerLink')"
Expand Down Expand Up @@ -894,8 +894,6 @@ export class PanelMenu implements AfterContentInit {

submenuIconTemplate: TemplateRef<any> | undefined;

headerContentTemplate: TemplateRef<any> | undefined;

itemTemplate: TemplateRef<any> | undefined;

public animating: boolean | undefined;
Expand All @@ -909,10 +907,6 @@ export class PanelMenu implements AfterContentInit {
ngAfterContentInit() {
this.templates?.forEach((item) => {
switch (item.getType()) {
case 'headercontent':
this.headerContentTemplate = item.template;
break;

case 'submenuicon':
this.submenuIconTemplate = item.template;
break;
Expand Down
98 changes: 52 additions & 46 deletions src/app/showcase/doc/panelmenu/routerdoc.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,25 +12,25 @@ import { Router } from '@angular/router';
<div class="card flex justify-content-center">
<p-panelMenu [model]="items" styleClass="w-full md:w-20rem">
<ng-template pTemplate="item" let-item>
<ng-container *ngIf="item.route">
<ng-container *ngIf="item.route; else urlRef">
<a [routerLink]="item.route" class="flex align-items-center cursor-pointer text-color px-3 py-2">
<span [class]="item.icon"></span>
<span class="ml-2 text-color">{{ item.label }}</span>
</a>
</ng-container>
<ng-container *ngIf="item.url">
<a [href]="item.url" class="p-menuitem-link">
<ng-template #urlRef>
<a *ngIf="item.url; else noLink" [href]="item.url" class="flex align-items-center cursor-pointer text-color px-3 py-2">
<span [class]="item.icon"></span>
<span class="ml-2">{{ item.label }}</span>
</a>
</ng-container>
</ng-template>
<ng-template pTemplate="headercontent" let-item>
<div class="flex align-items-center cursor-pointer text-color px-3 py-2">
<span [class]="item.icon"></span>
<span class="ml-2">{{ item.label }}</span>
<i *ngIf="item.items" class="pi pi-angle-down text-primary ml-auto"></i>
</div>
<ng-template #noLink>
<span class="flex align-items-center cursor-pointer text-color px-3 py-2">
<span [class]="item.icon"></span>
<span class="ml-2">{{ item.label }}</span>
<i *ngIf="item.items" class="pi pi-angle-down text-primary ml-auto"></i>
</span>
</ng-template>
</ng-template>
</ng-template>
</p-panelMenu>
</div>
Expand Down Expand Up @@ -90,51 +90,57 @@ export class RouterDoc implements OnInit {
code: Code = {
basic: `<p-panelMenu [model]="items" styleClass="w-full md:w-20rem">
<ng-template pTemplate="item" let-item>
<ng-container *ngIf="item.route">
<a [routerLink]="item.route" class="flex align-items-center cursor-pointer text-color px-3 py-2">
<ng-container *ngIf="item.route; else urlRef">
<a [routerLink]="item.route" class="flex align-items-center
cursor-pointer text-color px-3 py-2">
<span [class]="item.icon"></span>
<span class="ml-2 text-color">{{ item.label }}</span>
</a>
</ng-container>
<ng-container *ngIf="item.url">
<a [href]="item.url" class="p-menuitem-link">
<ng-template #urlRef>
<a *ngIf="item.url; else noLink" [href]="item.url" class="flex align-items-center
cursor-pointer text-color px-3 py-2">
<span [class]="item.icon"></span>
<span class="ml-2">{{ item.label }}</span>
</a>
</ng-container>
</ng-template>
<ng-template pTemplate="headercontent" let-item>
<div class="flex align-items-center cursor-pointer text-color px-3 py-2">
<span [class]="item.icon"></span>
<span class="ml-2">{{ item.label }}</span>
<i *ngIf="item.items" class="pi pi-angle-down text-primary ml-auto"></i>
</div>
<ng-template #noLink>
<span class="flex align-items-center cursor-pointer text-color px-3 py-2">
<span [class]="item.icon"></span>
<span class="ml-2">{{ item.label }}</span>
<i *ngIf="item.items" class="pi pi-angle-down text-primary ml-auto"></i>
</span>
</ng-template>
</ng-template>
</ng-template>
</p-panelMenu>`,

html: `<p-panelMenu [model]="items" styleClass="w-full md:w-20rem">
<ng-template pTemplate="item" let-item>
<ng-container *ngIf="item.route">
<a [routerLink]="item.route" class="flex align-items-center cursor-pointer text-color px-3 py-2">
<span [class]="item.icon"></span>
<span class="ml-2 text-color">{{ item.label }}</span>
</a>
</ng-container>
<ng-container *ngIf="item.url">
<a [href]="item.url" class="p-menuitem-link">
<span [class]="item.icon"></span>
<span class="ml-2">{{ item.label }}</span>
</a>
</ng-container>
</ng-template>
<ng-template pTemplate="headercontent" let-item>
<div class="flex align-items-center cursor-pointer text-color px-3 py-2">
<span [class]="item.icon"></span>
<span class="ml-2">{{ item.label }}</span>
<i *ngIf="item.items" class="pi pi-angle-down text-primary ml-auto"></i>
</div>
</ng-template>
</p-panelMenu>`,
html: `<div class="card flex justify-content-center">
<p-panelMenu [model]="items" styleClass="w-full md:w-20rem">
<ng-template pTemplate="item" let-item>
<ng-container *ngIf="item.route; else urlRef">
<a [routerLink]="item.route" class="flex align-items-center
cursor-pointer text-color px-3 py-2">
<span [class]="item.icon"></span>
<span class="ml-2 text-color">{{ item.label }}</span>
</a>
</ng-container>
<ng-template #urlRef>
<a *ngIf="item.url; else noLink" [href]="item.url" class="flex align-items-center
cursor-pointer text-color px-3 py-2">
<span [class]="item.icon"></span>
<span class="ml-2">{{ item.label }}</span>
</a>
<ng-template #noLink>
<span class="flex align-items-center cursor-pointer text-color px-3 py-2">
<span [class]="item.icon"></span>
<span class="ml-2">{{ item.label }}</span>
<i *ngIf="item.items" class="pi pi-angle-down text-primary ml-auto"></i>
</span>
</ng-template>
</ng-template>
</ng-template>
</p-panelMenu>
</div>`,

typescript: `import { Component, OnInit } from '@angular/core';
import { MenuItem, MessageService } from 'primeng/api';
Expand Down
10 changes: 7 additions & 3 deletions src/app/showcase/doc/panelmenu/templatedoc.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
import { Component, OnInit } from '@angular/core';
import { MenuItem } from 'primeng/api';
import { Code } from '@domain/code';

Expand Down Expand Up @@ -31,6 +31,7 @@ export class TemplateDoc implements OnInit {
{
label: 'Mail',
icon: 'pi pi-envelope',
badge: '5',
items: [
{
label: 'Compose',
Expand Down Expand Up @@ -119,7 +120,8 @@ export class TemplateDoc implements OnInit {
{{ item.label }}
</span>
<p-badge *ngIf="item.badge" class="ml-auto" [value]="item.badge" />
<span *ngIf="item.shortcut" class="ml-auto border-1 surface-border border-round surface-100 text-xs p-1">
<span *ngIf="item.shortcut" class="ml-auto border-1 surface-border
border-round surface-100 text-xs p-1">
{{ item.shortcut }}
</span>
</a>
Expand All @@ -135,7 +137,8 @@ export class TemplateDoc implements OnInit {
{{ item.label }}
</span>
<p-badge *ngIf="item.badge" class="ml-auto" [value]="item.badge" />
<span *ngIf="item.shortcut" class="ml-auto border-1 surface-border border-round surface-100 text-xs p-1">
<span *ngIf="item.shortcut" class="ml-auto border-1 surface-border
border-round surface-100 text-xs p-1">
{{ item.shortcut }}
</span>
</a>
Expand Down Expand Up @@ -164,6 +167,7 @@ export class PanelMenuTemplateDemo implements OnInit {
{
label: 'Mail',
icon: 'pi pi-envelope',
badge: '5',
items: [
{
label: 'Compose',
Expand Down

0 comments on commit cf947b0

Please sign in to comment.