import * as i0 from '@angular/core';
import { HostBinding, Component, Input, EventEmitter, inject, booleanAttribute, Output } from '@angular/core';
import * as i1 from '@eui/components/eui-icon';
import { EUI_ICON } from '@eui/components/eui-icon';
import * as i1$1 from '@eui/components/shared';
import { BaseStatesDirective } from '@eui/components/shared';
import * as i2 from '@eui/components/eui-icon-button-expander';
import { EUI_ICON_BUTTON_EXPANDER } from '@eui/components/eui-icon-button-expander';

/**
 * @description
 * Action container for EuiSectionHeader that holds interactive elements like buttons or links.
 *
 * @usageNotes
 * ```html
 * <eui-section-header-action>
 *   <button euiButton>Action</button>
 * </eui-section-header-action>
 * ```
 */
class EuiSectionHeaderActionComponent {
    constructor() {
        /** CSS class applied to the host element */
        this.string = 'eui-section-header-action';
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: EuiSectionHeaderActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.16", type: EuiSectionHeaderActionComponent, isStandalone: true, selector: "eui-section-header-action", host: { properties: { "class": "this.string" } }, ngImport: i0, template: '<ng-content />', isInline: true, styles: [".eui-21 .eui-section-header :host.eui-section-header-action{display:flex;width:100%;gap:var(--eui-s-s);align-items:center}.eui-21 .eui-section-header :host.eui-section-header-action ::ng-deep .eui-input-group{margin:0}\n"] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: EuiSectionHeaderActionComponent, decorators: [{
            type: Component,
            args: [{ selector: 'eui-section-header-action', template: '<ng-content />', styles: [".eui-21 .eui-section-header :host.eui-section-header-action{display:flex;width:100%;gap:var(--eui-s-s);align-items:center}.eui-21 .eui-section-header :host.eui-section-header-action ::ng-deep .eui-input-group{margin:0}\n"] }]
        }], propDecorators: { string: [{
                type: HostBinding,
                args: ['class']
            }] } });

/**
 * @description
 * Description container for EuiSectionHeader that displays supplementary text below the title.
 *
 * @usageNotes
 * ```html
 * <eui-section-header-description>Additional context or instructions</eui-section-header-description>
 * ```
 */
class EuiSectionHeaderDescriptionComponent {
    constructor() {
        /** CSS class applied to the host element */
        this.string = 'eui-section-header-description';
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: EuiSectionHeaderDescriptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.16", type: EuiSectionHeaderDescriptionComponent, isStandalone: true, selector: "eui-section-header-description", host: { properties: { "class": "this.string" } }, ngImport: i0, template: '<ng-content />', isInline: true, styles: [".eui-21 .eui-section-header :host.eui-section-header-description{display:flex;width:100%;align-items:center;font:var(--_description-font)}\n"] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: EuiSectionHeaderDescriptionComponent, decorators: [{
            type: Component,
            args: [{ selector: 'eui-section-header-description', template: '<ng-content />', styles: [".eui-21 .eui-section-header :host.eui-section-header-description{display:flex;width:100%;align-items:center;font:var(--_description-font)}\n"] }]
        }], propDecorators: { string: [{
                type: HostBinding,
                args: ['class']
            }] } });

/**
 * @description
 * Icon container for EuiSectionHeader that displays an icon before the title.
 *
 * @usageNotes
 * ```html
 * <eui-section-header-icon icon="settings"></eui-section-header-icon>
 * ```
 */
