@ng-matero/extensions 18.4.1 → 19.0.0

package/fesm2022/mtxTooltip.mjs

@@ -1,21 +1,18 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, TemplateRef, Injector, ElementRef, afterNextRender, Directive, Inject, Optional, Input, ANIMATION_MODULE_TYPE, Component, ViewEncapsulation, ChangeDetectionStrategy, ViewChild, NgModule } 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 { DOCUMENT, NgClass, NgTemplateOutlet, CommonModule } from '@angular/common';
-import * as i3 from '@angular/cdk/a11y';
-import { A11yModule } from '@angular/cdk/a11y';
-import * as i1 from '@angular/cdk/overlay';
-import { Overlay, OverlayModule } from '@angular/cdk/overlay';
+import { AriaDescriber, FocusMonitor, A11yModule } from '@angular/cdk/a11y';
+import { Overlay, ScrollDispatcher, OverlayModule } from '@angular/cdk/overlay';
 import { CdkScrollableModule } from '@angular/cdk/scrolling';
 import { MatCommonModule } from '@angular/material/core';
 import { MtxIsTemplateRefPipe, MtxPipesModule } from '@ng-matero/extensions/core';
+import { Directionality } from '@angular/cdk/bidi';
 import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
 import { ESCAPE, hasModifierKey } from '@angular/cdk/keycodes';
-import * as i2 from '@angular/cdk/platform';
-import { normalizePassiveListenerOptions } from '@angular/cdk/platform';
+import { normalizePassiveListenerOptions, Platform } from '@angular/cdk/platform';
 import { ComponentPortal } from '@angular/cdk/portal';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
-import * as i4 from '@angular/cdk/bidi';
 import { trigger, state, style, transition, animate } from '@angular/animations';
 
 /** Time in ms to throttle repositioning after scroll events. */
@@ -111,13 +108,17 @@ class MtxTooltip {
         return this._disabled;
     }
     set disabled(value) {
-        this._disabled = coerceBooleanProperty(value);
-        // If tooltip is disabled, hide immediately.
-        if (this._disabled) {
-            this.hide(0);
-        }
-        else {
-            this._setupPointerEnterEventsIfNeeded();
+        const isDisabled = coerceBooleanProperty(value);
+        if (this._disabled !== isDisabled) {
+            this._disabled = isDisabled;
+            // If tooltip is disabled, hide immediately.
+            if (isDisabled) {
+                this.hide(0);
+            }
+            else {
+                this._setupPointerEnterEventsIfNeeded();
+            }
+            this._syncAriaDescription(this.message);
         }
     }
     /** The default delay in ms before showing the tooltip after show is called */
@@ -142,7 +143,7 @@ class MtxTooltip {
         return this._message;
     }
     set message(value) {
-        this._ariaDescriber.removeDescription(this._elementRef.nativeElement, this._message, 'tooltip');
+        const oldMessage = this._message;
         // TODO: If the message is a TemplateRef, it's hard to support a11y.
         // If the message is not a string (e.g. number), convert it to a string and trim it.
         // Must convert with `String(value)`, not `${value}`, otherwise Closure Compiler optimises
@@ -154,16 +155,8 @@ class MtxTooltip {
         else {
             this._setupPointerEnterEventsIfNeeded();
             this._updateTooltipMessage();
-            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._ariaDescriber.describe(this._elementRef.nativeElement, this.message, 'tooltip');
-                });
-            });
         }
+        this._syncAriaDescription(oldMessage);
     }
     /** Context to be passed to the tooltip. */
     get tooltipContext() {
@@ -183,27 +176,32 @@ class MtxTooltip {
             this._setTooltipClass(this._tooltipClass);
         }
     }
