@ng-matero/extensions 19.2.1 → 19.3.0

package/fesm2022/mtxTooltip.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, TemplateRef, ElementRef, ViewContainerRef, NgZone, Injector, afterNextRender, Directive, Input, ChangeDetectorRef, ANIMATION_MODULE_TYPE, Component, ViewEncapsulation, ChangeDetectionStrategy, ViewChild, NgModule } from '@angular/core';
+import { InjectionToken, inject, TemplateRef, ElementRef, NgZone, Injector, ViewContainerRef, afterNextRender, Directive, Input, ChangeDetectorRef, ANIMATION_MODULE_TYPE, Component, ViewEncapsulation, ChangeDetectionStrategy, ViewChild, NgModule } from '@angular/core';
 import { DOCUMENT, NgClass, NgTemplateOutlet, CommonModule } from '@angular/common';
 import { AriaDescriber, FocusMonitor, A11yModule } from '@angular/cdk/a11y';
 import { Overlay, ScrollDispatcher, OverlayModule } from '@angular/cdk/overlay';
@@ -13,7 +13,6 @@ import { normalizePassiveListenerOptions, Platform } from '@angular/cdk/platform
 import { ComponentPortal } from '@angular/cdk/portal';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
-import { trigger, state, style, transition, animate } from '@angular/animations';
 
 /** Time in ms to throttle repositioning after scroll events. */
 const SCROLL_THROTTLE_MS = 20;
@@ -32,17 +31,29 @@ const MTX_TOOLTIP_SCROLL_STRATEGY = new InjectionToken('mtx-tooltip-scroll-strat
         return () => overlay.scrollStrategies.reposition({ scrollThrottle: SCROLL_THROTTLE_MS });
     },
 });
-/** @docs-private */
+/**
+ * @docs-private
+ * @deprecated No longer used, will be removed.
+ * @breaking-change 21.0.0
+ */
 function MTX_TOOLTIP_SCROLL_STRATEGY_FACTORY(overlay) {
     return () => overlay.scrollStrategies.reposition({ scrollThrottle: SCROLL_THROTTLE_MS });
 }
-/** @docs-private */
+/**
+ * @docs-private
+ * @deprecated No longer used, will be removed.
+ * @breaking-change 21.0.0
+ */
 const MTX_TOOLTIP_SCROLL_STRATEGY_FACTORY_PROVIDER = {
     provide: MTX_TOOLTIP_SCROLL_STRATEGY,
     deps: [Overlay],
     useFactory: MTX_TOOLTIP_SCROLL_STRATEGY_FACTORY,
 };