class EuiSectionHeaderIconComponent {
    constructor() {
        /** CSS class applied to the host element */
        this.string = 'eui-section-header-icon';
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: EuiSectionHeaderIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.16", type: EuiSectionHeaderIconComponent, isStandalone: true, selector: "eui-section-header-icon", inputs: { icon: "icon" }, host: { properties: { "class": "this.string" } }, ngImport: i0, template: '<eui-icon-svg [icon]="icon" size="s"/>', isInline: true, styles: [".eui-21 .eui-section-header :host.eui-section-header-icon{--_bg-color: var(--eui-c-primary-surface-light);--_border-color: var(--eui-c-primary-border-light);--_icon-color: var(--eui-c-primary)}.eui-21 .eui-section-header--primary :host.eui-section-header-icon{--_bg-color: var(--eui-c-primary-surface-light);--_border-color: var(--eui-c-primary-border-light);--_icon-color: var(--eui-c-primary)}.eui-21 .eui-section-header--secondary :host.eui-section-header-icon{--_bg-color: var(--eui-c-secondary-surface-light);--_border-color: var(--eui-c-secondary-border-light);--_icon-color: var(--eui-c-secondary)}.eui-21 .eui-section-header--info :host.eui-section-header-icon{--_bg-color: var(--eui-c-info-surface-light);--_border-color: var(--eui-c-info-border-light);--_icon-color: var(--eui-c-info)}.eui-21 .eui-section-header--success :host.eui-section-header-icon{--_bg-color: var(--eui-c-success-surface-light);--_border-color: var(--eui-c-success-border-light);--_icon-color: var(--eui-c-success)}.eui-21 .eui-section-header--warning :host.eui-section-header-icon{--_bg-color: var(--eui-c-warning-surface-light);--_border-color: var(--eui-c-warning-border-light);--_icon-color: var(--eui-c-warning)}.eui-21 .eui-section-header--danger :host.eui-section-header-icon{--_bg-color: var(--eui-c-danger-surface-light);--_border-color: var(--eui-c-danger-border-light);--_icon-color: var(--eui-c-danger)}.eui-21 :host.eui-section-header-icon{display:inline-flex;padding:var(--eui-s-3xs);background-color:var(--_bg-color);border:1px solid var(--_border-color);border-radius:var(--eui-br-s)}.eui-21 :host.eui-section-header-icon ::ng-deep .eui-icon-svg svg{fill:var(--_icon-color);color:var(--_icon-color)}\n"], dependencies: [{ kind: "component", type: i1.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "ariaLabel", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: EuiSectionHeaderIconComponent, decorators: [{
            type: Component,
            args: [{ selector: 'eui-section-header-icon', template: '<eui-icon-svg [icon]="icon" size="s"/>', imports: [
                        ...EUI_ICON,
                    ], styles: [".eui-21 .eui-section-header :host.eui-section-header-icon{--_bg-color: var(--eui-c-primary-surface-light);--_border-color: var(--eui-c-primary-border-light);--_icon-color: var(--eui-c-primary)}.eui-21 .eui-section-header--primary :host.eui-section-header-icon{--_bg-color: var(--eui-c-primary-surface-light);--_border-color: var(--eui-c-primary-border-light);--_icon-color: var(--eui-c-primary)}.eui-21 .eui-section-header--secondary :host.eui-section-header-icon{--_bg-color: var(--eui-c-secondary-surface-light);--_border-color: var(--eui-c-secondary-border-light);--_icon-color: var(--eui-c-secondary)}.eui-21 .eui-section-header--info :host.eui-section-header-icon{--_bg-color: var(--eui-c-info-surface-light);--_border-color: var(--eui-c-info-border-light);--_icon-color: var(--eui-c-info)}.eui-21 .eui-section-header--success :host.eui-section-header-icon{--_bg-color: var(--eui-c-success-surface-light);--_border-color: var(--eui-c-success-border-light);--_icon-color: var(--eui-c-success)}.eui-21 .eui-section-header--warning :host.eui-section-header-icon{--_bg-color: var(--eui-c-warning-surface-light);--_border-color: var(--eui-c-warning-border-light);--_icon-color: var(--eui-c-warning)}.eui-21 .eui-section-header--danger :host.eui-section-header-icon{--_bg-color: var(--eui-c-danger-surface-light);--_border-color: var(--eui-c-danger-border-light);--_icon-color: var(--eui-c-danger)}.eui-21 :host.eui-section-header-icon{display:inline-flex;padding:var(--eui-s-3xs);background-color:var(--_bg-color);border:1px solid var(--_border-color);border-radius:var(--eui-br-s)}.eui-21 :host.eui-section-header-icon ::ng-deep .eui-icon-svg svg{fill:var(--_icon-color);color:var(--_icon-color)}\n"] }]
        }], propDecorators: { string: [{
                type: HostBinding,
                args: ['class']
            }], icon: [{
                type: Input
            }] } });

/**
 * @description
 * Title container for EuiSectionHeader that displays the main heading text.
 *
 * @usageNotes
 * ```html
 * <eui-section-header-title>Section Title</eui-section-header-title>
 * ```
 */
class EuiSectionHeaderTitleComponent {
    constructor() {
        /** CSS class applied to the host element */
        this.string = 'eui-section-header-title';
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: EuiSectionHeaderTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.16", type: EuiSectionHeaderTitleComponent, isStandalone: true, selector: "eui-section-header-title", host: { properties: { "class": "this.string" } }, ngImport: i0, template: '<ng-content />', isInline: true, styles: [".eui-21 .eui-section-header :host.eui-section-header-title{display:flex;width:100%;align-items:center;font:var(--_title-font);gap:var(--eui-s-xs)}\n"] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: EuiSectionHeaderTitleComponent, decorators: [{
            type: Component,
            args: [{ selector: 'eui-section-header-title', template: '<ng-content />', styles: [".eui-21 .eui-section-header :host.eui-section-header-title{display:flex;width:100%;align-items:center;font:var(--_title-font);gap:var(--eui-s-xs)}\n"] }]
        }], propDecorators: { string: [{
                type: HostBinding,
                args: ['class']
            }] } });

