import * as i0 from '@angular/core';
import { HostBinding, Component, inject, EventEmitter, booleanAttribute, forwardRef, ContentChild, Output, Input, ChangeDetectionStrategy, NgModule } from '@angular/core';
import { NgTemplateOutlet } from '@angular/common';
import * as i2 from '@eui/components/eui-icon-button';
import { EUI_ICON_BUTTON } from '@eui/components/eui-icon-button';
import * as i3 from '@eui/components/eui-icon-state';
import { EUI_ICON_STATE } from '@eui/components/eui-icon-state';
import * as i1 from '@eui/components/shared';
import { BaseStatesDirective } from '@eui/components/shared';
import { uniqueId } from '@eui/core';

/**
 * @description
 * Component that represents the title of an alert.
 * It is used within the EuiAlert component to provide a title for the alert message.
 *
 * @see {@link EuiAlertComponent} for more details on how to use the alert component.
 */
class EuiAlertTitleComponent {
    constructor() {
        /**
         * @description
         * Computes and returns the CSS classes for the label title component based on its current state.
         *
         * @returns {string} Space-separated string of CSS class names
         */
        this.class = 'eui-alert-title';
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EuiAlertTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: EuiAlertTitleComponent, isStandalone: true, selector: "eui-alert-title", host: { properties: { "class": "this.class" } }, ngImport: i0, template: '<ng-content />', isInline: true, styles: [".eui-19 .eui-alert :host{font:var(--_title-font);color:var(--_title-color)}\n"] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EuiAlertTitleComponent, decorators: [{
            type: Component,
            args: [{ selector: 'eui-alert-title', template: '<ng-content />', styles: [".eui-19 .eui-alert :host{font:var(--_title-font);color:var(--_title-color)}\n"] }]
        }], propDecorators: { class: [{
                type: HostBinding,
                args: ['class']
            }] } });

/**
 * @description
 * Alert displays a short, important message to attract the user's attention without interrupting its task.
 */
