import { MXBaseComponent, AXComponent, convertToPlacement } from '@acorex/cdk/common';
import * as i0 from '@angular/core';
import { Input, ChangeDetectionStrategy, ViewEncapsulation, Component, inject, ViewContainerRef, ElementRef, input, effect, TemplateRef, Directive, NgModule } from '@angular/core';
import { AXPopoverComponent } from '@acorex/components/popover';
import { CommonModule } from '@angular/common';

/**
 * A component for displaying tooltips with additional information or context when hovering over elements.
 * @category Components
 */
class AXTooltipComponent extends MXBaseComponent {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXTooltipComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: AXTooltipComponent, isStandalone: true, selector: "ax-tooltip", inputs: { text: "text", position: "position" }, providers: [{ provide: AXComponent, useExisting: AXTooltipComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-tooltip-container\">\n  <div class=\"ax-tooltip\">\n    {{ text }}\n  </div>\n  <!-- <div class=\"ax-tooltip-tringle ax-tooltip-tringle-{{ position }}\"></div> -->\n</div>\n", styles: ["ax-tooltip{--ax-comp-tooltip-border-radius: .25rem;--ax-comp-tooltip-bg-color: var(--ax-sys-color-dark);--ax-comp-tooltip-text-color: var(--ax-sys-color-light)}.ax-dark ax-tooltip{--ax-comp-tooltip-bg-color: var(--ax-sys-color-light);--ax-comp-tooltip-text-color: var(--ax-sys-color-dark)}.ax-tooltip-container{position:relative}.ax-tooltip-container .ax-tooltip{display:block;padding:.25rem .5rem;background-color:rgba(var(--ax-comp-tooltip-bg-color));color:rgba(var(--ax-comp-tooltip-text-color));border-radius:var(--ax-comp-tooltip-border-radius);font-size:.75rem;font-weight:400}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXTooltipComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-tooltip', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: AXComponent, useExisting: AXTooltipComponent }], template: "<div class=\"ax-tooltip-container\">\n  <div class=\"ax-tooltip\">\n    {{ text }}\n  </div>\n  <!-- <div class=\"ax-tooltip-tringle ax-tooltip-tringle-{{ position }}\"></div> -->\n</div>\n", styles: ["ax-tooltip{--ax-comp-tooltip-border-radius: .25rem;--ax-comp-tooltip-bg-color: var(--ax-sys-color-dark);--ax-comp-tooltip-text-color: var(--ax-sys-color-light)}.ax-dark ax-tooltip{--ax-comp-tooltip-bg-color: var(--ax-sys-color-light);--ax-comp-tooltip-text-color: var(--ax-sys-color-dark)}.ax-tooltip-container{position:relative}.ax-tooltip-container .ax-tooltip{display:block;padding:.25rem .5rem;background-color:rgba(var(--ax-comp-tooltip-bg-color));color:rgba(var(--ax-comp-tooltip-text-color));border-radius:var(--ax-comp-tooltip-border-radius);font-size:.75rem;font-weight:400}\n"] }]
        }], propDecorators: { text: [{
                type: Input
            }], position: [{
                type: Input
            }] } });

