sonner

1import { ChangeDetectionStrategy, Component, computed, input, ViewEncapsulation } from '@angular/core';
2 
3import { NgIcon, provideIcons } from '@ng-icons/core';
4import { lucideCircleCheck, lucideInfo, lucideLoader2, lucideOctagonX, lucideTriangleAlert } from '@ng-icons/lucide';
5import type { ClassValue } from 'clsx';
6import { NgxSonnerToaster, type ToasterProps } from 'ngx-sonner';
7 
8import { mergeClasses } from '@/shared/utils/merge-classes';
9 
10import { sonnerVariants } from './sonner.variants';
11 
12export type ZardSonnerPosition =
13  | 'top-left'
14  | 'top-center'
15  | 'top-right'
16  | 'bottom-left'
17  | 'bottom-center'
18  | 'bottom-right';
19 
20const DEFAULT_STYLE: Record<string, string> = {
21  '--normal-bg': 'var(--popover)',
22  '--normal-text': 'var(--popover-foreground)',
23  '--normal-border': 'var(--border)',
24  '--border-radius': 'var(--radius)',
25};
26 
27const DEFAULT_TOAST_OPTIONS: ToasterProps['toastOptions'] = {
28  classes: {
29    toast: 'cn-toast',
30  },
31};
32 
33@Component({
34  selector: 'z-sonner',
35  imports: [NgIcon, NgxSonnerToaster],
36  template: `
37    <ngx-sonner-toaster
38      [theme]="theme()"
39      [class]="classes()"
40      [style]="resolvedStyle()"
41      [position]="position()"
42      [richColors]="richColors()"
43      [expand]="expand()"
44      [duration]="duration()"
45      [visibleToasts]="visibleToasts()"
46      [closeButton]="closeButton()"
47      [toastOptions]="resolvedToastOptions()"
48      [dir]="dir()"
49    >
50      <ng-icon loading-icon name="lucideLoader2" class="size-4 [&>svg]:animate-spin" />
51      <ng-icon success-icon name="lucideCircleCheck" class="size-4" />
52      <ng-icon error-icon name="lucideOctagonX" class="size-4" />
53      <ng-icon warning-icon name="lucideTriangleAlert" class="size-4" />
54      <ng-icon info-icon name="lucideInfo" class="size-4" />
55    </ngx-sonner-toaster>
56  `,
57  changeDetection: ChangeDetectionStrategy.OnPush,
58  encapsulation: ViewEncapsulation.None,
59  viewProviders: [provideIcons({ lucideCircleCheck, lucideInfo, lucideLoader2, lucideOctagonX, lucideTriangleAlert })],
60  exportAs: 'zSonner',
61})
62export class ZardSonnerComponent {
63  readonly class = input<ClassValue>('');
64  readonly theme = input<'light' | 'dark' | 'system'>('system');
65  readonly position = input<ZardSonnerPosition>('top-center');
66  readonly richColors = input<boolean>(false);
67  readonly expand = input<boolean>(false);
68  readonly duration = input<number>(4000);
69  readonly visibleToasts = input<number>(3);
70  readonly closeButton = input<boolean>(false);
71// … truncated