import * as i0 from '@angular/core'; import { AfterContentInit, EventEmitter, QueryList } from '@angular/core'; import { EuiButtonComponent } from '@eui/components/eui-button'; /** * @description * `eui-button-group` component for organizing multiple buttons with optional checkbox or radio button selection behavior. * Provides visual grouping and automatic state management for single or multiple selection modes. * Supports three modes: standard (no selection), checkbox (multiple selection), and radio (single selection). * Automatically manages checked state across buttons and emits events on button interactions. * Content is projected via ng-content expecting `eui-button` children. * * @usageNotes * #### Standard button group (no selection behavior) * ```html * * * * * * ``` * * #### Radio button group (single selection) * ```html * * * * * * ``` * * #### Checkbox button group (multiple selection) * ```html * * * * * * ``` * * ```ts * onSelection(button: EuiButtonComponent): void { * console.log('Selected button:', button.id, 'Checked:', button.isChecked); * } * ``` * * ### Accessibility * - Buttons maintain native keyboard accessibility (Enter/Space) * - Visual grouping indicates related actions to all users * - Checked state is visually indicated and announced to screen readers * - Radio mode ensures only one selection, following standard radio button patterns * - Each button should have unique id for proper state management * - Consider adding aria-label to group for screen reader context * * ### Notes * - Must contain button[euiButton] children for proper functionality * - Three modes: standard (default), radio (isRadioButtons), checkbox (isCheckboxButtons) * - Standard mode: buttons act as regular action buttons without selection state * - Radio mode: only one button can be checked at a time, selecting one unchecks others * - Checkbox mode: multiple buttons can be checked independently * - Each button must have unique id attribute for state management * - isChecked property on buttons controls initial checked state * - buttonClick event emits after state is updated * - Buttons are visually grouped with connected borders * - Cannot enable both isRadioButtons and isCheckboxButtons simultaneously * - Use radio mode for mutually exclusive options (alignment, view mode) * - Use checkbox mode for independent toggles (text formatting, filters) */ declare class EuiButtonGroupComponent implements AfterContentInit { /** CSS classes applied to the host element */ get cssClasses(): string; /** * Enables checkbox behavior allowing multiple buttons to be selected simultaneously. * When true, buttons can be independently toggled on/off. * @default false */ isCheckboxButtons: boolean; /** * Enables radio button behavior allowing only one button to be selected at a time. * When true, selecting a button automatically deselects others in the group. * @default false */ isRadioButtons: boolean; /** * Emitted when any button in the group is clicked. * Payload: EuiButtonComponent - the clicked button instance * Triggered after button state is updated based on group configuration. */ buttonClick: EventEmitter; buttons: QueryList; ngAfterContentInit(): void; /** * Handles button click events based on group configuration * - For checkbox buttons: Toggles the clicked button's checked state * - For radio buttons: Sets the clicked button as checked and unchecks others * - Emits the buttonClick event with the clicked button instance * * @param button - The EuiButtonComponent that was clicked * @internal */ private handleInnerButtonClick; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; static ngAcceptInputType_isCheckboxButtons: unknown; static ngAcceptInputType_isRadioButtons: unknown; } declare const EUI_BUTTON_GROUP: readonly [typeof EuiButtonGroupComponent]; export { EUI_BUTTON_GROUP, EuiButtonGroupComponent }; //# sourceMappingURL=eui-components-eui-button-group.d.ts.map