| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039 |
- /**
- * @license
- * Copyright Google LLC All Rights Reserved.
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.io/license
- */
- (function (global, factory) {
- 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')) :
- 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) :
- (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));
- }(this, (function (exports,animations,a11y,bidi,coercion,keycodes,layout,overlay,platform,portal,scrolling,core,platformBrowser,rxjs,operators,common,core$1) { 'use strict';
- /*! *****************************************************************************
- Copyright (c) Microsoft Corporation. All rights reserved.
- Licensed under the Apache License, Version 2.0 (the "License"); you may not use
- this file except in compliance with the License. You may obtain a copy of the
- License at http://www.apache.org/licenses/LICENSE-2.0
- THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
- WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
- MERCHANTABLITY OR NON-INFRINGEMENT.
- See the Apache Version 2.0 License for specific language governing permissions
- and limitations under the License.
- ***************************************************************************** */
- var __assign = function() {
- __assign = Object.assign || function __assign(t) {
- for (var s, i = 1, n = arguments.length; i < n; i++) {
- s = arguments[i];
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
- }
- return t;
- };
- return __assign.apply(this, arguments);
- };
- /**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
- /**
- * Animations used by MatTooltip.
- * \@docs-private
- * @type {?}
- */
- var matTooltipAnimations = {
- /**
- * Animation that transitions a tooltip in and out.
- */
- tooltipState: animations.trigger('state', [
- animations.state('initial, void, hidden', animations.style({ opacity: 0, transform: 'scale(0)' })),
- animations.state('visible', animations.style({ transform: 'scale(1)' })),
- animations.transition('* => visible', animations.animate('200ms cubic-bezier(0, 0, 0.2, 1)', animations.keyframes([
- animations.style({ opacity: 0, transform: 'scale(0)', offset: 0 }),
- animations.style({ opacity: 0.5, transform: 'scale(0.99)', offset: 0.5 }),
- animations.style({ opacity: 1, transform: 'scale(1)', offset: 1 })
- ]))),
- animations.transition('* => hidden', animations.animate('100ms cubic-bezier(0, 0, 0.2, 1)', animations.style({ opacity: 0 }))),
- ])
- };
- /**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
- /**
- * Time in ms to throttle repositioning after scroll events.
- * @type {?}
- */
- var SCROLL_THROTTLE_MS = 20;
- /**
- * CSS class that will be attached to the overlay panel.
- * @type {?}
- */
- var TOOLTIP_PANEL_CLASS = 'mat-tooltip-panel';
- /**
- * Creates an error to be thrown if the user supplied an invalid tooltip position.
- * \@docs-private
- * @param {?} position
- * @return {?}
- */
- function getMatTooltipInvalidPositionError(position) {
- return Error("Tooltip position \"" + position + "\" is invalid.");
- }
- /**
- * Injection token that determines the scroll handling while a tooltip is visible.
- * @type {?}
- */
- var MAT_TOOLTIP_SCROLL_STRATEGY = new core.InjectionToken('mat-tooltip-scroll-strategy');
- /**
- * \@docs-private
- * @param {?} overlay
- * @return {?}
- */
- function MAT_TOOLTIP_SCROLL_STRATEGY_FACTORY(overlay$$1) {
- return (/**
- * @return {?}
- */
- function () { return overlay$$1.scrollStrategies.reposition({ scrollThrottle: SCROLL_THROTTLE_MS }); });
- }
- /**
- * \@docs-private
- * @type {?}
- */
- var MAT_TOOLTIP_SCROLL_STRATEGY_FACTORY_PROVIDER = {
- provide: MAT_TOOLTIP_SCROLL_STRATEGY,
- deps: [overlay.Overlay],
- useFactory: MAT_TOOLTIP_SCROLL_STRATEGY_FACTORY,
- };
- /**
- * Injection token to be used to override the default options for `matTooltip`.
- * @type {?}
- */
- var MAT_TOOLTIP_DEFAULT_OPTIONS = new core.InjectionToken('mat-tooltip-default-options', {
- providedIn: 'root',
- factory: MAT_TOOLTIP_DEFAULT_OPTIONS_FACTORY
- });
- /**
- * \@docs-private
- * @return {?}
- */
- function MAT_TOOLTIP_DEFAULT_OPTIONS_FACTORY() {
- return {
- showDelay: 0,
- hideDelay: 0,
- touchendHideDelay: 1500,
- };
- }
- /**
- * Directive that attaches a material design tooltip to the host element. Animates the showing and
- * hiding of a tooltip provided position (defaults to below the element).
- *
- * https://material.io/design/components/tooltips.html
- */
- var MatTooltip = /** @class */ (function () {
- function MatTooltip(_overlay, _elementRef, _scrollDispatcher, _viewContainerRef, _ngZone, platform$$1, _ariaDescriber, _focusMonitor, scrollStrategy, _dir, _defaultOptions, hammerLoader) {
- var _this = this;
- this._overlay = _overlay;
- this._elementRef = _elementRef;
- this._scrollDispatcher = _scrollDispatcher;
- this._viewContainerRef = _viewContainerRef;
- this._ngZone = _ngZone;
- this._ariaDescriber = _ariaDescriber;
- this._focusMonitor = _focusMonitor;
- this._dir = _dir;
- this._defaultOptions = _defaultOptions;
- this._position = 'below';
- this._disabled = false;
- /**
- * The default delay in ms before showing the tooltip after show is called
- */
- this.showDelay = this._defaultOptions.showDelay;
- /**
- * The default delay in ms before hiding the tooltip after hide is called
- */
- this.hideDelay = this._defaultOptions.hideDelay;
- this._message = '';
- this._manualListeners = new Map();
- /**
- * Emits when the component is destroyed.
- */
- this._destroyed = new rxjs.Subject();
- this._scrollStrategy = scrollStrategy;
- /** @type {?} */
- var element = _elementRef.nativeElement;
- /** @type {?} */
- var hasGestures = typeof window === 'undefined' || ((/** @type {?} */ (window))).Hammer || hammerLoader;
- // The mouse events shouldn't be bound on mobile devices, because they can prevent the
- // first tap from firing its click event or can cause the tooltip to open for clicks.
- if (!platform$$1.IOS && !platform$$1.ANDROID) {
- this._manualListeners
- .set('mouseenter', (/**
- * @return {?}
- */
- function () { return _this.show(); }))
- .set('mouseleave', (/**
- * @return {?}
- */
- function () { return _this.hide(); }));
- }
- else if (!hasGestures) {
- // If Hammerjs isn't loaded, fall back to showing on `touchstart`, otherwise
- // there's no way for the user to trigger the tooltip on a touch device.
- this._manualListeners.set('touchstart', (/**
- * @return {?}
- */
- function () { return _this.show(); }));
- }
- this._manualListeners.forEach((/**
- * @param {?} listener
- * @param {?} event
- * @return {?}
- */
- function (listener, event) { return element.addEventListener(event, listener); }));
- _focusMonitor.monitor(_elementRef).pipe(operators.takeUntil(this._destroyed)).subscribe((/**
- * @param {?} origin
- * @return {?}
- */
- function (origin) {
- // Note that the focus monitor runs outside the Angular zone.
- if (!origin) {
- _ngZone.run((/**
- * @return {?}
- */
- function () { return _this.hide(0); }));
- }
- else if (origin === 'keyboard') {
- _ngZone.run((/**
- * @return {?}
- */
- function () { return _this.show(); }));
- }
- }));
- if (_defaultOptions && _defaultOptions.position) {
- this.position = _defaultOptions.position;
- }
- }
- Object.defineProperty(MatTooltip.prototype, "position", {
- /** Allows the user to define the position of the tooltip relative to the parent element */
- get: /**
- * Allows the user to define the position of the tooltip relative to the parent element
- * @return {?}
- */
- function () { return this._position; },
- set: /**
- * @param {?} value
- * @return {?}
- */
- function (value) {
- if (value !== this._position) {
- this._position = value;
- if (this._overlayRef) {
- this._updatePosition();
- if (this._tooltipInstance) {
- (/** @type {?} */ (this._tooltipInstance)).show(0);
- }
- this._overlayRef.updatePosition();
- }
- }
- },
- enumerable: true,
- configurable: true
- });
- Object.defineProperty(MatTooltip.prototype, "disabled", {
- /** Disables the display of the tooltip. */
- get: /**
- * Disables the display of the tooltip.
- * @return {?}
- */
- function () { return this._disabled; },
- set: /**
- * @param {?} value
- * @return {?}
- */
- function (value) {
- this._disabled = coercion.coerceBooleanProperty(value);
- // If tooltip is disabled, hide immediately.
- if (this._disabled) {
- this.hide(0);
- }
- },
- enumerable: true,
- configurable: true
- });
- Object.defineProperty(MatTooltip.prototype, "message", {
- /** The message to be displayed in the tooltip */
- get: /**
- * The message to be displayed in the tooltip
- * @return {?}
- */
- function () { return this._message; },
- set: /**
- * @param {?} value
- * @return {?}
- */
- function (value) {
- this._ariaDescriber.removeDescription(this._elementRef.nativeElement, this._message);
- // If the message is not a string (e.g. number), convert it to a string and trim it.
- this._message = value != null ? ("" + value).trim() : '';
- if (!this._message && this._isTooltipVisible()) {
- this.hide(0);
- }
- else {
- this._updateTooltipMessage();
- this._ariaDescriber.describe(this._elementRef.nativeElement, this.message);
- }
- },
- enumerable: true,
- configurable: true
- });
- Object.defineProperty(MatTooltip.prototype, "tooltipClass", {
- /** Classes to be passed to the tooltip. Supports the same syntax as `ngClass`. */
- get: /**
- * Classes to be passed to the tooltip. Supports the same syntax as `ngClass`.
- * @return {?}
- */
- function () { return this._tooltipClass; },
- set: /**
- * @param {?} value
- * @return {?}
- */
- function (value) {
- this._tooltipClass = value;
- if (this._tooltipInstance) {
- this._setTooltipClass(this._tooltipClass);
- }
- },
- enumerable: true,
- configurable: true
- });
- /**
- * Setup styling-specific things
- */
- /**
- * Setup styling-specific things
- * @return {?}
- */
- MatTooltip.prototype.ngOnInit = /**
- * Setup styling-specific things
- * @return {?}
- */
- function () {
- /** @type {?} */
- var element = this._elementRef.nativeElement;
- /** @type {?} */
- var elementStyle = (/** @type {?} */ (element.style));
- if (element.nodeName === 'INPUT' || element.nodeName === 'TEXTAREA') {
- // When we bind a gesture event on an element (in this case `longpress`), HammerJS
- // will add some inline styles by default, including `user-select: none`. This is
- // problematic on iOS and in Safari, because it will prevent users from typing in inputs.
- // Since `user-select: none` is not needed for the `longpress` event and can cause unexpected
- // behavior for text fields, we always clear the `user-select` to avoid such issues.
- elementStyle.webkitUserSelect = elementStyle.userSelect = elementStyle.msUserSelect = '';
- }
- // Hammer applies `-webkit-user-drag: none` on all elements by default,
- // which breaks the native drag&drop. If the consumer explicitly made
- // the element draggable, clear the `-webkit-user-drag`.
- if (element.draggable && elementStyle.webkitUserDrag === 'none') {
- elementStyle.webkitUserDrag = '';
- }
- };
- /**
- * Dispose the tooltip when destroyed.
- */
- /**
- * Dispose the tooltip when destroyed.
- * @return {?}
- */
- MatTooltip.prototype.ngOnDestroy = /**
- * Dispose the tooltip when destroyed.
- * @return {?}
- */
- function () {
- var _this = this;
- if (this._overlayRef) {
- this._overlayRef.dispose();
- this._tooltipInstance = null;
- }
- // Clean up the event listeners set in the constructor
- this._manualListeners.forEach((/**
- * @param {?} listener
- * @param {?} event
- * @return {?}
- */
- function (listener, event) {
- _this._elementRef.nativeElement.removeEventListener(event, listener);
- }));
- this._manualListeners.clear();
- this._destroyed.next();
- this._destroyed.complete();
- this._ariaDescriber.removeDescription(this._elementRef.nativeElement, this.message);
- this._focusMonitor.stopMonitoring(this._elementRef);
- };
- /** Shows the tooltip after the delay in ms, defaults to tooltip-delay-show or 0ms if no input */
- /**
- * Shows the tooltip after the delay in ms, defaults to tooltip-delay-show or 0ms if no input
- * @param {?=} delay
- * @return {?}
- */
- MatTooltip.prototype.show = /**
- * Shows the tooltip after the delay in ms, defaults to tooltip-delay-show or 0ms if no input
- * @param {?=} delay
- * @return {?}
- */
- function (delay) {
- var _this = this;
- if (delay === void 0) { delay = this.showDelay; }
- if (this.disabled || !this.message || (this._isTooltipVisible() &&
- !(/** @type {?} */ (this._tooltipInstance))._showTimeoutId && !(/** @type {?} */ (this._tooltipInstance))._hideTimeoutId)) {
- return;
- }
- /** @type {?} */
- var overlayRef = this._createOverlay();
- this._detach();
- this._portal = this._portal || new portal.ComponentPortal(TooltipComponent, this._viewContainerRef);
- this._tooltipInstance = overlayRef.attach(this._portal).instance;
- this._tooltipInstance.afterHidden()
- .pipe(operators.takeUntil(this._destroyed))
- .subscribe((/**
- * @return {?}
- */
- function () { return _this._detach(); }));
- this._setTooltipClass(this._tooltipClass);
- this._updateTooltipMessage();
- (/** @type {?} */ (this._tooltipInstance)).show(delay);
- };
- /** Hides the tooltip after the delay in ms, defaults to tooltip-delay-hide or 0ms if no input */
- /**
- * Hides the tooltip after the delay in ms, defaults to tooltip-delay-hide or 0ms if no input
- * @param {?=} delay
- * @return {?}
- */
- MatTooltip.prototype.hide = /**
- * Hides the tooltip after the delay in ms, defaults to tooltip-delay-hide or 0ms if no input
- * @param {?=} delay
- * @return {?}
- */
- function (delay) {
- if (delay === void 0) { delay = this.hideDelay; }
- if (this._tooltipInstance) {
- this._tooltipInstance.hide(delay);
- }
- };
- /** Shows/hides the tooltip */
- /**
- * Shows/hides the tooltip
- * @return {?}
- */
- MatTooltip.prototype.toggle = /**
- * Shows/hides the tooltip
- * @return {?}
- */
- function () {
- this._isTooltipVisible() ? this.hide() : this.show();
- };
- /** Returns true if the tooltip is currently visible to the user */
- /**
- * Returns true if the tooltip is currently visible to the user
- * @return {?}
- */
- MatTooltip.prototype._isTooltipVisible = /**
- * Returns true if the tooltip is currently visible to the user
- * @return {?}
- */
- function () {
- return !!this._tooltipInstance && this._tooltipInstance.isVisible();
- };
- /** Handles the keydown events on the host element. */
- /**
- * Handles the keydown events on the host element.
- * @param {?} e
- * @return {?}
- */
- MatTooltip.prototype._handleKeydown = /**
- * Handles the keydown events on the host element.
- * @param {?} e
- * @return {?}
- */
- function (e) {
- if (this._isTooltipVisible() && e.keyCode === keycodes.ESCAPE && !keycodes.hasModifierKey(e)) {
- e.preventDefault();
- e.stopPropagation();
- this.hide(0);
- }
- };
- /** Handles the touchend events on the host element. */
- /**
- * Handles the touchend events on the host element.
- * @return {?}
- */
- MatTooltip.prototype._handleTouchend = /**
- * Handles the touchend events on the host element.
- * @return {?}
- */
- function () {
- this.hide(this._defaultOptions.touchendHideDelay);
- };
- /** Create the overlay config and position strategy */
- /**
- * Create the overlay config and position strategy
- * @private
- * @return {?}
- */
- MatTooltip.prototype._createOverlay = /**
- * Create the overlay config and position strategy
- * @private
- * @return {?}
- */
- function () {
- var _this = this;
- if (this._overlayRef) {
- return this._overlayRef;
- }
- /** @type {?} */
- var scrollableAncestors = this._scrollDispatcher.getAncestorScrollContainers(this._elementRef);
- // Create connected position strategy that listens for scroll events to reposition.
- /** @type {?} */
- var strategy = this._overlay.position()
- .flexibleConnectedTo(this._elementRef)
- .withTransformOriginOn('.mat-tooltip')
- .withFlexibleDimensions(false)
- .withViewportMargin(8)
- .withScrollableContainers(scrollableAncestors);
- strategy.positionChanges.pipe(operators.takeUntil(this._destroyed)).subscribe((/**
- * @param {?} change
- * @return {?}
- */
- function (change) {
- if (_this._tooltipInstance) {
- if (change.scrollableViewProperties.isOverlayClipped && _this._tooltipInstance.isVisible()) {
- // After position changes occur and the overlay is clipped by
- // a parent scrollable then close the tooltip.
- _this._ngZone.run((/**
- * @return {?}
- */
- function () { return _this.hide(0); }));
- }
- }
- }));
- this._overlayRef = this._overlay.create({
- direction: this._dir,
- positionStrategy: strategy,
- panelClass: TOOLTIP_PANEL_CLASS,
- scrollStrategy: this._scrollStrategy()
- });
- this._updatePosition();
- this._overlayRef.detachments()
- .pipe(operators.takeUntil(this._destroyed))
- .subscribe((/**
- * @return {?}
- */
- function () { return _this._detach(); }));
- return this._overlayRef;
- };
- /** Detaches the currently-attached tooltip. */
- /**
- * Detaches the currently-attached tooltip.
- * @private
- * @return {?}
- */
- MatTooltip.prototype._detach = /**
- * Detaches the currently-attached tooltip.
- * @private
- * @return {?}
- */
- function () {
- if (this._overlayRef && this._overlayRef.hasAttached()) {
- this._overlayRef.detach();
- }
- this._tooltipInstance = null;
- };
- /** Updates the position of the current tooltip. */
- /**
- * Updates the position of the current tooltip.
- * @private
- * @return {?}
- */
- MatTooltip.prototype._updatePosition = /**
- * Updates the position of the current tooltip.
- * @private
- * @return {?}
- */
- function () {
- /** @type {?} */
- var position = (/** @type {?} */ ((/** @type {?} */ (this._overlayRef)).getConfig().positionStrategy));
- /** @type {?} */
- var origin = this._getOrigin();
- /** @type {?} */
- var overlay$$1 = this._getOverlayPosition();
- position.withPositions([
- __assign({}, origin.main, overlay$$1.main),
- __assign({}, origin.fallback, overlay$$1.fallback)
- ]);
- };
- /**
- * Returns the origin position and a fallback position based on the user's position preference.
- * The fallback position is the inverse of the origin (e.g. `'below' -> 'above'`).
- */
- /**
- * Returns the origin position and a fallback position based on the user's position preference.
- * The fallback position is the inverse of the origin (e.g. `'below' -> 'above'`).
- * @return {?}
- */
- MatTooltip.prototype._getOrigin = /**
- * Returns the origin position and a fallback position based on the user's position preference.
- * The fallback position is the inverse of the origin (e.g. `'below' -> 'above'`).
- * @return {?}
- */
- function () {
- /** @type {?} */
- var isLtr = !this._dir || this._dir.value == 'ltr';
- /** @type {?} */
- var position = this.position;
- /** @type {?} */
- var originPosition;
- if (position == 'above' || position == 'below') {
- originPosition = { originX: 'center', originY: position == 'above' ? 'top' : 'bottom' };
- }
- else if (position == 'before' ||
- (position == 'left' && isLtr) ||
- (position == 'right' && !isLtr)) {
- originPosition = { originX: 'start', originY: 'center' };
- }
- else if (position == 'after' ||
- (position == 'right' && isLtr) ||
- (position == 'left' && !isLtr)) {
- originPosition = { originX: 'end', originY: 'center' };
- }
- else {
- throw getMatTooltipInvalidPositionError(position);
- }
- var _a = this._invertPosition(originPosition.originX, originPosition.originY), x = _a.x, y = _a.y;
- return {
- main: originPosition,
- fallback: { originX: x, originY: y }
- };
- };
- /** Returns the overlay position and a fallback position based on the user's preference */
- /**
- * Returns the overlay position and a fallback position based on the user's preference
- * @return {?}
- */
- MatTooltip.prototype._getOverlayPosition = /**
- * Returns the overlay position and a fallback position based on the user's preference
- * @return {?}
- */
- function () {
- /** @type {?} */
- var isLtr = !this._dir || this._dir.value == 'ltr';
- /** @type {?} */
- var position = this.position;
- /** @type {?} */
- var overlayPosition;
- if (position == 'above') {
- overlayPosition = { overlayX: 'center', overlayY: 'bottom' };
- }
- else if (position == 'below') {
- overlayPosition = { overlayX: 'center', overlayY: 'top' };
- }
- else if (position == 'before' ||
- (position == 'left' && isLtr) ||
- (position == 'right' && !isLtr)) {
- overlayPosition = { overlayX: 'end', overlayY: 'center' };
- }
- else if (position == 'after' ||
- (position == 'right' && isLtr) ||
- (position == 'left' && !isLtr)) {
- overlayPosition = { overlayX: 'start', overlayY: 'center' };
- }
- else {
- throw getMatTooltipInvalidPositionError(position);
- }
- var _a = this._invertPosition(overlayPosition.overlayX, overlayPosition.overlayY), x = _a.x, y = _a.y;
- return {
- main: overlayPosition,
- fallback: { overlayX: x, overlayY: y }
- };
- };
- /** Updates the tooltip message and repositions the overlay according to the new message length */
- /**
- * Updates the tooltip message and repositions the overlay according to the new message length
- * @private
- * @return {?}
- */
- MatTooltip.prototype._updateTooltipMessage = /**
- * Updates the tooltip message and repositions the overlay according to the new message length
- * @private
- * @return {?}
- */
- function () {
- var _this = this;
- // Must wait for the message to be painted to the tooltip so that the overlay can properly
- // calculate the correct positioning based on the size of the text.
- if (this._tooltipInstance) {
- this._tooltipInstance.message = this.message;
- this._tooltipInstance._markForCheck();
- this._ngZone.onMicrotaskEmpty.asObservable().pipe(operators.take(1), operators.takeUntil(this._destroyed)).subscribe((/**
- * @return {?}
- */
- function () {
- if (_this._tooltipInstance) {
- (/** @type {?} */ (_this._overlayRef)).updatePosition();
- }
- }));
- }
- };
- /** Updates the tooltip class */
- /**
- * Updates the tooltip class
- * @private
- * @param {?} tooltipClass
- * @return {?}
- */
- MatTooltip.prototype._setTooltipClass = /**
- * Updates the tooltip class
- * @private
- * @param {?} tooltipClass
- * @return {?}
- */
- function (tooltipClass) {
- if (this._tooltipInstance) {
- this._tooltipInstance.tooltipClass = tooltipClass;
- this._tooltipInstance._markForCheck();
- }
- };
- /** Inverts an overlay position. */
- /**
- * Inverts an overlay position.
- * @private
- * @param {?} x
- * @param {?} y
- * @return {?}
- */
- MatTooltip.prototype._invertPosition = /**
- * Inverts an overlay position.
- * @private
- * @param {?} x
- * @param {?} y
- * @return {?}
- */
- function (x, y) {
- if (this.position === 'above' || this.position === 'below') {
- if (y === 'top') {
- y = 'bottom';
- }
- else if (y === 'bottom') {
- y = 'top';
- }
- }
- else {
- if (x === 'end') {
- x = 'start';
- }
- else if (x === 'start') {
- x = 'end';
- }
- }
- return { x: x, y: y };
- };
- MatTooltip.decorators = [
- { type: core.Directive, args: [{
- selector: '[matTooltip]',
- exportAs: 'matTooltip',
- host: {
- '(longpress)': 'show()',
- '(keydown)': '_handleKeydown($event)',
- '(touchend)': '_handleTouchend()',
- },
- },] },
- ];
- /** @nocollapse */
- MatTooltip.ctorParameters = function () { return [
- { type: overlay.Overlay },
- { type: core.ElementRef },
- { type: scrolling.ScrollDispatcher },
- { type: core.ViewContainerRef },
- { type: core.NgZone },
- { type: platform.Platform },
- { type: a11y.AriaDescriber },
- { type: a11y.FocusMonitor },
- { type: undefined, decorators: [{ type: core.Inject, args: [MAT_TOOLTIP_SCROLL_STRATEGY,] }] },
- { type: bidi.Directionality, decorators: [{ type: core.Optional }] },
- { type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [MAT_TOOLTIP_DEFAULT_OPTIONS,] }] },
- { type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [platformBrowser.HAMMER_LOADER,] }] }
- ]; };
- MatTooltip.propDecorators = {
- position: [{ type: core.Input, args: ['matTooltipPosition',] }],
- disabled: [{ type: core.Input, args: ['matTooltipDisabled',] }],
- showDelay: [{ type: core.Input, args: ['matTooltipShowDelay',] }],
- hideDelay: [{ type: core.Input, args: ['matTooltipHideDelay',] }],
- message: [{ type: core.Input, args: ['matTooltip',] }],
- tooltipClass: [{ type: core.Input, args: ['matTooltipClass',] }]
- };
- return MatTooltip;
- }());
- /**
- * Internal component that wraps the tooltip's content.
- * \@docs-private
- */
- var TooltipComponent = /** @class */ (function () {
- function TooltipComponent(_changeDetectorRef, _breakpointObserver) {
- this._changeDetectorRef = _changeDetectorRef;
- this._breakpointObserver = _breakpointObserver;
- /**
- * Property watched by the animation framework to show or hide the tooltip
- */
- this._visibility = 'initial';
- /**
- * Whether interactions on the page should close the tooltip
- */
- this._closeOnInteraction = false;
- /**
- * Subject for notifying that the tooltip has been hidden from the view
- */
- this._onHide = new rxjs.Subject();
- /**
- * Stream that emits whether the user has a handset-sized display.
- */
- this._isHandset = this._breakpointObserver.observe(layout.Breakpoints.Handset);
- }
- /**
- * Shows the tooltip with an animation originating from the provided origin
- * @param delay Amount of milliseconds to the delay showing the tooltip.
- */
- /**
- * Shows the tooltip with an animation originating from the provided origin
- * @param {?} delay Amount of milliseconds to the delay showing the tooltip.
- * @return {?}
- */
- TooltipComponent.prototype.show = /**
- * Shows the tooltip with an animation originating from the provided origin
- * @param {?} delay Amount of milliseconds to the delay showing the tooltip.
- * @return {?}
- */
- function (delay) {
- var _this = this;
- // Cancel the delayed hide if it is scheduled
- if (this._hideTimeoutId) {
- clearTimeout(this._hideTimeoutId);
- this._hideTimeoutId = null;
- }
- // Body interactions should cancel the tooltip if there is a delay in showing.
- this._closeOnInteraction = true;
- this._showTimeoutId = setTimeout((/**
- * @return {?}
- */
- function () {
- _this._visibility = 'visible';
- _this._showTimeoutId = null;
- // Mark for check so if any parent component has set the
- // ChangeDetectionStrategy to OnPush it will be checked anyways
- _this._markForCheck();
- }), delay);
- };
- /**
- * Begins the animation to hide the tooltip after the provided delay in ms.
- * @param delay Amount of milliseconds to delay showing the tooltip.
- */
- /**
- * Begins the animation to hide the tooltip after the provided delay in ms.
- * @param {?} delay Amount of milliseconds to delay showing the tooltip.
- * @return {?}
- */
- TooltipComponent.prototype.hide = /**
- * Begins the animation to hide the tooltip after the provided delay in ms.
- * @param {?} delay Amount of milliseconds to delay showing the tooltip.
- * @return {?}
- */
- function (delay) {
- var _this = this;
- // Cancel the delayed show if it is scheduled
- if (this._showTimeoutId) {
- clearTimeout(this._showTimeoutId);
- this._showTimeoutId = null;
- }
- this._hideTimeoutId = setTimeout((/**
- * @return {?}
- */
- function () {
- _this._visibility = 'hidden';
- _this._hideTimeoutId = null;
- // Mark for check so if any parent component has set the
- // ChangeDetectionStrategy to OnPush it will be checked anyways
- _this._markForCheck();
- }), delay);
- };
- /** Returns an observable that notifies when the tooltip has been hidden from view. */
- /**
- * Returns an observable that notifies when the tooltip has been hidden from view.
- * @return {?}
- */
- TooltipComponent.prototype.afterHidden = /**
- * Returns an observable that notifies when the tooltip has been hidden from view.
- * @return {?}
- */
- function () {
- return this._onHide.asObservable();
- };
- /** Whether the tooltip is being displayed. */
- /**
- * Whether the tooltip is being displayed.
- * @return {?}
- */
- TooltipComponent.prototype.isVisible = /**
- * Whether the tooltip is being displayed.
- * @return {?}
- */
- function () {
- return this._visibility === 'visible';
- };
- /**
- * @return {?}
- */
- TooltipComponent.prototype.ngOnDestroy = /**
- * @return {?}
- */
- function () {
- this._onHide.complete();
- };
- /**
- * @return {?}
- */
- TooltipComponent.prototype._animationStart = /**
- * @return {?}
- */
- function () {
- this._closeOnInteraction = false;
- };
- /**
- * @param {?} event
- * @return {?}
- */
- TooltipComponent.prototype._animationDone = /**
- * @param {?} event
- * @return {?}
- */
- function (event) {
- /** @type {?} */
- var toState = (/** @type {?} */ (event.toState));
- if (toState === 'hidden' && !this.isVisible()) {
- this._onHide.next();
- }
- if (toState === 'visible' || toState === 'hidden') {
- this._closeOnInteraction = true;
- }
- };
- /**
- * Interactions on the HTML body should close the tooltip immediately as defined in the
- * material design spec.
- * https://material.io/design/components/tooltips.html#behavior
- */
- /**
- * Interactions on the HTML body should close the tooltip immediately as defined in the
- * material design spec.
- * https://material.io/design/components/tooltips.html#behavior
- * @return {?}
- */
- TooltipComponent.prototype._handleBodyInteraction = /**
- * Interactions on the HTML body should close the tooltip immediately as defined in the
- * material design spec.
- * https://material.io/design/components/tooltips.html#behavior
- * @return {?}
- */
- function () {
- if (this._closeOnInteraction) {
- this.hide(0);
- }
- };
- /**
- * Marks that the tooltip needs to be checked in the next change detection run.
- * Mainly used for rendering the initial text before positioning a tooltip, which
- * can be problematic in components with OnPush change detection.
- */
- /**
- * Marks that the tooltip needs to be checked in the next change detection run.
- * Mainly used for rendering the initial text before positioning a tooltip, which
- * can be problematic in components with OnPush change detection.
- * @return {?}
- */
- TooltipComponent.prototype._markForCheck = /**
- * Marks that the tooltip needs to be checked in the next change detection run.
- * Mainly used for rendering the initial text before positioning a tooltip, which
- * can be problematic in components with OnPush change detection.
- * @return {?}
- */
- function () {
- this._changeDetectorRef.markForCheck();
- };
- TooltipComponent.decorators = [
- { type: core.Component, args: [{selector: 'mat-tooltip-component',
- 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>",
- 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}"],
- encapsulation: core.ViewEncapsulation.None,
- changeDetection: core.ChangeDetectionStrategy.OnPush,
- animations: [matTooltipAnimations.tooltipState],
- host: {
- // Forces the element to have a layout in IE and Edge. This fixes issues where the element
- // won't be rendered if the animations are disabled or there is no web animations polyfill.
- '[style.zoom]': '_visibility === "visible" ? 1 : null',
- '(body:click)': 'this._handleBodyInteraction()',
- 'aria-hidden': 'true',
- }
- },] },
- ];
- /** @nocollapse */
- TooltipComponent.ctorParameters = function () { return [
- { type: core.ChangeDetectorRef },
- { type: layout.BreakpointObserver }
- ]; };
- return TooltipComponent;
- }());
- /**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
- var MatTooltipModule = /** @class */ (function () {
- function MatTooltipModule() {
- }
- MatTooltipModule.decorators = [
- { type: core.NgModule, args: [{
- imports: [
- a11y.A11yModule,
- common.CommonModule,
- overlay.OverlayModule,
- core$1.MatCommonModule,
- ],
- exports: [MatTooltip, TooltipComponent, core$1.MatCommonModule],
- declarations: [MatTooltip, TooltipComponent],
- entryComponents: [TooltipComponent],
- providers: [
- MAT_TOOLTIP_SCROLL_STRATEGY_FACTORY_PROVIDER,
- { provide: platformBrowser.HAMMER_GESTURE_CONFIG, useClass: core$1.GestureConfig },
- ]
- },] },
- ];
- return MatTooltipModule;
- }());
- exports.MatTooltipModule = MatTooltipModule;
- exports.getMatTooltipInvalidPositionError = getMatTooltipInvalidPositionError;
- exports.MAT_TOOLTIP_SCROLL_STRATEGY_FACTORY = MAT_TOOLTIP_SCROLL_STRATEGY_FACTORY;
- exports.MAT_TOOLTIP_DEFAULT_OPTIONS_FACTORY = MAT_TOOLTIP_DEFAULT_OPTIONS_FACTORY;
- exports.SCROLL_THROTTLE_MS = SCROLL_THROTTLE_MS;
- exports.TOOLTIP_PANEL_CLASS = TOOLTIP_PANEL_CLASS;
- exports.MAT_TOOLTIP_SCROLL_STRATEGY = MAT_TOOLTIP_SCROLL_STRATEGY;
- exports.MAT_TOOLTIP_SCROLL_STRATEGY_FACTORY_PROVIDER = MAT_TOOLTIP_SCROLL_STRATEGY_FACTORY_PROVIDER;
- exports.MAT_TOOLTIP_DEFAULT_OPTIONS = MAT_TOOLTIP_DEFAULT_OPTIONS;
- exports.MatTooltip = MatTooltip;
- exports.TooltipComponent = TooltipComponent;
- exports.matTooltipAnimations = matTooltipAnimations;
- Object.defineProperty(exports, '__esModule', { value: true });
- })));
- //# sourceMappingURL=material-tooltip.umd.js.map
|