class EuiAlertComponent {
    constructor() {
        this.baseStatesDirective = inject(BaseStatesDirective);
        /**
         * Sets the `role` attribute for the host element.
         *
         * @default 'alert'
         */
        this.role = 'alert';
        /**
         * Sets the `data-e2e` attribute for the host element. Default: `eui-alert`.
         *
         * @default 'eui-alert'
         */
        this.e2eAttr = 'eui-alert';
        /**
         * Removes the left border and icon from the alert.
         *
         * @default false
         */
        this.isMuted = false;
        /**
         * Removes the left border and icon from the alert.
         *
         * @default false
         */
        this.isBordered = false;
        /**
         * Allows the alert to be closed by the user.
         *
         * @default false
         */
        this.isCloseable = false;
        /**
         * Allows the alert to be focused by the user.
         *
         * @default false
         */
        this.isFocusable = false;
        /**
         * Controls the visibility of the alert. Default: true
         *
         * @default true
         */
        this.isVisible = true;
        /**
         * Event emitted when the alert is closed.
         */
        this.closeAlert = new EventEmitter();
    }
    /**
     * @description
     * Computes and returns the CSS classes for the component based on its current state.
     *
     * @returns {string} Space-separated string of CSS class names
     */
    get cssClasses() {
        return [
            this.baseStatesDirective.getCssClasses('eui-alert'),
            this.isMuted ? 'eui-alert--muted' : '',
            this.isFocusable ? 'eui-alert--focusable' : '',
            this.isCloseable ? 'eui-alert--closeable' : '',
            this.isBordered ? 'eui-alert--bordered' : '',
            !this.isVisible ? 'eui-alert--hidden' : '',
            this.alertTitle ? 'eui-alert--with-title' : '',
        ]
            .join(' ')
            .trim();
    }
    /**
     * Sets the `aria-describedby` attribute for the host element.
     *
     * @default `alertContent-${uniqueId}`
     * @returns The ID of the element associated with the alert.
     */
    get ariaDescribedBy() {
        return `alertContent-${this.uniqueId}`;
    }
    /**
     * Sets the `tabindex` attribute for the host element.
     *
     * @returns '0' if defined as focusable else '1' as string.
     */
    get tabindex() {
        return this.isFocusable ? '0' : '-1';
    }
    /**
     * @description
     * Lifecycle hook that is called after the component has been initialized.
     */
    ngOnInit() {
        if (!this.baseStatesDirective.euiVariant) {
            this.baseStatesDirective.euiInfo = true;
        }
        this.uniqueId = uniqueId();
    }
    /**
     * Hide the alert and emits the `closeAlert` event when the close button is clicked.
     */
    onCloseClick() {
        this.isVisible = false;
        this.closeAlert.emit(false);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EuiAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: EuiAlertComponent, isStandalone: true, selector: "div[euiAlert], eui-alert", inputs: { ariaDescribedBy: "ariaDescribedBy", e2eAttr: "e2eAttr", isMuted: ["isMuted", "isMuted", booleanAttribute], isBordered: ["isBordered", "isBordered", booleanAttribute], isCloseable: ["isCloseable", "isCloseable", booleanAttribute], isFocusable: ["isFocusable", "isFocusable", booleanAttribute], isVisible: ["isVisible", "isVisible", booleanAttribute] }, outputs: { closeAlert: "closeAlert" }, host: { properties: { "class": "this.cssClasses", "attr.role": "this.role", "attr.aria-describedby": "this.ariaDescribedBy", "attr.tabindex": "this.tabindex", "attr.data-e2e": "this.e2eAttr" } }, queries: [{ propertyName: "alertTitle", first: true, predicate: i0.forwardRef(() => EuiAlertTitleComponent), descendants: true }], hostDirectives: [{ directive: i1.BaseStatesDirective, inputs: ["euiSuccess", "euiSuccess", "euiInfo", "euiInfo", "euiWarning", "euiWarning", "euiDanger", "euiDanger", "euiVariant", "euiVariant"] }], ngImport: i0, template: "@if (alertTitle) {\n    <div class=\"eui-alert-container\">\n        <div class=\"eui-alert-title-wrapper\">\n            @if (!isMuted) {\n                <ng-content *ngTemplateOutlet=\"icon\"/>\n            }\n            <ng-content select=\"eui-alert-title\"/>\n        </div>\n        <ng-content *ngTemplateOutlet=\"body\"/>\n    </div>\n\n} @else {\n    @if (!isMuted) {\n        <ng-content *ngTemplateOutlet=\"icon\"/>\n    }\n    <ng-content *ngTemplateOutlet=\"body\"/>\n}\n\n<ng-template #icon>\n    <eui-icon-state class=\"eui-alert-icon\" \n        [euiInfo]=\"baseStatesDirective.euiInfo\"\n        [euiWarning]=\"baseStatesDirective.euiWarning\"\n        [euiDanger]=\"baseStatesDirective.euiDanger\"\n        [euiSuccess]=\"baseStatesDirective.euiSuccess\"/>\n</ng-template>\n\n<ng-template #body>\n    <div class=\"eui-alert-content\" [id]=\"ariaDescribedBy\">\n        <ng-content/>\n    </div>\n</ng-template>\n\n@if (isCloseable) {\n    <eui-icon-button class=\"eui-alert-close\"\n        icon=\"close:outline\"\n        euiRounded\n        (buttonClick)=\"onCloseClick()\"\n        fillColor=\"neutral-light\"\n        ariaLabel=\"Close alert icon\"\n        [euiInfo]=\"baseStatesDirective.euiInfo\"\n        [euiWarning]=\"baseStatesDirective.euiWarning\"\n        [euiDanger]=\"baseStatesDirective.euiDanger\"\n        [euiSuccess]=\"baseStatesDirective.euiSuccess\"/>\n}\n", styles: [".eui-19.eui-t-ds2025 :host.eui-alert{--_border-left-width: var(--eui-bw-m);--_border-radius: var(--eui-br-m);--_title-color: var(--eui-c-text);--_title-font: var(--eui-f-title-2xs-semi-bold);--_content-font: var(--eui-f-body-m-regular);--_content-font-with-title: var(--eui-f-body-s-regular)}.eui-19.eui-t-ds2025 :host.eui-alert--info{--_border-left-color: var(--eui-c-s-info-base)}.eui-19.eui-t-ds2025 :host.eui-alert--success{--_border-left-color: var(--eui-c-s-success-base)}.eui-19.eui-t-ds2025 :host.eui-alert--danger{--_border-left-color: var(--eui-c-s-danger-base)}.eui-19.eui-t-ds2025 :host.eui-alert--warning{--_border-left-color: var(--eui-c-s-warning-base)}.eui-19.eui-t-ds2025 :host.eui-alert--bordered.eui-alert--info{--_border-left-color: var(--eui-c-s-info-base)}.eui-19.eui-t-ds2025 :host.eui-alert--bordered.eui-alert--success{--_border-left-color: var(--eui-c-s-success-base)}.eui-19.eui-t-ds2025 :host.eui-alert--bordered.eui-alert--danger{--_border-left-color: var(--eui-c-s-danger-base)}.eui-19.eui-t-ds2025 :host.eui-alert--bordered.eui-alert--warning{--_border-left-color: var(--eui-c-s-warning-base)}.eui-19 :host.eui-alert{--_color: var(--eui-c-text);--_bg-color: var(--eui-c-s-info-surface-light);--_border-color: transparent;--_border-width: var(--eui-bw-none);--_border-left-width: var(--eui-bw-none);--_border-left-color: transparent;--_border-radius: var(--eui-br-s);--_title-color: var(--eui-c-s-info);--_title-font: var(--eui-f-m-bold);--_content-font: var(--eui-f-m);--_content-font-with-title: var(--eui-f-m)}.eui-19 :host.eui-alert--info{--_color: var(--eui-c-text);--_bg-color: var(--eui-c-s-info-surface-light);--_title-color: var(--eui-c-s-info)}.eui-19 :host.eui-alert--success{--_color: var(--eui-c-text);--_bg-color: var(--eui-c-s-success-surface-light);--_title-color: var(--eui-c-s-success)}.eui-19 :host.eui-alert--danger{--_color: var(--eui-c-text);--_bg-color: var(--eui-c-s-danger-surface-light);--_title-color: var(--eui-c-s-danger)}.eui-19 :host.eui-alert--warning{--_color: var(--eui-c-text);--_bg-color: var(--eui-c-s-warning-surface-light);--_title-color: var(--eui-c-s-warning)}.eui-19 :host.eui-alert--bordered{--_border-color: var(--eui-c-divider);--_bg-color: var(--eui-c-surface-container);--_border-width: var(--eui-bw-xs);--_border-left-width: var(--eui-bw-m);--_border-left-color: var(--eui-c-s-info)}.eui-19 :host.eui-alert--bordered.eui-alert--info{--_border-left-color: var(--eui-c-s-info)}.eui-19 :host.eui-alert--bordered.eui-alert--success{--_border-left-color: var(--eui-c-s-success)}.eui-19 :host.eui-alert--bordered.eui-alert--danger{--_border-left-color: var(--eui-c-s-danger)}.eui-19 :host.eui-alert--bordered.eui-alert--warning{--_border-left-color: var(--eui-c-s-warning)}.eui-19 :host.eui-alert{display:flex;padding:var(--eui-s-m);border-radius:var(--_border-radius);background-color:var(--_bg-color);border:var(--_border-width) solid var(--_border-color);border-left:var(--_border-left-width) solid var(--_border-left-color);color:var(--_color);position:relative;font:var(--_content-font)}.eui-19 :host.eui-alert .eui-alert-container{display:flex;flex-direction:column;row-gap:var(--eui-s-s)}.eui-19 :host.eui-alert .eui-alert-title-wrapper{display:flex}.eui-19 :host.eui-alert .eui-alert-icon{margin-right:var(--eui-s-xs)}.eui-19 :host.eui-alert .eui-alert-content{display:block}.eui-19 :host.eui-alert .eui-alert-content p:first-child{margin-top:0}.eui-19 :host.eui-alert .eui-alert-content p:last-child{margin-bottom:0}.eui-19 :host.eui-alert .eui-alert-close{position:absolute;top:var(--eui-s-xs);right:var(--eui-s-xs)}.eui-19 :host.eui-alert--with-title{font:var(--_content-font-with-title)}.eui-19 :host.eui-alert--hidden{display:none}.eui-19 :host.eui-alert--focusable:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-19 :host.eui-alert--closeable{padding-right:var(--eui-s-4xl)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.EuiIconButtonComponent, selector: "eui-icon-button", inputs: ["icon", "iconUrl", "fillColor", "size", "ariaLabel", "tabindex", "hasNoPadding", "hasOverflowHover", "hasFocusHoverColor", "hasFocusHoverBg", "euiRounded", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i3.EuiIconStateComponent, selector: "eui-icon-state", inputs: ["size", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EuiAlertComponent, decorators: [{
            type: Component,
            args: [{ selector: 'div[euiAlert], eui-alert', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                        NgTemplateOutlet,
                        ...EUI_ICON_BUTTON,
                        ...EUI_ICON_STATE,
                    ], hostDirectives: [
                        {
                            directive: BaseStatesDirective,
                            inputs: [
                                'euiSuccess',
                                'euiInfo',
                                'euiWarning',
                                'euiDanger',
                                'euiVariant',
                            ],
                        },
                    ], template: "@if (alertTitle) {\n    <div class=\"eui-alert-container\">\n        <div class=\"eui-alert-title-wrapper\">\n            @if (!isMuted) {\n                <ng-content *ngTemplateOutlet=\"icon\"/>\n            }\n            <ng-content select=\"eui-alert-title\"/>\n        </div>\n        <ng-content *ngTemplateOutlet=\"body\"/>\n    </div>\n\n} @else {\n    @if (!isMuted) {\n        <ng-content *ngTemplateOutlet=\"icon\"/>\n    }\n    <ng-content *ngTemplateOutlet=\"body\"/>\n}\n\n<ng-template #icon>\n    <eui-icon-state class=\"eui-alert-icon\" \n        [euiInfo]=\"baseStatesDirective.euiInfo\"\n        [euiWarning]=\"baseStatesDirective.euiWarning\"\n        [euiDanger]=\"baseStatesDirective.euiDanger\"\n        [euiSuccess]=\"baseStatesDirective.euiSuccess\"/>\n</ng-template>\n\n<ng-template #body>\n    <div class=\"eui-alert-content\" [id]=\"ariaDescribedBy\">\n        <ng-content/>\n    </div>\n</ng-template>\n\n@if (isCloseable) {\n    <eui-icon-button class=\"eui-alert-close\"\n        icon=\"close:outline\"\n        euiRounded\n        (buttonClick)=\"onCloseClick()\"\n        fillColor=\"neutral-light\"\n        ariaLabel=\"Close alert icon\"\n        [euiInfo]=\"baseStatesDirective.euiInfo\"\n        [euiWarning]=\"baseStatesDirective.euiWarning\"\n        [euiDanger]=\"baseStatesDirective.euiDanger\"\n        [euiSuccess]=\"baseStatesDirective.euiSuccess\"/>\n}\n", styles: [".eui-19.eui-t-ds2025 :host.eui-alert{--_border-left-width: var(--eui-bw-m);--_border-radius: var(--eui-br-m);--_title-color: var(--eui-c-text);--_title-font: var(--eui-f-title-2xs-semi-bold);--_content-font: var(--eui-f-body-m-regular);--_content-font-with-title: var(--eui-f-body-s-regular)}.eui-19.eui-t-ds2025 :host.eui-alert--info{--_border-left-color: var(--eui-c-s-info-base)}.eui-19.eui-t-ds2025 :host.eui-alert--success{--_border-left-color: var(--eui-c-s-success-base)}.eui-19.eui-t-ds2025 :host.eui-alert--danger{--_border-left-color: var(--eui-c-s-danger-base)}.eui-19.eui-t-ds2025 :host.eui-alert--warning{--_border-left-color: var(--eui-c-s-warning-base)}.eui-19.eui-t-ds2025 :host.eui-alert--bordered.eui-alert--info{--_border-left-color: var(--eui-c-s-info-base)}.eui-19.eui-t-ds2025 :host.eui-alert--bordered.eui-alert--success{--_border-left-color: var(--eui-c-s-success-base)}.eui-19.eui-t-ds2025 :host.eui-alert--bordered.eui-alert--danger{--_border-left-color: var(--eui-c-s-danger-base)}.eui-19.eui-t-ds2025 :host.eui-alert--bordered.eui-alert--warning{--_border-left-color: var(--eui-c-s-warning-base)}.eui-19 :host.eui-alert{--_color: var(--eui-c-text);--_bg-color: var(--eui-c-s-info-surface-light);--_border-color: transparent;--_border-width: var(--eui-bw-none);--_border-left-width: var(--eui-bw-none);--_border-left-color: transparent;--_border-radius: var(--eui-br-s);--_title-color: var(--eui-c-s-info);--_title-font: var(--eui-f-m-bold);--_content-font: var(--eui-f-m);--_content-font-with-title: var(--eui-f-m)}.eui-19 :host.eui-alert--info{--_color: var(--eui-c-text);--_bg-color: var(--eui-c-s-info-surface-light);--_title-color: var(--eui-c-s-info)}.eui-19 :host.eui-alert--success{--_color: var(--eui-c-text);--_bg-color: var(--eui-c-s-success-surface-light);--_title-color: var(--eui-c-s-success)}.eui-19 :host.eui-alert--danger{--_color: var(--eui-c-text);--_bg-color: var(--eui-c-s-danger-surface-light);--_title-color: var(--eui-c-s-danger)}.eui-19 :host.eui-alert--warning{--_color: var(--eui-c-text);--_bg-color: var(--eui-c-s-warning-surface-light);--_title-color: var(--eui-c-s-warning)}.eui-19 :host.eui-alert--bordered{--_border-color: var(--eui-c-divider);--_bg-color: var(--eui-c-surface-container);--_border-width: var(--eui-bw-xs);--_border-left-width: var(--eui-bw-m);--_border-left-color: var(--eui-c-s-info)}.eui-19 :host.eui-alert--bordered.eui-alert--info{--_border-left-color: var(--eui-c-s-info)}.eui-19 :host.eui-alert--bordered.eui-alert--success{--_border-left-color: var(--eui-c-s-success)}.eui-19 :host.eui-alert--bordered.eui-alert--danger{--_border-left-color: var(--eui-c-s-danger)}.eui-19 :host.eui-alert--bordered.eui-alert--warning{--_border-left-color: var(--eui-c-s-warning)}.eui-19 :host.eui-alert{display:flex;padding:var(--eui-s-m);border-radius:var(--_border-radius);background-color:var(--_bg-color);border:var(--_border-width) solid var(--_border-color);border-left:var(--_border-left-width) solid var(--_border-left-color);color:var(--_color);position:relative;font:var(--_content-font)}.eui-19 :host.eui-alert .eui-alert-container{display:flex;flex-direction:column;row-gap:var(--eui-s-s)}.eui-19 :host.eui-alert .eui-alert-title-wrapper{display:flex}.eui-19 :host.eui-alert .eui-alert-icon{margin-right:var(--eui-s-xs)}.eui-19 :host.eui-alert .eui-alert-content{display:block}.eui-19 :host.eui-alert .eui-alert-content p:first-child{margin-top:0}.eui-19 :host.eui-alert .eui-alert-content p:last-child{margin-bottom:0}.eui-19 :host.eui-alert .eui-alert-close{position:absolute;top:var(--eui-s-xs);right:var(--eui-s-xs)}.eui-19 :host.eui-alert--with-title{font:var(--_content-font-with-title)}.eui-19 :host.eui-alert--hidden{display:none}.eui-19 :host.eui-alert--focusable:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-19 :host.eui-alert--closeable{padding-right:var(--eui-s-4xl)}\n"] }]
        }], propDecorators: { cssClasses: [{
                type: HostBinding,
                args: ['class']
            }], role: [{
                type: HostBinding,
                args: ['attr.role']
            }], ariaDescribedBy: [{
                type: HostBinding,
                args: ['attr.aria-describedby']
            }, {
                type: Input
            }], tabindex: [{
                type: HostBinding,
                args: ['attr.tabindex']
            }], e2eAttr: [{
                type: HostBinding,
                args: ['attr.data-e2e']
            }, {
                type: Input
            }], isMuted: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], isBordered: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], isCloseable: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], isFocusable: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], isVisible: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], closeAlert: [{
                type: Output
            }], alertTitle: [{
                type: ContentChild,
                args: [forwardRef(() => EuiAlertTitleComponent), { static: false }]
            }] } });

/**
 * @description
 * Module that provides the EuiAlert component and its dependencies
 *
 * @deprecated Use {@link EUI_ALERT} instead.
 */
class EuiAlertModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EuiAlertModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: EuiAlertModule, imports: [EuiAlertComponent,
            EuiAlertTitleComponent], exports: [EuiAlertComponent, EuiAlertTitleComponent] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EuiAlertModule, imports: [EuiAlertComponent] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EuiAlertModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [
                        EuiAlertComponent,
                        EuiAlertTitleComponent,
                    ],
                    exports: [EuiAlertComponent, EuiAlertTitleComponent],
                }]
        }] });

const EUI_ALERT = [
    EuiAlertComponent,
    EuiAlertTitleComponent,
];

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

export { EUI_ALERT, EuiAlertComponent, EuiAlertModule, EuiAlertTitleComponent };
//# sourceMappingURL=eui-components-eui-alert.mjs.map