-/** @docs-private */
+/**
+ * @docs-private
+ * @deprecated No longer used, will be removed.
+ * @breaking-change 21.0.0
+ */
 function MTX_TOOLTIP_DEFAULT_OPTIONS_FACTORY() {
     return {
         showDelay: 0,
@@ -177,16 +188,14 @@ class MtxTooltip {
         }
     }
     constructor() {
-        this._overlay = inject(Overlay);
         this._elementRef = inject(ElementRef);
-        this._scrollDispatcher = inject(ScrollDispatcher);
-        this._viewContainerRef = inject(ViewContainerRef);
         this._ngZone = inject(NgZone);
         this._platform = inject(Platform);
         this._ariaDescriber = inject(AriaDescriber);
         this._focusMonitor = inject(FocusMonitor);
         this._dir = inject(Directionality);
         this._injector = inject(Injector);
+        this._viewContainerRef = inject(ViewContainerRef);
         this._defaultOptions = inject(MTX_TOOLTIP_DEFAULT_OPTIONS, {
             optional: true,
         });
@@ -195,13 +204,12 @@ class MtxTooltip {
         this._position = 'below';
         this._positionAtOrigin = false;
         this._disabled = false;
-        this._scrollStrategy = inject(MTX_TOOLTIP_SCROLL_STRATEGY);
         this._viewInitialized = false;
         this._pointerExitEventsInitialized = false;
         this._tooltipComponent = TooltipComponent;
         this._viewportMargin = 8;
-        this._cssClassPrefix = 'mtx-mdc';
-        this._ariaDescriptionPending = false;
+        this._cssClassPrefix = 'mat-mdc';
+        this._dirSubscribed = false;
         /**
          * How touch gestures should be handled by the tooltip. On touch devices the tooltip directive
          * uses a long press gesture to show and hide, however it can conflict with the native browser
@@ -220,12 +228,12 @@ class MtxTooltip {
         this._message = '';
         /** Manually-bound passive event listeners. */
         this._passiveListeners = [];
-        /** Reference to the current document. */
-        this._document = inject(DOCUMENT);
         /** Timer started at the last `touchstart` event. */
         this._touchstartTimeout = null;
         /** Emits when the component is destroyed. */
         this._destroyed = new Subject();
+        /** Whether ngOnDestroyed has been called. */
+        this._isDestroyed = false;
         const defaultOptions = this._defaultOptions;
         if (defaultOptions) {
             this._showDelay = defaultOptions.showDelay;
@@ -243,11 +251,6 @@ class MtxTooltip {
                 this.tooltipClass = defaultOptions.tooltipClass;
             }
         }
-        this._dir.change.pipe(takeUntil(this._destroyed)).subscribe(() => {
-            if (this._overlayRef) {
-                this._updatePosition(this._overlayRef);
-            }
-        });
         this._viewportMargin = MIN_VIEWPORT_TOOLTIP_THRESHOLD;
     }
     ngAfterViewInit() {
@@ -287,6 +290,7 @@ class MtxTooltip {
         this._passiveListeners.length = 0;
         this._destroyed.next();
         this._destroyed.complete();
+        this._isDestroyed = true;
         this._ariaDescriber.removeDescription(nativeElement, this.message.toString(), 'tooltip');
         this._focusMonitor.stopMonitoring(nativeElement);
     }
@@ -343,9 +347,12 @@ class MtxTooltip {
             }
             this._detach();
         }
-        const scrollableAncestors = this._scrollDispatcher.getAncestorScrollContainers(this._elementRef);
+        const scrollableAncestors = this._injector
+            .get(ScrollDispatcher)
+            .getAncestorScrollContainers(this._elementRef);
+        const overlay = this._injector.get(Overlay);
         // Create connected position strategy that listens for scroll events to reposition.
-        const strategy = this._overlay
+        const strategy = overlay
             .position()
             .flexibleConnectedTo(this.positionAtOrigin ? origin || this._elementRef : this._elementRef)
             .withTransformOriginOn(`.${this._cssClassPrefix}-tooltip`)
@@ -362,11 +369,11 @@ class MtxTooltip {
                 }
             }
         });
