@angular/material 13.2.3 → 13.2.6

package/fesm2020/tooltip/testing.mjs

@@ -14,23 +14,25 @@ class _MatTooltipHarnessBase extends ComponentHarness {
         // We need to dispatch both `touchstart` and a hover event, because the tooltip binds
         // different events depending on the device. The `changedTouches` is there in case the
         // element has ripples.
-        // @breaking-change 12.0.0 Remove null assertion from `dispatchEvent`.
-        await host.dispatchEvent?.('touchstart', { changedTouches: [] });
+        await host.dispatchEvent('touchstart', { changedTouches: [] });
         await host.hover();
+        const panel = await this._optionalPanel();
+        await panel?.dispatchEvent('animationend', { animationName: this._showAnimationName });
     }
     /** Hides the tooltip. */
     async hide() {
         const host = await this.host();
         // We need to dispatch both `touchstart` and a hover event, because
         // the tooltip binds different events depending on the device.
-        // @breaking-change 12.0.0 Remove null assertion from `dispatchEvent`.
-        await host.dispatchEvent?.('touchend');
+        await host.dispatchEvent('touchend');
         await host.mouseAway();
-        await this.forceStabilize(); // Needed in order to flush the `hide` animation.
+        const panel = await this._optionalPanel();
+        await panel?.dispatchEvent('animationend', { animationName: this._hideAnimationName });
     }
     /** Gets whether the tooltip is open. */
     async isOpen() {
-        return !!(await this._optionalPanel());
+        const panel = await this._optionalPanel();
+        return !!panel && !(await panel.hasClass(this._hiddenClass));
     }
     /** Gets a promise for the tooltip panel's text. */
     async getTooltipText() {
@@ -43,6 +45,9 @@ class MatTooltipHarness extends _MatTooltipHarnessBase {
     constructor() {
         super(...arguments);
         this._optionalPanel = this.documentRootLocatorFactory().locatorForOptional('.mat-tooltip');
+        this._hiddenClass = 'mat-tooltip-hide';
+        this._showAnimationName = 'mat-tooltip-show';
+        this._hideAnimationName = 'mat-tooltip-hide';
     }
     /**
      * Gets a `HarnessPredicate` that can be used to search

package/fesm2020/tooltip/testing.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"testing.mjs","sources":["../../../../../../../src/material/tooltip/testing/tooltip-harness.ts","../../../../../../../src/material/tooltip/testing/tooltip-harness-filters.ts","../../../../../../../src/material/tooltip/testing/public-api.ts","../../../../../../../src/material/tooltip/testing/index.ts"],"sourcesContent":["/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nimport {\n  AsyncFactoryFn,\n  ComponentHarness,\n  HarnessPredicate,\n  TestElement,\n} from '@angular/cdk/testing';\nimport {TooltipHarnessFilters} from './tooltip-harness-filters';\n\nexport abstract class _MatTooltipHarnessBase extends ComponentHarness {\n  protected abstract _optionalPanel: AsyncFactoryFn<TestElement | null>;\n\n  /** Shows the tooltip. */\n  async show(): Promise<void> {\n    const host = await this.host();\n\n    // We need to dispatch both `touchstart` and a hover event, because the tooltip binds\n    // different events depending on the device. The `changedTouches` is there in case the\n    // element has ripples.\n    // @breaking-change 12.0.0 Remove null assertion from `dispatchEvent`.\n    await host.dispatchEvent?.('touchstart', {changedTouches: []});\n    await host.hover();\n  }\n\n  /** Hides the tooltip. */\n  async hide(): Promise<void> {\n    const host = await this.host();\n\n    // We need to dispatch both `touchstart` and a hover event, because\n    // the tooltip binds different events depending on the device.\n    // @breaking-change 12.0.0 Remove null assertion from `dispatchEvent`.\n    await host.dispatchEvent?.('touchend');\n    await host.mouseAway();\n    await this.forceStabilize(); // Needed in order to flush the `hide` animation.\n  }\n\n  /** Gets whether the tooltip is open. */\n  async isOpen(): Promise<boolean> {\n    return !!(await this._optionalPanel());\n  }\n\n  /** Gets a promise for the tooltip panel's text. */\n  async getTooltipText(): Promise<string> {\n    const panel = await this._optionalPanel();\n    return panel ? panel.text() : '';\n  }\n}\n\n/** Harness for interacting with a standard mat-tooltip in tests. */\nexport class MatTooltipHarness extends _MatTooltipHarnessBase {\n  protected _optionalPanel = this.documentRootLocatorFactory().locatorForOptional('.mat-tooltip');\n  static hostSelector = '.mat-tooltip-trigger';\n\n  /**\n   * Gets a `HarnessPredicate` that can be used to search\n   * for a tooltip trigger with specific attributes.\n   * @param options Options for narrowing the search.\n   * @return a `HarnessPredicate` configured with the given options.\n   */\n  static with(options: TooltipHarnessFilters = {}): HarnessPredicate<MatTooltipHarness> {\n    return new HarnessPredicate(MatTooltipHarness, options);\n  }\n}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nimport {BaseHarnessFilters} from '@angular/cdk/testing';\n\n/** A set of criteria that can be used to filter a list of `MatTooltipHarness` instances. */\nexport interface TooltipHarnessFilters extends BaseHarnessFilters {}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nexport * from './tooltip-harness';\nexport * from './tooltip-harness-filters';\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;AAAA;;;;;;;MAgBsB,sBAAuB,SAAQ,gBAAgB;;IAInE,MAAM,IAAI;QACR,MAAM,IAAI,GAAG,MAAM,IAAI,CAAC,IAAI,EAAE,CAAC;;;;;QAM/B,MAAM,IAAI,CAAC,aAAa,GAAG,YAAY,EAAE,EAAC,cAAc,EAAE,EAAE,EAAC,CAAC,CAAC;QAC/D,MAAM,IAAI,CAAC,KAAK,EAAE,CAAC;KACpB;;IAGD,MAAM,IAAI;QACR,MAAM,IAAI,GAAG,MAAM,IAAI,CAAC,IAAI,EAAE,CAAC;;;;QAK/B,MAAM,IAAI,CAAC,aAAa,GAAG,UAAU,CAAC,CAAC;QACvC,MAAM,IAAI,CAAC,SAAS,EAAE,CAAC;QACvB,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;KAC7B;;IAGD,MAAM,MAAM;QACV,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC;KACxC;;IAGD,MAAM,cAAc;QAClB,MAAM,KAAK,GAAG,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAC1C,OAAO,KAAK,GAAG,KAAK,CAAC,IAAI,EAAE,GAAG,EAAE,CAAC;KAClC;CACF;AAED;MACa,iBAAkB,SAAQ,sBAAsB;IAA7D;;QACY,mBAAc,GAAG,IAAI,CAAC,0BAA0B,EAAE,CAAC,kBAAkB,CAAC,cAAc,CAAC,CAAC;KAYjG;;;;;;;IAHC,OAAO,IAAI,CAAC,UAAiC,EAAE;QAC7C,OAAO,IAAI,gBAAgB,CAAC,iBAAiB,EAAE,OAAO,CAAC,CAAC;KACzD;;AAVM,8BAAY,GAAG,sBAAsB;;AC1D9C;;;;;;;;ACAA;;;;;;;;ACAA;;;;;;;;;;"}
+{"version":3,"file":"testing.mjs","sources":["../../../../../../../src/material/tooltip/testing/tooltip-harness.ts","../../../../../../../src/material/tooltip/testing/tooltip-harness-filters.ts","../../../../../../../src/material/tooltip/testing/public-api.ts","../../../../../../../src/material/tooltip/testing/index.ts"],"sourcesContent":["/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nimport {\n  AsyncFactoryFn,\n  ComponentHarness,\n  HarnessPredicate,\n  TestElement,\n} from '@angular/cdk/testing';\nimport {TooltipHarnessFilters} from './tooltip-harness-filters';\n\nexport abstract class _MatTooltipHarnessBase extends ComponentHarness {\n  protected abstract _optionalPanel: AsyncFactoryFn<TestElement | null>;\n  protected abstract _hiddenClass: string;\n  protected abstract _showAnimationName: string;\n  protected abstract _hideAnimationName: string;\n\n  /** Shows the tooltip. */\n  async show(): Promise<void> {\n    const host = await this.host();\n\n    // We need to dispatch both `touchstart` and a hover event, because the tooltip binds\n    // different events depending on the device. The `changedTouches` is there in case the\n    // element has ripples.\n    await host.dispatchEvent('touchstart', {changedTouches: []});\n    await host.hover();\n    const panel = await this._optionalPanel();\n    await panel?.dispatchEvent('animationend', {animationName: this._showAnimationName});\n  }\n\n  /** Hides the tooltip. */\n  async hide(): Promise<void> {\n    const host = await this.host();\n\n    // We need to dispatch both `touchstart` and a hover event, because\n    // the tooltip binds different events depending on the device.\n    await host.dispatchEvent('touchend');\n    await host.mouseAway();\n    const panel = await this._optionalPanel();\n    await panel?.dispatchEvent('animationend', {animationName: this._hideAnimationName});\n  }\n\n  /** Gets whether the tooltip is open. */\n  async isOpen(): Promise<boolean> {\n    const panel = await this._optionalPanel();\n    return !!panel && !(await panel.hasClass(this._hiddenClass));\n  }\n\n  /** Gets a promise for the tooltip panel's text. */\n  async getTooltipText(): Promise<string> {\n    const panel = await this._optionalPanel();\n    return panel ? panel.text() : '';\n  }\n}\n\n/** Harness for interacting with a standard mat-tooltip in tests. */\nexport class MatTooltipHarness extends _MatTooltipHarnessBase {\n  protected _optionalPanel = this.documentRootLocatorFactory().locatorForOptional('.mat-tooltip');\n  protected _hiddenClass = 'mat-tooltip-hide';\n  protected _showAnimationName = 'mat-tooltip-show';\n  protected _hideAnimationName = 'mat-tooltip-hide';\n  static hostSelector = '.mat-tooltip-trigger';\n\n  /**\n   * Gets a `HarnessPredicate` that can be used to search\n   * for a tooltip trigger with specific attributes.\n   * @param options Options for narrowing the search.\n   * @return a `HarnessPredicate` configured with the given options.\n   */\n  static with(options: TooltipHarnessFilters = {}): HarnessPredicate<MatTooltipHarness> {\n    return new HarnessPredicate(MatTooltipHarness, options);\n  }\n}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nimport {BaseHarnessFilters} from '@angular/cdk/testing';\n\n/** A set of criteria that can be used to filter a list of `MatTooltipHarness` instances. */\nexport interface TooltipHarnessFilters extends BaseHarnessFilters {}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nexport * from './tooltip-harness';\nexport * from './tooltip-harness-filters';\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;AAAA;;;;;;;MAgBsB,sBAAuB,SAAQ,gBAAgB;;IAOnE,MAAM,IAAI;QACR,MAAM,IAAI,GAAG,MAAM,IAAI,CAAC,IAAI,EAAE,CAAC;;;;QAK/B,MAAM,IAAI,CAAC,aAAa,CAAC,YAAY,EAAE,EAAC,cAAc,EAAE,EAAE,EAAC,CAAC,CAAC;QAC7D,MAAM,IAAI,CAAC,KAAK,EAAE,CAAC;QACnB,MAAM,KAAK,GAAG,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAC1C,MAAM,KAAK,EAAE,aAAa,CAAC,cAAc,EAAE,EAAC,aAAa,EAAE,IAAI,CAAC,kBAAkB,EAAC,CAAC,CAAC;KACtF;;IAGD,MAAM,IAAI;QACR,MAAM,IAAI,GAAG,MAAM,IAAI,CAAC,IAAI,EAAE,CAAC;;;QAI/B,MAAM,IAAI,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;QACrC,MAAM,IAAI,CAAC,SAAS,EAAE,CAAC;QACvB,MAAM,KAAK,GAAG,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAC1C,MAAM,KAAK,EAAE,aAAa,CAAC,cAAc,EAAE,EAAC,aAAa,EAAE,IAAI,CAAC,kBAAkB,EAAC,CAAC,CAAC;KACtF;;IAGD,MAAM,MAAM;QACV,MAAM,KAAK,GAAG,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAC1C,OAAO,CAAC,CAAC,KAAK,IAAI,EAAE,MAAM,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;KAC9D;;IAGD,MAAM,cAAc;QAClB,MAAM,KAAK,GAAG,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAC1C,OAAO,KAAK,GAAG,KAAK,CAAC,IAAI,EAAE,GAAG,EAAE,CAAC;KAClC;CACF;AAED;MACa,iBAAkB,SAAQ,sBAAsB;IAA7D;;QACY,mBAAc,GAAG,IAAI,CAAC,0BAA0B,EAAE,CAAC,kBAAkB,CAAC,cAAc,CAAC,CAAC;QACtF,iBAAY,GAAG,kBAAkB,CAAC;QAClC,uBAAkB,GAAG,kBAAkB,CAAC;QACxC,uBAAkB,GAAG,kBAAkB,CAAC;KAYnD;;;;;;;IAHC,OAAO,IAAI,CAAC,UAAiC,EAAE;QAC7C,OAAO,IAAI,gBAAgB,CAAC,iBAAiB,EAAE,OAAO,CAAC,CAAC;KACzD;;AAVM,8BAAY,GAAG,sBAAsB;;AClE9C;;;;;;;;ACAA;;;;;;;;ACAA;;;;;;;;;;"}

package/fesm2020/tooltip.mjs

@@ -5,7 +5,7 @@ import { A11yModule } from '@angular/cdk/a11y';
 import * as i7 from '@angular/common';
 import { DOCUMENT, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { InjectionToken, Directive, Inject, Input, Optional, Component, ViewEncapsulation, ChangeDetectionStrategy, NgModule } from '@angular/core';
+import { InjectionToken, Directive, Inject, Input, Optional, Component, ViewEncapsulation, ChangeDetectionStrategy, ViewChild, NgModule } from '@angular/core';
 import { MatCommonModule } from '@angular/material/core';
 import * as i2 from '@angular/cdk/scrolling';
 import { CdkScrollableModule } from '@angular/cdk/scrolling';
@@ -17,6 +17,7 @@ import { Breakpoints } from '@angular/cdk/layout';
 import * as i3 from '@angular/cdk/platform';
 import { normalizePassiveListenerOptions } from '@angular/cdk/platform';
 import { ComponentPortal } from '@angular/cdk/portal';
+import { ANIMATION_MODULE_TYPE } from '@angular/platform-browser/animations';
 import { Subject } from 'rxjs';
 import { takeUntil, take } from 'rxjs/operators';
 import { trigger, state, style, transition, animate, keyframes } from '@angular/animations';
@@ -28,24 +29,6 @@ import { trigger, state, style, transition, animate, keyframes } from '@angular/
  * 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
  */
-/**
- * Animations used by MatTooltip.
- * @docs-private
- */
-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 }))),
-    ]),
-};
-
 /** Time in ms to throttle repositioning after scroll events. */
 const SCROLL_THROTTLE_MS = 20;
 /**
@@ -191,6 +174,9 @@ class _MatTooltipBase {
     }
     set hideDelay(value) {
         this._hideDelay = coerceNumberProperty(value);
+        if (this._tooltipInstance) {
+            this._tooltipInstance._mouseLeaveHideDelay = this._hideDelay;
+        }
     }
     /** The message to be displayed in the tooltip */
     get message() {
@@ -279,14 +265,16 @@ class _MatTooltipBase {
         this._detach();
         this._portal =
             this._portal || new ComponentPortal(this._tooltipComponent, this._viewContainerRef);
-        this._tooltipInstance = overlayRef.attach(this._portal).instance;
-        this._tooltipInstance
+        const instance = (this._tooltipInstance = overlayRef.attach(this._portal).instance);
+        instance._triggerElement = this._elementRef.nativeElement;
+        instance._mouseLeaveHideDelay = this._hideDelay;
+        instance
             .afterHidden()
             .pipe(takeUntil(this._destroyed))
             .subscribe(() => this._detach());
         this._setTooltipClass(this._tooltipClass);
         this._updateTooltipMessage();
-        this._tooltipInstance.show(delay);
+        instance.show(delay);
     }
     /** Hides the tooltip after the delay in ms, defaults to tooltip-delay-hide or 0ms if no input */
     hide(delay = this.hideDelay) {
@@ -351,6 +339,9 @@ class _MatTooltipBase {
                 this._ngZone.run(() => this.hide(0));
             }
         });
