Merge pull request #12504 from primefaces/issue-12503

Fixed #12503 - Tabmenu | menuItem API badge does not work
primefaces · Jan 16, 2023 · d9f17f2 · d9f17f2
2 parents 7576d5c + 7230d41
commit d9f17f2
Show file tree

Hide file tree

Showing 44 changed files with 608 additions and 14 deletions.
diff --git a/src/app/components/tabmenu/tabmenu.css b/src/app/components/tabmenu/tabmenu.css
@@ -72,3 +72,7 @@
 .p-tabmenu-nav-content::-webkit-scrollbar {
     display: none;
 }
+
+.p-tabmenuitem {
+    display: flex;
+}
diff --git a/src/app/components/tabmenu/tabmenu.ts b/src/app/components/tabmenu/tabmenu.ts
@@ -1,27 +1,27 @@
+import { CommonModule } from '@angular/common';
 import {
-    NgModule,
+    AfterContentInit,
+    AfterViewChecked,
+    AfterViewInit,
+    ChangeDetectionStrategy,
+    ChangeDetectorRef,
     Component,
+    ContentChildren,
+    ElementRef,
+    EventEmitter,
     Input,
+    NgModule,
+    OnDestroy,
     Output,
-    ContentChildren,
     QueryList,
-    AfterContentInit,
-    AfterViewInit,
-    AfterViewChecked,
     TemplateRef,
-    ChangeDetectionStrategy,
-    ViewEncapsulation,
     ViewChild,
-    ElementRef,
-    ChangeDetectorRef,
-    OnDestroy,
-    EventEmitter
+    ViewEncapsulation
 } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { RippleModule } from 'primeng/ripple';
-import { PrimeTemplate, SharedModule, MenuItem } from 'primeng/api';
 import { ActivatedRoute, Router, RouterModule } from '@angular/router';
+import { MenuItem, PrimeTemplate, SharedModule } from 'primeng/api';
 import { DomHandler } from 'primeng/dom';
