import * as i0 from '@angular/core';
import { Directive, EventEmitter, inject, booleanAttribute, ContentChildren, Output, Input, HostBinding, Component } from '@angular/core';
import { EuiTemplateDirective } from '@eui/components/directives';
import * as i1 from '@eui/components/shared';
import { BaseStatesDirective } from '@eui/components/shared';
import { NgTemplateOutlet } from '@angular/common';
import * as i2 from '@eui/components/eui-icon';
import { EUI_ICON } from '@eui/components/eui-icon';
import * as i3 from '@eui/components/eui-icon-button-expander';
import { EUI_ICON_BUTTON_EXPANDER } from '@eui/components/eui-icon-button-expander';
import * as i4 from '@eui/components/eui-icon-state';
import { EUI_ICON_STATE } from '@eui/components/eui-icon-state';

/**
 * Directive for projecting custom content into the right side of the fieldset label area.
 * Used to add supplementary controls or information aligned to the right of the label text.
 */
// eslint-disable-next-line
class EuiFieldsetLabelRightContentTagDirective {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: EuiFieldsetLabelRightContentTagDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.1", type: EuiFieldsetLabelRightContentTagDirective, isStandalone: true, selector: "euiFieldsetLabelRightContent", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: EuiFieldsetLabelRightContentTagDirective, decorators: [{
            type: Directive,
            args: [{ selector: 'euiFieldsetLabelRightContent' }]
        }] });
/**
 * Directive for projecting additional content below the main fieldset label.
 * Used to add descriptive text, hints, or secondary information in the label section.
 */
// eslint-disable-next-line
class EuiFieldsetLabelExtraContentTagDirective {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: EuiFieldsetLabelExtraContentTagDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.1", type: EuiFieldsetLabelExtraContentTagDirective, isStandalone: true, selector: "euiFieldsetLabelExtraContent", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: EuiFieldsetLabelExtraContentTagDirective, decorators: [{
            type: Directive,
            args: [{ selector: 'euiFieldsetLabelExtraContent' }]
        }] });
/**
 * @description
 * `eui-fieldset` is a container component that groups related form controls or content sections with a labeled border.
 * `eui-fieldset` supports collapsible/expandable behavior, custom icons, and flexible content projection.
 * Commonly used to organize complex forms into logical sections or create accordion-style interfaces.
 * `eui-fieldset` Provides visual hierarchy through theming variants and size options.
 *
 * @usageNotes
 * ### Basic fieldset
 * ```html
 * <eui-fieldset label="Personal Information">
 *   <eui-input-text label="Name"></eui-input-text>
 *   <eui-input-text label="Email"></eui-input-text>
 * </eui-fieldset>
 * ```
 *
 * ### Expandable fieldset
 * ```html
 * <eui-fieldset
 *   label="Advanced Options"
 *   [isExpandable]="true"
 *   [isExpanded]="false"
 *   (expand)="onExpand($event)">
 *   <ng-template euiTemplate="eui-fieldset-content">
 *     <p>Collapsible content here</p>
 *   </ng-template>
 * </eui-fieldset>
 * ```
 *
 * ### Accessibility
 * - Uses semantic `<fieldset>` and `<legend>` elements for proper form grouping
 * - Expand/collapse button includes descriptive aria-label
 * - Keyboard navigation supported for expandable fieldsets
 *
 * ### Notes
 * - Use `isExpandable` with lazy-loaded content via `euiTemplate` for performance
 * - Apply state variants (euiPrimary, euiSuccess, etc.) for visual emphasis
 * - Set `isFirst` to remove top margin in stacked layouts
 */