/**
 * @description
 * Section header component that provides a grouped container with optional expand/collapse functionality
 * and customizable label content. Used to organize and separate content sections with clear visual hierarchy.
 *
 * @usageNotes
 * ### Basic usage
 * ```html
 * <eui-section-header>
 *   <eui-section-header-title>Section Title</eui-section-header-title>
 *   <eui-section-header-description>Description text</eui-section-header-description>
 * </eui-section-header>
 * ```
 *
 * ### With icon and action
 * ```html
 * <eui-section-header>
 *   <eui-section-header-icon icon="info"></eui-section-header-icon>
 *   <eui-section-header-title>Settings</eui-section-header-title>
 *   <eui-section-header-action>
 *     <button euiButton>Edit</button>
 *   </eui-section-header-action>
 * </eui-section-header>
 * ```
 *
 * ### Expandable section
 * ```html
 * <eui-section-header
 *   [isExpandable]="true"
 *   [isExpanded]="expanded"
 *   (expand)="onToggle($event)">
 *   <eui-section-header-title>Advanced Options</eui-section-header-title>
 * </eui-section-header>
 * ```
 *
 * ### Accessibility
 * - Expandable sections use proper ARIA attributes for disclosure widgets
 * - Keyboard accessible expand/collapse with Enter and Space
 * - Clear visual indicators for expanded/collapsed state
 * - Action buttons maintain their own accessibility requirements
 *
 * ### Notes
 * - Use `isFirst` to remove top border for the first section in a group
 * - Supports color variants via `euiVariant` (primary, secondary, success, etc.)
 * - `euiHighlighted` adds visual emphasis to important sections
 * - Combine with content containers for complete section structure
 */
