import * as i1 from '@angular/cdk/accordion';
import { CdkAccordionItem, CdkAccordionModule, CdkAccordion } from '@angular/cdk/accordion';
import * as i0 from '@angular/core';
import { EventEmitter, inject, Output, HostBinding, ChangeDetectionStrategy, Component, Directive, NgModule } from '@angular/core';
import { consumeEvent } from '@eui/core';
import * as i2 from '@eui/components/shared';
import { BaseStatesDirective, euiAnimationCollapse } from '@eui/components/shared';
import * as i3 from '@eui/components/eui-icon';
import { EUI_ICON } from '@eui/components/eui-icon';

/**
 * Individual accordion item component that can be expanded/collapsed.
 * Uses Angular CDK's accordion item functionality for managing expansion state
 * and includes collapse animation.
 *
 * @property {boolean} isExpanded - Controls whether the item is expanded or collapsed
 */
class EuiAccordionItemComponent {
    constructor() {
        /**
         * Event emitted when the accordion item is toggled
         */
        this.toggleItem = new EventEmitter();
        /** @description Instance of BaseStatesDirective for managing component states */
        this.baseStatesDirective = inject(BaseStatesDirective);
        this.accItem = inject(CdkAccordionItem);
    }
    /**
     * @description
     * Computes and returns the CSS classes for the component based on its current state.
     *
     * @returns {string} Space-separated string of CSS class names
     */
    get cssClasses() {
        return [
            this.baseStatesDirective.getCssClasses('eui-accordion-item'),
        ].join(' ').trim();
    }
    /**
     * Handles the toggle event for expanding/collapsing the accordion item
     * Prevents event propagation to avoid interfering with parent handlers
     *
     * @param event - The toggle event
     */
    onToggle(event) {
        this.accItem.toggle();
        this.toggleItem.emit(this.accItem.expanded);
        consumeEvent(event);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EuiAccordionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: EuiAccordionItemComponent, isStandalone: true, selector: "eui-accordion-item", outputs: { toggleItem: "toggleItem" }, host: { properties: { "class": "this.cssClasses" } }, hostDirectives: [{ directive: i1.CdkAccordionItem, inputs: ["expanded", "isExpanded"] }, { directive: i2.BaseStatesDirective, inputs: ["euiSizeS", "euiSizeS", "euiSizeM", "euiSizeM", "euiSizeL", "euiSizeL", "euiSizeVariant", "euiSizeVariant"] }], ngImport: i0, template: "<button class=\"eui-accordion-item__header\" (click)=\"onToggle($event)\" (keydown.enter)=\"onToggle($event)\">\n    <ng-content select=\"eui-accordion-item-header\"/>\n\n    <div class=\"eui-accordion-item__header-expander\">\n        @if (accItem.expanded) {\n            <eui-icon-svg icon=\"chevron-up:sharp\"/>\n        } @else {\n            <eui-icon-svg icon=\"chevron-down:sharp\"/>\n        }\n    </div>\n</button>\n<div [@euiAnimationCollapse]=\"!accItem.expanded\" class=\"eui-accordion-item__body\">\n    <ng-content></ng-content>\n</div>\n\n", styles: [".eui-19.eui-t-ds2025 :host.eui-accordion-item{--_header-font: var(--eui-f-title-2xs-medium);--_body-font: var(--eui-f-body-m-regular)}.eui-19 :host.eui-accordion-item{--_header-font: var(--eui-f-m-bold);--_body-font: var(--eui-f-m)}.eui-19 :host.eui-accordion-item{display:flex;flex-direction:column;width:100%;border-bottom:1px solid var(--eui-c-divider);overflow:clip}.eui-19 :host.eui-accordion-item .eui-accordion-item__header{display:flex;align-items:center;width:100%;padding:var(--eui-s-m) var(--eui-s-l);outline:none;background-color:initial;border:var(--eui-bw-none);text-align:start;cursor:pointer;font:var(--_header-font);color:var(--eui-c-text)}.eui-19 :host.eui-accordion-item .eui-accordion-item__header:focus:not([readonly]){outline:2px solid var(--eui-c-focus)!important;outline-offset:-2px!important;transition:none}.eui-19 :host.eui-accordion-item .eui-accordion-item__header:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-19 :host.eui-accordion-item .eui-accordion-item__header [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-19 :host.eui-accordion-item .eui-accordion-item__header:hover{background-color:var(--eui-c-hover)}.eui-19 :host.eui-accordion-item .eui-accordion-item__header-expander{display:flex;margin-left:auto;padding-left:var(--eui-s-m)}.eui-19 :host.eui-accordion-item .eui-accordion-item__body{padding:var(--eui-s-xs) var(--eui-s-l) var(--eui-s-l) var(--eui-s-l);font:var(--_body-font)}.eui-19 :host.eui-accordion-item.eui-accordion-item--size-s .eui-accordion-item__header{padding-top:var(--eui-s-xs);padding-bottom:var(--eui-s-xs)}.eui-19 :host.eui-accordion-item.eui-accordion-item--size-s .eui-accordion-item__body{padding-bottom:var(--eui-s-s)}.eui-19 :host.eui-accordion-item.eui-accordion-item--size-m .eui-accordion-item__header{padding-top:var(--eui-s-m);padding-bottom:var(--eui-s-m)}.eui-19 :host.eui-accordion-item.eui-accordion-item--size-m .eui-accordion-item__body{padding-bottom:var(--eui-s-m)}.eui-19 :host.eui-accordion-item.eui-accordion-item--size-l .eui-accordion-item__header{padding-top:var(--eui-s-l);padding-bottom:var(--eui-s-l)}\n"], dependencies: [{ kind: "component", type: i3.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "euiVariant", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "ngmodule", type: CdkAccordionModule }], animations: [
            euiAnimationCollapse,
        ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EuiAccordionItemComponent, decorators: [{
            type: Component,
            args: [{ selector: 'eui-accordion-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                        ...EUI_ICON,
                        CdkAccordionModule,
                    ], hostDirectives: [
                        {
                            directive: CdkAccordionItem,
                            inputs: [
                                'expanded: isExpanded',
                            ],
                        },
                        {
                            directive: BaseStatesDirective,
                            inputs: [
                                'euiSizeS',
                                'euiSizeM',
                                'euiSizeL',
                                'euiSizeVariant',
                            ],
                        },
                    ], animations: [
                        euiAnimationCollapse,
                    ], template: "<button class=\"eui-accordion-item__header\" (click)=\"onToggle($event)\" (keydown.enter)=\"onToggle($event)\">\n    <ng-content select=\"eui-accordion-item-header\"/>\n\n    <div class=\"eui-accordion-item__header-expander\">\n        @if (accItem.expanded) {\n            <eui-icon-svg icon=\"chevron-up:sharp\"/>\n        } @else {\n            <eui-icon-svg icon=\"chevron-down:sharp\"/>\n        }\n    </div>\n</button>\n<div [@euiAnimationCollapse]=\"!accItem.expanded\" class=\"eui-accordion-item__body\">\n    <ng-content></ng-content>\n</div>\n\n", styles: [".eui-19.eui-t-ds2025 :host.eui-accordion-item{--_header-font: var(--eui-f-title-2xs-medium);--_body-font: var(--eui-f-body-m-regular)}.eui-19 :host.eui-accordion-item{--_header-font: var(--eui-f-m-bold);--_body-font: var(--eui-f-m)}.eui-19 :host.eui-accordion-item{display:flex;flex-direction:column;width:100%;border-bottom:1px solid var(--eui-c-divider);overflow:clip}.eui-19 :host.eui-accordion-item .eui-accordion-item__header{display:flex;align-items:center;width:100%;padding:var(--eui-s-m) var(--eui-s-l);outline:none;background-color:initial;border:var(--eui-bw-none);text-align:start;cursor:pointer;font:var(--_header-font);color:var(--eui-c-text)}.eui-19 :host.eui-accordion-item .eui-accordion-item__header:focus:not([readonly]){outline:2px solid var(--eui-c-focus)!important;outline-offset:-2px!important;transition:none}.eui-19 :host.eui-accordion-item .eui-accordion-item__header:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-19 :host.eui-accordion-item .eui-accordion-item__header [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-19 :host.eui-accordion-item .eui-accordion-item__header:hover{background-color:var(--eui-c-hover)}.eui-19 :host.eui-accordion-item .eui-accordion-item__header-expander{display:flex;margin-left:auto;padding-left:var(--eui-s-m)}.eui-19 :host.eui-accordion-item .eui-accordion-item__body{padding:var(--eui-s-xs) var(--eui-s-l) var(--eui-s-l) var(--eui-s-l);font:var(--_body-font)}.eui-19 :host.eui-accordion-item.eui-accordion-item--size-s .eui-accordion-item__header{padding-top:var(--eui-s-xs);padding-bottom:var(--eui-s-xs)}.eui-19 :host.eui-accordion-item.eui-accordion-item--size-s .eui-accordion-item__body{padding-bottom:var(--eui-s-s)}.eui-19 :host.eui-accordion-item.eui-accordion-item--size-m .eui-accordion-item__header{padding-top:var(--eui-s-m);padding-bottom:var(--eui-s-m)}.eui-19 :host.eui-accordion-item.eui-accordion-item--size-m .eui-accordion-item__body{padding-bottom:var(--eui-s-m)}.eui-19 :host.eui-accordion-item.eui-accordion-item--size-l .eui-accordion-item__header{padding-top:var(--eui-s-l);padding-bottom:var(--eui-s-l)}\n"] }]
        }], propDecorators: { cssClasses: [{
                type: HostBinding,
                args: ['class']
            }], toggleItem: [{
                type: Output
            }] } });
