import * as i0 from '@angular/core';
import { TemplateRef, Input, 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 { BasePopoverClass, 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-icon';
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 extends BasePopoverClass {
    /** Inline help text to display inside generated popover */
    set inlineHelpContent(content) {
        const { text, template } = {
            text: typeof content === 'string' ? content : null,
            template: content instanceof TemplateRef ? content : null
        };
        this._popoverService.updateContent(text, template);
        this._setupScreenreaderElement(content);
    }
    /** @hidden */
    constructor(_popoverService, _elementRef, _renderer, _viewContainerRef, _icon) {
        super();
        this._popoverService = _popoverService;
        this._elementRef = _elementRef;
        this._renderer = _renderer;
        this._viewContainerRef = _viewContainerRef;
        this._icon = _icon;
        /** The trigger events that will open/close the inline help component.
         *  Accepts any [HTML DOM Events](https://www.w3schools.com/jsref/dom_obj_event.asp). */
        this.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 }
        ];
        /** Whether the popover should have an arrow. */
        this.noArrow = false;
        /** Whether the popover should close when the escape key is pressed. */
        this.closeOnEscapeKey = false;
        /** Whether the popover should close when a click is made outside its boundaries. */
        this.closeOnOutsideClick = false;
        /** @hidden */
        this._describedBy = '';
    }
    /** @hidden */
    ngOnChanges(changes) {
        if ('additionalBodyClass' in changes) {
            this._applyAdditionalInlineHelpClass();
        }
        this._popoverService.refreshConfiguration(this);
    }
    /** @hidden */
    ngOnInit() {
        this._bodyRole = 'tooltip';
        this._describedBy = `fd-inline-help-${inlineHelpId++}`;
        this._elementRef.nativeElement.setAttribute('aria-describedby', this._describedBy);
        this._bodyId = this._describedBy;
        this._applyAdditionalInlineHelpClass();
        this._popoverService.initialise(this._elementRef, this);
    }
    /** @hidden */
    _applyAdditionalInlineHelpClass() {
        this.additionalBodyClass = INLINE_HELP_CLASS + ' ' + this.additionalBodyClass;
        // If connected to the icon, but not button, then apply additional class
        // That will change the arrow's position a bit
        if (this._icon) {
            this.additionalBodyClass += ' ' + INLINE_HELP_ICON_CLASS;
        }
    }
    /** @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: "19.2.3", 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: "14.0.0", version: "19.2.3", type: InlineHelpDirective, isStandalone: true, selector: "[fd-inline-help]:not([fd-inline-help-template]), [fd-inline-help-template]:not([fd-inline-help])", inputs: { triggers: "triggers", noArrow: "noArrow", closeOnEscapeKey: "closeOnEscapeKey", closeOnOutsideClick: "closeOnOutsideClick", inlineHelpContent: ["fd-inline-help", "inlineHelpContent"] }, host: { properties: { "class.fd-inline-help__trigger": "true" } }, providers: [PopoverService], usesInheritance: true, usesOnChanges: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", 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: { triggers: [{
                type: Input
            }], noArrow: [{
                type: Input
            }], closeOnEscapeKey: [{
                type: Input
            }], closeOnOutsideClick: [{
                type: Input
            }], inlineHelpContent: [{
                type: Input,
                args: ['fd-inline-help']
            }] } });

class InlineHelpModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: InlineHelpModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.3", ngImport: i0, type: InlineHelpModule, imports: [InlineHelpDirective], exports: [InlineHelpDirective] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: InlineHelpModule }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", 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
