Overlay.dialog

.gitignore

@@ -56,6 +56,6 @@ src/assets/components/themes
 /debug-storybook.log
 /documentation.json
 
-.claude/*
-
 .playwright-mcp/*
+
+.claude/*

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

@@ -0,0 +1,88 @@
+import { Component, Input, TemplateRef } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import { ConfirmDialog } from 'primeng/confirmdialog';
+import { PrimeTemplate } from 'primeng/api';
+import { ExtraButtonComponent } from '../button/button.component';
+
+export type ExtraConfirmDialogSize = 'sm' | 'default' | 'lg' | 'xlg';
+export type ExtraConfirmDialogSeverity = 'success' | 'info' | 'warn' | 'help' | 'danger' | 'default';
+
+@Component({
+  selector: 'extra-confirm-dialog',
+  host: { style: 'display: contents' },
+  standalone: true,
+  imports: [ConfirmDialog, ExtraButtonComponent, 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>
+            <extra-button
+              styleClass="p-dialog-close-button"
+              variant="text"
+              icon="ti ti-x"
+              [rounded]="true"
+              [iconOnly]="true"
+              (click)="onReject()"
+            ></extra-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">
+            <extra-button
+              [label]="message.rejectLabel"
+              variant="text"
+              (click)="onReject()"
+            ></extra-button>
+            <extra-button
+              [label]="message.acceptLabel"
+              [severity]="message.acceptButtonProps?.severity"
+              (click)="onAccept()"
+            ></extra-button>
+          </div>
+        }
+      </ng-template>
+    </p-confirmDialog>
+  `,
+})
+export class ExtraConfirmDialogComponent {
+  @Input() key = '';
+  @Input() size: ExtraConfirmDialogSize = 'default';
+  @Input() severity: ExtraConfirmDialogSeverity = '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<ExtraConfirmDialogSeverity, 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,20 @@
+import { Injectable, Provider } from '@angular/core';
+import { Confirmation, ConfirmationService } from 'primeng/api';
+
+export type ConfirmDialogOptions = Pick<
+  Confirmation,
+  'key' | 'message' | 'header' | 'icon' | 'acceptLabel' | 'rejectLabel' | 'accept' | 'reject' | 'acceptButtonProps'
+>;
+
+export function provideConfirmDialog(): Provider[] {
+  return [ConfirmationService, ConfirmDialogService];
+}
+
+@Injectable()
+export class ConfirmDialogService {
+  constructor(private readonly confirmationService: ConfirmationService) {}
+
+  confirm(options: ConfirmDialogOptions): void {
+    this.confirmationService.confirm(options);
+  }
+}

src/lib/components/confirm-dialog/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "ng-packagr/ng-package.schema.json",
+  "lib": {
+    "entryFile": "public_api.ts"
+  }
+}
+

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

@@ -0,0 +1,2 @@
+export * from './confirm-dialog.component';
+export * from './confirm-dialog.service';

src/lib/providers/prime-preset/map-tokens.ts

@@ -23,6 +23,7 @@ import { messageCss } from './tokens/components/message';
 import { inputotpCss } from './tokens/components/inputotp';
 import { carouselCss } from './tokens/components/carousel';
 import { galleriaCss } from './tokens/components/galleria';
+import { confirmDialogCss } from './tokens/components/confirm-dialog';
 
 const presetTokens: Preset<AuraBaseDesignTokens> = {
   primitive: tokens.primitive as unknown as AuraBaseDesignTokens['primitive'],
@@ -31,76 +32,80 @@ const presetTokens: Preset<AuraBaseDesignTokens> = {
     ...(tokens.components as unknown as ComponentsDesignTokens),
     avatar: {
       ...(tokens.components.avatar as unknown as ComponentsDesignTokens['avatar']),
-      css: avatarCss,
+      css: avatarCss
     },
     card: {
       ...(tokens.components.card as unknown as ComponentsDesignTokens['card']),
-      css: cardCss,
+      css: cardCss
     },
     checkbox: {
       ...(tokens.components.checkbox as unknown as ComponentsDesignTokens['checkbox']),
-      css: checkboxCss,
+      css: checkboxCss
     },
     button: {
       ...(tokens.components.button as unknown as ComponentsDesignTokens['button']),
-      css: buttonCss,
+      css: buttonCss
     },
     message: {
       ...(tokens.components.message as unknown as ComponentsDesignTokens['message']),
-      css: messageCss,
+      css: messageCss
     },
     progressspinner: {
       ...(tokens.components.progressspinner as unknown as ComponentsDesignTokens['progressspinner']),
-      css: progressspinnerCss,
+      css: progressspinnerCss
     },
     inputotp: {
       ...(tokens.components.inputotp as unknown as ComponentsDesignTokens['inputotp']),
-      css: inputotpCss,
+      css: inputotpCss
     },
     inputtext: {
       ...(tokens.components.inputtext as unknown as ComponentsDesignTokens['inputtext']),
-      css: inputtextCss,
+      css: inputtextCss
     },
     inputmask: {
-      css: inputmaskCss,
+      css: inputmaskCss
     },
     inputgroup: {
       ...(tokens.components.inputgroup as unknown as ComponentsDesignTokens['inputgroup']),
-      css: inputgroupCss,
+      css: inputgroupCss
     },
     tag: {
       ...(tokens.components.tag as unknown as ComponentsDesignTokens['tag']),
-      css: tagCss,
+      css: tagCss
     },
     textarea: {
       ...(tokens.components.textarea as unknown as ComponentsDesignTokens['textarea']),
-      css: textareaCss,
+      css: textareaCss
     },
     tooltip: {
       ...(tokens.components.tooltip as unknown as ComponentsDesignTokens['tooltip']),
-      css: tooltipCss,
+      css: tooltipCss
     },
     megamenu: {
       ...(tokens.components.megamenu as unknown as ComponentsDesignTokens['megamenu']),
-      css: megamenuCss,
+      css: megamenuCss
     },
     select: {
       ...(tokens.components.select as unknown as ComponentsDesignTokens['select']),
-      css: selectCss,
+      css: selectCss
     },
     passwordCss: {
       ...(tokens.components.password as unknown as ComponentsDesignTokens['password']),
       css: passwordCss
     },
     carousel: {
       ...(tokens.components.carousel as unknown as ComponentsDesignTokens['carousel']),
-      css: carouselCss,
+      css: carouselCss
     },
     galleria: {
       ...(tokens.components.galleria as unknown as ComponentsDesignTokens['galleria']),
-      css: galleriaCss,
+      css: galleriaCss
     },
-  } as ComponentsDesignTokens,
+    confirmdialog: {
+      ...(tokens.components.confirmdialog as unknown as ComponentsDesignTokens['confirmdialog']),
+      css: confirmDialogCss
+    }
+  } as ComponentsDesignTokens
 };
 
 export default presetTokens;

src/lib/providers/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/lib/providers/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')};
   }
 `;