diff --git a/apps/showcase/components/layout/designer/app.designer.component.ts b/apps/showcase/components/layout/designer/app.designer.component.ts index c7f6c8acaf8..fb2e479bdae 100644 --- 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 index 6b3f487b696..f281073c689 100644 --- a/apps/showcase/doc/chip/templatedoc.ts +++ b/apps/showcase/doc/chip/templatedoc.ts @@ -8,7 +8,7 @@ import { Component } from '@angular/core';

Content can easily be customized with the dynamic content instead of using the built-in modes.

- + P PRIME @@ -18,7 +18,7 @@ import { Component } from '@angular/core'; }) export class TemplateDoc { code: Code = { - basic: ` + basic: ` P @@ -27,7 +27,7 @@ export class TemplateDoc { `, html: `
- + P diff --git a/packages/primeng/src/badge/badge.ts b/packages/primeng/src/badge/badge.ts index a69d070271c..9a1304f3bac 100755 --- 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()) { - {{ value() }} - } - `, + 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(() => { + 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 index 8185bbc23ea..2068f108128 100755 --- 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: ` -
- - - -
{{ label }}
- - - - - + + + +
{{ label }}
+ + - - + > + -
+ + + + `, 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 index 2c507610db6..3be66b3c805 100755 --- 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)" > -
+
@@ -323,6 +323,8 @@ export class Panel extends BaseComponent implements AfterContentInit, BlockableU _headerIconsTemplate: TemplateRef | 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 index b63a0bf5c51..9f097a41e15 100755 --- 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: ` - - - - - - - - - {{ value }} + + + + + + + {{ value }} `, 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; } }