| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843 |
- /**
- * @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
|