12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667 |
- import { ChangeDetectionStrategy, Component, ContentChildren, DestroyRef, Input, Optional, SkipSelf, inject, } from '@angular/core';
- import { IconComponent } from '../../atoms/icon/icon.component';
- import { AccordionItemComponent } from '../../atoms/accordion-item/accordion-item.component';
- import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
- import { debounceTime, filter, skip } from 'rxjs';
- import { AsyncPipe } from '@angular/common';
- import { AccordionRegistryService } from '../../../services/accordion-registry.service';
- import * as i0 from "@angular/core";
- import * as i1 from "../../atoms/accordion-item/accordion-item.component";
- export class AccordionComponent {
- constructor(parent) {
- this.parent = parent;
- this.destroyRef = inject(DestroyRef);
- this.accordionRegistryService = inject(AccordionRegistryService);
- this.label = '';
- this.policy = 'collapse';
- this.gap = 0;
- }
- ngAfterViewInit() {
- this.accordionItems.forEach(accordionItem => {
- accordionItem.isOpen
- .pipe(takeUntilDestroyed(this.destroyRef), skip(1), filter(isOpen => isOpen), debounceTime(10))
- .subscribe(() => {
- if (this.parent) {
- this.parent?.isOpen.next(true);
- }
- if (this.policy === 'collapse') {
- this.accordionItems.forEach(otherAccordionItem => {
- if (accordionItem.id !== otherAccordionItem.id && otherAccordionItem.isOpen.getValue()) {
- otherAccordionItem.isOpen.next(false);
- }
- });
- }
- });
- });
- this.accordionRegistryService.register(this.id, this);
- }
- ngOnDestroy() {
- this.accordionRegistryService.unregister(this.id);
- }
- closePanes() {
- this.accordionItems.forEach(accordionItem => accordionItem.isOpen.next(false));
- }
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: AccordionComponent, deps: [{ token: i1.AccordionItemComponent, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component }); }
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.5", type: AccordionComponent, isStandalone: true, selector: "ct-accordion", inputs: { label: "label", id: "id", policy: "policy", gap: "gap" }, queries: [{ propertyName: "accordionItems", predicate: AccordionItemComponent }], ngImport: i0, template: "<div class=\"flex flex-col gap-{{ gap }}\">\n <ng-content></ng-content>\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
- }
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: AccordionComponent, decorators: [{
- type: Component,
- args: [{ selector: 'ct-accordion', standalone: true, imports: [AsyncPipe, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex flex-col gap-{{ gap }}\">\n <ng-content></ng-content>\n</div>\n" }]
- }], ctorParameters: () => [{ type: i1.AccordionItemComponent, decorators: [{
- type: Optional
- }, {
- type: SkipSelf
- }] }], propDecorators: { label: [{
- type: Input
- }], id: [{
- type: Input,
- args: [{ required: true }]
- }], policy: [{
- type: Input
- }], gap: [{
- type: Input
- }], accordionItems: [{
- type: ContentChildren,
- args: [AccordionItemComponent]
- }] } });
|