primeng 21.1.9 → 22.0.0-rc.2

package/fesm2022/primeng-accordion.mjs

@@ -1,21 +1,26 @@
 export * from 'primeng/types/accordion';
-import * as i3 from '@angular/common';
-import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, InjectionToken, inject, forwardRef, model, input, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, HostListener, ContentChild, EventEmitter, signal, Output, Input, NgModule } from '@angular/core';
+import { InjectionToken, Injectable, inject, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, contentChild, HostListener, model, input, output, signal, NgModule } from '@angular/core';
 import { findSingle, getAttribute, focus, uuid } from '@primeuix/utils';
 import { SharedModule } from 'primeng/api';
 import { BaseComponent, PARENT_INSTANCE } from 'primeng/basecomponent';
 import * as i1 from 'primeng/bind';
 import { Bind, BindModule } from 'primeng/bind';
-import { ChevronDownIcon, ChevronUpIcon } from 'primeng/icons';
-import * as i4 from 'primeng/motion';
-import { MotionModule } from 'primeng/motion';
-import * as i2 from 'primeng/ripple';
-import { Ripple } from 'primeng/ripple';
 import { transformToBoolean } from 'primeng/utils';
+import * as i2 from 'primeng/motion';
+import { MotionModule } from 'primeng/motion';
 import { style as style$1 } from '@primeuix/styles/accordion';
 import { BaseStyle } from 'primeng/base';
