import * as i0 from '@angular/core';
import { input, booleanAttribute, inject, ElementRef, Renderer2, linkedSignal, effect, HostListener, ViewEncapsulation, Component } from '@angular/core';
import { EuiGrowlService } from '@eui/core';

/**
 * @description
 * Component that provides functionality to disable content and show a visual overlay.
 * When disabled, it adds a semi-transparent overlay and handles focus management.
 */
class EuiDisableContentComponent {
    /**
     * Initializes the component and sets up an effect to handle disabled state changes
     */
    constructor() {
        /**
         * Text to display in an eui-growl (type info) notification when clicking
         * the disabled content.
         */
        this.disabledText = input('', ...(ngDevMode ? [{ debugName: "disabledText" }] : []));
        /**
         * Controls whether the content is disabled. If disabled, a semi-transparent
         * overlay with spinner is shown.
         */
        this.isDisabled = input(null, { ...(ngDevMode ? { debugName: "isDisabled" } : {}), transform: booleanAttribute });
        /** Stores the last active element before disabling */
        this.lastActiveElement = null;
        /** Reference to the component's element */
        this.elRef = inject(ElementRef);
        /** Service for displaying growl notifications */
        this.growlService = inject(EuiGrowlService, { optional: true });
        /** Renderer for DOM manipulations */
        this.renderer = inject(Renderer2);
        /**
         * Tracks when the component transitions from enabled to disabled state.
         * Returns true only when isDisabled changes from false to true. True if
         * the component is transitioning to blocked state.
         */
        this.isBlocking = linkedSignal({ ...(ngDevMode ? { debugName: "isBlocking" } : {}), source: this.isDisabled,
            computation: (current, previous) => current && !previous?.source });
        effect(() => {
            const disabled = this.isDisabled();
            if (disabled) {
                this.renderer.addClass(this.elRef.nativeElement, 'eui-disable-content--disabled');
            }
            else {
                this.renderer.removeClass(this.elRef.nativeElement, 'eui-disable-content--disabled');
            }
        });
        effect(() => {
            if (this.isBlocking()) {
                const activeElement = this.getActiveElement();
                this.deactivateElement(activeElement);
            }
            else if (!this.isDisabled()) {
                this.reactivateElement();
            }
        });
    }
    /**
     * Handles click events on the disabled content
     * Shows a growl notification if content is disabled and has disabled text
     * @internal
     */
    onClick() {
        if (this.isDisabled() && this.disabledText() && this.growlService) {
            this.growlService.growlInfo(this.disabledText());
        }
    }
    /**
     * Stores the currently active element before disabling
     * @param activeElement The element to deactivate
     * @internal
     */
    deactivateElement(activeElement) {
        if (activeElement) {
            this.renderer.setAttribute(activeElement, 'disabled', 'true');
            this.renderer.setAttribute(activeElement, 'tabindex', '-1');
            this.renderer.setAttribute(activeElement, 'aria-disabled', 'true');
            this.lastActiveElement = activeElement;
        }
        else {
            this.lastActiveElement = null;
        }
    }
    /**
     * Reactivates the last active element
     * @internal
     */
    reactivateElement() {
        if (this.lastActiveElement) {
            this.renderer.removeAttribute(this.lastActiveElement, 'disabled');
            this.renderer.setAttribute(this.lastActiveElement, 'tabindex', '0');
            this.renderer.setAttribute(this.lastActiveElement, 'aria-disabled', 'false');
            this.lastActiveElement.focus();
        }
    }
    /**
     * Gets the currently focused element within the component
     * @returns The focused HTML element or null
     * @internal
     */
    getActiveElement() {
        return this.elRef.nativeElement.querySelector(':focus');
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: EuiDisableContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.5", type: EuiDisableContentComponent, isStandalone: true, selector: "eui-disable-content", inputs: { disabledText: { classPropertyName: "disabledText", publicName: "disabledText", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick()" } }, ngImport: i0, template: '<ng-content/>', isInline: true, styles: [".eui-21 .eui-disable-content--disabled{position:relative;z-index:var(--eui-zi-overlay);cursor:not-allowed;display:flex}.eui-21 .eui-disable-content--disabled:after{background-color:#ffffff40;content:\"\";height:100%;left:0;position:absolute;top:0;width:100%;z-index:var(--eui-zi-overlay)}\n"], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: EuiDisableContentComponent, decorators: [{
            type: Component,
            args: [{ selector: 'eui-disable-content', template: '<ng-content/>', encapsulation: ViewEncapsulation.None, styles: [".eui-21 .eui-disable-content--disabled{position:relative;z-index:var(--eui-zi-overlay);cursor:not-allowed;display:flex}.eui-21 .eui-disable-content--disabled:after{background-color:#ffffff40;content:\"\";height:100%;left:0;position:absolute;top:0;width:100%;z-index:var(--eui-zi-overlay)}\n"] }]
        }], ctorParameters: () => [], propDecorators: { disabledText: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledText", required: false }] }], isDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDisabled", required: false }] }], onClick: [{
                type: HostListener,
                args: ['click']
            }] } });

const EUI_DISABLE_CONTENT = [
    EuiDisableContentComponent,
];
// export { EuiDisableContentComponent as EuiDisableContent } from './eui-disable-content.component';

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

export { EUI_DISABLE_CONTENT, EuiDisableContentComponent };
//# sourceMappingURL=eui-components-eui-disable-content.mjs.map
