import * as i0 from '@angular/core';
import { inject, HostBinding, Input, 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 {
    /**
     * Gets the active state of the dimmer.
     *
     * @returns {boolean} True if dimmer is active, false otherwise.
     */
    get isDimmerActive() {
        return this._isDimmerActive;
    }
    /**
     * Sets the active state of the dimmer.
     *
     * @param {BooleanInput} value - The value to set for the dimmer active state.
     */
    set isDimmerActive(value) {
        this._isDimmerActive = coerceBooleanProperty(value);
    }
    /**
     * 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.
     */
    get cssClasses() {
        return ['eui-dimmer', this._isDimmerActive ? 'eui-dimmer--active' : ''].join(' ').trim();
    }
    /**
     * 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.
     *
     * @param {EuiAppShellService} asService - The app shell service for dimmer state management.
     * @param {Router} router - The Angular router service for navigation event monitoring.
     */
    constructor() {
        this.asService = inject(EuiAppShellService);
        /**
         * E2E testing attribute for the component.
         */
        this.e2eAttr = 'eui-dimmer';
        /** The active state of the dimmer. */
        this._isDimmerActive = false;
        /** Debug flag to control logging. */
        this._DEBUG = false;
        const router = inject(Router);
        // The events stream contains all the navigation events including the NavigationStart event
        // which gives information about what initiated the navigation sequence
        router.events.pipe(filter((event) => event instanceof NavigationStart)).subscribe((event) => {
            if (this._DEBUG) {
                console.group('NavigationStart Event');
                // Every navigation sequence is given a unique ID.
                console.log('navigation id:', event.id);
                console.log('route:', event.url);
                // The 'navigationTrigger' will be one of:
                // - imperative : ie. user clicked on a link
                // - popstate : browser controlled change such as Back button which gets a new, unique ID
                // - hashchange
                // @See: https://angular.io/api/router/NavigationStart
                console.log('trigger:', event.navigationTrigger);
                // The 'restoredState' property is defined when the navigation event is triggered by a 'popstate' event
                // It will contain the ID of the previous navigation event from which the browser is returning
            }
            if (event.restoredState) {
                this.asService.setDimmerActiveState(false);
                this._isDimmerActive = false;
                if (this._DEBUG) {
                    console.warn('restoring navigation id:', event.restoredState.navigationId);
                }
            }
            if (this._DEBUG) {
                console.groupEnd();
            }
        });
    }
    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: "14.0.0", version: "21.1.0", type: EuiDimmerComponent, isStandalone: true, selector: "eui-dimmer", inputs: { isDimmerActive: "isDimmerActive", e2eAttr: "e2eAttr" }, host: { properties: { "class": "this.cssClasses", "attr.data-e2e": "this.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.Default, 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.Default, encapsulation: ViewEncapsulation.None, 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: Input
            }], cssClasses: [{
                type: HostBinding,
                args: ['class']
            }], e2eAttr: [{
                type: HostBinding,
                args: ['attr.data-e2e']
            }, {
                type: Input
            }] } });

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
