primeng
Version:
[](https://badge.fury.io/js/primeng) [](https://www.npmjs.com/package/primeng) [ • 32 kB
JavaScript
import { trigger, state, style, transition, animate } from '@angular/animations';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { EventEmitter, forwardRef, booleanAttribute, numberAttribute, Component, ChangeDetectionStrategy, ViewEncapsulation, Inject, Input, Output, ContentChildren, HostListener, NgModule } from '@angular/core';
import { Header, PrimeTemplate, SharedModule } from 'primeng/api';
import { DomHandler } from 'primeng/dom';
import { ChevronDownIcon } from 'primeng/icons/chevrondown';
import { ChevronRightIcon } from 'primeng/icons/chevronright';
import { UniqueComponentId } from 'primeng/utils';
/**
* AccordionTab is a helper component for Accordion.
* @group Components
*/
class AccordionTab {
el;
changeDetector;
/**
* Current id state as a string.
* @group Props
*/
id;
/**
* Used to define the header of the tab.
* @group Props
*/
header;
/**
* Inline style of the tab header.
* @group Props
*/
headerStyle;
/**
* Inline style of the tab.
* @group Props
*/
tabStyle;
/**
* Inline style of the tab content.
* @group Props
*/
contentStyle;
/**
* Style class of the tab.
* @group Props
*/
tabStyleClass;
/**
* Style class of the tab header.
* @group Props
*/
headerStyleClass;
/**
* Style class of the tab content.
* @group Props
*/
contentStyleClass;
/**
* Whether the tab is disabled.
* @group Props
*/
disabled;
/**
* Whether a lazy loaded panel should avoid getting loaded again on reselection.
* @group Props
*/
cache = true;
/**
* Transition options of the animation.
* @group Props
*/
transitionOptions = '400ms cubic-bezier(0.86, 0, 0.07, 1)';
/**
* Position of the icon.
* @group Props
*/
iconPos = 'start';
/**
* The value that returns the selection.
* @group Props
*/
get selected() {
return this._selected;
}
set selected(val) {
this._selected = val;
if (!this.loaded) {
if (this._selected && this.cache) {
this.loaded = true;
}
this.changeDetector.detectChanges();
}
}
/**
* The aria-level that each accordion header will have. The default value is 2 as per W3C specifications
* @group Props
*/
headerAriaLevel = 2;
/**
* Event triggered by changing the choice.
* @param {boolean} value - Boolean value indicates that the option is changed.
* @group Emits
*/
selectedChange = new EventEmitter();
headerFacet;
templates;
_selected = false;
get iconClass() {
if (this.iconPos === 'end') {
return 'p-accordion-toggle-icon-end';
}
else {
return 'p-accordion-toggle-icon';
}
}
contentTemplate;
headerTemplate;
iconTemplate;
loaded = false;
accordion;
constructor(accordion, el, changeDetector) {
this.el = el;
this.changeDetector = changeDetector;
this.accordion = accordion;
this.id = UniqueComponentId();
}
ngAfterContentInit() {
this.templates.forEach((item) => {
switch (item.getType()) {
case 'content':
this.contentTemplate = item.template;
break;
case 'header':
this.headerTemplate = item.template;
break;
case 'icon':
this.iconTemplate = 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++) {
if (this.accordion.tabs[i].selected) {
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) {
switch (event.code) {
case 'Enter':
case 'Space':
this.toggle(event);
event.preventDefault();
break;
default:
break;
}
}
getTabHeaderActionId(tabId) {
return `${tabId}_header_action`;
}
getTabContentId(tabId) {
return `${tabId}_content`;
}
ngOnDestroy() {
this.accordion.tabs.splice(this.findTabIndex(), 1);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: AccordionTab, deps: [{ token: forwardRef(() => Accordion) }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.1", type: AccordionTab, selector: "p-accordionTab", inputs: { id: "id", header: "header", headerStyle: "headerStyle", tabStyle: "tabStyle", contentStyle: "contentStyle", tabStyleClass: "tabStyleClass", headerStyleClass: "headerStyleClass", contentStyleClass: "contentStyleClass", disabled: ["disabled", "disabled", booleanAttribute], cache: ["cache", "cache", booleanAttribute], transitionOptions: "transitionOptions", iconPos: "iconPos", selected: "selected", headerAriaLevel: ["headerAriaLevel", "headerAriaLevel", numberAttribute] }, outputs: { selectedChange: "selectedChange" }, host: { classAttribute: "p-element" }, queries: [{ propertyName: "headerFacet", predicate: Header }, { propertyName: "templates", predicate: PrimeTemplate }], ngImport: i0, template: `
<div class="p-accordion-tab" [class.p-accordion-tab-active]="selected" [ngClass]="tabStyleClass" [ngStyle]="tabStyle" [attr.data-pc-name]="'accordiontab'">
<div class="p-accordion-header" role="heading" [attr.aria-level]="headerAriaLevel" [class.p-highlight]="selected" [class.p-disabled]="disabled" [attr.data-p-disabled]="disabled" [attr.data-pc-section]="'header'">
<a
[ngClass]="headerStyleClass"
[style]="headerStyle"
role="button"
class="p-accordion-header-link"
(click)="toggle($event)"
(keydown)="onKeydown($event)"
[attr.tabindex]="disabled ? null : 0"
[attr.id]="getTabHeaderActionId(id)"
[attr.aria-controls]="getTabContentId(id)"
[attr.aria-expanded]="selected"
[attr.aria-disabled]="disabled"
[attr.data-pc-section]="'headeraction'"
>
<ng-container *ngIf="!iconTemplate">
<ng-container *ngIf="selected">
<span *ngIf="accordion.collapseIcon" [class]="accordion.collapseIcon" [ngClass]="iconClass" [attr.aria-hidden]="true"></span>
<ChevronDownIcon *ngIf="!accordion.collapseIcon" [ngClass]="iconClass" [attr.aria-hidden]="true" />
</ng-container>
<ng-container *ngIf="!selected">
<span *ngIf="accordion.expandIcon" [class]="accordion.expandIcon" [ngClass]="iconClass" [attr.aria-hidden]="true"></span>
<ChevronRightIcon *ngIf="!accordion.expandIcon" [ngClass]="iconClass" [attr.aria-hidden]="true" />
</ng-container>
</ng-container>
<ng-template *ngTemplateOutlet="iconTemplate; context: { $implicit: selected }"></ng-template>
<span class="p-accordion-header-text" *ngIf="!hasHeaderFacet">
{{ header }}
</span>
<ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
<ng-content select="p-header" *ngIf="hasHeaderFacet"></ng-content>
</a>
</div>
<div
[attr.id]="getTabContentId(id)"
class="p-toggleable-content"
[]="selected ? { value: 'visible', params: { transitionParams: transitionOptions } } : { value: 'hidden', params: { transitionParams: transitionOptions } }"
role="region"
[attr.aria-hidden]="!selected"
[attr.aria-labelledby]="getTabHeaderActionId(id)"
[attr.data-pc-section]="'toggleablecontent'"
>
<div class="p-accordion-content" [ngClass]="contentStyleClass" [ngStyle]="contentStyle">
<ng-content></ng-content>
<ng-container *ngIf="contentTemplate && (cache ? loaded : selected)">
<ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
</ng-container>
</div>
</div>
</div>
`, isInline: true, styles: ["@layer primeng{.p-accordion-header-link{cursor:pointer;display:flex;align-items:center;-webkit-user-select:none;user-select:none;position:relative;text-decoration:none}.p-accordion-header-link:focus{z-index:1}.p-accordion-header-text{line-height:1}.p-accordion .p-toggleable-content{overflow:hidden}.p-accordion .p-accordion-tab-active>.p-toggleable-content:not(.ng-animating){overflow:inherit}.p-accordion-toggle-icon-end{order:1;margin-left:auto}.p-accordion-toggle-icon{order:0}}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(() => i1.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgStyle), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i0.forwardRef(() => ChevronRightIcon), selector: "ChevronRightIcon" }, { kind: "component", type: i0.forwardRef(() => ChevronDownIcon), selector: "ChevronDownIcon" }], animations: [
trigger('tabContent', [
state('hidden', style({
height: '0',
visibility: 'hidden'
})),
state('visible', style({
height: '*',
visibility: 'visible'
})),
transition('visible <=> hidden', [animate('{{transitionParams}}')]),
transition('void => *', animate(0))
])
], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: AccordionTab, decorators: [{
type: Component,
args: [{ selector: 'p-accordionTab', template: `
<div class="p-accordion-tab" [class.p-accordion-tab-active]="selected" [ngClass]="tabStyleClass" [ngStyle]="tabStyle" [attr.data-pc-name]="'accordiontab'">
<div class="p-accordion-header" role="heading" [attr.aria-level]="headerAriaLevel" [class.p-highlight]="selected" [class.p-disabled]="disabled" [attr.data-p-disabled]="disabled" [attr.data-pc-section]="'header'">
<a
[ngClass]="headerStyleClass"
[style]="headerStyle"
role="button"
class="p-accordion-header-link"
(click)="toggle($event)"
(keydown)="onKeydown($event)"
[attr.tabindex]="disabled ? null : 0"
[attr.id]="getTabHeaderActionId(id)"
[attr.aria-controls]="getTabContentId(id)"
[attr.aria-expanded]="selected"
[attr.aria-disabled]="disabled"
[attr.data-pc-section]="'headeraction'"
>
<ng-container *ngIf="!iconTemplate">
<ng-container *ngIf="selected">
<span *ngIf="accordion.collapseIcon" [class]="accordion.collapseIcon" [ngClass]="iconClass" [attr.aria-hidden]="true"></span>
<ChevronDownIcon *ngIf="!accordion.collapseIcon" [ngClass]="iconClass" [attr.aria-hidden]="true" />
</ng-container>
<ng-container *ngIf="!selected">
<span *ngIf="accordion.expandIcon" [class]="accordion.expandIcon" [ngClass]="iconClass" [attr.aria-hidden]="true"></span>
<ChevronRightIcon *ngIf="!accordion.expandIcon" [ngClass]="iconClass" [attr.aria-hidden]="true" />
</ng-container>
</ng-container>
<ng-template *ngTemplateOutlet="iconTemplate; context: { $implicit: selected }"></ng-template>
<span class="p-accordion-header-text" *ngIf="!hasHeaderFacet">
{{ header }}
</span>
<ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
<ng-content select="p-header" *ngIf="hasHeaderFacet"></ng-content>
</a>
</div>
<div
[attr.id]="getTabContentId(id)"
class="p-toggleable-content"
[]="selected ? { value: 'visible', params: { transitionParams: transitionOptions } } : { value: 'hidden', params: { transitionParams: transitionOptions } }"
role="region"
[attr.aria-hidden]="!selected"
[attr.aria-labelledby]="getTabHeaderActionId(id)"
[attr.data-pc-section]="'toggleablecontent'"
>
<div class="p-accordion-content" [ngClass]="contentStyleClass" [ngStyle]="contentStyle">
<ng-content></ng-content>
<ng-container *ngIf="contentTemplate && (cache ? loaded : selected)">
<ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
</ng-container>
</div>
</div>
</div>
`, animations: [
trigger('tabContent', [
state('hidden', style({
height: '0',
visibility: 'hidden'
})),
state('visible', style({
height: '*',
visibility: 'visible'
})),
transition('visible <=> hidden', [animate('{{transitionParams}}')]),
transition('void => *', animate(0))
])
], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
class: 'p-element'
}, styles: ["@layer primeng{.p-accordion-header-link{cursor:pointer;display:flex;align-items:center;-webkit-user-select:none;user-select:none;position:relative;text-decoration:none}.p-accordion-header-link:focus{z-index:1}.p-accordion-header-text{line-height:1}.p-accordion .p-toggleable-content{overflow:hidden}.p-accordion .p-accordion-tab-active>.p-toggleable-content:not(.ng-animating){overflow:inherit}.p-accordion-toggle-icon-end{order:1;margin-left:auto}.p-accordion-toggle-icon{order:0}}\n"] }]
}], ctorParameters: () => [{ type: Accordion, decorators: [{
type: Inject,
args: [forwardRef(() => Accordion)]
}] }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { id: [{
type: Input
}], header: [{
type: Input
}], headerStyle: [{
type: Input
}], tabStyle: [{
type: Input
}], contentStyle: [{
type: Input
}], tabStyleClass: [{
type: Input
}], headerStyleClass: [{
type: Input
}], contentStyleClass: [{
type: Input
}], disabled: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], cache: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], transitionOptions: [{
type: Input
}], iconPos: [{
type: Input
}], selected: [{
type: Input
}], headerAriaLevel: [{
type: Input,
args: [{ transform: numberAttribute }]
}], selectedChange: [{
type: Output
}], headerFacet: [{
type: ContentChildren,
args: [Header]
}], templates: [{
type: ContentChildren,
args: [PrimeTemplate]
}] } });
/**
* Accordion groups a collection of contents in tabs.
* @group Components
*/
class Accordion {
el;
changeDetector;
/**
* When enabled, multiple tabs can be activated at the same time.
* @group Props
*/
multiple = false;
/**
* Inline style of the tab header and content.
* @group Props
*/
style;
/**
* Class of the element.
* @group Props
*/
styleClass;
/**
* Icon of a collapsed tab.
* @group Props
*/
expandIcon;
/**
* Icon of an expanded tab.
* @group Props
*/
collapseIcon;
/**
* Index of the active tab or an array of indexes in multiple mode.
* @group Props
*/
get activeIndex() {
return this._activeIndex;
}
set activeIndex(val) {
this._activeIndex = val;
if (this.preventActiveIndexPropagation) {
this.preventActiveIndexPropagation = false;
return;
}
this.updateSelectionState();
}
/**
* When enabled, the focused tab is activated.
* @group Props
*/
selectOnFocus = false;
/**
* The aria-level that each accordion header will have. The default value is 2 as per W3C specifications
* @group Props
*/
get headerAriaLevel() {
return this._headerAriaLevel;
}
set headerAriaLevel(val) {
if (typeof val === 'number' && val > 0) {
this._headerAriaLevel = val;
}
else if (this._headerAriaLevel !== 2) {
this._headerAriaLevel = 2;
}
}
/**
* Callback to invoke when an active tab is collapsed by clicking on the header.
* @param {AccordionTabCloseEvent} event - Custom tab close event.
* @group Emits
*/
onClose = new EventEmitter();
/**
* Callback to invoke when a tab gets expanded.
* @param {AccordionTabOpenEvent} event - Custom tab open event.
* @group Emits
*/
onOpen = new EventEmitter();
/**
* Returns the active index.
* @param {number | number[]} value - New index.
* @group Emits
*/
activeIndexChange = new EventEmitter();
tabList;
tabListSubscription = null;
_activeIndex;
_headerAriaLevel = 2;
preventActiveIndexPropagation = false;
tabs = [];
constructor(el, changeDetector) {
this.el = el;
this.changeDetector = changeDetector;
}
onKeydown(event) {
switch (event.code) {
case 'ArrowDown':
this.onTabArrowDownKey(event);
break;
case 'ArrowUp':
this.onTabArrowUpKey(event);
break;
case 'Home':
if (!event.shiftKey) {
this.onTabHomeKey(event);
}
break;
case 'End':
if (!event.shiftKey) {
this.onTabEndKey(event);
}
break;
}
}
isInput(event) {
const { tagName } = event.target;
return tagName?.toLowerCase() === 'input';
}
isTextArea(event) {
const { tagName } = event.target;
return tagName?.toLowerCase() === 'textarea';
}
onTabArrowDownKey(event) {
if (!this.isInput(event) && !this.isTextArea(event)) {
const nextHeaderAction = this.findNextHeaderAction(event.target.parentElement.parentElement.parentElement);
nextHeaderAction ? this.changeFocusedTab(nextHeaderAction) : this.onTabHomeKey(event);
event.preventDefault();
}
}
onTabArrowUpKey(event) {
if (!this.isInput(event) && !this.isTextArea(event)) {
const prevHeaderAction = this.findPrevHeaderAction(event.target.parentElement.parentElement.parentElement);
prevHeaderAction ? this.changeFocusedTab(prevHeaderAction) : this.onTabEndKey(event);
event.preventDefault();
}
}
onTabHomeKey(event) {
const firstHeaderAction = this.findFirstHeaderAction();
this.changeFocusedTab(firstHeaderAction);
event.preventDefault();
}
changeFocusedTab(element) {
if (element) {
DomHandler.focus(element);
if (this.selectOnFocus) {
this.tabs.forEach((tab, i) => {
let selected = this.multiple ? this._activeIndex.includes(i) : i === this._activeIndex;
if (this.multiple) {
if (!this._activeIndex) {
this._activeIndex = [];
}
if (tab.id == element.id) {
tab.selected = !tab.selected;
if (!this._activeIndex.includes(i)) {
this._activeIndex.push(i);
}
else {
this._activeIndex = this._activeIndex.filter((ind) => ind !== i);
}
}
}
else {
if (tab.id == element.id) {
tab.selected = !tab.selected;
this._activeIndex = i;
}
else {
tab.selected = false;
}
}
tab.selectedChange.emit(selected);
this.activeIndexChange.emit(this._activeIndex);
tab.changeDetector.markForCheck();
});
}
}
}
findNextHeaderAction(tabElement, selfCheck = false) {
const nextTabElement = selfCheck ? tabElement : tabElement.nextElementSibling;
const headerElement = DomHandler.findSingle(nextTabElement, '[data-pc-section="header"]');
return headerElement ? (DomHandler.getAttribute(headerElement, 'data-p-disabled') ? this.findNextHeaderAction(headerElement.parentElement.parentElement) : DomHandler.findSingle(headerElement, '[data-pc-section="headeraction"]')) : null;
}
findPrevHeaderAction(tabElement, selfCheck = false) {
const prevTabElement = selfCheck ? tabElement : tabElement.previousElementSibling;
const headerElement = DomHandler.findSingle(prevTabElement, '[data-pc-section="header"]');
return headerElement ? (DomHandler.getAttribute(headerElement, 'data-p-disabled') ? this.findPrevHeaderAction(headerElement.parentElement.parentElement) : DomHandler.findSingle(headerElement, '[data-pc-section="headeraction"]')) : null;
}
findFirstHeaderAction() {
const firstEl = this.el.nativeElement.firstElementChild.childNodes[0];
return this.findNextHeaderAction(firstEl, true);
}
findLastHeaderAction() {
const childNodes = this.el.nativeElement.firstElementChild.childNodes;
const lastEl = childNodes[childNodes.length - 1];
return this.findPrevHeaderAction(lastEl, true);
}
onTabEndKey(event) {
const lastHeaderAction = this.findLastHeaderAction();
this.changeFocusedTab(lastHeaderAction);
event.preventDefault();
}
ngAfterContentInit() {
this.initTabs();
this.tabListSubscription = this.tabList.changes.subscribe((_) => {
this.initTabs();
});
}
initTabs() {
this.tabs = this.tabList.toArray();
this.tabs.forEach((tab) => {
tab.headerAriaLevel = this._headerAriaLevel;
});
this.updateSelectionState();
this.changeDetector.markForCheck();
}
getBlockableElement() {
return this.el.nativeElement.children[0];
}
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();
}
}
}
}
isTabActive(index) {
return this.multiple ? this._activeIndex && this._activeIndex.includes(index) : this._activeIndex === index;
}
getTabProp(tab, name) {
return tab.props ? tab.props[name] : undefined;
}
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._activeIndex = index;
this.activeIndexChange.emit(index);
}
ngOnDestroy() {
if (this.tabListSubscription) {
this.tabListSubscription.unsubscribe();
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: Accordion, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.1", type: Accordion, selector: "p-accordion", inputs: { multiple: ["multiple", "multiple", booleanAttribute], style: "style", styleClass: "styleClass", expandIcon: "expandIcon", collapseIcon: "collapseIcon", activeIndex: "activeIndex", selectOnFocus: ["selectOnFocus", "selectOnFocus", booleanAttribute], headerAriaLevel: "headerAriaLevel" }, outputs: { onClose: "onClose", onOpen: "onOpen", activeIndexChange: "activeIndexChange" }, host: { listeners: { "keydown": "onKeydown($event)" }, classAttribute: "p-element" }, queries: [{ propertyName: "tabList", predicate: AccordionTab, descendants: true }], ngImport: i0, template: `
<div [ngClass]="'p-accordion p-component'" [ngStyle]="style" [class]="styleClass">
<ng-content></ng-content>
</div>
`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: Accordion, decorators: [{
type: Component,
args: [{
selector: 'p-accordion',
template: `
<div [ngClass]="'p-accordion p-component'" [ngStyle]="style" [class]="styleClass">
<ng-content></ng-content>
</div>
`,
changeDetection: ChangeDetectionStrategy.OnPush,
host: {
class: 'p-element'
}
}]
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { multiple: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], style: [{
type: Input
}], styleClass: [{
type: Input
}], expandIcon: [{
type: Input
}], collapseIcon: [{
type: Input
}], activeIndex: [{
type: Input
}], selectOnFocus: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], headerAriaLevel: [{
type: Input
}], onClose: [{
type: Output
}], onOpen: [{
type: Output
}], activeIndexChange: [{
type: Output
}], tabList: [{
type: ContentChildren,
args: [AccordionTab, { descendants: true }]
}], onKeydown: [{
type: HostListener,
args: ['keydown', ['$event']]
}] } });
class AccordionModule {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: AccordionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.1", ngImport: i0, type: AccordionModule, declarations: [Accordion, AccordionTab], imports: [CommonModule, ChevronRightIcon, ChevronDownIcon], exports: [Accordion, AccordionTab, SharedModule] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: AccordionModule, imports: [CommonModule, ChevronRightIcon, ChevronDownIcon, SharedModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: AccordionModule, decorators: [{
type: NgModule,
args: [{
imports: [CommonModule, ChevronRightIcon, ChevronDownIcon],
exports: [Accordion, AccordionTab, SharedModule],
declarations: [Accordion, AccordionTab]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { Accordion, AccordionModule, AccordionTab };
//# sourceMappingURL=primeng-accordion.mjs.map