-    constructor(_overlay, _elementRef, _scrollDispatcher, _viewContainerRef, _ngZone, _platform, _ariaDescriber, _focusMonitor, scrollStrategy, _dir, _defaultOptions, _document) {
-        this._overlay = _overlay;
-        this._elementRef = _elementRef;
-        this._scrollDispatcher = _scrollDispatcher;
-        this._viewContainerRef = _viewContainerRef;
-        this._ngZone = _ngZone;
-        this._platform = _platform;
-        this._ariaDescriber = _ariaDescriber;
-        this._focusMonitor = _focusMonitor;
-        this._dir = _dir;
-        this._defaultOptions = _defaultOptions;
+    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._defaultOptions = inject(MTX_TOOLTIP_DEFAULT_OPTIONS, {
+            optional: true,
+        });
         this._overlayRef = null;
         this._tooltipInstance = null;
         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;
         /**
          * 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
@@ -222,25 +220,30 @@ 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();
-        this._injector = inject(Injector);
-        this._scrollStrategy = scrollStrategy;
-        this._document = _document;
-        if (_defaultOptions) {
-            this._showDelay = _defaultOptions.showDelay;
-            this._hideDelay = _defaultOptions.hideDelay;
-            if (_defaultOptions.position) {
-                this.position = _defaultOptions.position;
+        const defaultOptions = this._defaultOptions;
+        if (defaultOptions) {
+            this._showDelay = defaultOptions.showDelay;
+            this._hideDelay = defaultOptions.hideDelay;
+            if (defaultOptions.position) {
+                this.position = defaultOptions.position;
+            }
+            if (defaultOptions.positionAtOrigin) {
+                this.positionAtOrigin = defaultOptions.positionAtOrigin;
             }
-            if (_defaultOptions.positionAtOrigin) {
-                this.positionAtOrigin = _defaultOptions.positionAtOrigin;
+            if (defaultOptions.touchGestures) {
+                this.touchGestures = defaultOptions.touchGestures;
             }
-            if (_defaultOptions.touchGestures) {
-                this.touchGestures = _defaultOptions.touchGestures;
+            if (defaultOptions.tooltipClass) {
+                this.tooltipClass = defaultOptions.tooltipClass;
             }
         }
-        _dir.change.pipe(takeUntil(this._destroyed)).subscribe(() => {
+        this._dir.change.pipe(takeUntil(this._destroyed)).subscribe(() => {
             if (this._overlayRef) {
                 this._updatePosition(this._overlayRef);
             }
@@ -269,7 +272,10 @@ class MtxTooltip {
      */
     ngOnDestroy() {
         const nativeElement = this._elementRef.nativeElement;
-        clearTimeout(this._touchstartTimeout);
+        // Optimization: Do not call clearTimeout unless there is an active timer.
+        if (this._touchstartTimeout) {
+            clearTimeout(this._touchstartTimeout);
+        }
         if (this._overlayRef) {
             this._overlayRef.dispose();
             this._tooltipInstance = null;
@@ -281,7 +287,7 @@ class MtxTooltip {
         this._passiveListeners.length = 0;
         this._destroyed.next();
         this._destroyed.complete();
-        this._ariaDescriber.removeDescription(nativeElement, this.message, 'tooltip');
+        this._ariaDescriber.removeDescription(nativeElement, this.message.toString(), 'tooltip');
         this._focusMonitor.stopMonitoring(nativeElement);
     }
     /** Shows the tooltip after the delay in ms, defaults to tooltip-delay-show or 0ms if no input */
@@ -595,9 +601,14 @@ class MtxTooltip {
                     // Note that it's important that we don't `preventDefault` here,
                     // because it can prevent click events from firing on the element.
                     this._setupPointerExitEventsIfNeeded();
-                    clearTimeout(this._touchstartTimeout);
+                    if (this._touchstartTimeout) {
+                        clearTimeout(this._touchstartTimeout);
+                    }
                     const DEFAULT_LONGPRESS_DELAY = 500;
-                    this._touchstartTimeout = setTimeout(() => this.show(undefined, origin), this._defaultOptions.touchLongPressShowDelay ?? DEFAULT_LONGPRESS_DELAY);
+                    this._touchstartTimeout = setTimeout(() => {
+                        this._touchstartTimeout = null;
+                        this.show(undefined, origin);
+                    }, this._defaultOptions?.touchLongPressShowDelay ?? DEFAULT_LONGPRESS_DELAY);
                 },
             ]);
         }
@@ -623,8 +634,10 @@ class MtxTooltip {
         else if (this.touchGestures !== 'off') {
             this._disableNativeGesturesIfNecessary();
             const touchendListener = () => {
-                clearTimeout(this._touchstartTimeout);
-                this.hide(this._defaultOptions.touchendHideDelay);
+                if (this._touchstartTimeout) {
+                    clearTimeout(this._touchstartTimeout);
+                }
+                this.hide(this._defaultOptions?.touchendHideDelay);
             };
             exitListeners.push(['touchend', touchendListener], ['touchcancel', touchendListener]);
         }
@@ -677,10 +690,30 @@ class MtxTooltip {
             style.webkitTapHighlightColor = 'transparent';
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MtxTooltip, deps: [{ token: i1.Overlay }, { token: i0.ElementRef }, { token: i1.ScrollDispatcher }, { token: i0.ViewContainerRef }, { token: i0.NgZone }, { token: i2.Platform }, { token: i3.AriaDescriber }, { token: i3.FocusMonitor }, { token: MTX_TOOLTIP_SCROLL_STRATEGY }, { token: i4.Directionality }, { token: MTX_TOOLTIP_DEFAULT_OPTIONS, optional: true }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.0", 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 }); }
+    /** Updates the tooltip's ARIA description based on it current state. */
+    _syncAriaDescription(oldMessage) {
+        if (this._ariaDescriptionPending) {
+            return;
+        }
+        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');
+                }
+            });
+        });
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: MtxTooltip, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.4", 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: "18.2.0", ngImport: i0, type: MtxTooltip, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: MtxTooltip, decorators: [{
             type: Directive,
             args: [{
                     selector: '[mtxTooltip]',
@@ -689,20 +722,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                         'class': 'mtx-mdc-tooltip-trigger',
                         '[class.mtx-mdc-tooltip-disabled]': 'disabled',
                     },
-                    standalone: true,
                 }]
