primeng
Version:
PrimeNG is an open source UI library for Angular featuring a rich set of 80+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeB
590 lines (581 loc) • 30.4 kB
JavaScript
import { trigger, state, transition, style as style$1, animate } from '@angular/animations';
import * as i2 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { Injectable, inject, forwardRef, model, input, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, HostListener, ContentChild, EventEmitter, signal, Output, Input, NgModule } from '@angular/core';
import { findSingle, getAttribute, focus, uuid } from '@primeuix/utils';
import { SharedModule } from 'primeng/api';
import { BaseComponent } from 'primeng/basecomponent';
import { ChevronDownIcon, ChevronUpIcon } from 'primeng/icons';
import * as i1 from 'primeng/ripple';
import { Ripple } from 'primeng/ripple';
import { transformToBoolean } from 'primeng/utils';
import { style } from '@primeuix/styles/accordion';
import { BaseStyle } from 'primeng/base';
const theme = /*css*/ `
${style}
/*For PrimeNG*/
.p-accordionpanel:not(.p-accordionpanel-active) > .p-accordioncontent,
.p-accordioncontent-content.ng-animating {
overflow: hidden;
}
.p-accordionheader-toggle-icon.icon-start {
order: -1;
}
.p-accordionheader:has(.p-accordionheader-toggle-icon.icon-start) {
justify-content: flex-start;
gap: dt('accordion.header.padding');
}
.p-accordioncontent.ng-animating {
overflow: hidden;
}
`;
const classes = {
root: 'p-accordion p-component',
panel: ({ instance }) => [
'p-accordionpanel',
{
'p-accordionpanel-active': instance.active(),
'p-disabled': instance.disabled()
}
],
header: 'p-accordionheader',
toggleicon: 'p-accordionheader-toggle-icon',
contentContainer: 'p-accordioncontent',
content: 'p-accordioncontent-content'
};
class AccordionStyle extends BaseStyle {
name = 'accordion';
theme = theme;
classes = classes;
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AccordionStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AccordionStyle });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AccordionStyle, decorators: [{
type: Injectable
}] });
/**
*
* Accordion groups a collection of contents in tabs.
*
* [Live Demo](https://www.primeng.org/accordion/)
*
* @module accordionstyle
*
*/
var AccordionClasses;
(function (AccordionClasses) {
/**
* Class name of the root element
*/
AccordionClasses["root"] = "p-accordion";
/**
* Class name of the content wrapper
*/
AccordionClasses["contentwrapper"] = "p-accordioncontent";
/**
* Class name of the content
*/
AccordionClasses["content"] = "p-accordioncontent-content";
/**
* Class name of the header
*/
AccordionClasses["header"] = "p-accordionheader";
/**
* Class name of the toggle icon
*/
AccordionClasses["toggleicon"] = "p-accordionheader-toggle-icon";
/**
* Class name of the panel
*/
AccordionClasses["panel"] = "p-accordionpanel";
})(AccordionClasses || (AccordionClasses = {}));
/**
* AccordionPanel is a helper component for Accordion component.
* @group Components
*/
class AccordionPanel extends BaseComponent {
pcAccordion = inject(forwardRef(() => Accordion));
/**
* Value of the active tab.
* @defaultValue undefined
* @group Props
*/
value = model(undefined, ...(ngDevMode ? [{ debugName: "value" }] : []));
/**
* Disables the tab when enabled.
* @defaultValue false
* @group Props
*/
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: (v) => transformToBoolean(v) }] : [{ transform: (v) => transformToBoolean(v) }]));
active = computed(() => (this.pcAccordion.multiple() ? this.valueEquals(this.pcAccordion.value(), this.value()) : this.pcAccordion.value() === this.value()), ...(ngDevMode ? [{ debugName: "active" }] : []));
valueEquals(currentValue, value) {
if (Array.isArray(currentValue)) {
return currentValue.includes(value);
}
return currentValue === value;
}
_componentStyle = inject(AccordionStyle);
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AccordionPanel, deps: null, target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.3", type: AccordionPanel, isStandalone: true, selector: "p-accordion-panel, p-accordionpanel", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class": "cx(\"panel\")", "attr.data-pc-name": "\"accordionpanel\"", "attr.data-p-disabled": "disabled()", "attr.data-p-active": "active()" } }, providers: [AccordionStyle], usesInheritance: true, ngImport: i0, template: `<ng-content />`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AccordionPanel, decorators: [{
type: Component,
args: [{
selector: 'p-accordion-panel, p-accordionpanel',
imports: [CommonModule],
standalone: true,
template: `<ng-content />`,
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
host: {
'[class]': 'cx("panel")',
'[attr.data-pc-name]': '"accordionpanel"',
'[attr.data-p-disabled]': 'disabled()',
'[attr.data-p-active]': 'active()'
},
providers: [AccordionStyle]
}]
}] });
/**
* AccordionHeader is a helper component for Accordion component.
* @group Components
*/
class AccordionHeader extends BaseComponent {
pcAccordion = inject(forwardRef(() => Accordion));
pcAccordionPanel = inject(forwardRef(() => AccordionPanel));
id = computed(() => `${this.pcAccordion.id()}_accordionheader_${this.pcAccordionPanel.value()}`, ...(ngDevMode ? [{ debugName: "id" }] : []));
active = computed(() => this.pcAccordionPanel.active(), ...(ngDevMode ? [{ debugName: "active" }] : []));
disabled = computed(() => this.pcAccordionPanel.disabled(), ...(ngDevMode ? [{ debugName: "disabled" }] : []));
ariaControls = computed(() => `${this.pcAccordion.id()}_accordioncontent_${this.pcAccordionPanel.value()}`, ...(ngDevMode ? [{ debugName: "ariaControls" }] : []));
/**
* Toggle icon template.
* @type {TemplateRef<AccordionToggleIconTemplateContext>} context - Context of the template
* @example
* ```html
* <ng-template #toggleicon let-active="active"> </ng-template>
* ```
* @see {@link AccordionToggleIconTemplateContext}
* @group Templates
*/
toggleicon;
onClick(event) {
const wasActive = this.active();
this.changeActiveValue();
const isActive = this.active();
const index = this.pcAccordionPanel.value();
if (!wasActive && isActive) {
this.pcAccordion.onOpen.emit({ originalEvent: event, index });
}
else if (wasActive && !isActive) {
this.pcAccordion.onClose.emit({ originalEvent: event, index });
}
}
onFocus() {
this.pcAccordion.selectOnFocus() && this.changeActiveValue();
}
onKeydown(event) {
switch (event.code) {
case 'ArrowDown':
this.arrowDownKey(event);
break;
case 'ArrowUp':
this.arrowUpKey(event);
break;
case 'Home':
this.onHomeKey(event);
break;
case 'End':
this.onEndKey(event);
break;
case 'Enter':
case 'Space':
case 'NumpadEnter':
this.onEnterKey(event);
break;
default:
break;
}
}
_componentStyle = inject(AccordionStyle);
changeActiveValue() {
this.pcAccordion.updateValue(this.pcAccordionPanel.value());
}
findPanel(headerElement) {
return headerElement?.closest('[data-pc-name="accordionpanel"]');
}
findHeader(panelElement) {
return findSingle(panelElement, '[data-pc-name="accordionheader"]');
}
findNextPanel(panelElement, selfCheck = false) {
const element = selfCheck ? panelElement : panelElement.nextElementSibling;
return element ? (getAttribute(element, 'data-p-disabled') ? this.findNextPanel(element) : this.findHeader(element)) : null;
}
findPrevPanel(panelElement, selfCheck = false) {
const element = selfCheck ? panelElement : panelElement.previousElementSibling;
return element ? (getAttribute(element, 'data-p-disabled') ? this.findPrevPanel(element) : this.findHeader(element)) : null;
}
findFirstPanel() {
return this.findNextPanel(this.pcAccordion.el.nativeElement.firstElementChild, true);
}
findLastPanel() {
return this.findPrevPanel(this.pcAccordion.el.nativeElement.lastElementChild, true);
}
changeFocusedPanel(event, element) {
focus(element);
}
arrowDownKey(event) {
const nextPanel = this.findNextPanel(this.findPanel(event.currentTarget));
nextPanel ? this.changeFocusedPanel(event, nextPanel) : this.onHomeKey(event);
event.preventDefault();
}
arrowUpKey(event) {
const prevPanel = this.findPrevPanel(this.findPanel(event.currentTarget));
prevPanel ? this.changeFocusedPanel(event, prevPanel) : this.onEndKey(event);
event.preventDefault();
}
onHomeKey(event) {
const firstPanel = this.findFirstPanel();
this.changeFocusedPanel(event, firstPanel);
event.preventDefault();
}
onEndKey(event) {
const lastPanel = this.findLastPanel();
this.changeFocusedPanel(event, lastPanel);
event.preventDefault();
}
onEnterKey(event) {
this.changeActiveValue();
event.preventDefault();
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AccordionHeader, deps: null, target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: AccordionHeader, isStandalone: true, selector: "p-accordion-header, p-accordionheader", host: { listeners: { "click": "onClick($event)", "focus": "onFocus($event)", "keydown": "onKeydown($event)" }, properties: { "class": "cx('header')", "attr.id": "id()", "attr.aria-expanded": "active()", "attr.aria-controls": "ariaControls()", "attr.aria-disabled": "disabled()", "attr.role": "\"button\"", "attr.tabindex": "disabled()?\"-1\":\"0\"", "attr.data-p-active": "active()", "attr.data-p-disabled": "disabled()", "attr.data-pc-name": "\"accordionheader\"", "style.user-select": "\"none\"" } }, providers: [AccordionStyle], queries: [{ propertyName: "toggleicon", first: true, predicate: ["toggleicon"], descendants: true }], usesInheritance: true, hostDirectives: [{ directive: i1.Ripple }], ngImport: i0, template: `
<ng-content />
(toggleicon) {
<ng-template *ngTemplateOutlet="toggleicon; context: { active: active() }"></ng-template>
} {
<ng-container *ngIf="active()">
<span *ngIf="pcAccordion.collapseIcon" [class]="pcAccordion.collapseIcon" [ngClass]="pcAccordion.iconClass" [attr.aria-hidden]="true"></span>
<svg data-p-icon="chevron-up" *ngIf="!pcAccordion.collapseIcon" [class]="pcAccordion.iconClass" [attr.aria-hidden]="true" />
</ng-container>
<ng-container *ngIf="!active()">
<span *ngIf="pcAccordion.expandIcon" [class]="pcAccordion.expandIcon" [ngClass]="pcAccordion.iconClass" [attr.aria-hidden]="true"></span>
<svg data-p-icon="chevron-down" *ngIf="!pcAccordion.expandIcon" [class]="pcAccordion.iconClass" [attr.aria-hidden]="true" />
</ng-container>
}
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ChevronDownIcon, selector: "[data-p-icon=\"chevron-down\"]" }, { kind: "component", type: ChevronUpIcon, selector: "[data-p-icon=\"chevron-up\"]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AccordionHeader, decorators: [{
type: Component,
args: [{
selector: 'p-accordion-header, p-accordionheader',
imports: [CommonModule, ChevronDownIcon, ChevronUpIcon],
standalone: true,
template: `
<ng-content />
(toggleicon) {
<ng-template *ngTemplateOutlet="toggleicon; context: { active: active() }"></ng-template>
} {
<ng-container *ngIf="active()">
<span *ngIf="pcAccordion.collapseIcon" [class]="pcAccordion.collapseIcon" [ngClass]="pcAccordion.iconClass" [attr.aria-hidden]="true"></span>
<svg data-p-icon="chevron-up" *ngIf="!pcAccordion.collapseIcon" [class]="pcAccordion.iconClass" [attr.aria-hidden]="true" />
</ng-container>
<ng-container *ngIf="!active()">
<span *ngIf="pcAccordion.expandIcon" [class]="pcAccordion.expandIcon" [ngClass]="pcAccordion.iconClass" [attr.aria-hidden]="true"></span>
<svg data-p-icon="chevron-down" *ngIf="!pcAccordion.expandIcon" [class]="pcAccordion.iconClass" [attr.aria-hidden]="true" />
</ng-container>
}
`,
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
host: {
'[class]': "cx('header')",
'[attr.id]': 'id()',
'[attr.aria-expanded]': 'active()',
'[attr.aria-controls]': 'ariaControls()',
'[attr.aria-disabled]': 'disabled()',
'[attr.role]': '"button"',
'[attr.tabindex]': 'disabled()?"-1":"0"',
'[attr.data-p-active]': 'active()',
'[attr.data-p-disabled]': 'disabled()',
'[attr.data-pc-name]': '"accordionheader"',
'[style.user-select]': '"none"'
},
hostDirectives: [Ripple],
providers: [AccordionStyle]
}]
}], propDecorators: { toggleicon: [{
type: ContentChild,
args: ['toggleicon']
}], onClick: [{
type: HostListener,
args: ['click', ['$event']]
}], onFocus: [{
type: HostListener,
args: ['focus', ['$event']]
}], onKeydown: [{
type: HostListener,
args: ['keydown', ['$event']]
}] } });
class AccordionContent extends BaseComponent {
pcAccordion = inject(forwardRef(() => Accordion));
pcAccordionPanel = inject(forwardRef(() => AccordionPanel));
active = computed(() => this.pcAccordionPanel.active(), ...(ngDevMode ? [{ debugName: "active" }] : []));
ariaLabelledby = computed(() => `${this.pcAccordion.id()}_accordionheader_${this.pcAccordionPanel.value()}`, ...(ngDevMode ? [{ debugName: "ariaLabelledby" }] : []));
id = computed(() => `${this.pcAccordion.id()}_accordioncontent_${this.pcAccordionPanel.value()}`, ...(ngDevMode ? [{ debugName: "id" }] : []));
_componentStyle = inject(AccordionStyle);
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AccordionContent, deps: null, target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: AccordionContent, isStandalone: true, selector: "p-accordion-content, p-accordioncontent", host: { properties: { "class": "cx(\"contentContainer\")", "attr.id": "id()", "attr.role": "\"region\"", "attr.data-pc-name": "\"accordioncontent\"", "attr.data-p-active": "active()", "attr.aria-labelledby": "ariaLabelledby()" } }, providers: [AccordionStyle], usesInheritance: true, ngImport: i0, template: `<div [class]="cx('content')" []="active() ? { value: 'visible', params: { transitionParams: pcAccordion.transitionOptions } } : { value: 'hidden', params: { transitionParams: pcAccordion.transitionOptions } }">
<ng-content />
</div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], animations: [
trigger('content', [
state('hidden', style$1({
height: '0',
// To prevent memory leak, Angular issue. https://github.com/primefaces/primeng/issues/18546
paddingBlock: '0',
borderBlockWidth: '0',
//
visibility: 'hidden'
})),
state('visible', style$1({
height: '*'
})),
transition('visible <=> hidden', [animate('{{transitionParams}}')]),
transition('void => *', animate(0))
])
], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AccordionContent, decorators: [{
type: Component,
args: [{
selector: 'p-accordion-content, p-accordioncontent',
imports: [CommonModule],
standalone: true,
template: `<div [class]="cx('content')" []="active() ? { value: 'visible', params: { transitionParams: pcAccordion.transitionOptions } } : { value: 'hidden', params: { transitionParams: pcAccordion.transitionOptions } }">
<ng-content />
</div>`,
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
host: {
'[class]': 'cx("contentContainer")',
'[attr.id]': 'id()',
'[attr.role]': '"region"',
'[attr.data-pc-name]': '"accordioncontent"',
'[attr.data-p-active]': 'active()',
'[attr.aria-labelledby]': 'ariaLabelledby()'
},
animations: [
trigger('content', [
state('hidden', style$1({
height: '0',
// To prevent memory leak, Angular issue. https://github.com/primefaces/primeng/issues/18546
paddingBlock: '0',
borderBlockWidth: '0',
//
visibility: 'hidden'
})),
state('visible', style$1({
height: '*'
})),
transition('visible <=> hidden', [animate('{{transitionParams}}')]),
transition('void => *', animate(0))
])
],
providers: [AccordionStyle]
}]
}] });
/**
* Accordion groups a collection of contents in tabs.
* @group Components
*/
class Accordion extends BaseComponent {
/**
* Value of the active tab.
* @defaultValue undefined
* @group Props
*/
value = model(undefined, ...(ngDevMode ? [{ debugName: "value" }] : []));
/**
* When enabled, multiple tabs can be activated at the same time.
* @defaultValue false
* @group Props
*/
multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple", transform: (v) => transformToBoolean(v) }] : [{ transform: (v) => transformToBoolean(v) }]));
/**
* Class of the element.
* @deprecated since v20.0.0, use `class` instead.
* @group Props
*/
styleClass;
/**
* Icon of a collapsed tab.
* @group Props
*/
expandIcon;
/**
* Icon of an expanded tab.
* @group Props
*/
collapseIcon;
/**
* When enabled, the focused tab is activated.
* @defaultValue false
* @group Props
*/
selectOnFocus = input(false, ...(ngDevMode ? [{ debugName: "selectOnFocus", transform: (v) => transformToBoolean(v) }] : [{ transform: (v) => transformToBoolean(v) }]));
/**
* Transition options of the animation.
* @group Props
*/
transitionOptions = '400ms cubic-bezier(0.86, 0, 0.07, 1)';
/**
* 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();
id = signal(uuid('pn_id_'), ...(ngDevMode ? [{ debugName: "id" }] : []));
_componentStyle = inject(AccordionStyle);
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;
}
}
onTabArrowDownKey(event) {
const nextHeaderAction = this.findNextHeaderAction(event.target.parentElement);
nextHeaderAction ? this.changeFocusedTab(nextHeaderAction) : this.onTabHomeKey(event);
event.preventDefault();
}
onTabArrowUpKey(event) {
const prevHeaderAction = this.findPrevHeaderAction(event.target.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) {
focus(element);
}
}
findNextHeaderAction(tabElement, selfCheck = false) {
const nextTabElement = selfCheck ? tabElement : tabElement.nextElementSibling;
const headerElement = findSingle(nextTabElement, '[data-pc-section="accordionheader"]');
return headerElement ? (getAttribute(headerElement, 'data-p-disabled') ? this.findNextHeaderAction(headerElement.parentElement) : findSingle(headerElement.parentElement, '[data-pc-section="accordionheader"]')) : null;
}
findPrevHeaderAction(tabElement, selfCheck = false) {
const prevTabElement = selfCheck ? tabElement : tabElement.previousElementSibling;
const headerElement = findSingle(prevTabElement, '[data-pc-section="accordionheader"]');
return headerElement ? (getAttribute(headerElement, 'data-p-disabled') ? this.findPrevHeaderAction(headerElement.parentElement) : findSingle(headerElement.parentElement, '[data-pc-section="accordionheader"]')) : null;
}
findFirstHeaderAction() {
const firstEl = this.el.nativeElement.firstElementChild;
return this.findNextHeaderAction(firstEl, true);
}
findLastHeaderAction() {
const lastEl = this.el.nativeElement.lastElementChild;
return this.findPrevHeaderAction(lastEl, true);
}
onTabEndKey(event) {
const lastHeaderAction = this.findLastHeaderAction();
this.changeFocusedTab(lastHeaderAction);
event.preventDefault();
}
getBlockableElement() {
return this.el.nativeElement.children[0];
}
updateValue(value) {
const currentValue = this.value();
if (this.multiple()) {
const newValue = Array.isArray(currentValue) ? [...currentValue] : [];
const index = newValue.indexOf(value);
if (index !== -1) {
newValue.splice(index, 1);
}
else {
newValue.push(value);
}
this.value.set(newValue);
}
else {
if (currentValue === value) {
this.value.set(undefined);
}
else {
this.value.set(value);
}
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: Accordion, deps: null, target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.3", type: Accordion, isStandalone: true, selector: "p-accordion", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: false, isRequired: false, transformFunction: null }, expandIcon: { classPropertyName: "expandIcon", publicName: "expandIcon", isSignal: false, isRequired: false, transformFunction: null }, collapseIcon: { classPropertyName: "collapseIcon", publicName: "collapseIcon", isSignal: false, isRequired: false, transformFunction: null }, selectOnFocus: { classPropertyName: "selectOnFocus", publicName: "selectOnFocus", isSignal: true, isRequired: false, transformFunction: null }, transitionOptions: { classPropertyName: "transitionOptions", publicName: "transitionOptions", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", onClose: "onClose", onOpen: "onOpen" }, host: { listeners: { "keydown": "onKeydown($event)" }, properties: { "class": "cn(cx('root'), styleClass)" } }, providers: [AccordionStyle], usesInheritance: true, ngImport: i0, template: ` <ng-content /> `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: SharedModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: Accordion, decorators: [{
type: Component,
args: [{
selector: 'p-accordion',
standalone: true,
imports: [CommonModule, SharedModule],
template: ` <ng-content /> `,
host: {
'[class]': "cn(cx('root'), styleClass)"
},
changeDetection: ChangeDetectionStrategy.OnPush,
providers: [AccordionStyle]
}]
}], propDecorators: { styleClass: [{
type: Input
}], expandIcon: [{
type: Input
}], collapseIcon: [{
type: Input
}], transitionOptions: [{
type: Input
}], onClose: [{
type: Output
}], onOpen: [{
type: Output
}], onKeydown: [{
type: HostListener,
args: ['keydown', ['$event']]
}] } });
class AccordionModule {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AccordionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.3", ngImport: i0, type: AccordionModule, imports: [Accordion, SharedModule, AccordionPanel, AccordionHeader, AccordionContent], exports: [Accordion, SharedModule, AccordionPanel, AccordionHeader, AccordionContent] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AccordionModule, imports: [Accordion, SharedModule, AccordionPanel, AccordionHeader, AccordionContent, SharedModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AccordionModule, decorators: [{
type: NgModule,
args: [{
imports: [Accordion, SharedModule, AccordionPanel, AccordionHeader, AccordionContent],
exports: [Accordion, SharedModule, AccordionPanel, AccordionHeader, AccordionContent]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { Accordion, AccordionClasses, AccordionContent, AccordionHeader, AccordionModule, AccordionPanel, AccordionStyle };
//# sourceMappingURL=primeng-accordion.mjs.map