import * as i0 from '@angular/core';
import { inject, Input, HostBinding, Component } from '@angular/core';
import * as i1 from '@eui/components/shared';
import { BaseStatesDirective } from '@eui/components/shared';
import * as i2 from '@eui/components/eui-icon';
import { EUI_ICON } from '@eui/components/eui-icon';

/**
 * Displays an icon with semantic state styling (primary, success, info, warning, danger).
 * Combines icon rendering with state-based color variants for status indicators, alerts, and contextual UI elements.
 * Inherits state inputs from BaseStatesDirective for consistent theming across the application.
 *
 * @usageNotes
 * ### Success state icon
 * ```html
 * <eui-icon-state
 *   euiSuccess
 *   size="m"
 *   ariaLabel="Success">
 * </eui-icon-state>
 * ```
 *
 * ### Warning indicator
 * ```html
 * <eui-icon-state
 *   euiWarning
 *   size="l"
 *   ariaLabel="Warning: Action required">
 * </eui-icon-state>
 * ```
 *
 * ### Accessibility
 * - Always provide descriptive `ariaLabel` for meaningful icons
 * - Color is not the only indicator (icon shape also conveys meaning)
 * - Sufficient contrast maintained in all state variants
 *
 * ### Notes
 * - State variants: euiPrimary, euiSuccess, euiInfo, euiWarning, euiDanger
 * - Icon automatically matches the state color
 * - Use in feedback messages, form validation, and status displays
 * - Combine with text labels for clarity
 */
