import * as i0 from '@angular/core'; import { EventEmitter, AfterContentInit, QueryList } from '@angular/core'; /** * @description * Individual toggle item component within eui-toggle-group for segmented control interfaces. * Represents a single selectable option in a group of mutually exclusive or multi-select choices. * Manages checked state and emits selection events for parent toggle group coordination. * Provides button-based interaction with consistent styling and accessibility. * Must be used as a direct child of eui-toggle-group to participate in group selection behavior. * * @usageNotes * ### Basic Usage * ```html * * * * Option 1 * * * Option 2 * * * ``` * * ### Accessibility * - Button element provides native keyboard support * - Clear, descriptive text content is essential * - Checked state is visually distinct * * ### Notes * - Must be direct child of eui-toggle-group * - Requires unique id for state management * - Selection behavior controlled by parent toggle group */ declare class EuiToggleGroupItemComponent { get cssClasses(): string; /** * Unique identifier for the toggle item. * Used for tracking selection state and programmatic item management. */ id: string; /** * Controls the checked state of the toggle item. * When true, applies checked styling and indicates selection. * Managed by parent toggle group for single-select mode or individually for multi-select. * @default false */ isChecked: boolean; /** * Emitted when the toggle item is clicked. * Payload: reference to the clicked EuiToggleGroupItemComponent instance. * Allows parent toggle group to coordinate selection state across items. */ itemClick: EventEmitter; protected buttonClick(): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; static ngAcceptInputType_isChecked: unknown; } /** * @description * Component for grouping multiple buttons together with optional checkbox or radio button behavior. * Segmented control component that groups multiple toggle items into a unified selection interface. * Supports both single-select (radio button behavior) and multi-select (checkbox behavior) modes. * Manages selection state coordination across child toggle items automatically. * Provides fluid width option for responsive layouts where items expand to fill available space. * Commonly used for view switchers, filter options, or any mutually exclusive or multi-select choice sets. * * @usageNotes * ### Basic Usage * ```html * * * * List View * * * Grid View * * * * * * Bold * Italic * Underline * * * * * Option 1 * Option 2 * * ``` * * ### Accessibility * - Use role="group" with aria-label describing the group purpose * - Each item should have clear, descriptive text * - Keyboard navigation (Tab, Arrow keys) should work * - Announce selection changes to screen readers * * ### Notes * - Single-select mode (default): only one item can be checked at a time * - Multi-select mode (isMultiple="true"): multiple items can be checked * - Fluid mode (isFluid="true"): items expand to fill container width * - Each item must have unique id for proper state management */ declare class EuiToggleGroupComponent implements AfterContentInit { /** CSS classes applied to the host element */ get cssClasses(): string; /** * Whether the several items can be checked * @default false */ isMultiple: boolean; isFluid: boolean; /** * Event emitted when any item in the group is clicked * Emits the clicked EuiToggleGroupItemComponent instance */ itemClick: EventEmitter; /** * Query list of all EuiButtonComponent instances within the group */ items: QueryList; /** * Initializes button click subscriptions after content is initialized */ ngAfterContentInit(): void; private handleInnerButtonClick; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; static ngAcceptInputType_isMultiple: unknown; static ngAcceptInputType_isFluid: unknown; } declare const EUI_TOGGLE_GROUP: readonly [typeof EuiToggleGroupComponent, typeof EuiToggleGroupItemComponent]; export { EUI_TOGGLE_GROUP, EuiToggleGroupComponent, EuiToggleGroupItemComponent }; //# sourceMappingURL=eui-components-eui-toggle-group.d.ts.map