primeng 19.1.2 → 20.0.0-beta.1

package/fesm2022/primeng-accordion.mjs

@@ -1,138 +1,62 @@
-import { trigger, state, transition, style, animate } from '@angular/animations';
+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, numberAttribute, booleanAttribute, ContentChildren, Output, Input, HostBinding, signal, NgModule } 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 { Header, PrimeTemplate, SharedModule } from 'primeng/api';
+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 { BaseStyle } from 'primeng/base';
+import { css } from '@primeuix/styled';
+import { style } from '@primeuix/styles/accordion';
 
-const theme = ({ dt }) => `
-.p-accordionpanel {
-    display: flex;
-    flex-direction: column;
-    border-style: solid;
-    border-width: ${dt('accordion.panel.border.width')};
-    border-color: ${dt('accordion.panel.border.color')};
-}
-
-.p-accordionheader {
-    all: unset;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: ${dt('accordion.header.padding')};
-    color: ${dt('accordion.header.color')};
-    background: ${dt('accordion.header.background')};
-    border-style: solid;
-    border-width: ${dt('accordion.header.border.width')};
-    border-color: ${dt('accordion.header.border.color')};
-    font-weight: ${dt('accordion.header.font.weight')};
-    border-radius: ${dt('accordion.header.border.radius')};
-    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('accordion.transition.duration')};
-    outline-color: transparent;
-    position: relative;
-    overflow: hidden;
-}
-
-.p-accordionpanel:first-child > .p-accordionheader {
-    border-width: ${dt('accordion.header.first.border.width')};
-    border-start-start-radius: ${dt('accordion.header.first.top.border.radius')};
-    border-start-end-radius: ${dt('accordion.header.first.top.border.radius')};
-}
-
-.p-accordionpanel:last-child > .p-accordionheader {
-    border-end-start-radius: ${dt('accordion.header.last.bottom.border.radius')};
-    border-end-end-radius: ${dt('accordion.header.last.bottom.border.radius')};
-}
-
-.p-accordionpanel:last-child.p-accordionpanel-active > .p-accordionheader {
-    border-end-start-radius: ${dt('accordion.header.last.active.bottom.border.radius')};
-    border-end-end-radius:${dt('accordion.header.last.active.bottom.border.radius')};
-}
-
-.p-accordionheader-toggle-icon {
-    color: ${dt('accordion.header.toggle.icon.color')};
-}
-
-.p-accordionpanel:not(.p-disabled) .p-accordionheader:focus-visible {
-    box-shadow: ${dt('accordion.header.focus.ring.shadow')};
-    outline: ${dt('accordion.header.focus.ring.width')} ${dt('accordion.header.focus.ring.style')} ${dt('accordion.header.focus.ring.color')};
-    outline-offset: ${dt('accordion.header.focus.ring.offset')};
-}
-
-.p-accordionpanel:not(.p-accordionpanel-active):not(.p-disabled) > .p-accordionheader:hover {
-    background: ${dt('accordion.header.hover.background')};
-    color: ${dt('accordion.header.hover.color')}
-}
+const theme = ({ dt }) => css `
+    ${style}
 
-.p-accordionpanel:not(.p-accordionpanel-active):not(.p-disabled) .p-accordionheader:hover .p-accordionheader-toggle-icon {
-    color: ${dt('accordion.header.toggle.icon.hover.color')};
-}
-
-.p-accordionpanel:not(.p-disabled).p-accordionpanel-active > .p-accordionheader {
-    background: ${dt('accordion.header.active.background')};
-    color: ${dt('accordion.header.active.color')}
-}
-
-.p-accordionpanel:not(.p-disabled).p-accordionpanel-active > .p-accordionheader .p-accordionheader-toggle-icon {
-    color: ${dt('accordion.header.toggle.icon.active.color')};
-}
-
-.p-accordionpanel:not(.p-disabled).p-accordionpanel-active > .p-accordionheader:hover  {
-    background: ${dt('accordion.header.active.hover.background')};
-    color: ${dt('accordion.header.active.hover.color')}
-}
-
-.p-accordionpanel:not(.p-disabled).p-accordionpanel-active > .p-accordionheader:hover  .p-accordionheader-toggle-icon {
-    color: ${dt('accordion.header.toggle.icon.active.hover.color')};
-}
-
-.p-accordioncontent-content {
-    border-style: solid;
-    border-width: ${dt('accordion.content.border.width')};
-    border-color: ${dt('accordion.content.border.color')};
-    background-color: ${dt('accordion.content.background')};
-    color: ${dt('accordion.content.color')};
-    padding: ${dt('accordion.content.padding')}
-}
-
-/*For PrimeNG*/
-
-.p-accordion .p-accordioncontent {
-    overflow: hidden;
-}
+    /*For PrimeNG*/
+    .p-accordion .p-accordioncontent {
+        overflow: hidden;
+    }
 
