accordion

1import {
2  type AfterContentInit,
3  ChangeDetectionStrategy,
4  Component,
5  computed,
6  contentChildren,
7  input,
8  ViewEncapsulation,
9} from '@angular/core';
10 
11import type { ClassValue } from 'clsx';
12 
13import { ZardAccordionItemComponent } from '@/shared/components/accordion/accordion-item.component';
14import { mergeClasses } from '@/shared/utils/merge-classes';
15 
16@Component({
17  selector: 'z-accordion, [z-accordion]',
18  template: `
19    <ng-content />
20  `,
21  changeDetection: ChangeDetectionStrategy.OnPush,
22  encapsulation: ViewEncapsulation.Emulated,
23  exportAs: 'zAccordion',
24})
25export class ZardAccordionComponent implements AfterContentInit {
26  readonly items = contentChildren(ZardAccordionItemComponent);
27 
28  readonly class = input<ClassValue>('');
29  readonly zType = input<'single' | 'multiple'>('single');
30  readonly zCollapsible = input<boolean>(true);
31  readonly zDefaultValue = input<string | string[]>('');
32 
33  private readonly defaultValue = computed(() => {
34    const defaultValue = this.zDefaultValue();
35    if (typeof defaultValue === 'string') {
36      return defaultValue ? [defaultValue] : [];
37    } else if (this.zType() === 'single') {
38      throw new Error('Array of default values is supported only for multiple zType');
39    }
40    return defaultValue;
41  });
42 
43  protected readonly classes = computed(() => mergeClasses(this.class()));
44 
45  ngAfterContentInit(): void {
46    for (const item of this.items()) {
47      item.accordion = this;
48      item.isOpen.set(this.defaultValue().includes(item.zValue()));
49    }
50  }
51 
52  toggleItem(selectedItem: ZardAccordionItemComponent): void {
53    if (this.zType() === 'single') {
54      this.toggleForSingleType(selectedItem);
55    } else {
56      this.toggleForMultipleType(selectedItem);
57    }
58  }
59 
60  private toggleForSingleType(selectedItem: ZardAccordionItemComponent): void {
61    const isClosing = selectedItem.isOpen();
62 
63    if (isClosing && !this.zCollapsible()) {
64      return;
65    }
66 
67    for (const item of this.items()) {
68      const shouldBeOpen = item === selectedItem ? !item.isOpen() : false;
69      item.isOpen.set(shouldBeOpen);
70    }
71  }
72 
73  private toggleForMultipleType(selectedItem: ZardAccordionItemComponent): void {
74    const isClosing = selectedItem.isOpen();
75    if (isClosing && !this.zCollapsible() && this.countOpenItems() <= 1) {
76      return;
77    }
78 
79    selectedItem.isOpen.update(v => !v);
80  }
81 
82  private countOpenItems(): number {
83// … truncated