| /** |
| * @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 |
| */ |
| import { animate, keyframes, state, style, transition, trigger } from '@angular/animations'; |
| import { AriaDescriber, FocusMonitor, A11yModule } from '@angular/cdk/a11y'; |
| import { Directionality } from '@angular/cdk/bidi'; |
| import { coerceBooleanProperty } from '@angular/cdk/coercion'; |
| import { ESCAPE, hasModifierKey } from '@angular/cdk/keycodes'; |
| import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout'; |
| import { Overlay, OverlayModule } from '@angular/cdk/overlay'; |
| import { Platform } from '@angular/cdk/platform'; |
| import { ComponentPortal } from '@angular/cdk/portal'; |
| import { ScrollDispatcher } from '@angular/cdk/scrolling'; |
| import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Directive, ElementRef, Inject, InjectionToken, Input, NgZone, Optional, ViewContainerRef, ViewEncapsulation, NgModule } from '@angular/core'; |
| import { HAMMER_LOADER, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser'; |
| import { Subject } from 'rxjs'; |
| import { take, takeUntil } from 'rxjs/operators'; |
| import { CommonModule } from '@angular/common'; |
| import { GestureConfig, MatCommonModule } from '@angular/material/core'; |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** |
| * Animations used by MatTooltip. |
| * \@docs-private |
| * @type {?} |
| */ |
| const matTooltipAnimations = { |
| /** |
| * Animation that transitions a tooltip in and out. |
| */ |
| tooltipState: trigger('state', [ |
| state('initial, void, hidden', style({ opacity: 0, transform: 'scale(0)' })), |
| state('visible', style({ transform: 'scale(1)' })), |
| transition('* => visible', animate('200ms cubic-bezier(0, 0, 0.2, 1)', keyframes([ |
| style({ opacity: 0, transform: 'scale(0)', offset: 0 }), |
| style({ opacity: 0.5, transform: 'scale(0.99)', offset: 0.5 }), |
| style({ opacity: 1, transform: 'scale(1)', offset: 1 }) |
| ]))), |
| transition('* => hidden', animate('100ms cubic-bezier(0, 0, 0.2, 1)', 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 {?} |
| */ |
| const SCROLL_THROTTLE_MS = 20; |
| /** |
| * CSS class that will be attached to the overlay panel. |
| * @type {?} |
| */ |
| const 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 {?} |
| */ |
| const MAT_TOOLTIP_SCROLL_STRATEGY = new InjectionToken('mat-tooltip-scroll-strategy'); |
| /** |
| * \@docs-private |
| * @param {?} overlay |
| * @return {?} |
| */ |
| function MAT_TOOLTIP_SCROLL_STRATEGY_FACTORY(overlay) { |
| return (/** |
| * @return {?} |
| */ |
| () => overlay.scrollStrategies.reposition({ scrollThrottle: SCROLL_THROTTLE_MS })); |
| } |
| /** |
| * \@docs-private |
| * @type {?} |
| */ |
| const MAT_TOOLTIP_SCROLL_STRATEGY_FACTORY_PROVIDER = { |
| provide: MAT_TOOLTIP_SCROLL_STRATEGY, |
| deps: [Overlay], |
| useFactory: MAT_TOOLTIP_SCROLL_STRATEGY_FACTORY, |
| }; |
| /** |
| * Injection token to be used to override the default options for `matTooltip`. |
| * @type {?} |
| */ |
| const MAT_TOOLTIP_DEFAULT_OPTIONS = new 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 |
| */ |
| class MatTooltip { |
| /** |
| * @param {?} _overlay |
| * @param {?} _elementRef |
| * @param {?} _scrollDispatcher |
| * @param {?} _viewContainerRef |
| * @param {?} _ngZone |
| * @param {?} platform |
| * @param {?} _ariaDescriber |
| * @param {?} _focusMonitor |
| * @param {?} scrollStrategy |
| * @param {?} _dir |
| * @param {?} _defaultOptions |
| * @param {?=} hammerLoader |
| */ |
| constructor(_overlay, _elementRef, _scrollDispatcher, _viewContainerRef, _ngZone, platform, _ariaDescriber, _focusMonitor, scrollStrategy, _dir, _defaultOptions, hammerLoader) { |
| 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 Subject(); |
| this._scrollStrategy = scrollStrategy; |
| /** @type {?} */ |
| const element = _elementRef.nativeElement; |
| /** @type {?} */ |
| const 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.IOS && !platform.ANDROID) { |
| this._manualListeners |
| .set('mouseenter', (/** |
| * @return {?} |
| */ |
| () => this.show())) |
| .set('mouseleave', (/** |
| * @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 {?} |
| */ |
| () => this.show())); |
| } |
| this._manualListeners.forEach((/** |
| * @param {?} listener |
| * @param {?} event |
| * @return {?} |
| */ |
| (listener, event) => element.addEventListener(event, listener))); |
| _focusMonitor.monitor(_elementRef).pipe(takeUntil(this._destroyed)).subscribe((/** |
| * @param {?} origin |
| * @return {?} |
| */ |
| origin => { |
| // Note that the focus monitor runs outside the Angular zone. |
| if (!origin) { |
| _ngZone.run((/** |
| * @return {?} |
| */ |
| () => this.hide(0))); |
| } |
| else if (origin === 'keyboard') { |
| _ngZone.run((/** |
| * @return {?} |
| */ |
| () => this.show())); |
| } |
| })); |
| if (_defaultOptions && _defaultOptions.position) { |
| this.position = _defaultOptions.position; |
| } |
| } |
| /** |
| * Allows the user to define the position of the tooltip relative to the parent element |
| * @return {?} |
| */ |
| get position() { return this._position; } |
| /** |
| * @param {?} value |
| * @return {?} |
| */ |
| set position(value) { |
| if (value !== this._position) { |
| this._position = value; |
| if (this._overlayRef) { |
| this._updatePosition(); |
| if (this._tooltipInstance) { |
| (/** @type {?} */ (this._tooltipInstance)).show(0); |
| } |
| this._overlayRef.updatePosition(); |
| } |
| } |
| } |
| /** |
| * Disables the display of the tooltip. |
| * @return {?} |
| */ |
| get disabled() { return this._disabled; } |
| /** |
| * @param {?} value |
| * @return {?} |
| */ |
| set disabled(value) { |
| this._disabled = coerceBooleanProperty(value); |
| // If tooltip is disabled, hide immediately. |
| if (this._disabled) { |
| this.hide(0); |
| } |
| } |
| /** |
| * The message to be displayed in the tooltip |
| * @return {?} |
| */ |
| get message() { return this._message; } |
| /** |
| * @param {?} value |
| * @return {?} |
| */ |
| set message(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); |
| } |
| } |
| /** |
| * Classes to be passed to the tooltip. Supports the same syntax as `ngClass`. |
| * @return {?} |
| */ |
| get tooltipClass() { return this._tooltipClass; } |
| /** |
| * @param {?} value |
| * @return {?} |
| */ |
| set tooltipClass(value) { |
| this._tooltipClass = value; |
| if (this._tooltipInstance) { |
| this._setTooltipClass(this._tooltipClass); |
| } |
| } |
| /** |
| * Setup styling-specific things |
| * @return {?} |
| */ |
| ngOnInit() { |
| /** @type {?} */ |
| const element = this._elementRef.nativeElement; |
| /** @type {?} */ |
| const 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. |
| * @return {?} |
| */ |
| ngOnDestroy() { |
| 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 {?} |
| */ |
| (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 |
| * @param {?=} delay |
| * @return {?} |
| */ |
| show(delay = this.showDelay) { |
| if (this.disabled || !this.message || (this._isTooltipVisible() && |
| !(/** @type {?} */ (this._tooltipInstance))._showTimeoutId && !(/** @type {?} */ (this._tooltipInstance))._hideTimeoutId)) { |
| return; |
| } |
| /** @type {?} */ |
| const overlayRef = this._createOverlay(); |
| this._detach(); |
| this._portal = this._portal || new ComponentPortal(TooltipComponent, this._viewContainerRef); |
| this._tooltipInstance = overlayRef.attach(this._portal).instance; |
| this._tooltipInstance.afterHidden() |
| .pipe(takeUntil(this._destroyed)) |
| .subscribe((/** |
| * @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 |
| * @param {?=} delay |
| * @return {?} |
| */ |
| hide(delay = this.hideDelay) { |
| if (this._tooltipInstance) { |
| this._tooltipInstance.hide(delay); |
| } |
| } |
| /** |
| * Shows/hides the tooltip |
| * @return {?} |
| */ |
| toggle() { |
| this._isTooltipVisible() ? this.hide() : this.show(); |
| } |
| /** |
| * Returns true if the tooltip is currently visible to the user |
| * @return {?} |
| */ |
| _isTooltipVisible() { |
| return !!this._tooltipInstance && this._tooltipInstance.isVisible(); |
| } |
| /** |
| * Handles the keydown events on the host element. |
| * @param {?} e |
| * @return {?} |
| */ |
| _handleKeydown(e) { |
| if (this._isTooltipVisible() && e.keyCode === ESCAPE && !hasModifierKey(e)) { |
| e.preventDefault(); |
| e.stopPropagation(); |
| this.hide(0); |
| } |
| } |
| /** |
| * Handles the touchend events on the host element. |
| * @return {?} |
| */ |
| _handleTouchend() { |
| this.hide(this._defaultOptions.touchendHideDelay); |
| } |
| /** |
| * Create the overlay config and position strategy |
| * @private |
| * @return {?} |
| */ |
| _createOverlay() { |
| if (this._overlayRef) { |
| return this._overlayRef; |
| } |
| /** @type {?} */ |
| const scrollableAncestors = this._scrollDispatcher.getAncestorScrollContainers(this._elementRef); |
| // Create connected position strategy that listens for scroll events to reposition. |
| /** @type {?} */ |
| const strategy = this._overlay.position() |
| .flexibleConnectedTo(this._elementRef) |
| .withTransformOriginOn('.mat-tooltip') |
| .withFlexibleDimensions(false) |
| .withViewportMargin(8) |
| .withScrollableContainers(scrollableAncestors); |
| strategy.positionChanges.pipe(takeUntil(this._destroyed)).subscribe((/** |
| * @param {?} change |
| * @return {?} |
| */ |
| 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 {?} |
| */ |
| () => 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(takeUntil(this._destroyed)) |
| .subscribe((/** |
| * @return {?} |
| */ |
| () => this._detach())); |
| return this._overlayRef; |
| } |
| /** |
| * Detaches the currently-attached tooltip. |
| * @private |
| * @return {?} |
| */ |
| _detach() { |
| if (this._overlayRef && this._overlayRef.hasAttached()) { |
| this._overlayRef.detach(); |
| } |
| this._tooltipInstance = null; |
| } |
| /** |
| * Updates the position of the current tooltip. |
| * @private |
| * @return {?} |
| */ |
| _updatePosition() { |
| /** @type {?} */ |
| const position = (/** @type {?} */ ((/** @type {?} */ (this._overlayRef)).getConfig().positionStrategy)); |
| /** @type {?} */ |
| const origin = this._getOrigin(); |
| /** @type {?} */ |
| const overlay = this._getOverlayPosition(); |
| position.withPositions([ |
| Object.assign({}, origin.main, overlay.main), |
| Object.assign({}, origin.fallback, overlay.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'`). |
| * @return {?} |
| */ |
| _getOrigin() { |
| /** @type {?} */ |
| const isLtr = !this._dir || this._dir.value == 'ltr'; |
| /** @type {?} */ |
| const position = this.position; |
| /** @type {?} */ |
| let 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); |
| } |
| const { x, y } = this._invertPosition(originPosition.originX, originPosition.originY); |
| return { |
| main: originPosition, |
| fallback: { originX: x, originY: y } |
| }; |
| } |
| /** |
| * Returns the overlay position and a fallback position based on the user's preference |
| * @return {?} |
| */ |
| _getOverlayPosition() { |
| /** @type {?} */ |
| const isLtr = !this._dir || this._dir.value == 'ltr'; |
| /** @type {?} */ |
| const position = this.position; |
| /** @type {?} */ |
| let 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); |
| } |
| const { x, y } = this._invertPosition(overlayPosition.overlayX, overlayPosition.overlayY); |
| return { |
| main: overlayPosition, |
| fallback: { overlayX: x, overlayY: y } |
| }; |
| } |
| /** |
| * Updates the tooltip message and repositions the overlay according to the new message length |
| * @private |
| * @return {?} |
| */ |
| _updateTooltipMessage() { |
| // 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(take(1), takeUntil(this._destroyed)).subscribe((/** |
| * @return {?} |
| */ |
| () => { |
| if (this._tooltipInstance) { |
| (/** @type {?} */ (this._overlayRef)).updatePosition(); |
| } |
| })); |
| } |
| } |
| /** |
| * Updates the tooltip class |
| * @private |
| * @param {?} tooltipClass |
| * @return {?} |
| */ |
| _setTooltipClass(tooltipClass) { |
| if (this._tooltipInstance) { |
| this._tooltipInstance.tooltipClass = tooltipClass; |
| this._tooltipInstance._markForCheck(); |
| } |
| } |
| /** |
| * Inverts an overlay position. |
| * @private |
| * @param {?} x |
| * @param {?} y |
| * @return {?} |
| */ |
| _invertPosition(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, y }; |
| } |
| } |
| MatTooltip.decorators = [ |
| { type: Directive, args: [{ |
| selector: '[matTooltip]', |
| exportAs: 'matTooltip', |
| host: { |
| '(longpress)': 'show()', |
| '(keydown)': '_handleKeydown($event)', |
| '(touchend)': '_handleTouchend()', |
| }, |
| },] }, |
| ]; |
| /** @nocollapse */ |
| MatTooltip.ctorParameters = () => [ |
| { type: Overlay }, |
| { type: ElementRef }, |
| { type: ScrollDispatcher }, |
| { type: ViewContainerRef }, |
| { type: NgZone }, |
| { type: Platform }, |
| { type: AriaDescriber }, |
| { type: FocusMonitor }, |
| { type: undefined, decorators: [{ type: Inject, args: [MAT_TOOLTIP_SCROLL_STRATEGY,] }] }, |
| { type: Directionality, decorators: [{ type: Optional }] }, |
| { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [MAT_TOOLTIP_DEFAULT_OPTIONS,] }] }, |
| { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [HAMMER_LOADER,] }] } |
| ]; |
| MatTooltip.propDecorators = { |
| position: [{ type: Input, args: ['matTooltipPosition',] }], |
| disabled: [{ type: Input, args: ['matTooltipDisabled',] }], |
| showDelay: [{ type: Input, args: ['matTooltipShowDelay',] }], |
| hideDelay: [{ type: Input, args: ['matTooltipHideDelay',] }], |
| message: [{ type: Input, args: ['matTooltip',] }], |
| tooltipClass: [{ type: Input, args: ['matTooltipClass',] }] |
| }; |
| /** |
| * Internal component that wraps the tooltip's content. |
| * \@docs-private |
| */ |
| class TooltipComponent { |
| /** |
| * @param {?} _changeDetectorRef |
| * @param {?} _breakpointObserver |
| */ |
| constructor(_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 Subject(); |
| /** |
| * Stream that emits whether the user has a handset-sized display. |
| */ |
| this._isHandset = this._breakpointObserver.observe(Breakpoints.Handset); |
| } |
| /** |
| * Shows the tooltip with an animation originating from the provided origin |
| * @param {?} delay Amount of milliseconds to the delay showing the tooltip. |
| * @return {?} |
| */ |
| show(delay) { |
| // 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 {?} |
| */ |
| () => { |
| 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. |
| * @return {?} |
| */ |
| hide(delay) { |
| // Cancel the delayed show if it is scheduled |
| if (this._showTimeoutId) { |
| clearTimeout(this._showTimeoutId); |
| this._showTimeoutId = null; |
| } |
| this._hideTimeoutId = setTimeout((/** |
| * @return {?} |
| */ |
| () => { |
| 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. |
| * @return {?} |
| */ |
| afterHidden() { |
| return this._onHide.asObservable(); |
| } |
| /** |
| * Whether the tooltip is being displayed. |
| * @return {?} |
| */ |
| isVisible() { |
| return this._visibility === 'visible'; |
| } |
| /** |
| * @return {?} |
| */ |
| ngOnDestroy() { |
| this._onHide.complete(); |
| } |
| /** |
| * @return {?} |
| */ |
| _animationStart() { |
| this._closeOnInteraction = false; |
| } |
| /** |
| * @param {?} event |
| * @return {?} |
| */ |
| _animationDone(event) { |
| /** @type {?} */ |
| const 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 |
| * @return {?} |
| */ |
| _handleBodyInteraction() { |
| 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. |
| * @return {?} |
| */ |
| _markForCheck() { |
| this._changeDetectorRef.markForCheck(); |
| } |
| } |
| TooltipComponent.decorators = [ |
| { type: 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: ViewEncapsulation.None, |
| changeDetection: 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 = () => [ |
| { type: ChangeDetectorRef }, |
| { type: BreakpointObserver } |
| ]; |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| class MatTooltipModule { |
| } |
| MatTooltipModule.decorators = [ |
| { type: NgModule, args: [{ |
| imports: [ |
| A11yModule, |
| CommonModule, |
| OverlayModule, |
| MatCommonModule, |
| ], |
| exports: [MatTooltip, TooltipComponent, MatCommonModule], |
| declarations: [MatTooltip, TooltipComponent], |
| entryComponents: [TooltipComponent], |
| providers: [ |
| MAT_TOOLTIP_SCROLL_STRATEGY_FACTORY_PROVIDER, |
| { provide: HAMMER_GESTURE_CONFIG, useClass: GestureConfig }, |
| ] |
| },] }, |
| ]; |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| |
| export { MatTooltipModule, getMatTooltipInvalidPositionError, MAT_TOOLTIP_SCROLL_STRATEGY_FACTORY, MAT_TOOLTIP_DEFAULT_OPTIONS_FACTORY, SCROLL_THROTTLE_MS, TOOLTIP_PANEL_CLASS, MAT_TOOLTIP_SCROLL_STRATEGY, MAT_TOOLTIP_SCROLL_STRATEGY_FACTORY_PROVIDER, MAT_TOOLTIP_DEFAULT_OPTIONS, MatTooltip, TooltipComponent, matTooltipAnimations }; |
| //# sourceMappingURL=tooltip.js.map |
