primeng 18.0.0-beta.1 → 18.0.0-beta.3

package/fesm2022/primeng-accordion.mjs

@@ -1,15 +1,17 @@
 import { trigger, state, style, transition, animate } from '@angular/animations';
-import * as i1 from '@angular/common';
+import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, EventEmitter, inject, forwardRef, booleanAttribute, numberAttribute, Component, ChangeDetectionStrategy, ViewEncapsulation, HostBinding, Input, Output, ContentChildren, HostListener, NgModule } from '@angular/core';
-import { Header, PrimeTemplate, SharedModule } from 'primeng/api';
+import { Injectable, inject, forwardRef, model, input, computed, Component, ChangeDetectionStrategy, ViewEncapsulation, HostListener, ContentChild, ContentChildren, EventEmitter, booleanAttribute, numberAttribute, HostBinding, Input, Output, signal, NgModule } from '@angular/core';
+import { PrimeTemplate, Header, SharedModule } from 'primeng/api';
 import { DomHandler } from 'primeng/dom';
 import { ChevronDownIcon } from 'primeng/icons/chevrondown';
-import { UniqueComponentId } from 'primeng/utils';
+import { transformToBoolean, UniqueComponentId } from 'primeng/utils';
 import { BaseStyle } from 'primeng/base';
 import { BaseComponent } from 'primeng/basecomponent';
 import { ChevronUpIcon } from 'primeng/icons/chevronup';
+import * as i1 from 'primeng/ripple';
+import { Ripple } from 'primeng/ripple';
 
 const theme = ({ dt }) => `
 .p-accordionpanel {
@@ -117,7 +119,8 @@ const theme = ({ dt }) => `
 .p-accordionheader:has(.p-accordionheader-toggle-icon.icon-start) {
     justify-content: flex-start;
     gap: ${dt('accordion.header.padding')};
-}`;
+}
+`;
 const classes = {
     root: 'p-accordion p-component',
 };
