import * as i1 from '@angular/cdk/accordion';
import { CdkAccordionItem, CdkAccordionModule, CdkAccordion } from '@angular/cdk/accordion';
import * as i0 from '@angular/core';
import { output, inject, HostBinding, ChangeDetectionStrategy, Component, Directive } 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';

/**
 * @description
 * Individual accordion item component that can be expanded or collapsed within an eui-accordion container.
 * Provides a collapsible panel with header and content sections, supporting smooth collapse animations.
 * Uses Angular CDK's accordion item functionality for managing expansion state and accessibility.
 * Supports size variants (S, M, L) and disabled state through BaseStatesDirective.
 * Emits toggleItem event when expansion state changes, allowing parent components to track state.
 *
 * @usageNotes
 * ### Basic usage
 * ```html
 * <eui-accordion>
 *   <eui-accordion-item>
 *     <eui-accordion-item-header>Header Text</eui-accordion-item-header>
 *     Panel content goes here
 *   </eui-accordion-item>
 * </eui-accordion>
 * ```
 *
 * ### With initial expanded state and size variant
 * ```html
 * <eui-accordion-item isExpanded euiSizeS (toggleItem)="onToggle($event)">
 *   <eui-accordion-item-header>Small Item</eui-accordion-item-header>
 *   Content
 * </eui-accordion-item>
 * ```
 *
 * ### Disabled item
 * ```html
 * <eui-accordion-item euiDisabled>
 *   <eui-accordion-item-header>Disabled Item</eui-accordion-item-header>
 *   Content
 * </eui-accordion-item>
 * ```
 *
 * ### Accessibility
 * - Header is keyboard accessible with Enter/Space to toggle expansion
 * - ARIA attributes (aria-expanded, aria-controls) automatically managed by CDK
 * - Screen readers announce expansion state and content visibility changes
 * - Focus remains on header after toggling for consistent keyboard navigation
 * - Disabled items are not focusable and announced as disabled to screen readers
 *
 * ### Notes
 * - Must be used within an eui-accordion parent component
 * - Requires eui-accordion-item-header directive for header content
 * - Collapse animation is applied automatically on state changes
 * - Size variants (euiSizeS, euiSizeM, euiSizeL) affect header and content spacing
 * - toggleItem event emits boolean indicating current expanded state (true = expanded)
 * - isExpanded input can be used for programmatic control of expansion state
 */
class EuiAccordionItemComponent {
    constructor() {
        /**
         * Event emitted when the accordion item is toggled
         */
        this.toggleItem = output();
        /** @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: "21.2.1", ngImport: i0, type: EuiAccordionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", 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", "euiDisabled", "euiDisabled"] }], 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=\"eui-chevron-up\" fillColor=\"primary\"/>\n        } @else {\n            <eui-icon-svg icon=\"eui-chevron-down\" fillColor=\"primary\"/>\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-21 :host.eui-accordion-item{--_header-font: var(--eui-f-m-medium);--_body-font: var(--eui-f-m)}.eui-21 :host.eui-accordion-item{display:flex;flex-direction:column;width:100%;border-bottom:1px solid var(--eui-c-divider);overflow:clip}.eui-21 :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-21 :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-21 :host.eui-accordion-item .eui-accordion-item__header:hover{background-color:var(--eui-c-hover)}.eui-21 :host.eui-accordion-item .eui-accordion-item__header-expander{display:flex;margin-left:auto;padding-left:var(--eui-s-m)}.eui-21 :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-21 :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-21 :host.eui-accordion-item.eui-accordion-item--size-s .eui-accordion-item__body{padding-bottom:var(--eui-s-s)}.eui-21 :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-21 :host.eui-accordion-item.eui-accordion-item--size-m .eui-accordion-item__body{padding-bottom:var(--eui-s-m)}.eui-21 :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)}.eui-21 :host.eui-accordion-item.eui-accordion-item--disabled{pointer-events:none;background-image:none;box-shadow:none;cursor:not-allowed!important;opacity:var(--eui-o-50)}\n"], dependencies: [{ kind: "component", type: i3.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "ariaLabel", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "ngmodule", type: CdkAccordionModule }], animations: [
            euiAnimationCollapse,
        ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", 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',
                                'euiDisabled',
                            ],
                        },
                    ], 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=\"eui-chevron-up\" fillColor=\"primary\"/>\n        } @else {\n            <eui-icon-svg icon=\"eui-chevron-down\" fillColor=\"primary\"/>\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-21 :host.eui-accordion-item{--_header-font: var(--eui-f-m-medium);--_body-font: var(--eui-f-m)}.eui-21 :host.eui-accordion-item{display:flex;flex-direction:column;width:100%;border-bottom:1px solid var(--eui-c-divider);overflow:clip}.eui-21 :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-21 :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-21 :host.eui-accordion-item .eui-accordion-item__header:hover{background-color:var(--eui-c-hover)}.eui-21 :host.eui-accordion-item .eui-accordion-item__header-expander{display:flex;margin-left:auto;padding-left:var(--eui-s-m)}.eui-21 :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-21 :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-21 :host.eui-accordion-item.eui-accordion-item--size-s .eui-accordion-item__body{padding-bottom:var(--eui-s-s)}.eui-21 :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-21 :host.eui-accordion-item.eui-accordion-item--size-m .eui-accordion-item__body{padding-bottom:var(--eui-s-m)}.eui-21 :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)}.eui-21 :host.eui-accordion-item.eui-accordion-item--disabled{pointer-events:none;background-image:none;box-shadow:none;cursor:not-allowed!important;opacity:var(--eui-o-50)}\n"] }]
        }], propDecorators: { cssClasses: [{
                type: HostBinding,
                args: ['class']
            }], toggleItem: [{ type: i0.Output, args: ["toggleItem"] }] } });
/**
 * @description
 * Directive for marking and styling the header content of an accordion item.
 * Applied to content that should appear in the clickable header section of the accordion panel.
 * The header acts as the toggle trigger for expanding/collapsing the accordion item.
 * Content projected with this directive is displayed with appropriate styling and interactive behavior.
 *
 * @usageNotes
 * ```html
 * <eui-accordion-item>
 *   <eui-accordion-item-header>
 *     Section Title
 *   </eui-accordion-item-header>
 *   Panel content
 * </eui-accordion-item>
 * ```
 *
 * ### Accessibility
 * - Header content is automatically wrapped in an interactive button element
 * - Keyboard accessible with Enter/Space keys for toggling
 * - Screen readers announce the header text and expansion state
 *
 * ### Notes
 * - Required for proper accordion item structure
 * - Must be a direct child of eui-accordion-item
 * - Only one header directive should be used per accordion item
 * - Header content can include text, icons, or other inline elements
 */
// eslint-disable-next-line @angular-eslint/directive-selector
class EuiAccordionItemHeaderDirective {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: EuiAccordionItemHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.1", type: EuiAccordionItemHeaderDirective, isStandalone: true, selector: "eui-accordion-item-header", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: EuiAccordionItemHeaderDirective, decorators: [{
            type: Directive,
            args: [{ selector: 'eui-accordion-item-header' }]
        }] });