class EuiFieldsetComponent {
    constructor() {
        /**
         * Data attribute used for end-to-end testing identification.
         * @default 'eui-fieldset'
         */
        this.e2eAttr = 'eui-fieldset';
        /**
         * Displays a default icon in the fieldset header when no custom icon is specified.
         * Provides visual consistency across fieldsets.
         * @default false
         */
        this.hasDefaultIcon = false;
        /**
         * Enables expand/collapse functionality for the fieldset content.
         * Adds an interactive toggle button to the header for showing/hiding content.
         * @default false
         */
        this.isExpandable = false;
        /**
         * Controls the expanded state of the fieldset content.
         * Only effective when isExpandable is true.
         * @default true
         */
        this.isExpanded = true;
        /**
         * Positions the expand/collapse toggle button on the left side of the header.
         * By default, the expander appears on the right.
         * @default false
         */
        this.hasLeftExpander = false;
        /**
         * Applies larger sizing to the fieldset header and spacing.
         * Used to create visual hierarchy or emphasize important sections.
         * @default false
         */
        this.isLarge = false;
        /**
         * Removes top margin when the fieldset is the first in a sequence.
         * Ensures proper spacing in stacked fieldset layouts.
         * @default false
         */
        this.isFirst = false;
        /**
         * Emitted when the fieldset is expanded or collapsed.
         * Payload: string containing the fieldset's id property.
         * Triggered by user interaction with the expand/collapse toggle.
         */
        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-fieldset'),
            this.isFirst ? 'eui-fieldset--first' : '',
            this.isExpandable ? 'eui-fieldset--expandable' : '',
            this.iconSvgFillColor ? 'eui-fieldset--has-icon-color' : '',
        ].join(' ').trim();
    }
    ngAfterContentInit() {
        const lazyTemplate = this.templates.filter(t => t.name === 'eui-fieldset-content')[0];
        if (lazyTemplate) {
            this.lazyContent = lazyTemplate.template;
        }
    }
    /**
     * 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.1", ngImport: i0, type: EuiFieldsetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: EuiFieldsetComponent, isStandalone: true, selector: "eui-fieldset", inputs: { e2eAttr: "e2eAttr", id: "id", label: "label", iconClass: "iconClass", iconSvgName: "iconSvgName", iconSvgFillColor: "iconSvgFillColor", hasDefaultIcon: ["hasDefaultIcon", "hasDefaultIcon", booleanAttribute], isExpandable: ["isExpandable", "isExpandable", booleanAttribute], isExpanded: ["isExpanded", "isExpanded", booleanAttribute], hasLeftExpander: ["hasLeftExpander", "hasLeftExpander", booleanAttribute], isLarge: ["isLarge", "isLarge", booleanAttribute], isFirst: ["isFirst", "isFirst", booleanAttribute] }, outputs: { expand: "expand" }, host: { properties: { "class": "this.cssClasses", "attr.data-e2e": "this.e2eAttr" } }, queries: [{ propertyName: "templates", predicate: EuiTemplateDirective }], hostDirectives: [{ directive: i1.BaseStatesDirective, inputs: ["euiPrimary", "euiPrimary", "euiSecondary", "euiSecondary", "euiSuccess", "euiSuccess", "euiInfo", "euiInfo", "euiWarning", "euiWarning", "euiDanger", "euiDanger", "euiVariant", "euiVariant", "euiHighlighted", "euiHighlighted"] }], ngImport: i0, template: "@if (label) {\n    <div class=\"eui-fieldset__header\">\n        @if (isExpandable && hasLeftExpander) {\n            <eui-icon-button-expander\n                [isExpanded]=\"isExpanded\"\n                (click)=\"onToggle()\"\n                isDirectionForward\n                fillColor=\"secondary\">\n            </eui-icon-button-expander>\n        }        \n        <div class=\"eui-fieldset__header-label\" [class.eui-fieldset__header-label--large]=\"isLarge\">\n            @if (iconSvgName) {\n                <div class=\"eui-fieldset__header-icon\">\n                    <eui-icon-svg [icon]=\"iconSvgName\" [fillColor]=\"iconSvgFillColor\"/>\n                </div>\n            }\n            @if (hasDefaultIcon) {\n                <div class=\"eui-fieldset__header-icon\">\n                    <eui-icon-state [euiVariant]=\"baseStatesDirective.euiVariant\"/>\n                </div>\n            }\n            {{ label }}\n            <ng-content select=\"euiFieldsetLabelExtraContent\"></ng-content>\n        </div>\n        <div class=\"eui-fieldset__header-right-content\">\n            <ng-content select=\"euiFieldsetLabelRightContent\"></ng-content>\n            @if (isExpandable && !hasLeftExpander) {\n                <eui-icon-button-expander\n                    [isExpanded]=\"isExpanded\"\n                    (click)=\"onToggle()\"\n                    isDirectionForward\n                    fillColor=\"secondary\">\n                </eui-icon-button-expander>\n            }\n        </div>\n    </div>\n}\n@if (isExpanded) {\n    <div id=\"fieldset-content\" class=\"eui-fieldset__content\">\n        @if (lazyContent) {\n            <ng-template [ngTemplateOutlet]=\"lazyContent\"></ng-template>\n        } @else {\n            <ng-content></ng-content>\n        }\n    </div>\n}\n", styles: [".eui-21 :host.eui-fieldset{--_color: var(--eui-c-secondary)}.eui-21 :host.eui-fieldset--primary{--_color: var(--eui-c-primary)}.eui-21 :host.eui-fieldset--secondary{--_color: var(--eui-c-secondary)}.eui-21 :host.eui-fieldset--info{--_color: var(--eui-c-info)}.eui-21 :host.eui-fieldset--success{--_color: var(--eui-c-success)}.eui-21 :host.eui-fieldset--warning{--_color: var(--eui-c-warning)}.eui-21 :host.eui-fieldset--danger{--_color: var(--eui-c-danger)}.eui-21 :host.eui-fieldset{display:block;position:relative;width:100%}.eui-21 :host.eui-fieldset .eui-fieldset__header{align-items:center;background-color:initial;border:var(--eui-bw-none);border-bottom:1px solid var(--eui-c-divider);color:var(--_color);display:flex;gap:var(--eui-s-m);min-height:var(--eui-s-7xl);outline:none;padding:0;width:100%}.eui-21 :host.eui-fieldset .eui-fieldset__header-icon{align-items:center;display:inline-flex;font-size:var(--eui-is-m);margin-right:var(--eui-s-xs)}.eui-21 :host.eui-fieldset .eui-fieldset__header-label{align-items:center;display:inline-flex;font:var(--eui-f-m-semi-bold);text-align:left}.eui-21 :host.eui-fieldset .eui-fieldset__header-right-content{align-items:center;display:flex;gap:var(--eui-s-s);margin-left:auto}.eui-21 :host.eui-fieldset .eui-fieldset__content{padding-top:var(--eui-s-s)}.eui-21 :host.eui-fieldset--highlighted{background-color:var(--eui-c-surface-page);z-index:var(--eui-zi-highlighted)}.eui-21 :host.eui-fieldset:not(:host.eui-fieldset--has-icon-color) .eui-icon-svg svg{fill:var(--_color);color:var(--_color)}.eui-21 :host.eui-fieldset--first{margin-top:var(--eui-s-s)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.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: "component", type: i3.EuiIconButtonExpanderComponent, selector: "eui-icon-button-expander", inputs: ["fillColor", "size", "ariaLabel", "isExpanded", "isDirectionForward", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i4.EuiIconStateComponent, selector: "eui-icon-state", inputs: ["size", "ariaLabel"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: EuiFieldsetComponent, decorators: [{
            type: Component,
            args: [{ selector: 'eui-fieldset', imports: [
                        NgTemplateOutlet,
                        ...EUI_ICON,
                        ...EUI_ICON_BUTTON_EXPANDER,
                        ...EUI_ICON_STATE,
                    ], hostDirectives: [
                        {
                            directive: BaseStatesDirective,
                            inputs: [
                                'euiPrimary',
                                'euiSecondary',
                                'euiSuccess',
                                'euiInfo',
                                'euiWarning',
                                'euiDanger',
                                'euiVariant',
                                'euiHighlighted',
                            ],
                        },
                    ], template: "@if (label) {\n    <div class=\"eui-fieldset__header\">\n        @if (isExpandable && hasLeftExpander) {\n            <eui-icon-button-expander\n                [isExpanded]=\"isExpanded\"\n                (click)=\"onToggle()\"\n                isDirectionForward\n                fillColor=\"secondary\">\n            </eui-icon-button-expander>\n        }        \n        <div class=\"eui-fieldset__header-label\" [class.eui-fieldset__header-label--large]=\"isLarge\">\n            @if (iconSvgName) {\n                <div class=\"eui-fieldset__header-icon\">\n                    <eui-icon-svg [icon]=\"iconSvgName\" [fillColor]=\"iconSvgFillColor\"/>\n                </div>\n            }\n            @if (hasDefaultIcon) {\n                <div class=\"eui-fieldset__header-icon\">\n                    <eui-icon-state [euiVariant]=\"baseStatesDirective.euiVariant\"/>\n                </div>\n            }\n            {{ label }}\n            <ng-content select=\"euiFieldsetLabelExtraContent\"></ng-content>\n        </div>\n        <div class=\"eui-fieldset__header-right-content\">\n            <ng-content select=\"euiFieldsetLabelRightContent\"></ng-content>\n            @if (isExpandable && !hasLeftExpander) {\n                <eui-icon-button-expander\n                    [isExpanded]=\"isExpanded\"\n                    (click)=\"onToggle()\"\n                    isDirectionForward\n                    fillColor=\"secondary\">\n                </eui-icon-button-expander>\n            }\n        </div>\n    </div>\n}\n@if (isExpanded) {\n    <div id=\"fieldset-content\" class=\"eui-fieldset__content\">\n        @if (lazyContent) {\n            <ng-template [ngTemplateOutlet]=\"lazyContent\"></ng-template>\n        } @else {\n            <ng-content></ng-content>\n        }\n    </div>\n}\n", styles: [".eui-21 :host.eui-fieldset{--_color: var(--eui-c-secondary)}.eui-21 :host.eui-fieldset--primary{--_color: var(--eui-c-primary)}.eui-21 :host.eui-fieldset--secondary{--_color: var(--eui-c-secondary)}.eui-21 :host.eui-fieldset--info{--_color: var(--eui-c-info)}.eui-21 :host.eui-fieldset--success{--_color: var(--eui-c-success)}.eui-21 :host.eui-fieldset--warning{--_color: var(--eui-c-warning)}.eui-21 :host.eui-fieldset--danger{--_color: var(--eui-c-danger)}.eui-21 :host.eui-fieldset{display:block;position:relative;width:100%}.eui-21 :host.eui-fieldset .eui-fieldset__header{align-items:center;background-color:initial;border:var(--eui-bw-none);border-bottom:1px solid var(--eui-c-divider);color:var(--_color);display:flex;gap:var(--eui-s-m);min-height:var(--eui-s-7xl);outline:none;padding:0;width:100%}.eui-21 :host.eui-fieldset .eui-fieldset__header-icon{align-items:center;display:inline-flex;font-size:var(--eui-is-m);margin-right:var(--eui-s-xs)}.eui-21 :host.eui-fieldset .eui-fieldset__header-label{align-items:center;display:inline-flex;font:var(--eui-f-m-semi-bold);text-align:left}.eui-21 :host.eui-fieldset .eui-fieldset__header-right-content{align-items:center;display:flex;gap:var(--eui-s-s);margin-left:auto}.eui-21 :host.eui-fieldset .eui-fieldset__content{padding-top:var(--eui-s-s)}.eui-21 :host.eui-fieldset--highlighted{background-color:var(--eui-c-surface-page);z-index:var(--eui-zi-highlighted)}.eui-21 :host.eui-fieldset:not(:host.eui-fieldset--has-icon-color) .eui-icon-svg svg{fill:var(--_color);color:var(--_color)}.eui-21 :host.eui-fieldset--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
            }], label: [{
                type: Input
            }], iconClass: [{
                type: Input
            }], iconSvgName: [{
                type: Input
            }], iconSvgFillColor: [{
                type: Input
            }], hasDefaultIcon: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], isExpandable: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], isExpanded: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], hasLeftExpander: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], isLarge: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], isFirst: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], expand: [{
                type: Output
            }], templates: [{
                type: ContentChildren,
                args: [EuiTemplateDirective]
            }] } });

const EUI_FIELDSET = [
    EuiFieldsetComponent,
    EuiFieldsetLabelExtraContentTagDirective,
    EuiFieldsetLabelRightContentTagDirective,
];

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

export { EUI_FIELDSET, EuiFieldsetComponent, EuiFieldsetLabelExtraContentTagDirective, EuiFieldsetLabelRightContentTagDirective };
//# sourceMappingURL=eui-components-eui-fieldset.mjs.map