-.p-accordionpanel.p-accordioncontent:not(.ng-animating) {
-    overflow: inherit;
-}
+    .p-accordionpanel.p-accordioncontent:not(.ng-animating) {
+        overflow: inherit;
+    }
 
-.p-accordionheader-toggle-icon.icon-start {
-    order: -1;
-}
+    .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-accordionheader:has(.p-accordionheader-toggle-icon.icon-start) {
+        justify-content: flex-start;
+        gap: ${dt('accordion.header.padding')};
+    }
 `;
 const classes = {
-    root: 'p-accordion p-component'
+    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: "19.2.8", ngImport: i0, type: AccordionStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: AccordionStyle });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AccordionStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AccordionStyle });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: AccordionStyle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AccordionStyle, decorators: [{
             type: Injectable
         }] });
 /**
@@ -197,10 +121,11 @@ class AccordionPanel extends BaseComponent {
         }
         return currentValue === value;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: AccordionPanel, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.8", 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.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 });
+    _componentStyle = inject(AccordionStyle);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AccordionPanel, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.6", 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: "19.2.8", ngImport: i0, type: AccordionPanel, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AccordionPanel, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-accordion-panel, p-accordionpanel',
@@ -210,13 +135,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
                     host: {
-                        '[class.p-accordionpanel]': 'true',
-                        '[class.p-accordionpanel-active]': 'active()',
-                        '[class.p-disabled]': 'disabled()',
+                        '[class]': 'cx("panel")',
                         '[attr.data-pc-name]': '"accordionpanel"',
                         '[attr.data-p-disabled]': 'disabled()',
                         '[attr.data-p-active]': 'active()'
-                    }
+                    },
+                    providers: [AccordionStyle]
                 }]
         }] });
 /**
@@ -279,6 +203,7 @@ class AccordionHeader extends BaseComponent {
                 break;
         }
     }
+    _componentStyle = inject(AccordionStyle);
     changeActiveValue() {
         this.pcAccordion.updateValue(this.pcAccordionPanel.value());
     }
@@ -329,8 +254,8 @@ class AccordionHeader extends BaseComponent {
         this.changeActiveValue();
         event.preventDefault();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: AccordionHeader, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: AccordionHeader, isStandalone: true, selector: "p-accordion-header, p-accordionheader", 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.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\"" } }, queries: [{ propertyName: "toggleicon", first: true, predicate: ["toggleicon"], descendants: true }], usesInheritance: true, hostDirectives: [{ directive: i1.Ripple }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AccordionHeader, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", 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 />
         @if (toggleicon) {
             <ng-template *ngTemplateOutlet="toggleicon; context: { active: active() }"></ng-template>
@@ -346,7 +271,7 @@ class AccordionHeader extends BaseComponent {
         }
     `, 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: "19.2.8", ngImport: i0, type: AccordionHeader, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AccordionHeader, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-accordion-header, p-accordionheader',
@@ -370,7 +295,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
                     host: {
-                        '[class.p-accordionheader]': 'true',
+                        '[class]': "cx('header')",
                         '[attr.id]': 'id()',
                         '[attr.aria-expanded]': 'active()',
                         '[attr.aria-controls]': 'ariaControls()',
@@ -382,7 +307,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                         '[attr.data-pc-name]': '"accordionheader"',
                         '[style.user-select]': '"none"'
                     },
