material-tooltip.umd.js 40 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039
  1. /**
  2. * @license
  3. * Copyright Google LLC All Rights Reserved.
  4. *
  5. * Use of this source code is governed by an MIT-style license that can be
  6. * found in the LICENSE file at https://angular.io/license
  7. */
  8. (function (global, factory) {
  9. typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/animations'), require('@angular/cdk/a11y'), require('@angular/cdk/bidi'), require('@angular/cdk/coercion'), require('@angular/cdk/keycodes'), require('@angular/cdk/layout'), require('@angular/cdk/overlay'), require('@angular/cdk/platform'), require('@angular/cdk/portal'), require('@angular/cdk/scrolling'), require('@angular/core'), require('@angular/platform-browser'), require('rxjs'), require('rxjs/operators'), require('@angular/common'), require('@angular/material/core')) :
  10. typeof define === 'function' && define.amd ? define('@angular/material/tooltip', ['exports', '@angular/animations', '@angular/cdk/a11y', '@angular/cdk/bidi', '@angular/cdk/coercion', '@angular/cdk/keycodes', '@angular/cdk/layout', '@angular/cdk/overlay', '@angular/cdk/platform', '@angular/cdk/portal', '@angular/cdk/scrolling', '@angular/core', '@angular/platform-browser', 'rxjs', 'rxjs/operators', '@angular/common', '@angular/material/core'], factory) :
  11. (factory((global.ng = global.ng || {}, global.ng.material = global.ng.material || {}, global.ng.material.tooltip = {}),global.ng.animations,global.ng.cdk.a11y,global.ng.cdk.bidi,global.ng.cdk.coercion,global.ng.cdk.keycodes,global.ng.cdk.layout,global.ng.cdk.overlay,global.ng.cdk.platform,global.ng.cdk.portal,global.ng.cdk.scrolling,global.ng.core,global.ng.platformBrowser,global.rxjs,global.rxjs.operators,global.ng.common,global.ng.material.core));
  12. }(this, (function (exports,animations,a11y,bidi,coercion,keycodes,layout,overlay,platform,portal,scrolling,core,platformBrowser,rxjs,operators,common,core$1) { 'use strict';
  13. /*! *****************************************************************************
  14. Copyright (c) Microsoft Corporation. All rights reserved.
  15. Licensed under the Apache License, Version 2.0 (the "License"); you may not use
  16. this file except in compliance with the License. You may obtain a copy of the
  17. License at http://www.apache.org/licenses/LICENSE-2.0
  18. THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  19. KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
  20. WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
  21. MERCHANTABLITY OR NON-INFRINGEMENT.
  22. See the Apache Version 2.0 License for specific language governing permissions
  23. and limitations under the License.
  24. ***************************************************************************** */
  25. var __assign = function() {
  26. __assign = Object.assign || function __assign(t) {
  27. for (var s, i = 1, n = arguments.length; i < n; i++) {
  28. s = arguments[i];
  29. for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
  30. }
  31. return t;
  32. };
  33. return __assign.apply(this, arguments);
  34. };
  35. /**
  36. * @fileoverview added by tsickle
  37. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  38. */
  39. /**
  40. * Animations used by MatTooltip.
  41. * \@docs-private
  42. * @type {?}
  43. */
  44. var matTooltipAnimations = {
  45. /**
  46. * Animation that transitions a tooltip in and out.
  47. */
  48. tooltipState: animations.trigger('state', [
  49. animations.state('initial, void, hidden', animations.style({ opacity: 0, transform: 'scale(0)' })),
  50. animations.state('visible', animations.style({ transform: 'scale(1)' })),
  51. animations.transition('* => visible', animations.animate('200ms cubic-bezier(0, 0, 0.2, 1)', animations.keyframes([
  52. animations.style({ opacity: 0, transform: 'scale(0)', offset: 0 }),
  53. animations.style({ opacity: 0.5, transform: 'scale(0.99)', offset: 0.5 }),
  54. animations.style({ opacity: 1, transform: 'scale(1)', offset: 1 })
  55. ]))),
  56. animations.transition('* => hidden', animations.animate('100ms cubic-bezier(0, 0, 0.2, 1)', animations.style({ opacity: 0 }))),
  57. ])
  58. };
  59. /**
  60. * @fileoverview added by tsickle
  61. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  62. */
  63. /**
  64. * Time in ms to throttle repositioning after scroll events.
  65. * @type {?}
  66. */
  67. var SCROLL_THROTTLE_MS = 20;
  68. /**
  69. * CSS class that will be attached to the overlay panel.
  70. * @type {?}
  71. */
  72. var TOOLTIP_PANEL_CLASS = 'mat-tooltip-panel';
  73. /**
  74. * Creates an error to be thrown if the user supplied an invalid tooltip position.
  75. * \@docs-private
  76. * @param {?} position
  77. * @return {?}
  78. */
  79. function getMatTooltipInvalidPositionError(position) {
  80. return Error("Tooltip position \"" + position + "\" is invalid.");
  81. }
  82. /**
  83. * Injection token that determines the scroll handling while a tooltip is visible.
  84. * @type {?}
  85. */
  86. var MAT_TOOLTIP_SCROLL_STRATEGY = new core.InjectionToken('mat-tooltip-scroll-strategy');
  87. /**
  88. * \@docs-private
  89. * @param {?} overlay
  90. * @return {?}
  91. */
  92. function MAT_TOOLTIP_SCROLL_STRATEGY_FACTORY(overlay$$1) {
  93. return (/**
  94. * @return {?}
  95. */
  96. function () { return overlay$$1.scrollStrategies.reposition({ scrollThrottle: SCROLL_THROTTLE_MS }); });
  97. }
  98. /**
  99. * \@docs-private
  100. * @type {?}
  101. */
  102. var MAT_TOOLTIP_SCROLL_STRATEGY_FACTORY_PROVIDER = {
  103. provide: MAT_TOOLTIP_SCROLL_STRATEGY,
  104. deps: [overlay.Overlay],
  105. useFactory: MAT_TOOLTIP_SCROLL_STRATEGY_FACTORY,
  106. };
  107. /**
  108. * Injection token to be used to override the default options for `matTooltip`.
  109. * @type {?}
  110. */
  111. var MAT_TOOLTIP_DEFAULT_OPTIONS = new core.InjectionToken('mat-tooltip-default-options', {
  112. providedIn: 'root',
  113. factory: MAT_TOOLTIP_DEFAULT_OPTIONS_FACTORY
  114. });
  115. /**
  116. * \@docs-private
  117. * @return {?}
  118. */
  119. function MAT_TOOLTIP_DEFAULT_OPTIONS_FACTORY() {
  120. return {
  121. showDelay: 0,
  122. hideDelay: 0,
  123. touchendHideDelay: 1500,
  124. };
  125. }
  126. /**
  127. * Directive that attaches a material design tooltip to the host element. Animates the showing and
  128. * hiding of a tooltip provided position (defaults to below the element).
  129. *
  130. * https://material.io/design/components/tooltips.html
  131. */
  132. var MatTooltip = /** @class */ (function () {
  133. function MatTooltip(_overlay, _elementRef, _scrollDispatcher, _viewContainerRef, _ngZone, platform$$1, _ariaDescriber, _focusMonitor, scrollStrategy, _dir, _defaultOptions, hammerLoader) {
  134. var _this = this;
  135. this._overlay = _overlay;
  136. this._elementRef = _elementRef;
  137. this._scrollDispatcher = _scrollDispatcher;
  138. this._viewContainerRef = _viewContainerRef;
  139. this._ngZone = _ngZone;
  140. this._ariaDescriber = _ariaDescriber;
  141. this._focusMonitor = _focusMonitor;
  142. this._dir = _dir;
  143. this._defaultOptions = _defaultOptions;
  144. this._position = 'below';
  145. this._disabled = false;
  146. /**
  147. * The default delay in ms before showing the tooltip after show is called
  148. */
  149. this.showDelay = this._defaultOptions.showDelay;
  150. /**
  151. * The default delay in ms before hiding the tooltip after hide is called
  152. */
  153. this.hideDelay = this._defaultOptions.hideDelay;
  154. this._message = '';
  155. this._manualListeners = new Map();
  156. /**
  157. * Emits when the component is destroyed.
  158. */
  159. this._destroyed = new rxjs.Subject();
  160. this._scrollStrategy = scrollStrategy;
  161. /** @type {?} */
  162. var element = _elementRef.nativeElement;
  163. /** @type {?} */
  164. var hasGestures = typeof window === 'undefined' || ((/** @type {?} */ (window))).Hammer || hammerLoader;
  165. // The mouse events shouldn't be bound on mobile devices, because they can prevent the
  166. // first tap from firing its click event or can cause the tooltip to open for clicks.
  167. if (!platform$$1.IOS && !platform$$1.ANDROID) {
  168. this._manualListeners
  169. .set('mouseenter', (/**
  170. * @return {?}
  171. */
  172. function () { return _this.show(); }))
  173. .set('mouseleave', (/**
  174. * @return {?}
  175. */
  176. function () { return _this.hide(); }));
  177. }
  178. else if (!hasGestures) {
  179. // If Hammerjs isn't loaded, fall back to showing on `touchstart`, otherwise
  180. // there's no way for the user to trigger the tooltip on a touch device.
  181. this._manualListeners.set('touchstart', (/**
  182. * @return {?}
  183. */
  184. function () { return _this.show(); }));
  185. }
  186. this._manualListeners.forEach((/**
  187. * @param {?} listener
  188. * @param {?} event
  189. * @return {?}
  190. */
  191. function (listener, event) { return element.addEventListener(event, listener); }));
  192. _focusMonitor.monitor(_elementRef).pipe(operators.takeUntil(this._destroyed)).subscribe((/**
  193. * @param {?} origin
  194. * @return {?}
  195. */
  196. function (origin) {
  197. // Note that the focus monitor runs outside the Angular zone.
  198. if (!origin) {
  199. _ngZone.run((/**
  200. * @return {?}
  201. */
  202. function () { return _this.hide(0); }));
  203. }
  204. else if (origin === 'keyboard') {
  205. _ngZone.run((/**
  206. * @return {?}
  207. */
  208. function () { return _this.show(); }));
  209. }
  210. }));
  211. if (_defaultOptions && _defaultOptions.position) {
  212. this.position = _defaultOptions.position;
  213. }
  214. }
  215. Object.defineProperty(MatTooltip.prototype, "position", {
  216. /** Allows the user to define the position of the tooltip relative to the parent element */
  217. get: /**
  218. * Allows the user to define the position of the tooltip relative to the parent element
  219. * @return {?}
  220. */
  221. function () { return this._position; },
  222. set: /**
  223. * @param {?} value
  224. * @return {?}
  225. */
  226. function (value) {
  227. if (value !== this._position) {
  228. this._position = value;
  229. if (this._overlayRef) {
  230. this._updatePosition();
  231. if (this._tooltipInstance) {
  232. (/** @type {?} */ (this._tooltipInstance)).show(0);
  233. }
  234. this._overlayRef.updatePosition();
  235. }
  236. }
  237. },
  238. enumerable: true,
  239. configurable: true
  240. });
  241. Object.defineProperty(MatTooltip.prototype, "disabled", {
  242. /** Disables the display of the tooltip. */
  243. get: /**
  244. * Disables the display of the tooltip.
  245. * @return {?}
  246. */
  247. function () { return this._disabled; },
  248. set: /**
  249. * @param {?} value
  250. * @return {?}
  251. */
  252. function (value) {
  253. this._disabled = coercion.coerceBooleanProperty(value);
  254. // If tooltip is disabled, hide immediately.
  255. if (this._disabled) {
  256. this.hide(0);
  257. }
  258. },
  259. enumerable: true,
  260. configurable: true
  261. });
  262. Object.defineProperty(MatTooltip.prototype, "message", {
  263. /** The message to be displayed in the tooltip */
  264. get: /**
  265. * The message to be displayed in the tooltip
  266. * @return {?}
  267. */
  268. function () { return this._message; },
  269. set: /**
  270. * @param {?} value
  271. * @return {?}
  272. */
  273. function (value) {
  274. this._ariaDescriber.removeDescription(this._elementRef.nativeElement, this._message);
  275. // If the message is not a string (e.g. number), convert it to a string and trim it.
  276. this._message = value != null ? ("" + value).trim() : '';
  277. if (!this._message && this._isTooltipVisible()) {
  278. this.hide(0);
  279. }
  280. else {
  281. this._updateTooltipMessage();
  282. this._ariaDescriber.describe(this._elementRef.nativeElement, this.message);
  283. }
  284. },
  285. enumerable: true,
  286. configurable: true
  287. });
  288. Object.defineProperty(MatTooltip.prototype, "tooltipClass", {
  289. /** Classes to be passed to the tooltip. Supports the same syntax as `ngClass`. */
  290. get: /**
  291. * Classes to be passed to the tooltip. Supports the same syntax as `ngClass`.
  292. * @return {?}
  293. */
  294. function () { return this._tooltipClass; },
  295. set: /**
  296. * @param {?} value
  297. * @return {?}
  298. */
  299. function (value) {
  300. this._tooltipClass = value;
  301. if (this._tooltipInstance) {
  302. this._setTooltipClass(this._tooltipClass);
  303. }
  304. },
  305. enumerable: true,
  306. configurable: true
  307. });
  308. /**
  309. * Setup styling-specific things
  310. */
  311. /**
  312. * Setup styling-specific things
  313. * @return {?}
  314. */
  315. MatTooltip.prototype.ngOnInit = /**
  316. * Setup styling-specific things
  317. * @return {?}
  318. */
  319. function () {
  320. /** @type {?} */
  321. var element = this._elementRef.nativeElement;
  322. /** @type {?} */
  323. var elementStyle = (/** @type {?} */ (element.style));
  324. if (element.nodeName === 'INPUT' || element.nodeName === 'TEXTAREA') {
  325. // When we bind a gesture event on an element (in this case `longpress`), HammerJS
  326. // will add some inline styles by default, including `user-select: none`. This is
  327. // problematic on iOS and in Safari, because it will prevent users from typing in inputs.
  328. // Since `user-select: none` is not needed for the `longpress` event and can cause unexpected
  329. // behavior for text fields, we always clear the `user-select` to avoid such issues.
  330. elementStyle.webkitUserSelect = elementStyle.userSelect = elementStyle.msUserSelect = '';
  331. }
  332. // Hammer applies `-webkit-user-drag: none` on all elements by default,
  333. // which breaks the native drag&drop. If the consumer explicitly made
  334. // the element draggable, clear the `-webkit-user-drag`.
  335. if (element.draggable && elementStyle.webkitUserDrag === 'none') {
  336. elementStyle.webkitUserDrag = '';
  337. }
  338. };
  339. /**
  340. * Dispose the tooltip when destroyed.
  341. */
  342. /**
  343. * Dispose the tooltip when destroyed.
  344. * @return {?}
  345. */
  346. MatTooltip.prototype.ngOnDestroy = /**
  347. * Dispose the tooltip when destroyed.
  348. * @return {?}
  349. */
  350. function () {
  351. var _this = this;
  352. if (this._overlayRef) {
  353. this._overlayRef.dispose();
  354. this._tooltipInstance = null;
  355. }
  356. // Clean up the event listeners set in the constructor
  357. this._manualListeners.forEach((/**
  358. * @param {?} listener
  359. * @param {?} event
  360. * @return {?}
  361. */
  362. function (listener, event) {
  363. _this._elementRef.nativeElement.removeEventListener(event, listener);
  364. }));
  365. this._manualListeners.clear();
  366. this._destroyed.next();
  367. this._destroyed.complete();
  368. this._ariaDescriber.removeDescription(this._elementRef.nativeElement, this.message);
  369. this._focusMonitor.stopMonitoring(this._elementRef);
  370. };
  371. /** Shows the tooltip after the delay in ms, defaults to tooltip-delay-show or 0ms if no input */
  372. /**
  373. * Shows the tooltip after the delay in ms, defaults to tooltip-delay-show or 0ms if no input
  374. * @param {?=} delay
  375. * @return {?}
  376. */
  377. MatTooltip.prototype.show = /**
  378. * Shows the tooltip after the delay in ms, defaults to tooltip-delay-show or 0ms if no input
  379. * @param {?=} delay
  380. * @return {?}
  381. */
  382. function (delay) {
  383. var _this = this;
  384. if (delay === void 0) { delay = this.showDelay; }
  385. if (this.disabled || !this.message || (this._isTooltipVisible() &&
  386. !(/** @type {?} */ (this._tooltipInstance))._showTimeoutId && !(/** @type {?} */ (this._tooltipInstance))._hideTimeoutId)) {
  387. return;
  388. }
  389. /** @type {?} */
  390. var overlayRef = this._createOverlay();
  391. this._detach();
  392. this._portal = this._portal || new portal.ComponentPortal(TooltipComponent, this._viewContainerRef);
  393. this._tooltipInstance = overlayRef.attach(this._portal).instance;
  394. this._tooltipInstance.afterHidden()
  395. .pipe(operators.takeUntil(this._destroyed))
  396. .subscribe((/**
  397. * @return {?}
  398. */
  399. function () { return _this._detach(); }));
  400. this._setTooltipClass(this._tooltipClass);
  401. this._updateTooltipMessage();
  402. (/** @type {?} */ (this._tooltipInstance)).show(delay);
  403. };
  404. /** Hides the tooltip after the delay in ms, defaults to tooltip-delay-hide or 0ms if no input */
  405. /**
  406. * Hides the tooltip after the delay in ms, defaults to tooltip-delay-hide or 0ms if no input
  407. * @param {?=} delay
  408. * @return {?}
  409. */
  410. MatTooltip.prototype.hide = /**
  411. * Hides the tooltip after the delay in ms, defaults to tooltip-delay-hide or 0ms if no input
  412. * @param {?=} delay
  413. * @return {?}
  414. */
  415. function (delay) {
  416. if (delay === void 0) { delay = this.hideDelay; }
  417. if (this._tooltipInstance) {
  418. this._tooltipInstance.hide(delay);
  419. }
  420. };
  421. /** Shows/hides the tooltip */
  422. /**
  423. * Shows/hides the tooltip
  424. * @return {?}
  425. */
  426. MatTooltip.prototype.toggle = /**
  427. * Shows/hides the tooltip
  428. * @return {?}
  429. */
  430. function () {
  431. this._isTooltipVisible() ? this.hide() : this.show();
  432. };
  433. /** Returns true if the tooltip is currently visible to the user */
  434. /**
  435. * Returns true if the tooltip is currently visible to the user
  436. * @return {?}
  437. */
  438. MatTooltip.prototype._isTooltipVisible = /**
  439. * Returns true if the tooltip is currently visible to the user
  440. * @return {?}
  441. */
  442. function () {
  443. return !!this._tooltipInstance && this._tooltipInstance.isVisible();
  444. };
  445. /** Handles the keydown events on the host element. */
  446. /**
  447. * Handles the keydown events on the host element.
  448. * @param {?} e
  449. * @return {?}
  450. */
  451. MatTooltip.prototype._handleKeydown = /**
  452. * Handles the keydown events on the host element.
  453. * @param {?} e
  454. * @return {?}
  455. */
  456. function (e) {
  457. if (this._isTooltipVisible() && e.keyCode === keycodes.ESCAPE && !keycodes.hasModifierKey(e)) {
  458. e.preventDefault();
  459. e.stopPropagation();
  460. this.hide(0);
  461. }
  462. };
  463. /** Handles the touchend events on the host element. */
  464. /**
  465. * Handles the touchend events on the host element.
  466. * @return {?}
  467. */
  468. MatTooltip.prototype._handleTouchend = /**
  469. * Handles the touchend events on the host element.
  470. * @return {?}
  471. */
  472. function () {
  473. this.hide(this._defaultOptions.touchendHideDelay);
  474. };
  475. /** Create the overlay config and position strategy */
  476. /**
  477. * Create the overlay config and position strategy
  478. * @private
  479. * @return {?}
  480. */
  481. MatTooltip.prototype._createOverlay = /**
  482. * Create the overlay config and position strategy
  483. * @private
  484. * @return {?}
  485. */
  486. function () {
  487. var _this = this;
  488. if (this._overlayRef) {
  489. return this._overlayRef;
  490. }
  491. /** @type {?} */
  492. var scrollableAncestors = this._scrollDispatcher.getAncestorScrollContainers(this._elementRef);
  493. // Create connected position strategy that listens for scroll events to reposition.
  494. /** @type {?} */
  495. var strategy = this._overlay.position()
  496. .flexibleConnectedTo(this._elementRef)
  497. .withTransformOriginOn('.mat-tooltip')
  498. .withFlexibleDimensions(false)
  499. .withViewportMargin(8)
  500. .withScrollableContainers(scrollableAncestors);
  501. strategy.positionChanges.pipe(operators.takeUntil(this._destroyed)).subscribe((/**
  502. * @param {?} change
  503. * @return {?}
  504. */
  505. function (change) {
  506. if (_this._tooltipInstance) {
  507. if (change.scrollableViewProperties.isOverlayClipped && _this._tooltipInstance.isVisible()) {
  508. // After position changes occur and the overlay is clipped by
  509. // a parent scrollable then close the tooltip.
  510. _this._ngZone.run((/**
  511. * @return {?}
  512. */
  513. function () { return _this.hide(0); }));
  514. }
  515. }
  516. }));
  517. this._overlayRef = this._overlay.create({
  518. direction: this._dir,
  519. positionStrategy: strategy,
  520. panelClass: TOOLTIP_PANEL_CLASS,
  521. scrollStrategy: this._scrollStrategy()
  522. });
  523. this._updatePosition();
  524. this._overlayRef.detachments()
  525. .pipe(operators.takeUntil(this._destroyed))
  526. .subscribe((/**
  527. * @return {?}
  528. */
  529. function () { return _this._detach(); }));
  530. return this._overlayRef;
  531. };
  532. /** Detaches the currently-attached tooltip. */
  533. /**
  534. * Detaches the currently-attached tooltip.
  535. * @private
  536. * @return {?}
  537. */
  538. MatTooltip.prototype._detach = /**
  539. * Detaches the currently-attached tooltip.
  540. * @private
  541. * @return {?}
  542. */
  543. function () {
  544. if (this._overlayRef && this._overlayRef.hasAttached()) {
  545. this._overlayRef.detach();
  546. }
  547. this._tooltipInstance = null;
  548. };
  549. /** Updates the position of the current tooltip. */
  550. /**
  551. * Updates the position of the current tooltip.
  552. * @private
  553. * @return {?}
  554. */
  555. MatTooltip.prototype._updatePosition = /**
  556. * Updates the position of the current tooltip.
  557. * @private
  558. * @return {?}
  559. */
  560. function () {
  561. /** @type {?} */
  562. var position = (/** @type {?} */ ((/** @type {?} */ (this._overlayRef)).getConfig().positionStrategy));
  563. /** @type {?} */
  564. var origin = this._getOrigin();
  565. /** @type {?} */
  566. var overlay$$1 = this._getOverlayPosition();
  567. position.withPositions([
  568. __assign({}, origin.main, overlay$$1.main),
  569. __assign({}, origin.fallback, overlay$$1.fallback)
  570. ]);
  571. };
  572. /**
  573. * Returns the origin position and a fallback position based on the user's position preference.
  574. * The fallback position is the inverse of the origin (e.g. `'below' -> 'above'`).
  575. */
  576. /**
  577. * Returns the origin position and a fallback position based on the user's position preference.
  578. * The fallback position is the inverse of the origin (e.g. `'below' -> 'above'`).
  579. * @return {?}
  580. */
  581. MatTooltip.prototype._getOrigin = /**
  582. * Returns the origin position and a fallback position based on the user's position preference.
  583. * The fallback position is the inverse of the origin (e.g. `'below' -> 'above'`).
  584. * @return {?}
  585. */
  586. function () {
  587. /** @type {?} */
  588. var isLtr = !this._dir || this._dir.value == 'ltr';
  589. /** @type {?} */
  590. var position = this.position;
  591. /** @type {?} */
  592. var originPosition;
  593. if (position == 'above' || position == 'below') {
  594. originPosition = { originX: 'center', originY: position == 'above' ? 'top' : 'bottom' };
  595. }
  596. else if (position == 'before' ||
  597. (position == 'left' && isLtr) ||
  598. (position == 'right' && !isLtr)) {
  599. originPosition = { originX: 'start', originY: 'center' };
  600. }
  601. else if (position == 'after' ||
  602. (position == 'right' && isLtr) ||
  603. (position == 'left' && !isLtr)) {
  604. originPosition = { originX: 'end', originY: 'center' };
  605. }
  606. else {
  607. throw getMatTooltipInvalidPositionError(position);
  608. }
  609. var _a = this._invertPosition(originPosition.originX, originPosition.originY), x = _a.x, y = _a.y;
  610. return {
  611. main: originPosition,
  612. fallback: { originX: x, originY: y }
  613. };
  614. };
  615. /** Returns the overlay position and a fallback position based on the user's preference */
  616. /**
  617. * Returns the overlay position and a fallback position based on the user's preference
  618. * @return {?}
  619. */
  620. MatTooltip.prototype._getOverlayPosition = /**
  621. * Returns the overlay position and a fallback position based on the user's preference
  622. * @return {?}
  623. */
  624. function () {
  625. /** @type {?} */
  626. var isLtr = !this._dir || this._dir.value == 'ltr';
  627. /** @type {?} */
  628. var position = this.position;
  629. /** @type {?} */
  630. var overlayPosition;
  631. if (position == 'above') {
  632. overlayPosition = { overlayX: 'center', overlayY: 'bottom' };
  633. }
  634. else if (position == 'below') {
  635. overlayPosition = { overlayX: 'center', overlayY: 'top' };
  636. }
  637. else if (position == 'before' ||
  638. (position == 'left' && isLtr) ||
  639. (position == 'right' && !isLtr)) {
  640. overlayPosition = { overlayX: 'end', overlayY: 'center' };
  641. }
  642. else if (position == 'after' ||
  643. (position == 'right' && isLtr) ||
  644. (position == 'left' && !isLtr)) {
  645. overlayPosition = { overlayX: 'start', overlayY: 'center' };
  646. }
  647. else {
  648. throw getMatTooltipInvalidPositionError(position);
  649. }
  650. var _a = this._invertPosition(overlayPosition.overlayX, overlayPosition.overlayY), x = _a.x, y = _a.y;
  651. return {
  652. main: overlayPosition,
  653. fallback: { overlayX: x, overlayY: y }
  654. };
  655. };
  656. /** Updates the tooltip message and repositions the overlay according to the new message length */
  657. /**
  658. * Updates the tooltip message and repositions the overlay according to the new message length
  659. * @private
  660. * @return {?}
  661. */
  662. MatTooltip.prototype._updateTooltipMessage = /**
  663. * Updates the tooltip message and repositions the overlay according to the new message length
  664. * @private
  665. * @return {?}
  666. */
  667. function () {
  668. var _this = this;
  669. // Must wait for the message to be painted to the tooltip so that the overlay can properly
  670. // calculate the correct positioning based on the size of the text.
  671. if (this._tooltipInstance) {
  672. this._tooltipInstance.message = this.message;
  673. this._tooltipInstance._markForCheck();
  674. this._ngZone.onMicrotaskEmpty.asObservable().pipe(operators.take(1), operators.takeUntil(this._destroyed)).subscribe((/**
  675. * @return {?}
  676. */
  677. function () {
  678. if (_this._tooltipInstance) {
  679. (/** @type {?} */ (_this._overlayRef)).updatePosition();
  680. }
  681. }));
  682. }
  683. };
  684. /** Updates the tooltip class */
  685. /**
  686. * Updates the tooltip class
  687. * @private
  688. * @param {?} tooltipClass
  689. * @return {?}
  690. */
  691. MatTooltip.prototype._setTooltipClass = /**
  692. * Updates the tooltip class
  693. * @private
  694. * @param {?} tooltipClass
  695. * @return {?}
  696. */
  697. function (tooltipClass) {
  698. if (this._tooltipInstance) {
  699. this._tooltipInstance.tooltipClass = tooltipClass;
  700. this._tooltipInstance._markForCheck();
  701. }
  702. };
  703. /** Inverts an overlay position. */
  704. /**
  705. * Inverts an overlay position.
  706. * @private
  707. * @param {?} x
  708. * @param {?} y
  709. * @return {?}
  710. */
  711. MatTooltip.prototype._invertPosition = /**
  712. * Inverts an overlay position.
  713. * @private
  714. * @param {?} x
  715. * @param {?} y
  716. * @return {?}
  717. */
  718. function (x, y) {
  719. if (this.position === 'above' || this.position === 'below') {
  720. if (y === 'top') {
  721. y = 'bottom';
  722. }
  723. else if (y === 'bottom') {
  724. y = 'top';
  725. }
  726. }
  727. else {
  728. if (x === 'end') {
  729. x = 'start';
  730. }
  731. else if (x === 'start') {
  732. x = 'end';
  733. }
  734. }
  735. return { x: x, y: y };
  736. };
  737. MatTooltip.decorators = [
  738. { type: core.Directive, args: [{
  739. selector: '[matTooltip]',
  740. exportAs: 'matTooltip',
  741. host: {
  742. '(longpress)': 'show()',
  743. '(keydown)': '_handleKeydown($event)',
  744. '(touchend)': '_handleTouchend()',
  745. },
  746. },] },
  747. ];
  748. /** @nocollapse */
  749. MatTooltip.ctorParameters = function () { return [
  750. { type: overlay.Overlay },
  751. { type: core.ElementRef },
  752. { type: scrolling.ScrollDispatcher },
  753. { type: core.ViewContainerRef },
  754. { type: core.NgZone },
  755. { type: platform.Platform },
  756. { type: a11y.AriaDescriber },
  757. { type: a11y.FocusMonitor },
  758. { type: undefined, decorators: [{ type: core.Inject, args: [MAT_TOOLTIP_SCROLL_STRATEGY,] }] },
  759. { type: bidi.Directionality, decorators: [{ type: core.Optional }] },
  760. { type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [MAT_TOOLTIP_DEFAULT_OPTIONS,] }] },
  761. { type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [platformBrowser.HAMMER_LOADER,] }] }
  762. ]; };
  763. MatTooltip.propDecorators = {
  764. position: [{ type: core.Input, args: ['matTooltipPosition',] }],
  765. disabled: [{ type: core.Input, args: ['matTooltipDisabled',] }],
  766. showDelay: [{ type: core.Input, args: ['matTooltipShowDelay',] }],
  767. hideDelay: [{ type: core.Input, args: ['matTooltipHideDelay',] }],
  768. message: [{ type: core.Input, args: ['matTooltip',] }],
  769. tooltipClass: [{ type: core.Input, args: ['matTooltipClass',] }]
  770. };
  771. return MatTooltip;
  772. }());
  773. /**
  774. * Internal component that wraps the tooltip's content.
  775. * \@docs-private
  776. */
  777. var TooltipComponent = /** @class */ (function () {
  778. function TooltipComponent(_changeDetectorRef, _breakpointObserver) {
  779. this._changeDetectorRef = _changeDetectorRef;
  780. this._breakpointObserver = _breakpointObserver;
  781. /**
  782. * Property watched by the animation framework to show or hide the tooltip
  783. */
  784. this._visibility = 'initial';
  785. /**
  786. * Whether interactions on the page should close the tooltip
  787. */
  788. this._closeOnInteraction = false;
  789. /**
  790. * Subject for notifying that the tooltip has been hidden from the view
  791. */
  792. this._onHide = new rxjs.Subject();
  793. /**
  794. * Stream that emits whether the user has a handset-sized display.
  795. */
  796. this._isHandset = this._breakpointObserver.observe(layout.Breakpoints.Handset);
  797. }
  798. /**
  799. * Shows the tooltip with an animation originating from the provided origin
  800. * @param delay Amount of milliseconds to the delay showing the tooltip.
  801. */
  802. /**
  803. * Shows the tooltip with an animation originating from the provided origin
  804. * @param {?} delay Amount of milliseconds to the delay showing the tooltip.
  805. * @return {?}
  806. */
  807. TooltipComponent.prototype.show = /**
  808. * Shows the tooltip with an animation originating from the provided origin
  809. * @param {?} delay Amount of milliseconds to the delay showing the tooltip.
  810. * @return {?}
  811. */
  812. function (delay) {
  813. var _this = this;
  814. // Cancel the delayed hide if it is scheduled
  815. if (this._hideTimeoutId) {
  816. clearTimeout(this._hideTimeoutId);
  817. this._hideTimeoutId = null;
  818. }
  819. // Body interactions should cancel the tooltip if there is a delay in showing.
  820. this._closeOnInteraction = true;
  821. this._showTimeoutId = setTimeout((/**
  822. * @return {?}
  823. */
  824. function () {
  825. _this._visibility = 'visible';
  826. _this._showTimeoutId = null;
  827. // Mark for check so if any parent component has set the
  828. // ChangeDetectionStrategy to OnPush it will be checked anyways
  829. _this._markForCheck();
  830. }), delay);
  831. };
  832. /**
  833. * Begins the animation to hide the tooltip after the provided delay in ms.
  834. * @param delay Amount of milliseconds to delay showing the tooltip.
  835. */
  836. /**
  837. * Begins the animation to hide the tooltip after the provided delay in ms.
  838. * @param {?} delay Amount of milliseconds to delay showing the tooltip.
  839. * @return {?}
  840. */
  841. TooltipComponent.prototype.hide = /**
  842. * Begins the animation to hide the tooltip after the provided delay in ms.
  843. * @param {?} delay Amount of milliseconds to delay showing the tooltip.
  844. * @return {?}
  845. */
  846. function (delay) {
  847. var _this = this;
  848. // Cancel the delayed show if it is scheduled
  849. if (this._showTimeoutId) {
  850. clearTimeout(this._showTimeoutId);
  851. this._showTimeoutId = null;
  852. }
  853. this._hideTimeoutId = setTimeout((/**
  854. * @return {?}
  855. */
  856. function () {
  857. _this._visibility = 'hidden';
  858. _this._hideTimeoutId = null;
  859. // Mark for check so if any parent component has set the
  860. // ChangeDetectionStrategy to OnPush it will be checked anyways
  861. _this._markForCheck();
  862. }), delay);
  863. };
  864. /** Returns an observable that notifies when the tooltip has been hidden from view. */
  865. /**
  866. * Returns an observable that notifies when the tooltip has been hidden from view.
  867. * @return {?}
  868. */
  869. TooltipComponent.prototype.afterHidden = /**
  870. * Returns an observable that notifies when the tooltip has been hidden from view.
  871. * @return {?}
  872. */
  873. function () {
  874. return this._onHide.asObservable();
  875. };
  876. /** Whether the tooltip is being displayed. */
  877. /**
  878. * Whether the tooltip is being displayed.
  879. * @return {?}
  880. */
  881. TooltipComponent.prototype.isVisible = /**
  882. * Whether the tooltip is being displayed.
  883. * @return {?}
  884. */
  885. function () {
  886. return this._visibility === 'visible';
  887. };
  888. /**
  889. * @return {?}
  890. */
  891. TooltipComponent.prototype.ngOnDestroy = /**
  892. * @return {?}
  893. */
  894. function () {
  895. this._onHide.complete();
  896. };
  897. /**
  898. * @return {?}
  899. */
  900. TooltipComponent.prototype._animationStart = /**
  901. * @return {?}
  902. */
  903. function () {
  904. this._closeOnInteraction = false;
  905. };
  906. /**
  907. * @param {?} event
  908. * @return {?}
  909. */
  910. TooltipComponent.prototype._animationDone = /**
  911. * @param {?} event
  912. * @return {?}
  913. */
  914. function (event) {
  915. /** @type {?} */
  916. var toState = (/** @type {?} */ (event.toState));
  917. if (toState === 'hidden' && !this.isVisible()) {
  918. this._onHide.next();
  919. }
  920. if (toState === 'visible' || toState === 'hidden') {
  921. this._closeOnInteraction = true;
  922. }
  923. };
  924. /**
  925. * Interactions on the HTML body should close the tooltip immediately as defined in the
  926. * material design spec.
  927. * https://material.io/design/components/tooltips.html#behavior
  928. */
  929. /**
  930. * Interactions on the HTML body should close the tooltip immediately as defined in the
  931. * material design spec.
  932. * https://material.io/design/components/tooltips.html#behavior
  933. * @return {?}
  934. */
  935. TooltipComponent.prototype._handleBodyInteraction = /**
  936. * Interactions on the HTML body should close the tooltip immediately as defined in the
  937. * material design spec.
  938. * https://material.io/design/components/tooltips.html#behavior
  939. * @return {?}
  940. */
  941. function () {
  942. if (this._closeOnInteraction) {
  943. this.hide(0);
  944. }
  945. };
  946. /**
  947. * Marks that the tooltip needs to be checked in the next change detection run.
  948. * Mainly used for rendering the initial text before positioning a tooltip, which
  949. * can be problematic in components with OnPush change detection.
  950. */
  951. /**
  952. * Marks that the tooltip needs to be checked in the next change detection run.
  953. * Mainly used for rendering the initial text before positioning a tooltip, which
  954. * can be problematic in components with OnPush change detection.
  955. * @return {?}
  956. */
  957. TooltipComponent.prototype._markForCheck = /**
  958. * Marks that the tooltip needs to be checked in the next change detection run.
  959. * Mainly used for rendering the initial text before positioning a tooltip, which
  960. * can be problematic in components with OnPush change detection.
  961. * @return {?}
  962. */
  963. function () {
  964. this._changeDetectorRef.markForCheck();
  965. };
  966. TooltipComponent.decorators = [
  967. { type: core.Component, args: [{selector: 'mat-tooltip-component',
  968. template: "<div class=\"mat-tooltip\" [ngClass]=\"tooltipClass\" [class.mat-tooltip-handset]=\"(_isHandset | async)?.matches\" [@state]=\"_visibility\" (@state.start)=\"_animationStart()\" (@state.done)=\"_animationDone($event)\">{{message}}</div>",
  969. styles: [".mat-tooltip-panel{pointer-events:none!important}.mat-tooltip{color:#fff;border-radius:4px;margin:14px;max-width:250px;padding-left:8px;padding-right:8px;overflow:hidden;text-overflow:ellipsis}@media (-ms-high-contrast:active){.mat-tooltip{outline:solid 1px}}.mat-tooltip-handset{margin:24px;padding-left:16px;padding-right:16px}"],
  970. encapsulation: core.ViewEncapsulation.None,
  971. changeDetection: core.ChangeDetectionStrategy.OnPush,
  972. animations: [matTooltipAnimations.tooltipState],
  973. host: {
  974. // Forces the element to have a layout in IE and Edge. This fixes issues where the element
  975. // won't be rendered if the animations are disabled or there is no web animations polyfill.
  976. '[style.zoom]': '_visibility === "visible" ? 1 : null',
  977. '(body:click)': 'this._handleBodyInteraction()',
  978. 'aria-hidden': 'true',
  979. }
  980. },] },
  981. ];
  982. /** @nocollapse */
  983. TooltipComponent.ctorParameters = function () { return [
  984. { type: core.ChangeDetectorRef },
  985. { type: layout.BreakpointObserver }
  986. ]; };
  987. return TooltipComponent;
  988. }());
  989. /**
  990. * @fileoverview added by tsickle
  991. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  992. */
  993. var MatTooltipModule = /** @class */ (function () {
  994. function MatTooltipModule() {
  995. }
  996. MatTooltipModule.decorators = [
  997. { type: core.NgModule, args: [{
  998. imports: [
  999. a11y.A11yModule,
  1000. common.CommonModule,
  1001. overlay.OverlayModule,
  1002. core$1.MatCommonModule,
  1003. ],
  1004. exports: [MatTooltip, TooltipComponent, core$1.MatCommonModule],
  1005. declarations: [MatTooltip, TooltipComponent],
  1006. entryComponents: [TooltipComponent],
  1007. providers: [
  1008. MAT_TOOLTIP_SCROLL_STRATEGY_FACTORY_PROVIDER,
  1009. { provide: platformBrowser.HAMMER_GESTURE_CONFIG, useClass: core$1.GestureConfig },
  1010. ]
  1011. },] },
  1012. ];
  1013. return MatTooltipModule;
  1014. }());
  1015. exports.MatTooltipModule = MatTooltipModule;
  1016. exports.getMatTooltipInvalidPositionError = getMatTooltipInvalidPositionError;
  1017. exports.MAT_TOOLTIP_SCROLL_STRATEGY_FACTORY = MAT_TOOLTIP_SCROLL_STRATEGY_FACTORY;
  1018. exports.MAT_TOOLTIP_DEFAULT_OPTIONS_FACTORY = MAT_TOOLTIP_DEFAULT_OPTIONS_FACTORY;
  1019. exports.SCROLL_THROTTLE_MS = SCROLL_THROTTLE_MS;
  1020. exports.TOOLTIP_PANEL_CLASS = TOOLTIP_PANEL_CLASS;
  1021. exports.MAT_TOOLTIP_SCROLL_STRATEGY = MAT_TOOLTIP_SCROLL_STRATEGY;
  1022. exports.MAT_TOOLTIP_SCROLL_STRATEGY_FACTORY_PROVIDER = MAT_TOOLTIP_SCROLL_STRATEGY_FACTORY_PROVIDER;
  1023. exports.MAT_TOOLTIP_DEFAULT_OPTIONS = MAT_TOOLTIP_DEFAULT_OPTIONS;
  1024. exports.MatTooltip = MatTooltip;
  1025. exports.TooltipComponent = TooltipComponent;
  1026. exports.matTooltipAnimations = matTooltipAnimations;
  1027. Object.defineProperty(exports, '__esModule', { value: true });
  1028. })));
  1029. //# sourceMappingURL=material-tooltip.umd.js.map