+import { NgTemplateOutlet } from '@angular/common';
+import { ChevronDown } from '@primeicons/angular/chevron-down';
+import { ChevronUp } from '@primeicons/angular/chevron-up';
+import * as i1$1 from 'primeng/ripple';
+import { Ripple } from 'primeng/ripple';
+
+const ACCORDION_INSTANCE = new InjectionToken('ACCORDION_INSTANCE');
+const ACCORDION_PANEL_INSTANCE = new InjectionToken('ACCORDION_PANEL_INSTANCE');
+const ACCORDION_HEADER_INSTANCE = new InjectionToken('ACCORDION_HEADER_INSTANCE');
+const ACCORDION_CONTENT_INSTANCE = new InjectionToken('ACCORDION_CONTENT_INSTANCE');
 
 const style = /*css*/ `
 ${style$1}
@@ -59,10 +64,10 @@ class AccordionStyle extends BaseStyle {
     name = 'accordion';
     style = style;
     classes = classes;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: AccordionStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: AccordionStyle });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: AccordionStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: AccordionStyle });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: AccordionStyle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: AccordionStyle, decorators: [{
             type: Injectable
         }] });
 /**
@@ -102,63 +107,75 @@ var AccordionClasses;
     AccordionClasses["panel"] = "p-accordionpanel";
 })(AccordionClasses || (AccordionClasses = {}));
 
-const ACCORDION_PANEL_INSTANCE = new InjectionToken('ACCORDION_PANEL_INSTANCE');
-const ACCORDION_HEADER_INSTANCE = new InjectionToken('ACCORDION_HEADER_INSTANCE');
-const ACCORDION_CONTENT_INSTANCE = new InjectionToken('ACCORDION_CONTENT_INSTANCE');
-const ACCORDION_INSTANCE = new InjectionToken('ACCORDION_INSTANCE');
 /**
- * AccordionPanel is a helper component for Accordion component.
+ * AccordionContent is a helper component for Accordion component.
  * @group Components
  */
-class AccordionPanel extends BaseComponent {
-    $pcAccordionPanel = inject(ACCORDION_PANEL_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;
+class AccordionContent extends BaseComponent {
+    $pcAccordionContent = inject(ACCORDION_CONTENT_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;
     bindDirectiveInstance = inject(Bind, { self: true });
-    componentName = 'AccordionPanel';
+    componentName = 'AccordionContent';
     onAfterViewChecked() {
         this.bindDirectiveInstance.setAttrs(this.ptm('root'));
     }
-    pcAccordion = inject(forwardRef(() => Accordion));
-    /**
-     * Value of the active tab.
-     * @defaultValue undefined
-     * @group Props
-     */
-    value = model(undefined, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
-    /**
-     * Disables the tab when enabled.
-     * @defaultValue false
-     * @group Props
-     */
-    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: (v) => transformToBoolean(v) });
-    active = computed(() => (this.pcAccordion.multiple() ? this.valueEquals(this.pcAccordion.value(), this.value()) : this.pcAccordion.value() === this.value()), ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
-    valueEquals(currentValue, value) {
-        if (Array.isArray(currentValue)) {
-            return currentValue.includes(value);
-        }
-        return currentValue === value;
-    }
+    pcAccordion = inject(ACCORDION_INSTANCE);
+    pcAccordionPanel = inject(ACCORDION_PANEL_INSTANCE);
+    active = computed(() => this.pcAccordionPanel.active(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+    ariaLabelledby = computed(() => `${this.pcAccordion.id()}_accordionheader_${this.pcAccordionPanel.value()}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabelledby" }] : /* istanbul ignore next */ []));
+    id = computed(() => `${this.pcAccordion.id()}_accordioncontent_${this.pcAccordionPanel.value()}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
     _componentStyle = inject(AccordionStyle);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: AccordionPanel, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", 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-p-disabled": "disabled()", "attr.data-p-active": "active()" } }, providers: [AccordionStyle, { provide: ACCORDION_PANEL_INSTANCE, useExisting: AccordionPanel }, { provide: PARENT_INSTANCE, useExisting: AccordionPanel }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `<ng-content />`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: BindModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    ptParams = computed(() => ({ context: this.active() }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ptParams" }] : /* istanbul ignore next */ []));
+    computedMotionOptions = computed(() => {
+        return {
+            ...this.ptm('motion', this.ptParams()),
+            ...this.pcAccordion.computedMotionOptions()
+        };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedMotionOptions" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: AccordionContent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: AccordionContent, isStandalone: true, selector: "p-accordion-content, p-accordioncontent", host: { properties: { "class": "cx(\"contentContainer\")", "attr.id": "id()", "attr.role": "\"region\"", "attr.data-p-active": "active()", "attr.aria-labelledby": "ariaLabelledby()" } }, providers: [AccordionStyle, { provide: ACCORDION_CONTENT_INSTANCE, useExisting: AccordionContent }, { provide: PARENT_INSTANCE, useExisting: AccordionContent }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `
+        <p-motion [visible]="active()" name="p-collapsible" hideStrategy="visibility" [mountOnEnter]="false" [unmountOnLeave]="false" [options]="computedMotionOptions()">
+            <div [pBind]="ptm('contentWrapper', ptParams())" [class]="cx('contentWrapper')">
+                <div [pBind]="ptm('content', ptParams())" [class]="cx('content')">
+                    <ng-content />
+                </div>
+            </div>
+        </p-motion>
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: BindModule }, { kind: "directive", type: i1.Bind, selector: "[pBind]", inputs: ["pBind"] }, { kind: "ngmodule", type: MotionModule }, { kind: "component", type: i2.Motion, selector: "p-motion", inputs: ["visible", "mountOnEnter", "unmountOnLeave", "name", "type", "safe", "disabled", "appear", "enter", "leave", "duration", "hideStrategy", "enterFromClass", "enterToClass", "enterActiveClass", "leaveFromClass", "leaveToClass", "leaveActiveClass", "options"], outputs: ["onBeforeEnter", "onEnter", "onAfterEnter", "onEnterCancelled", "onBeforeLeave", "onLeave", "onAfterLeave", "onLeaveCancelled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: AccordionPanel, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: AccordionContent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'p-accordion-panel, p-accordionpanel',
-                    imports: [CommonModule, BindModule],
+                    selector: 'p-accordion-content, p-accordioncontent',
+                    imports: [BindModule, MotionModule],
                     standalone: true,
-                    template: `<ng-content />`,
+                    template: `
+        <p-motion [visible]="active()" name="p-collapsible" hideStrategy="visibility" [mountOnEnter]="false" [unmountOnLeave]="false" [options]="computedMotionOptions()">
+            <div [pBind]="ptm('contentWrapper', ptParams())" [class]="cx('contentWrapper')">
+                <div [pBind]="ptm('content', ptParams())" [class]="cx('content')">
+                    <ng-content />
+                </div>
+            </div>
+        </p-motion>
+    `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
                     host: {
-                        '[class]': 'cx("panel")',
-                        '[attr.data-p-disabled]': 'disabled()',
-                        '[attr.data-p-active]': 'active()'
+                        '[class]': 'cx("contentContainer")',
+                        '[attr.id]': 'id()',
+                        '[attr.role]': '"region"',
+                        '[attr.data-p-active]': 'active()',
+                        '[attr.aria-labelledby]': 'ariaLabelledby()'
                     },
                     hostDirectives: [Bind],
-                    providers: [AccordionStyle, { provide: ACCORDION_PANEL_INSTANCE, useExisting: AccordionPanel }, { provide: PARENT_INSTANCE, useExisting: AccordionPanel }]
+                    providers: [AccordionStyle, { provide: ACCORDION_CONTENT_INSTANCE, useExisting: AccordionContent }, { provide: PARENT_INSTANCE, useExisting: AccordionContent }]
                 }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+        }] });
