Merge pull request #16134 from primefaces/issue-16133

Fixed #16133 - pBadge | Add missing badgeStyle & badgeStyleClass to d…
primefaces · Aug 1, 2024 · 09fc45f · 09fc45f
2 parents 62f6e22 + d8936c0
commit 09fc45f
Showing 1 changed file with 30 additions and 1 deletion.
diff --git a/src/app/components/badge/badge.ts b/src/app/components/badge/badge.ts
@@ -47,9 +47,21 @@ export class BadgeDirective implements OnChanges, AfterViewInit {
      * @group Props
      */
     @Input() public value: string | number;
+    /**
+     * Inline style of the element.
+     * @group Props
+     */
+    @Input() badgeStyle: { [klass: string]: any } | null | undefined;
+    /**
+     * Class of the element.
+     * @group Props
+     */
+    @Input() badgeStyleClass: string;
 
     private id!: string;
 
+    badgeEl: HTMLElement;
+
     private get activeElement(): HTMLElement {
         return this.el.nativeElement.nodeName.indexOf('-') != -1 ? this.el.nativeElement.firstChild : this.el.nativeElement;
     }
@@ -60,7 +72,7 @@ export class BadgeDirective implements OnChanges, AfterViewInit {
 
     constructor(@Inject(DOCUMENT) private document: Document, public el: ElementRef, private renderer: Renderer2) {}
 
-    public ngOnChanges({ value, size, severity, disabled }: SimpleChanges): void {
+    public ngOnChanges({ value, size, severity, disabled, badgeStyle, badgeStyleClass }: SimpleChanges): void {
         if (disabled) {
             this.toggleDisableState();
         }
@@ -80,6 +92,10 @@ export class BadgeDirective implements OnChanges, AfterViewInit {
         if (value) {
             this.setValue();
         }
+
+        if (badgeStyle || badgeStyleClass) {
+            this.applyStyles();
+        }
     }
 
     public ngAfterViewInit(): void {
@@ -165,6 +181,19 @@ export class BadgeDirective implements OnChanges, AfterViewInit {
         this.setValue(badge);
         DomHandler.addClass(el, 'p-overlay-badge');
         this.renderer.appendChild(el, badge);
+        this.badgeEl = badge;
+        this.applyStyles();
+    }
+
+    private applyStyles(): void {
+        if (this.badgeEl && this.badgeStyle && typeof this.badgeStyle === 'object') {
+            for (const [key, value] of Object.entries(this.badgeStyle)) {
+                this.renderer.setStyle(this.badgeEl, key, value);
+            }
+        }
+        if (this.badgeEl && this.badgeStyleClass) {
+            this.badgeEl.classList.add(...this.badgeStyleClass.split(' '));
+        }
     }
 
     private setSeverity(oldSeverity?: 'success' | 'info' | 'warning' | 'danger' | null, element?: HTMLElement): void {