confirm-dialog: стилизация, сторисы, обёртки

src/lib/components/confirm-dialog/confirm-dialog.component.ts

@@ -0,0 +1,87 @@
+import { Component, Input, TemplateRef } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import { ConfirmDialog } from 'primeng/confirmdialog';
+import { Button } from 'primeng/button';
+import { PrimeTemplate } from 'primeng/api';
+
+export type ConfirmDialogSize = 'sm' | 'default' | 'lg' | 'xlg';
+export type ConfirmDialogSeverity = 'success' | 'info' | 'warn' | 'help' | 'danger' | 'default';
+
+@Component({
+  selector: 'confirm-dialog',
+  host: { style: 'display: contents' },
+  standalone: true,
+  imports: [ConfirmDialog, Button, PrimeTemplate, NgTemplateOutlet],
+  template: `
+    <p-confirmDialog [key]="key" [styleClass]="computedClass" appendTo="body">
+      <ng-template pTemplate="headless" let-message let-onAccept="onAccept" let-onReject="onReject">
+        @if (headerTemplate) {
+          <ng-container [ngTemplateOutlet]="headerTemplate"
+            [ngTemplateOutletContext]="{ $implicit: message, onAccept, onReject }">
+          </ng-container>
+        } @else {
+          <div class="p-dialog-header">
+            <div class="p-dialog-title">
+              <i [class]="message.icon"></i>
+              <span>{{ message.header }}</span>
+            </div>
+            <button
+              class="p-button p-component p-button-icon-only p-button-rounded p-button-text p-dialog-close-button"
+              type="button"
+              (click)="onReject()"
+            >
+              <span class="p-button-icon ti ti-x"></span>
+            </button>
+          </div>
+        }
+        <div class="p-dialog-content">
+          <p>{{ message.message }}</p>
+        </div>
+        @if (footerTemplate) {
+          <ng-container [ngTemplateOutlet]="footerTemplate"
+            [ngTemplateOutletContext]="{ $implicit: message, onAccept, onReject }">
+          </ng-container>
+        } @else {
+          <div class="p-dialog-footer">
+            <p-button
+              [label]="message.rejectLabel"
+              variant="text"
+              (onClick)="onReject()"
+            ></p-button>
+            <p-button
+              [label]="message.acceptLabel"
+              [severity]="message.acceptButtonProps?.severity"
+              (onClick)="onAccept()"
+            ></p-button>
+          </div>
+        }
+      </ng-template>
+    </p-confirmDialog>
+  `,
+})
+export class ConfirmDialogComponent {
+  @Input() key = '';
+  @Input() size: ConfirmDialogSize = 'default';
+  @Input() severity: ConfirmDialogSeverity = 'default';
+  @Input() headerTemplate: TemplateRef<any> | null = null;
+  @Input() footerTemplate: TemplateRef<any> | null = null;
+
+  get computedClass(): string {
+    const classes: string[] = [];
+    if (this.size === 'sm') classes.push('p-confirmdialog-sm');
+    else if (this.size === 'lg') classes.push('p-confirmdialog-lg');
+    else if (this.size === 'xlg') classes.push('p-confirmdialog-xlg');
+
+    const severityMap: Record<ConfirmDialogSeverity, string> = {
+      success: 'p-confirm-dialog-accept',
+      info: 'p-confirm-dialog-info',
+      warn: 'p-confirm-dialog-warn',
+      help: 'p-confirm-dialog-help',
+      danger: 'p-confirm-dialog-error',
+      default: '',
+    };
+    if (severityMap[this.severity]) classes.push(severityMap[this.severity]);
+
+    return classes.join(' ');
+  }
+}

src/lib/components/confirm-dialog/confirm-dialog.service.ts

