ngx-tooltip.pure.system.js 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367
  1. System.register("ngx-tooltip/TooltipContent", ["@angular/core"], function (exports_1, context_1) {
  2. var __moduleName = context_1 && context_1.id;
  3. var core_1, TooltipContent;
  4. return {
  5. setters: [
  6. function (core_1_1) {
  7. core_1 = core_1_1;
  8. }
  9. ],
  10. execute: function () {
  11. TooltipContent = (function () {
  12. // -------------------------------------------------------------------------
  13. // Constructor
  14. // -------------------------------------------------------------------------
  15. function TooltipContent(element, cdr) {
  16. this.element = element;
  17. this.cdr = cdr;
  18. this.placement = "bottom";
  19. this.animation = true;
  20. // -------------------------------------------------------------------------
  21. // Properties
  22. // -------------------------------------------------------------------------
  23. this.top = -100000;
  24. this.left = -100000;
  25. this.isIn = false;
  26. this.isFade = false;
  27. }
  28. // -------------------------------------------------------------------------
  29. // Lifecycle callbacks
  30. // -------------------------------------------------------------------------
  31. TooltipContent.prototype.ngAfterViewInit = function () {
  32. this.show();
  33. this.cdr.detectChanges();
  34. };
  35. // -------------------------------------------------------------------------
  36. // Public Methods
  37. // -------------------------------------------------------------------------
  38. TooltipContent.prototype.show = function () {
  39. if (!this.hostElement)
  40. return;
  41. var p = this.positionElements(this.hostElement, this.element.nativeElement.children[0], this.placement);
  42. this.top = p.top;
  43. this.left = p.left;
  44. this.isIn = true;
  45. if (this.animation)
  46. this.isFade = true;
  47. };
  48. TooltipContent.prototype.hide = function () {
  49. this.top = -100000;
  50. this.left = -100000;
  51. this.isIn = true;
  52. if (this.animation)
  53. this.isFade = false;
  54. };
  55. // -------------------------------------------------------------------------
  56. // Private Methods
  57. // -------------------------------------------------------------------------
  58. TooltipContent.prototype.positionElements = function (hostEl, targetEl, positionStr, appendToBody) {
  59. if (appendToBody === void 0) { appendToBody = false; }
  60. var positionStrParts = positionStr.split("-");
  61. var pos0 = positionStrParts[0];
  62. var pos1 = positionStrParts[1] || "center";
  63. var hostElPos = appendToBody ? this.offset(hostEl) : this.position(hostEl);
  64. var targetElWidth = targetEl.offsetWidth;
  65. var targetElHeight = targetEl.offsetHeight;
  66. var shiftWidth = {
  67. center: function () {
  68. return hostElPos.left + hostElPos.width / 2 - targetElWidth / 2;
  69. },
  70. left: function () {
  71. return hostElPos.left;
  72. },
  73. right: function () {
  74. return hostElPos.left + hostElPos.width;
  75. }
  76. };
  77. var shiftHeight = {
  78. center: function () {
  79. return hostElPos.top + hostElPos.height / 2 - targetElHeight / 2;
  80. },
  81. top: function () {
  82. return hostElPos.top;
  83. },
  84. bottom: function () {
  85. return hostElPos.top + hostElPos.height;
  86. }
  87. };
  88. var targetElPos;
  89. switch (pos0) {
  90. case "right":
  91. targetElPos = {
  92. top: shiftHeight[pos1](),
  93. left: shiftWidth[pos0]()
  94. };
  95. break;
  96. case "left":
  97. targetElPos = {
  98. top: shiftHeight[pos1](),
  99. left: hostElPos.left - targetElWidth
  100. };
  101. break;
  102. case "bottom":
  103. targetElPos = {
  104. top: shiftHeight[pos0](),
  105. left: shiftWidth[pos1]()
  106. };
  107. break;
  108. default:
  109. targetElPos = {
  110. top: hostElPos.top - targetElHeight,
  111. left: shiftWidth[pos1]()
  112. };
  113. break;
  114. }
  115. return targetElPos;
  116. };
  117. TooltipContent.prototype.position = function (nativeEl) {
  118. var offsetParentBCR = { top: 0, left: 0 };
  119. var elBCR = this.offset(nativeEl);
  120. var offsetParentEl = this.parentOffsetEl(nativeEl);
  121. if (offsetParentEl !== window.document) {
  122. offsetParentBCR = this.offset(offsetParentEl);
  123. offsetParentBCR.top += offsetParentEl.clientTop - offsetParentEl.scrollTop;
  124. offsetParentBCR.left += offsetParentEl.clientLeft - offsetParentEl.scrollLeft;
  125. }
  126. var boundingClientRect = nativeEl.getBoundingClientRect();
  127. return {
  128. width: boundingClientRect.width || nativeEl.offsetWidth,
  129. height: boundingClientRect.height || nativeEl.offsetHeight,
  130. top: elBCR.top - offsetParentBCR.top,
  131. left: elBCR.left - offsetParentBCR.left
  132. };
  133. };
  134. TooltipContent.prototype.offset = function (nativeEl) {
  135. var boundingClientRect = nativeEl.getBoundingClientRect();
  136. return {
  137. width: boundingClientRect.width || nativeEl.offsetWidth,
  138. height: boundingClientRect.height || nativeEl.offsetHeight,
  139. top: boundingClientRect.top + (window.pageYOffset || window.document.documentElement.scrollTop),
  140. left: boundingClientRect.left + (window.pageXOffset || window.document.documentElement.scrollLeft)
  141. };
  142. };
  143. TooltipContent.prototype.getStyle = function (nativeEl, cssProp) {
  144. if (nativeEl.currentStyle)
  145. return nativeEl.currentStyle[cssProp];
  146. if (window.getComputedStyle)
  147. return window.getComputedStyle(nativeEl)[cssProp];
  148. // finally try and get inline style
  149. return nativeEl.style[cssProp];
  150. };
  151. TooltipContent.prototype.isStaticPositioned = function (nativeEl) {
  152. return (this.getStyle(nativeEl, "position") || "static") === "static";
  153. };
  154. TooltipContent.prototype.parentOffsetEl = function (nativeEl) {
  155. var offsetParent = nativeEl.offsetParent || window.document;
  156. while (offsetParent && offsetParent !== window.document && this.isStaticPositioned(offsetParent)) {
  157. offsetParent = offsetParent.offsetParent;
  158. }
  159. return offsetParent || window.document;
  160. };
  161. return TooltipContent;
  162. }());
  163. __decorate([
  164. core_1.Input(),
  165. __metadata("design:type", HTMLElement)
  166. ], TooltipContent.prototype, "hostElement", void 0);
  167. __decorate([
  168. core_1.Input(),
  169. __metadata("design:type", String)
  170. ], TooltipContent.prototype, "content", void 0);
  171. __decorate([
  172. core_1.Input(),
  173. __metadata("design:type", String)
  174. ], TooltipContent.prototype, "placement", void 0);
  175. __decorate([
  176. core_1.Input(),
  177. __metadata("design:type", Boolean)
  178. ], TooltipContent.prototype, "animation", void 0);
  179. TooltipContent = __decorate([
  180. core_1.Component({
  181. selector: "tooltip-content",
  182. template: "\n<div class=\"tooltip {{ placement }}\"\n [style.top]=\"top + 'px'\"\n [style.left]=\"left + 'px'\"\n [class.in]=\"isIn\"\n [class.fade]=\"isFade\"\n role=\"tooltip\">\n <div class=\"tooltip-arrow\"></div> \n <div class=\"tooltip-inner\">\n <ng-content></ng-content>\n {{ content }}\n </div> \n</div>\n"
  183. }),
  184. __metadata("design:paramtypes", [core_1.ElementRef,
  185. core_1.ChangeDetectorRef])
  186. ], TooltipContent);
  187. exports_1("TooltipContent", TooltipContent);
  188. }
  189. };
  190. });
  191. System.register("ngx-tooltip/Tooltip", ["@angular/core", "ngx-tooltip/TooltipContent"], function (exports_2, context_2) {
  192. var __moduleName = context_2 && context_2.id;
  193. var core_2, TooltipContent_1, Tooltip;
  194. return {
  195. setters: [
  196. function (core_2_1) {
  197. core_2 = core_2_1;
  198. },
  199. function (TooltipContent_1_1) {
  200. TooltipContent_1 = TooltipContent_1_1;
  201. }
  202. ],
  203. execute: function () {
  204. Tooltip = (function () {
  205. // -------------------------------------------------------------------------
  206. // Constructor
  207. // -------------------------------------------------------------------------
  208. function Tooltip(viewContainerRef, resolver) {
  209. this.viewContainerRef = viewContainerRef;
  210. this.resolver = resolver;
  211. this.tooltipAnimation = true;
  212. this.tooltipPlacement = "bottom";
  213. }
  214. // -------------------------------------------------------------------------
  215. // Public Methods
  216. // -------------------------------------------------------------------------
  217. Tooltip.prototype.show = function () {
  218. if (this.tooltipDisabled || this.visible)
  219. return;
  220. this.visible = true;
  221. if (typeof this.content === "string") {
  222. var factory = this.resolver.resolveComponentFactory(TooltipContent_1.TooltipContent);
  223. if (!this.visible)
  224. return;
  225. this.tooltip = this.viewContainerRef.createComponent(factory);
  226. this.tooltip.instance.hostElement = this.viewContainerRef.element.nativeElement;
  227. this.tooltip.instance.content = this.content;
  228. this.tooltip.instance.placement = this.tooltipPlacement;
  229. this.tooltip.instance.animation = this.tooltipAnimation;
  230. }
  231. else {
  232. var tooltip = this.content;
  233. tooltip.hostElement = this.viewContainerRef.element.nativeElement;
  234. tooltip.placement = this.tooltipPlacement;
  235. tooltip.animation = this.tooltipAnimation;
  236. tooltip.show();
  237. }
  238. };
  239. Tooltip.prototype.hide = function () {
  240. if (!this.visible)
  241. return;
  242. this.visible = false;
  243. if (this.tooltip)
  244. this.tooltip.destroy();
  245. if (this.content instanceof TooltipContent_1.TooltipContent)
  246. this.content.hide();
  247. };
  248. return Tooltip;
  249. }());
  250. __decorate([
  251. core_2.Input("tooltip"),
  252. __metadata("design:type", Object)
  253. ], Tooltip.prototype, "content", void 0);
  254. __decorate([
  255. core_2.Input(),
  256. __metadata("design:type", Boolean)
  257. ], Tooltip.prototype, "tooltipDisabled", void 0);
  258. __decorate([
  259. core_2.Input(),
  260. __metadata("design:type", Boolean)
  261. ], Tooltip.prototype, "tooltipAnimation", void 0);
  262. __decorate([
  263. core_2.Input(),
  264. __metadata("design:type", String)
  265. ], Tooltip.prototype, "tooltipPlacement", void 0);
  266. __decorate([
  267. core_2.HostListener("focusin"),
  268. core_2.HostListener("mouseenter"),
  269. __metadata("design:type", Function),
  270. __metadata("design:paramtypes", []),
  271. __metadata("design:returntype", void 0)
  272. ], Tooltip.prototype, "show", null);
  273. __decorate([
  274. core_2.HostListener("focusout"),
  275. core_2.HostListener("mouseleave"),
  276. __metadata("design:type", Function),
  277. __metadata("design:paramtypes", []),
  278. __metadata("design:returntype", void 0)
  279. ], Tooltip.prototype, "hide", null);
  280. Tooltip = __decorate([
  281. core_2.Directive({
  282. selector: "[tooltip]"
  283. }),
  284. __metadata("design:paramtypes", [core_2.ViewContainerRef,
  285. core_2.ComponentFactoryResolver])
  286. ], Tooltip);
  287. exports_2("Tooltip", Tooltip);
  288. }
  289. };
  290. });
  291. System.register("ngx-tooltip/index", ["@angular/core", "@angular/common", "ngx-tooltip/Tooltip", "ngx-tooltip/TooltipContent"], function (exports_3, context_3) {
  292. var __moduleName = context_3 && context_3.id;
  293. var core_3, common_1, Tooltip_1, TooltipContent_2, TooltipModule;
  294. var exportedNames_1 = {
  295. "TooltipModule": true
  296. };
  297. function exportStar_1(m) {
  298. var exports = {};
  299. for (var n in m) {
  300. if (n !== "default" && !exportedNames_1.hasOwnProperty(n)) exports[n] = m[n];
  301. }
  302. exports_3(exports);
  303. }
  304. return {
  305. setters: [
  306. function (core_3_1) {
  307. core_3 = core_3_1;
  308. },
  309. function (common_1_1) {
  310. common_1 = common_1_1;
  311. },
  312. function (Tooltip_1_1) {
  313. Tooltip_1 = Tooltip_1_1;
  314. exportStar_1(Tooltip_1_1);
  315. },
  316. function (TooltipContent_2_1) {
  317. TooltipContent_2 = TooltipContent_2_1;
  318. exportStar_1(TooltipContent_2_1);
  319. }
  320. ],
  321. execute: function () {
  322. TooltipModule = (function () {
  323. function TooltipModule() {
  324. }
  325. return TooltipModule;
  326. }());
  327. TooltipModule = __decorate([
  328. core_3.NgModule({
  329. imports: [
  330. common_1.CommonModule
  331. ],
  332. declarations: [
  333. Tooltip_1.Tooltip,
  334. TooltipContent_2.TooltipContent,
  335. ],
  336. exports: [
  337. Tooltip_1.Tooltip,
  338. TooltipContent_2.TooltipContent,
  339. ],
  340. entryComponents: [
  341. TooltipContent_2.TooltipContent
  342. ]
  343. })
  344. ], TooltipModule);
  345. exports_3("TooltipModule", TooltipModule);
  346. }
  347. };
  348. });
  349. System.register("ngx-tooltip", ["ngx-tooltip/index"], function (exports_4, context_4) {
  350. var __moduleName = context_4 && context_4.id;
  351. function exportStar_2(m) {
  352. var exports = {};
  353. for (var n in m) {
  354. if (n !== "default") exports[n] = m[n];
  355. }
  356. exports_4(exports);
  357. }
  358. return {
  359. setters: [
  360. function (index_1_1) {
  361. exportStar_2(index_1_1);
  362. }
  363. ],
  364. execute: function () {
  365. }
  366. };
  367. });