import * as i0 from '@angular/core';
import { EventEmitter, booleanAttribute, Output, Input, HostBinding, ChangeDetectionStrategy, Component, forwardRef, ContentChildren } from '@angular/core';

class EuiToggleGroupItemComponent {
    constructor() {
        this.isChecked = false;
        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.0.5", ngImport: i0, type: EuiToggleGroupItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.0.5", 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.0.5", 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.
 */
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.0.5", ngImport: i0, type: EuiToggleGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.0.5", 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.0.5", 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