-        this._overlayRef = this._overlay.create({
+        this._overlayRef = overlay.create({
             direction: this._dir,
             positionStrategy: strategy,
             panelClass: `${this._cssClassPrefix}-${PANEL_CLASS}`,
-            scrollStrategy: this._scrollStrategy(),
+            scrollStrategy: this._injector.get(MTX_TOOLTIP_SCROLL_STRATEGY)(),
         });
         this._updatePosition(this._overlayRef);
         this._overlayRef
@@ -390,6 +397,14 @@ class MtxTooltip {
         if (this._defaultOptions?.disableTooltipInteractivity) {
             this._overlayRef.addPanelClass(`${this._cssClassPrefix}-tooltip-panel-non-interactive`);
         }
+        if (!this._dirSubscribed) {
+            this._dirSubscribed = true;
+            this._dir.change.pipe(takeUntil(this._destroyed)).subscribe(() => {
+                if (this._overlayRef) {
+                    this._updatePosition(this._overlayRef);
+                }
+            });
+        }
         return this._overlayRef;
     }
     /** Detaches the currently-attached tooltip. */
@@ -655,7 +670,9 @@ class MtxTooltip {
     /** Listener for the `wheel` event on the element. */
     _wheelListener(event) {
         if (this._isTooltipVisible()) {
-            const elementUnderPointer = this._document.elementFromPoint(event.clientX, event.clientY);
+            const elementUnderPointer = this._injector
+                .get(DOCUMENT)
+                .elementFromPoint(event.clientX, event.clientY);
             const element = this._elementRef.nativeElement;
             // On non-touch devices we depend on the `mouseleave` event to close the tooltip, but it
             // won't fire if the user scrolls away using the wheel without moving their cursor. We
@@ -697,23 +714,25 @@ class MtxTooltip {
         }
         this._ariaDescriptionPending = true;
         this._ariaDescriber.removeDescription(this._elementRef.nativeElement, oldMessage.toString(), 'tooltip');
-        this._ngZone.runOutsideAngular(() => {
-            // The `AriaDescriber` has some functionality that avoids adding a description if it's the
-            // same as the `aria-label` of an element, however we can't know whether the tooltip trigger
-            // has a data-bound `aria-label` or when it'll be set for the first time. We can avoid the
-            // issue by deferring the description by a tick so Angular has time to set the `aria-label`.
-            Promise.resolve().then(() => {
-                this._ariaDescriptionPending = false;
-                if (this.message && !this.disabled) {
-                    this._ariaDescriber.describe(this._elementRef.nativeElement, this.message.toString(), 'tooltip');
-                }
-            });
-        });
+        // The `AriaDescriber` has some functionality that avoids adding a description if it's the
+        // same as the `aria-label` of an element, however we can't know whether the tooltip trigger
+        // has a data-bound `aria-label` or when it'll be set for the first time. We can avoid the
+        // issue by deferring the description by a tick so Angular has time to set the `aria-label`.
+        if (!this._isDestroyed) {
+            afterNextRender({
+                write: () => {
+                    this._ariaDescriptionPending = false;
+                    if (this.message && !this.disabled) {
+                        this._ariaDescriber.describe(this._elementRef.nativeElement, this.message.toString(), 'tooltip');
+                    }
+                },
+            }, { injector: this._injector });
+        }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: MtxTooltip, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.6", type: MtxTooltip, isStandalone: true, selector: "[mtxTooltip]", inputs: { position: ["mtxTooltipPosition", "position"], positionAtOrigin: ["mtxTooltipPositionAtOrigin", "positionAtOrigin"], disabled: ["mtxTooltipDisabled", "disabled"], showDelay: ["mtxTooltipShowDelay", "showDelay"], hideDelay: ["mtxTooltipHideDelay", "hideDelay"], touchGestures: ["mtxTooltipTouchGestures", "touchGestures"], message: ["mtxTooltip", "message"], tooltipContext: ["mtxTooltipContext", "tooltipContext"], tooltipClass: ["mtxTooltipClass", "tooltipClass"] }, host: { properties: { "class.mtx-mdc-tooltip-disabled": "disabled" }, classAttribute: "mtx-mdc-tooltip-trigger" }, exportAs: ["mtxTooltip"], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxTooltip, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.2", type: MtxTooltip, isStandalone: true, selector: "[mtxTooltip]", inputs: { position: ["mtxTooltipPosition", "position"], positionAtOrigin: ["mtxTooltipPositionAtOrigin", "positionAtOrigin"], disabled: ["mtxTooltipDisabled", "disabled"], showDelay: ["mtxTooltipShowDelay", "showDelay"], hideDelay: ["mtxTooltipHideDelay", "hideDelay"], touchGestures: ["mtxTooltipTouchGestures", "touchGestures"], message: ["mtxTooltip", "message"], tooltipContext: ["mtxTooltipContext", "tooltipContext"], tooltipClass: ["mtxTooltipClass", "tooltipClass"] }, host: { properties: { "class.mtx-mdc-tooltip-disabled": "disabled" }, classAttribute: "mtx-mdc-tooltip-trigger" }, exportAs: ["mtxTooltip"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: MtxTooltip, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxTooltip, decorators: [{
             type: Directive,
             args: [{
                     selector: '[mtxTooltip]',
@@ -914,15 +933,15 @@ class TooltipComponent {
             this._finalizeAnimation(isVisible);
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.6", type: TooltipComponent, isStandalone: true, selector: "mtx-tooltip-component", host: { attributes: { "aria-hidden": "true" }, listeners: { "mouseleave": "_handleMouseLeave($event)" } }, viewQueries: [{ propertyName: "_tooltip", first: true, predicate: ["tooltip"], descendants: true, static: true }], ngImport: i0, template: "<div\n  #tooltip\n  class=\"mdc-tooltip mtx-mdc-tooltip\"\n  [ngClass]=\"tooltipClass\"\n  (animationend)=\"_handleAnimationEnd($event)\"\n  [class.mdc-tooltip--multiline]=\"_isMultiline\"\n>\n  <div class=\"mtx-mdc-tooltip-surface mdc-tooltip__surface\">\n    @if (message | isTemplateRef) {\n      <ng-template\n        [ngTemplateOutlet]=\"$any(message)\"\n        [ngTemplateOutletContext]=\"{ $implicit: tooltipContext }\"\n      ></ng-template>\n    } @else {\n      {{ message }}\n    }\n  </div>\n</div>\n", styles: [".mtx-mdc-tooltip{position:relative;transform:scale(0);display:inline-flex}.mtx-mdc-tooltip:before{content:\"\";inset:0;z-index:-1;position:absolute}.mtx-mdc-tooltip-panel-below .mtx-mdc-tooltip:before{top:-8px}.mtx-mdc-tooltip-panel-above .mtx-mdc-tooltip:before{bottom:-8px}.mtx-mdc-tooltip-panel-right .mtx-mdc-tooltip:before{left:-8px}.mtx-mdc-tooltip-panel-left .mtx-mdc-tooltip:before{right:-8px}.mtx-mdc-tooltip._mat-animation-noopable{animation:none;transform:scale(1)}.mtx-mdc-tooltip-surface{word-break:normal;overflow-wrap:anywhere;padding:4px 8px;min-width:40px;max-width:200px;min-height:24px;max-height:40vh;box-sizing:border-box;overflow:hidden;text-align:center;will-change:transform,opacity;background-color:var(--mdc-plain-tooltip-container-color, var(--mat-sys-inverse-surface));color:var(--mdc-plain-tooltip-supporting-text-color, var(--mat-sys-inverse-on-surface));border-radius:var(--mdc-plain-tooltip-container-shape, var(--mat-sys-corner-extra-small));font-family:var(--mdc-plain-tooltip-supporting-text-font, var(--mat-sys-body-small-font));font-size:var(--mdc-plain-tooltip-supporting-text-size, var(--mat-sys-body-small-size));font-weight:var(--mdc-plain-tooltip-supporting-text-weight, var(--mat-sys-body-small-weight));line-height:var(--mdc-plain-tooltip-supporting-text-line-height, var(--mat-sys-body-small-line-height));letter-spacing:var(--mdc-plain-tooltip-supporting-text-tracking, var(--mat-sys-body-small-tracking))}.mtx-mdc-tooltip-surface:before{position:absolute;box-sizing:border-box;width:100%;height:100%;top:0;left:0;border:1px solid transparent;border-radius:inherit;content:\"\";pointer-events:none}.mdc-tooltip--multiline .mtx-mdc-tooltip-surface{text-align:left}[dir=rtl] .mdc-tooltip--multiline .mtx-mdc-tooltip-surface{text-align:right}.mtx-mdc-tooltip-panel{line-height:normal}.mtx-mdc-tooltip-panel.mtx-mdc-tooltip-panel-non-interactive{pointer-events:none}@keyframes mtx-mdc-tooltip-show{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes mtx-mdc-tooltip-hide{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.8)}}.mtx-mdc-tooltip-show{animation:mtx-mdc-tooltip-show .15s cubic-bezier(0,0,.2,1) forwards}.mtx-mdc-tooltip-hide{animation:mtx-mdc-tooltip-hide 75ms cubic-bezier(.4,0,1,1) forwards}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: MtxIsTemplateRefPipe, name: "isTemplateRef" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: TooltipComponent, isStandalone: true, selector: "mtx-tooltip-component", host: { attributes: { "aria-hidden": "true" }, listeners: { "mouseleave": "_handleMouseLeave($event)" } }, viewQueries: [{ propertyName: "_tooltip", first: true, predicate: ["tooltip"], descendants: true, static: true }], ngImport: i0, template: "<div\n  #tooltip\n  class=\"mdc-tooltip mtx-mdc-tooltip\"\n  [ngClass]=\"tooltipClass\"\n  (animationend)=\"_handleAnimationEnd($event)\"\n  [class.mdc-tooltip--multiline]=\"_isMultiline\"\n>\n  <div class=\"mtx-mdc-tooltip-surface mdc-tooltip__surface\">\n    @if (message | isTemplateRef) {\n      <ng-template\n        [ngTemplateOutlet]=\"$any(message)\"\n        [ngTemplateOutletContext]=\"{ $implicit: tooltipContext }\"\n      ></ng-template>\n    } @else {\n      {{ message }}\n    }\n  </div>\n</div>\n", styles: [".mtx-mdc-tooltip{position:relative;transform:scale(0);display:inline-flex}.mtx-mdc-tooltip:before{content:\"\";inset:0;z-index:-1;position:absolute}.mtx-mdc-tooltip-panel-below .mtx-mdc-tooltip:before{top:-8px}.mtx-mdc-tooltip-panel-above .mtx-mdc-tooltip:before{bottom:-8px}.mtx-mdc-tooltip-panel-right .mtx-mdc-tooltip:before{left:-8px}.mtx-mdc-tooltip-panel-left .mtx-mdc-tooltip:before{right:-8px}.mtx-mdc-tooltip._mtx-animation-noopable{animation:none;transform:scale(1)}.mtx-mdc-tooltip-surface{word-break:normal;overflow-wrap:anywhere;padding:4px 8px;min-width:40px;max-width:200px;min-height:24px;max-height:40vh;box-sizing:border-box;overflow:hidden;text-align:center;will-change:transform,opacity;background-color:var(--mdc-plain-tooltip-container-color, var(--mat-sys-inverse-surface));color:var(--mdc-plain-tooltip-supporting-text-color, var(--mat-sys-inverse-on-surface));border-radius:var(--mdc-plain-tooltip-container-shape, var(--mat-sys-corner-extra-small));font-family:var(--mdc-plain-tooltip-supporting-text-font, var(--mat-sys-body-small-font));font-size:var(--mdc-plain-tooltip-supporting-text-size, var(--mat-sys-body-small-size));font-weight:var(--mdc-plain-tooltip-supporting-text-weight, var(--mat-sys-body-small-weight));line-height:var(--mdc-plain-tooltip-supporting-text-line-height, var(--mat-sys-body-small-line-height));letter-spacing:var(--mdc-plain-tooltip-supporting-text-tracking, var(--mat-sys-body-small-tracking))}.mtx-mdc-tooltip-surface:before{position:absolute;box-sizing:border-box;width:100%;height:100%;top:0;left:0;border:1px solid transparent;border-radius:inherit;content:\"\";pointer-events:none}.mdc-tooltip--multiline .mtx-mdc-tooltip-surface{text-align:left}[dir=rtl] .mdc-tooltip--multiline .mtx-mdc-tooltip-surface{text-align:right}.mtx-mdc-tooltip-panel{line-height:normal}.mtx-mdc-tooltip-panel.mtx-mdc-tooltip-panel-non-interactive{pointer-events:none}@keyframes mtx-mdc-tooltip-show{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes mtx-mdc-tooltip-hide{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.8)}}.mtx-mdc-tooltip-show{animation:mtx-mdc-tooltip-show .15s cubic-bezier(0,0,.2,1) forwards}.mtx-mdc-tooltip-hide{animation:mtx-mdc-tooltip-hide 75ms cubic-bezier(.4,0,1,1) forwards}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: MtxIsTemplateRefPipe, name: "isTemplateRef" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: TooltipComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: TooltipComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mtx-tooltip-component', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '(mouseleave)': '_handleMouseLeave($event)',
                         'aria-hidden': 'true',
-                    }, imports: [NgClass, NgTemplateOutlet, MtxIsTemplateRefPipe], template: "<div\n  #tooltip\n  class=\"mdc-tooltip mtx-mdc-tooltip\"\n  [ngClass]=\"tooltipClass\"\n  (animationend)=\"_handleAnimationEnd($event)\"\n  [class.mdc-tooltip--multiline]=\"_isMultiline\"\n>\n  <div class=\"mtx-mdc-tooltip-surface mdc-tooltip__surface\">\n    @if (message | isTemplateRef) {\n      <ng-template\n        [ngTemplateOutlet]=\"$any(message)\"\n        [ngTemplateOutletContext]=\"{ $implicit: tooltipContext }\"\n      ></ng-template>\n    } @else {\n      {{ message }}\n    }\n  </div>\n</div>\n", styles: [".mtx-mdc-tooltip{position:relative;transform:scale(0);display:inline-flex}.mtx-mdc-tooltip:before{content:\"\";inset:0;z-index:-1;position:absolute}.mtx-mdc-tooltip-panel-below .mtx-mdc-tooltip:before{top:-8px}.mtx-mdc-tooltip-panel-above .mtx-mdc-tooltip:before{bottom:-8px}.mtx-mdc-tooltip-panel-right .mtx-mdc-tooltip:before{left:-8px}.mtx-mdc-tooltip-panel-left .mtx-mdc-tooltip:before{right:-8px}.mtx-mdc-tooltip._mat-animation-noopable{animation:none;transform:scale(1)}.mtx-mdc-tooltip-surface{word-break:normal;overflow-wrap:anywhere;padding:4px 8px;min-width:40px;max-width:200px;min-height:24px;max-height:40vh;box-sizing:border-box;overflow:hidden;text-align:center;will-change:transform,opacity;background-color:var(--mdc-plain-tooltip-container-color, var(--mat-sys-inverse-surface));color:var(--mdc-plain-tooltip-supporting-text-color, var(--mat-sys-inverse-on-surface));border-radius:var(--mdc-plain-tooltip-container-shape, var(--mat-sys-corner-extra-small));font-family:var(--mdc-plain-tooltip-supporting-text-font, var(--mat-sys-body-small-font));font-size:var(--mdc-plain-tooltip-supporting-text-size, var(--mat-sys-body-small-size));font-weight:var(--mdc-plain-tooltip-supporting-text-weight, var(--mat-sys-body-small-weight));line-height:var(--mdc-plain-tooltip-supporting-text-line-height, var(--mat-sys-body-small-line-height));letter-spacing:var(--mdc-plain-tooltip-supporting-text-tracking, var(--mat-sys-body-small-tracking))}.mtx-mdc-tooltip-surface:before{position:absolute;box-sizing:border-box;width:100%;height:100%;top:0;left:0;border:1px solid transparent;border-radius:inherit;content:\"\";pointer-events:none}.mdc-tooltip--multiline .mtx-mdc-tooltip-surface{text-align:left}[dir=rtl] .mdc-tooltip--multiline .mtx-mdc-tooltip-surface{text-align:right}.mtx-mdc-tooltip-panel{line-height:normal}.mtx-mdc-tooltip-panel.mtx-mdc-tooltip-panel-non-interactive{pointer-events:none}@keyframes mtx-mdc-tooltip-show{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes mtx-mdc-tooltip-hide{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.8)}}.mtx-mdc-tooltip-show{animation:mtx-mdc-tooltip-show .15s cubic-bezier(0,0,.2,1) forwards}.mtx-mdc-tooltip-hide{animation:mtx-mdc-tooltip-hide 75ms cubic-bezier(.4,0,1,1) forwards}\n"] }]
+                    }, imports: [NgClass, NgTemplateOutlet, MtxIsTemplateRefPipe], template: "<div\n  #tooltip\n  class=\"mdc-tooltip mtx-mdc-tooltip\"\n  [ngClass]=\"tooltipClass\"\n  (animationend)=\"_handleAnimationEnd($event)\"\n  [class.mdc-tooltip--multiline]=\"_isMultiline\"\n>\n  <div class=\"mtx-mdc-tooltip-surface mdc-tooltip__surface\">\n    @if (message | isTemplateRef) {\n      <ng-template\n        [ngTemplateOutlet]=\"$any(message)\"\n        [ngTemplateOutletContext]=\"{ $implicit: tooltipContext }\"\n      ></ng-template>\n    } @else {\n      {{ message }}\n    }\n  </div>\n</div>\n", styles: [".mtx-mdc-tooltip{position:relative;transform:scale(0);display:inline-flex}.mtx-mdc-tooltip:before{content:\"\";inset:0;z-index:-1;position:absolute}.mtx-mdc-tooltip-panel-below .mtx-mdc-tooltip:before{top:-8px}.mtx-mdc-tooltip-panel-above .mtx-mdc-tooltip:before{bottom:-8px}.mtx-mdc-tooltip-panel-right .mtx-mdc-tooltip:before{left:-8px}.mtx-mdc-tooltip-panel-left .mtx-mdc-tooltip:before{right:-8px}.mtx-mdc-tooltip._mtx-animation-noopable{animation:none;transform:scale(1)}.mtx-mdc-tooltip-surface{word-break:normal;overflow-wrap:anywhere;padding:4px 8px;min-width:40px;max-width:200px;min-height:24px;max-height:40vh;box-sizing:border-box;overflow:hidden;text-align:center;will-change:transform,opacity;background-color:var(--mdc-plain-tooltip-container-color, var(--mat-sys-inverse-surface));color:var(--mdc-plain-tooltip-supporting-text-color, var(--mat-sys-inverse-on-surface));border-radius:var(--mdc-plain-tooltip-container-shape, var(--mat-sys-corner-extra-small));font-family:var(--mdc-plain-tooltip-supporting-text-font, var(--mat-sys-body-small-font));font-size:var(--mdc-plain-tooltip-supporting-text-size, var(--mat-sys-body-small-size));font-weight:var(--mdc-plain-tooltip-supporting-text-weight, var(--mat-sys-body-small-weight));line-height:var(--mdc-plain-tooltip-supporting-text-line-height, var(--mat-sys-body-small-line-height));letter-spacing:var(--mdc-plain-tooltip-supporting-text-tracking, var(--mat-sys-body-small-tracking))}.mtx-mdc-tooltip-surface:before{position:absolute;box-sizing:border-box;width:100%;height:100%;top:0;left:0;border:1px solid transparent;border-radius:inherit;content:\"\";pointer-events:none}.mdc-tooltip--multiline .mtx-mdc-tooltip-surface{text-align:left}[dir=rtl] .mdc-tooltip--multiline .mtx-mdc-tooltip-surface{text-align:right}.mtx-mdc-tooltip-panel{line-height:normal}.mtx-mdc-tooltip-panel.mtx-mdc-tooltip-panel-non-interactive{pointer-events:none}@keyframes mtx-mdc-tooltip-show{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes mtx-mdc-tooltip-hide{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.8)}}.mtx-mdc-tooltip-show{animation:mtx-mdc-tooltip-show .15s cubic-bezier(0,0,.2,1) forwards}.mtx-mdc-tooltip-hide{animation:mtx-mdc-tooltip-hide 75ms cubic-bezier(.4,0,1,1) forwards}\n"] }]
         }], ctorParameters: () => [], propDecorators: { _tooltip: [{
                 type: ViewChild,
                 args: ['tooltip', {
@@ -933,21 +952,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
             }] } });
 
 class MtxTooltipModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: MtxTooltipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.6", ngImport: i0, type: MtxTooltipModule, imports: [A11yModule,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxTooltipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.2", ngImport: i0, type: MtxTooltipModule, imports: [A11yModule,
             CommonModule,
             OverlayModule,
             MatCommonModule,
             MtxPipesModule,
             MtxTooltip,
             TooltipComponent], exports: [MtxTooltip, TooltipComponent, MatCommonModule, CdkScrollableModule] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: MtxTooltipModule, providers: [MTX_TOOLTIP_SCROLL_STRATEGY_FACTORY_PROVIDER], imports: [A11yModule,
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxTooltipModule, providers: [MTX_TOOLTIP_SCROLL_STRATEGY_FACTORY_PROVIDER], imports: [A11yModule,
             CommonModule,
             OverlayModule,
             MatCommonModule,
             MtxPipesModule, MatCommonModule, CdkScrollableModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: MtxTooltipModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxTooltipModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -967,17 +986,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
 /**
  * Animations used by MatTooltip.
  * @docs-private
+ * @deprecated No longer being used, to be removed.
+ * @breaking-change 21.0.0
  */
 const matTooltipAnimations = {
+    // Represents:
+    // trigger('state', [
+    //   state('initial, void, hidden', style({opacity: 0, transform: 'scale(0.8)'})),
+    //   state('visible', style({transform: 'scale(1)'})),
+    //   transition('* => visible', animate('150ms cubic-bezier(0, 0, 0.2, 1)')),
+    //   transition('* => hidden', animate('75ms cubic-bezier(0.4, 0, 1, 1)')),
+    // ])
     /** Animation that transitions a tooltip in and out. */
-    tooltipState: trigger('state', [
-        // TODO(crisbeto): these values are based on MDC's CSS.
-        // We should be able to use their styles directly once we land #19432.
-        state('initial, void, hidden', style({ opacity: 0, transform: 'scale(0.8)' })),
-        state('visible', style({ transform: 'scale(1)' })),
-        transition('* => visible', animate('150ms cubic-bezier(0, 0, 0.2, 1)')),
-        transition('* => hidden', animate('75ms cubic-bezier(0.4, 0, 1, 1)')),
-    ]),
+    tooltipState: {
+        type: 7,
+        name: 'state',
+        definitions: [
+            {
+                type: 0,
+                name: 'initial, void, hidden',
+                styles: { type: 6, styles: { opacity: 0, transform: 'scale(0.8)' }, offset: null },
+            },
+            {
+                type: 0,
+                name: 'visible',
+                styles: { type: 6, styles: { transform: 'scale(1)' }, offset: null },
+            },
+            {
+                type: 1,
+                expr: '* => visible',
+                animation: { type: 4, styles: null, timings: '150ms cubic-bezier(0, 0, 0.2, 1)' },
+                options: null,
+            },
+            {
+                type: 1,
+                expr: '* => hidden',
+                animation: { type: 4, styles: null, timings: '75ms cubic-bezier(0.4, 0, 1, 1)' },
+                options: null,
+            },
+        ],
+        options: {},
+    },
 };
 
 /**