-                    hostDirectives: [Ripple]
+                    hostDirectives: [Ripple],
+                    providers: [AccordionStyle]
                 }]
         }], propDecorators: { toggleicon: [{
                 type: ContentChild,
@@ -403,16 +329,19 @@ class AccordionContent extends BaseComponent {
     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: "19.2.8", ngImport: i0, type: AccordionContent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.8", type: AccordionContent, isStandalone: true, selector: "p-accordion-content, p-accordioncontent", 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">
+    _componentStyle = inject(AccordionStyle);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AccordionContent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", 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()", "@content": "active()\n            ? { value: 'visible', params: { transitionParams: pcAccordion.transitionOptions } }\n            : { value: 'hidden', params: { transitionParams: pcAccordion.transitionOptions } }" } }, providers: [AccordionStyle], usesInheritance: true, ngImport: i0, template: ` <div [class]="cx('content')">
         <ng-content />
     </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], animations: [
             trigger('content', [
-                state('hidden', style({
+                state('hidden', style$1({
                     height: '0',
-                    visibility: 'hidden'
+                    paddingBottom: '0',
+                    visibility: 'hidden',
+                    overflow: 'hidden'
                 })),
-                state('visible', style({
+                state('visible', style$1({
                     height: '*',
                     visibility: 'visible'
                 })),
@@ -421,19 +350,19 @@ class AccordionContent extends BaseComponent {
             ])
         ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: AccordionContent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AccordionContent, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-accordion-content, p-accordioncontent',
                     imports: [CommonModule],
                     standalone: true,
-                    template: ` <div class="p-accordioncontent-content">
+                    template: ` <div [class]="cx('content')">
         <ng-content />
     </div>`,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
                     host: {
-                        '[class.p-accordioncontent]': 'true',
+                        '[class]': 'cx("contentContainer")',
                         '[attr.id]': 'id()',
                         '[attr.role]': '"region"',
                         '[attr.data-pc-name]': '"accordioncontent"',
@@ -445,376 +374,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                     },
                     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 {
-    get hostClass() {
-        return this.tabStyleClass;
-    }
-    get hostStyle() {
-        return this.tabStyle;
-    }
-    /**
-     * Current id state as a string.
-     * @group Props
-     */
-    id = uuid('pn_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.cd.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;
-    _selected = false;
-    get iconClass() {
-        if (this.iconPos === 'end') {
-            return 'p-accordionheader-toggle-icon icon-end';
-        }
-        else {
-            return 'p-accordionheader-toggle-icon icon-start';
-        }
-    }
-    /**
-     * Content template for the content of the drawer.
-     * @group Templates
-     */
-    headerTemplate;
-    /**
-     * Template for the header icon.
-     * @group Templates
-     */
-    iconTemplate;
-    /**
-     * Content template for the footer of the drawer.
-     * @group Templates
-     */
-    contentTemplate;
-    templates;
-    _headerTemplate;
-    _iconTemplate;
-    _contentTemplate;
-    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()) {
-                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].cd.markForCheck();
-                    }
-                }
-            }
-            this.selected = true;
-            this.loaded = true;
-            this.accordion.onOpen.emit({ originalEvent: event, index: index });
-        }
-        this.selectedChange.emit(this.selected);
-        this.accordion.updateActiveIndex();
-        this.cd.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;
-    }
-    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);
-        super.ngOnDestroy();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: AccordionTab, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: AccordionTab, isStandalone: true, selector: "p-accordionTab, p-accordion-tab, 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: "headerTemplate", first: true, predicate: ["header"] }, { propertyName: "iconTemplate", first: true, predicate: ["icon"] }, { propertyName: "contentTemplate", first: true, predicate: ["content"] }, { propertyName: "headerFacet", predicate: Header }, { propertyName: "templates", predicate: PrimeTemplate }], usesInheritance: true, ngImport: i0, template: `
-        <button
-            class="p-accordionheader"
-            type="button"
-            [disabled]="disabled"
-            [attr.aria-expanded]="selected"
-            [attr.aria-level]="headerAriaLevel"
-            [class.p-disabled]="disabled"
-            [attr.data-p-disabled]="disabled"
-            [attr.data-pc-section]="'accordionheader'"
-            (click)="toggle($event)"
-            (keydown)="onKeydown($event)"
-            [ngClass]="headerStyleClass"
-            [ngStyle]="headerStyle"
-            [attr.tabindex]="disabled ? null : 0"
-            [attr.id]="getTabHeaderActionId(id)"
-            [attr.aria-controls]="getTabContentId(id)"
-        >
-            @if (!headerTemplate && !_headerTemplate) {
-                {{ header }}
-            } @else {
-                @if (headerTemplate || _headerTemplate) {
-                    <ng-container *ngTemplateOutlet="headerTemplate || _headerTemplate"></ng-container>
-                }
-                @if (headerFacet) {
-                    <ng-content select="p-header" />
-                }
-            }
-            @if (iconTemplate || _iconTemplate) {
-                <ng-template *ngTemplateOutlet="iconTemplate || _iconTemplate; context: { $implicit: selected }"></ng-template>
-            } @else {
-                <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>
-                    <ChevronUpIcon *ngIf="!accordion.expandIcon" [ngClass]="iconClass" [attr.aria-hidden]="true" />
-                </ng-container>
-            }
-        </button>
-        <div
-            [attr.id]="getTabContentId(id)"
-            class="p-accordioncontent"
-            [@tabContent]="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-accordioncontent-content" [ngClass]="contentStyleClass" [ngStyle]="contentStyle">
-                <ng-content />
-                <ng-container *ngIf="(contentTemplate || _contentTemplate) && (cache ? loaded : selected)">
-                    <ng-container *ngTemplateOutlet="contentTemplate || _contentTemplate"></ng-container>
-                </ng-container>
-            </div>
-        </div>
-    `, 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',
-                    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: "19.2.8", ngImport: i0, type: AccordionTab, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'p-accordionTab, p-accordion-tab, p-accordiontab',
-                    standalone: true,
-                    imports: [CommonModule, ChevronDownIcon, ChevronUpIcon],
-                    template: `
-        <button
-            class="p-accordionheader"
-            type="button"
-            [disabled]="disabled"
-            [attr.aria-expanded]="selected"
-            [attr.aria-level]="headerAriaLevel"
-            [class.p-disabled]="disabled"
-            [attr.data-p-disabled]="disabled"
-            [attr.data-pc-section]="'accordionheader'"
-            (click)="toggle($event)"
-            (keydown)="onKeydown($event)"
-            [ngClass]="headerStyleClass"
-            [ngStyle]="headerStyle"
-            [attr.tabindex]="disabled ? null : 0"
-            [attr.id]="getTabHeaderActionId(id)"
-            [attr.aria-controls]="getTabContentId(id)"
-        >
-            @if (!headerTemplate && !_headerTemplate) {
-                {{ header }}
-            } @else {
-                @if (headerTemplate || _headerTemplate) {
-                    <ng-container *ngTemplateOutlet="headerTemplate || _headerTemplate"></ng-container>
-                }
-                @if (headerFacet) {
-                    <ng-content select="p-header" />
-                }
-            }
-            @if (iconTemplate || _iconTemplate) {
-                <ng-template *ngTemplateOutlet="iconTemplate || _iconTemplate; context: { $implicit: selected }"></ng-template>
-            } @else {
-                <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>
-                    <ChevronUpIcon *ngIf="!accordion.expandIcon" [ngClass]="iconClass" [attr.aria-hidden]="true" />
-                </ng-container>
-            }
-        </button>
-        <div
-            [attr.id]="getTabContentId(id)"
-            class="p-accordioncontent"
-            [@tabContent]="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-accordioncontent-content" [ngClass]="contentStyleClass" [ngStyle]="contentStyle">
-                <ng-content />
-                <ng-container *ngIf="(contentTemplate || _contentTemplate) && (cache ? loaded : selected)">
-                    <ng-container *ngTemplateOutlet="contentTemplate || _contentTemplate"></ng-container>
-                </ng-container>
-            </div>
-        </div>
-    `,
-                    animations: [
-                        trigger('tabContent', [
-                            state('hidden', style({
+                            state('hidden', style$1({
                                 height: '0',
-                                visibility: 'hidden'
+                                paddingBottom: '0',
+                                visibility: 'hidden',
+                                overflow: 'hidden'
                             })),
-                            state('visible', style({
+                            state('visible', style$1({
                                 height: '*',
                                 visibility: 'visible'
                             })),
@@ -822,81 +388,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                             transition('void => *', animate(0))
                         ])
                     ],
-                    host: {
-                        '[class.p-accordionpanel]': 'true',
-                        '[class.p-accordionpanel-active]': 'selected',
-                        '[attr.data-pc-name]': '"accordiontab"'
-                    },
-                    providers: [AccordionStyle],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None
+                    providers: [AccordionStyle]
                 }]
-        }], propDecorators: { hostClass: [{
-                type: HostBinding,
-                args: ['class']
-            }], hostStyle: [{
-                type: HostBinding,
-                args: ['style']
-            }], 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]
-            }], headerTemplate: [{
-                type: ContentChild,
-                args: ['header', { descendants: false }]
-            }], iconTemplate: [{
-                type: ContentChild,
-                args: ['icon', { descendants: false }]
-            }], contentTemplate: [{
-                type: ContentChild,
-                args: ['content', { descendants: false }]
-            }], templates: [{
-                type: ContentChildren,
-                args: [PrimeTemplate]
-            }] } });
+        }] });
 /**
  * Accordion groups a collection of contents in tabs.
  * @group Components
  */
 class Accordion extends BaseComponent {
-    get hostClass() {
-        return this.styleClass;
-    }
-    get hostStyle() {
-        return this.style;
-    }
     /**
      * Value of the active tab.
      * @defaultValue undefined
@@ -909,13 +408,9 @@ class Accordion extends BaseComponent {
      * @group Props
      */
     multiple = input(false, { transform: (v) => transformToBoolean(v) });
-    /**
-     * Inline style of the tab header and content.
-     * @group Props
-     */
-    style;
     /**
      * Class of the element.
+     * @deprecated since v20.0.0, use `class` instead.
      * @group Props
      */
     styleClass;
@@ -935,34 +430,11 @@ class Accordion extends BaseComponent {
      * @group Props
      */
     selectOnFocus = input(false, { transform: (v) => transformToBoolean(v) });
-    set activeIndex(val) {
-        this._activeIndex = val;
-        if (this.preventActiveIndexPropagation) {
-            this.preventActiveIndexPropagation = false;
-            return;
-        }
-        this.updateSelectionState();
-    }
     /**
      * Transition options of the animation.
      * @group Props
      */
     transitionOptions = '400ms cubic-bezier(0.86, 0, 0.07, 1)';
-    /**
-     * Returns the active index.
-     * @param {number | number[]} value - New index.
-     * @deprecated use native valueChange emitter of the value model.
-     * @group Emits
-     */
-    activeIndexChange = new EventEmitter();
-    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.
@@ -976,29 +448,7 @@ class Accordion extends BaseComponent {
      */
     onOpen = new EventEmitter();
     id = signal(uuid('pn_id_'));
-    tabList;
-    tabListSubscription = null;
-    _activeIndex;
-    _headerAriaLevel = 2;
-    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':
@@ -1037,37 +487,6 @@ class Accordion extends BaseComponent {
     changeFocusedTab(element) {
         if (element) {
             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.cd.markForCheck();
-                });
-            }
         }
     }
     findNextHeaderAction(tabElement, selfCheck = false) {
@@ -1093,59 +512,9 @@ class Accordion extends BaseComponent {
         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.cd.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].cd.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);
-    }
     updateValue(value) {
         const currentValue = this.value();
         if (this.multiple()) {
@@ -1168,16 +537,10 @@ class Accordion extends BaseComponent {
             }
         }
     }
-    ngOnDestroy() {
-        if (this.tabListSubscription) {
-            this.tabListSubscription.unsubscribe();
-        }
-        super.ngOnDestroy();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: Accordion, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.8", 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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Accordion, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.6", 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: "19.2.8", ngImport: i0, type: Accordion, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Accordion, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-accordion',
@@ -1185,21 +548,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                     imports: [CommonModule, SharedModule],
                     template: ` <ng-content /> `,
                     host: {
-                        '[class.p-accordion]': 'true',
-                        '[class.p-component]': 'true'
+                        '[class]': "cn(cx('root'), styleClass)"
                     },
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     providers: [AccordionStyle]
                 }]
-        }], propDecorators: { hostClass: [{
-                type: HostBinding,
-                args: ['class']
-            }], hostStyle: [{
-                type: HostBinding,
-                args: ['style']
-            }], style: [{
-                type: Input
-            }], styleClass: [{
+        }], propDecorators: { styleClass: [{
                 type: Input
             }], expandIcon: [{
                 type: Input
@@ -1207,33 +561,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                 type: Input
             }], transitionOptions: [{
                 type: Input
-            }], activeIndexChange: [{
-                type: Output
             }], onClose: [{
                 type: Output
             }], onOpen: [{
                 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: "19.2.8", ngImport: i0, type: AccordionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.8", ngImport: i0, type: AccordionModule, imports: [Accordion, AccordionTab, SharedModule, AccordionPanel, AccordionHeader, AccordionContent], exports: [Accordion, AccordionTab, SharedModule, AccordionPanel, AccordionHeader, AccordionContent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: AccordionModule, imports: [Accordion, AccordionTab, SharedModule, AccordionPanel, AccordionHeader, AccordionContent, SharedModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AccordionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.6", 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.0.6", ngImport: i0, type: AccordionModule, imports: [Accordion, SharedModule, AccordionPanel, AccordionHeader, AccordionContent, SharedModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: AccordionModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AccordionModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [Accordion, AccordionTab, SharedModule, AccordionPanel, AccordionHeader, AccordionContent],
-                    exports: [Accordion, AccordionTab, SharedModule, AccordionPanel, AccordionHeader, AccordionContent]
+                    imports: [Accordion, SharedModule, AccordionPanel, AccordionHeader, AccordionContent],
+                    exports: [Accordion, SharedModule, AccordionPanel, AccordionHeader, AccordionContent]
                 }]
         }] });
 
@@ -1241,5 +586,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { Accordion, AccordionClasses, AccordionContent, AccordionHeader, AccordionModule, AccordionPanel, AccordionStyle, AccordionTab };
+export { Accordion, AccordionClasses, AccordionContent, AccordionHeader, AccordionModule, AccordionPanel, AccordionStyle };
 //# sourceMappingURL=primeng-accordion.mjs.map