Skip to content

Commit 96fe184

Browse files
cetincakiroglucetincakiroglu
committed
refactor: update message structure
1 parent 2eafdf9 commit 96fe184

File tree

2 files changed

+46
-38
lines changed

2 files changed

+46
-38
lines changed

‎packages/primeng/src/message/message.ts‎

Lines changed: 41 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -22,51 +22,55 @@ const MESSAGE_INSTANCE = new InjectionToken<Message>('MESSAGE_INSTANCE');
2222
imports: [CommonModule, TimesIcon, Ripple, SharedModule, Bind, MotionModule],
2323
template: `
2424
<p-motion [visible]="visible()" name="p-message2" [options]="computedMotionOptions()" [appear]="true">
25-
<div [pBind]="ptm('root')" [attr.aria-live]="'polite'" [class]="cn(cx('root'), styleClass)" [attr.role]="'alert'" [attr.data-p]="dataP">
26-
<div [pBind]="ptm('content')" [class]="cx('content')" [attr.data-p]="dataP">
27-
@if (iconTemplate || _iconTemplate) {
28-
<ng-container *ngTemplateOutlet="iconTemplate || _iconTemplate"></ng-container>
29-
}
30-
@if (icon) {
31-
<i [pBind]="ptm('icon')" [class]="cn(cx('icon'), icon)" [attr.data-p]="dataP"></i>
32-
}
25+
<div [pBind]="ptm('content')" [class]="cx('content')" [attr.data-p]="dataP">
26+
@if (iconTemplate || _iconTemplate) {
27+
<ng-container *ngTemplateOutlet="iconTemplate || _iconTemplate"></ng-container>
28+
}
29+
@if (icon) {
30+
<i [pBind]="ptm('icon')" [class]="cn(cx('icon'), icon)" [attr.data-p]="dataP"></i>
31+
}
3332
34-
@if (containerTemplate || _containerTemplate) {
35-
<ng-container *ngTemplateOutlet="containerTemplate || _containerTemplate; context: { closeCallback: closeCallback }"></ng-container>
36-
} @else {
37-
<div *ngIf="!escape; else escapeOut">
38-
<span [pBind]="ptm('text')" *ngIf="!escape" [ngClass]="cx('text')" [innerHTML]="text" [attr.data-p]="dataP"></span>
39-
</div>
33+
@if (containerTemplate || _containerTemplate) {
34+
<ng-container *ngTemplateOutlet="containerTemplate || _containerTemplate; context: { closeCallback: closeCallback }"></ng-container>
35+
} @else {
36+
<div *ngIf="!escape; else escapeOut">
37+
<span [pBind]="ptm('text')" *ngIf="!escape" [ngClass]="cx('text')" [innerHTML]="text" [attr.data-p]="dataP"></span>
38+
</div>
4039
41-
<ng-template #escapeOut>
42-
<span [pBind]="ptm('text')" *ngIf="escape && text" [ngClass]="cx('text')" [attr.data-p]="dataP">{{ text }}</span>
43-
</ng-template>
40+
<ng-template #escapeOut>
41+
<span [pBind]="ptm('text')" *ngIf="escape && text" [ngClass]="cx('text')" [attr.data-p]="dataP">{{ text }}</span>
42+
</ng-template>
4443
45-
<span [pBind]="ptm('text')" [ngClass]="cx('text')" [attr.data-p]="dataP">
46-
<ng-content></ng-content>
47-
</span>
48-
}
49-
@if (closable) {
50-
<button [pBind]="ptm('closeButton')" pRipple type="button" [class]="cx('closeButton')" (click)="close($event)" [attr.aria-label]="closeAriaLabel" [attr.data-p]="dataP">
51-
@if (closeIcon) {
52-
<i [pBind]="ptm('closeIcon')" [class]="cn(cx('closeIcon'), closeIcon)" [ngClass]="closeIcon" [attr.data-p]="dataP"></i>
53-
}
54-
@if (closeIconTemplate || _closeIconTemplate) {
55-
<ng-container *ngTemplateOutlet="closeIconTemplate || _closeIconTemplate"></ng-container>
56-
}
57-
@if (!closeIconTemplate && !_closeIconTemplate && !closeIcon) {
58-
<svg [pBind]="ptm('closeIcon')" data-p-icon="times" [class]="cx('closeIcon')" [attr.data-p]="dataP" />
59-
}
60-
</button>
61-
}
62-
</div>
44+
<span [pBind]="ptm('text')" [ngClass]="cx('text')" [attr.data-p]="dataP">
45+
<ng-content></ng-content>
46+
</span>
47+
}
48+
@if (closable) {
49+
<button [pBind]="ptm('closeButton')" pRipple type="button" [class]="cx('closeButton')" (click)="close($event)" [attr.aria-label]="closeAriaLabel" [attr.data-p]="dataP">
50+
@if (closeIcon) {
51+
<i [pBind]="ptm('closeIcon')" [class]="cn(cx('closeIcon'), closeIcon)" [ngClass]="closeIcon" [attr.data-p]="dataP"></i>
52+
}
53+
@if (closeIconTemplate || _closeIconTemplate) {
54+
<ng-container *ngTemplateOutlet="closeIconTemplate || _closeIconTemplate"></ng-container>
55+
}
56+
@if (!closeIconTemplate && !_closeIconTemplate && !closeIcon) {
57+
<svg [pBind]="ptm('closeIcon')" data-p-icon="times" [class]="cx('closeIcon')" [attr.data-p]="dataP" />
58+
}
59+
</button>
60+
}
6361
</div>
6462
</p-motion>
6563
`,
6664
changeDetection: ChangeDetectionStrategy.OnPush,
6765
encapsulation: ViewEncapsulation.None,
6866
providers: [MessageStyle, { provide: MESSAGE_INSTANCE, useExisting: Message }, { provide: PARENT_INSTANCE, useExisting: Message }],
69-
hostDirectives: [Bind]
67+
hostDirectives: [Bind],
68+
host: {
69+
'[attr.data-p]': 'dataP',
70+
role: 'alert',
71+
'aria-live': 'polite',
72+
'[class]': 'cn(cx("root"), styleClass)'
73+
}
7074
})
7175
export class Message extends BaseComponent<MessagePassThrough> {
7276
_componentStyle = inject(MessageStyle);
@@ -76,7 +80,7 @@ export class Message extends BaseComponent<MessagePassThrough> {
7680
$pcMessage: Message | undefined = inject(MESSAGE_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;
7781

7882
onAfterViewChecked(): void {
79-
this.bindDirectiveInstance.setAttrs(this.ptm('host'));
83+
this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
8084
}
8185

8286
/**

‎packages/primeng/src/message/style/messagestyle.ts‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,10 @@ import { BaseStyle } from 'primeng/base';
44
const style = /*css*/ `
55
${message_style}
66
7+
.p-message {
8+
display: block;
9+
}
10+
711
/* Animations */
812
.p-message2-enter-active {
913
animation: p-animate-message-enter 200ms ease-out;
@@ -32,7 +36,7 @@ ${message_style}
3236
}
3337
`;
3438
const classes = {
35-
root: ({ instance }) => ['p-message p-component p-message-' + instance.severity, 'p-message-' + instance.variant, { 'p-message-sm': instance.size === 'small', 'p-message-lg': instance.size === 'large' }],
39+
root: ({ instance }) => ['p-message p-component p-message-' + instance.severity, instance.variant && 'p-message-' + instance.variant, { 'p-message-sm': instance.size === 'small', 'p-message-lg': instance.size === 'large' }],
3640
content: 'p-message-content',
3741
icon: 'p-message-icon',
3842
text: 'p-message-text',

0 commit comments

Comments
 (0)