import * as i0 from '@angular/core';
import { EventEmitter, booleanAttribute, Output, Input, HostBinding, ChangeDetectionStrategy, Component, forwardRef, ContentChildren } 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
 * <!-- Within toggle group -->
 * <eui-toggle-group>
 *   <eui-toggle-group-item id="option1" [isChecked]="true">
 *     Option 1
 *   </eui-toggle-group-item>
 *   <eui-toggle-group-item id="option2">
 *     Option 2
 *   </eui-toggle-group-item>
 * </eui-toggle-group>
 * ```
 *
 * ### 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
 */
class EuiToggleGroupItemComponent {
    constructor() {
        /**
         * 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
         */
        this.isChecked = false;
        /**
         * Emitted when the toggle item is clicked.
         * Payload: reference to the clicked EuiToggleGroupItemComponent instance.
         * Allows parent toggle group to coordinate selection state across items.
         */
        this.itemClick = new EventEmitter();
    }
    get cssClasses() {
        return [
            'eui-toggle-group-item',
            this.isChecked ? 'eui-toggle-group-item--checked' : '',
        ].join(' ').trim();
    }
    buttonClick() {
        this.itemClick.emit(this);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: EuiToggleGroupItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.1.0", type: EuiToggleGroupItemComponent, isStandalone: true, selector: "eui-toggle-group-item", inputs: { id: "id", isChecked: ["isChecked", "isChecked", booleanAttribute] }, outputs: { itemClick: "itemClick" }, host: { properties: { "class": "this.cssClasses", "attr.id": "this.id" } }, ngImport: i0, template: '<button (click)="buttonClick()"><ng-content/></button>', isInline: true, styles: [".eui-21 :host button{padding:var(--eui-s-xs) var(--eui-s-s);border-radius:var(--eui-br-m);cursor:pointer;border:1px solid transparent;background:transparent;display:inline-flex;align-items:center;justify-content:center}.eui-21 :host button:focus-visible:not([readonly]){outline:var(--eui-bw-s) solid var(--eui-c-primary-border)!important;outline-offset:1px!important;border-radius:var(--eui-br-xs)!important}.eui-21 :host button{transition:background-color .2s;gap:var(--eui-s-xs)}.eui-21 :host.eui-toggle-group-item--checked button{background-color:var(--eui-c-white);border:1px solid var(--eui-c-secondary-border-lighter);color:var(--eui-c-active)}.eui-21 .eui-toggle-group--fluid :host{flex:1 1 0}.eui-21 .eui-toggle-group--fluid :host button{width:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: EuiToggleGroupItemComponent, decorators: [{
            type: Component,
            args: [{ selector: 'eui-toggle-group-item', template: '<button (click)="buttonClick()"><ng-content/></button>', changeDetection: ChangeDetectionStrategy.OnPush, styles: [".eui-21 :host button{padding:var(--eui-s-xs) var(--eui-s-s);border-radius:var(--eui-br-m);cursor:pointer;border:1px solid transparent;background:transparent;display:inline-flex;align-items:center;justify-content:center}.eui-21 :host button:focus-visible:not([readonly]){outline:var(--eui-bw-s) solid var(--eui-c-primary-border)!important;outline-offset:1px!important;border-radius:var(--eui-br-xs)!important}.eui-21 :host button{transition:background-color .2s;gap:var(--eui-s-xs)}.eui-21 :host.eui-toggle-group-item--checked button{background-color:var(--eui-c-white);border:1px solid var(--eui-c-secondary-border-lighter);color:var(--eui-c-active)}.eui-21 .eui-toggle-group--fluid :host{flex:1 1 0}.eui-21 .eui-toggle-group--fluid :host button{width:100%}\n"] }]
        }], propDecorators: { cssClasses: [{
                type: HostBinding,
                args: ['class']
            }], id: [{
                type: HostBinding,
                args: ['attr.id']
            }, {
                type: Input
            }], isChecked: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], itemClick: [{
                type: Output
            }] } });

/**
 * @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
 * <!-- Single select (radio behavior) -->
 * <eui-toggle-group (itemClick)="onViewChange($event)">
 *   <eui-toggle-group-item id="list" [isChecked]="true">
 *     List View
 *   </eui-toggle-group-item>
 *   <eui-toggle-group-item id="grid">
 *     Grid View
 *   </eui-toggle-group-item>
 * </eui-toggle-group>
 *
 * <!-- Multi-select (checkbox behavior) -->
 * <eui-toggle-group [isMultiple]="true">
 *   <eui-toggle-group-item id="bold">Bold</eui-toggle-group-item>
 *   <eui-toggle-group-item id="italic">Italic</eui-toggle-group-item>
 *   <eui-toggle-group-item id="underline">Underline</eui-toggle-group-item>
 * </eui-toggle-group>
 *
 * <!-- Fluid width -->
 * <eui-toggle-group [isFluid]="true">
 *   <eui-toggle-group-item id="option1">Option 1</eui-toggle-group-item>
 *   <eui-toggle-group-item id="option2">Option 2</eui-toggle-group-item>
 * </eui-toggle-group>
 * ```
 *
 * ### 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
 */