/**
 * @description
 * Accordion container component that manages a collection of expandable panel items.
 * Provides collapsible content sections with automatic expansion state coordination across child items.
 * Supports single or multi-expansion modes to control whether multiple panels can be open simultaneously.
 * Built on Angular CDK Accordion for robust expansion state management and accessibility.
 * Content is projected via ng-content, expecting eui-accordion-item children for proper functionality.
 * Typically used for organizing related content in expandable sections like FAQs, settings panels, or navigation menus.
 *
 * @usageNotes
 * #### Single expansion mode (default)
 * ```html
 * <eui-accordion>
 *   <eui-accordion-item>
 *     <eui-accordion-item-header>Section 1</eui-accordion-item-header>
 *     Content for section 1
 *   </eui-accordion-item>
 *   <eui-accordion-item>
 *     <eui-accordion-item-header>Section 2</eui-accordion-item-header>
 *     Content for section 2
 *   </eui-accordion-item>
 * </eui-accordion>
 * ```
 *
 * #### Multi-expansion mode
 * ```html
 * <eui-accordion isMulti>
 *   <eui-accordion-item (toggleItem)="onToggle($event)">
 *     <eui-accordion-item-header>Item 1</eui-accordion-item-header>
 *     Content 1
 *   </eui-accordion-item>
 * </eui-accordion>
 * ```
 *
 * ### Accessibility
 * - Uses Angular CDK Accordion which provides built-in ARIA attributes (aria-expanded, aria-controls)
 * - Each accordion item header is keyboard accessible and can be toggled with Enter/Space
 * - Screen readers announce expansion state changes automatically
 * - Focus management handled by CDK for keyboard navigation between items
 *
 * ### Notes
 * - In single-expansion mode (default), opening one item automatically closes others
 * - Set `isMulti` to allow multiple items to be expanded simultaneously
 * - Must contain eui-accordion-item children for proper functionality
 * - Expansion state is managed internally by Angular CDK Accordion
 * - Use toggleItem event on items to track expansion state changes
 */
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
     */
    cssClasses() {
        return [
            'eui-accordion',
        ].join(' ').trim();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: EuiAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: EuiAccordionComponent, isStandalone: true, selector: "eui-accordion", host: { properties: { "class": "cssClasses()" } }, hostDirectives: [{ directive: i1.CdkAccordion, inputs: ["multi", "isMulti"] }], ngImport: i0, template: '<ng-content/>', isInline: true, styles: [".eui-21 :host.eui-accordion{display:flex;width:100%;flex-direction:column}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: EuiAccordionComponent, decorators: [{
            type: Component,
            args: [{ selector: 'eui-accordion', template: '<ng-content/>', changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
                        {
                            directive: CdkAccordion,
                            inputs: ['multi: isMulti'],
                        },
                    ], host: {
                        '[class]': 'cssClasses()',
                    }, styles: [".eui-21 :host.eui-accordion{display:flex;width:100%;flex-direction:column}\n"] }]
        }] });

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

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

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