Merge remote-tracking branch 'origin/master'

# Conflicts: # packages/primeng/src/chip/chip.ts # packages/primeng/src/panel/panel.ts # packages/primeng/src/tag/tag.ts
primefaces · Dec 13, 2024 · 9d1c9a1 · 9d1c9a1
2 parents 39af737 + 06a4c28
commit 9d1c9a1
Show file tree

Hide file tree

Showing 6 changed files with 116 additions and 66 deletions.
diff --git a/apps/showcase/components/layout/designer/app.designer.component.ts b/apps/showcase/components/layout/designer/app.designer.component.ts
@@ -322,6 +322,7 @@ export class AppDesignerComponent {
         this.saveTheme();
         updatePreset(this.preset);
         this.designerService.preset.update((state) => ({ ...state, ...this.preset }));
+        this.configService.appState.update((state) => ({ ...state }));
     }
 
     saveTheme() {

diff --git a/apps/showcase/doc/chip/templatedoc.ts b/apps/showcase/doc/chip/templatedoc.ts
@@ -8,7 +8,7 @@ import { Component } from '@angular/core';
             <p>Content can easily be customized with the dynamic content instead of using the built-in modes.</p>
         </app-docsectiontext>
         <div class="card">
-            <p-chip styleClass="!py-0 !pl-0 !pr-4">
+            <p-chip class="!py-0 !pl-0 !pr-4">
                 <span class="bg-primary text-primary-contrast rounded-full w-8 h-8 flex items-center justify-center">P</span>
                 <span class="ml-2 font-medium">PRIME</span>
             </p-chip>
@@ -18,7 +18,7 @@ import { Component } from '@angular/core';
 })
 export class TemplateDoc {
     code: Code = {
-        basic: `<p-chip styleClass="!py-0 !pl-0 !pr-4">
+        basic: `<p-chip class="!py-0 !pl-0 !pr-4">
     <span class="bg-primary text-primary-contrast rounded-full w-8 h-8 flex items-center justify-center">
         P
     </span>
@@ -27,7 +27,7 @@ export class TemplateDoc {
     </span>
 </p-chip>`,
         html: `<div class="card">
-    <p-chip styleClass="!py-0 !pl-0 !pr-4">
+    <p-chip class="!py-0 !pl-0 !pr-4">
         <span class="bg-primary text-primary-contrast rounded-full w-8 h-8 flex items-center justify-center">
             P
         </span>

diff --git a/packages/primeng/src/badge/badge.ts b/packages/primeng/src/badge/badge.ts
@@ -240,16 +240,17 @@ export class BadgeDirective extends BaseComponent implements OnChanges, AfterVie
  */
 @Component({
     selector: 'p-badge',
-    template: `
-        @if (!badgeDisabled()) {
-            <span [ngClass]="containerClass()" [class]="styleClass()" [ngStyle]="style()">{{ value() }}</span>
-        }
-    `,
+    template: `{{ value() }}`,
     standalone: true,
     imports: [CommonModule, SharedModule],
     changeDetection: ChangeDetectionStrategy.OnPush,
     encapsulation: ViewEncapsulation.None,
-    providers: [BadgeStyle]
+    providers: [BadgeStyle],
+    host: {
+        '[class]': 'containerClass()',
+        '[style.display]': 'badgeDisabled() && "none"',
+        '[style]': 'style()'
+    }
 })
 export class Badge extends BaseComponent {
     /**
@@ -294,16 +295,34 @@ export class Badge extends BaseComponent {
      * Computes the container class for the badge element based on its properties.
      * @returns An object representing the CSS classes to be applied to the badge container.
      */
-    containerClass = computed<{ [klass: string]: any }>(() => {
-        return {
-            'p-badge p-component': true,
-            'p-badge-circle': isNotEmpty(this.value()) && String(this.value()).length === 1,
-            'p-badge-lg': this.badgeSize() === 'large',
-            'p-badge-xl': this.badgeSize() === 'xlarge',
-            'p-badge-sm': this.badgeSize() === 'small',
-            'p-badge-dot': isEmpty(this.value()),
-            [`p-badge-${this.severity()}`]: this.severity()
-        };
+    containerClass = computed<string>(() => {
+        let classes = 'p-badge p-component';
+
+        if (isNotEmpty(this.value()) && String(this.value()).length === 1) {
+            classes += ' p-badge-circle';
+        }
+
+        if (this.badgeSize() === 'large') {
+            classes += ' p-badge-lg';
+        } else if (this.badgeSize() === 'xlarge') {
+            classes += ' p-badge-xl';
+        } else if (this.badgeSize() === 'small') {
+            classes += ' p-badge-sm';
+        }
+
+        if (isEmpty(this.value())) {
+            classes += ' p-badge-dot';
+        }
+
+        if (this.styleClass()) {
+            classes += ` ${this.styleClass()}`;
+        }
+
+        if (this.severity()) {
+            classes += ` p-badge-${this.severity()}`;
+        }
+
+        return classes;
     });
 }
 

diff --git a/packages/primeng/src/chip/chip.ts b/packages/primeng/src/chip/chip.ts
@@ -15,44 +15,41 @@ import { ChipStyle } from './style/chipstyle';
     standalone: true,
     imports: [CommonModule, TimesCircleIcon, SharedModule],
     template: `
-        <div [ngClass]="containerClass()" [class]="styleClass" [ngStyle]="style" *ngIf="visible" [attr.data-pc-name]="'chip'" [attr.aria-label]="label" [attr.data-pc-section]="'root'">
-            <ng-content></ng-content>
-            <img class="p-chip-image" [src]="image" *ngIf="image; else iconTemplate" (error)="imageError($event)" [alt]="alt" />
-            <ng-template #iconTemplate><span *ngIf="icon" [class]="icon" [ngClass]="'p-chip-icon'" [attr.data-pc-section]="'icon'"></span></ng-template>
-            <div class="p-chip-label" *ngIf="label" [attr.data-pc-section]="'label'">{{ label }}</div>
-            <ng-container *ngIf="removable">
-                <ng-container *ngIf="!removeIconTemplate && !_removeIconTemplate">
-                    <span
-                        tabindex="0"
-                        *ngIf="removeIcon"
-                        [class]="removeIcon"
-                        [ngClass]="'p-chip-remove-icon'"
-                        [attr.data-pc-section]="'removeicon'"
-                        (click)="close($event)"
-                        (keydown)="onKeydown($event)"
-                        [attr.aria-label]="removeAriaLabel"
-                        role="button"
-                    ></span>
-                    <TimesCircleIcon tabindex="0" *ngIf="!removeIcon" [class]="'p-chip-remove-icon'" [attr.data-pc-section]="'removeicon'" (click)="close($event)" (keydown)="onKeydown($event)" [attr.aria-label]="removeAriaLabel" role="button" />
-                </ng-container>
+        <ng-content></ng-content>
+        <img class="p-chip-image" [src]="image" *ngIf="image; else iconTemplate" (error)="imageError($event)" [alt]="alt" />
+        <ng-template #iconTemplate><span *ngIf="icon" [class]="icon" [ngClass]="'p-chip-icon'" [attr.data-pc-section]="'icon'"></span></ng-template>
+        <div class="p-chip-label" *ngIf="label" [attr.data-pc-section]="'label'">{{ label }}</div>
+        <ng-container *ngIf="removable">
+            <ng-container *ngIf="!removeIconTemplate && !_removeIconTemplate">
                 <span
-                    *ngIf="removeIconTemplate || _removeIconTemplate"
                     tabindex="0"
+                    *ngIf="removeIcon"
+                    [class]="removeIcon"
+                    [ngClass]="'p-chip-remove-icon'"
                     [attr.data-pc-section]="'removeicon'"
-                    class="p-chip-remove-icon"
                     (click)="close($event)"
                     (keydown)="onKeydown($event)"
                     [attr.aria-label]="removeAriaLabel"
                     role="button"
-                >
-                    <ng-template *ngTemplateOutlet="removeIconTemplate || _removeIconTemplate"></ng-template>
-                </span>
+                ></span>
+                <TimesCircleIcon tabindex="0" *ngIf="!removeIcon" [class]="'p-chip-remove-icon'" [attr.data-pc-section]="'removeicon'" (click)="close($event)" (keydown)="onKeydown($event)" [attr.aria-label]="removeAriaLabel" role="button" />
             </ng-container>
-        </div>
+            <span *ngIf="removeIconTemplate || _removeIconTemplate" tabindex="0" [attr.data-pc-section]="'removeicon'" class="p-chip-remove-icon" (click)="close($event)" (keydown)="onKeydown($event)" [attr.aria-label]="removeAriaLabel" role="button">
+                <ng-template *ngTemplateOutlet="removeIconTemplate || _removeIconTemplate"></ng-template>
+            </span>
+        </ng-container>
     `,
     changeDetection: ChangeDetectionStrategy.OnPush,
     encapsulation: ViewEncapsulation.None,
-    providers: [ChipStyle]
+    providers: [ChipStyle],
+    host: {
+        '[class]': 'containerClass()',
+        '[style]': 'style',
+        '[style.display]': '!visible && "none"',
+        '[attr.data-pc-name]': "'chip'",
+        '[attr.aria-label]': 'label',
+        '[attr.data-pc-section]': "'root'"
+    }
 })
 export class Chip extends BaseComponent implements AfterContentInit {
     /**
@@ -186,9 +183,13 @@ export class Chip extends BaseComponent implements AfterContentInit {
     }
 
     containerClass() {
-        return {
-            'p-chip p-component': true
-        };
+        let classes = 'p-chip p-component';
+
+        if (this.styleClass) {
+            classes += ` ${this.styleClass}`;
+        }
+
+        return classes;
     }
 
     close(event: MouseEvent) {

diff --git a/packages/primeng/src/panel/panel.ts b/packages/primeng/src/panel/panel.ts
@@ -1,6 +1,6 @@
 import { animate, state, style, transition, trigger } from '@angular/animations';
 import { CommonModule } from '@angular/common';
-import { AfterContentInit, booleanAttribute, ChangeDetectionStrategy, Component, ContentChild, ContentChildren, EventEmitter, inject, Input, NgModule, Output, QueryList, TemplateRef, ViewEncapsulation } from '@angular/core';
+import { AfterContentInit, ViewChild, ElementRef, booleanAttribute, ChangeDetectionStrategy, Component, ContentChild, ContentChildren, EventEmitter, inject, Input, NgModule, Output, QueryList, TemplateRef, ViewEncapsulation } from '@angular/core';
 import { uuid } from '@primeuix/utils';
 import { BlockableUI, Footer, PrimeTemplate, SharedModule } from 'primeng/api';
 import { BaseComponent } from 'primeng/basecomponent';
@@ -138,7 +138,7 @@ export interface PanelHeaderIconsTemplateContext {
                 "
                 (@panelContent.done)="onToggleDone($event)"
             >
-                <div class="p-panel-content">
+                <div class="p-panel-content" #contentWrapper>
                     <ng-content></ng-content>
                     <ng-container *ngTemplateOutlet="contentTemplate || _contentTemplate"></ng-container>
                 </div>
@@ -323,6 +323,8 @@ export class Panel extends BaseComponent implements AfterContentInit, BlockableU
 
     _headerIconsTemplate: TemplateRef<any> | undefined;
 
+    @ViewChild('contentWrapper') contentWrapperViewChild: ElementRef;
+
     readonly id = uuid('pn_id_');
 
     get buttonAriaLabel() {
@@ -363,17 +365,32 @@ export class Panel extends BaseComponent implements AfterContentInit, BlockableU
     expand() {
         this.collapsed = false;
         this.collapsedChange.emit(this.collapsed);
+        this.updateTabIndex();
     }
 
     collapse() {
         this.collapsed = true;
         this.collapsedChange.emit(this.collapsed);
+        this.updateTabIndex();
     }
 
     getBlockableElement(): HTMLElement {
         return this.el.nativeElement.children[0];
     }
 
+    updateTabIndex() {
+        if (this.contentWrapperViewChild) {
+            const focusableElements = this.contentWrapperViewChild.nativeElement.querySelectorAll('input, button, select, a, textarea, [tabindex]:not([tabindex="-1"])');
+            focusableElements.forEach((element: HTMLElement) => {
+                if (this.collapsed) {
+                    element.setAttribute('tabindex', '-1');
+                } else {
+                    element.removeAttribute('tabindex');
+                }
+            });
+        }
+    }
+
     onKeyDown(event) {
         if (event.code === 'Enter' || event.code === 'Space') {
             this.toggle(event);

diff --git a/packages/primeng/src/tag/tag.ts b/packages/primeng/src/tag/tag.ts
@@ -13,20 +13,22 @@ import { TagStyle } from './style/tagstyle';
     standalone: true,
     imports: [CommonModule, SharedModule],
     template: `
-        <span [ngClass]="containerClass()" [class]="styleClass" [ngStyle]="style">
-            <ng-content></ng-content>
-            <ng-container *ngIf="!iconTemplate && !_iconTemplate">
-                <span class="p-tag-icon" [ngClass]="icon" *ngIf="icon"></span>
-            </ng-container>
-            <span class="p-tag-icon" *ngIf="iconTemplate || _iconTemplate">
-                <ng-template *ngTemplateOutlet="iconTemplate || _iconTemplate"></ng-template>
-            </span>
-            <span class="p-tag-label">{{ value }}</span>
+        <ng-content></ng-content>
+        <ng-container *ngIf="!iconTemplate && !_iconTemplate">
+            <span class="p-tag-icon" [ngClass]="icon" *ngIf="icon"></span>
+        </ng-container>
+        <span class="p-tag-icon" *ngIf="iconTemplate || _iconTemplate">
+            <ng-template *ngTemplateOutlet="iconTemplate || _iconTemplate"></ng-template>
         </span>
+        <span class="p-tag-label">{{ value }}</span>
     `,
     changeDetection: ChangeDetectionStrategy.OnPush,
     encapsulation: ViewEncapsulation.None,
-    providers: [TagStyle]
+    providers: [TagStyle],
+    host: {
+        '[class]': 'containerClass()',
+        '[style]': 'style'
+    }
 })
 export class Tag extends BaseComponent implements AfterContentInit {
     /**
@@ -88,11 +90,21 @@ export class Tag extends BaseComponent implements AfterContentInit {
     }
 
     containerClass() {
-        return {
-            'p-tag p-component': true,
-            [`p-tag-${this.severity}`]: this.severity,
-            'p-tag-rounded': this.rounded
-        };
+        let classes = 'p-tag p-component';
+
+        if (this.severity) {
+            classes += ` p-tag-${this.severity}`;
+        }
+
+        if (this.rounded) {
+            classes += ' p-tag-rounded';
+        }
+
+        if (this.styleClass) {
+            classes += ` ${this.styleClass}`;
+        }
+
+        return classes;
     }
 }