import { Component, ElementRef, HostBinding, HostListener, Input, Renderer2 } from '@angular/core';
import { PositionService } from 'ng-devui/position';
import { directionFadeInOut } from 'ng-devui/utils';
import { fromEvent } from 'rxjs';
import * as i0 from "@angular/core";
import * as i1 from "ng-devui/position";
export class TooltipComponent {
    constructor(positionService, tooltip, renderer2) {
        this.positionService = positionService;
        this.tooltip = tooltip;
        this.renderer2 = renderer2;
        this.showAnimation = true;
        this.display = 'block';
    }
    get position() {
        return this._position;
    }
    set position(pos) {
        this._position = pos;
        this.currentPosition = Array.isArray(pos) ? pos[0] : pos;
    }
    get class() {
        return 'devui-tooltip ' + this.currentPosition;
    }
    get state() {
        return this.animateState;
    }
    get disabled() {
        return !this.showAnimation;
    }
    ngAfterViewInit() {
        this.updatePosition();
        this.scrollElement = this.positionService.getScrollParent(this.triggerElementRef.nativeElement);
        this._onScroll = fromEvent((this.scrollElement || window), 'scroll')
            .subscribe(() => {
            this.updatePosition();
        });
    }
    ngOnDestroy() {
        if (this._onScroll) {
            this._onScroll.unsubscribe();
        }
    }
    onShow() {
        this.animateState = this.currentPosition;
    }
    onHide() {
        this.animateState = 'void';
    }
    // will be overwrite by tooltip directive
    onHidden() {
    }
    onAnimationEnd(event) {
        if (event.toState === 'void') {
            this.onHidden();
        }
    }
    updatePosition() {
        // 解决tooltip自身大小导致出现滚动条，影响位置计算
        this.renderer2.setStyle(this.tooltip.nativeElement, 'visibility', 'hidden');
        this.renderer2.setStyle(this.tooltip.nativeElement, 'transform', 'translate(0, -99999px)');
        const rect = this.positionService.positionElements(this.triggerElementRef.nativeElement, this.tooltip.nativeElement, this.position, true);
        setTimeout(() => {
            this.currentPosition = rect.placementPrimary;
        });
        this.renderer2.setStyle(this.tooltip.nativeElement, 'left', `${rect.left}px`);
        this.renderer2.setStyle(this.tooltip.nativeElement, 'top', `${rect.top}px`);
        // 移除样式
        this.renderer2.removeStyle(this.tooltip.nativeElement, 'visibility');
        this.renderer2.removeStyle(this.tooltip.nativeElement, 'transform');
    }
}
TooltipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TooltipComponent, deps: [{ token: i1.PositionService }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
TooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: TooltipComponent, selector: "d-tooltip", inputs: { content: "content", position: "position", triggerElementRef: "triggerElementRef", showAnimation: "showAnimation" }, host: { listeners: { "@directionFadeInOut.done": "onAnimationEnd($event)" }, properties: { "style.display": "this.display", "class": "this.class", "@directionFadeInOut": "this.state", "@.disabled": "this.disabled" } }, ngImport: i0, template: "<div class=\"devui-tooltip-arrow\"></div>\n<div class=\"devui-tooltip-inner\" [innerHTML]=\"content\"></div>\n", styles: [".devui-font-size-base{font-size:12px;font-size:var(--devui-font-size, 12px)}.devui-font-base{font-size:12px;font-size:var(--devui-font-size, 12px);font-weight:400;line-height:1.5}.devui-font-size-modal-title{font-size:18px;font-size:var(--devui-font-size-modal-title, 18px)}.devui-font-modal-title{font-size:18px;font-size:var(--devui-font-size-modal-title, 18px);font-weight:700;line-height:1.5}.devui-font-size-page-title{font-size:16px;font-size:var(--devui-font-size-page-title, 16px)}.devui-font-page-title{font-size:16px;font-size:var(--devui-font-size-page-title, 16px);font-weight:700;line-height:1.5}.devui-font-size-secondary-title{font-size:14px;font-size:var(--devui-font-size-card-title, 14px)}.devui-font-secondary-title{font-size:14px;font-size:var(--devui-font-size-card-title, 14px);font-weight:700;line-height:1.5}:host-context(.devui-tooltip){position:absolute;z-index:1060;z-index:var(--devui-z-index-pop-up, 1060);display:block;font-style:normal;font-weight:400;line-height:1.5;line-break:auto;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;word-spacing:normal;word-wrap:normal;white-space:normal;font-size:12px;font-size:var(--devui-font-size, 12px);opacity:1}:host-context(.devui-tooltip) .devui-tooltip-arrow{display:block}:host-context(.devui-tooltip).top{margin-top:-5px;padding:0;box-shadow:0 8px 16px 0 rgba(#252b3a,.2);box-shadow:var(--devui-shadow-length-feedback-overlay, 0 8px 16px 0) rgba(var(--devui-text, #252b3a),.2)}:host-context(.devui-tooltip).top .devui-tooltip-arrow{bottom:-5px;left:50%;transform:translate(-50%);border-width:5px 5px 0;border-top-color:#464d6e;border-top-color:var(--devui-feedback-overlay-bg, #464d6e)}:host-context(.devui-tooltip).bottom{margin-top:5px;padding:0;box-shadow:0 8px 16px 0 rgba(#252b3a,.2);box-shadow:var(--devui-shadow-length-feedback-overlay, 0 8px 16px 0) rgba(var(--devui-text, #252b3a),.2)}:host-context(.devui-tooltip).bottom .devui-tooltip-arrow{top:-5px;left:50%;transform:translate(-50%);border-width:0 5px 5px;border-bottom-color:#464d6e;border-bottom-color:var(--devui-feedback-overlay-bg, #464d6e)}:host-context(.devui-tooltip).left{margin-left:-5px;padding:0;box-shadow:0 8px 16px 0 rgba(#252b3a,.2);box-shadow:var(--devui-shadow-length-feedback-overlay, 0 8px 16px 0) rgba(var(--devui-text, #252b3a),.2)}:host-context(.devui-tooltip).left .devui-tooltip-arrow{top:50%;right:-5px;transform:translateY(-50%);border-width:5px 0 5px 5px;border-left-color:#464d6e;border-left-color:var(--devui-feedback-overlay-bg, #464d6e)}:host-context(.devui-tooltip).right{margin-left:5px;padding:0;box-shadow:0 8px 16px 0 rgba(#252b3a,.2);box-shadow:var(--devui-shadow-length-feedback-overlay, 0 8px 16px 0) rgba(var(--devui-text, #252b3a),.2)}:host-context(.devui-tooltip).right .devui-tooltip-arrow{top:50%;left:-5px;transform:translateY(-50%);border-width:5px 5px 5px 0;border-right-color:#464d6e;border-right-color:var(--devui-feedback-overlay-bg, #464d6e)}:host-context(.devui-tooltip) .devui-tooltip-inner{max-width:200px;padding:4px 16px;font-size:12px;font-size:var(--devui-font-size, 12px);color:#dfe1e6;color:var(--devui-feedback-overlay-text, #dfe1e6);letter-spacing:0;line-height:1.5;background:#464d6e;background:var(--devui-feedback-overlay-bg, #464d6e);box-shadow:none;overflow-wrap:break-word;word-break:break-word;word-wrap:break-word;text-align:start;border-radius:4px;border-radius:var(--devui-border-radius-feedback, 4px);min-height:26px}:host-context(.devui-tooltip) .devui-tooltip-arrow{position:absolute;width:0;height:0;border-color:transparent;border-style:solid}\n"], animations: [
        directionFadeInOut
    ] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TooltipComponent, decorators: [{
            type: Component,
            args: [{ selector: 'd-tooltip', animations: [
                        directionFadeInOut
                    ], preserveWhitespaces: false, template: "<div class=\"devui-tooltip-arrow\"></div>\n<div class=\"devui-tooltip-inner\" [innerHTML]=\"content\"></div>\n", styles: [".devui-font-size-base{font-size:12px;font-size:var(--devui-font-size, 12px)}.devui-font-base{font-size:12px;font-size:var(--devui-font-size, 12px);font-weight:400;line-height:1.5}.devui-font-size-modal-title{font-size:18px;font-size:var(--devui-font-size-modal-title, 18px)}.devui-font-modal-title{font-size:18px;font-size:var(--devui-font-size-modal-title, 18px);font-weight:700;line-height:1.5}.devui-font-size-page-title{font-size:16px;font-size:var(--devui-font-size-page-title, 16px)}.devui-font-page-title{font-size:16px;font-size:var(--devui-font-size-page-title, 16px);font-weight:700;line-height:1.5}.devui-font-size-secondary-title{font-size:14px;font-size:var(--devui-font-size-card-title, 14px)}.devui-font-secondary-title{font-size:14px;font-size:var(--devui-font-size-card-title, 14px);font-weight:700;line-height:1.5}:host-context(.devui-tooltip){position:absolute;z-index:1060;z-index:var(--devui-z-index-pop-up, 1060);display:block;font-style:normal;font-weight:400;line-height:1.5;line-break:auto;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;word-spacing:normal;word-wrap:normal;white-space:normal;font-size:12px;font-size:var(--devui-font-size, 12px);opacity:1}:host-context(.devui-tooltip) .devui-tooltip-arrow{display:block}:host-context(.devui-tooltip).top{margin-top:-5px;padding:0;box-shadow:0 8px 16px 0 rgba(#252b3a,.2);box-shadow:var(--devui-shadow-length-feedback-overlay, 0 8px 16px 0) rgba(var(--devui-text, #252b3a),.2)}:host-context(.devui-tooltip).top .devui-tooltip-arrow{bottom:-5px;left:50%;transform:translate(-50%);border-width:5px 5px 0;border-top-color:#464d6e;border-top-color:var(--devui-feedback-overlay-bg, #464d6e)}:host-context(.devui-tooltip).bottom{margin-top:5px;padding:0;box-shadow:0 8px 16px 0 rgba(#252b3a,.2);box-shadow:var(--devui-shadow-length-feedback-overlay, 0 8px 16px 0) rgba(var(--devui-text, #252b3a),.2)}:host-context(.devui-tooltip).bottom .devui-tooltip-arrow{top:-5px;left:50%;transform:translate(-50%);border-width:0 5px 5px;border-bottom-color:#464d6e;border-bottom-color:var(--devui-feedback-overlay-bg, #464d6e)}:host-context(.devui-tooltip).left{margin-left:-5px;padding:0;box-shadow:0 8px 16px 0 rgba(#252b3a,.2);box-shadow:var(--devui-shadow-length-feedback-overlay, 0 8px 16px 0) rgba(var(--devui-text, #252b3a),.2)}:host-context(.devui-tooltip).left .devui-tooltip-arrow{top:50%;right:-5px;transform:translateY(-50%);border-width:5px 0 5px 5px;border-left-color:#464d6e;border-left-color:var(--devui-feedback-overlay-bg, #464d6e)}:host-context(.devui-tooltip).right{margin-left:5px;padding:0;box-shadow:0 8px 16px 0 rgba(#252b3a,.2);box-shadow:var(--devui-shadow-length-feedback-overlay, 0 8px 16px 0) rgba(var(--devui-text, #252b3a),.2)}:host-context(.devui-tooltip).right .devui-tooltip-arrow{top:50%;left:-5px;transform:translateY(-50%);border-width:5px 5px 5px 0;border-right-color:#464d6e;border-right-color:var(--devui-feedback-overlay-bg, #464d6e)}:host-context(.devui-tooltip) .devui-tooltip-inner{max-width:200px;padding:4px 16px;font-size:12px;font-size:var(--devui-font-size, 12px);color:#dfe1e6;color:var(--devui-feedback-overlay-text, #dfe1e6);letter-spacing:0;line-height:1.5;background:#464d6e;background:var(--devui-feedback-overlay-bg, #464d6e);box-shadow:none;overflow-wrap:break-word;word-break:break-word;word-wrap:break-word;text-align:start;border-radius:4px;border-radius:var(--devui-border-radius-feedback, 4px);min-height:26px}:host-context(.devui-tooltip) .devui-tooltip-arrow{position:absolute;width:0;height:0;border-color:transparent;border-style:solid}\n"] }]
        }], ctorParameters: function () { return [{ type: i1.PositionService }, { type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { content: [{
                type: Input
            }], position: [{
                type: Input
            }], triggerElementRef: [{
                type: Input
            }], showAnimation: [{
                type: Input
            }], display: [{
                type: HostBinding,
                args: ['style.display']
            }], class: [{
                type: HostBinding,
                args: ['class']
            }], state: [{
                type: HostBinding,
                args: ['@directionFadeInOut']
            }], disabled: [{
                type: HostBinding,
                args: ['@.disabled']
            }], onAnimationEnd: [{
                type: HostListener,
                args: ['@directionFadeInOut.done', ['$event']]
            }] } });
//# sourceMappingURL=data:application/json;base64, 