|
| 1 | +import { ChangeDetectionStrategy, Component, Input, OnDestroy } from '@angular/core'; |
| 2 | +import { Subject, take, tap } from 'rxjs'; |
| 3 | + |
| 4 | +import { NgxAccordionOpenBehavior } from '../../types'; |
| 5 | +import { NgxAccordionItemComponent } from './item/accordion-item.component'; |
| 6 | + |
| 7 | +/** |
| 8 | + * A WCAG/ARIA compliant implementation of the accordion pattern. |
| 9 | + * |
| 10 | + * https://www.w3.org/WAI/ARIA/apg/patterns/accordion/ |
| 11 | + */ |
| 12 | +@Component({ |
| 13 | + selector: 'ngx-accordion', |
| 14 | + template: '<ng-content/>', |
| 15 | + standalone: true, |
| 16 | + changeDetection: ChangeDetectionStrategy.OnPush, |
| 17 | + host: { |
| 18 | + class: 'ngx-accordion', |
| 19 | + role: 'region', |
| 20 | + }, |
| 21 | + imports: [NgxAccordionItemComponent], |
| 22 | +}) |
| 23 | +export class NgxAccordionComponent implements OnDestroy { |
| 24 | + /** |
| 25 | + * A subject to hold a registered event |
| 26 | + */ |
| 27 | + private itemRegisteredSubject: Subject<void> = new Subject<void>(); |
| 28 | + |
| 29 | + /** |
| 30 | + * A subject to hold the destroyed event |
| 31 | + */ |
| 32 | + private destroyedSubject: Subject<void> = new Subject<void>(); |
| 33 | + |
| 34 | + /** |
| 35 | + * A list of all accordion items |
| 36 | + */ |
| 37 | + public items: NgxAccordionItemComponent[] = []; |
| 38 | + |
| 39 | + /** |
| 40 | + * Open the specific items in the accordion |
| 41 | + */ |
| 42 | + @Input() public set open(open: NgxAccordionOpenBehavior) { |
| 43 | + this.itemRegisteredSubject |
| 44 | + .pipe( |
| 45 | + take(1), |
| 46 | + tap(() => { |
| 47 | + // Iben: Use a setTimeOut so we wait an extra tick |
| 48 | + setTimeout(() => { |
| 49 | + // Iben: Open all items |
| 50 | + if (open === 'all') { |
| 51 | + this.items.forEach((item) => item.updateAccordionItemState(true)); |
| 52 | + } else { |
| 53 | + // Iben: Open specific items |
| 54 | + const indexes = |
| 55 | + open === 'first' ? [0] : Array.isArray(open) ? open : [open]; |
| 56 | + |
| 57 | + indexes.forEach((index) => { |
| 58 | + this.items[index]?.updateAccordionItemState(true); |
| 59 | + }); |
| 60 | + } |
| 61 | + }); |
| 62 | + }) |
| 63 | + ) |
| 64 | + .subscribe(); |
| 65 | + } |
| 66 | + |
| 67 | + /** |
| 68 | + * Register an accordion item to the container |
| 69 | + * |
| 70 | + * @param item - An accordion item |
| 71 | + */ |
| 72 | + public registerItem(item: NgxAccordionItemComponent): void { |
| 73 | + this.itemRegisteredSubject.next(); |
| 74 | + this.items.push(item); |
| 75 | + } |
| 76 | + |
| 77 | + /** |
| 78 | + * Removes an accordion item from the container |
| 79 | + * |
| 80 | + * @param item - An accordion item |
| 81 | + */ |
| 82 | + public removeItem(item: NgxAccordionItemComponent): void { |
| 83 | + // Iben: Get the index of the item |
| 84 | + const index = this.items.findIndex(({ id }) => id === item.id); |
| 85 | + |
| 86 | + // Iben: If no item was found, we early exit |
| 87 | + if (index === undefined) { |
| 88 | + return; |
| 89 | + } |
| 90 | + |
| 91 | + // Iben: Remove the item |
| 92 | + this.items = [...this.items.slice(0, index), ...this.items.slice(index + 1)]; |
| 93 | + } |
| 94 | + |
| 95 | + /** |
| 96 | + * Moves the focus to an accordion |
| 97 | + * |
| 98 | + * @param id - The id of the current item |
| 99 | + * @param direction - The direction we move in |
| 100 | + */ |
| 101 | + public moveFocus(id: string, direction: 'up' | 'down' | 'first' | 'last') { |
| 102 | + // Iben: If we go to the first or last accordion, we don't need to find the index |
| 103 | + if (direction === 'first' || direction === 'last') { |
| 104 | + this.items[direction === 'first' ? 0 : this.items.length - 1].focus(); |
| 105 | + |
| 106 | + return; |
| 107 | + } |
| 108 | + |
| 109 | + // Iben: Find the index and move to the next |
| 110 | + const index = this.items.findIndex((item) => id === item.id); |
| 111 | + |
| 112 | + this.items[direction === 'down' ? index + 1 : index - 1]?.focus(); |
| 113 | + } |
| 114 | + |
| 115 | + /** |
| 116 | + * Handle the destroyed state |
| 117 | + */ |
| 118 | + public ngOnDestroy(): void { |
| 119 | + this.destroyedSubject.next(); |
| 120 | + this.destroyedSubject.complete(); |
| 121 | + } |
| 122 | +} |
0 commit comments