class EuiToggleGroupComponent {
    constructor() {
        /**
         * Whether the several items can be checked
         * @default false
         */
        this.isMultiple = false;
        this.isFluid = false;
        /**
         * Event emitted when any item in the group is clicked
         * Emits the clicked EuiToggleGroupItemComponent instance
         */
        this.itemClick = new EventEmitter();
    }
    /** CSS classes applied to the host element */
    get cssClasses() {
        return [
            'eui-toggle-group',
            this.isFluid ? 'eui-toggle-group--fluid' : '',
        ].join(' ').trim();
    }
    /**
     * Initializes button click subscriptions after content is initialized
     */
    ngAfterContentInit() {
        this.items.map((b) => {
            b.itemClick.subscribe(() => {
                this.handleInnerButtonClick(b);
            });
        });
    }
    handleInnerButtonClick(item) {
        try {
            if (item.isChecked && this.isMultiple) {
                item.isChecked = false;
            }
            else {
                if (this.isMultiple) {
                    this.items.find((b) => b.id === item.id).isChecked = true;
                }
                else {
                    this.items.find((b) => b.id === item.id).isChecked = true;
                    this.items.forEach((b) => {
                        if (b.id !== item.id) {
                            b.isChecked = false;
                        }
                    });
                }
            }
            this.itemClick.emit(item);
        }
        catch (e) {
            console.log(e);
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: EuiToggleGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.1.0", type: EuiToggleGroupComponent, isStandalone: true, selector: "eui-toggle-group", inputs: { isMultiple: ["isMultiple", "isMultiple", booleanAttribute], isFluid: ["isFluid", "isFluid", booleanAttribute] }, outputs: { itemClick: "itemClick" }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "items", predicate: i0.forwardRef(() => EuiToggleGroupItemComponent) }], ngImport: i0, template: '<ng-content/>', isInline: true, styles: [".eui-21 :host{position:relative;display:inline-flex;vertical-align:middle;gap:var(--eui-s-xs);width:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: EuiToggleGroupComponent, decorators: [{
            type: Component,
            args: [{ selector: 'eui-toggle-group', template: '<ng-content/>', changeDetection: ChangeDetectionStrategy.OnPush, styles: [".eui-21 :host{position:relative;display:inline-flex;vertical-align:middle;gap:var(--eui-s-xs);width:100%}\n"] }]
        }], propDecorators: { cssClasses: [{
                type: HostBinding,
                args: ['class']
            }], isMultiple: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], isFluid: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], itemClick: [{
                type: Output
            }], items: [{
                type: ContentChildren,
                args: [forwardRef(() => EuiToggleGroupItemComponent)]
            }] } });

const EUI_TOGGLE_GROUP = [
    EuiToggleGroupComponent,
    EuiToggleGroupItemComponent,
];

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

export { EUI_TOGGLE_GROUP, EuiToggleGroupComponent, EuiToggleGroupItemComponent };
//# sourceMappingURL=eui-components-eui-toggle-group.mjs.map