//prettier-ignore
// import { AXDragDirective } from '@acorex/cdk/drag-drop';
class AXTooltipDirective {
    constructor() {
        this.vc = inject(ViewContainerRef);
        this.elementRef = inject(ElementRef);
        // private dragRef = inject(AXDragDirective, { optional: true });
        this.axTooltipDisabled = input(false, ...(ngDevMode ? [{ debugName: "axTooltipDisabled" }] : []));
        this.content = input('', ...(ngDevMode ? [{ debugName: "content", alias: 'axTooltip' }] : [{ alias: 'axTooltip' }]));
        this.context = input({}, ...(ngDevMode ? [{ debugName: "context", alias: 'axTooltipContext' }] : [{ alias: 'axTooltipContext' }]));
        this._placement = convertToPlacement('top');
        this._offsetX = 0;
        this._offsetY = 0;
        this._openAfter = 100;
        this._closeAfter = 100;
        this.#contentEff = effect(() => {
            const content = this.content();
            if (!content)
                return;
            this.ensurePopover();
            if (typeof content === 'string') {
                this.popoverRef.content = AXTooltipComponent;
                this.popoverRef.context = { text: content };
            }
            else if (content instanceof TemplateRef) {
                this.popoverRef.content = content;
                this.popoverRef.context = this.context();
            }
            else {
                this.popoverRef.context = { text: '' };
                this.popoverRef.content = null;
            }
        }, ...(ngDevMode ? [{ debugName: "#contentEff" }] : []));
        this.#dragWatchEff = effect(() => {
            // if (this.dragRef?.isMoving()) {
            //   this.popoverRef.close();
            // }
        }, ...(ngDevMode ? [{ debugName: "#dragWatchEff" }] : []));
    }
    get placement() {
        return this._placement;
    }
    set placement(v) {
        this._placement = v;
        if (this.popoverRef) {
            this.popoverRef.placement = v;
        }
    }
    get offsetX() {
        return this._offsetX;
    }
    set offsetX(v) {
        this._offsetX = v;
        if (this.popoverRef) {
            this.popoverRef.offsetX = v;
        }
    }
    get offsetY() {
        return this._offsetY;
    }
    set offsetY(v) {
        this._offsetY = v;
        if (this.popoverRef) {
            this.popoverRef.offsetY = v;
        }
    }
    get openAfter() {
        return this._openAfter;
    }
    set openAfter(v) {
        this._openAfter = v;
        if (this.popoverRef) {
            this.popoverRef.openAfter = v;
        }
    }
    get closeAfter() {
        return this._closeAfter;
    }
    set closeAfter(v) {
        this._closeAfter = v;
        if (this.popoverRef) {
            this.popoverRef.closeAfter = v;
        }
    }
    ensurePopover() {
        if (this.popoverRef)
            return;
        this.popoverRef = this.vc.createComponent(AXPopoverComponent).instance;
        this.popoverRef.target = this.elementRef.nativeElement;
        this.popoverRef.openOn = 'hover';
        this.popoverRef.closeOn = 'leave';
        this.popoverRef.placement = this.placement;
        this.popoverRef.offsetX = this.offsetX;
        this.popoverRef.offsetY = this.offsetY;
        this.popoverRef.openAfter = this.openAfter;
        this.popoverRef.closeAfter = this.closeAfter;
        this.popoverRef.disabled = this.axTooltipDisabled();
    }
    #contentEff;
    close() {
        this.popoverRef.close();
    }
    #dragWatchEff;
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXTooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.3", type: AXTooltipDirective, isStandalone: true, selector: "[axTooltip]", inputs: { axTooltipDisabled: { classPropertyName: "axTooltipDisabled", publicName: "axTooltipDisabled", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "axTooltip", isSignal: true, isRequired: false, transformFunction: null }, context: { classPropertyName: "context", publicName: "axTooltipContext", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "axTooltipPlacement", isSignal: false, isRequired: false, transformFunction: null }, offsetX: { classPropertyName: "offsetX", publicName: "axTooltipOffsetX", isSignal: false, isRequired: false, transformFunction: null }, offsetY: { classPropertyName: "offsetY", publicName: "axTooltipOffsetY", isSignal: false, isRequired: false, transformFunction: null }, openAfter: { classPropertyName: "openAfter", publicName: "axTooltipOpenAfter", isSignal: false, isRequired: false, transformFunction: null }, closeAfter: { classPropertyName: "closeAfter", publicName: "axTooltipCloseAfter", isSignal: false, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXTooltipDirective, decorators: [{
            type: Directive,
            args: [{ selector: '[axTooltip]' }]
        }], propDecorators: { placement: [{
                type: Input,
                args: ['axTooltipPlacement']
            }], offsetX: [{
                type: Input,
                args: ['axTooltipOffsetX']
            }], offsetY: [{
                type: Input,
                args: ['axTooltipOffsetY']
            }], openAfter: [{
                type: Input,
                args: ['axTooltipOpenAfter']
            }], closeAfter: [{
                type: Input,
                args: ['axTooltipCloseAfter']
            }] } });

const COMPONENT = [AXTooltipComponent, AXTooltipDirective];
const MODULES = [CommonModule];
class AXTooltipModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXTooltipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: AXTooltipModule, imports: [CommonModule, AXTooltipComponent, AXTooltipDirective], exports: [AXTooltipComponent, AXTooltipDirective] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXTooltipModule, imports: [MODULES] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXTooltipModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [...MODULES, ...COMPONENT],
                    exports: [...COMPONENT],
                }]
        }] });

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

export { AXTooltipComponent, AXTooltipDirective, AXTooltipModule };
//# sourceMappingURL=acorex-components-tooltip.mjs.map
