accordion

1import type { ClassValue } from 'clsx'
2import { Component, computed, Directive, input } from '@angular/core'
3 
4import { NgIconComponent, provideIcons } from '@ng-icons/core'
5import { lucideChevronDown } from '@ng-icons/lucide'
6 
7import {
8  RdxAccordionContentDirective,
9  RdxAccordionHeaderDirective,
10  RdxAccordionItemDirective,
11  RdxAccordionRootDirective,
12  RdxAccordionTriggerDirective,
13} from '@radix-ng/primitives/accordion'
14import { cn } from '~/lib/utils'
15 
16@Directive({
17  standalone: true,
18  selector: '[ubAccordion]',
19  hostDirectives: [RdxAccordionRootDirective],
20})
21export class UbAccordionDirective { }
22 
23@Directive({
24  standalone: true,
25  selector: '[ubAccordionItem]',
26  hostDirectives: [
27    {
28      directive: RdxAccordionItemDirective,
29      inputs: ['disabled', 'value'],
30    },
31  ],
32  host: {
33    '[class]': 'computedClass()',
34  },
35})
36export class UbAccordionItemDirective {
37  class = input<ClassValue>()
38  computedClass = computed(() => {
39    return cn('border-b', this.class())
40  })
41}
42 
43@Component({
44  standalone: true,
45  selector: '[ubAccordionTrigger], ub-accordion-trigger',
46  imports: [RdxAccordionHeaderDirective, NgIconComponent],
47  hostDirectives: [RdxAccordionTriggerDirective],
48  viewProviders: [provideIcons({ lucideChevronDown })],
49  template: `
50    <h3 rdxAccordionHeader class="flex group">
51        <button [class]="computedClass()">
52            <ng-content></ng-content>
53            <ng-icon name="lucideChevronDown" class="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200"></ng-icon>
54        </button>
55    </h3>
56    `,
57})
58export class UbAccordionTriggerDirective {
59  class = input<ClassValue>()
60  computedClass = computed(() => {
61    return cn('flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline group-data-[state=open]:[&>*>svg]:rotate-180', this.class())
62  })
63}
64 
65@Component({
66  standalone: true,
67  selector: '[ubAccordionContent], ub-accordion-content',
68  hostDirectives: [RdxAccordionContentDirective],
69  host: {
70    class:
71            'overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down',
72  },
73  template: `
74        <div [className]="computedClass()">
75            <ng-content></ng-content>
76        </div>
77    `,
78})
79export class UbAccordionContentDirective {
80  class = input<ClassValue>()
81  computedClass = computed(() => {
82    return cn('pb-4 pt-0', this.class())
83  })
84}