+import { RippleModule } from 'primeng/ripple';
 import { TooltipModule } from 'primeng/tooltip';
 
 @Component({
@@ -62,6 +62,7 @@ import { TooltipModule } from 'primeng/tooltip';
                                     <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">{{ item.label }}</span>
                                     <ng-template #htmlLabel><span class="p-menuitem-text" [innerHTML]="item.label"></span></ng-template>
+                                    <span class="p-menuitem-badge" *ngIf="item.badge" [ngClass]="item.badgeStyleClass">{{ item.badge }}</span>
                                 </ng-container>
                                 <ng-container *ngTemplateOutlet="itemTemplate; context: { $implicit: item, index: i }"></ng-container>
                             </a>
@@ -91,6 +92,7 @@ import { TooltipModule } from 'primeng/tooltip';
                                     <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 htmlRouteLabel">{{ item.label }}</span>
                                     <ng-template #htmlRouteLabel><span class="p-menuitem-text" [innerHTML]="item.label"></span></ng-template>
+                                    <span class="p-menuitem-badge" *ngIf="item.badge" [ngClass]="item.badgeStyleClass">{{ item.badge }}</span>
                                 </ng-container>
                                 <ng-container *ngTemplateOutlet="itemTemplate; context: { $implicit: item, index: i }"></ng-container>
                             </a>

diff --git a/src/assets/components/themes/arya-blue/theme.css b/src/assets/components/themes/arya-blue/theme.css
@@ -4370,6 +4370,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon {
   border: 1px solid #383838;
   padding: 1rem;
   border-radius: 3px;
+  gap: 0.5rem;
 }
 .p-toolbar .p-toolbar-separator {
   margin: 0 0.5rem;
@@ -5576,6 +5577,19 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon {
   border: 1px solid #383838;
   border-width: 0 0 2px 0;
 }
+.p-tabmenu .p-tabmenu-nav .p-menuitem-badge {
+  background: #64B5F6;
+  color: #212529;
+  font-size: 0.75rem;
+  font-weight: 700;
+  min-width: 1.5rem;
+  height: 1.5rem;
+  line-height: 1.5rem;
+  border-radius: 3px;
+  margin-left: 0.5rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
 .p-tabmenu .p-tabmenu-nav .p-tabmenuitem {
   margin-right: 0;
 }

diff --git a/src/assets/components/themes/arya-green/theme.css b/src/assets/components/themes/arya-green/theme.css
@@ -4370,6 +4370,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon {
   border: 1px solid #383838;
   padding: 1rem;
   border-radius: 3px;
+  gap: 0.5rem;
 }
 .p-toolbar .p-toolbar-separator {
   margin: 0 0.5rem;
@@ -5576,6 +5577,19 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon {
   border: 1px solid #383838;
   border-width: 0 0 2px 0;
 }
+.p-tabmenu .p-tabmenu-nav .p-menuitem-badge {
+  background: #81C784;
+  color: #212529;
+  font-size: 0.75rem;
+  font-weight: 700;
+  min-width: 1.5rem;
+  height: 1.5rem;
+  line-height: 1.5rem;
+  border-radius: 3px;
+  margin-left: 0.5rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
 .p-tabmenu .p-tabmenu-nav .p-tabmenuitem {
   margin-right: 0;
 }

diff --git a/src/assets/components/themes/arya-orange/theme.css b/src/assets/components/themes/arya-orange/theme.css
@@ -4370,6 +4370,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon {
   border: 1px solid #383838;
   padding: 1rem;
   border-radius: 3px;
+  gap: 0.5rem;
 }
 .p-toolbar .p-toolbar-separator {
   margin: 0 0.5rem;
@@ -5576,6 +5577,19 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon {
   border: 1px solid #383838;
   border-width: 0 0 2px 0;
 }
+.p-tabmenu .p-tabmenu-nav .p-menuitem-badge {
+  background: #FFD54F;
+  color: #212529;
+  font-size: 0.75rem;
+  font-weight: 700;
+  min-width: 1.5rem;
+  height: 1.5rem;
+  line-height: 1.5rem;
+  border-radius: 3px;
+  margin-left: 0.5rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
 .p-tabmenu .p-tabmenu-nav .p-tabmenuitem {
   margin-right: 0;
 }

diff --git a/src/assets/components/themes/arya-purple/theme.css b/src/assets/components/themes/arya-purple/theme.css
@@ -4370,6 +4370,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon {
   border: 1px solid #383838;
   padding: 1rem;
   border-radius: 3px;
+  gap: 0.5rem;
 }
 .p-toolbar .p-toolbar-separator {
   margin: 0 0.5rem;
@@ -5576,6 +5577,19 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon {
   border: 1px solid #383838;
   border-width: 0 0 2px 0;
 }
+.p-tabmenu .p-tabmenu-nav .p-menuitem-badge {
+  background: #BA68C8;
+  color: #ffffff;
+  font-size: 0.75rem;
+  font-weight: 700;
+  min-width: 1.5rem;
+  height: 1.5rem;
+  line-height: 1.5rem;
+  border-radius: 3px;
+  margin-left: 0.5rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
 .p-tabmenu .p-tabmenu-nav .p-tabmenuitem {
   margin-right: 0;
 }

diff --git a/src/assets/components/themes/bootstrap4-dark-blue/theme.css b/src/assets/components/themes/bootstrap4-dark-blue/theme.css
@@ -4382,6 +4382,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon {
   border: 1px solid #3f4b5b;
   padding: 1rem 1.25rem;
   border-radius: 4px;
+  gap: 0.5rem;
 }
 .p-toolbar .p-toolbar-separator {
   margin: 0 0.5rem;
@@ -5588,6 +5589,19 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon {
   border: 1px solid #3f4b5b;
   border-width: 0 0 1px 0;
 }
+.p-tabmenu .p-tabmenu-nav .p-menuitem-badge {
+  background: #8dd0ff;
+  color: #151515;
+  font-size: 0.75rem;
+  font-weight: 700;
+  min-width: 1.5rem;
+  height: 1.5rem;
+  line-height: 1.5rem;
+  border-radius: 4px;
+  margin-left: 0.5rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
 .p-tabmenu .p-tabmenu-nav .p-tabmenuitem {
   margin-right: 0;
 }

diff --git a/src/assets/components/themes/bootstrap4-dark-purple/theme.css b/src/assets/components/themes/bootstrap4-dark-purple/theme.css
@@ -4382,6 +4382,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon {
   border: 1px solid #3f4b5b;
   padding: 1rem 1.25rem;
   border-radius: 4px;
+  gap: 0.5rem;
 }
 .p-toolbar .p-toolbar-separator {
   margin: 0 0.5rem;
@@ -5588,6 +5589,19 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon {
   border: 1px solid #3f4b5b;
   border-width: 0 0 1px 0;
 }
+.p-tabmenu .p-tabmenu-nav .p-menuitem-badge {
+  background: #c298d8;
+  color: #151515;
+  font-size: 0.75rem;
+  font-weight: 700;
+  min-width: 1.5rem;
+  height: 1.5rem;
+  line-height: 1.5rem;
+  border-radius: 4px;
+  margin-left: 0.5rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
 .p-tabmenu .p-tabmenu-nav .p-tabmenuitem {
   margin-right: 0;
 }

diff --git a/src/assets/components/themes/bootstrap4-light-blue/theme.css b/src/assets/components/themes/bootstrap4-light-blue/theme.css
@@ -4382,6 +4382,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon {
   border: 1px solid #dee2e6;
   padding: 1rem 1.25rem;
   border-radius: 4px;
+  gap: 0.5rem;
 }
 .p-toolbar .p-toolbar-separator {
   margin: 0 0.5rem;
@@ -5588,6 +5589,19 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon {
   border: 1px solid #dee2e6;
   border-width: 0 0 1px 0;
 }
+.p-tabmenu .p-tabmenu-nav .p-menuitem-badge {
+  background: #007bff;
+  color: #ffffff;
+  font-size: 0.75rem;
+  font-weight: 700;
+  min-width: 1.5rem;
+  height: 1.5rem;
+  line-height: 1.5rem;
+  border-radius: 4px;
+  margin-left: 0.5rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
 .p-tabmenu .p-tabmenu-nav .p-tabmenuitem {
   margin-right: 0;
 }

diff --git a/src/assets/components/themes/bootstrap4-light-purple/theme.css b/src/assets/components/themes/bootstrap4-light-purple/theme.css
@@ -4382,6 +4382,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon {
   border: 1px solid #dee2e6;
   padding: 1rem 1.25rem;
   border-radius: 4px;
+  gap: 0.5rem;
 }
 .p-toolbar .p-toolbar-separator {
   margin: 0 0.5rem;
@@ -5588,6 +5589,19 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon {
   border: 1px solid #dee2e6;
   border-width: 0 0 1px 0;
 }
+.p-tabmenu .p-tabmenu-nav .p-menuitem-badge {
+  background: #883cae;
+  color: #ffffff;
+  font-size: 0.75rem;
+  font-weight: 700;
+  min-width: 1.5rem;
+  height: 1.5rem;
+  line-height: 1.5rem;
+  border-radius: 4px;
+  margin-left: 0.5rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
 .p-tabmenu .p-tabmenu-nav .p-tabmenuitem {
   margin-right: 0;
 }

diff --git a/src/assets/components/themes/fluent-light/theme.css b/src/assets/components/themes/fluent-light/theme.css
@@ -4346,6 +4346,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon {
   border: 1px solid #a19f9d;
   padding: 1rem;
   border-radius: 2px;
+  gap: 0.5rem;
 }
 .p-toolbar .p-toolbar-separator {
   margin: 0 0.5rem;
@@ -5528,6 +5529,19 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon {
   border: 0 none;
   border-width: 0 0 2px 0;
 }
+.p-tabmenu .p-tabmenu-nav .p-menuitem-badge {
+  background: #0078d4;
+  color: #ffffff;
+  font-size: 0.75rem;
+  font-weight: 700;
+  min-width: 1.5rem;
+  height: 1.5rem;
+  line-height: 1.5rem;
+  border-radius: 2px;
+  margin-left: 0.5rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
 .p-tabmenu .p-tabmenu-nav .p-tabmenuitem {
   margin-right: 0;
 }

diff --git a/src/assets/components/themes/lara-dark-blue/theme.css b/src/assets/components/themes/lara-dark-blue/theme.css
@@ -4346,6 +4346,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon {
   border: 1px solid #0b213f;
   padding: 1.25rem;
   border-radius: 6px;
+  gap: 0.5rem;
 }
 .p-toolbar .p-toolbar-separator {
   margin: 0 0.5rem;
@@ -5528,6 +5529,19 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon {
   border: 1px solid #0b213f;
   border-width: 0 0 2px 0;
 }
+.p-tabmenu .p-tabmenu-nav .p-menuitem-badge {
+  background: #93C5FD;
+  color: #1c2127;
+  font-size: 0.75rem;
+  font-weight: 700;
+  min-width: 1.5rem;
+  height: 1.5rem;
+  line-height: 1.5rem;
+  border-radius: 6px;
+  margin-left: 0.5rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
 .p-tabmenu .p-tabmenu-nav .p-tabmenuitem {
   margin-right: 0;
 }

diff --git a/src/assets/components/themes/lara-dark-indigo/theme.css b/src/assets/components/themes/lara-dark-indigo/theme.css
@@ -4346,6 +4346,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon {
   border: 1px solid #0b213f;
   padding: 1.25rem;
   border-radius: 6px;
+  gap: 0.5rem;
 }
 .p-toolbar .p-toolbar-separator {
   margin: 0 0.5rem;
@@ -5528,6 +5529,19 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon {
   border: 1px solid #0b213f;
   border-width: 0 0 2px 0;
 }
+.p-tabmenu .p-tabmenu-nav .p-menuitem-badge {
+  background: #A5B4FC;
+  color: #1c2127;
+  font-size: 0.75rem;
+  font-weight: 700;
+  min-width: 1.5rem;
+  height: 1.5rem;
+  line-height: 1.5rem;
+  border-radius: 6px;
+  margin-left: 0.5rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
 .p-tabmenu .p-tabmenu-nav .p-tabmenuitem {
   margin-right: 0;
 }