import * as tslib_1 from "tslib";
import { Input, Directive, ElementRef, Renderer2, ViewContainerRef, Injector, NgZone, ComponentFactoryResolver } from '@angular/core';
import { OnChange } from '../core/decorators';
import { TiplayerComponent } from './tiplayer';
import { OverlayPositionService } from '../overlay/overlay-position.service';
import { DynamicComponentService } from '../overlay/dynamic-component.service';
var TooltipDirective = /** @class */ (function () {
    function TooltipDirective(el, renderer, viewContainerRef, injector, ngZone, componentFactoryResolver, dynamicComponentService, overlayPositionService) {
        this.el = el;
        this.renderer = renderer;
        this.viewContainerRef = viewContainerRef;
        this.injector = injector;
        this.ngZone = ngZone;
        this.componentFactoryResolver = componentFactoryResolver;
        this.dynamicComponentService = dynamicComponentService;
        this.overlayPositionService = overlayPositionService;
        /**
         * 提示框的内容
         */
        this.nbTooltip = '';
        /**
         * 浮层模式还是嵌入模式
         * @default false
         */
        this.embedded = false;
        /**
         * 提示框的触发事件类型
         * 可选值为 'click' | 'hover' | 'focus'
         * @default hover
         */
        this.trigger = 'hover';
        /**
         * 是否有箭头
         * @default false
         */
        this.hasArrow = false;
        /**
         * 提示框主题色
         * 可选值为 'default' | white' | 'pink' | 'yellow'
         * @default default
         */
        this.nbTooltipTheme = 'default';
    }
    TooltipDirective.prototype.ngOnInit = function () {
        var _this = this;
        // 绑定事件
        if (this.trigger === 'hover') {
            this.enterListener =
                this.renderer.listen(this.el.nativeElement, 'mouseenter', function () { return _this.show(); });
            this.leaveListener =
                this.renderer.listen(this.el.nativeElement, 'mouseleave', function () { return _this.hide(); });
        }
        if (this.trigger === 'click') {
            this.clickListener =
                this.renderer.listen(this.el.nativeElement, 'click', function (e) { return _this._handleHostClick(e); });
        }
        if (this.trigger === 'focus') {
            this.focusListener =
                this.renderer.listen(this.el.nativeElement, 'focus', function () { return _this.show(); });
            this.blurListener =
                this.renderer.listen(this.el.nativeElement, 'blur', function () { return _this.hide(); });
        }
    };
    /**
     * 截获Tooltip内容的变化，重新渲染
     * 仅支持Tooltip内容为 string 类型
     */
    TooltipDirective.prototype.ngOnChanges = function (changes) {
        if (changes['nbTooltip']) {
            if (this.tiplayerInstance) {
                this.tiplayerInstance.changeContent(this.nbTooltip);
            }
        }
    };
    /**
     * 创建并显示Tooltip
     */
    TooltipDirective.prototype.show = function () {
        if (!this.tiplayerInstance) {
            this._createTiplayer();
        }
        this.tiplayerInstance.show();
    };
    /**
     * 隐藏Tooltip
     */
    TooltipDirective.prototype.hide = function () {
        if (this.tiplayerInstance) {
            this.tiplayerInstance.hide();
        }
    };
    /**
     * 显示或隐藏Tooltip
     */
    TooltipDirective.prototype.toggle = function () {
        this.isTooltipVisible() ? this.hide() : this.show();
    };
    /**
     * Tooltip是否显示
     */
    TooltipDirective.prototype.isTooltipVisible = function () {
        return !!this.tiplayerInstance && this.tiplayerInstance.isVisible();
    };
    /**
     * 处理宿主元素上的点击
     * @param { Event } event - click event
     */
    TooltipDirective.prototype._handleHostClick = function (event) {
        this.toggle();
        event.stopPropagation();
    };
    /**
     * 打开一个宿主元素的提示时，动态创建一个提示框组件
     * 根据是否为嵌入方式，决定创建在当前元素的container内还是挂载到body下面
     */
    TooltipDirective.prototype._createTiplayer = function () {
        var _this = this;
        var hostElement;
        if (!this.embedded) {
            hostElement = window.document.body;
        }
        var componentRef = this.dynamicComponentService.createDynamicComponent(this.viewContainerRef, TiplayerComponent, this.nbTooltip, hostElement);
        this.tiplayerInstance = componentRef.instance;
        var config = {
            origin: this,
            nbWidth: this.nbWidth,
            nbHeight: this.nbHeight,
            trigger: this.trigger,
            hasArrow: this.hasArrow,
            embedded: this.embedded,
            placement: this.placement,
            nbTooltipClass: this.nbTooltipClass,
            nbTooltipTheme: this.nbTooltipTheme
        };
        Object.keys(config).forEach(function (key) { return _this.tiplayerInstance[key] = config[key]; });
    };
    /**
     * 重新定位Tooltip
     */
    TooltipDirective.prototype.needReposition = function () {
        if (this.positionStrategy) {
            this.overlayPositionService.updatePosition(this.positionStrategy);
        }
    };
    TooltipDirective.prototype.ngOnDestroy = function () {
        if (this.tiplayerInstance) {
            this.tiplayerInstance = null;
        }
        if (this.trigger === 'click') {
            this.clickListener();
        }
        if (this.trigger === 'hover') {
            this.enterListener();
            this.leaveListener();
        }
        if (this.trigger === 'focus') {
            this.focusListener();
            this.blurListener();
        }
    };
    /**
     * 处理body区域内的点击
     */
    TooltipDirective.prototype.handleBodyInteraction = function () {
        if (this.trigger === 'click') {
            this.hide();
        }
    };
    tslib_1.__decorate([
        Input(),
        tslib_1.__metadata("design:type", Number)
    ], TooltipDirective.prototype, "nbWidth", void 0);
    tslib_1.__decorate([
        Input(),
        tslib_1.__metadata("design:type", Number)
    ], TooltipDirective.prototype, "nbHeight", void 0);
    tslib_1.__decorate([
        Input(),
        tslib_1.__metadata("design:type", String)
    ], TooltipDirective.prototype, "nbTooltipClass", void 0);
    tslib_1.__decorate([
        Input(),
        tslib_1.__metadata("design:type", Object)
    ], TooltipDirective.prototype, "nbTooltip", void 0);
    tslib_1.__decorate([
        OnChange(),
        Input(),
        tslib_1.__metadata("design:type", String)
    ], TooltipDirective.prototype, "placement", void 0);
    tslib_1.__decorate([
        OnChange(true),
        Input(),
        tslib_1.__metadata("design:type", Boolean)
    ], TooltipDirective.prototype, "embedded", void 0);
    tslib_1.__decorate([
        Input(),
        tslib_1.__metadata("design:type", String)
    ], TooltipDirective.prototype, "trigger", void 0);
    tslib_1.__decorate([
        OnChange(true),
        Input(),
        tslib_1.__metadata("design:type", Boolean)
    ], TooltipDirective.prototype, "hasArrow", void 0);
    tslib_1.__decorate([
        Input(),
        tslib_1.__metadata("design:type", String)
    ], TooltipDirective.prototype, "nbTooltipTheme", void 0);
    TooltipDirective = tslib_1.__decorate([
        Directive({
            selector: '[nbTooltip]',
            exportAs: 'nbTooltip',
            providers: [DynamicComponentService, OverlayPositionService],
            host: {
                '(body:click)': 'handleBodyInteraction()'
            }
        }),
        tslib_1.__metadata("design:paramtypes", [ElementRef,
            Renderer2,
            ViewContainerRef,
            Injector,
            NgZone,
            ComponentFactoryResolver,
            DynamicComponentService,
            OverlayPositionService])
    ], TooltipDirective);
    return TooltipDirective;
}());
export { TooltipDirective };
//# sourceMappingURL=tooltip.js.map