dialog

1import type { TemplateRef } from '@angular/core'
2import type { RdxDialogConfig } from '@radix-ng/primitives/dialog'
3import { Component, computed, Directive, effect, inject, input } from '@angular/core'
4import { NgIconComponent, provideIcons } from '@ng-icons/core'
5import { lucideX } from '@ng-icons/lucide'
6 
7import {
8  RdxDialogCloseDirective,
9 
10  RdxDialogContentDirective,
11  RdxDialogDescriptionDirective,
12  RdxDialogTitleDirective,
13  RdxDialogTriggerDirective,
14} from '@radix-ng/primitives/dialog'
15import { cn } from '~/lib/utils'
16 
17@Directive({
18  standalone: true,
19  selector: 'button[ubDialogClose]',
20  hostDirectives: [RdxDialogCloseDirective],
21})
22export class UbDialogCloseDirective {}
23 
24@Directive({
25  standalone: true,
26  selector: '[ubDialogTrigger]',
27  hostDirectives: [
28    {
29      directive: RdxDialogTriggerDirective,
30      inputs: ['rdxDialogTrigger: ubDialogTrigger'],
31    },
32  ],
33})
34export class UbDialogTriggerDirective {
35  rdxDialogTrigger = inject(RdxDialogTriggerDirective, { host: true })
36  ubDialogTrigger = input.required<TemplateRef<void>>()
37  ubDialogConfig = input<RdxDialogConfig<unknown>>()
38 
39  passingConfig = effect(() => {
40    this.rdxDialogTrigger.dialogConfig = {
41      ...this.ubDialogConfig(),
42      content: this.ubDialogTrigger(),
43      backdropClass: ['fixed', 'inset-0', 'z-50', 'bg-black/80', 'data-[state=open]:animate-in', 'data-[state=closed]:animate-out', 'data-[state=closed]:fade-out-0', 'data-[state=open]:fade-in-0'],
44    }
45  })
46}
47 
48@Component({
49  standalone: true,
50  selector: '[ubDialogContent]',
51  imports: [RdxDialogCloseDirective, NgIconComponent],
52  host: {
53    '[class]': 'computedClass()',
54  },
55  hostDirectives: [
56    {
57      directive: RdxDialogContentDirective,
58    },
59  ],
60  viewProviders: [provideIcons({ lucideX })],
61  template: `
62  <ng-content />
63 
64  <button class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground" rdxDialogClose>
65    <ng-icon name="lucideX" />
66    <span class="sr-only">Close</span>
67  </button>
68  `,
69})
70export class UbDialogContentDirective {
71  class = input<string>()
72// … truncated