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

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

@@ -0,0 +1,51 @@
+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="body"
+    >
+      <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() 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/map-tokens.ts

@@ -4,6 +4,7 @@ import type { AuraBaseDesignTokens } from '@primeuix/themes/aura/base';
 
 import tokens from './tokens/tokens.json';
 import { buttonCss } from './tokens/components/button';
+import { dialogCss } from './tokens/components/dialog';
 
 const presetTokens: Preset<AuraBaseDesignTokens> = {
   primitive: tokens.primitive as unknown as AuraBaseDesignTokens['primitive'],
@@ -14,6 +15,10 @@ const presetTokens: Preset<AuraBaseDesignTokens> = {
       ...(tokens.components.button as unknown as ComponentsDesignTokens['button']),
       css: buttonCss,
     },
+    dialog: {
+      ...(tokens.components.dialog as unknown as ComponentsDesignTokens['dialog']),
+      css: dialogCss,
+    },
   } as ComponentsDesignTokens,
 };
 

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}"
       }
     },