ngx-bootstrap-tooltip.js 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502
  1. import { Injectable, Component, ChangeDetectionStrategy, EventEmitter, Directive, ViewContainerRef, ElementRef, Renderer2, Input, Output, HostBinding, NgModule } from '@angular/core';
  2. import { isBs3, warnOnce, parseTriggers, OnChange } from 'ngx-bootstrap/utils';
  3. import { __decorate, __metadata } from 'tslib';
  4. import { ComponentLoaderFactory } from 'ngx-bootstrap/component-loader';
  5. import { PositioningService } from 'ngx-bootstrap/positioning';
  6. import { timer } from 'rxjs';
  7. import { CommonModule } from '@angular/common';
  8. /**
  9. * @fileoverview added by tsickle
  10. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  11. */
  12. /**
  13. * Default values provider for tooltip
  14. */
  15. class TooltipConfig {
  16. constructor() {
  17. /**
  18. * sets disable adaptive position
  19. */
  20. this.adaptivePosition = true;
  21. /**
  22. * tooltip placement, supported positions: 'top', 'bottom', 'left', 'right'
  23. */
  24. this.placement = 'top';
  25. /**
  26. * array of event names which triggers tooltip opening
  27. */
  28. this.triggers = 'hover focus';
  29. /**
  30. * delay before showing the tooltip
  31. */
  32. this.delay = 0;
  33. }
  34. }
  35. TooltipConfig.decorators = [
  36. { type: Injectable }
  37. ];
  38. /**
  39. * @fileoverview added by tsickle
  40. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  41. */
  42. class TooltipContainerComponent {
  43. /**
  44. * @param {?} config
  45. */
  46. constructor(config) {
  47. Object.assign(this, config);
  48. }
  49. /**
  50. * @return {?}
  51. */
  52. get isBs3() {
  53. return isBs3();
  54. }
  55. /**
  56. * @return {?}
  57. */
  58. ngAfterViewInit() {
  59. this.classMap = { in: false, fade: false };
  60. this.classMap[this.placement] = true;
  61. this.classMap[`tooltip-${this.placement}`] = true;
  62. this.classMap.in = true;
  63. if (this.animation) {
  64. this.classMap.fade = true;
  65. }
  66. if (this.containerClass) {
  67. this.classMap[this.containerClass] = true;
  68. }
  69. }
  70. }
  71. TooltipContainerComponent.decorators = [
  72. { type: Component, args: [{
  73. selector: 'bs-tooltip-container',
  74. changeDetection: ChangeDetectionStrategy.OnPush,
  75. // tslint:disable-next-line
  76. host: {
  77. '[class]': '"tooltip in tooltip-" + placement + " " + "bs-tooltip-" + placement + " " + placement + " " + containerClass',
  78. '[class.show]': '!isBs3',
  79. '[class.bs3]': 'isBs3',
  80. '[attr.id]': 'this.id',
  81. role: 'tooltip'
  82. },
  83. template: `
  84. <div class="tooltip-arrow arrow"></div>
  85. <div class="tooltip-inner"><ng-content></ng-content></div>
  86. `,
  87. styles: [`
  88. :host.tooltip {
  89. display: block;
  90. pointer-events: none;
  91. }
  92. :host.bs3.tooltip.top>.arrow {
  93. margin-left: -2px;
  94. }
  95. :host.bs3.tooltip.bottom {
  96. margin-top: 0px;
  97. }
  98. :host.bs3.bs-tooltip-left, :host.bs3.bs-tooltip-right{
  99. margin: 0px;
  100. }
  101. :host.bs3.bs-tooltip-right .arrow, :host.bs3.bs-tooltip-left .arrow {
  102. margin: .3rem 0;
  103. }
  104. `]
  105. }] }
  106. ];
  107. /** @nocollapse */
  108. TooltipContainerComponent.ctorParameters = () => [
  109. { type: TooltipConfig }
  110. ];
  111. /**
  112. * @fileoverview added by tsickle
  113. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  114. */
  115. /** @type {?} */
  116. let id = 0;
  117. class TooltipDirective {
  118. /**
  119. * @param {?} _viewContainerRef
  120. * @param {?} cis
  121. * @param {?} config
  122. * @param {?} _elementRef
  123. * @param {?} _renderer
  124. * @param {?} _positionService
  125. */
  126. constructor(_viewContainerRef, cis, config, _elementRef, _renderer, _positionService) {
  127. this._elementRef = _elementRef;
  128. this._renderer = _renderer;
  129. this._positionService = _positionService;
  130. this.tooltipId = id++;
  131. /**
  132. * Fired when tooltip content changes
  133. */
  134. /* tslint:disable-next-line:no-any */
  135. this.tooltipChange = new EventEmitter();
  136. /**
  137. * Css class for tooltip container
  138. */
  139. this.containerClass = '';
  140. /**
  141. * @deprecated - removed, will be added to configuration
  142. */
  143. this.tooltipAnimation = true;
  144. /**
  145. * @deprecated
  146. */
  147. this.tooltipFadeDuration = 150;
  148. this.ariaDescribedby = `tooltip-${this.tooltipId}`;
  149. /**
  150. * @deprecated
  151. */
  152. this.tooltipStateChanged = new EventEmitter();
  153. this._tooltip = cis
  154. .createLoader(this._elementRef, _viewContainerRef, this._renderer)
  155. .provide({ provide: TooltipConfig, useValue: config });
  156. Object.assign(this, config);
  157. this.onShown = this._tooltip.onShown;
  158. this.onHidden = this._tooltip.onHidden;
  159. }
  160. /**
  161. * Returns whether or not the tooltip is currently being shown
  162. * @return {?}
  163. */
  164. get isOpen() {
  165. return this._tooltip.isShown;
  166. }
  167. /**
  168. * @param {?} value
  169. * @return {?}
  170. */
  171. set isOpen(value) {
  172. if (value) {
  173. this.show();
  174. }
  175. else {
  176. this.hide();
  177. }
  178. }
  179. /**
  180. * @deprecated - please use `tooltip` instead
  181. * @param {?} value
  182. * @return {?}
  183. */
  184. set htmlContent(value) {
  185. warnOnce('tooltipHtml was deprecated, please use `tooltip` instead');
  186. this.tooltip = value;
  187. }
  188. /**
  189. * @deprecated - please use `placement` instead
  190. * @param {?} value
  191. * @return {?}
  192. */
  193. set _placement(value) {
  194. warnOnce('tooltipPlacement was deprecated, please use `placement` instead');
  195. this.placement = value;
  196. }
  197. /**
  198. * @deprecated - please use `isOpen` instead
  199. * @param {?} value
  200. * @return {?}
  201. */
  202. set _isOpen(value) {
  203. warnOnce('tooltipIsOpen was deprecated, please use `isOpen` instead');
  204. this.isOpen = value;
  205. }
  206. /**
  207. * @return {?}
  208. */
  209. get _isOpen() {
  210. warnOnce('tooltipIsOpen was deprecated, please use `isOpen` instead');
  211. return this.isOpen;
  212. }
  213. /**
  214. * @deprecated - please use `isDisabled` instead
  215. * @param {?} value
  216. * @return {?}
  217. */
  218. set _enable(value) {
  219. warnOnce('tooltipEnable was deprecated, please use `isDisabled` instead');
  220. this.isDisabled = !value;
  221. }
  222. /**
  223. * @return {?}
  224. */
  225. get _enable() {
  226. warnOnce('tooltipEnable was deprecated, please use `isDisabled` instead');
  227. return this.isDisabled;
  228. }
  229. /**
  230. * @deprecated - please use `container="body"` instead
  231. * @param {?} value
  232. * @return {?}
  233. */
  234. set _appendToBody(value) {
  235. warnOnce('tooltipAppendToBody was deprecated, please use `container="body"` instead');
  236. this.container = value ? 'body' : this.container;
  237. }
  238. /**
  239. * @return {?}
  240. */
  241. get _appendToBody() {
  242. warnOnce('tooltipAppendToBody was deprecated, please use `container="body"` instead');
  243. return this.container === 'body';
  244. }
  245. /**
  246. * @deprecated - will replaced with customClass
  247. * @param {?} value
  248. * @return {?}
  249. */
  250. set _popupClass(value) {
  251. warnOnce('tooltipClass deprecated');
  252. }
  253. /**
  254. * @deprecated - removed
  255. * @param {?} value
  256. * @return {?}
  257. */
  258. set _tooltipContext(value) {
  259. warnOnce('tooltipContext deprecated');
  260. }
  261. /**
  262. * @deprecated
  263. * @param {?} value
  264. * @return {?}
  265. */
  266. set _tooltipPopupDelay(value) {
  267. warnOnce('tooltipPopupDelay is deprecated, use `delay` instead');
  268. this.delay = value;
  269. }
  270. /**
  271. * @deprecated - please use `triggers` instead
  272. * @return {?}
  273. */
  274. get _tooltipTrigger() {
  275. warnOnce('tooltipTrigger was deprecated, please use `triggers` instead');
  276. return this.triggers;
  277. }
  278. /**
  279. * @param {?} value
  280. * @return {?}
  281. */
  282. set _tooltipTrigger(value) {
  283. warnOnce('tooltipTrigger was deprecated, please use `triggers` instead');
  284. this.triggers = (value || '').toString();
  285. }
  286. /**
  287. * @return {?}
  288. */
  289. ngOnInit() {
  290. this._tooltip.listen({
  291. triggers: this.triggers,
  292. show: (/**
  293. * @return {?}
  294. */
  295. () => this.show())
  296. });
  297. /* tslint:disable-next-line:no-any */
  298. this.tooltipChange.subscribe((/**
  299. * @param {?} value
  300. * @return {?}
  301. */
  302. (value) => {
  303. if (!value) {
  304. this._tooltip.hide();
  305. }
  306. }));
  307. }
  308. /**
  309. * Toggles an element’s tooltip. This is considered a “manual” triggering of
  310. * the tooltip.
  311. * @return {?}
  312. */
  313. toggle() {
  314. if (this.isOpen) {
  315. return this.hide();
  316. }
  317. this.show();
  318. }
  319. /**
  320. * Opens an element’s tooltip. This is considered a “manual” triggering of
  321. * the tooltip.
  322. * @return {?}
  323. */
  324. show() {
  325. this._positionService.setOptions({
  326. modifiers: {
  327. flip: {
  328. enabled: this.adaptivePosition
  329. },
  330. preventOverflow: {
  331. enabled: this.adaptivePosition
  332. }
  333. }
  334. });
  335. if (this.isOpen ||
  336. this.isDisabled ||
  337. this._delayTimeoutId ||
  338. !this.tooltip) {
  339. return;
  340. }
  341. /** @type {?} */
  342. const showTooltip = (/**
  343. * @return {?}
  344. */
  345. () => {
  346. if (this._delayTimeoutId) {
  347. this._delayTimeoutId = undefined;
  348. }
  349. this._tooltip
  350. .attach(TooltipContainerComponent)
  351. .to(this.container)
  352. .position({ attachment: this.placement })
  353. .show({
  354. content: this.tooltip,
  355. placement: this.placement,
  356. containerClass: this.containerClass,
  357. id: this.ariaDescribedby
  358. });
  359. });
  360. /** @type {?} */
  361. const cancelDelayedTooltipShowing = (/**
  362. * @return {?}
  363. */
  364. () => {
  365. if (this._tooltipCancelShowFn) {
  366. this._tooltipCancelShowFn();
  367. }
  368. });
  369. if (this.delay) {
  370. /** @type {?} */
  371. const _timer = timer(this.delay).subscribe((/**
  372. * @return {?}
  373. */
  374. () => {
  375. showTooltip();
  376. cancelDelayedTooltipShowing();
  377. }));
  378. if (this.triggers) {
  379. parseTriggers(this.triggers)
  380. .forEach((/**
  381. * @param {?} trigger
  382. * @return {?}
  383. */
  384. (trigger) => {
  385. this._tooltipCancelShowFn = this._renderer.listen(this._elementRef.nativeElement, trigger.close, (/**
  386. * @return {?}
  387. */
  388. () => {
  389. _timer.unsubscribe();
  390. cancelDelayedTooltipShowing();
  391. }));
  392. }));
  393. }
  394. }
  395. else {
  396. showTooltip();
  397. }
  398. }
  399. /**
  400. * Closes an element’s tooltip. This is considered a “manual” triggering of
  401. * the tooltip.
  402. * @return {?}
  403. */
  404. hide() {
  405. if (this._delayTimeoutId) {
  406. clearTimeout(this._delayTimeoutId);
  407. this._delayTimeoutId = undefined;
  408. }
  409. if (!this._tooltip.isShown) {
  410. return;
  411. }
  412. this._tooltip.instance.classMap.in = false;
  413. setTimeout((/**
  414. * @return {?}
  415. */
  416. () => {
  417. this._tooltip.hide();
  418. }), this.tooltipFadeDuration);
  419. }
  420. /**
  421. * @return {?}
  422. */
  423. ngOnDestroy() {
  424. this._tooltip.dispose();
  425. }
  426. }
  427. TooltipDirective.decorators = [
  428. { type: Directive, args: [{
  429. selector: '[tooltip], [tooltipHtml]',
  430. exportAs: 'bs-tooltip'
  431. },] }
  432. ];
  433. /** @nocollapse */
  434. TooltipDirective.ctorParameters = () => [
  435. { type: ViewContainerRef },
  436. { type: ComponentLoaderFactory },
  437. { type: TooltipConfig },
  438. { type: ElementRef },
  439. { type: Renderer2 },
  440. { type: PositioningService }
  441. ];
  442. TooltipDirective.propDecorators = {
  443. adaptivePosition: [{ type: Input }],
  444. tooltip: [{ type: Input }],
  445. tooltipChange: [{ type: Output }],
  446. placement: [{ type: Input }],
  447. triggers: [{ type: Input }],
  448. container: [{ type: Input }],
  449. containerClass: [{ type: Input }],
  450. isOpen: [{ type: Input }],
  451. isDisabled: [{ type: Input }],
  452. delay: [{ type: Input }],
  453. onShown: [{ type: Output }],
  454. onHidden: [{ type: Output }],
  455. htmlContent: [{ type: Input, args: ['tooltipHtml',] }],
  456. _placement: [{ type: Input, args: ['tooltipPlacement',] }],
  457. _isOpen: [{ type: Input, args: ['tooltipIsOpen',] }],
  458. _enable: [{ type: Input, args: ['tooltipEnable',] }],
  459. _appendToBody: [{ type: Input, args: ['tooltipAppendToBody',] }],
  460. tooltipAnimation: [{ type: Input }],
  461. _popupClass: [{ type: Input, args: ['tooltipClass',] }],
  462. _tooltipContext: [{ type: Input, args: ['tooltipContext',] }],
  463. _tooltipPopupDelay: [{ type: Input, args: ['tooltipPopupDelay',] }],
  464. tooltipFadeDuration: [{ type: Input }],
  465. _tooltipTrigger: [{ type: Input, args: ['tooltipTrigger',] }],
  466. ariaDescribedby: [{ type: HostBinding, args: ['attr.aria-describedby',] }],
  467. tooltipStateChanged: [{ type: Output }]
  468. };
  469. __decorate([
  470. OnChange(),
  471. __metadata("design:type", Object)
  472. ], TooltipDirective.prototype, "tooltip", void 0);
  473. /**
  474. * @fileoverview added by tsickle
  475. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  476. */
  477. class TooltipModule {
  478. /**
  479. * @return {?}
  480. */
  481. static forRoot() {
  482. return {
  483. ngModule: TooltipModule,
  484. providers: [TooltipConfig, ComponentLoaderFactory, PositioningService]
  485. };
  486. }
  487. }
  488. TooltipModule.decorators = [
  489. { type: NgModule, args: [{
  490. imports: [CommonModule],
  491. declarations: [TooltipDirective, TooltipContainerComponent],
  492. exports: [TooltipDirective],
  493. entryComponents: [TooltipContainerComponent]
  494. },] }
  495. ];
  496. export { TooltipConfig, TooltipContainerComponent, TooltipDirective, TooltipModule };
  497. //# sourceMappingURL=ngx-bootstrap-tooltip.js.map