class EuiSectionHeaderComponent {
    constructor() {
        /** Element attribute for e2e testing */
        this.e2eAttr = 'eui-section-header';
        /** Whether the fieldset can be expanded/collapsed */
        this.isExpandable = false;
        /** Whether the fieldset is currently expanded */
        this.isExpanded = true;
        /** Whether this is the first fieldset in a group */
        this.isFirst = false;
        /** Event emitted when the fieldset is expanded or collapsed */
        this.expand = new EventEmitter();
        /** Label for expand button accessibility */
        this.expandMenuLabel = 'Expand';
        /** Label for collapse button accessibility */
        this.collapseMenuLabel = 'Collapse';
        this.baseStatesDirective = inject(BaseStatesDirective);
    }
    /** CSS classes applied to the host element */
    get cssClasses() {
        return [
            this.baseStatesDirective.getCssClasses('eui-section-header'),
            this.isExpandable ? 'eui-section-header--expandable' : '',
            this.isFirst ? 'eui-section-header--first' : '',
        ].join(' ').trim();
    }
    /**
     * Handles expand/collapse toggle events
     * Emits the fieldset ID when toggled
     */
    onToggle() {
        if (this.isExpandable) {
            this.isExpanded = !this.isExpanded;
            this.expand.emit(this.id);
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: EuiSectionHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: EuiSectionHeaderComponent, isStandalone: true, selector: "eui-section-header", inputs: { e2eAttr: "e2eAttr", id: "id", isExpandable: ["isExpandable", "isExpandable", booleanAttribute], isExpanded: ["isExpanded", "isExpanded", booleanAttribute], isFirst: ["isFirst", "isFirst", booleanAttribute] }, outputs: { expand: "expand" }, host: { properties: { "class": "this.cssClasses", "attr.data-e2e": "this.e2eAttr" } }, hostDirectives: [{ directive: i1$1.BaseStatesDirective, inputs: ["euiPrimary", "euiPrimary", "euiSecondary", "euiSecondary", "euiSuccess", "euiSuccess", "euiInfo", "euiInfo", "euiWarning", "euiWarning", "euiDanger", "euiDanger", "euiVariant", "euiVariant", "euiHighlighted", "euiHighlighted"] }], ngImport: i0, template: "<div class=\"eui-section-header-wrapper\">\n    <div class=\"eui-section-header-top-wrapper\">\n        <div class=\"eui-section-header-start\">\n            @if (isExpandable) {\n                <eui-icon-button-expander\n                    [isExpanded]=\"isExpanded\"\n                    isDirectionForward\n                    fillColor=\"secondary\"\n                    (buttonClick)=\"onToggle()\">\n                </eui-icon-button-expander>\n            }\n            <ng-content select=\"eui-section-header-icon\"/>\n            <ng-content select=\"eui-section-header-title\"/>\n        </div>\n        <div class=\"eui-section-header-end\">\n            <ng-content select=\"eui-section-header-action\"/>\n        </div>\n    </div>\n    <ng-content select=\"eui-section-header-description\"/>\n</div>\n\n@if (isExpanded || !isExpandable) {\n    <div class=\"eui-section-header-content\">\n        <ng-content/>\n    </div>\n}\n", styles: [".eui-21 :host.eui-section-header{--_title-font: var(--eui-f-l-medium);--_description-font: var(--eui-f-s)}.eui-21 :host.eui-section-header{display:flex;width:100%;flex-direction:column}.eui-21 :host.eui-section-header .eui-section-header-wrapper{display:flex;align-items:center;width:100%;flex-direction:column;padding:var(--eui-s-s) 0;border-bottom:1px solid var(--eui-c-divider)}.eui-21 :host.eui-section-header .eui-section-header-top-wrapper{display:flex;width:100%}.eui-21 :host.eui-section-header .eui-section-header-start{display:flex;align-items:center;gap:var(--eui-s-xs)}.eui-21 :host.eui-section-header .eui-section-header-end{display:flex;align-items:center;margin-left:auto}.eui-21 :host.eui-section-header .eui-section-header-content{display:block;padding:var(--eui-s-m) 0}.eui-21 :host.eui-section-header--first{margin-top:var(--eui-s-s)}\n"], dependencies: [{ kind: "component", type: i2.EuiIconButtonExpanderComponent, selector: "eui-icon-button-expander", inputs: ["fillColor", "size", "ariaLabel", "isExpanded", "isDirectionForward", "euiDisabled"], outputs: ["buttonClick"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: EuiSectionHeaderComponent, decorators: [{
            type: Component,
            args: [{ selector: 'eui-section-header', imports: [
                        ...EUI_ICON_BUTTON_EXPANDER,
                    ], hostDirectives: [
                        {
                            directive: BaseStatesDirective,
                            inputs: [
                                'euiPrimary',
                                'euiSecondary',
                                'euiSuccess',
                                'euiInfo',
                                'euiWarning',
                                'euiDanger',
                                'euiVariant',
                                'euiHighlighted',
                            ],
                        },
                    ], template: "<div class=\"eui-section-header-wrapper\">\n    <div class=\"eui-section-header-top-wrapper\">\n        <div class=\"eui-section-header-start\">\n            @if (isExpandable) {\n                <eui-icon-button-expander\n                    [isExpanded]=\"isExpanded\"\n                    isDirectionForward\n                    fillColor=\"secondary\"\n                    (buttonClick)=\"onToggle()\">\n                </eui-icon-button-expander>\n            }\n            <ng-content select=\"eui-section-header-icon\"/>\n            <ng-content select=\"eui-section-header-title\"/>\n        </div>\n        <div class=\"eui-section-header-end\">\n            <ng-content select=\"eui-section-header-action\"/>\n        </div>\n    </div>\n    <ng-content select=\"eui-section-header-description\"/>\n</div>\n\n@if (isExpanded || !isExpandable) {\n    <div class=\"eui-section-header-content\">\n        <ng-content/>\n    </div>\n}\n", styles: [".eui-21 :host.eui-section-header{--_title-font: var(--eui-f-l-medium);--_description-font: var(--eui-f-s)}.eui-21 :host.eui-section-header{display:flex;width:100%;flex-direction:column}.eui-21 :host.eui-section-header .eui-section-header-wrapper{display:flex;align-items:center;width:100%;flex-direction:column;padding:var(--eui-s-s) 0;border-bottom:1px solid var(--eui-c-divider)}.eui-21 :host.eui-section-header .eui-section-header-top-wrapper{display:flex;width:100%}.eui-21 :host.eui-section-header .eui-section-header-start{display:flex;align-items:center;gap:var(--eui-s-xs)}.eui-21 :host.eui-section-header .eui-section-header-end{display:flex;align-items:center;margin-left:auto}.eui-21 :host.eui-section-header .eui-section-header-content{display:block;padding:var(--eui-s-m) 0}.eui-21 :host.eui-section-header--first{margin-top:var(--eui-s-s)}\n"] }]
        }], propDecorators: { cssClasses: [{
                type: HostBinding,
                args: ['class']
            }], e2eAttr: [{
                type: HostBinding,
                args: ['attr.data-e2e']
            }, {
                type: Input
            }], id: [{
                type: Input
            }], isExpandable: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], isExpanded: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], isFirst: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], expand: [{
                type: Output
            }] } });

const EUI_SECTION_HEADER = [
    EuiSectionHeaderComponent,
    EuiSectionHeaderTitleComponent,
    EuiSectionHeaderIconComponent,
    EuiSectionHeaderActionComponent,
    EuiSectionHeaderDescriptionComponent,
];

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

export { EUI_SECTION_HEADER, EuiSectionHeaderActionComponent, EuiSectionHeaderComponent, EuiSectionHeaderDescriptionComponent, EuiSectionHeaderIconComponent, EuiSectionHeaderTitleComponent };
//# sourceMappingURL=eui-components-eui-section-header.mjs.map
