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

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

@@ -0,0 +1,34 @@
+import { Injectable, Type } from '@angular/core';
+import { DialogService, DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog';
+import { DialogSize } from './dialog.component';
+
+export type UiDynamicDialogConfig<DataType = any> = Omit<DynamicDialogConfig<DataType>, 'styleClass'> & {
+  size?: DialogSize;
+  styleClass?: string;
+};
+
+export { DynamicDialogRef, DynamicDialogConfig };
+
+@Injectable()
+export class UiDialogService {
+  constructor(private readonly primengDialogService: DialogService) {}
+
+  open<T>(componentType: Type<T>, config: UiDynamicDialogConfig = {}): DynamicDialogRef<T> | null {
+    const { size, styleClass, ...rest } = config;
+    const sizeClass = this.toSizeClass(size);
+    const mergedStyleClass = [sizeClass, styleClass].filter(Boolean).join(' ');
+
+    return this.primengDialogService.open(componentType, {
+      ...rest,
+      ...(mergedStyleClass && { styleClass: mergedStyleClass }),
+      appendTo: rest.appendTo ?? 'body',
+    });
+  }
+
+  private toSizeClass(size?: DialogSize): string {
+    if (size === 'sm') return 'p-dialog-sm';
+    if (size === 'lg') return 'p-dialog-lg';
+    if (size === 'xlg') return 'p-dialog-xlg';
+    return '';
+  }
+}

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

@@ -0,0 +1,58 @@
+import { Component, EventEmitter, Input, Output, TemplateRef } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import { Dialog } from 'primeng/dialog';
+import { PrimeTemplate } from 'primeng/api';
+
+export type DialogSize = 'sm' | 'default' | 'lg' | 'xlg';
+
+@Component({
+  selector: 'dialog',
+  host: { style: 'display: contents' },
+  standalone: true,
+  imports: [Dialog, NgTemplateOutlet, PrimeTemplate],
+  template: `
+    <p-dialog
+      [header]="header"
+      [visible]="visible"
+      (visibleChange)="visibleChange.emit($event)"
+      [modal]="modal"
+      [dismissableMask]="dismissableMask"
+      [closeOnEscape]="closeOnEscape"
+      [showHeader]="showHeader"
+      [focusOnShow]="focusOnShow"
+      [styleClass]="sizeClass"
+      [appendTo]="appendTo"
+    >
+      @if (headerTemplate) {
+        <ng-template pTemplate="header">
+          <ng-container [ngTemplateOutlet]="headerTemplate"></ng-container>
+        </ng-template>
+      }
+      <ng-content></ng-content>
+      <ng-template pTemplate="footer">
+        <ng-container [ngTemplateOutlet]="footerTemplate"></ng-container>
+      </ng-template>
+    </p-dialog>
+  `,
+})
+export class DialogComponent {
+  @Input() header = '';
+  @Input() visible = false;
+  @Input() modal = true;
+  @Input() size: DialogSize = 'default';
+  @Input() dismissableMask = false;
+  @Input() closeOnEscape = true;
+  @Input() showHeader = true;
+  @Input() focusOnShow = false;
+  @Input() appendTo: string = 'body';
+  @Input() headerTemplate: TemplateRef<any> | null = null;
+  @Input() footerTemplate: TemplateRef<any> | null = null;
+  @Output() visibleChange = new EventEmitter<boolean>();
+
+  get sizeClass(): string {
+    if (this.size === 'sm') return 'p-dialog-sm';
+    if (this.size === 'lg') return 'p-dialog-lg';
+    if (this.size === 'xlg') return 'p-dialog-xlg';
+    return '';
+  }
+}

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

@@ -0,0 +1,53 @@
+export const dialogCss = ({ dt }: { dt: (token: string) => string }): string => `
+  .p-dialog .p-dialog-title {
+    font-family: ${dt('fonts.fontFamily.heading')};
+    font-size: ${dt('dialog.title.fontSize')};
+    font-weight: ${dt('dialog.title.fontWeight')};
+    line-height: ${dt('fonts.lineHeight.550')};
+  }
+
+  .p-dialog .p-dialog-content {
+    font-family: ${dt('fonts.fontFamily.base')};
+    font-size: ${dt('fonts.fontSize.300')};
+    font-weight: ${dt('fonts.fontWeight.regular')};
+    line-height: ${dt('fonts.lineHeight.500')};
+  }
+
+  .p-dialog .p-dialog-header {
+    border-bottom: ${dt('borderWidth.100')} solid ${dt('dialog.root.borderColor')};
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .p-dialog .p-dialog-header-actions {
+    display: flex;
+    align-items: center;
+    margin-left: auto;
+  }
+
+  .p-dialog .p-dialog-header-actions .p-dialog-close-button.p-button-text:focus-visible,
+  .p-dialog .p-dialog-header-actions .p-dialog-close-button.p-button:focus-visible,
+  .p-dialog .p-button-text:focus-visible,
+  .p-dialog .p-button:focus-visible {
+    outline: 0 none;
+    outline-color: transparent;
+    box-shadow: none;
+  }
+
+  .p-dialog {
+    width: ${dt('sizing.80x')};
+  }
+
+  .p-dialog.p-component.p-dialog-sm {
+    width: ${dt('overlay.sm.width')};
+  }
+
+  .p-dialog.p-component.p-dialog-lg {
+    width: ${dt('overlay.lg.width')};
+  }
+
+  .p-dialog.p-component.p-dialog-xlg {
+    width: ${dt('overlay.xlg.width')};
+  }
+`;

src/prime-preset/tokens/tokens.json

@@ -2753,7 +2753,7 @@
         "padding": "{content.padding.400}"
       },
       "footer": {
-        "padding": "0 {overlay.modal.padding.md} {overlay.modal.padding.md} {overlay.modal.padding.md}",
+        "padding": "0 {overlay.modal.padding.300} {overlay.modal.padding.300} {overlay.modal.padding.300}",
         "gap": "{content.gap.200}"
       }
     },