circletone/esm2022/lib/components/atoms/accordion-item/accordion-item.component.mjs

import { AsyncPipe } from '@angular/common';
import { ChangeDetectionStrategy, Component, ContentChildren, DestroyRef, EventEmitter, Input, Output, inject, } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { BehaviorSubject, filter, skip } from 'rxjs';
import { AccordionComponent } from '../../molecules/accordion/accordion.component';
import { IconComponent } from '../icon/icon.component';
import * as i0 from "@angular/core";
export class AccordionItemComponent {
    constructor() {
        this.destroyRef = inject(DestroyRef);
        this.id = '';
        this.label = '';
        this.isOpen = new BehaviorSubject(false);
        this.toggle = new EventEmitter();
    }
    ngAfterViewInit() {
        this.isOpen
            .pipe(takeUntilDestroyed(this.destroyRef), skip(1), filter(isOpen => !isOpen))
            .subscribe(() => {
            this.accordions.forEach(accordion => {
                accordion.closePanes();
            });
        });
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AccordionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.2", type: AccordionItemComponent, isStandalone: true, selector: "ct-accordion-item", inputs: { id: "id", label: "label", isOpen: "isOpen" }, outputs: { toggle: "toggle" }, queries: [{ propertyName: "accordions", predicate: AccordionComponent }], ngImport: i0, template: "<div\n  tabindex=\"0\"\n  class=\"flex cursor-pointer flex-row items-center justify-between gap-1.5 bg-surface px-4 py-2 text-on-surface hover:bg-primary/50 dark:bg-surface-dark dark:text-on-surface-dark hover:dark:bg-surface-variant-dark\"\n  [class.rounded-t-md]=\"isOpen | async\"\n  [class.rounded-md]=\"(isOpen | async) === false\"\n  (click)=\"toggle.emit()\">\n  <span class=\"grow\">{{ label }}</span>\n  <ct-icon size=\"sm\" [icon]=\"(isOpen | async) ? 'chevron-up' : 'chevron-down'\" />\n</div>\n@if (isOpen | async) {\n  <div class=\"flex flex-col rounded-b-md bg-surface/35 p-4 dark:bg-surface-dark/50\">\n    <ng-content></ng-content>\n  </div>\n}\n", dependencies: [{ kind: "component", type: IconComponent, selector: "ct-icon", inputs: ["icon", "fill", "strokeWidth", "strokeColor", "size", "variant"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AccordionItemComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ct-accordion-item', standalone: true, imports: [IconComponent, AsyncPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  tabindex=\"0\"\n  class=\"flex cursor-pointer flex-row items-center justify-between gap-1.5 bg-surface px-4 py-2 text-on-surface hover:bg-primary/50 dark:bg-surface-dark dark:text-on-surface-dark hover:dark:bg-surface-variant-dark\"\n  [class.rounded-t-md]=\"isOpen | async\"\n  [class.rounded-md]=\"(isOpen | async) === false\"\n  (click)=\"toggle.emit()\">\n  <span class=\"grow\">{{ label }}</span>\n  <ct-icon size=\"sm\" [icon]=\"(isOpen | async) ? 'chevron-up' : 'chevron-down'\" />\n</div>\n@if (isOpen | async) {\n  <div class=\"flex flex-col rounded-b-md bg-surface/35 p-4 dark:bg-surface-dark/50\">\n    <ng-content></ng-content>\n  </div>\n}\n" }]
        }], propDecorators: { id: [{
                type: Input,
                args: [{ required: true }]
            }], label: [{
                type: Input
            }], isOpen: [{
                type: Input
            }], toggle: [{
                type: Output
            }], accordions: [{
                type: ContentChildren,
                args: [AccordionComponent]
            }] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYWNjb3JkaW9uLWl0ZW0uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvY2lyY2xldG9uZS9zcmMvbGliL2NvbXBvbmVudHMvYXRvbXMvYWNjb3JkaW9uLWl0ZW0vYWNjb3JkaW9uLWl0ZW0uY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvY2lyY2xldG9uZS9zcmMvbGliL2NvbXBvbmVudHMvYXRvbXMvYWNjb3JkaW9uLWl0ZW0vYWNjb3JkaW9uLWl0ZW0uY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQzVDLE9BQU8sRUFFTCx1QkFBdUIsRUFDdkIsU0FBUyxFQUNULGVBQWUsRUFDZixVQUFVLEVBQ1YsWUFBWSxFQUNaLEtBQUssRUFDTCxNQUFNLEVBRU4sTUFBTSxHQUNQLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBRSxrQkFBa0IsRUFBRSxNQUFNLDRCQUE0QixDQUFDO0FBQ2hFLE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSxFQUFFLElBQUksRUFBRSxNQUFNLE1BQU0sQ0FBQztBQUNyRCxPQUFPLEVBQUUsa0JBQWtCLEVBQUUsTUFBTSwrQ0FBK0MsQ0FBQztBQUNuRixPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sd0JBQXdCLENBQUM7O0FBU3ZELE1BQU0sT0FBTyxzQkFBc0I7SUFQbkM7UUFRbUIsZUFBVSxHQUFHLE1BQU0sQ0FBQyxVQUFVLENBQUMsQ0FBQztRQUN0QixPQUFFLEdBQUcsRUFBRSxDQUFDO1FBQzFCLFVBQUssR0FBRyxFQUFFLENBQUM7UUFDWCxXQUFNLEdBQUcsSUFBSSxlQUFlLENBQVUsS0FBSyxDQUFDLENBQUM7UUFDNUMsV0FBTSxHQUFHLElBQUksWUFBWSxFQUFRLENBQUM7S0FpQjdDO0lBYkMsZUFBZTtRQUNiLElBQUksQ0FBQyxNQUFNO2FBQ1IsSUFBSSxDQUNILGtCQUFrQixDQUFDLElBQUksQ0FBQyxVQUFVLENBQUMsRUFDbkMsSUFBSSxDQUFDLENBQUMsQ0FBQyxFQUNQLE1BQU0sQ0FBQyxNQUFNLENBQUMsRUFBRSxDQUFDLENBQUMsTUFBTSxDQUFDLENBQzFCO2FBQ0EsU0FBUyxDQUFDLEdBQUcsRUFBRTtZQUNkLElBQUksQ0FBQyxVQUFVLENBQUMsT0FBTyxDQUFDLFNBQVMsQ0FBQyxFQUFFO2dCQUNsQyxTQUFTLENBQUMsVUFBVSxFQUFFLENBQUM7WUFDekIsQ0FBQyxDQUFDLENBQUM7UUFDTCxDQUFDLENBQUMsQ0FBQztJQUNQLENBQUM7OEdBckJVLHNCQUFzQjtrR0FBdEIsc0JBQXNCLCtMQU9oQixrQkFBa0IsNkJDaENyQyx3cEJBY0EsNENET1ksYUFBYSwwSEFBRSxTQUFTOzsyRkFJdkIsc0JBQXNCO2tCQVBsQyxTQUFTOytCQUNFLG1CQUFtQixjQUNqQixJQUFJLFdBQ1AsQ0FBQyxhQUFhLEVBQUUsU0FBUyxDQUFDLG1CQUVsQix1QkFBdUIsQ0FBQyxNQUFNOzhCQUlwQixFQUFFO3NCQUE1QixLQUFLO3VCQUFDLEVBQUUsUUFBUSxFQUFFLElBQUksRUFBRTtnQkFDaEIsS0FBSztzQkFBYixLQUFLO2dCQUNHLE1BQU07c0JBQWQsS0FBSztnQkFDSSxNQUFNO3NCQUFmLE1BQU07Z0JBRThCLFVBQVU7c0JBQTlDLGVBQWU7dUJBQUMsa0JBQWtCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQXN5bmNQaXBlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7XG4gIEFmdGVyVmlld0luaXQsXG4gIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxuICBDb21wb25lbnQsXG4gIENvbnRlbnRDaGlsZHJlbixcbiAgRGVzdHJveVJlZixcbiAgRXZlbnRFbWl0dGVyLFxuICBJbnB1dCxcbiAgT3V0cHV0LFxuICBRdWVyeUxpc3QsXG4gIGluamVjdCxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyB0YWtlVW50aWxEZXN0cm95ZWQgfSBmcm9tICdAYW5ndWxhci9jb3JlL3J4anMtaW50ZXJvcCc7XG5pbXBvcnQgeyBCZWhhdmlvclN1YmplY3QsIGZpbHRlciwgc2tpcCB9IGZyb20gJ3J4anMnO1xuaW1wb3J0IHsgQWNjb3JkaW9uQ29tcG9uZW50IH0gZnJvbSAnLi4vLi4vbW9sZWN1bGVzL2FjY29yZGlvbi9hY2NvcmRpb24uY29tcG9uZW50JztcbmltcG9ydCB7IEljb25Db21wb25lbnQgfSBmcm9tICcuLi9pY29uL2ljb24uY29tcG9uZW50JztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnY3QtYWNjb3JkaW9uLWl0ZW0nLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbSWNvbkNvbXBvbmVudCwgQXN5bmNQaXBlXSxcbiAgdGVtcGxhdGVVcmw6ICcuL2FjY29yZGlvbi1pdGVtLmNvbXBvbmVudC5odG1sJyxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG59KVxuZXhwb3J0IGNsYXNzIEFjY29yZGlvbkl0ZW1Db21wb25lbnQgaW1wbGVtZW50cyBBZnRlclZpZXdJbml0IHtcbiAgcHJpdmF0ZSByZWFkb25seSBkZXN0cm95UmVmID0gaW5qZWN0KERlc3Ryb3lSZWYpO1xuICBASW5wdXQoeyByZXF1aXJlZDogdHJ1ZSB9KSBpZCA9ICcnO1xuICBASW5wdXQoKSBsYWJlbCA9ICcnO1xuICBASW5wdXQoKSBpc09wZW4gPSBuZXcgQmVoYXZpb3JTdWJqZWN0PGJvb2xlYW4+KGZhbHNlKTtcbiAgQE91dHB1dCgpIHRvZ2dsZSA9IG5ldyBFdmVudEVtaXR0ZXI8dm9pZD4oKTtcblxuICBAQ29udGVudENoaWxkcmVuKEFjY29yZGlvbkNvbXBvbmVudCkgYWNjb3JkaW9ucyE6IFF1ZXJ5TGlzdDxBY2NvcmRpb25Db21wb25lbnQ+O1xuXG4gIG5nQWZ0ZXJWaWV3SW5pdCgpIHtcbiAgICB0aGlzLmlzT3BlblxuICAgICAgLnBpcGUoXG4gICAgICAgIHRha2VVbnRpbERlc3Ryb3llZCh0aGlzLmRlc3Ryb3lSZWYpLFxuICAgICAgICBza2lwKDEpLFxuICAgICAgICBmaWx0ZXIoaXNPcGVuID0+ICFpc09wZW4pXG4gICAgICApXG4gICAgICAuc3Vic2NyaWJlKCgpID0+IHtcbiAgICAgICAgdGhpcy5hY2NvcmRpb25zLmZvckVhY2goYWNjb3JkaW9uID0+IHtcbiAgICAgICAgICBhY2NvcmRpb24uY2xvc2VQYW5lcygpO1xuICAgICAgICB9KTtcbiAgICAgIH0pO1xuICB9XG59XG4iLCI8ZGl2XG4gIHRhYmluZGV4PVwiMFwiXG4gIGNsYXNzPVwiZmxleCBjdXJzb3ItcG9pbnRlciBmbGV4LXJvdyBpdGVtcy1jZW50ZXIganVzdGlmeS1iZXR3ZWVuIGdhcC0xLjUgYmctc3VyZmFjZSBweC00IHB5LTIgdGV4dC1vbi1zdXJmYWNlIGhvdmVyOmJnLXByaW1hcnkvNTAgZGFyazpiZy1zdXJmYWNlLWRhcmsgZGFyazp0ZXh0LW9uLXN1cmZhY2UtZGFyayBob3ZlcjpkYXJrOmJnLXN1cmZhY2UtdmFyaWFudC1kYXJrXCJcbiAgW2NsYXNzLnJvdW5kZWQtdC1tZF09XCJpc09wZW4gfCBhc3luY1wiXG4gIFtjbGFzcy5yb3VuZGVkLW1kXT1cIihpc09wZW4gfCBhc3luYykgPT09IGZhbHNlXCJcbiAgKGNsaWNrKT1cInRvZ2dsZS5lbWl0KClcIj5cbiAgPHNwYW4gY2xhc3M9XCJncm93XCI+e3sgbGFiZWwgfX08L3NwYW4+XG4gIDxjdC1pY29uIHNpemU9XCJzbVwiIFtpY29uXT1cIihpc09wZW4gfCBhc3luYykgPyAnY2hldnJvbi11cCcgOiAnY2hldnJvbi1kb3duJ1wiIC8+XG48L2Rpdj5cbkBpZiAoaXNPcGVuIHwgYXN5bmMpIHtcbiAgPGRpdiBjbGFzcz1cImZsZXggZmxleC1jb2wgcm91bmRlZC1iLW1kIGJnLXN1cmZhY2UvMzUgcC00IGRhcms6Ymctc3VyZmFjZS1kYXJrLzUwXCI+XG4gICAgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxuICA8L2Rpdj5cbn1cbiJdfQ==