import * as i0 from '@angular/core';
import { inject, booleanAttribute, 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-state';
import { EUI_ICON_STATE } from '@eui/components/eui-icon-state';

/**
 * @description
 * A feedback message component that displays various types of feedback to users.
 * Supports different states (primary, secondary, info, etc.) and can be muted.
 *
 * @usageNotes
 * ### Basic feedback message
 * ```html
 * <eui-feedback-message euiSuccess>
 *   Operation completed successfully
 * </eui-feedback-message>
 * ```
 *
 * ### Muted variant
 * ```html
 * <eui-feedback-message euiWarning [isMuted]="true">
 *   This is a subtle warning message
 * </eui-feedback-message>
 * ```
 *
 * ### Accessibility
 * - Uses semantic color coding with icon indicators for state
 * - Text content is readable by screen readers
 * - Sufficient color contrast maintained in all states
 *
 * ### Notes
 * - Use state inputs (euiSuccess, euiWarning, euiDanger, euiInfo) for semantic meaning
 * - Muted variant reduces visual prominence while maintaining accessibility
 * - Icon indicators are hidden when `isMuted` is true
 */
class EuiFeedbackMessageComponent {
    constructor() {
        /**
         * @description
         * Type attribute bound to the host element.
         * Used to identify the component type in the DOM.
         *
         * @protected
         */
        this.type = 'MessageFeedback';
        /**
         * @description
         * Controls whether the feedback message should be displayed in a muted state.
         * When true, the message will have reduced visual prominence. The status
         * icon won't show before the message.
         *
         * @default false
         */
        this.isMuted = false;
        /**
         * @description
         * Instance of BaseStatesDirective used to manage component states.
         * Injected using the inject function.
         *
         * @protected
         */
        this.baseStatesDirective = inject(BaseStatesDirective);
    }
    /**
     * @description
     * Computes and returns the CSS classes for the feedback message component.
     * Combines base state classes with muted state if applicable.
     *
     * @returns {string} Space-separated string of CSS class names
     */
    get cssClasses() {
        return [
            this.baseStatesDirective.getCssClasses('eui-feedback-message'),
            this.isMuted ? 'eui-feedback-message--muted' : '',
        ].join(' ').trim();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: EuiFeedbackMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: EuiFeedbackMessageComponent, isStandalone: true, selector: "eui-feedback-message", inputs: { isMuted: ["isMuted", "isMuted", booleanAttribute] }, host: { properties: { "class": "this.cssClasses", "attr.type": "this.type" } }, hostDirectives: [{ directive: i1.BaseStatesDirective, inputs: ["euiPrimary", "euiPrimary", "euiSecondary", "euiSecondary", "euiInfo", "euiInfo", "euiWarning", "euiWarning", "euiSuccess", "euiSuccess", "euiDanger", "euiDanger", "euiVariant", "euiVariant"] }], ngImport: i0, template: "@if (!isMuted) {\n    <eui-icon-state [euiVariant]=\"baseStatesDirective.euiVariant\" />\n}\n<div class=\"eui-feedback-message__content\">\n    <ng-content></ng-content>\n</div>\n", styles: [".eui-21 :host.eui-feedback-message{--_color: var(--eui-c-secondary)}.eui-21 :host.eui-feedback-message--primary{--_color: var(--eui-c-primary)}.eui-21 :host.eui-feedback-message--secondary{--_color: var(--eui-c-secondary)}.eui-21 :host.eui-feedback-message--info{--_color: var(--eui-c-info)}.eui-21 :host.eui-feedback-message--success{--_color: var(--eui-c-success)}.eui-21 :host.eui-feedback-message--warning{--_color: var(--eui-c-warning)}.eui-21 :host.eui-feedback-message--danger{--_color: var(--eui-c-danger)}.eui-21 :host.eui-feedback-message{align-items:center;display:flex;gap:var(--eui-s-3xs);margin-top:var(--eui-s-xs);position:relative}.eui-21 :host.eui-feedback-message .eui-feedback-message__content{color:var(--_color);display:block;position:relative;font:var(--eui-f-s)}\n"], dependencies: [{ kind: "component", type: i2.EuiIconStateComponent, selector: "eui-icon-state", inputs: ["size", "ariaLabel"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: EuiFeedbackMessageComponent, decorators: [{
            type: Component,
            args: [{ selector: 'eui-feedback-message', imports: [
                        ...EUI_ICON_STATE,
                    ], hostDirectives: [
                        {
                            directive: BaseStatesDirective,
                            inputs: [
                                'euiPrimary',
                                'euiSecondary',
                                'euiInfo',
                                'euiWarning',
                                'euiSuccess',
                                'euiDanger',
                                'euiVariant',
                            ],
                        },
                    ], template: "@if (!isMuted) {\n    <eui-icon-state [euiVariant]=\"baseStatesDirective.euiVariant\" />\n}\n<div class=\"eui-feedback-message__content\">\n    <ng-content></ng-content>\n</div>\n", styles: [".eui-21 :host.eui-feedback-message{--_color: var(--eui-c-secondary)}.eui-21 :host.eui-feedback-message--primary{--_color: var(--eui-c-primary)}.eui-21 :host.eui-feedback-message--secondary{--_color: var(--eui-c-secondary)}.eui-21 :host.eui-feedback-message--info{--_color: var(--eui-c-info)}.eui-21 :host.eui-feedback-message--success{--_color: var(--eui-c-success)}.eui-21 :host.eui-feedback-message--warning{--_color: var(--eui-c-warning)}.eui-21 :host.eui-feedback-message--danger{--_color: var(--eui-c-danger)}.eui-21 :host.eui-feedback-message{align-items:center;display:flex;gap:var(--eui-s-3xs);margin-top:var(--eui-s-xs);position:relative}.eui-21 :host.eui-feedback-message .eui-feedback-message__content{color:var(--_color);display:block;position:relative;font:var(--eui-f-s)}\n"] }]
        }], propDecorators: { cssClasses: [{
                type: HostBinding,
                args: ['class']
            }], type: [{
                type: HostBinding,
                args: ['attr.type']
            }], isMuted: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }] } });

const EUI_FEEDBACK_MESSAGE = [
    EuiFeedbackMessageComponent,
];
// export { EuiFeedbackMessageComponent as EuiFeedbackMessage } from './eui-feedback-message.component';

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

export { EUI_FEEDBACK_MESSAGE, EuiFeedbackMessageComponent };
//# sourceMappingURL=eui-components-eui-feedback-message.mjs.map
