import * as _angular_core from '@angular/core'; import { InputSignal, TemplateRef, OnInit, OnDestroy, OnChanges, AfterViewInit, DoCheck, Signal, WritableSignal, QueryList, ElementRef, SimpleChanges } from '@angular/core'; import * as i1 from '@eui/components/shared'; import { ControlValueAccessor, FormControl, AbstractControl } from '@angular/forms'; import { BehaviorSubject } from 'rxjs'; import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling'; import { CdkDragDrop, CdkDragStart, CdkDragRelease } from '@angular/cdk/drag-drop'; import { EuiChipTooltip, EuiChip } from '@eui/components/eui-chip'; import { EuiTemplateDirective } from '@eui/components/directives'; /** * @description * Option group component for organizing `eui-autocomplete` options into labeled sections. * Used internally by `eui-autocomplete` when groupBy property is configured on the parent. * Provides semantic grouping with ARIA optgroup role for accessibility. * Automatically renders group headers based on the groupBy property path. * Content is projected via ng-content to contain individual `eui-autocomplete-option` components. * Not intended for direct use in templates - managed internally by eui-autocomplete. * * @usageNotes * This component is used internally when groupBy is configured on eui-autocomplete: * ```html * * * ``` * * ```ts * countries: EuiAutoCompleteItem[] = [ * { id: 1, label: 'China', metadata: { continent: 'Asia' } }, * { id: 2, label: 'Japan', metadata: { continent: 'Asia' } }, * { id: 3, label: 'France', metadata: { continent: 'Europe' } }, * { id: 4, label: 'Germany', metadata: { continent: 'Europe' } } * ]; * // Results in two groups: "Asia" and "Europe" * ``` * * ### Accessibility * - Uses role="optgroup" for proper ARIA semantics * - Group label is announced by screen readers before grouped options * - Provides clear visual and semantic separation between option categories * - Keyboard navigation flows naturally through grouped options * * ### Notes * - Automatically created by parent autocomplete when groupBy is set * - groupBy supports nested property paths using dot notation * - Groups are sorted alphabetically by default * - Empty groups are automatically filtered out * - Group labels are extracted from the data structure, not manually specified * - Component is automatically instantiated by parent autocomplete */ declare class EuiAutocompleteOptionGroupComponent { /** * ARIA role for the host element to ensure proper accessibility. * @default 'optgroup' */ role: string; /** * @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; /** * Text label displayed as the group header. * Identifies the category or section name for the grouped options. * Required for proper group identification. */ label: _angular_core.InputSignal; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * @description * Component used internally by `eui-autocomplete` to display individual options in the dropdown panel. * Represents a single selectable item with support for active, disabled, and grouped states. * Automatically rendered by the parent autocomplete component based on autocompleteData. * Supports visual variants through BaseStatesDirective for custom styling. * Not intended for direct use in templates - managed internally by eui-autocomplete. * * ### Accessibility * - Uses role="option" for proper ARIA semantics within listbox * - Active state is visually indicated and announced to screen readers * - Disabled options are not selectable and announced as disabled * - Keyboard navigation automatically highlights active option * * ### Notes * - isActive indicates the currently focused/highlighted option during keyboard navigation * - isDisabled prevents selection and applies disabled styling * - isGroupItem applies special styling when option is within a group * - Visual variants (euiVariant) can be applied for custom option styling * - Component is automatically instantiated by parent autocomplete */ declare class EuiAutocompleteOptionComponent { /** * ARIA role for the host element to ensure proper accessibility. * @default 'option' */ role: string; /** * Sets aria-selected to 'true' when the option is the active (visually highlighted) descendant. */ get ariaSelected(): string; /** * @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; /** * Whether the option is active in the panel. * * @default false */ isActive: _angular_core.InputSignalWithTransform; /** * Whether the option is disabled in the panel. * * @default false */ isDisabled: _angular_core.InputSignalWithTransform; /** * Whether the option is displayed inside a group. * * @default false */ isGroupItem: _angular_core.InputSignalWithTransform; private baseStatesDirective; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } interface EuiAutoCompleteItem { id?: string | number; euiInternalId?: string; label: string; typeClass?: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'danger' | 'accent'; variant?: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'danger' | 'accent'; sizeClass?: 'euiSizeS' | 'euiSizeM' | 'euiSizeL' | 'euiSizeXL' | 'euiSize2XL'; iconClass?: string; isRemovable?: boolean; isOutline?: boolean; isRounded?: boolean; dragAndDropSource?: string; isDisabled?: boolean; iconSvgName?: string; tooltip?: EuiChipTooltip; metadata?: METADATA; [id: string]: any; } declare class EuiAutocompletePanelComponent { cssClass: string; virtualScrolling: CdkVirtualScrollViewport; isOpen: InputSignal; itemSize: InputSignal; cdkVirtualScrollViewport: InputSignal; groupBy: InputSignal; distinctOptionGroups: InputSignal; groupedOptions: InputSignal | undefined>; autocompleteOptions: InputSignal; selectedOptionIndex: InputSignal; autocompleteOptionTemplate: InputSignal | undefined>; autocompleteOptGroupTemplate: InputSignal | undefined>; optionSelected: _angular_core.OutputEmitterRef>; trackByFn(index: number, item: EuiAutoCompleteItem): string | number; onOptionSelected(option: EuiAutoCompleteItem): void; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } interface EuiChipDragDrop { type: string; chip: EuiChip; chips: EuiChip[]; } /** * @description * `eui-autocomplete` component with dropdown suggestions, optional chip display for multiple selections, and comprehensive keyboard navigation. * Provides type-ahead functionality with filtering, grouping, sorting, and async data support. * Implements ControlValueAccessor for Angular forms integration with validation support. * `eui-autocomplete` supports single or multiple selection modes with chips for visual representation of selected items. * Built on Angular CDK Overlay for positioning and virtual scrolling for performance with large datasets. * `eui-autocomplete` includes accessibility features with ARIA attributes, live announcer, and keyboard navigation. * * ### Accessibility * - Uses ARIA live announcer to announce option navigation for screen readers * - Keyboard navigation: Arrow Up/Down to navigate options, Enter to select, Escape to close * - Tab key closes panel and optionally adds chip (with isAddOnBlur) * - Backspace removes last chip when input is empty (chipsPosition='inside') * - aria-required attribute automatically set when used with Validators.required * - Each option has role="option" for proper screen reader identification * - Panel positioning adjusts automatically to stay within viewport * * ### Notes * - Each EuiAutoCompleteItem must have unique `id` and `label` properties * - Use hasChips for multiple selection mode, omit for single selection * - chipsPosition options: 'top' (default), 'bottom', 'inside' (chips within input) * - matching options: 'contains' (default) or 'startWith' for filtering behavior * - Set isForceSelection to require selection from available options only * - isFreeValueAllowed (default true) allows custom values not in the list * - Virtual scrolling automatically handles large datasets efficiently * - groupBy accepts nested property paths (e.g., 'metadata.category.name') * - Use isAsync with dynamic data loading, update autocompleteData when ready * - Chips can be drag-and-dropped when isChipsDragAndDrop is enabled * - Panel width defaults to input width, override with panelWidth property */ declare class EuiAutocompleteComponent implements OnInit, OnDestroy, ControlValueAccessor, OnChanges, AfterViewInit, DoCheck { /** * @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; /** * Sets the id on the text input. */ inputId: InputSignal; /** * Datas to be used in the autocomplete. */ autocompleteData: InputSignal; /** * Sets the maximum number of options that will be visible in the autocomplete panel. * * @default 5 */ visibleOptions: _angular_core.InputSignalWithTransform; /** * Sets the way the options should be retrieved. * * @default 'contains' */ matching: InputSignal<'startWith' | 'contains'>; /** * Sets the placeholder of the text input. */ placeholder: InputSignal; /** * Sets the options that will be selected by default. */ autocompleteDataSelected: EuiAutoCompleteItem[]; /** * Sets the sort criteria of the chips. * * @type {('ASC' | 'DESC')} * @default 'ASC' */ chipsSortOrder: InputSignal<'ASC' | 'DESC'>; /** * In combination with `isChipsSorted`. Sets the sort criteria of the options in the panel. * * @type {('ASC' | 'DESC')} * @default 'ASC' */ itemsSortOrder: InputSignal<'ASC' | 'DESC'>; /** * In Combination with `isItemsSorted`. Sets the position of the chips relative to the text input. * * @type {('top' | 'bottom' | 'inside')} * @default 'top'' */ /** * @deprecated The 'inside' option will be removed in eUI 23. Please, use 'top' as default. */ chipsPosition: InputSignal<'top' | 'bottom' | 'inside'>; /** * Sets a grouping among the options. */ groupBy: InputSignal; /** * In combination with `maxVisibleChipsCount`, sets the label of the 'more label' button, if not provided an arrow right icon will be displayed only. */ toggleLinkMoreLabel: InputSignal; /** * In combination with `maxVisibleChipsCount`, sets the label of the 'less label' button, if not provided an arrow left icon will be displayed only. */ toggleLinkLessLabel: InputSignal; /** * Accessible label for the text input. * When a visible `