{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "accordion", "title": "Accordion", "type": "registry:ui", "files": [ { "path": "packages/registry-angular/components/accordion/accordion.component.ts", "content": "import {\n AfterViewChecked,\n Component,\n ElementRef,\n EventEmitter,\n Input,\n OnChanges,\n OnDestroy,\n Output,\n SimpleChanges,\n booleanAttribute,\n inject,\n signal,\n ChangeDetectionStrategy,\n} from '@angular/core'\nimport { cn } from '@/lib/utils'\nimport { afterExitAnimation, uniqueId } from '@/ui/popper/popper'\nimport {\n accordionVariants,\n accordionItemVariants,\n accordionTriggerVariants,\n type AccordionVariants,\n type AccordionItemVariants,\n type AccordionTriggerVariants,\n} from './accordion.variants'\n\nexport type AccordionVariant = NonNullable\nexport type AccordionType = 'single' | 'multiple'\nexport type AccordionOrientation = 'horizontal' | 'vertical'\n\n/**\n * Angular port of UIPKGE Accordion with Radix Accordion behaviour: `type` single /\n * multiple, controlled `value` or uncontrolled `defaultValue` + `valueChange`,\n * `collapsible`, `disabled`, `orientation`, `dir`. Items read the root's variant\n * (React's AccordionVariantContext), triggers toggle their item and rove focus with\n * Arrow / Home / End, and content measures itself into\n * `--radix-accordion-content-height` so `animate-accordion-down/up` run like React,\n * staying mounted until the close animation ends. Class strings match React.\n */\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-accordion, [ui-accordion]',\n standalone: true,\n host: {\n '[attr.data-uipkge]': '\"\"',\n '[attr.data-slot]': '\"accordion\"',\n '[attr.data-variant]': 'variant',\n '[attr.data-orientation]': 'orientation',\n '[class]': 'hostClass',\n },\n template: ``,\n})\nexport class UiAccordionComponent implements OnChanges {\n @Input('class') className?: string\n @Input() variant: AccordionVariant = 'default'\n @Input() type: AccordionType = 'single'\n /** Controlled value: a string for type=\"single\", a string[] for type=\"multiple\". */\n @Input() value?: string | string[]\n @Input() defaultValue?: string | string[]\n @Input({ transform: booleanAttribute }) collapsible = false\n @Input({ transform: booleanAttribute }) disabled = false\n @Input() orientation: AccordionOrientation = 'vertical'\n @Input() dir: 'ltr' | 'rtl' = 'ltr'\n @Output() valueChange = new EventEmitter()\n\n readonly el = inject>(ElementRef).nativeElement\n private readonly _value = signal(null)\n readonly items = new Set()\n\n /** Currently expanded item values. */\n get openItems(): string[] {\n if (this.value !== undefined) return toList(this.value)\n return this._value() ?? toList(this.defaultValue)\n }\n\n ngOnChanges(changes: SimpleChanges): void {\n const change = changes['value']\n if (change && !change.firstChange) this.notify(toList(change.previousValue), toList(change.currentValue))\n }\n\n isOpen(value: string): boolean {\n return this.openItems.includes(value)\n }\n\n /** Radix onItemOpen / onItemClose: the value an item click produces. */\n toggle(value: string): void {\n const current = this.openItems\n let next: string[]\n if (this.type === 'multiple') {\n next = current.includes(value) ? current.filter((v) => v !== value) : [...current, value]\n } else if (current.includes(value)) {\n if (!this.collapsible) return\n next = []\n } else {\n next = [value]\n }\n this._value.set(next)\n this.valueChange.emit(this.type === 'multiple' ? next : (next[0] ?? ''))\n if (this.value === undefined) this.notify(current, next)\n }\n\n /** Items that just closed keep their content mounted for the exit animation. */\n private notify(prev: string[], next: string[]): void {\n for (const item of this.items) {\n if (prev.includes(item.value) && !next.includes(item.value)) item.content?.beginExit()\n }\n }\n\n /** Radix handleKeyDown: Arrow keys (per orientation / dir), Home and End rove across enabled triggers. */\n onTriggerKeydown(event: KeyboardEvent, trigger: HTMLElement): void {\n const triggers = [...this.el.querySelectorAll('[data-slot=\"accordion-trigger\"]')].filter(\n (t) => t.closest('[data-slot=\"accordion\"]') === this.el && !t.hasAttribute('data-disabled'),\n )\n const index = triggers.indexOf(trigger)\n if (index < 0 || !triggers.length) return\n const last = triggers.length - 1\n const forward = this.dir === 'rtl' ? 'ArrowLeft' : 'ArrowRight'\n const backward = this.dir === 'rtl' ? 'ArrowRight' : 'ArrowLeft'\n let next: number\n if (event.key === 'Home') next = 0\n else if (event.key === 'End') next = last\n else if (this.orientation === 'vertical' && event.key === 'ArrowDown') next = index + 1\n else if (this.orientation === 'vertical' && event.key === 'ArrowUp') next = index - 1\n else if (this.orientation === 'horizontal' && event.key === forward) next = index + 1\n else if (this.orientation === 'horizontal' && event.key === backward) next = index - 1\n else return\n event.preventDefault()\n triggers[(next + triggers.length) % triggers.length]!.focus()\n }\n\n get hostClass(): string {\n return cn('block', accordionVariants({ variant: this.variant }), this.className)\n }\n}\n\nfunction toList(value: string | string[] | undefined | null): string[] {\n if (Array.isArray(value)) return value\n return value ? [value] : []\n}\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-accordion-item, [ui-accordion-item]',\n standalone: true,\n host: {\n '[attr.data-uipkge]': '\"\"',\n '[attr.data-slot]': '\"accordion-item\"',\n '[attr.data-state]': 'state',\n '[attr.data-disabled]': 'isDisabled ? \"\" : null',\n '[attr.data-orientation]': 'accordion.orientation',\n '[class]': 'hostClass',\n },\n template: ``,\n})\nexport class UiAccordionItemComponent implements OnDestroy {\n readonly accordion = inject(UiAccordionComponent)\n @Input('class') className?: string\n @Input({ required: true }) value!: string\n @Input({ transform: booleanAttribute }) disabled = false\n\n readonly triggerId = uniqueId('accordion-trigger')\n readonly contentId = uniqueId('accordion-content')\n content?: UiAccordionContentComponent\n\n constructor() {\n this.accordion.items.add(this)\n }\n\n ngOnDestroy(): void {\n this.accordion.items.delete(this)\n }\n\n get isOpen(): boolean {\n return this.accordion.isOpen(this.value)\n }\n\n get isDisabled(): boolean {\n return this.accordion.disabled || this.disabled\n }\n\n get state(): 'open' | 'closed' {\n return this.isOpen ? 'open' : 'closed'\n }\n\n toggle(): void {\n if (!this.isDisabled) this.accordion.toggle(this.value)\n }\n\n get hostClass(): string {\n return cn('block', accordionItemVariants({ variant: this.accordion.variant }), this.className)\n }\n}\n\n/** Radix renders the header as an

: use `

`; the element form gets heading semantics. */\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-accordion-header, [ui-accordion-header]',\n standalone: true,\n host: {\n '[attr.data-uipkge]': '\"\"',\n '[attr.data-slot]': '\"accordion-header\"',\n '[attr.data-state]': 'item.state',\n '[attr.data-disabled]': 'item.isDisabled ? \"\" : null',\n '[attr.data-orientation]': 'item.accordion.orientation',\n '[attr.role]': 'isHeading ? null : \"heading\"',\n '[attr.aria-level]': 'isHeading ? null : 3',\n '[class]': 'hostClass',\n },\n template: ``,\n})\nexport class UiAccordionHeaderComponent {\n readonly item = inject(UiAccordionItemComponent)\n readonly isHeading = /^H[1-6]$/.test(inject>(ElementRef).nativeElement.tagName)\n @Input('class') className?: string\n\n get hostClass(): string {\n return cn('flex', this.className)\n }\n}\n\n/** Use `