sonner

1import type { ToasterProps } from 'ngx-sonner'
2import { booleanAttribute, Component, input, numberAttribute } from '@angular/core'
3import { NgxSonnerToaster } from 'ngx-sonner'
4 
5@Component({
6  standalone: true,
7  selector: 'ub-toaster',
8  imports: [NgxSonnerToaster],
9  template: `
10    <ngx-sonner-toaster
11      class="toaster group"
12      [invert]="invert()"
13      [theme]="theme()"
14      [position]="position()"
15      [hotKey]="hotKey()"
16      [richColors]="richColors()"
17      [expand]="expand()"
18      [duration]="duration()"
19      [visibleToasts]="visibleToasts()"
20      [closeButton]="closeButton()"
21      [toastOptions]="toastOptions()"
22      [offset]="offset()"
23      [dir]="dir()"
24      [class]="_class()"
25      [style]="_style()"
26    />
27  `,
28})
29export class ToasterComponent {
30  invert = input<ToasterProps['invert'], boolean | string>(false, {
31    transform: booleanAttribute,
32  })
33 
34  theme = input<ToasterProps['theme']>('system')
35  position = input<ToasterProps['position']>('bottom-right')
36  hotKey = input<ToasterProps['hotkey']>(['altKey', 'KeyT'])
37  richColors = input<ToasterProps['richColors'], boolean | string>(false, {
38    transform: booleanAttribute,
39  })
40 
41  expand = input<ToasterProps['expand'], boolean | string>(false, {
42    transform: booleanAttribute,
43  })
44 
45  duration = input<ToasterProps['duration'], number | string>(4000, {
46    transform: numberAttribute,
47  })
48 
49  visibleToasts = input<ToasterProps['visibleToasts'], number | string>(
50    3,
51    { transform: numberAttribute },
52  )
53 
54  closeButton = input<ToasterProps['closeButton'], boolean | string>(false, {
55    transform: booleanAttribute,
56  })
57 
58  toastOptions = input<ToasterProps['toastOptions']>({
59    classes: {
60      toast:
61        'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg',
62      description: 'group-[.toast]:text-muted-foreground',
63      actionButton:
64        'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',
65      cancelButton:
66        'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground',
67    },
68  })
69 
70  offset = input<ToasterProps['offset']>(null)
71  dir = input<ToasterProps['dir']>('auto')
72  _class = input('', { alias: 'class' })
73  _style = input<Record<string, string>>({}, { alias: 'style' })
74}