accordion.component.mjs 9.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667
  1. import { ChangeDetectionStrategy, Component, ContentChildren, DestroyRef, Input, Optional, SkipSelf, inject, } from '@angular/core';
  2. import { IconComponent } from '../../atoms/icon/icon.component';
  3. import { AccordionItemComponent } from '../../atoms/accordion-item/accordion-item.component';
  4. import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
  5. import { debounceTime, filter, skip } from 'rxjs';
  6. import { AsyncPipe } from '@angular/common';
  7. import { AccordionRegistryService } from '../../../services/accordion-registry.service';
  8. import * as i0 from "@angular/core";
  9. import * as i1 from "../../atoms/accordion-item/accordion-item.component";
  10. export class AccordionComponent {
  11. constructor(parent) {
  12. this.parent = parent;
  13. this.destroyRef = inject(DestroyRef);
  14. this.accordionRegistryService = inject(AccordionRegistryService);
  15. this.label = '';
  16. this.policy = 'collapse';
  17. this.gap = 0;
  18. }
  19. ngAfterViewInit() {
  20. this.accordionItems.forEach(accordionItem => {
  21. accordionItem.isOpen
  22. .pipe(takeUntilDestroyed(this.destroyRef), skip(1), filter(isOpen => isOpen), debounceTime(10))
  23. .subscribe(() => {
  24. if (this.parent) {
  25. this.parent?.isOpen.next(true);
  26. }
  27. if (this.policy === 'collapse') {
  28. this.accordionItems.forEach(otherAccordionItem => {
  29. if (accordionItem.id !== otherAccordionItem.id && otherAccordionItem.isOpen.getValue()) {
  30. otherAccordionItem.isOpen.next(false);
  31. }
  32. });
  33. }
  34. });
  35. });
  36. this.accordionRegistryService.register(this.id, this);
  37. }
  38. ngOnDestroy() {
  39. this.accordionRegistryService.unregister(this.id);
  40. }
  41. closePanes() {
  42. this.accordionItems.forEach(accordionItem => accordionItem.isOpen.next(false));
  43. }
  44. 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 }); }
  45. 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 }); }
  46. }
  47. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: AccordionComponent, decorators: [{
  48. type: Component,
  49. 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" }]
  50. }], ctorParameters: () => [{ type: i1.AccordionItemComponent, decorators: [{
  51. type: Optional
  52. }, {
  53. type: SkipSelf
  54. }] }], propDecorators: { label: [{
  55. type: Input
  56. }], id: [{
  57. type: Input,
  58. args: [{ required: true }]
  59. }], policy: [{
  60. type: Input
  61. }], gap: [{
  62. type: Input
  63. }], accordionItems: [{
  64. type: ContentChildren,
  65. args: [AccordionItemComponent]
  66. }] } });
  67. //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYWNjb3JkaW9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2NpcmNsZXRvbmUvc3JjL2xpYi9jb21wb25lbnRzL21vbGVjdWxlcy9hY2NvcmRpb24vYWNjb3JkaW9uLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2NpcmNsZXRvbmUvc3JjL2xpYi9jb21wb25lbnRzL21vbGVjdWxlcy9hY2NvcmRpb24vYWNjb3JkaW9uLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFFTCx1QkFBdUIsRUFDdkIsU0FBUyxFQUNULGVBQWUsRUFDZixVQUFVLEVBQ1YsS0FBSyxFQUVMLFFBQVEsRUFFUixRQUFRLEVBQ1IsTUFBTSxHQUNQLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxpQ0FBaUMsQ0FBQztBQUNoRSxPQUFPLEVBQUUsc0JBQXNCLEVBQUUsTUFBTSxxREFBcUQsQ0FBQztBQUM3RixPQUFPLEVBQUUsa0JBQWtCLEVBQUUsTUFBTSw0QkFBNEIsQ0FBQztBQUNoRSxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0sRUFBRSxJQUFJLEVBQUUsTUFBTSxNQUFNLENBQUM7QUFDbEQsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQzVDLE9BQU8sRUFBRSx3QkFBd0IsRUFBRSxNQUFNLDhDQUE4QyxDQUFDOzs7QUFTeEYsTUFBTSxPQUFPLGtCQUFrQjtJQVU3QixZQUE4QyxNQUE4QjtRQUE5QixXQUFNLEdBQU4sTUFBTSxDQUF3QjtRQVQzRCxlQUFVLEdBQUcsTUFBTSxDQUFDLFVBQVUsQ0FBQyxDQUFDO1FBQ2hDLDZCQUF3QixHQUFHLE1BQU0sQ0FBQyx3QkFBd0IsQ0FBQyxDQUFDO1FBQ3BFLFVBQUssR0FBRyxFQUFFLENBQUM7UUFFWCxXQUFNLEdBQXdCLFVBQVUsQ0FBQztRQUN6QyxRQUFHLEdBQVcsQ0FBQyxDQUFDO0lBSXNELENBQUM7SUFFaEYsZUFBZTtRQUNiLElBQUksQ0FBQyxjQUFjLENBQUMsT0FBTyxDQUFDLGFBQWEsQ0FBQyxFQUFFO1lBQzFDLGFBQWEsQ0FBQyxNQUFNO2lCQUNqQixJQUFJLENBQ0gsa0JBQWtCLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxFQUNuQyxJQUFJLENBQUMsQ0FBQyxDQUFDLEVBQ1AsTUFBTSxDQUFDLE1BQU0sQ0FBQyxFQUFFLENBQUMsTUFBTSxDQUFDLEVBQ3hCLFlBQVksQ0FBQyxFQUFFLENBQUMsQ0FDakI7aUJBQ0EsU0FBUyxDQUFDLEdBQUcsRUFBRTtnQkFDZCxJQUFJLElBQUksQ0FBQyxNQUFNLEVBQUUsQ0FBQztvQkFDaEIsSUFBSSxDQUFDLE1BQU0sRUFBRSxNQUFNLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDO2dCQUNqQyxDQUFDO2dCQUNELElBQUksSUFBSSxDQUFDLE1BQU0sS0FBSyxVQUFVLEVBQUUsQ0FBQztvQkFDL0IsSUFBSSxDQUFDLGNBQWMsQ0FBQyxPQUFPLENBQUMsa0JBQWtCLENBQUMsRUFBRTt3QkFDL0MsSUFBSSxhQUFhLENBQUMsRUFBRSxLQUFLLGtCQUFrQixDQUFDLEVBQUUsSUFBSSxrQkFBa0IsQ0FBQyxNQUFNLENBQUMsUUFBUSxFQUFFLEVBQUUsQ0FBQzs0QkFDdkYsa0JBQWtCLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQzt3QkFDeEMsQ0FBQztvQkFDSCxDQUFDLENBQUMsQ0FBQztnQkFDTCxDQUFDO1lBQ0gsQ0FBQyxDQUFDLENBQUM7UUFDUCxDQUFDLENBQUMsQ0FBQztRQUNILElBQUksQ0FBQyx3QkFBd0IsQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLEVBQUUsRUFBRSxJQUFJLENBQUMsQ0FBQztJQUN4RCxDQUFDO0lBRUQsV0FBVztRQUNULElBQUksQ0FBQyx3QkFBd0IsQ0FBQyxVQUFVLENBQUMsSUFBSSxDQUFDLEVBQUUsQ0FBQyxDQUFDO0lBQ3BELENBQUM7SUFFRCxVQUFVO1FBQ1IsSUFBSSxDQUFDLGNBQWMsQ0FBQyxPQUFPLENBQUMsYUFBYSxDQUFDLEVBQUUsQ0FBQyxhQUFhLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDO0lBQ2pGLENBQUM7OEdBM0NVLGtCQUFrQjtrR0FBbEIsa0JBQWtCLDJLQVFaLHNCQUFzQiw2QkNuQ3pDLG9GQUdBOzsyRkR3QmEsa0JBQWtCO2tCQVA5QixTQUFTOytCQUNFLGNBQWMsY0FDWixJQUFJLFdBQ1AsQ0FBQyxTQUFTLEVBQUUsYUFBYSxDQUFDLG1CQUVsQix1QkFBdUIsQ0FBQyxNQUFNOzswQkFZbEMsUUFBUTs7MEJBQUksUUFBUTt5Q0FQeEIsS0FBSztzQkFBYixLQUFLO2dCQUNxQixFQUFFO3NCQUE1QixLQUFLO3VCQUFDLEVBQUUsUUFBUSxFQUFFLElBQUksRUFBRTtnQkFDaEIsTUFBTTtzQkFBZCxLQUFLO2dCQUNHLEdBQUc7c0JBQVgsS0FBSztnQkFFbUMsY0FBYztzQkFBdEQsZUFBZTt1QkFBQyxzQkFBc0IiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBBZnRlclZpZXdJbml0LFxuICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcbiAgQ29tcG9uZW50LFxuICBDb250ZW50Q2hpbGRyZW4sXG4gIERlc3Ryb3lSZWYsXG4gIElucHV0LFxuICBPbkRlc3Ryb3ksXG4gIE9wdGlvbmFsLFxuICBRdWVyeUxpc3QsXG4gIFNraXBTZWxmLFxuICBpbmplY3QsXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgSWNvbkNvbXBvbmVudCB9IGZyb20gJy4uLy4uL2F0b21zL2ljb24vaWNvbi5jb21wb25lbnQnO1xuaW1wb3J0IHsgQWNjb3JkaW9uSXRlbUNvbXBvbmVudCB9IGZyb20gJy4uLy4uL2F0b21zL2FjY29yZGlvbi1pdGVtL2FjY29yZGlvbi1pdGVtLmNvbXBvbmVudCc7XG5pbXBvcnQgeyB0YWtlVW50aWxEZXN0cm95ZWQgfSBmcm9tICdAYW5ndWxhci9jb3JlL3J4anMtaW50ZXJvcCc7XG5pbXBvcnQgeyBkZWJvdW5jZVRpbWUsIGZpbHRlciwgc2tpcCB9IGZyb20gJ3J4anMnO1xuaW1wb3J0IHsgQXN5bmNQaXBlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7IEFjY29yZGlvblJlZ2lzdHJ5U2VydmljZSB9IGZyb20gJy4uLy4uLy4uL3NlcnZpY2VzL2FjY29yZGlvbi1yZWdpc3RyeS5zZXJ2aWNlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnY3QtYWNjb3JkaW9uJyxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgaW1wb3J0czogW0FzeW5jUGlwZSwgSWNvbkNvbXBvbmVudF0sXG4gIHRlbXBsYXRlVXJsOiAnLi9hY2NvcmRpb24uY29tcG9uZW50Lmh0bWwnLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbn0pXG5leHBvcnQgY2xhc3MgQWNjb3JkaW9uQ29tcG9uZW50IGltcGxlbWVudHMgQWZ0ZXJWaWV3SW5pdCwgT25EZXN0cm95IHtcbiAgcHJpdmF0ZSByZWFkb25seSBkZXN0cm95UmVmID0gaW5qZWN0KERlc3Ryb3lSZWYpO1xuICBwcml2YXRlIHJlYWRvbmx5IGFjY29yZGlvblJlZ2lzdHJ5U2VydmljZSA9IGluamVjdChBY2NvcmRpb25SZWdpc3RyeVNlcnZpY2UpO1xuICBASW5wdXQoKSBsYWJlbCA9ICcnO1xuICBASW5wdXQoeyByZXF1aXJlZDogdHJ1ZSB9KSBpZCE6IHN0cmluZztcbiAgQElucHV0KCkgcG9saWN5OiAnY29sbGFwc2UnIHwgJ29wZW4nID0gJ2NvbGxhcHNlJztcbiAgQElucHV0KCkgZ2FwOiBudW1iZXIgPSAwO1xuXG4gIEBDb250ZW50Q2hpbGRyZW4oQWNjb3JkaW9uSXRlbUNvbXBvbmVudCkgYWNjb3JkaW9uSXRlbXMhOiBRdWVyeUxpc3Q8QWNjb3JkaW9uSXRlbUNvbXBvbmVudD47XG5cbiAgY29uc3RydWN0b3IoQE9wdGlvbmFsKCkgQFNraXBTZWxmKCkgcHJvdGVjdGVkIHBhcmVudDogQWNjb3JkaW9uSXRlbUNvbXBvbmVudCkge31cblxuICBuZ0FmdGVyVmlld0luaXQoKSB7XG4gICAgdGhpcy5hY2NvcmRpb25JdGVtcy5mb3JFYWNoKGFjY29yZGlvbkl0ZW0gPT4ge1xuICAgICAgYWNjb3JkaW9uSXRlbS5pc09wZW5cbiAgICAgICAgLnBpcGUoXG4gICAgICAgICAgdGFrZVVudGlsRGVzdHJveWVkKHRoaXMuZGVzdHJveVJlZiksXG4gICAgICAgICAgc2tpcCgxKSxcbiAgICAgICAgICBmaWx0ZXIoaXNPcGVuID0+IGlzT3BlbiksXG4gICAgICAgICAgZGVib3VuY2VUaW1lKDEwKVxuICAgICAgICApXG4gICAgICAgIC5zdWJzY3JpYmUoKCkgPT4ge1xuICAgICAgICAgIGlmICh0aGlzLnBhcmVudCkge1xuICAgICAgICAgICAgdGhpcy5wYXJlbnQ/LmlzT3Blbi5uZXh0KHRydWUpO1xuICAgICAgICAgIH1cbiAgICAgICAgICBpZiAodGhpcy5wb2xpY3kgPT09ICdjb2xsYXBzZScpIHtcbiAgICAgICAgICAgIHRoaXMuYWNjb3JkaW9uSXRlbXMuZm9yRWFjaChvdGhlckFjY29yZGlvbkl0ZW0gPT4ge1xuICAgICAgICAgICAgICBpZiAoYWNjb3JkaW9uSXRlbS5pZCAhPT0gb3RoZXJBY2NvcmRpb25JdGVtLmlkICYmIG90aGVyQWNjb3JkaW9uSXRlbS5pc09wZW4uZ2V0VmFsdWUoKSkge1xuICAgICAgICAgICAgICAgIG90aGVyQWNjb3JkaW9uSXRlbS5pc09wZW4ubmV4dChmYWxzZSk7XG4gICAgICAgICAgICAgIH1cbiAgICAgICAgICAgIH0pO1xuICAgICAgICAgIH1cbiAgICAgICAgfSk7XG4gICAgfSk7XG4gICAgdGhpcy5hY2NvcmRpb25SZWdpc3RyeVNlcnZpY2UucmVnaXN0ZXIodGhpcy5pZCwgdGhpcyk7XG4gIH1cblxuICBuZ09uRGVzdHJveSgpIHtcbiAgICB0aGlzLmFjY29yZGlvblJlZ2lzdHJ5U2VydmljZS51bnJlZ2lzdGVyKHRoaXMuaWQpO1xuICB9XG5cbiAgY2xvc2VQYW5lcygpIHtcbiAgICB0aGlzLmFjY29yZGlvbkl0ZW1zLmZvckVhY2goYWNjb3JkaW9uSXRlbSA9PiBhY2NvcmRpb25JdGVtLmlzT3Blbi5uZXh0KGZhbHNlKSk7XG4gIH1cbn1cbiIsIjxkaXYgY2xhc3M9XCJmbGV4IGZsZXgtY29sIGdhcC17eyBnYXAgfX1cIj5cbiAgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxuPC9kaXY+XG4iXX0=