-        }], ctorParameters: () => [{ type: i1.Overlay }, { type: i0.ElementRef }, { type: i1.ScrollDispatcher }, { type: i0.ViewContainerRef }, { type: i0.NgZone }, { type: i2.Platform }, { type: i3.AriaDescriber }, { type: i3.FocusMonitor }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [MTX_TOOLTIP_SCROLL_STRATEGY]
-                }] }, { type: i4.Directionality }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [MTX_TOOLTIP_DEFAULT_OPTIONS]
-                }] }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [DOCUMENT]
-                }] }], propDecorators: { position: [{
+        }], ctorParameters: () => [], propDecorators: { position: [{
                 type: Input,
                 args: ['mtxTooltipPosition']
             }], positionAtOrigin: [{
@@ -735,9 +756,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
  * @docs-private
  */
 class TooltipComponent {
-    constructor(_changeDetectorRef, _elementRef, animationMode) {
-        this._changeDetectorRef = _changeDetectorRef;
-        this._elementRef = _elementRef;
+    constructor() {
+        this._changeDetectorRef = inject(ChangeDetectorRef);
+        this._elementRef = inject(ElementRef);
         /* Whether the tooltip text overflows to multiple lines */
         this._isMultiline = false;
         /** Whether interactions on the page should close the tooltip */
@@ -750,6 +771,7 @@ class TooltipComponent {
         this._showAnimation = 'mtx-mdc-tooltip-show';
         /** Name of the hide animation and the class that toggles it. */
         this._hideAnimation = 'mtx-mdc-tooltip-hide';
+        const animationMode = inject(ANIMATION_MODULE_TYPE, { optional: true });
         this._animationsDisabled = animationMode === 'NoopAnimations';
     }
     /**
@@ -892,24 +914,16 @@ class TooltipComponent {
             this._finalizeAnimation(isVisible);
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: TooltipComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: ANIMATION_MODULE_TYPE, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: TooltipComponent, isStandalone: true, selector: "mtx-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 }], ngImport: i0, template: "<div #tooltip\n  class=\"mdc-tooltip mtx-mdc-tooltip\"\n  [ngClass]=\"tooltipClass\"\n  (animationend)=\"_handleAnimationEnd($event)\"\n  [class.mdc-tooltip--multiline]=\"_isMultiline\">\n  <div class=\"mtx-mdc-tooltip-surface mdc-tooltip__surface\">\n    @if (message | isTemplateRef) {\n      <ng-template [ngTemplateOutlet]=\"$any(message)\"\n      [ngTemplateOutletContext]=\"{ $implicit: tooltipContext }\"></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);color:var(--mdc-plain-tooltip-supporting-text-color);border-radius:var(--mdc-plain-tooltip-container-shape);font-family:var(--mdc-plain-tooltip-supporting-text-font);font-size:var(--mdc-plain-tooltip-supporting-text-size);font-weight:var(--mdc-plain-tooltip-supporting-text-weight);line-height:var(--mdc-plain-tooltip-supporting-text-line-height);letter-spacing:var(--mdc-plain-tooltip-supporting-text-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.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.0.4", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.4", 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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: TooltipComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: TooltipComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mtx-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]': 'isVisible() ? 1 : null',
                         '(mouseleave)': '_handleMouseLeave($event)',
                         'aria-hidden': 'true',
-                    }, standalone: true, imports: [NgClass, NgTemplateOutlet, MtxIsTemplateRefPipe], template: "<div #tooltip\n  class=\"mdc-tooltip mtx-mdc-tooltip\"\n  [ngClass]=\"tooltipClass\"\n  (animationend)=\"_handleAnimationEnd($event)\"\n  [class.mdc-tooltip--multiline]=\"_isMultiline\">\n  <div class=\"mtx-mdc-tooltip-surface mdc-tooltip__surface\">\n    @if (message | isTemplateRef) {\n      <ng-template [ngTemplateOutlet]=\"$any(message)\"\n      [ngTemplateOutletContext]=\"{ $implicit: tooltipContext }\"></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);color:var(--mdc-plain-tooltip-supporting-text-color);border-radius:var(--mdc-plain-tooltip-container-shape);font-family:var(--mdc-plain-tooltip-supporting-text-font);font-size:var(--mdc-plain-tooltip-supporting-text-size);font-weight:var(--mdc-plain-tooltip-supporting-text-weight);line-height:var(--mdc-plain-tooltip-supporting-text-line-height);letter-spacing:var(--mdc-plain-tooltip-supporting-text-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.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: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [ANIMATION_MODULE_TYPE]
-                }] }], propDecorators: { _tooltip: [{
+                    }, 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"] }]
+        }], ctorParameters: () => [], propDecorators: { _tooltip: [{
                 type: ViewChild,
                 args: ['tooltip', {
                         // Use a static query here since we interact directly with
@@ -919,21 +933,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
             }] } });
 
 class MtxTooltipModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MtxTooltipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.0", ngImport: i0, type: MtxTooltipModule, imports: [A11yModule,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: MtxTooltipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.4", 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: "18.2.0", 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.0.4", 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: "18.2.0", ngImport: i0, type: MtxTooltipModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: MtxTooltipModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [