import * as i0 from '@angular/core';
import { input, booleanAttribute, computed, inject, ElementRef, Renderer2, effect, ChangeDetectionStrategy, Component } from '@angular/core';

/**
 * @description
 * Component that wraps content and manages focus state when content is blocked.
 * Provides accessibility attributes and handles focus restoration when blocking/unblocking.
 *
 * @usageNotes
 * #### Basic blocked content
 * ```html
 * <eui-block-content [isBlocked]="isLoading">
 *   <form>
 *     <input type="text" />
 *     <button>Submit</button>
 *   </form>
 * </eui-block-content>
 * ```
 *
 * #### With custom ARIA attributes
 * ```html
 * <eui-block-content
 *   role="region"
 *   ariaLabel="User profile section"
 *   [isBlocked]="isSaving">
 *   <div>Content that can be blocked</div>
 * </eui-block-content>
 * ```
 *
 * ```ts
 * isLoading = true;
 *
 * loadData(): void {
 *   this.isLoading = true;
 *   this.service.getData().subscribe(() => {
 *     this.isLoading = false;
 *   });
 * }
 * ```
 *
 * ### Accessibility
 * - Automatically blurs focused elements when content is blocked
 * - Restores focus to previously focused element when unblocked
 * - Uses ARIA role and label for screen reader context
 * - Prevents keyboard interaction with blocked content
 * - Focus management ensures users don't interact with disabled content
 *
 * ### Notes
 * - Use isBlocked to control blocking state (typically tied to loading/saving states)
 * - Default role is 'region', can be customized via role input
 * - Default ariaLabel is 'block content wrapper', should be customized for context
 * - Focus is automatically saved and restored during block/unblock transitions
 * - Blocked state applies visual styling (typically overlay or disabled appearance)
 * - Commonly used with loading indicators or during async operations
 * - Does not prevent programmatic changes, only user interaction
 */
class EuiBlockContentComponent {
    constructor() {
        /**
         * ARIA role for the content wrapper
         * @default 'region'
         */
        this.role = input('region', ...(ngDevMode ? [{ debugName: "role" }] : /* istanbul ignore next */ []));
        /**
         * ARIA label for the content wrapper
         * @default 'block content wrapper'
         */
        this.ariaLabel = input('block content wrapper', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
        /**
         * Whether the content is currently blocked
         * When true, focused elements within will be blurred and state saved
         * @default false
         */
        this.isBlocked = input(false, { ...(ngDevMode ? { debugName: "isBlocked" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
        this.cssClasses = computed(() => [
            'eui-block-content',
            this.isBlocked() ? 'eui-block-content--blocked' : '',
        ].join(' ').trim(), ...(ngDevMode ? [{ debugName: "cssClasses" }] : /* istanbul ignore next */ []));
        this.lastActiveElement = null;
        this.elRef = inject(ElementRef);
        this.renderer = inject(Renderer2);
        this.previousBlocked = false;
        effect(() => {
            const blocked = this.isBlocked();
            const activeElement = this.getActiveElement();
            if (blocked && !this.previousBlocked) {
                this.deactivateElement(activeElement);
            }
            else if (!blocked && this.previousBlocked) {
                this.reactivateElement(this.lastActiveElement);
            }
            this.previousBlocked = blocked;
        });
    }
    /**
     * Removes focus from the currently focused element when blocking
     * Stores the element reference for later restoration
     *
     * @param activeElement - The currently focused element
     */
    deactivateElement(activeElement) {
        if (activeElement) {
            this.renderer.selectRootElement(activeElement, true).blur();
            this.lastActiveElement = activeElement;
        }
        else {
            this.lastActiveElement = null;
        }
    }
    /**
     * Restores focus to the previously focused element when unblocking
     *
     * @param element - The element that was previously focused
     */
    reactivateElement(element) {
        if (element) {
            this.renderer.selectRootElement(element, true).focus();
        }
    }
    /**
     * Finds the currently focused element within the block content
     *
     * @returns The currently focused HTMLElement or null if none found
     */
    getActiveElement() {
        return this.elRef.nativeElement.querySelector(':focus');
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: EuiBlockContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.16", type: EuiBlockContentComponent, isStandalone: true, selector: "eui-block-content", inputs: { role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, isBlocked: { classPropertyName: "isBlocked", publicName: "isBlocked", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "cssClasses()", "attr.role": "role()", "attr.aria-label": "ariaLabel()" } }, ngImport: i0, template: '<ng-content/>', isInline: true, styles: [".eui-21 :host.eui-block-content{display:block;position:relative}.eui-21 :host.eui-block-content--blocked{min-height:114px}.eui-21 :host.eui-block-content--blocked:before{border-top:var(--eui-s-3xs) solid currentcolor;border-right:var(--eui-s-3xs) solid currentcolor;border-bottom-style:solid;border-left-style:solid;border-radius:var(--eui-br-max);border-bottom-width:var(--eui-s-3xs);border-left-width:var(--eui-s-3xs);border-bottom-color:var(--eui-c-secondary-border-light);border-left-color:var(--eui-c-secondary-border-light);color:var(--eui-c-primary-base);-webkit-animation:spin .65s linear infinite;animation:spin .65s linear infinite;display:block;height:80px;left:50%;margin:-40px 0 0 -40px;top:50%;content:\"\";position:absolute;width:80px;z-index:var(--eui-zi-overlay)}.eui-21 :host.eui-block-content--blocked:after{background-color:#fff6;content:\"\";height:100%;left:0;position:absolute;top:0;width:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: EuiBlockContentComponent, decorators: [{
            type: Component,
            args: [{ selector: 'eui-block-content', template: '<ng-content/>', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                        '[class]': 'cssClasses()',
                        '[attr.role]': 'role()',
                        '[attr.aria-label]': 'ariaLabel()',
                    }, styles: [".eui-21 :host.eui-block-content{display:block;position:relative}.eui-21 :host.eui-block-content--blocked{min-height:114px}.eui-21 :host.eui-block-content--blocked:before{border-top:var(--eui-s-3xs) solid currentcolor;border-right:var(--eui-s-3xs) solid currentcolor;border-bottom-style:solid;border-left-style:solid;border-radius:var(--eui-br-max);border-bottom-width:var(--eui-s-3xs);border-left-width:var(--eui-s-3xs);border-bottom-color:var(--eui-c-secondary-border-light);border-left-color:var(--eui-c-secondary-border-light);color:var(--eui-c-primary-base);-webkit-animation:spin .65s linear infinite;animation:spin .65s linear infinite;display:block;height:80px;left:50%;margin:-40px 0 0 -40px;top:50%;content:\"\";position:absolute;width:80px;z-index:var(--eui-zi-overlay)}.eui-21 :host.eui-block-content--blocked:after{background-color:#fff6;content:\"\";height:100%;left:0;position:absolute;top:0;width:100%}\n"] }]
        }], ctorParameters: () => [], propDecorators: { role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], isBlocked: [{ type: i0.Input, args: [{ isSignal: true, alias: "isBlocked", required: false }] }] } });

const EUI_BLOCK_CONTENT = [
    EuiBlockContentComponent,
];
// export { EuiBlockContentComponent as EuiBlockContent } from './eui-block-content.component';

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

export { EUI_BLOCK_CONTENT, EuiBlockContentComponent };
//# sourceMappingURL=eui-components-eui-block-content.mjs.map
