"use strict"; var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; return c > 3 && r && Object.defineProperty(target, key, r), r; }; var __metadata = (this && this.__metadata) || function (k, v) { if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v); }; var core_1 = require("@angular/core"); var TooltipContent = (function () { // ------------------------------------------------------------------------- // Constructor // ------------------------------------------------------------------------- function TooltipContent(element, cdr) { this.element = element; this.cdr = cdr; this.placement = "bottom"; this.animation = true; // ------------------------------------------------------------------------- // Properties // ------------------------------------------------------------------------- this.top = -100000; this.left = -100000; this.isIn = false; this.isFade = false; } // ------------------------------------------------------------------------- // Lifecycle callbacks // ------------------------------------------------------------------------- TooltipContent.prototype.ngAfterViewInit = function () { this.show(); this.cdr.detectChanges(); }; // ------------------------------------------------------------------------- // Public Methods // ------------------------------------------------------------------------- TooltipContent.prototype.show = function () { if (!this.hostElement) return; var p = this.positionElements(this.hostElement, this.element.nativeElement.children[0], this.placement); this.top = p.top; this.left = p.left; this.isIn = true; if (this.animation) this.isFade = true; }; TooltipContent.prototype.hide = function () { this.top = -100000; this.left = -100000; this.isIn = true; if (this.animation) this.isFade = false; }; // ------------------------------------------------------------------------- // Private Methods // ------------------------------------------------------------------------- TooltipContent.prototype.positionElements = function (hostEl, targetEl, positionStr, appendToBody) { if (appendToBody === void 0) { appendToBody = false; } var positionStrParts = positionStr.split("-"); var pos0 = positionStrParts[0]; var pos1 = positionStrParts[1] || "center"; var hostElPos = appendToBody ? this.offset(hostEl) : this.position(hostEl); var targetElWidth = targetEl.offsetWidth; var targetElHeight = targetEl.offsetHeight; var shiftWidth = { center: function () { return hostElPos.left + hostElPos.width / 2 - targetElWidth / 2; }, left: function () { return hostElPos.left; }, right: function () { return hostElPos.left + hostElPos.width; } }; var shiftHeight = { center: function () { return hostElPos.top + hostElPos.height / 2 - targetElHeight / 2; }, top: function () { return hostElPos.top; }, bottom: function () { return hostElPos.top + hostElPos.height; } }; var targetElPos; switch (pos0) { case "right": targetElPos = { top: shiftHeight[pos1](), left: shiftWidth[pos0]() }; break; case "left": targetElPos = { top: shiftHeight[pos1](), left: hostElPos.left - targetElWidth }; break; case "bottom": targetElPos = { top: shiftHeight[pos0](), left: shiftWidth[pos1]() }; break; default: targetElPos = { top: hostElPos.top - targetElHeight, left: shiftWidth[pos1]() }; break; } return targetElPos; }; TooltipContent.prototype.position = function (nativeEl) { var offsetParentBCR = { top: 0, left: 0 }; var elBCR = this.offset(nativeEl); var offsetParentEl = this.parentOffsetEl(nativeEl); if (offsetParentEl !== window.document) { offsetParentBCR = this.offset(offsetParentEl); offsetParentBCR.top += offsetParentEl.clientTop - offsetParentEl.scrollTop; offsetParentBCR.left += offsetParentEl.clientLeft - offsetParentEl.scrollLeft; } var boundingClientRect = nativeEl.getBoundingClientRect(); return { width: boundingClientRect.width || nativeEl.offsetWidth, height: boundingClientRect.height || nativeEl.offsetHeight, top: elBCR.top - offsetParentBCR.top, left: elBCR.left - offsetParentBCR.left }; }; TooltipContent.prototype.offset = function (nativeEl) { var boundingClientRect = nativeEl.getBoundingClientRect(); return { width: boundingClientRect.width || nativeEl.offsetWidth, height: boundingClientRect.height || nativeEl.offsetHeight, top: boundingClientRect.top + (window.pageYOffset || window.document.documentElement.scrollTop), left: boundingClientRect.left + (window.pageXOffset || window.document.documentElement.scrollLeft) }; }; TooltipContent.prototype.getStyle = function (nativeEl, cssProp) { if (nativeEl.currentStyle) return nativeEl.currentStyle[cssProp]; if (window.getComputedStyle) return window.getComputedStyle(nativeEl)[cssProp]; // finally try and get inline style return nativeEl.style[cssProp]; }; TooltipContent.prototype.isStaticPositioned = function (nativeEl) { return (this.getStyle(nativeEl, "position") || "static") === "static"; }; TooltipContent.prototype.parentOffsetEl = function (nativeEl) { var offsetParent = nativeEl.offsetParent || window.document; while (offsetParent && offsetParent !== window.document && this.isStaticPositioned(offsetParent)) { offsetParent = offsetParent.offsetParent; } return offsetParent || window.document; }; return TooltipContent; }()); __decorate([ core_1.Input(), __metadata("design:type", HTMLElement) ], TooltipContent.prototype, "hostElement", void 0); __decorate([ core_1.Input(), __metadata("design:type", String) ], TooltipContent.prototype, "content", void 0); __decorate([ core_1.Input(), __metadata("design:type", String) ], TooltipContent.prototype, "placement", void 0); __decorate([ core_1.Input(), __metadata("design:type", Boolean) ], TooltipContent.prototype, "animation", void 0); TooltipContent = __decorate([ core_1.Component({ selector: "tooltip-content", template: "\n
\n
\n
\n \n {{ content }}\n
\n
\n" }), __metadata("design:paramtypes", [core_1.ElementRef, core_1.ChangeDetectorRef]) ], TooltipContent); exports.TooltipContent = TooltipContent; //# sourceMappingURL=TooltipContent.js.map