import { EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, Inject, forwardRef, ChangeDetectorRef, Input, Output, ContentChildren, ElementRef, NgModule } from '@angular/core'; import { trigger, state, style, transition, animate } from '@angular/animations'; import { CommonModule } from '@angular/common'; import { Header, PrimeTemplate, SharedModule } from 'primeng/api'; let idx = 0; class AccordionTab { constructor(accordion, changeDetector) { this.changeDetector = changeDetector; this.cache = true; this.selectedChange = new EventEmitter(); this.transitionOptions = '400ms cubic-bezier(0.86, 0, 0.07, 1)'; this.id = `p-accordiontab-${idx++}`; this.accordion = accordion; } get selected() { return this._selected; } set selected(val) { this._selected = val; if (!this.loaded) { if (this._selected && this.cache) { this.loaded = true; } this.changeDetector.markForCheck(); } } ngAfterContentInit() { this.templates.forEach((item) => { switch (item.getType()) { case 'content': this.contentTemplate = item.template; break; case 'header': this.headerTemplate = item.template; break; default: this.contentTemplate = item.template; break; } }); } toggle(event) { if (this.disabled) { return false; } let index = this.findTabIndex(); if (this.selected) { this.selected = false; this.accordion.onClose.emit({ originalEvent: event, index: index }); } else { if (!this.accordion.multiple) { for (var i = 0; i < this.accordion.tabs.length; i++) { this.accordion.tabs[i].selected = false; this.accordion.tabs[i].selectedChange.emit(false); this.accordion.tabs[i].changeDetector.markForCheck(); } } this.selected = true; this.loaded = true; this.accordion.onOpen.emit({ originalEvent: event, index: index }); } this.selectedChange.emit(this.selected); this.accordion.updateActiveIndex(); this.changeDetector.markForCheck(); event.preventDefault(); } findTabIndex() { let index = -1; for (var i = 0; i < this.accordion.tabs.length; i++) { if (this.accordion.tabs[i] == this) { index = i; break; } } return index; } get hasHeaderFacet() { return this.headerFacet && this.headerFacet.length > 0; } onKeydown(event) { if (event.which === 32 || event.which === 13) { this.toggle(event); event.preventDefault(); } } ngOnDestroy() { this.accordion.tabs.splice(this.findTabIndex(), 1); } } AccordionTab.decorators = [ { type: Component, args: [{ selector: 'p-accordionTab', template: `
`, animations: [ trigger('tabContent', [ state('hidden', style({ height: '0', overflow: 'hidden' })), state('visible', style({ height: '*' })), transition('visible <=> hidden', [style({ overflow: 'hidden' }), animate('{{transitionParams}}')]), transition('void => *', animate(0)) ]) ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: [".p-accordion-header-link{-ms-user-select:none;-webkit-user-select:none;align-items:center;cursor:pointer;display:flex;position:relative;text-decoration:none;user-select:none}.p-accordion-header-link:focus{z-index:1}.p-accordion-header-text{line-height:1}"] },] } ]; AccordionTab.ctorParameters = () => [ { type: undefined, decorators: [{ type: Inject, args: [forwardRef(() => Accordion),] }] }, { type: ChangeDetectorRef } ]; AccordionTab.propDecorators = { header: [{ type: Input }], disabled: [{ type: Input }], cache: [{ type: Input }], selectedChange: [{ type: Output }], transitionOptions: [{ type: Input }], headerFacet: [{ type: ContentChildren, args: [Header,] }], templates: [{ type: ContentChildren, args: [PrimeTemplate,] }], selected: [{ type: Input }] }; class Accordion { constructor(el, changeDetector) { this.el = el; this.changeDetector = changeDetector; this.onClose = new EventEmitter(); this.onOpen = new EventEmitter(); this.expandIcon = 'pi pi-fw pi-chevron-right'; this.collapseIcon = 'pi pi-fw pi-chevron-down'; this.activeIndexChange = new EventEmitter(); this.tabs = []; } ngAfterContentInit() { this.initTabs(); this.tabListSubscription = this.tabList.changes.subscribe(_ => { this.initTabs(); }); } initTabs() { this.tabs = this.tabList.toArray(); this.updateSelectionState(); this.changeDetector.markForCheck(); } getBlockableElement() { return this.el.nativeElement.children[0]; } get activeIndex() { return this._activeIndex; } set activeIndex(val) { this._activeIndex = val; if (this.preventActiveIndexPropagation) { this.preventActiveIndexPropagation = false; return; } this.updateSelectionState(); } updateSelectionState() { if (this.tabs && this.tabs.length && this._activeIndex != null) { for (let i = 0; i < this.tabs.length; i++) { let selected = this.multiple ? this._activeIndex.includes(i) : (i === this._activeIndex); let changed = selected !== this.tabs[i].selected; if (changed) { this.tabs[i].selected = selected; this.tabs[i].selectedChange.emit(selected); this.tabs[i].changeDetector.markForCheck(); } } } } updateActiveIndex() { let index = this.multiple ? [] : null; this.tabs.forEach((tab, i) => { if (tab.selected) { if (this.multiple) { index.push(i); } else { index = i; return; } } }); this.preventActiveIndexPropagation = true; this.activeIndexChange.emit(index); } ngOnDestroy() { if (this.tabListSubscription) { this.tabListSubscription.unsubscribe(); } } } Accordion.decorators = [ { type: Component, args: [{ selector: 'p-accordion', template: `