import * as i0 from '@angular/core';
import { inject, ElementRef, output, input, Directive } from '@angular/core';

/**
 * @description Diretiva de acessibilidade que torna qualquer elemento HTML interativo,
 * adicionando suporte a eventos de foco e navegação por teclado (Enter e Espaço)
 * além do clique padrão. Gerencia automaticamente o atributo `tabindex`.
 *
 * @example
 * ```html
 * <div
 *   (sInteractiveContent)="onActivate($event)"
 *   [focusable]="true">
 *   Conteúdo interativo
 * </div>
 * ```
 *
 * @category Inputs
 */
class InteractiveContentDirective {
    elementRef = inject(ElementRef);
    /** @description Emitido quando o usuário clica ou pressiona Enter/Espaço no elemento. */
    activated = output({ alias: 'sInteractiveContent' });
    /** @description Habilita o foco via teclado (tabindex). @default true */
    focusable = input(true);
    /** @description Desabilita os eventos de interação do elemento. @default false */
    disabled = input(false);
    /** @description Quando `true`, chama `event.stopPropagation()` ao ativar. @default false */
    stopPropagation = input(false);
    EVENT_LISTENER = (event) => {
        if (this.disabled()) {
            return;
        }
        if (event instanceof KeyboardEvent) {
            const key = event.key;
            const validKeys = ['Enter', ' '];
            if (!validKeys.includes(key)) {
                return;
            }
            event.preventDefault();
            if (this.stopPropagation()) {
                event.stopPropagation();
            }
        }
        this.activated.emit(event);
    };
    ngOnInit() {
        this.setTabIndex();
        this.checkAccessbilityEvents();
    }
    setTabIndex() {
        if (this.disabled() || !this.focusable()) {
            this.element.tabIndex = -1;
            return;
        }
        if (this.element.tabIndex === undefined || this.element.tabIndex < 0) {
            this.element.tabIndex = 0;
        }
    }
    checkAccessbilityEvents() {
        this.element.addEventListener('click', this.EVENT_LISTENER);
        this.element.addEventListener('keydown', this.EVENT_LISTENER);
    }
    get element() {
        return this.elementRef.nativeElement;
    }
    ngOnDestroy() {
        this.element.removeEventListener('click', this.EVENT_LISTENER);
        this.element.removeEventListener('keydown', this.EVENT_LISTENER);
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: InteractiveContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.14", type: InteractiveContentDirective, isStandalone: true, selector: "[sInteractiveContent]", inputs: { focusable: { classPropertyName: "focusable", publicName: "focusable", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, stopPropagation: { classPropertyName: "stopPropagation", publicName: "stopPropagation", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activated: "sInteractiveContent" }, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: InteractiveContentDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[sInteractiveContent]',
                    standalone: true,
                }]
        }] });

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

export { InteractiveContentDirective };
//# sourceMappingURL=seniorsistemas-angular-components-interactive-content.mjs.map