@@ -0,0 +1,16 @@
+import { Injectable } from '@angular/core';
+import { Confirmation, ConfirmationService } from 'primeng/api';
+
+export type ConfirmDialogOptions = Pick<
+  Confirmation,
+  'key' | 'message' | 'header' | 'icon' | 'acceptLabel' | 'rejectLabel' | 'accept' | 'reject' | 'acceptButtonProps'
+>;
+
+@Injectable()
+export class ConfirmDialogService {
+  constructor(private readonly confirmationService: ConfirmationService) {}
+
+  confirm(options: ConfirmDialogOptions): void {
+    this.confirmationService.confirm(options);
+  }
+}

src/prime-preset/tokens/components/confirm-dialog.ts

@@ -0,0 +1,59 @@
+export const confirmDialogCss = ({ dt }: { dt: (token: string) => string }): string => `
+  /* Иконка в заголовке */
+  .p-confirmdialog .p-dialog-title {
+    display: flex;
+    align-items: center;
+    gap: ${dt('dialog.header.gap')};
+  }
+
+  .p-confirmdialog .p-dialog-title i {
+    width: ${dt('confirmdialog.icon.size')};
+    height: ${dt('confirmdialog.icon.size')};
+    font-size: ${dt('confirmdialog.icon.size')};
+    flex-shrink: 0;
+  }
+
+  /* Размеры */
+  .p-confirmdialog.p-dialog {
+    width: ${dt('overlay.width')};
+  }
+
+  .p-confirmdialog-sm.p-dialog {
+    width: ${dt('sizing.80x')};
+  }
+
+  .p-confirmdialog-lg.p-dialog {
+    width: ${dt('sizing.120x')};
+  }
+
+  .p-confirmdialog-xlg.p-dialog {
+    width: ${dt('sizing.128x')};
+  }
+
+  /* Цвета иконок по severity */
+  .p-confirmdialog[data-pc-severity="success"] .p-dialog-title i,
+  .p-confirmdialog.p-confirm-dialog-accept .p-dialog-title i {
+    color: ${dt('confirmdialog.extend.extIcon.success')};
+  }
+
+  .p-confirmdialog[data-pc-severity="info"] .p-dialog-title i,
+  .p-confirmdialog.p-confirm-dialog-info .p-dialog-title i {
+    color: ${dt('confirmdialog.extend.extIcon.info')};
+  }
+
+  .p-confirmdialog[data-pc-severity="warn"] .p-dialog-title i,
+  .p-confirmdialog.p-confirm-dialog-warn .p-dialog-title i {
+    color: ${dt('confirmdialog.extend.extIcon.warn')};
+  }
+
+  .p-confirmdialog[data-pc-severity="help"] .p-dialog-title i,
+  .p-confirmdialog.p-confirm-dialog-help .p-dialog-title i {
+    color: ${dt('confirmdialog.extend.extIcon.help')};
+  }
+
+  .p-confirmdialog[data-pc-severity="danger"] .p-dialog-title i,
+  .p-confirmdialog[data-pc-severity="error"] .p-dialog-title i,
+  .p-confirmdialog.p-confirm-dialog-error .p-dialog-title i {
+    color: ${dt('confirmdialog.extend.extIcon.danger')};
+  }
+`;

src/prime-preset/tokens/components/dialog.ts

@@ -36,18 +36,18 @@ export const dialogCss = ({ dt }: { dt: (token: string) => string }): string =>
   }
 
   .p-dialog {
-    width: ${dt('sizing.80x')};
+    width: ${dt('overlay.width')};
   }
 
   .p-dialog.p-component.p-dialog-sm {
-    width: ${dt('overlay.sm.width')};
+    width: ${dt('sizing.80x')};
   }
 
   .p-dialog.p-component.p-dialog-lg {
-    width: ${dt('overlay.lg.width')};
+    width: ${dt('sizing.120x')};
   }
 
   .p-dialog.p-component.p-dialog-xlg {
-    width: ${dt('overlay.xlg.width')};
+    width: ${dt('sizing.128x')};
   }
 `;