alert

1import type { VariantProps } from 'class-variance-authority'
2 
3import { computed, Directive, input } from '@angular/core'
4 
5import { cva } from 'class-variance-authority'
6import { cn } from '~/lib/utils'
7 
8const alertVariants = cva(
9  'relative w-full rounded-lg border px-4 py-3 text-sm [&>[ubAlertIcon]+div]:translate-y-[-3px] [&>[ubAlertIcon]]:absolute [&>[ubAlertIcon]]:left-4 [&>[ubAlertIcon]]:top-4 [&>[ubAlertIcon]]:text-foreground [&>[ubAlertIcon]~*]:pl-7',
10  {
11    variants: {
12      variant: {
13        default: 'bg-background text-foreground',
14        destructive:
15          'border-destructive/50 text-destructive dark:border-destructive [&>[ubAlertIcon]]:text-destructive',
16      },
17    },
18    defaultVariants: {
19      variant: 'default',
20    },
21  },
22)
23 
24type AlertProps = VariantProps<typeof alertVariants>
25type UbAlertVariant = NonNullable<AlertProps['variant']>
26 
27@Directive({
28  selector: 'div[ubAlert]',
29  standalone: true,
30  host: {
31    'role': 'alert',
32    '[class]': 'computedClass()',
33  },
34})
35export class UbAlertDirective {
36  readonly class = input<string>()
37  readonly variant = input<UbAlertVariant>('default')
38 
39  protected computedClass = computed(() =>
40    cn(alertVariants({ variant: this.variant(), class: this.class() })),
41  )
42}
43 
44@Directive({
45  standalone: true,
46  selector: '[ubAlertIcon]',
47})
48export class UbAlertIconDirective {}
49 
50@Directive({
51  selector: 'h5[ubAlertTitle]',
52  standalone: true,
53  host: {
54    '[class]': 'computedClass()',
55  },
56})
57export class UbAlertTitleDirective {
58  readonly class = input<string>()
59 
60  protected computedClass = computed(() =>
61    cn('mb-1 font-medium leading-none tracking-tight', this.class()),
62  )
63}
64 
65@Directive({
66  selector: 'div[ubAlertDescription]',
67  standalone: true,
68  host: {
69    '[class]': 'computedClass()',
70  },
71})
72export class UbAlertDescriptionDirective {
73  readonly class = input<string>()
74 
75  protected computedClass = computed(() =>
76    cn('text-sm [&_p]:leading-relaxed', this.class()),
77  )
78}