import * as i0 from '@angular/core';
import { EventEmitter, booleanAttribute, forwardRef, ContentChildren, Output, Input, HostBinding, ChangeDetectionStrategy, Component } 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
 * <eui-button-group>
 *   <button euiButton id="btn1">Action 1</button>
 *   <button euiButton id="btn2">Action 2</button>
 *   <button euiButton id="btn3">Action 3</button>
 * </eui-button-group>
 * ```
 *
 * #### Radio button group (single selection)
 * ```html
 * <eui-button-group [isRadioButtons]="true" (buttonClick)="onSelection($event)">
 *   <button euiButton id="left" [isChecked]="true">Left</button>
 *   <button euiButton id="center">Center</button>
 *   <button euiButton id="right">Right</button>
 * </eui-button-group>
 * ```
 *
 * #### Checkbox button group (multiple selection)
 * ```html
 * <eui-button-group [isCheckboxButtons]="true">
 *   <button euiButton id="bold">Bold</button>
 *   <button euiButton id="italic">Italic</button>
 *   <button euiButton id="underline">Underline</button>
 * </eui-button-group>
 * ```
 *
 * ```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)
 */
class EuiButtonGroupComponent {
    constructor() {
        /**
         * Enables checkbox behavior allowing multiple buttons to be selected simultaneously.
         * When true, buttons can be independently toggled on/off.
         * @default false
         */
        this.isCheckboxButtons = false;
        /**
         * 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
         */
        this.isRadioButtons = false;
        /**
         * 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.
         */
        this.buttonClick = new EventEmitter();
    }
    /** CSS classes applied to the host element */
    get cssClasses() {
        return 'eui-button-group';
    }
    ngAfterContentInit() {
        this.buttons.map((b) => {
            b.buttonClick.subscribe(() => {
                this.handleInnerButtonClick(b);
            });
            if (!b.isChecked)
                b.isChecked = false;
        });
    }
    /**
     * 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
     */
    handleInnerButtonClick(button) {
        try {
            if (button.isChecked && this.isCheckboxButtons) {
                button.isChecked = false;
            }
            else {
                if (this.isRadioButtons) {
                    this.buttons.find((b) => b.id === button.id).isChecked = true;
                    this.buttons.forEach((b) => {
                        if (b.id !== button.id) {
                            b.isChecked = false;
                        }
                    });
                }
                else if (this.isCheckboxButtons) {
                    this.buttons.find((b) => b.id === button.id).isChecked = true;
                }
                else if (!this.isCheckboxButtons && !this.isRadioButtons && !button.isChecked) {
                    button.isChecked = true;
                }
                else {
                    button.isChecked = false;
                }
            }
            this.buttonClick.emit(button);
        }
        catch (e) {
            console.log(e);
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: EuiButtonGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.2.1", type: EuiButtonGroupComponent, isStandalone: true, selector: "eui-button-group", inputs: { isCheckboxButtons: ["isCheckboxButtons", "isCheckboxButtons", booleanAttribute], isRadioButtons: ["isRadioButtons", "isRadioButtons", booleanAttribute] }, outputs: { buttonClick: "buttonClick" }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "buttons", predicate: i0.forwardRef(() => EuiButtonComponent) }], ngImport: i0, template: '<ng-content/>', isInline: true, styles: [".eui-21 :host.eui-button-group{position:relative;display:inline-flex;flex-wrap:wrap;vertical-align:middle;width:100%}.eui-21 :host.eui-button-group ::ng-deep .eui-button:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-21 :host.eui-button-group ::ng-deep>.eui-button:not(:first-child),.eui-21 :host.eui-button-group ::ng-deep>.eui-button-group:not(:first-child){margin-left:-1px}.eui-21 :host.eui-button-group ::ng-deep>.eui-button:not(:last-child),.eui-21 :host.eui-button-group ::ng-deep>.eui-button-group:not(:last-child)>.eui-button{border-bottom-right-radius:0;border-top-right-radius:0}.eui-21 :host.eui-button-group ::ng-deep>.eui-button:not(:first-child),.eui-21 :host.eui-button-group ::ng-deep>.eui-button-group:not(:first-child)>.eui-button{border-bottom-left-radius:0;border-top-left-radius:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: EuiButtonGroupComponent, decorators: [{
            type: Component,
            args: [{ selector: 'eui-button-group', template: '<ng-content/>', changeDetection: ChangeDetectionStrategy.OnPush, styles: [".eui-21 :host.eui-button-group{position:relative;display:inline-flex;flex-wrap:wrap;vertical-align:middle;width:100%}.eui-21 :host.eui-button-group ::ng-deep .eui-button:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-21 :host.eui-button-group ::ng-deep>.eui-button:not(:first-child),.eui-21 :host.eui-button-group ::ng-deep>.eui-button-group:not(:first-child){margin-left:-1px}.eui-21 :host.eui-button-group ::ng-deep>.eui-button:not(:last-child),.eui-21 :host.eui-button-group ::ng-deep>.eui-button-group:not(:last-child)>.eui-button{border-bottom-right-radius:0;border-top-right-radius:0}.eui-21 :host.eui-button-group ::ng-deep>.eui-button:not(:first-child),.eui-21 :host.eui-button-group ::ng-deep>.eui-button-group:not(:first-child)>.eui-button{border-bottom-left-radius:0;border-top-left-radius:0}\n"] }]
        }], propDecorators: { cssClasses: [{
                type: HostBinding,
                args: ['class']
            }], isCheckboxButtons: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], isRadioButtons: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], buttonClick: [{
                type: Output
            }], buttons: [{
                type: ContentChildren,
                args: [forwardRef(() => EuiButtonComponent)]
            }] } });

const EUI_BUTTON_GROUP = [
    EuiButtonGroupComponent,
];
// export { EuiButtonGroupComponent as EuiButtonGroup } from './eui-button-group.component';

/**
 * Generated bundle index. Do not edit.
 */

export { EUI_BUTTON_GROUP, EuiButtonGroupComponent };
//# sourceMappingURL=eui-components-eui-button-group.mjs.map