+
 /**
  * AccordionHeader is a helper component for Accordion component.
  * @group Components
@@ -170,12 +187,18 @@ class AccordionHeader extends BaseComponent {
     onAfterViewChecked() {
         this.bindDirectiveInstance.setAttrs(this.ptm('root'));
     }
-    pcAccordion = inject(forwardRef(() => Accordion));
-    pcAccordionPanel = inject(forwardRef(() => AccordionPanel));
-    id = computed(() => `${this.pcAccordion.id()}_accordionheader_${this.pcAccordionPanel.value()}`, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
-    active = computed(() => this.pcAccordionPanel.active(), ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
-    disabled = computed(() => this.pcAccordionPanel.disabled(), ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
-    ariaControls = computed(() => `${this.pcAccordion.id()}_accordioncontent_${this.pcAccordionPanel.value()}`, ...(ngDevMode ? [{ debugName: "ariaControls" }] : /* istanbul ignore next */ []));
+    pcAccordion = inject(ACCORDION_INSTANCE);
+    pcAccordionPanel = inject(ACCORDION_PANEL_INSTANCE);
+    id = computed(() => `${this.pcAccordion.id()}_accordionheader_${this.pcAccordionPanel.value()}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    active = computed(() => this.pcAccordionPanel.active(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+    disabled = computed(() => this.pcAccordionPanel.disabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    ariaControls = computed(() => `${this.pcAccordion.id()}_accordioncontent_${this.pcAccordionPanel.value()}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaControls" }] : /* istanbul ignore next */ []));
+    hostTabindex = computed(() => (this.disabled() ? '-1' : '0'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hostTabindex" }] : /* istanbul ignore next */ []));
     /**
      * Toggle icon template.
      * @type {TemplateRef<AccordionToggleIconTemplateContext>} context - Context of the template
@@ -186,7 +209,9 @@ class AccordionHeader extends BaseComponent {
      * @see {@link AccordionToggleIconTemplateContext}
      * @group Templates
      */
-    toggleicon;
+    toggleicon = contentChild('toggleicon', { ...(ngDevMode ? { debugName: "toggleicon" } : /* istanbul ignore next */ {}), descendants: false });
+    toggleIconContext = computed(() => ({ active: this.active() }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "toggleIconContext" }] : /* istanbul ignore next */ []));
     onClick(event) {
         if (this.disabled()) {
             return;
@@ -238,14 +263,14 @@ class AccordionHeader extends BaseComponent {
         return headerElement?.closest('[data-pc-name="accordionpanel"]');
     }
     findHeader(panelElement) {
-        return findSingle(panelElement, '[data-pc-name="accordionheader"]');
+        return panelElement ? findSingle(panelElement, '[data-pc-name="accordionheader"]') : null;
     }
     findNextPanel(panelElement, selfCheck = false) {
-        const element = selfCheck ? panelElement : panelElement.nextElementSibling;
+        const element = selfCheck ? panelElement : panelElement?.nextElementSibling;
         return element ? (getAttribute(element, 'data-p-disabled') ? this.findNextPanel(element) : this.findHeader(element)) : null;
     }
     findPrevPanel(panelElement, selfCheck = false) {
-        const element = selfCheck ? panelElement : panelElement.previousElementSibling;
+        const element = selfCheck ? panelElement : panelElement?.previousElementSibling;
         return element ? (getAttribute(element, 'data-p-disabled') ? this.findPrevPanel(element) : this.findHeader(element)) : null;
     }
     findFirstPanel() {
@@ -254,8 +279,9 @@ class AccordionHeader extends BaseComponent {
     findLastPanel() {
         return this.findPrevPanel(this.pcAccordion.el.nativeElement.lastElementChild, true);
     }
-    changeFocusedPanel(event, element) {
-        focus(element);
+    changeFocusedPanel(_event, element) {
+        if (element)
+            focus(element);
     }
     arrowDownKey(event) {
         const nextPanel = this.findNextPanel(this.findPanel(event.currentTarget));
@@ -283,47 +309,56 @@ class AccordionHeader extends BaseComponent {
         }
         event.preventDefault();
     }
-    get dataP() {
-        return this.cn({
-            active: this.active()
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: AccordionHeader, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: AccordionHeader, isStandalone: true, selector: "p-accordion-header, p-accordionheader", host: { listeners: { "click": "onClick($event)", "focus": "onFocus()", "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()", "style.user-select": "\"none\"", "attr.data-p": "dataP" } }, providers: [AccordionStyle, { provide: ACCORDION_HEADER_INSTANCE, useExisting: AccordionHeader }, { provide: PARENT_INSTANCE, useExisting: AccordionHeader }], queries: [{ propertyName: "toggleicon", first: true, predicate: ["toggleicon"], descendants: true }], usesInheritance: true, hostDirectives: [{ directive: i2.Ripple }, { directive: i1.Bind }], ngImport: i0, template: `
+    dataP = computed(() => this.cn({
+        active: this.active()
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dataP" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: AccordionHeader, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: AccordionHeader, isStandalone: true, selector: "p-accordion-header, p-accordionheader", host: { listeners: { "click": "onClick($event)", "focus": "onFocus()", "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": "hostTabindex()", "attr.data-p-active": "active()", "attr.data-p-disabled": "disabled()", "style.user-select": "\"none\"", "attr.data-p": "dataP()" } }, providers: [AccordionStyle, { provide: ACCORDION_HEADER_INSTANCE, useExisting: AccordionHeader }, { provide: PARENT_INSTANCE, useExisting: AccordionHeader }], queries: [{ propertyName: "toggleicon", first: true, predicate: ["toggleicon"], isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1$1.Ripple }, { directive: i1.Bind }], ngImport: i0, template: `
         <ng-content />
-        @if (toggleicon) {
-            <ng-template *ngTemplateOutlet="toggleicon; context: { active: active() }"></ng-template>
+        @if (toggleicon()) {
+            <ng-container *ngTemplateOutlet="toggleicon(); context: toggleIconContext()"></ng-container>
         } @else {
-            <ng-container *ngIf="active()">
-                <span *ngIf="pcAccordion.collapseIcon" [class]="cn(cx('toggleicon'), pcAccordion.collapseIcon)" [attr.aria-hidden]="true" [pBind]="ptm('toggleicon')"></span>
-                <svg data-p-icon="chevron-up" *ngIf="!pcAccordion.collapseIcon" [class]="cx('toggleicon')" [pBind]="ptm('toggleicon')" [attr.aria-hidden]="true" />
-            </ng-container>
-            <ng-container *ngIf="!active()">
-                <span *ngIf="pcAccordion.expandIcon" [class]="cn(cx('toggleicon'), pcAccordion.expandIcon)" [attr.aria-hidden]="true" [pBind]="ptm('toggleicon')"></span>
-                <svg data-p-icon="chevron-down" *ngIf="!pcAccordion.expandIcon" [attr.aria-hidden]="true" [pBind]="ptm('toggleicon')" />
-            </ng-container>
+            @if (active()) {
+                @if (pcAccordion.collapseIcon()) {
+                    <span [class]="cn(cx('toggleicon'), pcAccordion.collapseIcon())" [attr.aria-hidden]="true" [pBind]="ptm('toggleicon')"></span>
+                } @else {
+                    <svg data-p-icon="chevron-up" [class]="cx('toggleicon')" [pBind]="ptm('toggleicon')" [attr.aria-hidden]="true" />
+                }
+            } @else {
+                @if (pcAccordion.expandIcon()) {
+                    <span [class]="cn(cx('toggleicon'), pcAccordion.expandIcon())" [attr.aria-hidden]="true" [pBind]="ptm('toggleicon')"></span>
+                } @else {
+                    <svg data-p-icon="chevron-down" [attr.aria-hidden]="true" [pBind]="ptm('toggleicon')" />
+                }
+            }
         }
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ChevronDownIcon, selector: "[data-p-icon=\"chevron-down\"]" }, { kind: "component", type: ChevronUpIcon, selector: "[data-p-icon=\"chevron-up\"]" }, { kind: "ngmodule", type: BindModule }, { kind: "directive", type: i1.Bind, selector: "[pBind]", inputs: ["pBind"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ChevronDown, selector: "svg[data-p-icon=\"chevron-down\"]" }, { kind: "component", type: ChevronUp, selector: "svg[data-p-icon=\"chevron-up\"]" }, { kind: "ngmodule", type: BindModule }, { kind: "directive", type: i1.Bind, selector: "[pBind]", inputs: ["pBind"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: AccordionHeader, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: AccordionHeader, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-accordion-header, p-accordionheader',
-                    imports: [CommonModule, ChevronDownIcon, ChevronUpIcon, BindModule],
+                    imports: [NgTemplateOutlet, ChevronDown, ChevronUp, BindModule],
                     standalone: true,
                     template: `
         <ng-content />
-        @if (toggleicon) {
-            <ng-template *ngTemplateOutlet="toggleicon; context: { active: active() }"></ng-template>
+        @if (toggleicon()) {
+            <ng-container *ngTemplateOutlet="toggleicon(); context: toggleIconContext()"></ng-container>
         } @else {
-            <ng-container *ngIf="active()">
-                <span *ngIf="pcAccordion.collapseIcon" [class]="cn(cx('toggleicon'), pcAccordion.collapseIcon)" [attr.aria-hidden]="true" [pBind]="ptm('toggleicon')"></span>
-                <svg data-p-icon="chevron-up" *ngIf="!pcAccordion.collapseIcon" [class]="cx('toggleicon')" [pBind]="ptm('toggleicon')" [attr.aria-hidden]="true" />
-            </ng-container>
-            <ng-container *ngIf="!active()">
-                <span *ngIf="pcAccordion.expandIcon" [class]="cn(cx('toggleicon'), pcAccordion.expandIcon)" [attr.aria-hidden]="true" [pBind]="ptm('toggleicon')"></span>
-                <svg data-p-icon="chevron-down" *ngIf="!pcAccordion.expandIcon" [attr.aria-hidden]="true" [pBind]="ptm('toggleicon')" />
-            </ng-container>
+            @if (active()) {
+                @if (pcAccordion.collapseIcon()) {
+                    <span [class]="cn(cx('toggleicon'), pcAccordion.collapseIcon())" [attr.aria-hidden]="true" [pBind]="ptm('toggleicon')"></span>
+                } @else {
+                    <svg data-p-icon="chevron-up" [class]="cx('toggleicon')" [pBind]="ptm('toggleicon')" [attr.aria-hidden]="true" />
+                }
+            } @else {
+                @if (pcAccordion.expandIcon()) {
+                    <span [class]="cn(cx('toggleicon'), pcAccordion.expandIcon())" [attr.aria-hidden]="true" [pBind]="ptm('toggleicon')"></span>
+                } @else {
+                    <svg data-p-icon="chevron-down" [attr.aria-hidden]="true" [pBind]="ptm('toggleicon')" />
+                }
+            }
         }
     `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -335,19 +370,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                         '[attr.aria-controls]': 'ariaControls()',
                         '[attr.aria-disabled]': 'disabled()',
                         '[attr.role]': '"button"',
-                        '[attr.tabindex]': 'disabled()?"-1":"0"',
+                        '[attr.tabindex]': 'hostTabindex()',
                         '[attr.data-p-active]': 'active()',
                         '[attr.data-p-disabled]': 'disabled()',
                         '[style.user-select]': '"none"',
-                        '[attr.data-p]': 'dataP'
+                        '[attr.data-p]': 'dataP()'
                     },
                     hostDirectives: [Ripple, Bind],
                     providers: [AccordionStyle, { provide: ACCORDION_HEADER_INSTANCE, useExisting: AccordionHeader }, { provide: PARENT_INSTANCE, useExisting: AccordionHeader }]
                 }]
-        }], propDecorators: { toggleicon: [{
-                type: ContentChild,
-                args: ['toggleicon']
-            }], onClick: [{
+        }], propDecorators: { toggleicon: [{ type: i0.ContentChild, args: ['toggleicon', { ...{ descendants: false }, isSignal: true }] }], onClick: [{
                 type: HostListener,
                 args: ['click', ['$event']]
             }], onFocus: [{
@@ -357,65 +389,63 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                 type: HostListener,
                 args: ['keydown', ['$event']]
             }] } });
-class AccordionContent extends BaseComponent {
-    $pcAccordionContent = inject(ACCORDION_CONTENT_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;
+
+/**
+ * AccordionPanel is a helper component for Accordion component.
+ * @group Components
+ */
+class AccordionPanel extends BaseComponent {
+    $pcAccordionPanel = inject(ACCORDION_PANEL_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;
     bindDirectiveInstance = inject(Bind, { self: true });
-    componentName = 'AccordionContent';
+    componentName = 'AccordionPanel';
     onAfterViewChecked() {
         this.bindDirectiveInstance.setAttrs(this.ptm('root'));
     }
-    pcAccordion = inject(forwardRef(() => Accordion));
-    pcAccordionPanel = inject(forwardRef(() => AccordionPanel));
-    active = computed(() => this.pcAccordionPanel.active(), ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
-    ariaLabelledby = computed(() => `${this.pcAccordion.id()}_accordionheader_${this.pcAccordionPanel.value()}`, ...(ngDevMode ? [{ debugName: "ariaLabelledby" }] : /* istanbul ignore next */ []));
-    id = computed(() => `${this.pcAccordion.id()}_accordioncontent_${this.pcAccordionPanel.value()}`, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    pcAccordion = inject(ACCORDION_INSTANCE);
+    /**
+     * Value of the active tab.
+     * @defaultValue undefined
+     * @group Props
+     */
+    value = model(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /**
+     * Disables the tab when enabled.
+     * @defaultValue false
+     * @group Props
+     */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: (v) => transformToBoolean(v) });
+    active = computed(() => (this.pcAccordion.multiple() ? this.valueEquals(this.pcAccordion.value(), this.value()) : this.pcAccordion.value() === this.value()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+    valueEquals(currentValue, value) {
+        if (Array.isArray(currentValue) && (typeof value === 'string' || typeof value === 'number')) {
+            return currentValue.includes(value);
+        }
+        return currentValue === value;
+    }
     _componentStyle = inject(AccordionStyle);
-    ptParams = computed(() => ({ context: this.active() }), ...(ngDevMode ? [{ debugName: "ptParams" }] : /* istanbul ignore next */ []));
-    computedMotionOptions = computed(() => {
-        return {
-            ...this.ptm('motion', this.ptParams()),
-            ...this.pcAccordion.computedMotionOptions()
-        };
-    }, ...(ngDevMode ? [{ debugName: "computedMotionOptions" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: AccordionContent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.13", type: AccordionContent, isStandalone: true, selector: "p-accordion-content, p-accordioncontent", host: { properties: { "class": "cx(\"contentContainer\")", "attr.id": "id()", "attr.role": "\"region\"", "attr.data-p-active": "active()", "attr.aria-labelledby": "ariaLabelledby()" } }, providers: [AccordionStyle, { provide: ACCORDION_CONTENT_INSTANCE, useExisting: AccordionContent }, { provide: PARENT_INSTANCE, useExisting: AccordionContent }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `
-        <p-motion [visible]="active()" name="p-collapsible" hideStrategy="visibility" [mountOnEnter]="false" [unmountOnLeave]="false" [options]="computedMotionOptions()">
-            <div [pBind]="ptm('contentWrapper', ptParams())" [class]="cx('contentWrapper')">
-                <div [pBind]="ptm('content', ptParams())" [class]="cx('content')">
-                    <ng-content />
-                </div>
-            </div>
-        </p-motion>
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: BindModule }, { kind: "directive", type: i1.Bind, selector: "[pBind]", inputs: ["pBind"] }, { kind: "ngmodule", type: MotionModule }, { kind: "component", type: i4.Motion, selector: "p-motion", inputs: ["visible", "mountOnEnter", "unmountOnLeave", "name", "type", "safe", "disabled", "appear", "enter", "leave", "duration", "hideStrategy", "enterFromClass", "enterToClass", "enterActiveClass", "leaveFromClass", "leaveToClass", "leaveActiveClass", "options"], outputs: ["onBeforeEnter", "onEnter", "onAfterEnter", "onEnterCancelled", "onBeforeLeave", "onLeave", "onAfterLeave", "onLeaveCancelled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: AccordionPanel, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", 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-p-disabled": "disabled()", "attr.data-p-active": "active()" } }, providers: [AccordionStyle, { provide: ACCORDION_PANEL_INSTANCE, useExisting: AccordionPanel }, { provide: PARENT_INSTANCE, useExisting: AccordionPanel }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `<ng-content />`, isInline: true, dependencies: [{ kind: "ngmodule", type: BindModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: AccordionContent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: AccordionPanel, decorators: [{
             type: Component,
             args: [{
-                    selector: 'p-accordion-content, p-accordioncontent',
-                    imports: [CommonModule, BindModule, MotionModule],
+                    selector: 'p-accordion-panel, p-accordionpanel',
+                    imports: [BindModule],
                     standalone: true,
-                    template: `
-        <p-motion [visible]="active()" name="p-collapsible" hideStrategy="visibility" [mountOnEnter]="false" [unmountOnLeave]="false" [options]="computedMotionOptions()">
-            <div [pBind]="ptm('contentWrapper', ptParams())" [class]="cx('contentWrapper')">
-                <div [pBind]="ptm('content', ptParams())" [class]="cx('content')">
-                    <ng-content />
-                </div>
-            </div>
-        </p-motion>
-    `,
+                    template: `<ng-content />`,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
                     host: {
-                        '[class]': 'cx("contentContainer")',
-                        '[attr.id]': 'id()',
-                        '[attr.role]': '"region"',
-                        '[attr.data-p-active]': 'active()',
-                        '[attr.aria-labelledby]': 'ariaLabelledby()'
+                        '[class]': 'cx("panel")',
+                        '[attr.data-p-disabled]': 'disabled()',
+                        '[attr.data-p-active]': 'active()'
                     },
                     hostDirectives: [Bind],
-                    providers: [AccordionStyle, { provide: ACCORDION_CONTENT_INSTANCE, useExisting: AccordionContent }, { provide: PARENT_INSTANCE, useExisting: AccordionContent }]
+                    providers: [AccordionStyle, { provide: ACCORDION_PANEL_INSTANCE, useExisting: AccordionPanel }, { provide: PARENT_INSTANCE, useExisting: AccordionPanel }]
                 }]
-        }] });
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+
 /**
  * Accordion groups a collection of contents in tabs.
  * @group Components
@@ -432,65 +462,59 @@ class Accordion extends BaseComponent {
      * @defaultValue undefined
      * @group Props
      */
-    value = model(undefined, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    value = model(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     /**
      * When enabled, multiple tabs can be activated at the same time.
      * @defaultValue false
      * @group Props
      */
     multiple = input(false, { ...(ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {}), transform: (v) => transformToBoolean(v) });
-    /**
-     * Class of the element.
-     * @deprecated since v20.0.0, use `class` instead.
-     * @group Props
-     */
-    styleClass;
     /**
      * Icon of a collapsed tab.
      * @group Props
      */
-    expandIcon;
+    expandIcon = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "expandIcon" }] : /* istanbul ignore next */ []));
     /**
      * Icon of an expanded tab.
      * @group Props
      */
-    collapseIcon;
+    collapseIcon = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "collapseIcon" }] : /* istanbul ignore next */ []));
     /**
      * When enabled, the focused tab is activated.
      * @defaultValue false
      * @group Props
      */
     selectOnFocus = input(false, { ...(ngDevMode ? { debugName: "selectOnFocus" } : /* istanbul ignore next */ {}), transform: (v) => transformToBoolean(v) });
-    /**
-     * Transition options of the animation.
-     * @group Props
-     * @deprecated since v21.0.0, use `motionOptions` instead.
-     */
-    transitionOptions = '400ms cubic-bezier(0.86, 0, 0.07, 1)';
     /**
      * The motion options.
      * @group Props
      */
-    motionOptions = input(undefined, ...(ngDevMode ? [{ debugName: "motionOptions" }] : /* istanbul ignore next */ []));
+    motionOptions = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "motionOptions" }] : /* istanbul ignore next */ []));
     computedMotionOptions = computed(() => {
         return {
             ...this.ptm('motion'),
             ...this.motionOptions()
         };
-    }, ...(ngDevMode ? [{ debugName: "computedMotionOptions" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedMotionOptions" }] : /* istanbul ignore next */ []));
     /**
      * Callback to invoke when an active tab is collapsed by clicking on the header.
      * @param {AccordionTabCloseEvent} event - Custom tab close event.
      * @group Emits
      */
-    onClose = new EventEmitter();
+    onClose = output();
     /**
      * Callback to invoke when a tab gets expanded.
      * @param {AccordionTabOpenEvent} event - Custom tab open event.
      * @group Emits
      */
-    onOpen = new EventEmitter();
-    id = signal(uuid('pn_id_'), ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    onOpen = output();
+    id = signal(uuid('pn_id_'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
     _componentStyle = inject(AccordionStyle);
     onKeydown(event) {
         switch (event.code) {
@@ -513,12 +537,12 @@ class Accordion extends BaseComponent {
         }
     }
     onTabArrowDownKey(event) {
-        const nextHeaderAction = this.findNextHeaderAction(event.target.parentElement);
+        const nextHeaderAction = this.findNextHeaderAction(event.target?.parentElement ?? null);
         nextHeaderAction ? this.changeFocusedTab(nextHeaderAction) : this.onTabHomeKey(event);
         event.preventDefault();
     }
     onTabArrowUpKey(event) {
-        const prevHeaderAction = this.findPrevHeaderAction(event.target.parentElement);
+        const prevHeaderAction = this.findPrevHeaderAction(event.target?.parentElement ?? null);
         prevHeaderAction ? this.changeFocusedTab(prevHeaderAction) : this.onTabEndKey(event);
         event.preventDefault();
     }
@@ -533,14 +557,24 @@ class Accordion extends BaseComponent {
         }
     }
     findNextHeaderAction(tabElement, selfCheck = false) {
-        const nextTabElement = selfCheck ? tabElement : tabElement.nextElementSibling;
-        const headerElement = findSingle(nextTabElement, '[data-pc-section="accordionheader"]');
-        return headerElement ? (getAttribute(headerElement, 'data-p-disabled') ? this.findNextHeaderAction(headerElement.parentElement) : findSingle(headerElement.parentElement, '[data-pc-section="accordionheader"]')) : null;
+        const nextTabElement = selfCheck ? tabElement : tabElement?.nextElementSibling;
+        const headerElement = nextTabElement ? findSingle(nextTabElement, '[data-pc-section="accordionheader"]') : null;
+        if (!headerElement)
+            return null;
+        if (getAttribute(headerElement, 'data-p-disabled')) {
+            return this.findNextHeaderAction(headerElement.parentElement);
+        }
+        return findSingle(headerElement.parentElement, '[data-pc-section="accordionheader"]');
     }
     findPrevHeaderAction(tabElement, selfCheck = false) {
-        const prevTabElement = selfCheck ? tabElement : tabElement.previousElementSibling;
-        const headerElement = findSingle(prevTabElement, '[data-pc-section="accordionheader"]');
-        return headerElement ? (getAttribute(headerElement, 'data-p-disabled') ? this.findPrevHeaderAction(headerElement.parentElement) : findSingle(headerElement.parentElement, '[data-pc-section="accordionheader"]')) : null;
+        const prevTabElement = selfCheck ? tabElement : tabElement?.previousElementSibling;
+        const headerElement = prevTabElement ? findSingle(prevTabElement, '[data-pc-section="accordionheader"]') : null;
+        if (!headerElement)
+            return null;
+        if (getAttribute(headerElement, 'data-p-disabled')) {
+            return this.findPrevHeaderAction(headerElement.parentElement);
+        }
+        return findSingle(headerElement.parentElement, '[data-pc-section="accordionheader"]');
     }
     findFirstHeaderAction() {
         const firstEl = this.el.nativeElement.firstElementChild;
@@ -580,45 +614,33 @@ class Accordion extends BaseComponent {
             }
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: Accordion, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", 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 }, motionOptions: { classPropertyName: "motionOptions", publicName: "motionOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", onClose: "onClose", onOpen: "onOpen" }, host: { listeners: { "keydown": "onKeydown($event)" }, properties: { "class": "cn(cx('root'), styleClass)" } }, providers: [AccordionStyle, { provide: ACCORDION_INSTANCE, useExisting: Accordion }, { provide: PARENT_INSTANCE, useExisting: Accordion }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: ` <ng-content />`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: SharedModule }, { kind: "ngmodule", type: BindModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: Accordion, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", 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 }, expandIcon: { classPropertyName: "expandIcon", publicName: "expandIcon", isSignal: true, isRequired: false, transformFunction: null }, collapseIcon: { classPropertyName: "collapseIcon", publicName: "collapseIcon", isSignal: true, isRequired: false, transformFunction: null }, selectOnFocus: { classPropertyName: "selectOnFocus", publicName: "selectOnFocus", isSignal: true, isRequired: false, transformFunction: null }, motionOptions: { classPropertyName: "motionOptions", publicName: "motionOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", onClose: "onClose", onOpen: "onOpen" }, host: { listeners: { "keydown": "onKeydown($event)" }, properties: { "class": "cx('root')" } }, providers: [AccordionStyle, { provide: ACCORDION_INSTANCE, useExisting: Accordion }, { provide: PARENT_INSTANCE, useExisting: Accordion }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: ` <ng-content />`, isInline: true, dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "ngmodule", type: BindModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: Accordion, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: Accordion, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-accordion',
                     standalone: true,
-                    imports: [CommonModule, SharedModule, BindModule],
+                    imports: [SharedModule, BindModule],
                     template: ` <ng-content />`,
                     host: {
-                        '[class]': "cn(cx('root'), styleClass)"
+                        '[class]': "cx('root')"
                     },
                     hostDirectives: [Bind],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     providers: [AccordionStyle, { provide: ACCORDION_INSTANCE, useExisting: Accordion }, { provide: PARENT_INSTANCE, useExisting: Accordion }]
                 }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], styleClass: [{
-                type: Input
-            }], expandIcon: [{
-                type: Input
-            }], collapseIcon: [{
-                type: Input
-            }], selectOnFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectOnFocus", required: false }] }], transitionOptions: [{
-                type: Input
-            }], motionOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "motionOptions", required: false }] }], onClose: [{
-                type: Output
-            }], onOpen: [{
-                type: Output
-            }], onKeydown: [{
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], expandIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandIcon", required: false }] }], collapseIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapseIcon", required: false }] }], selectOnFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectOnFocus", required: false }] }], motionOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "motionOptions", required: false }] }], onClose: [{ type: i0.Output, args: ["onClose"] }], onOpen: [{ type: i0.Output, args: ["onOpen"] }], onKeydown: [{
                 type: HostListener,
                 args: ['keydown', ['$event']]
             }] } });
 class AccordionModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: AccordionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.13", ngImport: i0, type: AccordionModule, imports: [Accordion, SharedModule, AccordionPanel, AccordionHeader, AccordionContent, BindModule], exports: [Accordion, SharedModule, AccordionPanel, AccordionHeader, AccordionContent, BindModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: AccordionModule, imports: [Accordion, SharedModule, AccordionPanel, AccordionHeader, AccordionContent, BindModule, SharedModule, BindModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: AccordionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.5", ngImport: i0, type: AccordionModule, imports: [Accordion, SharedModule, AccordionPanel, AccordionHeader, AccordionContent, BindModule], exports: [Accordion, SharedModule, AccordionPanel, AccordionHeader, AccordionContent, BindModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: AccordionModule, imports: [Accordion, SharedModule, AccordionPanel, AccordionHeader, AccordionContent, BindModule, SharedModule, BindModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: AccordionModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: AccordionModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [Accordion, SharedModule, AccordionPanel, AccordionHeader, AccordionContent, BindModule],