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
 * A component that disables content and displays a semi-transparent overlay with optional notification.
 * Manages focus state and provides visual feedback when content is temporarily unavailable.
 * Useful for indicating loading states, processing operations, or temporarily disabled sections.
 *
 * @usageNotes
 * ### Basic Usage
 * ```html
 * <eui-disable-content [isDisabled]="isProcessing">
 *   <form>
 *     <!-- Form content -->
 *   </form>
 * </eui-disable-content>
 * ```
 *
 * ### With Notification
 * ```html
 * <eui-disable-content
 *   [isDisabled]="isSaving"
 *   [disabledText]="'Please wait while we save your changes'">
 *   <div class="content-section">
 *     <!-- Content -->
 *   </div>
 * </eui-disable-content>
 * ```
 *
 * ### Conditional Disabling
 * ```typescript
 * // Component
 * isFormDisabled = false;
 *
 * submitForm(): void {
 *   this.isFormDisabled = true;
 *   this.api.submit().subscribe(() => {
 *     this.isFormDisabled = false;
 *   });
 * }
 *
 * // Template
 * <eui-disable-content [isDisabled]="isFormDisabled">
 *   <button (click)="submitForm()">Submit</button>
 * </eui-disable-content>
 * ```
 *
 * ### Accessibility
 * - Automatically sets `aria-disabled="true"` on focused elements when disabled
 * - Manages focus state by storing and restoring last active element
 * - Sets `tabindex="-1"` on disabled elements to prevent keyboard navigation
 * - Displays growl notification when clicking disabled content (if `disabledText` provided)
 * - Restores focus to previously active element when re-enabled
 *
 * ### Notes
 * - Wraps content with `<ng-content/>` for flexible composition
 * - Requires `EuiGrowlService` for notification functionality
 * - CSS class `eui-disable-content--disabled` applied when active
 * - Does not prevent programmatic interaction, only visual and focus management
 * - Use for temporary disabling; for permanent states, use native `disabled` attribute
 */
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" }] : /* istanbul ignore next */ []));
        /**
         * Controls whether the content is disabled. If disabled, a semi-transparent
         * overlay with spinner is shown.
         */
        this.isDisabled = input(null, { ...(ngDevMode ? { debugName: "isDisabled" } : /* istanbul ignore next */ {}), 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" } : /* istanbul ignore next */ {}), 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.2.16", ngImport: i0, type: EuiDisableContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.16", 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.2.16", 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