+        if (this._defaultOptions?.disableTooltipInteractivity) {
+            this._overlayRef.addPanelClass(`${this._cssClassPrefix}-tooltip-panel-non-interactive`);
+        }
         return this._overlayRef;
     }
     /** Detaches the currently-attached tooltip. */
@@ -547,7 +538,15 @@ class _MatTooltipBase {
         this._pointerExitEventsInitialized = true;
         const exitListeners = [];
         if (this._platformSupportsMouseEvents()) {
-            exitListeners.push(['mouseleave', () => this.hide()], ['wheel', event => this._wheelListener(event)]);
+            exitListeners.push([
+                'mouseleave',
+                event => {
+                    const newTarget = event.relatedTarget;
+                    if (!newTarget || !this._overlayRef?.overlayElement.contains(newTarget)) {
+                        this.hide();
+                    }
+                },
+            ], ['wheel', event => this._wheelListener(event)]);
         }
         else if (this.touchGestures !== 'off') {
             this._disableNativeGesturesIfNecessary();
@@ -674,14 +673,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImpor
                     args: [DOCUMENT]
                 }] }]; } });
 class _TooltipComponentBase {
-    constructor(_changeDetectorRef) {
+    constructor(_changeDetectorRef, animationMode) {
         this._changeDetectorRef = _changeDetectorRef;
         /** 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;
+        /** Whether the tooltip is currently visible. */
+        this._isVisible = false;
         /** Subject for notifying that the tooltip has been hidden from the view */
         this._onHide = new Subject();
+        this._animationsDisabled = animationMode === 'NoopAnimations';
     }
     /**
      * Shows the tooltip with an animation originating from the provided origin
@@ -690,15 +692,9 @@ class _TooltipComponentBase {
     show(delay) {
         // Cancel the delayed hide if it is scheduled
         clearTimeout(this._hideTimeoutId);
-        // Body interactions should cancel the tooltip if there is a delay in showing.
-        this._closeOnInteraction = true;
         this._showTimeoutId = setTimeout(() => {
-            this._visibility = 'visible';
+            this._toggleVisibility(true);
             this._showTimeoutId = undefined;
-            this._onShow();
-            // Mark for check so if any parent component has set the
-            // ChangeDetectionStrategy to OnPush it will be checked anyways
-            this._markForCheck();
         }, delay);
     }
     /**
@@ -709,11 +705,8 @@ class _TooltipComponentBase {
         // Cancel the delayed show if it is scheduled
         clearTimeout(this._showTimeoutId);
         this._hideTimeoutId = setTimeout(() => {
-            this._visibility = 'hidden';
+            this._toggleVisibility(false);
             this._hideTimeoutId = undefined;
-            // 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. */
@@ -722,24 +715,13 @@ class _TooltipComponentBase {
     }
     /** Whether the tooltip is being displayed. */
     isVisible() {
-        return this._visibility === 'visible';
+        return this._isVisible;
     }
     ngOnDestroy() {
         clearTimeout(this._showTimeoutId);
         clearTimeout(this._hideTimeoutId);
         this._onHide.complete();
-    }
-    _animationStart() {
-        this._closeOnInteraction = false;
-    }
-    _animationDone(event) {
-        const toState = event.toState;
-        if (toState === 'hidden' && !this.isVisible()) {
-            this._onHide.next();
-        }
-        if (toState === 'visible' || toState === 'hidden') {
-            this._closeOnInteraction = true;
-        }
+        this._triggerElement = null;
     }
     /**
      * Interactions on the HTML body should close the tooltip immediately as defined in the
@@ -759,41 +741,110 @@ class _TooltipComponentBase {
     _markForCheck() {
         this._changeDetectorRef.markForCheck();
     }
+    _handleMouseLeave({ relatedTarget }) {
+        if (!relatedTarget || !this._triggerElement.contains(relatedTarget)) {
+            this.hide(this._mouseLeaveHideDelay);
+        }
+    }
     /**
      * Callback for when the timeout in this.show() gets completed.
      * This method is only needed by the mdc-tooltip, and so it is only implemented
      * in the mdc-tooltip, not here.
      */
     _onShow() { }
+    /** Event listener dispatched when an animation on the tooltip finishes. */
+    _handleAnimationEnd({ animationName }) {
+        if (animationName === this._showAnimation || animationName === this._hideAnimation) {
+            this._finalizeAnimation(animationName === this._showAnimation);
+        }
+    }
+    /** Handles the cleanup after an animation has finished. */
+    _finalizeAnimation(toVisible) {
+        if (toVisible) {
+            this._closeOnInteraction = true;
+        }
+        else if (!this.isVisible()) {
+            this._onHide.next();
+        }
+    }
+    /** Toggles the visibility of the tooltip element. */
+    _toggleVisibility(isVisible) {
+        // We set the classes directly here ourselves so that toggling the tooltip state
+        // isn't bound by change detection. This allows us to hide it even if the
+        // view ref has been detached from the CD tree.
+        const tooltip = this._tooltip.nativeElement;
+        const showClass = this._showAnimation;
+        const hideClass = this._hideAnimation;
+        tooltip.classList.remove(isVisible ? hideClass : showClass);
+        tooltip.classList.add(isVisible ? showClass : hideClass);
+        this._isVisible = isVisible;
+        // It's common for internal apps to disable animations using `* { animation: none !important }`
+        // which can break the opening sequence. Try to detect such cases and work around them.
+        if (isVisible && !this._animationsDisabled && typeof getComputedStyle === 'function') {
+            const styles = getComputedStyle(tooltip);
+            // Use `getPropertyValue` to avoid issues with property renaming.
+            if (styles.getPropertyValue('animation-duration') === '0s' ||
+                styles.getPropertyValue('animation-name') === 'none') {
+                this._animationsDisabled = true;
+            }
+        }
+        if (isVisible) {
+            this._onShow();
+        }
+        if (this._animationsDisabled) {
+            tooltip.classList.add('_mat-animation-noopable');
+            this._finalizeAnimation(isVisible);
+        }
+    }
 }
-_TooltipComponentBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: _TooltipComponentBase, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
+_TooltipComponentBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: _TooltipComponentBase, deps: [{ token: i0.ChangeDetectorRef }, { token: ANIMATION_MODULE_TYPE, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
 _TooltipComponentBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.0", type: _TooltipComponentBase, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: _TooltipComponentBase, decorators: [{
             type: Directive
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; } });
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [ANIMATION_MODULE_TYPE]
+                }] }]; } });
 /**
  * Internal component that wraps the tooltip's content.
  * @docs-private
  */
 class TooltipComponent extends _TooltipComponentBase {
-    constructor(changeDetectorRef, _breakpointObserver) {
-        super(changeDetectorRef);
+    constructor(changeDetectorRef, _breakpointObserver, animationMode) {
+        super(changeDetectorRef, animationMode);
         this._breakpointObserver = _breakpointObserver;
         /** Stream that emits whether the user has a handset-sized display.  */
         this._isHandset = this._breakpointObserver.observe(Breakpoints.Handset);
+        this._showAnimation = 'mat-tooltip-show';
+        this._hideAnimation = 'mat-tooltip-hide';
     }
 }
-TooltipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: TooltipComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i6.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component });
-TooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: TooltipComponent, selector: "mat-tooltip-component", host: { attributes: { "aria-hidden": "true" }, properties: { "style.zoom": "_visibility === \"visible\" ? 1 : null" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"mat-tooltip\"\n     [ngClass]=\"tooltipClass\"\n     [class.mat-tooltip-handset]=\"(_isHandset | async)?.matches\"\n     [@state]=\"_visibility\"\n     (@state.start)=\"_animationStart()\"\n     (@state.done)=\"_animationDone($event)\">{{message}}</div>\n", 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}.cdk-high-contrast-active .mat-tooltip{outline:solid 1px}.mat-tooltip-handset{margin:24px;padding-left:16px;padding-right:16px}\n"], directives: [{ type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "async": i7.AsyncPipe }, animations: [matTooltipAnimations.tooltipState], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+TooltipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: TooltipComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i6.BreakpointObserver }, { token: ANIMATION_MODULE_TYPE, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+TooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: TooltipComponent, selector: "mat-tooltip-component", host: { attributes: { "aria-hidden": "true" }, listeners: { "mouseleave": "_handleMouseLeave($event)" }, properties: { "style.zoom": "isVisible() ? 1 : null" } }, viewQueries: [{ propertyName: "_tooltip", first: true, predicate: ["tooltip"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div #tooltip\n     class=\"mat-tooltip\"\n     (animationend)=\"_handleAnimationEnd($event)\"\n     [ngClass]=\"tooltipClass\"\n     [class.mat-tooltip-handset]=\"(_isHandset | async)?.matches\">{{message}}</div>\n", styles: [".mat-tooltip{color:#fff;border-radius:4px;margin:14px;max-width:250px;padding-left:8px;padding-right:8px;overflow:hidden;text-overflow:ellipsis;transform:scale(0)}.mat-tooltip._mat-animation-noopable{animation:none;transform:scale(1)}.cdk-high-contrast-active .mat-tooltip{outline:solid 1px}.mat-tooltip-handset{margin:24px;padding-left:16px;padding-right:16px}.mat-tooltip-panel-non-interactive{pointer-events:none}@keyframes mat-tooltip-show{0%{opacity:0;transform:scale(0)}50%{opacity:.5;transform:scale(0.99)}100%{opacity:1;transform:scale(1)}}@keyframes mat-tooltip-hide{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1)}}.mat-tooltip-show{animation:mat-tooltip-show 200ms cubic-bezier(0, 0, 0.2, 1) forwards}.mat-tooltip-hide{animation:mat-tooltip-hide 100ms cubic-bezier(0, 0, 0.2, 1) forwards}\n"], directives: [{ type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "async": i7.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: TooltipComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mat-tooltip-component', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, animations: [matTooltipAnimations.tooltipState], host: {
+            args: [{ selector: 'mat-tooltip-component', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, 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',
+                        '[style.zoom]': 'isVisible() ? 1 : null',
+                        '(mouseleave)': '_handleMouseLeave($event)',
                         'aria-hidden': 'true',
-                    }, template: "<div class=\"mat-tooltip\"\n     [ngClass]=\"tooltipClass\"\n     [class.mat-tooltip-handset]=\"(_isHandset | async)?.matches\"\n     [@state]=\"_visibility\"\n     (@state.start)=\"_animationStart()\"\n     (@state.done)=\"_animationDone($event)\">{{message}}</div>\n", 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}.cdk-high-contrast-active .mat-tooltip{outline:solid 1px}.mat-tooltip-handset{margin:24px;padding-left:16px;padding-right:16px}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i6.BreakpointObserver }]; } });
+                    }, template: "<div #tooltip\n     class=\"mat-tooltip\"\n     (animationend)=\"_handleAnimationEnd($event)\"\n     [ngClass]=\"tooltipClass\"\n     [class.mat-tooltip-handset]=\"(_isHandset | async)?.matches\">{{message}}</div>\n", styles: [".mat-tooltip{color:#fff;border-radius:4px;margin:14px;max-width:250px;padding-left:8px;padding-right:8px;overflow:hidden;text-overflow:ellipsis;transform:scale(0)}.mat-tooltip._mat-animation-noopable{animation:none;transform:scale(1)}.cdk-high-contrast-active .mat-tooltip{outline:solid 1px}.mat-tooltip-handset{margin:24px;padding-left:16px;padding-right:16px}.mat-tooltip-panel-non-interactive{pointer-events:none}@keyframes mat-tooltip-show{0%{opacity:0;transform:scale(0)}50%{opacity:.5;transform:scale(0.99)}100%{opacity:1;transform:scale(1)}}@keyframes mat-tooltip-hide{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1)}}.mat-tooltip-show{animation:mat-tooltip-show 200ms cubic-bezier(0, 0, 0.2, 1) forwards}.mat-tooltip-hide{animation:mat-tooltip-hide 100ms cubic-bezier(0, 0, 0.2, 1) forwards}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i6.BreakpointObserver }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [ANIMATION_MODULE_TYPE]
+                }] }]; }, propDecorators: { _tooltip: [{
+                type: ViewChild,
+                args: ['tooltip', {
+                        // Use a static query here since we interact directly with
+                        // the DOM which can happen before `ngAfterViewInit`.
+                        static: true,
+                    }]
+            }] } });
 
 /**
  * @license
@@ -817,6 +868,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImpor
                 }]
         }] });
 
+/**
+ * @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
+ */
+/**
+ * Animations used by MatTooltip.
+ * @docs-private
+ */
+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 }))),
+    ]),
+};
+
 /**
  * @license
  * Copyright Google LLC All Rights Reserved.