import * as i0 from '@angular/core';
import * as i1 from '@angular/cdk/accordion';
import { CdkAccordionItem } from '@angular/cdk/accordion';
import * as i2 from '@eui/components/shared';
import { BaseStatesDirective } from '@eui/components/shared';
/**
* @description
* Individual accordion item component that can be expanded or collapsed within an eui-accordion container.
* Provides a collapsible panel with header and content sections, supporting smooth collapse animations.
* Uses Angular CDK's accordion item functionality for managing expansion state and accessibility.
* Supports size variants (S, M, L) and disabled state through BaseStatesDirective.
* Emits toggleItem event when expansion state changes, allowing parent components to track state.
*
* @usageNotes
* ### Basic usage
* ```html
*
*
* Header Text
* Panel content goes here
*
*
* ```
*
* ### With initial expanded state and size variant
* ```html
*
* Small Item
* Content
*
* ```
*
* ### Disabled item
* ```html
*
* Disabled Item
* Content
*
* ```
*
* ### Accessibility
* - Header is keyboard accessible with Enter/Space to toggle expansion
* - ARIA attributes (aria-expanded, aria-controls) automatically managed by CDK
* - Screen readers announce expansion state and content visibility changes
* - Focus remains on header after toggling for consistent keyboard navigation
* - Disabled items are not focusable and announced as disabled to screen readers
*
* ### Notes
* - Must be used within an eui-accordion parent component
* - Requires eui-accordion-item-header directive for header content
* - Collapse animation is applied automatically on state changes
* - Size variants (euiSizeS, euiSizeM, euiSizeL) affect header and content spacing
* - toggleItem event emits boolean indicating current expanded state (true = expanded)
* - isExpanded input can be used for programmatic control of expansion state
*/
declare class EuiAccordionItemComponent {
/**
* @description
* Computes and returns the CSS classes for the component based on its current state.
*
* @returns {string} Space-separated string of CSS class names
*/
get cssClasses(): string;
/**
* Event emitted when the accordion item is toggled
*/
readonly toggleItem: i0.OutputEmitterRef;
/** @description Instance of BaseStatesDirective for managing component states */
protected baseStatesDirective: BaseStatesDirective;
protected accItem: CdkAccordionItem;
/**
* Handles the toggle event for expanding/collapsing the accordion item
* Prevents event propagation to avoid interfering with parent handlers
*
* @param event - The toggle event
*/
onToggle(event: Event): void;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵcmp: i0.ɵɵComponentDeclaration;
}
/**
* @description
* Directive for marking and styling the header content of an accordion item.
* Applied to content that should appear in the clickable header section of the accordion panel.
* The header acts as the toggle trigger for expanding/collapsing the accordion item.
* Content projected with this directive is displayed with appropriate styling and interactive behavior.
*
* @usageNotes
* ```html
*
*
* Section Title
*
* Panel content
*
* ```
*
* ### Accessibility
* - Header content is automatically wrapped in an interactive button element
* - Keyboard accessible with Enter/Space keys for toggling
* - Screen readers announce the header text and expansion state
*
* ### Notes
* - Required for proper accordion item structure
* - Must be a direct child of eui-accordion-item
* - Only one header directive should be used per accordion item
* - Header content can include text, icons, or other inline elements
*/
declare class EuiAccordionItemHeaderDirective {
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵdir: i0.ɵɵDirectiveDeclaration;
}
/**
* @description
* Accordion container component that manages a collection of expandable panel items.
* Provides collapsible content sections with automatic expansion state coordination across child items.
* Supports single or multi-expansion modes to control whether multiple panels can be open simultaneously.
* Built on Angular CDK Accordion for robust expansion state management and accessibility.
* Content is projected via ng-content, expecting eui-accordion-item children for proper functionality.
* Typically used for organizing related content in expandable sections like FAQs, settings panels, or navigation menus.
*
* @usageNotes
* #### Single expansion mode (default)
* ```html
*
*
* Section 1
* Content for section 1
*
*
* Section 2
* Content for section 2
*
*
* ```
*
* #### Multi-expansion mode
* ```html
*
*
* Item 1
* Content 1
*
*
* ```
*
* ### Accessibility
* - Uses Angular CDK Accordion which provides built-in ARIA attributes (aria-expanded, aria-controls)
* - Each accordion item header is keyboard accessible and can be toggled with Enter/Space
* - Screen readers announce expansion state changes automatically
* - Focus management handled by CDK for keyboard navigation between items
*
* ### Notes
* - In single-expansion mode (default), opening one item automatically closes others
* - Set `isMulti` to allow multiple items to be expanded simultaneously
* - Must contain eui-accordion-item children for proper functionality
* - Expansion state is managed internally by Angular CDK Accordion
* - Use toggleItem event on items to track expansion state changes
*/
declare class EuiAccordionComponent {
/**
* @description
* Computes and returns the CSS classes for the component based on its current state.
*
* @returns {string} Space-separated string of CSS class names
*/
cssClasses(): string;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵcmp: i0.ɵɵComponentDeclaration;
}
declare const EUI_ACCORDION: readonly [typeof EuiAccordionComponent, typeof EuiAccordionItemComponent, typeof EuiAccordionItemHeaderDirective];
export { EUI_ACCORDION, EuiAccordionComponent, EuiAccordionItemComponent, EuiAccordionItemHeaderDirective };
//# sourceMappingURL=eui-components-eui-accordion.d.ts.map