diff --git a/v2/ui/dialog/dialog.component.ts b/v2/ui/dialog/dialog.component.ts index 82b0c15..4e7442e 100644 --- a/v2/ui/dialog/dialog.component.ts +++ b/v2/ui/dialog/dialog.component.ts @@ -72,6 +72,12 @@ export class ZardDialogOptions { zOnCancel?: EventEmitter | OnClickCallback = noopFn; zOnOk?: EventEmitter | OnClickCallback = noopFn; zTitle?: string | TemplateRef; + /** + * Colors the title as a full-bleed banner (info/success/error), matching a + * legacy Material-dialog pattern of status-coded notice headers. Omit for + * the plain neutral heading every other dialog already uses. + */ + zStatus?: 'info' | 'success' | 'error'; zViewContainerRef?: ViewContainerRef; zWidth?: string; } @@ -94,7 +100,15 @@ export class ZardDialogOptions { } - @if (config.zTitle || config.zDescription) { + @if (config.zTitle && config.zStatus) { +
+

{{ config.zTitle }}

+
+ + @if (config.zDescription) { +

{{ config.zDescription }}

+ } + } @else if (config.zTitle || config.zDescription) {
@if (config.zTitle) {

{{ config.zTitle }}

@@ -185,6 +199,18 @@ export class ZardDialogComponent extends BasePortalOutlet { protected readonly config = inject(ZardDialogOptions); protected readonly classes = computed(() => mergeClasses(dialogVariants(), this.config.zCustomClasses)); + protected readonly statusHeaderClasses = computed(() => { + switch (this.config.zStatus) { + case 'success': + return 'bg-[var(--color-success,var(--success,#43a047))] text-[var(--color-success-foreground,var(--success-foreground,#fff))]'; + case 'error': + return 'bg-destructive text-destructive-foreground'; + case 'info': + return 'bg-[var(--color-info,var(--info,#0277bd))] text-[var(--color-info-foreground,var(--info-foreground,#fff))]'; + default: + return ''; + } + }); dialogRef?: ZardDialogRef; protected readonly isStringContent = typeof this.config.zContent === 'string';