import * as i0 from '@angular/core';
import { input, computed, inject, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
import { coerceBooleanProperty } from '@angular/cdk/coercion';
import { Router, NavigationStart } from '@angular/router';
import { filter } from 'rxjs/operators';
import { EuiAppShellService } from '@eui/core';

/**
 * @description
 * A dimming overlay component that provides a semi-transparent backdrop over page content.
 * Automatically integrates with browser navigation to manage dimmer state during back/forward actions.
 * Commonly used to indicate loading states, modal overlays, or to draw attention to specific UI elements.
 *
 * @usageNotes
 * ### Basic Usage
 * ```html
 * <eui-dimmer [isDimmerActive]="isLoading"></eui-dimmer>
 * ```
 *
 * ### With Loading State
 * ```typescript
 * // Component
 * isLoading = false;
 *
 * loadData(): void {
 *   this.isLoading = true;
 *   this.dataService.fetch().subscribe(() => {
 *     this.isLoading = false;
 *   });
 * }
 *
 * // Template
 * <eui-dimmer [isDimmerActive]="isLoading"></eui-dimmer>
 * <button (click)="loadData()">Load Data</button>
 * ```
 *
 * ### Accessibility
 * - Dimmer does not trap focus or block interaction by itself
 * - Should be combined with modal dialogs or loading indicators for proper accessibility
 * - Consider adding `aria-busy="true"` to parent container when dimmer is active
 * - Ensure keyboard users can still navigate when dimmer is visible
 *
 * ### Notes
 * - Automatically deactivates on browser back button navigation
 * - Integrates with `EuiAppShellService` for centralized state management
 * - Does not prevent user interaction - use with modal components for blocking behavior
 * - Typically placed at root level of application for full-page coverage
 * - CSS class `eui-dimmer--active` applied when active for custom styling
 */
class EuiDimmerComponent {
    /**
     * Creates an instance of EuiDimmerComponent.
     *
     * Listens to router navigation events to handle dimmer state during navigation,
     * particularly when the user navigates back in browser history.
     */
    constructor() {
        /**
         * Sets the active state of the dimmer.
         *
         * @param {BooleanInput} value - The value to set for the dimmer active state.
         */
        this.isDimmerActive = input(false, { ...(ngDevMode ? { debugName: "isDimmerActive" } : {}), transform: coerceBooleanProperty });
        /**
         * E2E testing attribute for the component.
         */
        this.e2eAttr = input('eui-dimmer', ...(ngDevMode ? [{ debugName: "e2eAttr" }] : []));
        /**
         * Gets the CSS classes to apply to the host element.
         * Adds the 'eui-dimmer--active' class when the dimmer is active.
         *
         * @returns {string} The CSS classes as a space-separated string.
         */
        this.cssClasses = computed(() => ['eui-dimmer', this.isDimmerActive() ? 'eui-dimmer--active' : ''].join(' ').trim(), ...(ngDevMode ? [{ debugName: "cssClasses" }] : []));
        this.asService = inject(EuiAppShellService);
        this.router = inject(Router);
        // The events stream contains all the navigation events including the NavigationStart event
        // which gives information about what initiated the navigation sequence
        this.router.events
            .pipe(filter((event) => event instanceof NavigationStart))
            .subscribe((event) => {
            if (event.restoredState) {
                this.asService.setDimmerActiveState(false);
            }
        });
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: EuiDimmerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.0", type: EuiDimmerComponent, isStandalone: true, selector: "eui-dimmer", inputs: { isDimmerActive: { classPropertyName: "isDimmerActive", publicName: "isDimmerActive", isSignal: true, isRequired: false, transformFunction: null }, e2eAttr: { classPropertyName: "e2eAttr", publicName: "e2eAttr", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "cssClasses()", "attr.data-e2e": "e2eAttr()" } }, ngImport: i0, template: '', isInline: true, styles: [".eui-21 .eui-dimmer{animation:none;background-color:#00000026;height:100vh;left:0;opacity:var(--eui-o-none);position:fixed;top:0;width:0;z-index:var(--eui-zi-overlay)}.eui-21 .eui-dimmer--active{animation:dimmer-fadeIn var(--eui-base-animation-duration-fast);opacity:var(--eui-o-100);width:100%}.eui-21 .eui-dimmer:not(.eui-dimmer--active){animation:dimmer-fadeOut var(--eui-base-animation-duration-fast)}@keyframes dimmer-fadeIn{0%{opacity:var(--eui-o-none)}to{opacity:var(--eui-o-100)}}@keyframes dimmer-fadeOut{0%{opacity:var(--eui-o-100)}to{opacity:var(--eui-o-none)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: EuiDimmerComponent, decorators: [{
            type: Component,
            args: [{ selector: 'eui-dimmer', template: '', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                        '[class]': 'cssClasses()',
                        '[attr.data-e2e]': 'e2eAttr()',
                    }, styles: [".eui-21 .eui-dimmer{animation:none;background-color:#00000026;height:100vh;left:0;opacity:var(--eui-o-none);position:fixed;top:0;width:0;z-index:var(--eui-zi-overlay)}.eui-21 .eui-dimmer--active{animation:dimmer-fadeIn var(--eui-base-animation-duration-fast);opacity:var(--eui-o-100);width:100%}.eui-21 .eui-dimmer:not(.eui-dimmer--active){animation:dimmer-fadeOut var(--eui-base-animation-duration-fast)}@keyframes dimmer-fadeIn{0%{opacity:var(--eui-o-none)}to{opacity:var(--eui-o-100)}}@keyframes dimmer-fadeOut{0%{opacity:var(--eui-o-100)}to{opacity:var(--eui-o-none)}}\n"] }]
        }], ctorParameters: () => [], propDecorators: { isDimmerActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDimmerActive", required: false }] }], e2eAttr: [{ type: i0.Input, args: [{ isSignal: true, alias: "e2eAttr", required: false }] }] } });

const EUI_DIMMER = [
    EuiDimmerComponent,
];
// export { EuiDimmerComponent as EuiDimmer } from './dimmer.component';

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

export { EUI_DIMMER, EuiDimmerComponent };
//# sourceMappingURL=eui-components-eui-dimmer.mjs.map
