API.toast

docs/components-api/toast.md

@@ -2,8 +2,24 @@
 
 # ExtraToast
 
+> ✅ **Реализован**: `ExtraToastComponent` (`@cdek-it/angular-ui-kit`) соответствует спецификации.
+
 Уведомление, отображаемое поверх интерфейса (overlay-вариант `ExtraMessage`; в потоке документа используется `ExtraMessage`).
 
+Показ уведомлений устроен в два уровня: сам компонент `<extra-toast>` — это контейнер, монтируемый
+один раз, а показ каждого отдельного уведомления выполняется отдельным императивным вызовом. Поэтому
+и свойства ниже разделены на два независимых набора.
+
+# Свойства компонента (`<extra-toast>`)
+
+| Свойство | Описание                                                        | Типизация |
+| -------- | ---------------------------------------------------------------- | --------- |
+| `position` | позиция группы уведомлений на экране                            | `top-right \| top-left \| top-center \| bottom-right \| bottom-left \| bottom-center \| center` |
+| `key`      | ключ контейнера; показывает только уведомления с тем же `key` (несколько независимых очередей) | `string`  |
+| `life`     | время автозакрытия по умолчанию (мс) для уведомлений этого контейнера | `number`  |
+
+# Свойства уведомления (передаются при вызове показа)
+
 | Свойство     | Описание                                                     | Типизация                              |
 | ------------ | ------------------------------------------------------------ | -------------------------------------- |
 | `severity`   | тип сообщения                                                | `info \| success \| warning \| danger` |
@@ -15,13 +31,17 @@
 
 # Слоты (content projection)
 
+Относятся к уведомлению — так же передаются при вызове показа, а не проецируются в `<extra-toast>`.
+
 | Слот      | Описание              |
 | --------- | --------------------- |
 | `content` | контент после caption |
 | `footer`  | контент футера        |
 
 # События
 
+Относится к уведомлению — передаётся полем при вызове показа, а не эмитится самим `<extra-toast>`.
+
 | Событие   | Описание                             | Типизация    |
 | --------- | ------------------------------------ | ------------ |
 | `onClose` | срабатывает при закрытии уведомления | `() => void` |

src/lib/components/toast/toast.component.ts

@@ -1,8 +1,9 @@
 import { Component, Input } from '@angular/core';
-import { Toast } from 'primeng/toast';
+import { NgTemplateOutlet } from '@angular/common';
+import { Toast, ToastCloseEvent } from 'primeng/toast';
 import { SharedModule } from 'primeng/api';
 
-export type ExtraToastSeverity = 'success' | 'info' | 'warn' | 'error' | 'secondary' | 'contrast';
+export type ExtraToastSeverity = 'info' | 'success' | 'warning' | 'danger';
 export type ExtraToastPosition =
   | 'top-right'
   | 'top-left'
@@ -12,6 +13,16 @@ export type ExtraToastPosition =
   | 'bottom-center'
   | 'center';
 
+/** Внутренний словарь PrimeNG-совместимых значений severity — публично не используется. */
+type PrimeToastSeverity = 'success' | 'info' | 'warn' | 'error';
+
+/** Маппинг собственного severity на PrimeNG; используется сервисом при отправке сообщения. */
+export function toPrimeToastSeverity(severity: ExtraToastSeverity): PrimeToastSeverity {
+  if (severity === 'warning') return 'warn';
+  if (severity === 'danger') return 'error';
+  return severity;
+}
+
 const SEVERITY_ICONS: Record<string, string> = {
   info: 'ti ti-info-circle',
   success: 'ti ti-circle-check',
@@ -22,9 +33,9 @@ const SEVERITY_ICONS: Record<string, string> = {
 @Component({
   selector: 'extra-toast',
   standalone: true,
-  imports: [Toast, SharedModule],
+  imports: [Toast, SharedModule, NgTemplateOutlet],
   template: `
-    <p-toast [position]="position" [key]="key" [life]="life" [pt]="pt">
+    <p-toast [position]="position" [key]="key" [life]="life" (onClose)="onMessageClose($event)">
       <ng-template #message let-message>
         <div class="p-toast-accent-line"></div>
         <i [class]="resolveIcon(message) + ' p-toast-message-icon'"></i>
@@ -33,6 +44,14 @@ const SEVERITY_ICONS: Record<string, string> = {
           @if (message.detail) {
             <div class="p-toast-detail">{{ message.detail }}</div>
           }
+          @if (message.data?.content) {
+            <ng-container [ngTemplateOutlet]="message.data.content" />
+          }
+          @if (message.data?.footer) {
+            <div class="p-toast-footer">
+              <ng-container [ngTemplateOutlet]="message.data.footer" />
+            </div>
+          }
         </div>
       </ng-template>
     </p-toast>
@@ -42,9 +61,13 @@ export class ExtraToastComponent {
   @Input() position: ExtraToastPosition = 'top-right';
   @Input() key: string | undefined = undefined;
   @Input() life = 5000;
-  @Input() pt: Record<string, any> | undefined = undefined;
 
   resolveIcon(message: { severity?: string; icon?: string }): string {
-    return message.icon ?? SEVERITY_ICONS[message.severity ?? 'info'] ?? 'ti ti-info-circle';
+    return message.icon ?? SEVERITY_ICONS[message.severity ?? 'info'] ?? SEVERITY_ICONS['info'];
+  }
+
+  /** Диспетчеризует пользовательский onClose-колбэк конкретного сообщения (клик по крестику или таймер). */
+  onMessageClose(event: ToastCloseEvent): void {
+    (event.message?.data as { onClose?: () => void } | undefined)?.onClose?.();
   }
 }