import * as i0 from '@angular/core';
import { inject, ElementRef, input, booleanAttribute, model, output, computed, effect, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
import * as i4 from '@ngx-translate/core';
import { TranslateModule } from '@ngx-translate/core';
import * as i1 from '@eui/components/eui-icon';
import { EUI_ICON } from '@eui/components/eui-icon';
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';

/**
 * Notification component that displays temporary or persistent messages to users.
 * Supports multiple message types (success, info, warning, error) with automatic dismissal or sticky behavior.
 * Messages can be positioned in different screen locations and include customizable lifecycle durations.
 * Implements ARIA live regions for accessibility, announcing messages to screen readers.
 * Commonly used for user feedback, system notifications, and operation status updates.
 *
 * @usageNotes
 * ### Basic growl notification
 * ```typescript
 * messages: EuiGrowlMessage[] = [];
 *
 * showSuccess() {
 *   this.messages.push({
 *     severity: 'success',
 *     summary: 'Success',
 *     detail: 'Operation completed'
 *   });
 * }
 * ```
 * ```html
 * <eui-growl [value]="messages" position="top-right"></eui-growl>
 * ```
 *
 * ### Sticky notification
 * ```typescript
 * this.messages.push({
 *   severity: 'info',
 *   summary: 'Info',
 *   detail: 'This message stays until dismissed',
 *   sticky: true
 * });
 * ```
 *
 * ### Accessibility
 * - Uses ARIA live regions (aria-live="polite") for screen reader announcements
 * - Messages are announced without interrupting user workflow
 * - Close buttons are keyboard accessible
 *
 * ### Notes
 * - Position options: top-right, top-left, bottom-right, bottom-left, top-center, bottom-center
 * - Non-sticky messages auto-dismiss after `life` milliseconds (default: 3000)
 * - Use `closeAllSticky` to show a clear-all button for multiple sticky messages
 */
class EuiGrowlComponent {
    constructor() {
        this.el = inject(ElementRef);
        this.titleId = 'msg-title';
        this.contentId = 'msg-detail';
        /**
         * Data attribute used for end-to-end testing identification.
         * @default 'eui-growl'
         */
        this.e2eAttr = input('eui-growl', ...(ngDevMode ? [{ debugName: "e2eAttr" }] : []));
        /**
         * ARIA live region politeness level controlling how screen readers announce messages.
         * 'polite' waits for user to finish current activity, 'assertive' interrupts immediately, 'off' disables announcements.
         * @default 'polite'
         */
        this.ariaLive = input('polite', ...(ngDevMode ? [{ debugName: "ariaLive" }] : []));
        /**
         * Prevents automatic dismissal of messages, requiring manual user interaction to close.
         * When true, messages remain visible until explicitly closed by the user.
         * @default false
         */
        this.sticky = input(false, { ...(ngDevMode ? { debugName: "sticky" } : {}), transform: booleanAttribute });
        /**
         * Duration in milliseconds before non-sticky messages automatically dismiss.
         * Individual messages can override this with their own life property.
         * @default 3000
         */
        this.life = input(3000, ...(ngDevMode ? [{ debugName: "life" }] : []));
        /**
         * Array of message objects to display in the growl notification area.
         * Each message should conform to the EuiGrowlMessage interface with properties like severity, summary, and detail.
         * Messages are automatically managed with lifecycle timeouts based on sticky and life properties.
         * @default []
         */
        this.value = model([], ...(ngDevMode ? [{ debugName: "value" }] : []));
        /**
         * Enables display of a close-all button when multiple sticky messages are present.
         * Provides users with a quick way to dismiss all persistent notifications at once.
         * @default false
         */
        this.closeAllSticky = input(false, ...(ngDevMode ? [{ debugName: "closeAllSticky" }] : []));
        /**
         * Screen position where growl messages appear.
         * Common values include 'top-right', 'top-left', 'bottom-right', 'bottom-left', 'top-center', 'bottom-center'.
         * Affects the CSS positioning of the notification container.
         */
        this.position = input(...(ngDevMode ? [undefined, { debugName: "position" }] : []));
        /**
         * Optional callback function executed when a growl message is clicked.
         * Allows custom behavior to be triggered on user interaction with notifications.
         * @default null
         */
        this.callback = input(null, ...(ngDevMode ? [{ debugName: "callback" }] : []));
        /**
         * Emitted when a growl message is clicked by the user.
         * No payload is provided.
         * Triggers in addition to the callback function if one is defined.
         */
        this.growlClick = output();
        /**
         * Emitted when a growl message is closed, either automatically or by user action.
         * No payload is provided.
         * Useful for tracking message dismissals or triggering cleanup operations.
         */
        this.growlClose = output();
        this.cssClasses = computed(() => ['eui-growl', `eui-growl--${this.position()}`].join(' ').trim(), ...(ngDevMode ? [{ debugName: "cssClasses" }] : []));
        this.previousMessages = [];
        effect(() => {
            const current = this.value();
            this.previousMessages
                .filter(msg => !current.includes(msg))
                // clear timeout in the queue to avoid memory leak
                .forEach(msg => clearTimeout(msg?.timeout));
            current
                .filter(msg => !this.previousMessages.includes(msg))
                // for newly added items create timeout if they are not sticky
                .forEach(msg => this.createRemovalTimeout(msg));
            this.previousMessages = current;
        });
    }
    /**
     * @param msg The text message to appear in the container
     */
    remove(msg) {
        msg.dismissed = true;
        clearTimeout(msg.timeout);
        msg.timeout = undefined;
        this.value.update((msgs) => {
            const idx = this.findMessageIndex(msg);
            const updated = [...msgs];
            updated.splice(idx, 1);
            return updated;
        });
        this.growlClose.emit();
    }
    /**
     * Removes all growl messages from the stack
     */
    removeAll() {
        if (this.value()?.length) {
            this.value.set([]);
        }
    }
    onClick() {
        const callback = this.callback();
        if (callback) {
            callback();
        }
        this.growlClick.emit();
    }
    /**
     * check whether sticky growls are greater than two
     */
    isGrowlMoreThanTwo() {
        return this.value().filter((m) => m.sticky).length > 2;
    }
    /**
     * Removes all growl messages from the stack
     *
     * @param value
     */
    createRemovalTimeout(value) {
        // if message it's NOT sticky and there's not any async running timeout
        if (!value.sticky && !value.timeout) {
            // if message it's NOT sticky and there's not any async running timeout
            value.timeout = setTimeout(() => this.remove(value), value.life || this.life());
        }
    }
    /**
     * Finds UxMessage index of the array otherwise returns -1
     *
     * @param msg UxMessage
     */
    findMessageIndex(msg) {
        const msgs = this.value();
        return msgs?.length ? msgs.findIndex((value) => value === msg) : -1;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: EuiGrowlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: EuiGrowlComponent, isStandalone: true, selector: "eui-growl", inputs: { e2eAttr: { classPropertyName: "e2eAttr", publicName: "e2eAttr", isSignal: true, isRequired: false, transformFunction: null }, ariaLive: { classPropertyName: "ariaLive", publicName: "ariaLive", isSignal: true, isRequired: false, transformFunction: null }, sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null }, life: { classPropertyName: "life", publicName: "life", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, closeAllSticky: { classPropertyName: "closeAllSticky", publicName: "closeAllSticky", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, callback: { classPropertyName: "callback", publicName: "callback", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", growlClick: "growlClick", growlClose: "growlClose" }, host: { attributes: { "role": "status" }, listeners: { "click": "onClick()" }, properties: { "class": "cssClasses()", "attr.data-e2e": "e2eAttr()", "attr.aria-live": "ariaLive()", "attr.aria-labelledby": "value().length ? titleId : null", "attr.aria-describedby": "value().length ? contentId : null" } }, ngImport: i0, template: "@for (msg of value(); track msg) {\n<div\n    class=\"eui-growl-item-container eui-u-anim eui-u-anim--fast\"\n    [class.eui-growl-item-container--info]=\"msg.severity === 'info'\"\n    [class.eui--info]=\"msg.severity === 'info'\"\n    [class.eui-growl-item-container--warning]=\"msg.severity === 'warning'\"\n    [class.eui--warning]=\"msg.severity === 'warning'\"\n    [class.eui-growl-item-container--danger]=\"msg.severity === 'danger'\"\n    [class.eui--danger]=\"msg.severity === 'danger'\"\n    [class.eui-growl-item-container--success]=\"msg.severity === 'success'\"\n    [class.eui--success]=\"msg.severity === 'success'\"\n    [class.eui-growl-item-container--filled]=\"msg.filled\"\n    [class.eui-growl--sticky]=\"sticky()\"\n    [class.eui-u-anim--slideInUp]=\"position() === 'bottom-left' || position() === 'bottom-center' || position() === 'bottom-right'\"\n    [class.eui-u-anim--slideInDown]=\"position() === 'top-left' || position() === 'top-center' || position() === 'top-right'\">\n\n    <div class=\"eui-growl-item\">\n        <div class=\"eui-growl-item-summary-wrapper\">\n            <eui-icon-state [euiVariant]=\"msg.severity\" class=\"eui-growl-item-icon\"/>\n            <span [id]=\"titleId\" class=\"eui-growl-item-title\">{{ msg.summary }}</span>\n        </div>\n        <div [id]=\"contentId\" class=\"eui-growl-item-content\" [innerHTML]=\"msg.detail\"></div>\n\n        <eui-icon-button (buttonClick)=\"remove(msg)\"\n            icon=\"eui-close\"\n            fillColor=\"secondary\"\n            euiRounded\n            ariaLabel=\"Close growl icon\"\n            class=\"eui-growl-item-close\" />\n    </div>\n\n</div>\n}\n@if (closeAllSticky() && isGrowlMoreThanTwo()) {\n<div class=\"eui-growl-item-container eui-u-anim eui-u-anim--fast eui-growl-item-container--secondary\">\n    <div class=\"eui-growl-item\">\n        <div class=\"eui-growl-item-summary-wrapper\">\n            <eui-icon-svg icon=\"eui-checkmark-done\"/>\n            <span class=\"eui-growl-item-title\">{{ 'eui.growl.dismiss-all' | translate }}</span>\n        </div>\n        <eui-icon-button (buttonClick)=\"removeAll()\"\n            icon=\"eui-close\"\n            fillColor=\"secondary\"\n            euiRounded\n            ariaLabel=\"Close growl icon\"\n            class=\"eui-growl-item-close\"/>\n    </div>\n</div>\n}\n", styles: [".eui-21 .eui-growl{--_color: var(--eui-growl-color, var(--eui-c-info-on-surface-light));--_bg-color: var(--eui-growl-bg-color, var(--eui-c-info-surface-light));--_color-on-bg: var(--eui-growl-color-on-bg, var(--eui-c-info-on-surface-light));--_close-hover-color: var(--eui-growl-close-hover-color, var(--eui-c-info-surface-light-hover));--eui-bottom-left-horizontal-offset: var(--eui-s-l);--eui-bottom-left-vertical-offset: var(--eui-s-l);--eui-bottom-right-horizontal-offset: var(--eui-s-l);--eui-bottom-right-vertical-offset: var(--eui-s-l)}.eui-21 .eui-growl-item-container--primary{--_color: var(--eui-c-primary);--_bg-color: var(--eui-c-primary-surface-light);--_color-on-bg: var(--eui-c-primary-on-surface-light);--_close-hover-color: var(--eui-c-primary-surface-light-hover)}.eui-21 .eui-growl-item-container--secondary{--_color: var(--eui-c-secondary);--_bg-color: var(--eui-c-secondary-surface-light);--_color-on-bg: var(--eui-c-secondary-on-surface-light);--_close-hover-color: var(--eui-c-secondary-surface-light-hover)}.eui-21 .eui-growl-item-container--info{--_color: var(--eui-c-info);--_bg-color: var(--eui-c-info-surface-light);--_color-on-bg: var(--eui-c-info-on-surface-light);--_close-hover-color: var(--eui-c-info-surface-light-hover)}.eui-21 .eui-growl-item-container--success{--_color: var(--eui-c-success);--_bg-color: var(--eui-c-success-surface-light);--_color-on-bg: var(--eui-c-success-on-surface-light);--_close-hover-color: var(--eui-c-success-surface-light-hover)}.eui-21 .eui-growl-item-container--warning{--_color: var(--eui-c-warning);--_bg-color: var(--eui-c-warning-surface-light);--_color-on-bg: var(--eui-c-warning-on-surface-light);--_close-hover-color: var(--eui-c-warning-surface-light-hover)}.eui-21 .eui-growl-item-container--danger{--_color: var(--eui-c-danger);--_bg-color: var(--eui-c-danger-surface-light);--_color-on-bg: var(--eui-c-danger-on-surface-light);--_close-hover-color: var(--eui-c-danger-surface-light-hover)}.eui-21 .eui-growl-item-container.eui-growl-item-container--filled.eui-growl-item-container--primary{--_bg-color: var(--eui-c-primary-surface);--_color-on-bg: var(--eui-c-primary-on-surface);--_color: var(--eui-c-primary-on-surface);--_icon-color: var(--eui-c-primary-on-surface);--_close-hover-color: var(--eui-c-primary-surface-hover)}.eui-21 .eui-growl-item-container.eui-growl-item-container--filled.eui-growl-item-container--info{--_bg-color: var(--eui-c-info-surface);--_color-on-bg: var(--eui-c-info-on-surface);--_color: var(--eui-c-info-on-surface);--_icon-color: var(--eui-c-info-on-surface);--_close-hover-color: var(--eui-c-info-surface-hover)}.eui-21 .eui-growl-item-container.eui-growl-item-container--filled.eui-growl-item-container--success{--_bg-color: var(--eui-c-success-surface);--_color-on-bg: var(--eui-c-success-on-surface);--_color: var(--eui-c-success-on-surface);--_icon-color: var(--eui-c-success-on-surface);--_close-hover-color: var(--eui-c-success-surface-hover)}.eui-21 .eui-growl-item-container.eui-growl-item-container--filled.eui-growl-item-container--warning{--_bg-color: var(--eui-c-warning-surface);--_color-on-bg: var(--eui-c-warning-on-surface);--_color: var(--eui-c-warning-on-surface);--_icon-color: var(--eui-c-warning-on-surface);--_close-hover-color: var(--eui-c-warning-surface-hover)}.eui-21 .eui-growl-item-container.eui-growl-item-container--filled.eui-growl-item-container--danger{--_bg-color: var(--eui-c-danger-surface);--_color-on-bg: var(--eui-c-danger-on-surface);--_color: var(--eui-c-danger-on-surface);--_icon-color: var(--eui-c-danger-on-surface);--_close-hover-color: var(--eui-c-danger-surface-hover)}.eui-21 .eui-growl{position:fixed;width:20rem;z-index:var(--eui-zi-growl-message)}.eui-21 .eui-growl--bottom-left{bottom:var(--eui-bottom-left-vertical-offset);left:var(--eui-bottom-left-horizontal-offset)}.eui-21 .eui-growl--bottom-center{bottom:var(--eui-s-l)}.eui-21 .eui-growl--bottom-right{bottom:var(--eui-bottom-right-vertical-offset);right:var(--eui-bottom-right-horizontal-offset)}.eui-21 .eui-growl--top-left{left:var(--eui-s-l);top:var(--eui-s-l)}.eui-21 .eui-growl--top-center{top:var(--eui-s-l)}.eui-21 .eui-growl--top-right{right:var(--eui-s-l);top:var(--eui-s-l)}.eui-21 .eui-growl a{text-decoration:underline}.eui-21 .eui-growl-item-container{margin-bottom:var(--eui-s-s);position:relative;background-color:var(--_bg-color);color:var(--_color-on-bg)}.eui-21 .eui-growl-item{display:flex;flex-direction:column;padding:var(--eui-s-m);position:relative;width:20rem;box-shadow:var(--eui-sh-3)}.eui-21 .eui-growl-item-summary-wrapper{display:flex;align-items:center;gap:var(--eui-s-xs)}.eui-21 .eui-growl-item-title{font:var(--eui-f-m-semi-bold);margin-right:var(--eui-s-xl);color:var(--_color)}.eui-21 .eui-growl-item-content:not(:empty){margin-top:var(--eui-s-xs);max-height:80vh;overflow-y:auto;overflow-wrap:break-word;font:var(--eui-f-m)}.eui-21 .eui-growl-item-content:not(:empty)::-webkit-scrollbar{display:inherit;height:8px;width:8px;background-color:var(--eui-c-secondary-surface-light)}.eui-21 .eui-growl-item-content:not(:empty)::-webkit-scrollbar-thumb{background-color:var(--eui-c-divider);border-radius:5rem;background-clip:padding-box;border:2px solid transparent}.eui-21 .eui-growl-item-content:not(:empty)::-webkit-scrollbar-thumb:hover{background-color:var(--eui-c-secondary-surface);border:0;cursor:grab}.eui-21 .eui-growl-item-content:not(:empty):focus::-webkit-scrollbar-thumb{background-color:var(--eui-c-primary-surface);outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important}.eui-21 .eui-growl-item-content:not(:empty):focus-visible::-webkit-scrollbar-thumb{background-color:var(--eui-c-primary-surface);outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important}.eui-21 .eui-growl-item-content:not(:empty)::-webkit-scrollbar-track{background-color:var(--eui-c-secondary-surface-light);border-radius:0}@-moz-document url-prefix(){.eui-21 .eui-growl-item-content:not(:empty){scrollbar-color:var(--eui-c-secondary-surface) var(--eui-c-secondary-surface-light);scrollbar-width:auto}}@-moz-document url-prefix(){.eui-21 .eui-growl-item-content:not(:empty):focus,.eui-21 .eui-growl-item-content:not(:empty):focus-visible{scrollbar-color:var(--eui-c-focus-visible) var(--eui-c-s-secondary-surface-light)}}.eui-21 .eui-growl-item-close{position:absolute;top:var(--eui-s-xs);right:var(--eui-s-xs)}.eui-21 .eui-growl-item-close .eui-icon-button__button:hover{background-color:var(--_close-hover-color)!important}.eui-21 .eui-growl-item-container--filled .eui-icon-svg svg{fill:var(--_icon-color)!important;color:var(--_icon-color)!important}.eui-21 .eui-growl-item-container--filled a,.eui-21 .eui-growl-item-container--filled code{color:var(--eui-c-white)!important}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "component", type: i1.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "ariaLabel", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { 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"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: EuiGrowlComponent, decorators: [{
            type: Component,
            args: [{ selector: 'eui-growl', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                        TranslateModule,
                        ...EUI_ICON,
                        ...EUI_ICON_BUTTON,
                        ...EUI_ICON_STATE,
                    ], host: {
                        '[class]': 'cssClasses()',
                        '[attr.data-e2e]': 'e2eAttr()',
                        role: 'status',
                        '[attr.aria-live]': 'ariaLive()',
                        '[attr.aria-labelledby]': 'value().length ? titleId : null',
                        '[attr.aria-describedby]': 'value().length ? contentId : null',
                        '(click)': 'onClick()',
                    }, template: "@for (msg of value(); track msg) {\n<div\n    class=\"eui-growl-item-container eui-u-anim eui-u-anim--fast\"\n    [class.eui-growl-item-container--info]=\"msg.severity === 'info'\"\n    [class.eui--info]=\"msg.severity === 'info'\"\n    [class.eui-growl-item-container--warning]=\"msg.severity === 'warning'\"\n    [class.eui--warning]=\"msg.severity === 'warning'\"\n    [class.eui-growl-item-container--danger]=\"msg.severity === 'danger'\"\n    [class.eui--danger]=\"msg.severity === 'danger'\"\n    [class.eui-growl-item-container--success]=\"msg.severity === 'success'\"\n    [class.eui--success]=\"msg.severity === 'success'\"\n    [class.eui-growl-item-container--filled]=\"msg.filled\"\n    [class.eui-growl--sticky]=\"sticky()\"\n    [class.eui-u-anim--slideInUp]=\"position() === 'bottom-left' || position() === 'bottom-center' || position() === 'bottom-right'\"\n    [class.eui-u-anim--slideInDown]=\"position() === 'top-left' || position() === 'top-center' || position() === 'top-right'\">\n\n    <div class=\"eui-growl-item\">\n        <div class=\"eui-growl-item-summary-wrapper\">\n            <eui-icon-state [euiVariant]=\"msg.severity\" class=\"eui-growl-item-icon\"/>\n            <span [id]=\"titleId\" class=\"eui-growl-item-title\">{{ msg.summary }}</span>\n        </div>\n        <div [id]=\"contentId\" class=\"eui-growl-item-content\" [innerHTML]=\"msg.detail\"></div>\n\n        <eui-icon-button (buttonClick)=\"remove(msg)\"\n            icon=\"eui-close\"\n            fillColor=\"secondary\"\n            euiRounded\n            ariaLabel=\"Close growl icon\"\n            class=\"eui-growl-item-close\" />\n    </div>\n\n</div>\n}\n@if (closeAllSticky() && isGrowlMoreThanTwo()) {\n<div class=\"eui-growl-item-container eui-u-anim eui-u-anim--fast eui-growl-item-container--secondary\">\n    <div class=\"eui-growl-item\">\n        <div class=\"eui-growl-item-summary-wrapper\">\n            <eui-icon-svg icon=\"eui-checkmark-done\"/>\n            <span class=\"eui-growl-item-title\">{{ 'eui.growl.dismiss-all' | translate }}</span>\n        </div>\n        <eui-icon-button (buttonClick)=\"removeAll()\"\n            icon=\"eui-close\"\n            fillColor=\"secondary\"\n            euiRounded\n            ariaLabel=\"Close growl icon\"\n            class=\"eui-growl-item-close\"/>\n    </div>\n</div>\n}\n", styles: [".eui-21 .eui-growl{--_color: var(--eui-growl-color, var(--eui-c-info-on-surface-light));--_bg-color: var(--eui-growl-bg-color, var(--eui-c-info-surface-light));--_color-on-bg: var(--eui-growl-color-on-bg, var(--eui-c-info-on-surface-light));--_close-hover-color: var(--eui-growl-close-hover-color, var(--eui-c-info-surface-light-hover));--eui-bottom-left-horizontal-offset: var(--eui-s-l);--eui-bottom-left-vertical-offset: var(--eui-s-l);--eui-bottom-right-horizontal-offset: var(--eui-s-l);--eui-bottom-right-vertical-offset: var(--eui-s-l)}.eui-21 .eui-growl-item-container--primary{--_color: var(--eui-c-primary);--_bg-color: var(--eui-c-primary-surface-light);--_color-on-bg: var(--eui-c-primary-on-surface-light);--_close-hover-color: var(--eui-c-primary-surface-light-hover)}.eui-21 .eui-growl-item-container--secondary{--_color: var(--eui-c-secondary);--_bg-color: var(--eui-c-secondary-surface-light);--_color-on-bg: var(--eui-c-secondary-on-surface-light);--_close-hover-color: var(--eui-c-secondary-surface-light-hover)}.eui-21 .eui-growl-item-container--info{--_color: var(--eui-c-info);--_bg-color: var(--eui-c-info-surface-light);--_color-on-bg: var(--eui-c-info-on-surface-light);--_close-hover-color: var(--eui-c-info-surface-light-hover)}.eui-21 .eui-growl-item-container--success{--_color: var(--eui-c-success);--_bg-color: var(--eui-c-success-surface-light);--_color-on-bg: var(--eui-c-success-on-surface-light);--_close-hover-color: var(--eui-c-success-surface-light-hover)}.eui-21 .eui-growl-item-container--warning{--_color: var(--eui-c-warning);--_bg-color: var(--eui-c-warning-surface-light);--_color-on-bg: var(--eui-c-warning-on-surface-light);--_close-hover-color: var(--eui-c-warning-surface-light-hover)}.eui-21 .eui-growl-item-container--danger{--_color: var(--eui-c-danger);--_bg-color: var(--eui-c-danger-surface-light);--_color-on-bg: var(--eui-c-danger-on-surface-light);--_close-hover-color: var(--eui-c-danger-surface-light-hover)}.eui-21 .eui-growl-item-container.eui-growl-item-container--filled.eui-growl-item-container--primary{--_bg-color: var(--eui-c-primary-surface);--_color-on-bg: var(--eui-c-primary-on-surface);--_color: var(--eui-c-primary-on-surface);--_icon-color: var(--eui-c-primary-on-surface);--_close-hover-color: var(--eui-c-primary-surface-hover)}.eui-21 .eui-growl-item-container.eui-growl-item-container--filled.eui-growl-item-container--info{--_bg-color: var(--eui-c-info-surface);--_color-on-bg: var(--eui-c-info-on-surface);--_color: var(--eui-c-info-on-surface);--_icon-color: var(--eui-c-info-on-surface);--_close-hover-color: var(--eui-c-info-surface-hover)}.eui-21 .eui-growl-item-container.eui-growl-item-container--filled.eui-growl-item-container--success{--_bg-color: var(--eui-c-success-surface);--_color-on-bg: var(--eui-c-success-on-surface);--_color: var(--eui-c-success-on-surface);--_icon-color: var(--eui-c-success-on-surface);--_close-hover-color: var(--eui-c-success-surface-hover)}.eui-21 .eui-growl-item-container.eui-growl-item-container--filled.eui-growl-item-container--warning{--_bg-color: var(--eui-c-warning-surface);--_color-on-bg: var(--eui-c-warning-on-surface);--_color: var(--eui-c-warning-on-surface);--_icon-color: var(--eui-c-warning-on-surface);--_close-hover-color: var(--eui-c-warning-surface-hover)}.eui-21 .eui-growl-item-container.eui-growl-item-container--filled.eui-growl-item-container--danger{--_bg-color: var(--eui-c-danger-surface);--_color-on-bg: var(--eui-c-danger-on-surface);--_color: var(--eui-c-danger-on-surface);--_icon-color: var(--eui-c-danger-on-surface);--_close-hover-color: var(--eui-c-danger-surface-hover)}.eui-21 .eui-growl{position:fixed;width:20rem;z-index:var(--eui-zi-growl-message)}.eui-21 .eui-growl--bottom-left{bottom:var(--eui-bottom-left-vertical-offset);left:var(--eui-bottom-left-horizontal-offset)}.eui-21 .eui-growl--bottom-center{bottom:var(--eui-s-l)}.eui-21 .eui-growl--bottom-right{bottom:var(--eui-bottom-right-vertical-offset);right:var(--eui-bottom-right-horizontal-offset)}.eui-21 .eui-growl--top-left{left:var(--eui-s-l);top:var(--eui-s-l)}.eui-21 .eui-growl--top-center{top:var(--eui-s-l)}.eui-21 .eui-growl--top-right{right:var(--eui-s-l);top:var(--eui-s-l)}.eui-21 .eui-growl a{text-decoration:underline}.eui-21 .eui-growl-item-container{margin-bottom:var(--eui-s-s);position:relative;background-color:var(--_bg-color);color:var(--_color-on-bg)}.eui-21 .eui-growl-item{display:flex;flex-direction:column;padding:var(--eui-s-m);position:relative;width:20rem;box-shadow:var(--eui-sh-3)}.eui-21 .eui-growl-item-summary-wrapper{display:flex;align-items:center;gap:var(--eui-s-xs)}.eui-21 .eui-growl-item-title{font:var(--eui-f-m-semi-bold);margin-right:var(--eui-s-xl);color:var(--_color)}.eui-21 .eui-growl-item-content:not(:empty){margin-top:var(--eui-s-xs);max-height:80vh;overflow-y:auto;overflow-wrap:break-word;font:var(--eui-f-m)}.eui-21 .eui-growl-item-content:not(:empty)::-webkit-scrollbar{display:inherit;height:8px;width:8px;background-color:var(--eui-c-secondary-surface-light)}.eui-21 .eui-growl-item-content:not(:empty)::-webkit-scrollbar-thumb{background-color:var(--eui-c-divider);border-radius:5rem;background-clip:padding-box;border:2px solid transparent}.eui-21 .eui-growl-item-content:not(:empty)::-webkit-scrollbar-thumb:hover{background-color:var(--eui-c-secondary-surface);border:0;cursor:grab}.eui-21 .eui-growl-item-content:not(:empty):focus::-webkit-scrollbar-thumb{background-color:var(--eui-c-primary-surface);outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important}.eui-21 .eui-growl-item-content:not(:empty):focus-visible::-webkit-scrollbar-thumb{background-color:var(--eui-c-primary-surface);outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important}.eui-21 .eui-growl-item-content:not(:empty)::-webkit-scrollbar-track{background-color:var(--eui-c-secondary-surface-light);border-radius:0}@-moz-document url-prefix(){.eui-21 .eui-growl-item-content:not(:empty){scrollbar-color:var(--eui-c-secondary-surface) var(--eui-c-secondary-surface-light);scrollbar-width:auto}}@-moz-document url-prefix(){.eui-21 .eui-growl-item-content:not(:empty):focus,.eui-21 .eui-growl-item-content:not(:empty):focus-visible{scrollbar-color:var(--eui-c-focus-visible) var(--eui-c-s-secondary-surface-light)}}.eui-21 .eui-growl-item-close{position:absolute;top:var(--eui-s-xs);right:var(--eui-s-xs)}.eui-21 .eui-growl-item-close .eui-icon-button__button:hover{background-color:var(--_close-hover-color)!important}.eui-21 .eui-growl-item-container--filled .eui-icon-svg svg{fill:var(--_icon-color)!important;color:var(--_icon-color)!important}.eui-21 .eui-growl-item-container--filled a,.eui-21 .eui-growl-item-container--filled code{color:var(--eui-c-white)!important}\n"] }]
        }], ctorParameters: () => [], propDecorators: { e2eAttr: [{ type: i0.Input, args: [{ isSignal: true, alias: "e2eAttr", required: false }] }], ariaLive: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLive", required: false }] }], sticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "sticky", required: false }] }], life: [{ type: i0.Input, args: [{ isSignal: true, alias: "life", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], closeAllSticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeAllSticky", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], callback: [{ type: i0.Input, args: [{ isSignal: true, alias: "callback", required: false }] }], growlClick: [{ type: i0.Output, args: ["growlClick"] }], growlClose: [{ type: i0.Output, args: ["growlClose"] }] } });

const EUI_GROWL = [EuiGrowlComponent];

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

export { EUI_GROWL, EuiGrowlComponent };
//# sourceMappingURL=eui-components-eui-growl.mjs.map
