dropdown-menu

1import { booleanAttribute, Component, computed, Directive, input } from '@angular/core'
2import { NgIcon, provideIcons } from '@ng-icons/core'
3import { radixCheck, radixChevronRight, radixCircle } from '@ng-icons/radix-icons'
4import {
5  DropdownAlign,
6  DropdownSide,
7  RdxDropdownMenuContentDirective,
8  RdxDropdownMenuItemCheckboxDirective,
9  RdxDropdownMenuItemDirective,
10  RdxDropdownMenuItemIndicatorDirective,
11  RdxDropdownMenuItemRadioDirective,
12  RdxDropdownMenuItemRadioGroupDirective,
13  RdxDropdownMenuLabelDirective,
14  RdxDropdownMenuSeparatorDirective,
15  RdxDropdownMenuTriggerDirective,
16} from '@radix-ng/primitives/dropdown-menu'
17import { RdxMenuGroupDirective } from '@radix-ng/primitives/menu'
18import { cn } from '~/lib/utils'
19 
20export { DropdownAlign, DropdownSide }
21 
22@Directive({
23  standalone: true,
24  selector: '[ubDropdownMenuTrigger]',
25  hostDirectives: [
26    {
27      directive: RdxDropdownMenuTriggerDirective,
28      inputs: [
29        'rdxDropdownMenuTrigger: ubDropdownMenuTrigger',
30        'disabled',
31        'side',
32        'align',
33        'sideOffset',
34        'alignOffset',
35      ],
36      outputs: ['onOpenChange'],
37    },
38  ],
39})
40export class UbDropdownMenuTriggerDirective { }
41 
42@Directive({
43  standalone: true,
44  selector: '[ubDropdownMenuContent]',
45  hostDirectives: [
46    {
47      directive: RdxDropdownMenuContentDirective,
48      inputs: ['closeOnEscape', 'onEscapeKeyDown'],
49    },
50  ],
51  host: {
52    '[class]': 'computedClass()',
53  },
54})
55export class UbDropdownMenuContentDirective {
56  class = input<string>()
57  computedClass = computed(() => cn(
58    'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md',
59    'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
60    this.class(),
61  ))
62}
63 
64@Directive({
65  standalone: true,
66  selector: '[ubDropdownMenuItem]',
67  hostDirectives: [
68    {
69      directive: RdxDropdownMenuItemDirective,
70      inputs: ['disabled'],
71      outputs: ['onSelect'],
72    },
73  ],
74  host: {
75    '[class]': 'computedClass()',
76  },
77})
78export class UbDropdownMenuItemDirective {
79  class = input<string>()
80  inset = input(false, {
81    transform: booleanAttribute,
82  })
83 
84  computedClass = computed(() => cn(
85// … truncated