import * as i0 from '@angular/core';
import { computed, inject, input, ChangeDetectionStrategy, 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() {
        this.cssClasses = computed(() => this.baseStatesDirective.getCssClasses('eui-icon-state'), ...(ngDevMode ? [{ debugName: "cssClasses" }] : []));
        this.baseStatesDirective = inject(BaseStatesDirective);
        /**
         * Controls the rendered size of the icon.
         * @default 'm'
         */
        this.size = input('m', ...(ngDevMode ? [{ debugName: "size" }] : []));
        /**
         * Accessible label for screen readers describing the icon's purpose or meaning.
         * Required for accessibility when the icon conveys semantic information.
         */
        this.ariaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
        this.icon = computed(() => {
            const state = this.baseStatesDirective.euiVariantState();
            // if the state does not match any of the host-directive input you should fallback to primary
            // (coming from Logic of ROMEO DAVID)
            const v = state && ['primary', 'success', 'info', 'warning', 'danger'].includes(state) ? state : 'primary';
            return v ? `eui-state-${v}` : null;
        }, ...(ngDevMode ? [{ debugName: "icon" }] : []));
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: EuiIconStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: EuiIconStateComponent, isStandalone: true, selector: "eui-icon-state", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "baseStatesDirective.getCssClasses(\"eui-icon-state\")" } }, hostDirectives: [{ directive: i1.BaseStatesDirective, inputs: ["euiPrimary", "euiPrimary", "euiSuccess", "euiSuccess", "euiInfo", "euiInfo", "euiWarning", "euiWarning", "euiDanger", "euiDanger", "euiVariant", "euiVariant"] }], ngImport: i0, template: "@if (icon()) {\n    <eui-icon-svg [icon]=\"icon()\" [attr.aria-label]=\"ariaLabel()\" [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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: EuiIconStateComponent, decorators: [{
            type: Component,
            args: [{ selector: 'eui-icon-state', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                        ...EUI_ICON,
                    ], hostDirectives: [
                        {
                            directive: BaseStatesDirective,
                            inputs: [
                                'euiPrimary',
                                'euiSuccess',
                                'euiInfo',
                                'euiWarning',
                                'euiDanger',
                                'euiVariant',
                            ],
                        },
                    ], host: {
                        '[class]': 'baseStatesDirective.getCssClasses("eui-icon-state")',
                    }, template: "@if (icon()) {\n    <eui-icon-svg [icon]=\"icon()\" [attr.aria-label]=\"ariaLabel()\" [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: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });

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
