import * as i0 from '@angular/core';
import { AfterContentInit, QueryList } from '@angular/core';
import { FocusableOption, Highlightable } from '@angular/cdk/a11y';
import * as i1 from '@eui/components/shared';
import { BaseStatesDirective } from '@eui/components/shared';
import { EuiIconSvgComponent } from '@eui/components/eui-icon';
import { EuiLabelComponent } from '@eui/components/eui-label';
import { EuiTemplateDirective, EuiArrowKeyNavigableDirective } from '@eui/components/directives';
/**
* @description
* Component that provides a navigable list implementation with keyboard interaction support.
* Works with Angular CDK's FocusKeyManager to enable keyboard navigation between list items.
*
* The component automatically manages focus between nested lists and supports rich content
* navigation. It can contain multiple EuiListItemComponents as children.
*
* @usageNotes
* ### Basic Usage
* ```html
*
*
First item
*
Second item
*
Third item
*
* ```
*
* ### With Nested Lists
* ```html
*
*
* Parent item
*
*
Child item
*
*
*
* ```
*
* ### Accessibility
* - Uses semantic `list` role
* - Keyboard navigation with Arrow keys
* - Enter key activates items
* - Focus management for nested lists
*
* ### Notes
* - Can be used as attribute `[euiList]` or element ``
* - Supports nested list structures
* - Automatically manages tabindex for keyboard navigation
*/
declare class EuiListComponent implements AfterContentInit {
/**
* CSS class binding that applies the 'eui-list' class to the host element.
* This class applies the basic styling for the list component.
*
* @returns {string} The CSS class to be applied to the host element
*/
get cssClasses(): string;
/**
* Binds the 'list' ARIA role to the host element for accessibility.
* This informs screen readers that this component functions as a list.
*/
role: string;
/**
* Binds the tabIndex attribute to the host element.
* Controls whether the list can receive keyboard focus.
* Set to '0' for top-level lists and '-1' for nested lists.
*/
tabIndex: string;
/**
* Collection of all list item components that are children of this list.
* Includes items from nested lists due to the 'descendants: true' option.
*/
items: QueryList;
private focusKeyManager;
/**
* Handles keyboard events for navigating the list.
* Supports Enter key for selection and arrow keys for navigation.
*
* @param {KeyboardEvent} event - The keyboard event to handle
*/
onKeydown(event: KeyboardEvent): void;
/**
* Initializes the component after content (list items) has been initialized.
* Sets up the FocusKeyManager for keyboard navigation and configures tabindex
* attributes based on nested list structure.
*/
ngAfterContentInit(): void;
/**
* Manages focus state of rich content navigation within list items.
* Handles the focus transition between list item elements and their navigable content.
* Called when right/left arrow keys are pressed on items with navigable content.
*/
checkRichContentFocusState(): void;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵcmp: i0.ɵɵComponentDeclaration;
}
/**
* @description
* Component that represents a single item within an EuiList.
* Implements FocusableOption and Highlightable for keyboard navigation and accessibility.
*
* This component is designed to work with the EuiListComponent as part of a navigable list.
* It supports various display states through the BaseStatesDirective, and can contain
* nested list components, icons, labels, and custom templates.
*
* @usageNotes
* ### Basic Usage
* ```html
*
*
Simple list item
*
Active item
*
Primary styled item
*
* ```
*
* ### With Icon and Label
* ```html
*
*
*
*
* ```
*
* ### Accessibility
* - Uses semantic `listitem` role
* - Keyboard focusable with proper tabindex management
* - Active state is visually and programmatically indicated
* - Supports arrow key navigation for rich content
*
* ### Notes
* - Can be used as attribute `[euiListItem]` or element ``
* - Supports variant styling via BaseStatesDirective
* - Active state managed by parent list's FocusKeyManager
*/
declare class EuiListItemComponent implements FocusableOption, Highlightable {
get cssClasses(): string;
role: string;
e2eAttr: string;
tabindex: string;
euiListComponent: QueryList;
euiIconSvgComponent: QueryList;
euiLabelComponent: QueryList;
templates: QueryList;
euiArrowKeyNavigableDirective: EuiArrowKeyNavigableDirective;
isActive: boolean;
baseStatesDirective: BaseStatesDirective;
private elementRef;
/**
* Sets focus on the list item element.
* Used by the FocusKeyManager to handle keyboard navigation within the list.
*/
focus(): void;
/**
* Programmatically triggers a click event on the list item element.
* Typically, invoked when the user presses Enter while the item is focused.
*/
click(): void;
/**
* Applies active styling to the list item.
* Called by the FocusKeyManager when this item becomes the active item in the list.
* Sets the isActive flag to true, which adds the 'eui-list-item--active' CSS class.
*/
setActiveStyles(): void;
/**
* Removes active styling from the list item.
* Called by the FocusKeyManager when another item becomes the active item.
* Sets the isActive flag to false, removing the 'eui-list-item--active' CSS class.
*/
setInactiveStyles(): void;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵcmp: i0.ɵɵComponentDeclaration;
static ngAcceptInputType_isActive: unknown;
}
declare const EUI_LIST: readonly [typeof EuiListComponent, typeof EuiListItemComponent];
export { EUI_LIST, EuiListComponent, EuiListItemComponent };
//# sourceMappingURL=eui-components-eui-list.d.ts.map