diff --git a/src/lib/tooltip/tooltip.ts b/src/lib/tooltip/tooltip.ts index 00b1bbf94408..3771fa885d1d 100644 --- a/src/lib/tooltip/tooltip.ts +++ b/src/lib/tooltip/tooltip.ts @@ -11,7 +11,6 @@ import {Directionality} from '@angular/cdk/bidi'; import {coerceBooleanProperty} from '@angular/cdk/coercion'; import {ESCAPE} from '@angular/cdk/keycodes'; import {BreakpointObserver, Breakpoints, BreakpointState} from '@angular/cdk/layout'; -import {HammerLoader, HAMMER_LOADER} from '@angular/platform-browser'; import { FlexibleConnectedPositionStrategy, HorizontalConnectionPos, @@ -19,13 +18,12 @@ import { Overlay, OverlayConnectionPosition, OverlayRef, - VerticalConnectionPos, ScrollStrategy, + VerticalConnectionPos, } from '@angular/cdk/overlay'; -import {ScrollDispatcher} from '@angular/cdk/scrolling'; import {Platform} from '@angular/cdk/platform'; import {ComponentPortal} from '@angular/cdk/portal'; -import {take, takeUntil} from 'rxjs/operators'; +import {ScrollDispatcher} from '@angular/cdk/scrolling'; import { ChangeDetectionStrategy, ChangeDetectorRef, @@ -37,11 +35,15 @@ import { Input, NgZone, OnDestroy, + OnInit, Optional, ViewContainerRef, ViewEncapsulation, } from '@angular/core'; -import {Subject, Observable} from 'rxjs'; +import {HAMMER_LOADER, HammerLoader} from '@angular/platform-browser'; +import {Observable, Subject} from 'rxjs'; +import {take, takeUntil} from 'rxjs/operators'; + import {matTooltipAnimations} from './tooltip-animations'; @@ -116,7 +118,7 @@ export function MAT_TOOLTIP_DEFAULT_OPTIONS_FACTORY(): MatTooltipDefaultOptions '(touchend)': '_handleTouchend()', }, }) -export class MatTooltip implements OnDestroy { +export class MatTooltip implements OnDestroy, OnInit { _overlayRef: OverlayRef | null; _tooltipInstance: TooltipComponent | null; @@ -214,7 +216,6 @@ export class MatTooltip implements OnDestroy { this._scrollStrategy = scrollStrategy; const element: HTMLElement = _elementRef.nativeElement; - const elementStyle = element.style as CSSStyleDeclaration & {webkitUserDrag: string}; const hasGestures = typeof window === 'undefined' || (window as any).Hammer || hammerLoader; // The mouse events shouldn't be bound on mobile devices, because they can prevent the @@ -231,6 +232,27 @@ export class MatTooltip implements OnDestroy { this._manualListeners.forEach((listener, event) => element.addEventListener(event, listener)); + _focusMonitor.monitor(_elementRef).pipe(takeUntil(this._destroyed)).subscribe(origin => { + // Note that the focus monitor runs outside the Angular zone. + if (!origin) { + _ngZone.run(() => this.hide(0)); + } else if (origin === 'keyboard') { + _ngZone.run(() => this.show()); + } + }); + + if (_defaultOptions && _defaultOptions.position) { + this.position = _defaultOptions.position; + } + } + + /** + * Setup styling-specific things + */ + ngOnInit() { + const element = this._elementRef.nativeElement; + const elementStyle = element.style as CSSStyleDeclaration & {webkitUserDrag: string}; + 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 @@ -246,19 +268,6 @@ export class MatTooltip implements OnDestroy { if (element.draggable && elementStyle.webkitUserDrag === 'none') { elementStyle.webkitUserDrag = ''; } - - _focusMonitor.monitor(_elementRef).pipe(takeUntil(this._destroyed)).subscribe(origin => { - // Note that the focus monitor runs outside the Angular zone. - if (!origin) { - _ngZone.run(() => this.hide(0)); - } else if (origin === 'keyboard') { - _ngZone.run(() => this.show()); - } - }); - - if (_defaultOptions && _defaultOptions.position) { - this.position = _defaultOptions.position; - } } /** diff --git a/tools/public_api_guard/lib/tooltip.d.ts b/tools/public_api_guard/lib/tooltip.d.ts index 576cb51331c4..8a98d844a414 100644 --- a/tools/public_api_guard/lib/tooltip.d.ts +++ b/tools/public_api_guard/lib/tooltip.d.ts @@ -14,33 +14,32 @@ export declare const MAT_TOOLTIP_SCROLL_STRATEGY_FACTORY_PROVIDER: { useFactory: typeof MAT_TOOLTIP_SCROLL_STRATEGY_FACTORY; }; -export declare class MatTooltip implements OnDestroy { - _overlayRef: OverlayRef | null; - _tooltipInstance: TooltipComponent | null; - disabled: boolean; - hideDelay: number; - message: string; - position: TooltipPosition; - showDelay: number; - tooltipClass: string | string[] | Set | { - [key: string]: any; - }; - constructor(_overlay: Overlay, _elementRef: ElementRef, _scrollDispatcher: ScrollDispatcher, _viewContainerRef: ViewContainerRef, _ngZone: NgZone, platform: Platform, _ariaDescriber: AriaDescriber, _focusMonitor: FocusMonitor, scrollStrategy: any, _dir: Directionality, _defaultOptions: MatTooltipDefaultOptions, hammerLoader?: HammerLoader); - _getOrigin(): { - main: OriginConnectionPosition; - fallback: OriginConnectionPosition; - }; - _getOverlayPosition(): { - main: OverlayConnectionPosition; - fallback: OverlayConnectionPosition; - }; - _handleKeydown(e: KeyboardEvent): void; - _handleTouchend(): void; - _isTooltipVisible(): boolean; - hide(delay?: number): void; - ngOnDestroy(): void; - show(delay?: number): void; - toggle(): void; +export declare class MatTooltip implements OnDestroy, OnInit { + _overlayRef: OverlayRef|null; + _tooltipInstance: TooltipComponent|null; + disabled: boolean; + hideDelay: number; + message: string; + position: TooltipPosition; + showDelay: number; + tooltipClass: string|string[]|Set|{ + [key: string]: any; + }; + constructor( + _overlay: Overlay, _elementRef: ElementRef, _scrollDispatcher: ScrollDispatcher, + _viewContainerRef: ViewContainerRef, _ngZone: NgZone, platform: Platform, + _ariaDescriber: AriaDescriber, _focusMonitor: FocusMonitor, scrollStrategy: any, + _dir: Directionality, _defaultOptions: MatTooltipDefaultOptions, hammerLoader?: HammerLoader); + _getOrigin(): {main: OriginConnectionPosition; fallback: OriginConnectionPosition;}; + _getOverlayPosition(): {main: OverlayConnectionPosition; fallback: OverlayConnectionPosition;}; + _handleKeydown(e: KeyboardEvent): void; + _handleTouchend(): void; + _isTooltipVisible(): boolean; + hide(delay?: number): void; + ngOnDestroy(): void; + ngOnInit(): void; + show(delay?: number): void; + toggle(): void; } export declare const matTooltipAnimations: {