class EuiIconStateComponent {
    constructor() {
        /**
         * Controls the rendered size of the icon.
         * @default 'm'
         */
        this.size = 'm';
        this.baseStatesDirective = inject(BaseStatesDirective);
    }
    get cssClasses() {
        return [
            this.baseStatesDirective.getCssClasses('eui-icon-state'),
        ].join(' ').trim();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: EuiIconStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: EuiIconStateComponent, isStandalone: true, selector: "eui-icon-state", inputs: { size: "size", ariaLabel: "ariaLabel" }, host: { properties: { "class": "this.cssClasses" } }, hostDirectives: [{ directive: i1.BaseStatesDirective, inputs: ["euiPrimary", "euiPrimary", "euiSuccess", "euiSuccess", "euiInfo", "euiInfo", "euiWarning", "euiWarning", "euiDanger", "euiDanger", "euiVariant", "euiVariant"] }], ngImport: i0, template: "@if (baseStatesDirective.euiSuccess) {\n    <eui-icon-svg icon=\"eui-state-success\" aria-label=\"eUI success icon\" size=\"{{size}}\" />\n} @else if (baseStatesDirective.euiWarning) {\n    <eui-icon-svg icon=\"eui-state-warning\" aria-label=\"eUI warning icon\" size=\"{{size}}\" />\n} @else if (baseStatesDirective.euiDanger) {\n    <eui-icon-svg icon=\"eui-state-danger\" aria-label=\"eUI danger icon\" size=\"{{size}}\" />\n} @else if (baseStatesDirective.euiPrimary) {\n    <eui-icon-svg icon=\"eui-state-primary\" aria-label=\"eUI primary icon\" size=\"{{size}}\" />\n} @else if (baseStatesDirective.euiSecondary) {\n    <eui-icon-svg icon=\"eui-state-primary\" aria-label=\"eUI secondary icon\" size=\"{{size}}\" />\n} @else if (baseStatesDirective.euiInfo) {\n    <eui-icon-svg icon=\"eui-state-info\" aria-label=\"eUI info icon\" size=\"{{size}}\" />\n}\n", styles: [".eui-21 :host.eui-icon-state{display:flex;flex-direction:column;color:var(--eui-c-info);fill:var(--eui-c-info)}.eui-21 :host.eui-icon-state--primary ::ng-deep .eui-icon-svg{color:var(--eui-c-primary);fill:var(--eui-c-primary)}.eui-21 :host.eui-icon-state--info ::ng-deep .eui-icon-svg{color:var(--eui-c-info);fill:var(--eui-c-info)}.eui-21 :host.eui-icon-state--success ::ng-deep .eui-icon-svg{color:var(--eui-c-success);fill:var(--eui-c-success)}.eui-21 :host.eui-icon-state--warning ::ng-deep .eui-icon-svg{color:var(--eui-c-warning);fill:var(--eui-c-warning)}.eui-21 :host.eui-icon-state--danger ::ng-deep .eui-icon-svg{color:var(--eui-c-danger);fill:var(--eui-c-danger)}.eui-21 :host.eui-icon-state--secondary ::ng-deep .eui-icon-svg{color:var(--eui-c-secondary);fill:var(--eui-c-secondary)}\n"], dependencies: [{ 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"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: EuiIconStateComponent, decorators: [{
            type: Component,
            args: [{ selector: 'eui-icon-state', imports: [
                        ...EUI_ICON,
                    ], hostDirectives: [
                        {
                            directive: BaseStatesDirective,
                            inputs: [
                                'euiPrimary',
                                'euiSuccess',
                                'euiInfo',
                                'euiWarning',
                                'euiDanger',
                                'euiVariant',
                            ],
                        },
                    ], template: "@if (baseStatesDirective.euiSuccess) {\n    <eui-icon-svg icon=\"eui-state-success\" aria-label=\"eUI success icon\" size=\"{{size}}\" />\n} @else if (baseStatesDirective.euiWarning) {\n    <eui-icon-svg icon=\"eui-state-warning\" aria-label=\"eUI warning icon\" size=\"{{size}}\" />\n} @else if (baseStatesDirective.euiDanger) {\n    <eui-icon-svg icon=\"eui-state-danger\" aria-label=\"eUI danger icon\" size=\"{{size}}\" />\n} @else if (baseStatesDirective.euiPrimary) {\n    <eui-icon-svg icon=\"eui-state-primary\" aria-label=\"eUI primary icon\" size=\"{{size}}\" />\n} @else if (baseStatesDirective.euiSecondary) {\n    <eui-icon-svg icon=\"eui-state-primary\" aria-label=\"eUI secondary icon\" size=\"{{size}}\" />\n} @else if (baseStatesDirective.euiInfo) {\n    <eui-icon-svg icon=\"eui-state-info\" aria-label=\"eUI info icon\" size=\"{{size}}\" />\n}\n", styles: [".eui-21 :host.eui-icon-state{display:flex;flex-direction:column;color:var(--eui-c-info);fill:var(--eui-c-info)}.eui-21 :host.eui-icon-state--primary ::ng-deep .eui-icon-svg{color:var(--eui-c-primary);fill:var(--eui-c-primary)}.eui-21 :host.eui-icon-state--info ::ng-deep .eui-icon-svg{color:var(--eui-c-info);fill:var(--eui-c-info)}.eui-21 :host.eui-icon-state--success ::ng-deep .eui-icon-svg{color:var(--eui-c-success);fill:var(--eui-c-success)}.eui-21 :host.eui-icon-state--warning ::ng-deep .eui-icon-svg{color:var(--eui-c-warning);fill:var(--eui-c-warning)}.eui-21 :host.eui-icon-state--danger ::ng-deep .eui-icon-svg{color:var(--eui-c-danger);fill:var(--eui-c-danger)}.eui-21 :host.eui-icon-state--secondary ::ng-deep .eui-icon-svg{color:var(--eui-c-secondary);fill:var(--eui-c-secondary)}\n"] }]
        }], propDecorators: { cssClasses: [{
                type: HostBinding,
                args: ['class']
            }], size: [{
                type: Input
            }], ariaLabel: [{
                type: Input
            }] } });

const EUI_ICON_STATE = [
    EuiIconStateComponent,
];
// export { EuiIconStateComponent as EuiIconState } from './eui-icon-state.component';

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

export { EUI_ICON_STATE, EuiIconStateComponent };
//# sourceMappingURL=eui-components-eui-icon-state.mjs.map
