import * as i0 from '@angular/core';
import { HostBinding, Component, inject, input, booleanAttribute, model, output, forwardRef, ContentChild, ChangeDetectionStrategy } 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';

/**
 * @description
 * Title subcomponent for eui-alert that displays a prominent heading above the alert message.
 * Provides semantic structure and visual hierarchy within alert messages.
 * Content is projected via ng-content, allowing text or inline elements as title content.
 * Automatically styled to match the parent alert's variant and visual design.
 * Must be used as a direct child of eui-alert component for proper styling and structure.
 *
 * @usageNotes
 * #### Alert with title
 * ```html
 * <eui-alert euiSuccess>
 *   <eui-alert-title>Success</eui-alert-title>
 *   Your operation completed successfully.
 * </eui-alert>
 * ```
 *
 * #### Alert with title and multiple variants
 * ```html
 * <eui-alert euiWarning>
 *   <eui-alert-title>Warning</eui-alert-title>
 *   Please review the following issues before proceeding.
 * </eui-alert>
 * ```
 *
 * ### Accessibility
 * - Provides semantic structure that helps screen readers distinguish title from content
 * - Title is announced first, giving context before the main message
 * - Visual hierarchy aids users with cognitive disabilities in understanding message importance
 *
 * ### Notes
 * - Must be used within eui-alert component
 * - Should be placed before the main alert content
 * - Only one title per alert is recommended for clarity
 * - Title styling automatically inherits from parent alert variant
 * - Keep titles concise - typically 1-3 words for quick comprehension
 */
class EuiAlertTitleComponent {
    constructor() {
        /**
         * @description
         * Computes and returns the CSS classes for the label title component based on its current state.
         *
         * @default 'eui-alert-title'
         * @returns {string} Space-separated string of CSS class names
         */
        this.class = 'eui-alert-title';
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: EuiAlertTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.16", type: EuiAlertTitleComponent, isStandalone: true, selector: "eui-alert-title", host: { properties: { "class": "this.class" } }, ngImport: i0, template: '<ng-content />', isInline: true, styles: [".eui-21 .eui-alert :host{font:var(--_title-font);color:var(--_title-color)}\n"] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: EuiAlertTitleComponent, decorators: [{
            type: Component,
            args: [{ selector: 'eui-alert-title', template: '<ng-content />', styles: [".eui-21 .eui-alert :host{font:var(--_title-font);color:var(--_title-color)}\n"] }]
        }], propDecorators: { class: [{
                type: HostBinding,
                args: ['class']
            }] } });

/**
 * @description
 * Alert component for displaying short, important messages that attract user attention without interrupting tasks.
 * Provides semantic variants (success, info, warning, danger) with corresponding visual styling and icons.
 * Supports optional title section, close button, and keyboard focus for accessibility.
 * Visibility can be controlled programmatically or by user dismissal via close button.
 * Includes ARIA attributes for screen reader support and unique ID generation for content association.
 *
 * @structure
 * - Supports four semantic variants: success, info, warning, and danger (via BaseStatesDirective)
 * - Optional title section via `<eui-alert-title>` content projection
 * - Main content area for alert message (projected via ng-content)
 * - Optional close button when `isCloseable` is true
 * - Icon state indicator matching the alert variant
 *
 * @features
 * - Closeable: Can be dismissed by user via close button
 * - Focusable: Can receive keyboard focus for accessibility
 * - Visibility control: Can be shown/hidden via `isVisible` model
 * - Accessibility: Includes ARIA attributes (role="alert", aria-describedby)
 * - Unique ID generation for content association
 *
 * @usageNotes
 * #### Basic alert (defaults to info variant)
 * ```html
 * <eui-alert>
 *   Important message for the user
 * </eui-alert>
 * ```
 *
 * #### Alert with title and variant
 * ```html
 * <eui-alert euiSuccess>
 *   <eui-alert-title>Success</eui-alert-title>
 *   Your changes have been saved successfully.
 * </eui-alert>
 * ```
 *
 * #### Closeable alert with visibility control
 * ```html
 * <eui-alert euiWarning [isCloseable]="true" [(isVisible)]="showAlert" (closeAlert)="onClose()">
 *   This is a dismissible warning message.
 * </eui-alert>
 * ```
 *
 * #### Focusable alert for keyboard navigation
 * ```html
 * <eui-alert euiDanger [isFocusable]="true">
 *   Critical error that requires attention.
 * </eui-alert>
 * ```
 *
 * ### Accessibility
 * - Uses role="alert" for immediate screen reader announcement of important messages
 * - aria-describedby links alert to its content for proper association
 * - Keyboard focusable when isFocusable is true (tabindex="0")
 * - Close button is keyboard accessible with Enter/Space keys
 * - Semantic variants provide visual and contextual meaning for all users
 * - Icon state indicators supplement color for users with color vision deficiencies
 *
 * ### Notes
 * - Defaults to info variant if no variant is specified
 * - isVisible is a two-way bindable model for programmatic control
 * - closeAlert event emits false when alert is dismissed
 * - Alert remains in DOM when hidden (display: none), use *ngIf for removal
 * - Use sparingly to avoid alert fatigue - reserve for truly important messages
 * - Consider toast notifications for less critical, temporary messages
 */
