import { Component, ViewEncapsulation, Input, Output, Renderer2, EventEmitter, ChangeDetectorRef, ContentChild, ViewChild } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { NzTooltipDirective } from './nz-tooltip.directive';
import { FadeAnimation } from '../core/animation/fade-animations';
import { POSITION_MAP, DEFAULT_4_POSITIONS } from '../core/overlay/overlay-position-map';
var NzToolTipComponent = (function () {
    function NzToolTipComponent(_renderer, _cdr) {
        this._renderer = _renderer;
        this._cdr = _cdr;
        this.nzOverlayClassName = '';
        this.nzOverlayStyle = {};
        this.nzVisibleChange = new EventEmitter();
        this.visibleSource = new BehaviorSubject(false);
        this.visible$ = this.visibleSource.asObservable();
        this._prefix = 'ant-tooltip-placement';
        this._positions = DEFAULT_4_POSITIONS.slice();
        this._classMap = {};
        this._placement = 'top';
        this._trigger = 'hover';
        this._hasBackdrop = false;
    }
    Object.defineProperty(NzToolTipComponent.prototype, "nzVisible", {
        get: function () {
            return this.visibleSource.value;
        },
        set: function (value) {
            if (this.visibleSource.value !== value) {
                this.visibleSource.next(value);
                this.nzVisibleChange.emit(value);
            }
        },
        enumerable: true,
        configurable: true
    });
    ;
    Object.defineProperty(NzToolTipComponent.prototype, "nzTrigger", {
        get: function () {
            return this._trigger;
        },
        set: function (value) {
            this._trigger = value;
            this._hasBackdrop = this._trigger === 'click';
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(NzToolTipComponent.prototype, "nzPlacement", {
        get: function () {
            return this._placement;
        },
        set: function (value) {
            if (value !== this._placement) {
                this._placement = value;
                this._positions.unshift(POSITION_MAP[this.nzPlacement]);
            }
        },
        enumerable: true,
        configurable: true
    });
    // Manually force updating current overlay's position
    NzToolTipComponent.prototype.updatePosition = function () {
        if (this.overlay && this.overlay.overlayRef) {
            this.overlay.overlayRef.updatePosition();
        }
    };
    NzToolTipComponent.prototype.onPositionChange = function ($event) {
        for (var key in POSITION_MAP) {
            if (JSON.stringify($event.connectionPair) === JSON.stringify(POSITION_MAP[key])) {
                this.nzPlacement = key;
                break;
            }
        }
        this.setClassMap();
        /** TODO may cause performance problem */
        this._cdr.detectChanges();
    };
    NzToolTipComponent.prototype.show = function () {
        this.nzVisible = true;
        this.nzOrigin.isTooltipOpen = true;
    };
    NzToolTipComponent.prototype.hide = function () {
        this.nzVisible = false;
        this.nzOrigin.isTooltipOpen = false;
    };
    NzToolTipComponent.prototype._afterVisibilityAnimation = function (e) {
        if (e.toState === 'false' && !this.nzVisible) {
            this.nzVisibleChange.emit(false);
        }
        if (e.toState === 'true' && this.nzVisible) {
            this.nzVisibleChange.emit(true);
        }
    };
    NzToolTipComponent.prototype.setClassMap = function () {
        this._classMap = (_a = {},
            _a[this.nzOverlayClassName] = true,
            _a[this._prefix + "-" + this._placement] = true,
            _a);
        var _a;
    };
    NzToolTipComponent.prototype.ngAfterViewInit = function () {
        var _this = this;
        if (this._trigger === 'hover') {
            this._renderer.listen(this.nzOrigin.elementRef.nativeElement, 'mouseenter', function () { return _this.show(); });
            this._renderer.listen(this.nzOrigin.elementRef.nativeElement, 'mouseleave', function () { return _this.hide(); });
        }
        else if (this._trigger === 'focus') {
            this._renderer.listen(this.nzOrigin.elementRef.nativeElement, 'focus', function () { return _this.show(); });
            this._renderer.listen(this.nzOrigin.elementRef.nativeElement, 'blur', function () { return _this.hide(); });
        }
        else if (this._trigger === 'click') {
            this._renderer.listen(this.nzOrigin.elementRef.nativeElement, 'click', function (e) {
                e.preventDefault();
                _this.show();
            });
        }
    };
    return NzToolTipComponent;
}());
export { NzToolTipComponent };
NzToolTipComponent.decorators = [
    { type: Component, args: [{
                selector: 'nz-tooltip',
                encapsulation: ViewEncapsulation.None,
                animations: [
                    FadeAnimation
                ],
                template: "\n    <ng-content></ng-content>\n    <ng-template\n      #overlay=\"nzConnectedOverlay\"\n      nz-connected-overlay\n      [origin]=\"nzOrigin\"\n      [hasBackdrop]=\"_hasBackdrop\"\n      (backdropClick)=\"hide()\"\n      (detach)=\"hide()\"\n      (positionChange)=\"onPositionChange($event)\"\n      [positions]=\"_positions\"\n      [open]=\"visible$ | async\">\n      <div class=\"ant-tooltip\" [ngClass]=\"_classMap\" [ngStyle]=\"nzOverlayStyle\" [@fadeAnimation]=\"''+(visible$ | async)\"\n        (@fadeAnimation.done)=\"_afterVisibilityAnimation($event)\">\n        <div class=\"ant-tooltip-content\">\n          <div class=\"ant-tooltip-arrow\"></div>\n          <div class=\"ant-tooltip-inner\">\n            <span *ngIf=\"!nzTemplate\">{{nzTitle}}</span>\n            <ng-template\n              *ngIf=\"nzTemplate\"\n              [ngTemplateOutlet]=\"nzTemplate\">\n            </ng-template>\n          </div>\n        </div>\n      </div>\n    </ng-template>",
                styles: [
                    "/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */\n/* stylelint-disable declaration-bang-space-before */\n/* stylelint-disable declaration-bang-space-before */\n.ant-tooltip {\n  position: absolute;\n  z-index: 1060;\n  display: block;\n  visibility: visible;\n  font-size: 12px;\n  line-height: 1.5;\n}\n.ant-tooltip-hidden {\n  display: none;\n}\n.ant-tooltip-placement-top,\n.ant-tooltip-placement-topLeft,\n.ant-tooltip-placement-topRight {\n  padding-bottom: 8px;\n}\n.ant-tooltip-placement-right,\n.ant-tooltip-placement-rightTop,\n.ant-tooltip-placement-rightBottom {\n  padding-left: 8px;\n}\n.ant-tooltip-placement-bottom,\n.ant-tooltip-placement-bottomLeft,\n.ant-tooltip-placement-bottomRight {\n  padding-top: 8px;\n}\n.ant-tooltip-placement-left,\n.ant-tooltip-placement-leftTop,\n.ant-tooltip-placement-leftBottom {\n  padding-right: 8px;\n}\n.ant-tooltip-inner {\n  max-width: 250px;\n  padding: 8px 10px;\n  color: #fff;\n  text-align: left;\n  text-decoration: none;\n  background-color: rgba(64, 64, 64, 0.85);\n  border-radius: 4px;\n  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);\n  min-height: 34px;\n}\n.ant-tooltip-arrow {\n  position: absolute;\n  width: 0;\n  height: 0;\n  border-color: transparent;\n  border-style: solid;\n}\n.ant-tooltip-placement-top .ant-tooltip-arrow,\n.ant-tooltip-placement-topLeft .ant-tooltip-arrow,\n.ant-tooltip-placement-topRight .ant-tooltip-arrow {\n  bottom: 3px;\n  border-width: 5px 5px 0;\n  border-top-color: rgba(64, 64, 64, 0.85);\n}\n.ant-tooltip-placement-top .ant-tooltip-arrow {\n  left: 50%;\n  margin-left: -5px;\n}\n.ant-tooltip-placement-topLeft .ant-tooltip-arrow {\n  left: 16px;\n}\n.ant-tooltip-placement-topRight .ant-tooltip-arrow {\n  right: 16px;\n}\n.ant-tooltip-placement-right .ant-tooltip-arrow,\n.ant-tooltip-placement-rightTop .ant-tooltip-arrow,\n.ant-tooltip-placement-rightBottom .ant-tooltip-arrow {\n  left: 3px;\n  border-width: 5px 5px 5px 0;\n  border-right-color: rgba(64, 64, 64, 0.85);\n}\n.ant-tooltip-placement-right .ant-tooltip-arrow {\n  top: 50%;\n  margin-top: -5px;\n}\n.ant-tooltip-placement-rightTop .ant-tooltip-arrow {\n  top: 8px;\n}\n.ant-tooltip-placement-rightBottom .ant-tooltip-arrow {\n  bottom: 8px;\n}\n.ant-tooltip-placement-left .ant-tooltip-arrow,\n.ant-tooltip-placement-leftTop .ant-tooltip-arrow,\n.ant-tooltip-placement-leftBottom .ant-tooltip-arrow {\n  right: 3px;\n  border-width: 5px 0 5px 5px;\n  border-left-color: rgba(64, 64, 64, 0.85);\n}\n.ant-tooltip-placement-left .ant-tooltip-arrow {\n  top: 50%;\n  margin-top: -5px;\n}\n.ant-tooltip-placement-leftTop .ant-tooltip-arrow {\n  top: 8px;\n}\n.ant-tooltip-placement-leftBottom .ant-tooltip-arrow {\n  bottom: 8px;\n}\n.ant-tooltip-placement-bottom .ant-tooltip-arrow,\n.ant-tooltip-placement-bottomLeft .ant-tooltip-arrow,\n.ant-tooltip-placement-bottomRight .ant-tooltip-arrow {\n  top: 3px;\n  border-width: 0 5px 5px;\n  border-bottom-color: rgba(64, 64, 64, 0.85);\n}\n.ant-tooltip-placement-bottom .ant-tooltip-arrow {\n  left: 50%;\n  margin-left: -5px;\n}\n.ant-tooltip-placement-bottomLeft .ant-tooltip-arrow {\n  left: 16px;\n}\n.ant-tooltip-placement-bottomRight .ant-tooltip-arrow {\n  right: 16px;\n}\n",
                    "/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */\n/* stylelint-disable declaration-bang-space-before */\n/* stylelint-disable declaration-bang-space-before */\n.ant-tooltip {\n  position: absolute;\n  z-index: 1060;\n  display: block;\n  visibility: visible;\n  font-size: 12px;\n  line-height: 1.5;\n}\n.ant-tooltip-hidden {\n  display: none;\n}\n.ant-tooltip-placement-top,\n.ant-tooltip-placement-topLeft,\n.ant-tooltip-placement-topRight {\n  padding-bottom: 8px;\n}\n.ant-tooltip-placement-right,\n.ant-tooltip-placement-rightTop,\n.ant-tooltip-placement-rightBottom {\n  padding-left: 8px;\n}\n.ant-tooltip-placement-bottom,\n.ant-tooltip-placement-bottomLeft,\n.ant-tooltip-placement-bottomRight {\n  padding-top: 8px;\n}\n.ant-tooltip-placement-left,\n.ant-tooltip-placement-leftTop,\n.ant-tooltip-placement-leftBottom {\n  padding-right: 8px;\n}\n.ant-tooltip-inner {\n  max-width: 250px;\n  padding: 8px 10px;\n  color: #fff;\n  text-align: left;\n  text-decoration: none;\n  background-color: rgba(64, 64, 64, 0.85);\n  border-radius: 4px;\n  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);\n  min-height: 34px;\n}\n.ant-tooltip-arrow {\n  position: absolute;\n  width: 0;\n  height: 0;\n  border-color: transparent;\n  border-style: solid;\n}\n.ant-tooltip-placement-top .ant-tooltip-arrow,\n.ant-tooltip-placement-topLeft .ant-tooltip-arrow,\n.ant-tooltip-placement-topRight .ant-tooltip-arrow {\n  bottom: 3px;\n  border-width: 5px 5px 0;\n  border-top-color: rgba(64, 64, 64, 0.85);\n}\n.ant-tooltip-placement-top .ant-tooltip-arrow {\n  left: 50%;\n  margin-left: -5px;\n}\n.ant-tooltip-placement-topLeft .ant-tooltip-arrow {\n  left: 16px;\n}\n.ant-tooltip-placement-topRight .ant-tooltip-arrow {\n  right: 16px;\n}\n.ant-tooltip-placement-right .ant-tooltip-arrow,\n.ant-tooltip-placement-rightTop .ant-tooltip-arrow,\n.ant-tooltip-placement-rightBottom .ant-tooltip-arrow {\n  left: 3px;\n  border-width: 5px 5px 5px 0;\n  border-right-color: rgba(64, 64, 64, 0.85);\n}\n.ant-tooltip-placement-right .ant-tooltip-arrow {\n  top: 50%;\n  margin-top: -5px;\n}\n.ant-tooltip-placement-rightTop .ant-tooltip-arrow {\n  top: 8px;\n}\n.ant-tooltip-placement-rightBottom .ant-tooltip-arrow {\n  bottom: 8px;\n}\n.ant-tooltip-placement-left .ant-tooltip-arrow,\n.ant-tooltip-placement-leftTop .ant-tooltip-arrow,\n.ant-tooltip-placement-leftBottom .ant-tooltip-arrow {\n  right: 3px;\n  border-width: 5px 0 5px 5px;\n  border-left-color: rgba(64, 64, 64, 0.85);\n}\n.ant-tooltip-placement-left .ant-tooltip-arrow {\n  top: 50%;\n  margin-top: -5px;\n}\n.ant-tooltip-placement-leftTop .ant-tooltip-arrow {\n  top: 8px;\n}\n.ant-tooltip-placement-leftBottom .ant-tooltip-arrow {\n  bottom: 8px;\n}\n.ant-tooltip-placement-bottom .ant-tooltip-arrow,\n.ant-tooltip-placement-bottomLeft .ant-tooltip-arrow,\n.ant-tooltip-placement-bottomRight .ant-tooltip-arrow {\n  top: 3px;\n  border-width: 0 5px 5px;\n  border-bottom-color: rgba(64, 64, 64, 0.85);\n}\n.ant-tooltip-placement-bottom .ant-tooltip-arrow {\n  left: 50%;\n  margin-left: -5px;\n}\n.ant-tooltip-placement-bottomLeft .ant-tooltip-arrow {\n  left: 16px;\n}\n.ant-tooltip-placement-bottomRight .ant-tooltip-arrow {\n  right: 16px;\n}\n.ant-tooltip {\n  position: relative;\n}\n"
                ]
            },] },
];
/** @nocollapse */
NzToolTipComponent.ctorParameters = function () { return [
    { type: Renderer2, },
    { type: ChangeDetectorRef, },
]; };
NzToolTipComponent.propDecorators = {
    'nzTitle': [{ type: Input },],
    'nzOverlayClassName': [{ type: Input },],
    'nzOverlayStyle': [{ type: Input },],
    'nzVisibleChange': [{ type: Output },],
    'nzOrigin': [{ type: ContentChild, args: [NzTooltipDirective,] },],
    'nzTemplate': [{ type: ContentChild, args: ['nzTemplate',] },],
    'overlay': [{ type: ViewChild, args: ['overlay',] },],
    'nzVisible': [{ type: Input },],
    'nzTrigger': [{ type: Input },],
    'nzPlacement': [{ type: Input },],
};
