accordion.component.mjs 10 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667
  1. import { ChangeDetectionStrategy, Component, ContentChildren, DestroyRef, Input, Optional, SkipSelf, forwardRef, 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: i0.forwardRef(() => 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: [forwardRef(() => AccordionItemComponent)]
  66. }] } });
  67. //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYWNjb3JkaW9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2NpcmNsZXRvbmUvc3JjL2xpYi9jb21wb25lbnRzL21vbGVjdWxlcy9hY2NvcmRpb24vYWNjb3JkaW9uLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2NpcmNsZXRvbmUvc3JjL2xpYi9jb21wb25lbnRzL21vbGVjdWxlcy9hY2NvcmRpb24vYWNjb3JkaW9uLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFFTCx1QkFBdUIsRUFDdkIsU0FBUyxFQUNULGVBQWUsRUFDZixVQUFVLEVBQ1YsS0FBSyxFQUVMLFFBQVEsRUFFUixRQUFRLEVBQ1IsVUFBVSxFQUNWLE1BQU0sR0FDUCxNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0saUNBQWlDLENBQUM7QUFDaEUsT0FBTyxFQUFFLHNCQUFzQixFQUFFLE1BQU0scURBQXFELENBQUM7QUFDN0YsT0FBTyxFQUFFLGtCQUFrQixFQUFFLE1BQU0sNEJBQTRCLENBQUM7QUFDaEUsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLEVBQUUsSUFBSSxFQUFFLE1BQU0sTUFBTSxDQUFDO0FBQ2xELE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUM1QyxPQUFPLEVBQUUsd0JBQXdCLEVBQUUsTUFBTSw4Q0FBOEMsQ0FBQzs7O0FBU3hGLE1BQU0sT0FBTyxrQkFBa0I7SUFVN0IsWUFBOEMsTUFBOEI7UUFBOUIsV0FBTSxHQUFOLE1BQU0sQ0FBd0I7UUFUM0QsZUFBVSxHQUFHLE1BQU0sQ0FBQyxVQUFVLENBQUMsQ0FBQztRQUNoQyw2QkFBd0IsR0FBRyxNQUFNLENBQUMsd0JBQXdCLENBQUMsQ0FBQztRQUNwRSxVQUFLLEdBQUcsRUFBRSxDQUFDO1FBRVgsV0FBTSxHQUF3QixVQUFVLENBQUM7UUFDekMsUUFBRyxHQUFXLENBQUMsQ0FBQztJQUlzRCxDQUFDO0lBRWhGLGVBQWU7UUFDYixJQUFJLENBQUMsY0FBYyxDQUFDLE9BQU8sQ0FBQyxhQUFhLENBQUMsRUFBRTtZQUMxQyxhQUFhLENBQUMsTUFBTTtpQkFDakIsSUFBSSxDQUNILGtCQUFrQixDQUFDLElBQUksQ0FBQyxVQUFVLENBQUMsRUFDbkMsSUFBSSxDQUFDLENBQUMsQ0FBQyxFQUNQLE1BQU0sQ0FBQyxNQUFNLENBQUMsRUFBRSxDQUFDLE1BQU0sQ0FBQyxFQUN4QixZQUFZLENBQUMsRUFBRSxDQUFDLENBQ2pCO2lCQUNBLFNBQVMsQ0FBQyxHQUFHLEVBQUU7Z0JBQ2QsSUFBSSxJQUFJLENBQUMsTUFBTSxFQUFFLENBQUM7b0JBQ2hCLElBQUksQ0FBQyxNQUFNLEVBQUUsTUFBTSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQztnQkFDakMsQ0FBQztnQkFDRCxJQUFJLElBQUksQ0FBQyxNQUFNLEtBQUssVUFBVSxFQUFFLENBQUM7b0JBQy9CLElBQUksQ0FBQyxjQUFjLENBQUMsT0FBTyxDQUFDLGtCQUFrQixDQUFDLEVBQUU7d0JBQy9DLElBQUksYUFBYSxDQUFDLEVBQUUsS0FBSyxrQkFBa0IsQ0FBQyxFQUFFLElBQUksa0JBQWtCLENBQUMsTUFBTSxDQUFDLFFBQVEsRUFBRSxFQUFFLENBQUM7NEJBQ3ZGLGtCQUFrQixDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7d0JBQ3hDLENBQUM7b0JBQ0gsQ0FBQyxDQUFDLENBQUM7Z0JBQ0wsQ0FBQztZQUNILENBQUMsQ0FBQyxDQUFDO1FBQ1AsQ0FBQyxDQUFDLENBQUM7UUFDSCxJQUFJLENBQUMsd0JBQXdCLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxFQUFFLEVBQUUsSUFBSSxDQUFDLENBQUM7SUFDeEQsQ0FBQztJQUVELFdBQVc7UUFDVCxJQUFJLENBQUMsd0JBQXdCLENBQUMsVUFBVSxDQUFDLElBQUksQ0FBQyxFQUFFLENBQUMsQ0FBQztJQUNwRCxDQUFDO0lBRUQsVUFBVTtRQUNSLElBQUksQ0FBQyxjQUFjLENBQUMsT0FBTyxDQUFDLGFBQWEsQ0FBQyxFQUFFLENBQUMsYUFBYSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQztJQUNqRixDQUFDOzhHQTNDVSxrQkFBa0I7a0dBQWxCLGtCQUFrQiwrTEFRSyxzQkFBc0IsOEJDcEMxRCxvRkFHQTs7MkZEeUJhLGtCQUFrQjtrQkFQOUIsU0FBUzsrQkFDRSxjQUFjLGNBQ1osSUFBSSxXQUNQLENBQUMsU0FBUyxFQUFFLGFBQWEsQ0FBQyxtQkFFbEIsdUJBQXVCLENBQUMsTUFBTTs7MEJBWWxDLFFBQVE7OzBCQUFJLFFBQVE7eUNBUHhCLEtBQUs7c0JBQWIsS0FBSztnQkFDcUIsRUFBRTtzQkFBNUIsS0FBSzt1QkFBQyxFQUFFLFFBQVEsRUFBRSxJQUFJLEVBQUU7Z0JBQ2hCLE1BQU07c0JBQWQsS0FBSztnQkFDRyxHQUFHO3NCQUFYLEtBQUs7Z0JBRXFELGNBQWM7c0JBQXhFLGVBQWU7dUJBQUMsVUFBVSxDQUFDLEdBQUcsRUFBRSxDQUFDLHNCQUFzQixDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQWZ0ZXJWaWV3SW5pdCxcbiAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gIENvbXBvbmVudCxcbiAgQ29udGVudENoaWxkcmVuLFxuICBEZXN0cm95UmVmLFxuICBJbnB1dCxcbiAgT25EZXN0cm95LFxuICBPcHRpb25hbCxcbiAgUXVlcnlMaXN0LFxuICBTa2lwU2VsZixcbiAgZm9yd2FyZFJlZixcbiAgaW5qZWN0LFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEljb25Db21wb25lbnQgfSBmcm9tICcuLi8uLi9hdG9tcy9pY29uL2ljb24uY29tcG9uZW50JztcbmltcG9ydCB7IEFjY29yZGlvbkl0ZW1Db21wb25lbnQgfSBmcm9tICcuLi8uLi9hdG9tcy9hY2NvcmRpb24taXRlbS9hY2NvcmRpb24taXRlbS5jb21wb25lbnQnO1xuaW1wb3J0IHsgdGFrZVVudGlsRGVzdHJveWVkIH0gZnJvbSAnQGFuZ3VsYXIvY29yZS9yeGpzLWludGVyb3AnO1xuaW1wb3J0IHsgZGVib3VuY2VUaW1lLCBmaWx0ZXIsIHNraXAgfSBmcm9tICdyeGpzJztcbmltcG9ydCB7IEFzeW5jUGlwZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyBBY2NvcmRpb25SZWdpc3RyeVNlcnZpY2UgfSBmcm9tICcuLi8uLi8uLi9zZXJ2aWNlcy9hY2NvcmRpb24tcmVnaXN0cnkuc2VydmljZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2N0LWFjY29yZGlvbicsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGltcG9ydHM6IFtBc3luY1BpcGUsIEljb25Db21wb25lbnRdLFxuICB0ZW1wbGF0ZVVybDogJy4vYWNjb3JkaW9uLmNvbXBvbmVudC5odG1sJyxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG59KVxuZXhwb3J0IGNsYXNzIEFjY29yZGlvbkNvbXBvbmVudCBpbXBsZW1lbnRzIEFmdGVyVmlld0luaXQsIE9uRGVzdHJveSB7XG4gIHByaXZhdGUgcmVhZG9ubHkgZGVzdHJveVJlZiA9IGluamVjdChEZXN0cm95UmVmKTtcbiAgcHJpdmF0ZSByZWFkb25seSBhY2NvcmRpb25SZWdpc3RyeVNlcnZpY2UgPSBpbmplY3QoQWNjb3JkaW9uUmVnaXN0cnlTZXJ2aWNlKTtcbiAgQElucHV0KCkgbGFiZWwgPSAnJztcbiAgQElucHV0KHsgcmVxdWlyZWQ6IHRydWUgfSkgaWQhOiBzdHJpbmc7XG4gIEBJbnB1dCgpIHBvbGljeTogJ2NvbGxhcHNlJyB8ICdvcGVuJyA9ICdjb2xsYXBzZSc7XG4gIEBJbnB1dCgpIGdhcDogbnVtYmVyID0gMDtcblxuICBAQ29udGVudENoaWxkcmVuKGZvcndhcmRSZWYoKCkgPT4gQWNjb3JkaW9uSXRlbUNvbXBvbmVudCkpIGFjY29yZGlvbkl0ZW1zITogUXVlcnlMaXN0PEFjY29yZGlvbkl0ZW1Db21wb25lbnQ+O1xuXG4gIGNvbnN0cnVjdG9yKEBPcHRpb25hbCgpIEBTa2lwU2VsZigpIHByb3RlY3RlZCBwYXJlbnQ6IEFjY29yZGlvbkl0ZW1Db21wb25lbnQpIHt9XG5cbiAgbmdBZnRlclZpZXdJbml0KCkge1xuICAgIHRoaXMuYWNjb3JkaW9uSXRlbXMuZm9yRWFjaChhY2NvcmRpb25JdGVtID0+IHtcbiAgICAgIGFjY29yZGlvbkl0ZW0uaXNPcGVuXG4gICAgICAgIC5waXBlKFxuICAgICAgICAgIHRha2VVbnRpbERlc3Ryb3llZCh0aGlzLmRlc3Ryb3lSZWYpLFxuICAgICAgICAgIHNraXAoMSksXG4gICAgICAgICAgZmlsdGVyKGlzT3BlbiA9PiBpc09wZW4pLFxuICAgICAgICAgIGRlYm91bmNlVGltZSgxMClcbiAgICAgICAgKVxuICAgICAgICAuc3Vic2NyaWJlKCgpID0+IHtcbiAgICAgICAgICBpZiAodGhpcy5wYXJlbnQpIHtcbiAgICAgICAgICAgIHRoaXMucGFyZW50Py5pc09wZW4ubmV4dCh0cnVlKTtcbiAgICAgICAgICB9XG4gICAgICAgICAgaWYgKHRoaXMucG9saWN5ID09PSAnY29sbGFwc2UnKSB7XG4gICAgICAgICAgICB0aGlzLmFjY29yZGlvbkl0ZW1zLmZvckVhY2gob3RoZXJBY2NvcmRpb25JdGVtID0+IHtcbiAgICAgICAgICAgICAgaWYgKGFjY29yZGlvbkl0ZW0uaWQgIT09IG90aGVyQWNjb3JkaW9uSXRlbS5pZCAmJiBvdGhlckFjY29yZGlvbkl0ZW0uaXNPcGVuLmdldFZhbHVlKCkpIHtcbiAgICAgICAgICAgICAgICBvdGhlckFjY29yZGlvbkl0ZW0uaXNPcGVuLm5leHQoZmFsc2UpO1xuICAgICAgICAgICAgICB9XG4gICAgICAgICAgICB9KTtcbiAgICAgICAgICB9XG4gICAgICAgIH0pO1xuICAgIH0pO1xuICAgIHRoaXMuYWNjb3JkaW9uUmVnaXN0cnlTZXJ2aWNlLnJlZ2lzdGVyKHRoaXMuaWQsIHRoaXMpO1xuICB9XG5cbiAgbmdPbkRlc3Ryb3koKSB7XG4gICAgdGhpcy5hY2NvcmRpb25SZWdpc3RyeVNlcnZpY2UudW5yZWdpc3Rlcih0aGlzLmlkKTtcbiAgfVxuXG4gIGNsb3NlUGFuZXMoKSB7XG4gICAgdGhpcy5hY2NvcmRpb25JdGVtcy5mb3JFYWNoKGFjY29yZGlvbkl0ZW0gPT4gYWNjb3JkaW9uSXRlbS5pc09wZW4ubmV4dChmYWxzZSkpO1xuICB9XG59XG4iLCI8ZGl2IGNsYXNzPVwiZmxleCBmbGV4LWNvbCBnYXAte3sgZ2FwIH19XCI+XG4gIDxuZy1jb250ZW50PjwvbmctY29udGVudD5cbjwvZGl2PlxuIl19