@@ -131,9 +134,364 @@ class AccordionStyle extends BaseStyle {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", 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);
+    /**
+     * Disables the tab when enabled.
+     * @defaultValue false
+     * @group Props
+     */
+    disabled = input(false, { transform: (v) => transformToBoolean(v) });
+    active = computed(() => this.pcAccordion.multiple() ? this.valueEquals(this.pcAccordion.value(), this.value()) : this.pcAccordion.value() === this.value());
+    valueEquals(currentValue, value) {
+        if (Array.isArray(currentValue)) {
+            return currentValue.includes(value);
+        }
+        return currentValue === value;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: AccordionPanel, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.2", type: AccordionPanel, isStandalone: true, selector: "p-accordion-panel", 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.p-accordionpanel": "true", "class.p-accordionpanel-active": "active()", "class.p-disabled": "disabled()", "attr.data-pc-name": "\"accordionpanel\"", "attr.data-p-disabled": "disabled()", "attr.data-p-active": "active()" } }, 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: "18.2.2", ngImport: i0, type: AccordionPanel, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'p-accordion-panel',
+                    imports: [CommonModule],
+                    standalone: true,
+                    template: `<ng-content />`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: {
+                        '[class.p-accordionpanel]': 'true',
+                        '[class.p-accordionpanel-active]': 'active()',
+                        '[class.p-disabled]': 'disabled()',
+                        '[attr.data-pc-name]': '"accordionpanel"',
+                        '[attr.data-p-disabled]': 'disabled()',
+                        '[attr.data-p-active]': 'active()',
+                    },
+                }]
+        }] });
+/**
+ * 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()}`);
+    active = computed(() => this.pcAccordionPanel.active());
+    disabled = computed(() => this.pcAccordionPanel.disabled());
+    ariaControls = computed(() => `${this.pcAccordion.id()}_accordioncontent_${this.pcAccordionPanel.value()}`);
+    onClick() {
+        this.changeActiveValue();
+    }
+    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;
+        }
+    }
+    /**
+     * A template reference variable that represents the toggle icon in a UI component.
+     * @param {AccordionToggleIconTemplateContext} context - Context of the template
+     * @example
+     * ```html
+     * <ng-template #toggleicon let-active="active"> </ng-template>
+     * ```
+     * @see {@link AccordionToggleIconTemplateContext}
+     * @group Templates
+     */
+    toggleicon;
+    templates;
+    ngAfterContentInit() {
+        this.templates.forEach((item) => {
+            switch (item.getType()) {
+                case 'toggleicon':
+                    this.toggleicon = item.template;
+                    break;
+            }
+        });
+    }
+    changeActiveValue() {
+        this.pcAccordion.updateValue(this.pcAccordionPanel.value());
+    }
+    findPanel(headerElement) {
+        return headerElement?.closest('[data-pc-name="accordionpanel"]');
+    }
+    findHeader(panelElement) {
+        return DomHandler.findSingle(panelElement, '[data-pc-name="accordionheader"]');
+    }
+    findNextPanel(panelElement, selfCheck = false) {
+        const element = selfCheck ? panelElement : panelElement.nextElementSibling;
+        return element
+            ? DomHandler.getAttribute(element, 'data-p-disabled')
+                ? this.findNextPanel(element)
+                : this.findHeader(element)
+            : null;
+    }
+    findPrevPanel(panelElement, selfCheck = false) {
+        const element = selfCheck ? panelElement : panelElement.previousElementSibling;
+        return element
+            ? DomHandler.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) {
+        DomHandler.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: "18.2.2", ngImport: i0, type: AccordionHeader, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: AccordionHeader, isStandalone: true, selector: "p-accordion-header", host: { listeners: { "click": "onClick($event)", "focus": "onFocus($event)", "keydown": "onKeydown($event)" }, properties: { "class.p-accordionheader": "true", "attr.id": "id()", "attr.aria-expanded": "active()", "attr.aria-controls": "ariaControls()", "attr.role": "\"button\"", "attr.tabindex": "\"0\"", "attr.data-p-active": "active()", "attr.data-p-disabled": "disabled()", "attr.data-pc-name": "\"accordionheader\"", "style.user-select": "\"none\"" } }, queries: [{ propertyName: "toggleicon", first: true, predicate: ["toggleicon"], descendants: true }, { propertyName: "templates", predicate: PrimeTemplate }], usesInheritance: true, hostDirectives: [{ directive: i1.Ripple }], ngImport: i0, template: `
+        <ng-content />
+        @if (toggleicon) {
+            <ng-template *ngTemplateOutlet="toggleicon; context: { active: active() }"></ng-template>
+        } @else {
+            <ng-container *ngIf="active()">
+                <span
+                    *ngIf="pcAccordion.collapseIcon"
+                    [class]="pcAccordion.collapseIcon"
+                    [ngClass]="pcAccordion.iconClass"
+                    [attr.aria-hidden]="true"
+                ></span>
+                <ChevronDownIcon *ngIf="!pcAccordion.collapseIcon" [ngClass]="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>
+                <ChevronUpIcon *ngIf="!pcAccordion.expandIcon" [ngClass]="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: "ChevronDownIcon" }, { kind: "component", type: ChevronUpIcon, selector: "ChevronUpIcon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: AccordionHeader, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'p-accordion-header',
+                    imports: [CommonModule, ChevronDownIcon, ChevronUpIcon, Ripple],
+                    standalone: true,
+                    template: `
+        <ng-content />
+        @if (toggleicon) {
+            <ng-template *ngTemplateOutlet="toggleicon; context: { active: active() }"></ng-template>
+        } @else {
+            <ng-container *ngIf="active()">
+                <span
+                    *ngIf="pcAccordion.collapseIcon"
+                    [class]="pcAccordion.collapseIcon"
+                    [ngClass]="pcAccordion.iconClass"
+                    [attr.aria-hidden]="true"
+                ></span>
+                <ChevronDownIcon *ngIf="!pcAccordion.collapseIcon" [ngClass]="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>
+                <ChevronUpIcon *ngIf="!pcAccordion.expandIcon" [ngClass]="pcAccordion.iconClass" [attr.aria-hidden]="true" />
+            </ng-container>
+        }
+    `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: {
+                        '[class.p-accordionheader]': 'true',
+                        '[attr.id]': 'id()',
+                        '[attr.aria-expanded]': 'active()',
+                        '[attr.aria-controls]': 'ariaControls()',
+                        '[attr.role]': '"button"',
+                        '[attr.tabindex]': '"0"',
+                        '[attr.data-p-active]': 'active()',
+                        '[attr.data-p-disabled]': 'disabled()',
+                        '[attr.data-pc-name]': '"accordionheader"',
+                        '[style.user-select]': '"none"',
+                    },
+                    hostDirectives: [Ripple],
+                }]
+        }], propDecorators: { onClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }], onFocus: [{
+                type: HostListener,
+                args: ['focus', ['$event']]
+            }], onKeydown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }], toggleicon: [{
+                type: ContentChild,
+                args: ['toggleicon']
+            }], templates: [{
+                type: ContentChildren,
+                args: [PrimeTemplate]
+            }] } });
+class AccordionContent extends BaseComponent {
+    pcAccordion = inject(forwardRef(() => Accordion));
+    pcAccordionPanel = inject(forwardRef(() => AccordionPanel));
+    active = computed(() => this.pcAccordionPanel.active());
+    ariaLabelledby = computed(() => `${this.pcAccordion.id()}_accordionheader_${this.pcAccordionPanel.value()}`);
+    id = computed(() => `${this.pcAccordion.id()}_accordioncontent_${this.pcAccordionPanel.value()}`);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: AccordionContent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.2", type: AccordionContent, isStandalone: true, selector: "p-accordion-content", host: { properties: { "class.p-accordioncontent": "true", "attr.id": "id()", "attr.role": "\"region\"", "attr.data-pc-name": "\"accordioncontent\"", "attr.data-p-active": "active()", "attr.aria-labelledby": "ariaLabelledby()", "@content": "active()\n            ? { value: 'visible', params: { transitionParams: pcAccordion.transitionOptions } }\n            : { value: 'hidden', params: { transitionParams: pcAccordion.transitionOptions } }" } }, usesInheritance: true, ngImport: i0, template: ` <div class="p-accordioncontent-content">
+        <ng-content />
+    </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], animations: [
+            trigger('content', [
+                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.2.2", ngImport: i0, type: AccordionContent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'p-accordion-content',
+                    imports: [CommonModule],
+                    standalone: true,
+                    template: ` <div class="p-accordioncontent-content">
+        <ng-content />
+    </div>`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: {
+                        '[class.p-accordioncontent]': 'true',
+                        '[attr.id]': 'id()',
+                        '[attr.role]': '"region"',
+                        '[attr.data-pc-name]': '"accordioncontent"',
+                        '[attr.data-p-active]': 'active()',
+                        '[attr.aria-labelledby]': 'ariaLabelledby()',
+                        '[@content]': `active()
+            ? { value: 'visible', params: { transitionParams: pcAccordion.transitionOptions } }
+            : { value: 'hidden', params: { transitionParams: pcAccordion.transitionOptions } }`,
+                    },
+                    animations: [
+                        trigger('content', [
+                            state('hidden', style({
+                                height: '0',
+                                visibility: 'hidden',
+                            })),
+                            state('visible', style({
+                                height: '*',
+                                visibility: 'visible',
+                            })),
+                            transition('visible <=> hidden', [animate('{{transitionParams}}')]),
+                            transition('void => *', animate(0)),
+                        ]),
+                    ],
+                }]
+        }] });
 /**
  * AccordionTab is a helper component for Accordion.
+ * @deprecated Use AccordionPanel, AccordionHeader, AccordionContent instead.
  * @group Components
  */
 class AccordionTab extends BaseComponent {
@@ -247,6 +605,10 @@ class AccordionTab extends BaseComponent {
     loaded = false;
     accordion = inject(forwardRef(() => Accordion));
     _componentStyle = inject(AccordionStyle);
+    ngOnInit() {
+        super.ngOnInit();
+        console.log('AccordionTab is deprecated as of v18, please use the new structure instead.');
+    }
     ngAfterContentInit() {
         this.templates.forEach((item) => {
             switch (item.getType()) {
@@ -275,7 +637,7 @@ class AccordionTab extends BaseComponent {
             this.accordion.onClose.emit({ originalEvent: event, index: index });
         }
         else {
-            if (!this.accordion.multiple) {
+            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;
@@ -328,7 +690,7 @@ class AccordionTab extends BaseComponent {
         super.ngOnDestroy();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: AccordionTab, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: AccordionTab, isStandalone: true, 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: { properties: { "class.p-accordionpanel": "true", "class.p-accordionpanel-active": "selected", "attr.data-pc-name": "accordiontab", "class": "this.hostClass", "style": "this.hostStyle" } }, providers: [AccordionStyle], queries: [{ propertyName: "headerFacet", predicate: Header }, { propertyName: "templates", predicate: PrimeTemplate }], usesInheritance: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: AccordionTab, isStandalone: true, selector: "p-accordionTab, p-accordion-tab", 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: { properties: { "class.p-accordionpanel": "true", "class.p-accordionpanel-active": "selected", "attr.data-pc-name": "\"accordiontab\"", "class": "this.hostClass", "style": "this.hostStyle" } }, providers: [AccordionStyle], queries: [{ propertyName: "headerFacet", predicate: Header }, { propertyName: "templates", predicate: PrimeTemplate }], usesInheritance: true, ngImport: i0, template: `
         <button
             class="p-accordionheader"
             type="button"
@@ -337,7 +699,7 @@ class AccordionTab extends BaseComponent {
             [attr.aria-level]="headerAriaLevel"
             [class.p-disabled]="disabled"
             [attr.data-p-disabled]="disabled"
-            [attr.data-pc-section]="'header'"
+            [attr.data-pc-section]="'accordionheader'"
             (click)="toggle($event)"
             (keydown)="onKeydown($event)"
             [ngClass]="headerStyleClass"
@@ -345,7 +707,6 @@ class AccordionTab extends BaseComponent {
             [attr.tabindex]="disabled ? null : 0"
             [attr.id]="getTabHeaderActionId(id)"
             [attr.aria-controls]="getTabContentId(id)"
-            [attr.data-pc-section]="'headeraction'"
         >
             @if (!hasHeaderFacet && !headerTemplate) {
                 {{ header }}
@@ -354,7 +715,7 @@ class AccordionTab extends BaseComponent {
                     <ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
                 }
                 @if (hasHeaderFacet) {
-                    <ng-content select="p-header"></ng-content>
+                    <ng-content select="p-header" />
                 }
             }
             @if (iconTemplate) {
@@ -394,13 +755,13 @@ class AccordionTab extends BaseComponent {
             [attr.data-pc-section]="'toggleablecontent'"
         >
             <div class="p-accordioncontent-content" [ngClass]="contentStyleClass" [ngStyle]="contentStyle">
-                <ng-content></ng-content>
+                <ng-content />
                 <ng-container *ngIf="contentTemplate && (cache ? loaded : selected)">
                     <ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
                 </ng-container>
             </div>
         </div>
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ChevronDownIcon, selector: "ChevronDownIcon" }, { kind: "component", type: ChevronUpIcon, selector: "ChevronUpIcon" }], animations: [
+    `, 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: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ChevronDownIcon, selector: "ChevronDownIcon" }, { kind: "component", type: ChevronUpIcon, selector: "ChevronUpIcon" }], animations: [
             trigger('tabContent', [
                 state('hidden', style({
                     height: '0',
@@ -418,7 +779,7 @@ class AccordionTab extends BaseComponent {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: AccordionTab, decorators: [{
             type: Component,
             args: [{
-                    selector: 'p-accordionTab',
+                    selector: 'p-accordionTab, p-accordion-tab',
                     standalone: true,
                     imports: [CommonModule, ChevronDownIcon, ChevronUpIcon],
                     template: `
@@ -430,7 +791,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
             [attr.aria-level]="headerAriaLevel"
             [class.p-disabled]="disabled"
             [attr.data-p-disabled]="disabled"
-            [attr.data-pc-section]="'header'"
+            [attr.data-pc-section]="'accordionheader'"
             (click)="toggle($event)"
             (keydown)="onKeydown($event)"
             [ngClass]="headerStyleClass"
@@ -438,7 +799,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
             [attr.tabindex]="disabled ? null : 0"
             [attr.id]="getTabHeaderActionId(id)"
             [attr.aria-controls]="getTabContentId(id)"
-            [attr.data-pc-section]="'headeraction'"
         >
             @if (!hasHeaderFacet && !headerTemplate) {
                 {{ header }}
@@ -447,7 +807,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
                     <ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
                 }
                 @if (hasHeaderFacet) {
-                    <ng-content select="p-header"></ng-content>
+                    <ng-content select="p-header" />
                 }
             }
             @if (iconTemplate) {
@@ -487,7 +847,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
             [attr.data-pc-section]="'toggleablecontent'"
         >
             <div class="p-accordioncontent-content" [ngClass]="contentStyleClass" [ngStyle]="contentStyle">
-                <ng-content></ng-content>
+                <ng-content />
                 <ng-container *ngIf="contentTemplate && (cache ? loaded : selected)">
                     <ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
                 </ng-container>
@@ -511,7 +871,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
                     host: {
                         '[class.p-accordionpanel]': 'true',
                         '[class.p-accordionpanel-active]': 'selected',
-                        '[attr.data-pc-name]': 'accordiontab',
+                        '[attr.data-pc-name]': '"accordiontab"',
                     },
                     providers: [AccordionStyle],
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -574,11 +934,18 @@ class Accordion extends BaseComponent {
     get hostStyle() {
         return this.style;
     }
+    /**
+     * Value of the active tab.
+     * @defaultValue undefined
+     * @group Props
+     */
+    value = model(undefined);
     /**
      * When enabled, multiple tabs can be activated at the same time.
+     * @defaultValue false
      * @group Props
      */
-    multiple = false;
+    multiple = input(false, { transform: (v) => transformToBoolean(v) });
     /**
      * Inline style of the tab header and content.
      * @group Props
@@ -600,12 +967,11 @@ class Accordion extends BaseComponent {
      */
     collapseIcon;
     /**
-     * Index of the active tab or an array of indexes in multiple mode.
+     * When enabled, the focused tab is activated.
+     * @defaultValue false
      * @group Props
      */
-    get activeIndex() {
-        return this._activeIndex;
-    }
+    selectOnFocus = input(false, { transform: (v) => transformToBoolean(v) });
     set activeIndex(val) {
         this._activeIndex = val;
         if (this.preventActiveIndexPropagation) {
@@ -615,17 +981,17 @@ class Accordion extends BaseComponent {
         this.updateSelectionState();
     }
     /**
-     * When enabled, the focused tab is activated.
+     * Transition options of the animation.
      * @group Props
      */
-    selectOnFocus = false;
+    transitionOptions = '400ms cubic-bezier(0.86, 0, 0.07, 1)';
     /**
-     * The aria-level that each accordion header will have. The default value is 2 as per W3C specifications
-     * @group Props
+     * Returns the active index.
+     * @param {number | number[]} value - New index.
+     * @deprecated use native valueChange emitter of the value model.
+     * @group Emits
      */
-    get headerAriaLevel() {
-        return this._headerAriaLevel;
-    }
+    activeIndexChange = new EventEmitter();
     set headerAriaLevel(val) {
         if (typeof val === 'number' && val > 0) {
             this._headerAriaLevel = val;
@@ -646,12 +1012,7 @@ class Accordion extends BaseComponent {
      * @group Emits
      */
     onOpen = new EventEmitter();
-    /**
-     * Returns the active index.
-     * @param {number | number[]} value - New index.
-     * @group Emits
-     */
-    activeIndexChange = new EventEmitter();
+    id = signal(UniqueComponentId());
     tabList;
     tabListSubscription = null;
     _activeIndex;
@@ -659,6 +1020,22 @@ class Accordion extends BaseComponent {
     preventActiveIndexPropagation = false;
     tabs = [];
     _componentStyle = inject(AccordionStyle);
+    /**
+     * Index of the active tab or an array of indexes in multiple mode.
+     * @deprecated use value property with new architecture instead.
+     * @group Props
+     */
+    get activeIndex() {
+        return this._activeIndex;
+    }
+    /**
+     * The aria-level that each accordion header will have. The default value is 2 as per W3C specifications
+     * @deprecated use AccoridonHeader component and bind attribute to the host.
+     * @group Props
+     */
+    get headerAriaLevel() {
+        return this._headerAriaLevel;
+    }
     onKeydown(event) {
         switch (event.code) {
             case 'ArrowDown':
@@ -679,22 +1056,15 @@ class Accordion extends BaseComponent {
                 break;
         }
     }
-    focusedElementIsAccordionHeader() {
-        return document.activeElement.tagName.toLowerCase() === 'a' && document.activeElement.classList.contains('p-accordion-header-link');
-    }
     onTabArrowDownKey(event) {
-        if (this.focusedElementIsAccordionHeader()) {
-            const nextHeaderAction = this.findNextHeaderAction(event.target.parentElement.parentElement.parentElement);
-            nextHeaderAction ? this.changeFocusedTab(nextHeaderAction) : this.onTabHomeKey(event);
-            event.preventDefault();
-        }
+        const nextHeaderAction = this.findNextHeaderAction(event.target.parentElement);
+        nextHeaderAction ? this.changeFocusedTab(nextHeaderAction) : this.onTabHomeKey(event);
+        event.preventDefault();
     }
     onTabArrowUpKey(event) {
-        if (this.focusedElementIsAccordionHeader()) {
-            const prevHeaderAction = this.findPrevHeaderAction(event.target.parentElement.parentElement.parentElement);
-            prevHeaderAction ? this.changeFocusedTab(prevHeaderAction) : this.onTabEndKey(event);
-            event.preventDefault();
-        }
+        const prevHeaderAction = this.findPrevHeaderAction(event.target.parentElement);
+        prevHeaderAction ? this.changeFocusedTab(prevHeaderAction) : this.onTabEndKey(event);
+        event.preventDefault();
     }
     onTabHomeKey(event) {
         const firstHeaderAction = this.findFirstHeaderAction();
@@ -704,10 +1074,10 @@ class Accordion extends BaseComponent {
     changeFocusedTab(element) {
         if (element) {
             DomHandler.focus(element);
-            if (this.selectOnFocus) {
+            if (this.selectOnFocus()) {
                 this.tabs.forEach((tab, i) => {
-                    let selected = this.multiple ? this._activeIndex.includes(i) : i === this._activeIndex;
-                    if (this.multiple) {
+                    let selected = this.multiple() ? this._activeIndex.includes(i) : i === this._activeIndex;
+                    if (this.multiple()) {
                         if (!this._activeIndex) {
                             this._activeIndex = [];
                         }
@@ -739,29 +1109,28 @@ class Accordion extends BaseComponent {
     }
     findNextHeaderAction(tabElement, selfCheck = false) {
         const nextTabElement = selfCheck ? tabElement : tabElement.nextElementSibling;
-        const headerElement = DomHandler.findSingle(nextTabElement, '[data-pc-section="header"]');
+        const headerElement = DomHandler.findSingle(nextTabElement, '[data-pc-section="accordionheader"]');
         return headerElement
             ? DomHandler.getAttribute(headerElement, 'data-p-disabled')
-                ? this.findNextHeaderAction(headerElement.parentElement.parentElement)
-                : DomHandler.findSingle(headerElement, '[data-pc-section="headeraction"]')
+                ? this.findNextHeaderAction(headerElement.parentElement)
+                : DomHandler.findSingle(headerElement.parentElement, '[data-pc-section="accordionheader"]')
             : null;
     }
     findPrevHeaderAction(tabElement, selfCheck = false) {
         const prevTabElement = selfCheck ? tabElement : tabElement.previousElementSibling;
-        const headerElement = DomHandler.findSingle(prevTabElement, '[data-pc-section="header"]');
+        const headerElement = DomHandler.findSingle(prevTabElement, '[data-pc-section="accordionheader"]');
         return headerElement
             ? DomHandler.getAttribute(headerElement, 'data-p-disabled')
-                ? this.findPrevHeaderAction(headerElement.parentElement.parentElement)
-                : DomHandler.findSingle(headerElement, '[data-pc-section="headeraction"]')
+                ? this.findPrevHeaderAction(headerElement.parentElement)
+                : DomHandler.findSingle(headerElement.parentElement, '[data-pc-section="accordionheader"]')
             : null;
     }
     findFirstHeaderAction() {
-        const firstEl = this.el.nativeElement.firstElementChild.childNodes[0];
+        const firstEl = this.el.nativeElement.firstElementChild;
         return this.findNextHeaderAction(firstEl, true);
     }
     findLastHeaderAction() {
-        const childNodes = this.el.nativeElement.firstElementChild.childNodes;
-        const lastEl = childNodes[childNodes.length - 1];
+        const lastEl = this.el.nativeElement.lastElementChild;
         return this.findPrevHeaderAction(lastEl, true);
     }
     onTabEndKey(event) {
@@ -789,7 +1158,7 @@ class Accordion extends BaseComponent {
     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 selected = this.multiple() ? this._activeIndex.includes(i) : i === this._activeIndex;
                 let changed = selected !== this.tabs[i].selected;
                 if (changed) {
                     this.tabs[i].selected = selected;
@@ -800,16 +1169,16 @@ class Accordion extends BaseComponent {
         }
     }
     isTabActive(index) {
-        return this.multiple ? this._activeIndex && this._activeIndex.includes(index) : this._activeIndex === 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;
+        let index = this.multiple() ? [] : null;
         this.tabs.forEach((tab, i) => {
             if (tab.selected) {
-                if (this.multiple) {
+                if (this.multiple()) {
                     index.push(i);
                 }
                 else {
@@ -822,6 +1191,28 @@ class Accordion extends BaseComponent {
         this._activeIndex = index;
         this.activeIndexChange.emit(index);
     }
+    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);
+            }
+        }
+    }
     ngOnDestroy() {
         if (this.tabListSubscription) {
             this.tabListSubscription.unsubscribe();
@@ -829,7 +1220,7 @@ class Accordion extends BaseComponent {
         super.ngOnDestroy();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: Accordion, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.2", type: Accordion, isStandalone: true, 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)" }, properties: { "class.p-accordion": "true", "class.p-component": "true", "class": "this.hostClass", "style": "this.hostStyle" } }, providers: [AccordionStyle], queries: [{ propertyName: "tabList", predicate: AccordionTab, descendants: true }], usesInheritance: true, ngImport: i0, template: ` <ng-content></ng-content> `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: SharedModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.2", 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 }, style: { classPropertyName: "style", publicName: "style", isSignal: false, 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 }, activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: false, isRequired: false, transformFunction: null }, headerAriaLevel: { classPropertyName: "headerAriaLevel", publicName: "headerAriaLevel", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", activeIndexChange: "activeIndexChange", onClose: "onClose", onOpen: "onOpen" }, host: { listeners: { "keydown": "onKeydown($event)" }, properties: { "class.p-accordion": "true", "class.p-component": "true", "class": "this.hostClass", "style": "this.hostStyle" } }, providers: [AccordionStyle], queries: [{ propertyName: "tabList", predicate: AccordionTab, descendants: true }], 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: "18.2.2", ngImport: i0, type: Accordion, decorators: [{
             type: Component,
@@ -837,7 +1228,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
                     selector: 'p-accordion',
                     standalone: true,
                     imports: [CommonModule, AccordionTab, SharedModule],
-                    template: ` <ng-content></ng-content> `,
+                    template: ` <ng-content /> `,
                     host: {
                         '[class.p-accordion]': 'true',
                         '[class.p-component]': 'true',
@@ -851,9 +1242,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
             }], hostStyle: [{
                 type: HostBinding,
                 args: ['style']
-            }], multiple: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
             }], style: [{
                 type: Input
             }], styleClass: [{
@@ -862,36 +1250,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
                 type: Input
             }], collapseIcon: [{
                 type: Input
-            }], activeIndex: [{
-                type: Input
-            }], selectOnFocus: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], headerAriaLevel: [{
+            }], transitionOptions: [{
                 type: Input
+            }], activeIndexChange: [{
+                type: Output
             }], onClose: [{
                 type: Output
             }], onOpen: [{
                 type: Output
-            }], activeIndexChange: [{
-                type: Output
             }], tabList: [{
                 type: ContentChildren,
                 args: [AccordionTab, { descendants: true }]
+            }], activeIndex: [{
+                type: Input
+            }], headerAriaLevel: [{
+                type: Input
             }], onKeydown: [{
                 type: HostListener,
                 args: ['keydown', ['$event']]
             }] } });
 class AccordionModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: AccordionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.2", ngImport: i0, type: AccordionModule, imports: [Accordion, AccordionTab], exports: [Accordion, AccordionTab, SharedModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: AccordionModule, imports: [Accordion, AccordionTab, SharedModule] });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.2", ngImport: i0, type: AccordionModule, imports: [Accordion, AccordionTab, AccordionPanel, AccordionHeader, AccordionContent], exports: [Accordion, AccordionTab, SharedModule, AccordionPanel, AccordionHeader, AccordionContent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: AccordionModule, imports: [Accordion, AccordionTab, AccordionPanel, AccordionHeader, AccordionContent, SharedModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: AccordionModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [Accordion, AccordionTab],
-                    exports: [Accordion, AccordionTab, SharedModule],
+                    imports: [Accordion, AccordionTab, AccordionPanel, AccordionHeader, AccordionContent],
+                    exports: [Accordion, AccordionTab, SharedModule, AccordionPanel, AccordionHeader, AccordionContent],
                 }]
         }] });
 
@@ -899,5 +1286,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { Accordion, AccordionModule, AccordionTab };
+export { Accordion, AccordionClasses, AccordionContent, AccordionHeader, AccordionModule, AccordionPanel, AccordionStyle, AccordionTab };
 //# sourceMappingURL=primeng-accordion.mjs.map