/**
 * Directive for customizing the header content of an accordion item.
 *
 */
// eslint-disable-next-line @angular-eslint/directive-selector
class EuiAccordionItemHeaderDirective {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EuiAccordionItemHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.17", type: EuiAccordionItemHeaderDirective, isStandalone: true, selector: "eui-accordion-item-header", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EuiAccordionItemHeaderDirective, decorators: [{
            type: Directive,
            args: [{ selector: 'eui-accordion-item-header' }]
        }] });

/**
 * Accordion container component that manages expandable items.
 * Uses Angular CDK's accordion functionality for managing expansion state.
 *
 * @property {boolean} isMulti - When true, allows multiple items to be expanded simultaneously.
 *                              When false (default), only one item can be expanded at a time.
 */
class EuiAccordionComponent {
    /**
     * @description
     * Computes and returns the CSS classes for the component based on its current state.
     *
     * @returns {string} Space-separated string of CSS class names
     */
    get cssClasses() {
        return [
            'eui-accordion',
        ].join(' ').trim();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EuiAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: EuiAccordionComponent, isStandalone: true, selector: "eui-accordion", host: { properties: { "class": "this.cssClasses" } }, hostDirectives: [{ directive: i1.CdkAccordion, inputs: ["multi", "isMulti"] }], ngImport: i0, template: '<ng-content/>', isInline: true, styles: [".eui-19 :host.eui-accordion{display:flex;width:100%;flex-direction:column}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EuiAccordionComponent, decorators: [{
            type: Component,
            args: [{ selector: 'eui-accordion', template: '<ng-content/>', changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
                        {
                            directive: CdkAccordion,
                            inputs: ['multi: isMulti'],
                        },
                    ], styles: [".eui-19 :host.eui-accordion{display:flex;width:100%;flex-direction:column}\n"] }]
        }], propDecorators: { cssClasses: [{
                type: HostBinding,
                args: ['class']
            }] } });

/**
 * Module providing accordion functionality with expandable items.
 *
 * @deprecated Use {@link EUI_ACCORDION} instead.
 */
class EuiAccordionModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EuiAccordionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: EuiAccordionModule, imports: [EuiAccordionComponent, EuiAccordionItemComponent, EuiAccordionItemHeaderDirective], exports: [EuiAccordionComponent, EuiAccordionItemComponent, EuiAccordionItemHeaderDirective] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EuiAccordionModule, imports: [EuiAccordionItemComponent] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EuiAccordionModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [EuiAccordionComponent, EuiAccordionItemComponent, EuiAccordionItemHeaderDirective],
                    exports: [EuiAccordionComponent, EuiAccordionItemComponent, EuiAccordionItemHeaderDirective],
                }]
        }] });

const EUI_ACCORDION = [
    EuiAccordionComponent,
    EuiAccordionItemComponent,
    EuiAccordionItemHeaderDirective,
];

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

export { EUI_ACCORDION, EuiAccordionComponent, EuiAccordionItemComponent, EuiAccordionItemHeaderDirective, EuiAccordionModule };
//# sourceMappingURL=eui-components-eui-accordion.mjs.map