class EuiAlertComponent {
    constructor() {
        this.baseStatesDirective = inject(BaseStatesDirective);
        /**
         * Sets the `role` attribute for the host element.
         *
         * @default 'alert'
         */
        this.role = 'alert';
        /**
         * Data attribute value for end-to-end testing identification.
         * Applied as data-e2e attribute on the host element.
         * @default 'eui-alert'
         */
        this.e2eAttr = input('eui-alert', ...(ngDevMode ? [{ debugName: "e2eAttr" }] : /* istanbul ignore next */ []));
        /**
         * Enables a close button allowing users to dismiss the alert.
         * When true, displays a close icon button that hides the alert and emits closeAlert event.
         * @default false
         */
        this.isCloseable = input(false, { ...(ngDevMode ? { debugName: "isCloseable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
        /**
         * Makes the alert focusable via keyboard navigation.
         * When true, sets tabindex to 0 enabling keyboard focus for accessibility.
         * @default false
         */
        this.isFocusable = input(false, { ...(ngDevMode ? { debugName: "isFocusable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
        /**
         * Controls the visibility state of the alert.
         * Two-way bindable model that can be programmatically controlled or updated by user dismissal.
         * @default true
         */
        this.isVisible = model(true, ...(ngDevMode ? [{ debugName: "isVisible" }] : /* istanbul ignore next */ []));
        /**
         * Emitted when the alert is closed via the close button.
         * Payload: boolean - always emits false to indicate alert is hidden
         * Triggered when user clicks the close button (when isCloseable is true).
         */
        this.closeAlert = output();
        /**
         * @description
         * Unique identifier for the alert component.
         * This ID is used to associate the alert with its content for accessibility purposes.
         * It is generated using the `crypto` API to ensure uniqueness.
         */
        this.uniqueId = crypto.randomUUID();
    }
    /**
     * @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.isFocusable() ? 'eui-alert--focusable' : '',
            this.isCloseable() ? 'eui-alert--closeable' : '',
            !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';
    }
    /**
     * Sets the `data-e2e` attribute for the host element. It is used for end-to-end testing.
     *
     * @default 'eui-alert'
     */
    get e2eAttribute() {
        return this.e2eAttr();
    }
    /**
     * Initializes the component.
     * Generates a unique ID for the alert on component initialization.
     */
    ngOnInit() {
        if (!this.baseStatesDirective.euiVariant) {
            this.baseStatesDirective.euiInfo = true;
        }
    }
    /**
     * Hide the alert and emits the `closeAlert` event when the close button is clicked.
     */
    onCloseClick() {
        this.isVisible.set(false);
        this.closeAlert.emit(false);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: EuiAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: EuiAlertComponent, isStandalone: true, selector: "div[euiAlert], eui-alert", inputs: { e2eAttr: { classPropertyName: "e2eAttr", publicName: "e2eAttr", isSignal: true, isRequired: false, transformFunction: null }, isCloseable: { classPropertyName: "isCloseable", publicName: "isCloseable", isSignal: true, isRequired: false, transformFunction: null }, isFocusable: { classPropertyName: "isFocusable", publicName: "isFocusable", isSignal: true, isRequired: false, transformFunction: null }, isVisible: { classPropertyName: "isVisible", publicName: "isVisible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isVisible: "isVisibleChange", closeAlert: "closeAlert" }, host: { properties: { "class": "this.cssClasses", "attr.role": "this.role", "attr.aria-describedby": "this.ariaDescribedBy", "attr.tabindex": "this.tabindex", "attr.data-e2e": "this.e2eAttribute" } }, 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            <ng-content *ngTemplateOutlet=\"icon\"/>\n            <ng-content select=\"eui-alert-title\"/>\n        </div>\n        <ng-content *ngTemplateOutlet=\"body\"/>\n    </div>\n} @else {\n    <ng-content *ngTemplateOutlet=\"icon\"/>\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=\"eui-close\"\n        euiRounded\n        (buttonClick)=\"onCloseClick()\"\n        fillColor=\"secondary\"\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-21 :host.eui-alert{--_color: var(--eui-c-text);--_bg-color: var(--eui-c-info-surface-light);--_border-left-width: var(--eui-bw-m);--_border-radius: var(--eui-br-s);--_title-color: var(--eui-c-text);--_border-color: transparent;--_border-width: var(--eui-bw-none);--_title-font: var(--eui-f-m-semi-bold);--_content-font: var(--eui-f-m);--_content-font-with-title: var(--eui-f-m)}.eui-21 :host.eui-alert--info{--_color: var(--eui-c-text);--_bg-color: var(--eui-c-info-surface-light);--_title-color: var(--eui-c-info);--_border-left-color: var(--eui-c-info-base)}.eui-21 :host.eui-alert--success{--_color: var(--eui-c-text);--_bg-color: var(--eui-c-success-surface-light);--_title-color: var(--eui-c-success);--_border-left-color: var(--eui-c-success-base)}.eui-21 :host.eui-alert--danger{--_color: var(--eui-c-text);--_bg-color: var(--eui-c-danger-surface-light);--_title-color: var(--eui-c-danger);--_border-left-color: var(--eui-c-danger-base)}.eui-21 :host.eui-alert--warning{--_color: var(--eui-c-text);--_bg-color: var(--eui-c-warning-surface-light);--_title-color: var(--eui-c-warning);--_border-left-color: var(--eui-c-warning-base)}.eui-21 :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-info)}.eui-21 :host.eui-alert--bordered.eui-alert--info{--_border-left-color: var(--eui-c-info)}.eui-21 :host.eui-alert--bordered.eui-alert--success{--_border-left-color: var(--eui-c-success)}.eui-21 :host.eui-alert--bordered.eui-alert--danger{--_border-left-color: var(--eui-c-danger)}.eui-21 :host.eui-alert--bordered.eui-alert--warning{--_border-left-color: var(--eui-c-warning)}.eui-21 :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-21 :host.eui-alert .eui-alert-container{display:flex;flex-direction:column;row-gap:var(--eui-s-s)}.eui-21 :host.eui-alert .eui-alert-title-wrapper{display:flex}.eui-21 :host.eui-alert .eui-alert-icon{margin-right:var(--eui-s-xs)}.eui-21 :host.eui-alert .eui-alert-content{display:block}.eui-21 :host.eui-alert .eui-alert-content p:first-child{margin-top:0}.eui-21 :host.eui-alert .eui-alert-content p:last-child{margin-bottom:0}.eui-21 :host.eui-alert .eui-alert-close{position:absolute;top:var(--eui-s-xs);right:var(--eui-s-xs)}.eui-21 :host.eui-alert--with-title{font:var(--_content-font-with-title)}.eui-21 :host.eui-alert--hidden{display:none}.eui-21 :host.eui-alert--focusable:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-21 :host.eui-alert--closeable{padding-right:var(--eui-s-6xl)}\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: "21.2.16", 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            <ng-content *ngTemplateOutlet=\"icon\"/>\n            <ng-content select=\"eui-alert-title\"/>\n        </div>\n        <ng-content *ngTemplateOutlet=\"body\"/>\n    </div>\n} @else {\n    <ng-content *ngTemplateOutlet=\"icon\"/>\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=\"eui-close\"\n        euiRounded\n        (buttonClick)=\"onCloseClick()\"\n        fillColor=\"secondary\"\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-21 :host.eui-alert{--_color: var(--eui-c-text);--_bg-color: var(--eui-c-info-surface-light);--_border-left-width: var(--eui-bw-m);--_border-radius: var(--eui-br-s);--_title-color: var(--eui-c-text);--_border-color: transparent;--_border-width: var(--eui-bw-none);--_title-font: var(--eui-f-m-semi-bold);--_content-font: var(--eui-f-m);--_content-font-with-title: var(--eui-f-m)}.eui-21 :host.eui-alert--info{--_color: var(--eui-c-text);--_bg-color: var(--eui-c-info-surface-light);--_title-color: var(--eui-c-info);--_border-left-color: var(--eui-c-info-base)}.eui-21 :host.eui-alert--success{--_color: var(--eui-c-text);--_bg-color: var(--eui-c-success-surface-light);--_title-color: var(--eui-c-success);--_border-left-color: var(--eui-c-success-base)}.eui-21 :host.eui-alert--danger{--_color: var(--eui-c-text);--_bg-color: var(--eui-c-danger-surface-light);--_title-color: var(--eui-c-danger);--_border-left-color: var(--eui-c-danger-base)}.eui-21 :host.eui-alert--warning{--_color: var(--eui-c-text);--_bg-color: var(--eui-c-warning-surface-light);--_title-color: var(--eui-c-warning);--_border-left-color: var(--eui-c-warning-base)}.eui-21 :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-info)}.eui-21 :host.eui-alert--bordered.eui-alert--info{--_border-left-color: var(--eui-c-info)}.eui-21 :host.eui-alert--bordered.eui-alert--success{--_border-left-color: var(--eui-c-success)}.eui-21 :host.eui-alert--bordered.eui-alert--danger{--_border-left-color: var(--eui-c-danger)}.eui-21 :host.eui-alert--bordered.eui-alert--warning{--_border-left-color: var(--eui-c-warning)}.eui-21 :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-21 :host.eui-alert .eui-alert-container{display:flex;flex-direction:column;row-gap:var(--eui-s-s)}.eui-21 :host.eui-alert .eui-alert-title-wrapper{display:flex}.eui-21 :host.eui-alert .eui-alert-icon{margin-right:var(--eui-s-xs)}.eui-21 :host.eui-alert .eui-alert-content{display:block}.eui-21 :host.eui-alert .eui-alert-content p:first-child{margin-top:0}.eui-21 :host.eui-alert .eui-alert-content p:last-child{margin-bottom:0}.eui-21 :host.eui-alert .eui-alert-close{position:absolute;top:var(--eui-s-xs);right:var(--eui-s-xs)}.eui-21 :host.eui-alert--with-title{font:var(--_content-font-with-title)}.eui-21 :host.eui-alert--hidden{display:none}.eui-21 :host.eui-alert--focusable:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-21 :host.eui-alert--closeable{padding-right:var(--eui-s-6xl)}\n"] }]
        }], propDecorators: { cssClasses: [{
                type: HostBinding,
                args: ['class']
            }], role: [{
                type: HostBinding,
                args: ['attr.role']
            }], ariaDescribedBy: [{
                type: HostBinding,
                args: ['attr.aria-describedby']
            }], tabindex: [{
                type: HostBinding,
                args: ['attr.tabindex']
            }], e2eAttribute: [{
                type: HostBinding,
                args: ['attr.data-e2e']
            }], e2eAttr: [{ type: i0.Input, args: [{ isSignal: true, alias: "e2eAttr", required: false }] }], isCloseable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCloseable", required: false }] }], isFocusable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isFocusable", required: false }] }], isVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "isVisible", required: false }] }, { type: i0.Output, args: ["isVisibleChange"] }], closeAlert: [{ type: i0.Output, args: ["closeAlert"] }], alertTitle: [{
                type: ContentChild,
                args: [forwardRef(() => EuiAlertTitleComponent), { static: false }]
            }] } });

const EUI_ALERT = [
    EuiAlertComponent,
    EuiAlertTitleComponent,
];

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

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