{"version":3,"file":"primeng-accordion.mjs","sources":["../../src/accordion/style/accordionstyle.ts","../../src/accordion/accordion.ts","../../src/accordion/primeng-accordion.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\nimport { BaseStyle } from 'primeng/base';\n\nconst theme = ({ dt }) => `\n.p-accordionpanel {\n display: flex;\n flex-direction: column;\n border-style: solid;\n border-width: ${dt('accordion.panel.border.width')};\n border-color: ${dt('accordion.panel.border.color')};\n}\n\n.p-accordionheader {\n all: unset;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: ${dt('accordion.header.padding')};\n color: ${dt('accordion.header.color')};\n background: ${dt('accordion.header.background')};\n border-style: solid;\n border-width: ${dt('accordion.header.border.width')};\n border-color: ${dt('accordion.header.border.color')};\n font-weight: ${dt('accordion.header.font.weight')};\n border-radius: ${dt('accordion.header.border.radius')};\n transition: background ${dt('accordion.transition.duration')}; color ${dt('accordion.transition.duration')}color ${dt('accordion.transition.duration')}, outline-color ${dt('accordion.transition.duration')}, box-shadow ${dt(\n 'accordion.transition.duration'\n )};\n outline-color: transparent;\n position: relative;\n overflow: hidden;\n}\n\n.p-accordionpanel:first-child > .p-accordionheader {\n border-width: ${dt('accordion.header.first.border.width')};\n border-start-start-radius: ${dt('accordion.header.first.top.border.radius')};\n border-start-end-radius: ${dt('accordion.header.first.top.border.radius')};\n}\n\n.p-accordionpanel:last-child > .p-accordionheader {\n border-end-start-radius: ${dt('accordion.header.last.bottom.border.radius')};\n border-end-end-radius: ${dt('accordion.header.last.bottom.border.radius')};\n}\n\n.p-accordionpanel:last-child.p-accordionpanel-active > .p-accordionheader {\n border-end-start-radius: ${dt('accordion.header.last.active.bottom.border.radius')};\n border-end-end-radius:${dt('accordion.header.last.active.bottom.border.radius')};\n}\n\n.p-accordionheader-toggle-icon {\n color: ${dt('accordion.header.toggle.icon.color')};\n}\n\n.p-accordionpanel:not(.p-disabled) .p-accordionheader:focus-visible {\n box-shadow: ${dt('accordion.header.focus.ring.shadow')};\n outline: ${dt('accordion.header.focus.ring.width')} ${dt('accordion.header.focus.ring.style')} ${dt('accordion.header.focus.ring.color')};\n outline-offset: ${dt('accordion.header.focus.ring.offset')};\n}\n\n.p-accordionpanel:not(.p-accordionpanel-active):not(.p-disabled) > .p-accordionheader:hover {\n background: ${dt('accordion.header.hover.background')};\n color: ${dt('accordion.header.hover.color')}\n}\n\n.p-accordionpanel:not(.p-accordionpanel-active):not(.p-disabled) .p-accordionheader:hover .p-accordionheader-toggle-icon {\n color: ${dt('accordion.header.toggle.icon.hover.color')};\n}\n\n.p-accordionpanel:not(.p-disabled).p-accordionpanel-active > .p-accordionheader {\n background: ${dt('accordion.header.active.background')};\n color: ${dt('accordion.header.active.color')}\n}\n\n.p-accordionpanel:not(.p-disabled).p-accordionpanel-active > .p-accordionheader .p-accordionheader-toggle-icon {\n color: ${dt('accordion.header.toggle.icon.active.color')};\n}\n\n.p-accordionpanel:not(.p-disabled).p-accordionpanel-active > .p-accordionheader:hover {\n background: ${dt('accordion.header.active.hover.background')};\n color: ${dt('accordion.header.active.hover.color')}\n}\n\n.p-accordionpanel:not(.p-disabled).p-accordionpanel-active > .p-accordionheader:hover .p-accordionheader-toggle-icon {\n color: ${dt('accordion.header.toggle.icon.active.hover.color')};\n}\n\n.p-accordioncontent-content {\n border-style: solid;\n border-width: ${dt('accordion.content.border.width')};\n border-color: ${dt('accordion.content.border.color')};\n background-color: ${dt('accordion.content.background')};\n color: ${dt('accordion.content.color')};\n padding: ${dt('accordion.content.padding')}\n}\n\n/*For PrimeNG*/\n\n.p-accordion .p-accordioncontent {\n overflow: hidden;\n}\n\n.p-accordionpanel.p-accordioncontent:not(.ng-animating) {\n overflow: inherit;\n}\n\n.p-accordionheader-toggle-icon.icon-start {\n order: -1;\n}\n\n.p-accordionheader:has(.p-accordionheader-toggle-icon.icon-start) {\n justify-content: flex-start;\n gap: ${dt('accordion.header.padding')};\n}\n`;\n\nconst classes = {\n root: 'p-accordion p-component'\n};\n\n@Injectable()\nexport class AccordionStyle extends BaseStyle {\n name = 'accordion';\n\n theme = theme;\n\n classes = classes;\n}\n\n/**\n *\n * Accordion groups a collection of contents in tabs.\n *\n * [Live Demo](https://www.primeng.org/accordion/)\n *\n * @module accordionstyle\n *\n */\nexport enum AccordionClasses {\n /**\n * Class name of the root element\n */\n root = 'p-accordion',\n /**\n * Class name of the content wrapper\n */\n contentwrapper = 'p-accordioncontent',\n /**\n * Class name of the content\n */\n content = 'p-accordioncontent-content',\n /**\n * Class name of the header\n */\n header = 'p-accordionheader',\n /**\n * Class name of the toggle icon\n */\n toggleicon = 'p-accordionheader-toggle-icon',\n /**\n * Class name of the panel\n */\n panel = 'p-accordionpanel'\n}\n\nexport interface AccordionStyle extends BaseStyle {}\n","import { animate, state, style, transition, trigger } from '@angular/animations';\nimport { CommonModule } from '@angular/common';\nimport {\n AfterContentInit,\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n computed,\n ContentChild,\n ContentChildren,\n EventEmitter,\n forwardRef,\n HostBinding,\n HostListener,\n inject,\n Input,\n input,\n InputSignalWithTransform,\n model,\n NgModule,\n numberAttribute,\n OnDestroy,\n Output,\n QueryList,\n signal,\n TemplateRef,\n ViewEncapsulation\n} from '@angular/core';\nimport { findSingle, focus, getAttribute, uuid } from '@primeuix/utils';\nimport { BlockableUI, Header, PrimeTemplate, SharedModule } from 'primeng/api';\nimport { BaseComponent } from 'primeng/basecomponent';\nimport { ChevronDownIcon, ChevronUpIcon } from 'primeng/icons';\nimport { Ripple } from 'primeng/ripple';\nimport { transformToBoolean } from 'primeng/utils';\nimport { Subscription } from 'rxjs';\nimport { AccordionStyle } from './style/accordionstyle';\n\n/**\n * Custom tab open event.\n * @see {@link onOpen}\n * @group Interface\n */\nexport interface AccordionTabOpenEvent {\n /**\n * Browser event.\n */\n originalEvent: Event;\n /**\n * Opened tab index.\n */\n index: number;\n}\n\n/**\n * Custom tab close event.\n * @see {@link onClose}\n * @extends {AccordionTabOpenEvent}\n * @group Interface\n */\nexport interface AccordionTabCloseEvent extends AccordionTabOpenEvent {}\n\n/**\n * Toggle icon template context.\n * @group Interface\n */\nexport interface AccordionToggleIconTemplateContext {\n /**\n * Represents the active status of the panel.\n */\n active: boolean;\n}\n\n/**\n * AccordionPanel is a helper component for Accordion component.\n * @group Components\n */\n@Component({\n selector: 'p-accordion-panel, p-accordionpanel',\n imports: [CommonModule],\n standalone: true,\n template: ``,\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n host: {\n '[class.p-accordionpanel]': 'true',\n '[class.p-accordionpanel-active]': 'active()',\n '[class.p-disabled]': 'disabled()',\n '[attr.data-pc-name]': '\"accordionpanel\"',\n '[attr.data-p-disabled]': 'disabled()',\n '[attr.data-p-active]': 'active()'\n }\n})\nexport class AccordionPanel extends BaseComponent {\n pcAccordion = inject(forwardRef(() => Accordion));\n /**\n * Value of the active tab.\n * @defaultValue undefined\n * @group Props\n */\n value = model(undefined);\n /**\n * Disables the tab when enabled.\n * @defaultValue false\n * @group Props\n */\n disabled: InputSignalWithTransform = input(false, { transform: (v: any) => transformToBoolean(v) });\n\n active = computed(() => (this.pcAccordion.multiple() ? this.valueEquals(this.pcAccordion.value(), this.value()) : this.pcAccordion.value() === this.value()));\n\n valueEquals(currentValue: any, value: any): boolean {\n if (Array.isArray(currentValue)) {\n return currentValue.includes(value);\n }\n return currentValue === value;\n }\n}\n/**\n * AccordionHeader is a helper component for Accordion component.\n * @group Components\n */\n@Component({\n selector: 'p-accordion-header, p-accordionheader',\n imports: [CommonModule, ChevronDownIcon, ChevronUpIcon],\n standalone: true,\n template: `\n \n @if (toggleicon) {\n \n } @else {\n \n \n \n \n \n \n \n \n }\n `,\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n host: {\n '[class.p-accordionheader]': 'true',\n '[attr.id]': 'id()',\n '[attr.aria-expanded]': 'active()',\n '[attr.aria-controls]': 'ariaControls()',\n '[attr.role]': '\"button\"',\n '[attr.tabindex]': '\"0\"',\n '[attr.data-p-active]': 'active()',\n '[attr.data-p-disabled]': 'disabled()',\n '[attr.data-pc-name]': '\"accordionheader\"',\n '[style.user-select]': '\"none\"'\n },\n hostDirectives: [Ripple]\n})\nexport class AccordionHeader extends BaseComponent {\n pcAccordion = inject(forwardRef(() => Accordion));\n\n pcAccordionPanel = inject(forwardRef(() => AccordionPanel));\n\n id = computed(() => `${this.pcAccordion.id()}_accordionheader_${this.pcAccordionPanel.value()}`);\n\n active = computed(() => this.pcAccordionPanel.active());\n\n disabled = computed(() => this.pcAccordionPanel.disabled());\n\n ariaControls = computed(() => `${this.pcAccordion.id()}_accordioncontent_${this.pcAccordionPanel.value()}`);\n /**\n * Toggle icon template.\n * @type {TemplateRef} context - Context of the template\n * @example\n * ```html\n * \n * ```\n * @see {@link AccordionToggleIconTemplateContext}\n * @group Templates\n */\n @ContentChild('toggleicon') toggleicon: TemplateRef | undefined;\n\n @HostListener('click', ['$event']) onClick() {\n this.changeActiveValue();\n }\n\n @HostListener('focus', ['$event']) onFocus() {\n this.pcAccordion.selectOnFocus() && this.changeActiveValue();\n }\n\n @HostListener('keydown', ['$event']) onKeydown(event: KeyboardEvent) {\n switch (event.code) {\n case 'ArrowDown':\n this.arrowDownKey(event);\n break;\n case 'ArrowUp':\n this.arrowUpKey(event);\n break;\n case 'Home':\n this.onHomeKey(event);\n break;\n case 'End':\n this.onEndKey(event);\n break;\n case 'Enter':\n case 'Space':\n case 'NumpadEnter':\n this.onEnterKey(event);\n break;\n default:\n break;\n }\n }\n\n changeActiveValue() {\n this.pcAccordion.updateValue(this.pcAccordionPanel.value());\n }\n\n private findPanel(headerElement) {\n return headerElement?.closest('[data-pc-name=\"accordionpanel\"]');\n }\n\n private findHeader(panelElement) {\n return findSingle(panelElement, '[data-pc-name=\"accordionheader\"]');\n }\n\n private findNextPanel(panelElement, selfCheck = false) {\n const element = selfCheck ? panelElement : panelElement.nextElementSibling;\n\n return element ? (getAttribute(element, 'data-p-disabled') ? this.findNextPanel(element) : this.findHeader(element)) : null;\n }\n\n private findPrevPanel(panelElement, selfCheck = false) {\n const element = selfCheck ? panelElement : panelElement.previousElementSibling;\n\n return element ? (getAttribute(element, 'data-p-disabled') ? this.findPrevPanel(element) : this.findHeader(element)) : null;\n }\n\n private findFirstPanel() {\n return this.findNextPanel(this.pcAccordion.el.nativeElement.firstElementChild, true);\n }\n\n private findLastPanel() {\n return this.findPrevPanel(this.pcAccordion.el.nativeElement.lastElementChild, true);\n }\n\n private changeFocusedPanel(event, element) {\n focus(element);\n }\n\n private arrowDownKey(event: KeyboardEvent) {\n const nextPanel = this.findNextPanel(this.findPanel(event.currentTarget));\n nextPanel ? this.changeFocusedPanel(event, nextPanel) : this.onHomeKey(event);\n event.preventDefault();\n }\n\n private arrowUpKey(event: KeyboardEvent) {\n const prevPanel = this.findPrevPanel(this.findPanel(event.currentTarget));\n\n prevPanel ? this.changeFocusedPanel(event, prevPanel) : this.onEndKey(event);\n event.preventDefault();\n }\n\n private onHomeKey(event: KeyboardEvent) {\n const firstPanel = this.findFirstPanel();\n\n this.changeFocusedPanel(event, firstPanel);\n event.preventDefault();\n }\n\n private onEndKey(event: KeyboardEvent) {\n const lastPanel = this.findLastPanel();\n\n this.changeFocusedPanel(event, lastPanel);\n event.preventDefault();\n }\n\n private onEnterKey(event: KeyboardEvent) {\n this.changeActiveValue();\n event.preventDefault();\n }\n}\n\n@Component({\n selector: 'p-accordion-content, p-accordioncontent',\n imports: [CommonModule],\n standalone: true,\n template: ` \n \n
`,\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n host: {\n '[class.p-accordioncontent]': 'true',\n '[attr.id]': 'id()',\n '[attr.role]': '\"region\"',\n '[attr.data-pc-name]': '\"accordioncontent\"',\n '[attr.data-p-active]': 'active()',\n '[attr.aria-labelledby]': 'ariaLabelledby()',\n '[@content]': `active()\n ? { value: 'visible', params: { transitionParams: pcAccordion.transitionOptions } }\n : { value: 'hidden', params: { transitionParams: pcAccordion.transitionOptions } }`\n },\n animations: [\n trigger('content', [\n state(\n 'hidden',\n style({\n height: '0',\n visibility: 'hidden'\n })\n ),\n state(\n 'visible',\n style({\n height: '*',\n visibility: 'visible'\n })\n ),\n transition('visible <=> hidden', [animate('{{transitionParams}}')]),\n transition('void => *', animate(0))\n ])\n ]\n})\nexport class AccordionContent extends BaseComponent {\n pcAccordion = inject(forwardRef(() => Accordion));\n\n pcAccordionPanel = inject(forwardRef(() => AccordionPanel));\n\n active = computed(() => this.pcAccordionPanel.active());\n\n ariaLabelledby = computed(() => `${this.pcAccordion.id()}_accordionheader_${this.pcAccordionPanel.value()}`);\n\n id = computed(() => `${this.pcAccordion.id()}_accordioncontent_${this.pcAccordionPanel.value()}`);\n}\n\n/**\n * AccordionTab is a helper component for Accordion.\n * @deprecated Use AccordionPanel, AccordionHeader, AccordionContent instead.\n * @group Components\n */\n@Component({\n selector: 'p-accordionTab, p-accordion-tab, p-accordiontab',\n standalone: true,\n imports: [CommonModule, ChevronDownIcon, ChevronUpIcon],\n template: `\n