import * as i0 from '@angular/core';
import { input, effect, TemplateRef, Optional, Self, Inject, Directive, NgModule } from '@angular/core';
import { FD_ICON_COMPONENT } from '@fundamental-ngx/core/icon';
import * as i1 from '@fundamental-ngx/core/popover';
import { PopoverService } from '@fundamental-ngx/core/popover';

const INLINE_HELP_CLASS = 'fd-popover__body--inline-help fd-inline-help__content';
const INLINE_HELP_ICON_CLASS = 'fd-popover__body--inline-help-with-icon';
/** Default trigger configuration for inline help */
const DEFAULT_TRIGGERS = [
    { trigger: 'mouseenter', openAction: true, closeAction: false },
    { trigger: 'mouseleave', openAction: false, closeAction: true },
    { trigger: 'focusin', openAction: true, closeAction: false },
    { trigger: 'focusout', openAction: false, closeAction: true }
];
let inlineHelpId = 0;
/**
 * The component that represents an inline-help.
 * Inline help is used to display help text in a popover, often inline with headers, body text and form labels.
 */
class InlineHelpDirective {
    /** @hidden */
    constructor(_popoverService, _elementRef, _renderer, _viewContainerRef, _icon) {
        this._popoverService = _popoverService;
        this._elementRef = _elementRef;
        this._renderer = _renderer;
        this._viewContainerRef = _viewContainerRef;
        this._icon = _icon;
        /** Inline help text to display inside generated popover */
        this.inlineHelpContent = input('', { ...(ngDevMode ? { debugName: "inlineHelpContent" } : {}), alias: 'fd-inline-help' });
        /** Popover placement */
        this.placement = input(null, ...(ngDevMode ? [{ debugName: "placement" }] : []));
        /**
         * The trigger events that will open/close the inline help component.
         * Accepts any HTML DOM Events or TriggerConfig objects.
         * @default mouseenter/mouseleave and focusin/focusout
         */
        this.triggers = input(DEFAULT_TRIGGERS, ...(ngDevMode ? [{ debugName: "triggers" }] : []));
        /** Whether the popover should close when a click is made outside its boundaries. */
        this.closeOnOutsideClick = input(false, ...(ngDevMode ? [{ debugName: "closeOnOutsideClick" }] : []));
        /** @hidden */
        this._describedBy = '';
        /** @hidden Internal body ID for ARIA */
        this._bodyId = '';
        /** @hidden */
        this._bodyRole = 'tooltip';
        /** @hidden */
        this._additionalBodyClass = '';
        // Watch for placement changes and sync with popover service
        effect(() => {
            this._popoverService.placement.set(this.placement() ?? 'bottom');
        });
        // Watch for triggers changes and sync with popover service
        effect(() => {
            this._popoverService.triggers.set(this.triggers());
        });
        // Watch for closeOnOutsideClick changes and sync with popover service
        effect(() => {
            this._popoverService.closeOnOutsideClick.set(this.closeOnOutsideClick());
        });
        // Watch for content changes
        effect(() => {
            const content = this.inlineHelpContent();
            const text = typeof content === 'string' ? content : null;
            const template = content instanceof TemplateRef ? content : null;
            this._popoverService.updateContent(text, template);
            this._setupScreenreaderElement(content);
        });
        // Set role and id for ARIA
        const bodyId = `fd-inline-help-${inlineHelpId++}`;
        this._bodyRole = 'tooltip';
        this._bodyId = bodyId;
        this._elementRef.nativeElement.setAttribute('aria-describedby', bodyId);
        this._describedBy = bodyId;
        // Apply additional inline help classes
        this._applyAdditionalInlineHelpClass();
    }
    /** @hidden */
    ngOnInit() {
        // Initialize popover with element and config
        const config = {
            placement: this.placement() ?? 'bottom',
            triggers: this.triggers(),
            noArrow: false,
            closeOnEscapeKey: false,
            closeOnOutsideClick: this.closeOnOutsideClick(),
            additionalBodyClass: this._additionalBodyClass,
            bodyRole: this._bodyRole,
            bodyId: this._bodyId
        };
        this._popoverService.initialise(this._elementRef, config);
    }
    /** @hidden */
    _applyAdditionalInlineHelpClass() {
        let classes = INLINE_HELP_CLASS;
        // If connected to the icon, but not button, then apply additional class
        // That will change the arrow's position a bit
        if (this._icon) {
            classes += ' ' + INLINE_HELP_ICON_CLASS;
        }
        this._additionalBodyClass = classes;
    }
    /** @hidden */
    _setupScreenreaderElement(content) {
        this._viewContainerRef.clear();
        let srElement = this._renderer.createElement('span');
        if (typeof content === 'string') {
            srElement.innerText = content;
        }
        else if (content) {
            this._srViewRef = content.createEmbeddedView(null);
            if (this._srViewRef.rootNodes[0] instanceof Text) {
                srElement.innerText = this._srViewRef.rootNodes[0].textContent;
            }
            else {
                srElement = this._srViewRef.rootNodes[0];
            }
        }
        if (srElement.style) {
            srElement.style.cssText = `position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px);`;
        }
        this._renderer.appendChild(this._elementRef.nativeElement, srElement);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: InlineHelpDirective, deps: [{ token: i1.PopoverService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ViewContainerRef }, { token: FD_ICON_COMPONENT, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.0", type: InlineHelpDirective, isStandalone: true, selector: "[fd-inline-help]:not([fd-inline-help-template]), [fd-inline-help-template]:not([fd-inline-help])", inputs: { inlineHelpContent: { classPropertyName: "inlineHelpContent", publicName: "fd-inline-help", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, triggers: { classPropertyName: "triggers", publicName: "triggers", isSignal: true, isRequired: false, transformFunction: null }, closeOnOutsideClick: { classPropertyName: "closeOnOutsideClick", publicName: "closeOnOutsideClick", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.fd-inline-help__trigger": "true" } }, providers: [PopoverService], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: InlineHelpDirective, decorators: [{
            type: Directive,
            args: [{
                    // eslint-disable-next-line @angular-eslint/directive-selector
                    selector: '[fd-inline-help]:not([fd-inline-help-template]), [fd-inline-help-template]:not([fd-inline-help])',
                    providers: [PopoverService],
                    host: {
                        '[class.fd-inline-help__trigger]': 'true'
                    },
                    standalone: true
                }]
        }], ctorParameters: () => [{ type: i1.PopoverService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ViewContainerRef }, { type: i0.Type, decorators: [{
                    type: Optional
                }, {
                    type: Self
                }, {
                    type: Inject,
                    args: [FD_ICON_COMPONENT]
                }] }], propDecorators: { inlineHelpContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "fd-inline-help", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], triggers: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggers", required: false }] }], closeOnOutsideClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnOutsideClick", required: false }] }] } });

/**
 * @deprecated
 * Use direct imports of components and directives.
 */
class InlineHelpModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: InlineHelpModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.0", ngImport: i0, type: InlineHelpModule, imports: [InlineHelpDirective], exports: [InlineHelpDirective] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: InlineHelpModule }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: InlineHelpModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [InlineHelpDirective],
                    exports: [InlineHelpDirective]
                }]
        }] });

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

export { InlineHelpDirective, InlineHelpModule };
//# sourceMappingURL=fundamental-ngx-core-inline-help.mjs.map
