@angular/material 21.1.0 → 21.1.1

package/button/_m2-button.scss

@@ -16,8 +16,12 @@
     -2: 28px,
     -3: 24px,
   ), $scale);
-  $touch-target-display: if($scale < -1, none, block);
   $touch-target-size: 48px;
+  $touch-target-display: block;
+
+  @if ($scale < -1) {
+    $touch-target-display: none;
+  }
 
   @return (
     base: (

package/button/_m2-fab.scss

@@ -17,6 +17,11 @@
   $disabled-container : m3-utils.color-with-opacity(map.get($system, on-surface), 12%);
   $density-scale: theming.clamp-density(map.get($system, density-scale), -3);
   $touch-target-size: 48px;
+  $touch-target-display: block;
+
+  @if ($density-scale < -1) {
+    $touch-target-display: none;
+  }
 
   @return (
     base: (
@@ -70,8 +75,8 @@
       fab-extended-label-text-weight: map.get($system, label-small-weight)
     ),
     density: (
-      fab-small-touch-target-display: if($density-scale < -1, none, block),
-      fab-touch-target-display: if($density-scale < -1, none, block),
+      fab-small-touch-target-display: $touch-target-display,
+      fab-touch-target-display: $touch-target-display,
     ),
   );
 }

package/button/_m2-icon-button.scss

@@ -6,6 +6,11 @@
 @function get-tokens($theme) {
   $system: m2-utils.get-system($theme);
   $density-scale: theming.clamp-density(map.get($system, density-scale), -3);
+  $touch-target-display: block;
+
+  @if ($density-scale < -1) {
+    $touch-target-display: none;
+  }
 
   @return (
     base: (
@@ -27,7 +32,7 @@
     ),
     typography: (),
     density: (
-      icon-button-touch-target-display: if($density-scale < -1, none, block),
+      icon-button-touch-target-display: $touch-target-display,
       icon-button-state-layer-size: map.get((
         0: 48px,
         -1: 44px,

package/checkbox/_m2-checkbox.scss

@@ -6,6 +6,11 @@
 @function get-tokens($theme) {
   $system: m2-utils.get-system($theme);
   $density-scale: theming.clamp-density(map.get($system, density-scale), -3);
+  $touch-target-display: block;
+
+  @if ($density-scale < -1) {
+    $touch-target-display: none;
+  }
 
   @return (
     base: (
@@ -28,7 +33,7 @@
       checkbox-label-text-weight: map.get($system, body-medium-weight)
     ),
     density: (
-      checkbox-touch-target-display: if($density-scale < -1, none, block),
+      checkbox-touch-target-display: $touch-target-display,
       checkbox-state-layer-size: map.get((
         0: 40px,
         -1: 36px,

package/core/m2/_theming.scss

@@ -84,7 +84,13 @@
 
   // We cast the $hue to a string, because some hues starting with a number, like `700-contrast`,
   // might be inferred as numbers by Sass. Casting them to string fixes the map lookup.
-  $color: if(map.has-key($palette, $hue), map.get($palette, $hue), map.get($palette, $hue + ''));
+  $color: null;
+
+  @if (map.has-key($palette, $hue)) {
+    $color: map.get($palette, $hue);
+  } @else {
+    $color: map.get($palette, $hue + '');
+  }
 
   @if ($opacity == null) {
     @return $color;
@@ -121,12 +127,15 @@
     warn: $warn,
   );
 
-  $sys-color: if(
-      $is-dark,
-      m2.md-sys-color-values-dark($palettes),
-      m2.md-sys-color-values-light($palettes));
   $sys-state: m2.md-sys-state-values();
   $sys-typography: m2.md-sys-typescale-values($typography);
+  $sys-color: null;
+
+  @if ($is-dark) {
+    $sys-color: m2.md-sys-color-values-dark($palettes);
+  } @else {
+    $sys-color: m2.md-sys-color-values-light($palettes);
+  }
 
   $system: (density-scale: $density-scale);
   @each $map in ($sys-color, $sys-state, $sys-typography) {
@@ -139,16 +148,22 @@
 // Creates a color configuration from the specified
 // primary, accent and warn palettes.
 @function _mat-create-color-config($primary, $accent, $warn: null, $is-dark) {
-  $warn: if($warn != null, $warn, define-palette(palette.$red-palette));
-  $foreground:
-      if($is-dark, palette.$dark-theme-foreground-palette, palette.$light-theme-foreground-palette);
-  $background:
-      if($is-dark, palette.$dark-theme-background-palette, palette.$light-theme-background-palette);
+  $foreground: null;
+  $background: null;
+  $warn-palette: $warn or define-palette(palette.$red-palette);
+
+  @if ($is-dark) {
+    $foreground: palette.$dark-theme-foreground-palette;
+    $background: palette.$dark-theme-background-palette;
+  } @else {
+    $foreground: palette.$light-theme-foreground-palette;
+    $background: palette.$light-theme-background-palette;
+  }
 
   @return (
     primary: $primary,
     accent: $accent,
-    warn: $warn,
+    warn: $warn-palette,
     is-dark: $is-dark,
     foreground: $foreground,
     background: $background,

package/core/m2/_typography-utils.scss

@@ -73,5 +73,9 @@
   }
 
   // Guard against unquoting non-string values, because it's deprecated.
-  @return if(meta.type-of($font-family) == string, string.unquote($font-family), $font-family);
+  @if (meta.type-of($font-family) == string) {
+    $font-family: string.unquote($font-family);
+  }
+
+  @return $font-family;
 }

package/core/style/_elevation.scss

@@ -159,8 +159,12 @@ $prefix: 'mat-elevation-z';
   $umbra-z-value: map.get($_umbra-map, $zValue);
   $penumbra-z-value: map.get($_penumbra-map, $zValue);
   $ambient-z-value: map.get($_ambient-map, $zValue);
+  $color-opacity: 1;
+
+  @if ($opacity != null) {
+    $color-opacity: $opacity;
+  }
 
-  $color-opacity: if($opacity != null, $opacity, 1);
   $umbra-color: _compute-color-opacity($shadow-color, $_umbra-opacity * $color-opacity);
   $penumbra-color: _compute-color-opacity($shadow-color, $_penumbra-opacity * $color-opacity);
   $ambient-color: _compute-color-opacity($shadow-color, $_ambient-opacity * $color-opacity);

package/core/style/_validation.scss

@@ -11,7 +11,10 @@
   @if ($result == list and list.index($types, map) and list.length($obj) == 0) {
     @return null;
   }
-  @return if(list.index($types, $result), null, $result);
+  @if (list.index($types, $result)) {
+    @return null;
+  }
+  @return $result;
 }
 
 /// Validates that a list contains only values from the allowed list of values.
@@ -25,7 +28,10 @@
       $invalid: list.append($invalid, $element);
     }
   }
-  @return if(list.length($invalid) > 0, $invalid, null);
+  @if (list.length($invalid) > 0) {
+    @return $invalid;
+  }
+  @return null;
 }
 
 /// Validates that a list contains all values from the required list of values.
@@ -39,5 +45,8 @@
       $invalid: list.append($invalid, $element);
     }
   }
-  @return if(list.length($invalid) > 0, $invalid, null);
+  @if (list.length($invalid) > 0) {
+    @return $invalid;
+  }
+  @return null;
 }

package/core/theming/_color-api-backwards-compatibility.scss

@@ -24,7 +24,11 @@
 $_overrides-only: true;
 
 @mixin _color-variant-styles($theme, $color-variant) {
-  $secondary-when-primary: if($color-variant == primary, secondary, $color-variant);
+  $secondary-when-primary: $color-variant;
+
+  @if ($color-variant == primary) {
+    $secondary-when-primary: secondary;
+  }
 
   & {
     @if ($color-variant != primary) {

package/core/theming/_inspection.scss

@@ -31,7 +31,10 @@ $_typography-properties: (font, font-family, line-height, font-size, letter-spac
 @function _validate-theme-object($theme) {
   $err: validation.validate-type($theme, 'map') or
         map.get($theme, $internals, theme-version) == null;
-  @return if($err, true, null);
+  @if ($err) {
+    @return true;
+  }
+  @return null;
 }
 
 /// Gets the version number of a theme object. A theme that is not a valid versioned theme object is
@@ -40,7 +43,12 @@ $_typography-properties: (font, font-family, line-height, font-size, letter-spac
 /// @return {Number} The version number of the theme (0 if unknown).
 @function get-theme-version($theme) {
   $err: _validate-theme-object($theme);
-  @return if($err, 0, map.get($theme, $internals, theme-version) or 0);
+
+  @if ($err) {
+    @return 0;
+  }
+
+  @return map.get($theme, $internals, theme-version) or 0;
 }
 
 /// Gets the type of theme represented by a theme object (light or dark).
@@ -99,10 +107,10 @@ $_typography-properties: (font, font-family, line-height, font-size, letter-spac
     @if $args-count < 2 or $args-count > 3 {
       @error 'Expected either 2 or 3 arguments when working with an M3 theme. Got: #{$args-count}';
     }
-    @return if($args-count == 2,
-      _get-theme-role-color($theme, $args...),
-      _get-theme-palette-color($theme, $args...)
-    );
+    @if ($args-count == 2) {
+      @return _get-theme-role-color($theme, $args...);
+    }
+    @return _get-theme-palette-color($theme, $args...);
   }
 
   @error 'Unrecognized theme version: #{$version}';

package/core/theming/_m2-inspection.scss

@@ -49,7 +49,10 @@ $_typography-properties: (font, font-family, line-height, font-size, letter-spac
   }
   $internal: map.get($theme, $_internals, m2-config);
   $theme: map.remove($theme, $_internals);
-  @return if(_is-error-theme($theme), $internal, $theme);
+  @if (_is-error-theme($theme)) {
+    @return $internal;
+  }
+  @return $theme;
 }
 
 /// Checks whether the given theme contains error values.
@@ -99,7 +102,10 @@ $_typography-properties: (font, font-family, line-height, font-size, letter-spac
   @if theme-has($colors, color) {
     $colors: m2-theming.get-color-config($colors);
   }
-  @return if(map.get($colors, is-dark), dark, light);
+  @if (map.get($colors, is-dark)) {
+    @return dark;
+  }
+  @return light;
 }
 
 /// Gets a color from a theme object. This function can take between 2 and 4 arguments. The first

package/core/theming/_theming.scss

@@ -45,7 +45,10 @@ $private-internal-name: _mat-theming-internals-do-not-access;
       $result: map.set($result, $key, $value);
     }
   }
-  @return if($result == (), null, $result);
+  @if ($result == ()) {
+    @return null;
+  }
+  @return $result;
 }
 
 // Checks whether the given value resolves to a theme object. Theme objects are always

package/core/tokens/_m3-tokens.scss

@@ -39,9 +39,13 @@
 }
 
 @function get-sys-color($type, $palettes, $prefix) {
-  $sys-color: if($type == dark,
-    m3.md-sys-color-values-dark($palettes),
-    m3.md-sys-color-values-light($palettes));
+  $sys-color: null;
+
+  @if ($type == dark) {
+    $sys-color: m3.md-sys-color-values-dark($palettes);
+  } @else {
+    $sys-color: m3.md-sys-color-values-light($palettes);
+  }
 
   @if (sass-utils.$use-system-color-variables) {
     $var-values: ();

package/core/tokens/_system.scss

@@ -347,10 +347,14 @@
 
   $color: map.get($config, color);
   @if (m2-inspection.theme-has($theme-config, color)) {
-    $system-colors: if(map.get($color, is-dark),
-      m2.md-sys-color-values-dark($color),
-      m2.md-sys-color-values-light($color),
-    );
+    $system-colors: null;
+
+    @if (map.get($color, is-dark)) {
+      $system-colors: m2.md-sys-color-values-dark($color);
+    } @else {
+      $system-colors: m2.md-sys-color-values-light($color);
+    }
+
     @include _define-m2-system-vars($system-colors, $overrides);
 
     $shadow: map.get($theme-config, _mat-system, shadow);

package/core/tokens/_token-utils.scss

@@ -90,8 +90,13 @@
 
     @each $config in $namespace-configs {
       $namespace: map.get($config, namespace);
-      $prefix: if(map.has-key($config, prefix), map.get($config, prefix), '');
       $tokens: map.get(map.get($config, tokens), all);
+      $prefix: '';
+
+      @if (map.has-key($config, prefix)) {
+        $prefix: map.get($config, prefix);
+      }
+
       @each $name, $value in $tokens {
         $prefixed-name: $prefix + $name;
         $all-names: list.append($all-names, $prefixed-name, $separator: comma);

package/core/typography/_versioning.scss

@@ -82,9 +82,8 @@
       body-2: map.get($config, body-1),
       button: map.get($config, button),
       caption: map.get($config, caption),
-      overline: if(map.get($config, overline), map.get($config, overline),
-        m2-typography.define-typography-level(12px, 32px, 500)
-      )
+      overline:
+        map.get($config, overline) or m2-typography.define-typography-level(12px, 32px, 500),
     );
   }
   @return $config;

package/fesm2022/_tooltip-chunk.mjs

@@ -2,9 +2,8 @@ import { takeUntil } from 'rxjs/operators';
 import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
 import { ESCAPE, hasModifierKey } from '@angular/cdk/keycodes';
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, Injector, ElementRef, NgZone, ViewContainerRef, afterNextRender, DOCUMENT, Directive, Input, ChangeDetectorRef, Component, ViewEncapsulation, ChangeDetectionStrategy, ViewChild } from '@angular/core';
-import { NgClass } from '@angular/common';
-import { normalizePassiveListenerOptions, Platform } from '@angular/cdk/platform';
+import { InjectionToken, inject, Injector, ElementRef, NgZone, ViewContainerRef, DOCUMENT, Renderer2, afterNextRender, Directive, Input, ChangeDetectorRef, Component, ViewEncapsulation, ChangeDetectionStrategy, ViewChild } from '@angular/core';
+import { Platform } from '@angular/cdk/platform';
 import { AriaDescriber, FocusMonitor } from '@angular/cdk/a11y';
 import { Directionality } from '@angular/cdk/bidi';
 import { createRepositionScrollStrategy, ScrollDispatcher, createFlexibleConnectedPositionStrategy, createOverlayRef } from '@angular/cdk/overlay';
@@ -36,9 +35,9 @@ const MAT_TOOLTIP_DEFAULT_OPTIONS = new InjectionToken('mat-tooltip-default-opti
 });
 const TOOLTIP_PANEL_CLASS = 'mat-mdc-tooltip-panel';
 const PANEL_CLASS = 'tooltip-panel';
-const passiveListenerOptions = normalizePassiveListenerOptions({
+const passiveListenerOptions = {
   passive: true
-});
+};
 const MIN_VIEWPORT_TOOLTIP_THRESHOLD = 8;
 const UNBOUNDED_ANCHOR_GAP = 8;
 const MIN_HEIGHT = 24;
@@ -53,6 +52,8 @@ class MatTooltip {
   _injector = inject(Injector);
   _viewContainerRef = inject(ViewContainerRef);
   _mediaMatcher = inject(MediaMatcher);
+  _document = inject(DOCUMENT);
+  _renderer = inject(Renderer2);
   _animationsDisabled = _animationsDisabled();
   _defaultOptions = inject(MAT_TOOLTIP_DEFAULT_OPTIONS, {
     optional: true
@@ -151,7 +152,7 @@ class MatTooltip {
       this._setTooltipClass(this._tooltipClass);
     }
   }
-  _passiveListeners = [];
+  _eventCleanups = [];
   _touchstartTimeout = null;
   _destroyed = new Subject();
   _isDestroyed = false;
@@ -195,10 +196,8 @@ class MatTooltip {
       this._overlayRef.dispose();
       this._tooltipInstance = null;
     }
-    this._passiveListeners.forEach(([event, listener]) => {
-      nativeElement.removeEventListener(event, listener, passiveListenerOptions);
-    });
-    this._passiveListeners.length = 0;
+    this._eventCleanups.forEach(cleanup => cleanup());
+    this._eventCleanups.length = 0;
     this._destroyed.next();
     this._destroyed.complete();
     this._isDestroyed = true;
@@ -407,7 +406,7 @@ class MatTooltip {
   }
   _setTooltipClass(tooltipClass) {
     if (this._tooltipInstance) {
-      this._tooltipInstance.tooltipClass = tooltipClass;
+      this._tooltipInstance.tooltipClass = tooltipClass instanceof Set ? Array.from(tooltipClass) : tooltipClass;
       this._tooltipInstance._markForCheck();
     }
   }
@@ -457,21 +456,21 @@ class MatTooltip {
     }
   }
   _setupPointerEnterEventsIfNeeded() {
-    if (this._disabled || !this.message || !this._viewInitialized || this._passiveListeners.length) {
+    if (this._disabled || !this.message || !this._viewInitialized || this._eventCleanups.length) {
       return;
     }
     if (!this._isTouchPlatform()) {
-      this._passiveListeners.push(['mouseenter', event => {
+      this._addListener('mouseenter', event => {
         this._setupPointerExitEventsIfNeeded();
         let point = undefined;
         if (event.x !== undefined && event.y !== undefined) {
           point = event;
         }
         this.show(undefined, point);
-      }]);
+      });
     } else if (this.touchGestures !== 'off') {
       this._disableNativeGesturesIfNecessary();
-      this._passiveListeners.push(['touchstart', event => {
+      this._addListener('touchstart', event => {
         const touch = event.targetTouches?.[0];
         const origin = touch ? {
           x: touch.clientX,
@@ -486,23 +485,30 @@ class MatTooltip {
           this._touchstartTimeout = null;
           this.show(undefined, origin);
         }, this._defaultOptions?.touchLongPressShowDelay ?? DEFAULT_LONGPRESS_DELAY);
-      }]);
+      });
     }
-    this._addListeners(this._passiveListeners);
   }
   _setupPointerExitEventsIfNeeded() {
     if (this._pointerExitEventsInitialized) {
       return;
     }
     this._pointerExitEventsInitialized = true;
-    const exitListeners = [];
     if (!this._isTouchPlatform()) {
-      exitListeners.push(['mouseleave', event => {
+      this._addListener('mouseleave', event => {
         const newTarget = event.relatedTarget;
         if (!newTarget || !this._overlayRef?.overlayElement.contains(newTarget)) {
           this.hide();
         }
-      }], ['wheel', event => this._wheelListener(event)]);
+      });
+      this._addListener('wheel', event => {
+        if (this._isTooltipVisible()) {
+          const elementUnderPointer = this._document.elementFromPoint(event.clientX, event.clientY);
+          const element = this._elementRef.nativeElement;
+          if (elementUnderPointer !== element && !element.contains(elementUnderPointer)) {
+            this.hide();
+          }
+        }
+      });
     } else if (this.touchGestures !== 'off') {
       this._disableNativeGesturesIfNecessary();
       const touchendListener = () => {
@@ -511,15 +517,12 @@ class MatTooltip {
         }
         this.hide(this._defaultOptions?.touchendHideDelay);
       };
-      exitListeners.push(['touchend', touchendListener], ['touchcancel', touchendListener]);
+      this._addListener('touchend', touchendListener);
+      this._addListener('touchcancel', touchendListener);
     }
-    this._addListeners(exitListeners);
-    this._passiveListeners.push(...exitListeners);
   }
-  _addListeners(listeners) {
-    listeners.forEach(([event, listener]) => {
-      this._elementRef.nativeElement.addEventListener(event, listener, passiveListenerOptions);
-    });
+  _addListener(name, listener) {
+    this._eventCleanups.push(this._renderer.listen(this._elementRef.nativeElement, name, listener, passiveListenerOptions));
   }
   _isTouchPlatform() {
     if (this._platform.IOS || this._platform.ANDROID) {
@@ -529,15 +532,6 @@ class MatTooltip {
     }
     return !!this._defaultOptions?.detectHoverCapability && this._mediaMatcher.matchMedia('(any-hover: none)').matches;
   }
-  _wheelListener(event) {
-    if (this._isTooltipVisible()) {
-      const elementUnderPointer = this._injector.get(DOCUMENT).elementFromPoint(event.clientX, event.clientY);
-      const element = this._elementRef.nativeElement;
-      if (elementUnderPointer !== element && !element.contains(elementUnderPointer)) {
-        this.hide();
-      }
-    }
-  }
   _disableNativeGesturesIfNecessary() {
     const gestures = this.touchGestures;
     if (gestures !== 'off') {
@@ -809,14 +803,8 @@ class TooltipComponent {
       static: true
     }],
     ngImport: i0,
-    template: "<div\n  #tooltip\n  class=\"mdc-tooltip mat-mdc-tooltip\"\n  [ngClass]=\"tooltipClass\"\n  (animationend)=\"_handleAnimationEnd($event)\"\n  [class.mdc-tooltip--multiline]=\"_isMultiline\">\n  <div class=\"mat-mdc-tooltip-surface mdc-tooltip__surface\">{{message}}</div>\n</div>\n",
+    template: "<div\n  #tooltip\n  class=\"mdc-tooltip mat-mdc-tooltip\"\n  [class]=\"tooltipClass\"\n  (animationend)=\"_handleAnimationEnd($event)\"\n  [class.mdc-tooltip--multiline]=\"_isMultiline\">\n  <div class=\"mat-mdc-tooltip-surface mdc-tooltip__surface\">{{message}}</div>\n</div>\n",
     styles: [".mat-mdc-tooltip{position:relative;transform:scale(0);display:inline-flex}.mat-mdc-tooltip::before{content:\"\";top:0;right:0;bottom:0;left:0;z-index:-1;position:absolute}.mat-mdc-tooltip-panel-below .mat-mdc-tooltip::before{top:-8px}.mat-mdc-tooltip-panel-above .mat-mdc-tooltip::before{bottom:-8px}.mat-mdc-tooltip-panel-right .mat-mdc-tooltip::before{left:-8px}.mat-mdc-tooltip-panel-left .mat-mdc-tooltip::before{right:-8px}.mat-mdc-tooltip._mat-animation-noopable{animation:none;transform:scale(1)}.mat-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(--mat-tooltip-container-color, var(--mat-sys-inverse-surface));color:var(--mat-tooltip-supporting-text-color, var(--mat-sys-inverse-on-surface));border-radius:var(--mat-tooltip-container-shape, var(--mat-sys-corner-extra-small));font-family:var(--mat-tooltip-supporting-text-font, var(--mat-sys-body-small-font));font-size:var(--mat-tooltip-supporting-text-size, var(--mat-sys-body-small-size));font-weight:var(--mat-tooltip-supporting-text-weight, var(--mat-sys-body-small-weight));line-height:var(--mat-tooltip-supporting-text-line-height, var(--mat-sys-body-small-line-height));letter-spacing:var(--mat-tooltip-supporting-text-tracking, var(--mat-sys-body-small-tracking))}.mat-mdc-tooltip-surface::before{position:absolute;box-sizing:border-box;width:100%;height:100%;top:0;left:0;border:1px solid rgba(0,0,0,0);border-radius:inherit;content:\"\";pointer-events:none}.mdc-tooltip--multiline .mat-mdc-tooltip-surface{text-align:left}[dir=rtl] .mdc-tooltip--multiline .mat-mdc-tooltip-surface{text-align:right}.mat-mdc-tooltip-panel{line-height:normal}.mat-mdc-tooltip-panel.mat-mdc-tooltip-panel-non-interactive{pointer-events:none}@keyframes mat-mdc-tooltip-show{0%{opacity:0;transform:scale(0.8)}100%{opacity:1;transform:scale(1)}}@keyframes mat-mdc-tooltip-hide{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(0.8)}}.mat-mdc-tooltip-show{animation:mat-mdc-tooltip-show 150ms cubic-bezier(0, 0, 0.2, 1) forwards}.mat-mdc-tooltip-hide{animation:mat-mdc-tooltip-hide 75ms cubic-bezier(0.4, 0, 1, 1) forwards}\n"],
-    dependencies: [{
-      kind: "directive",
-      type: NgClass,
-      selector: "[ngClass]",
-      inputs: ["class", "ngClass"]
-    }],
     changeDetection: i0.ChangeDetectionStrategy.OnPush,
     encapsulation: i0.ViewEncapsulation.None
   });
@@ -836,8 +824,7 @@ i0.ɵɵngDeclareClassMetadata({
         '(mouseleave)': '_handleMouseLeave($event)',
         'aria-hidden': 'true'
       },
-      imports: [NgClass],
-      template: "<div\n  #tooltip\n  class=\"mdc-tooltip mat-mdc-tooltip\"\n  [ngClass]=\"tooltipClass\"\n  (animationend)=\"_handleAnimationEnd($event)\"\n  [class.mdc-tooltip--multiline]=\"_isMultiline\">\n  <div class=\"mat-mdc-tooltip-surface mdc-tooltip__surface\">{{message}}</div>\n</div>\n",
+      template: "<div\n  #tooltip\n  class=\"mdc-tooltip mat-mdc-tooltip\"\n  [class]=\"tooltipClass\"\n  (animationend)=\"_handleAnimationEnd($event)\"\n  [class.mdc-tooltip--multiline]=\"_isMultiline\">\n  <div class=\"mat-mdc-tooltip-surface mdc-tooltip__surface\">{{message}}</div>\n</div>\n",
       styles: [".mat-mdc-tooltip{position:relative;transform:scale(0);display:inline-flex}.mat-mdc-tooltip::before{content:\"\";top:0;right:0;bottom:0;left:0;z-index:-1;position:absolute}.mat-mdc-tooltip-panel-below .mat-mdc-tooltip::before{top:-8px}.mat-mdc-tooltip-panel-above .mat-mdc-tooltip::before{bottom:-8px}.mat-mdc-tooltip-panel-right .mat-mdc-tooltip::before{left:-8px}.mat-mdc-tooltip-panel-left .mat-mdc-tooltip::before{right:-8px}.mat-mdc-tooltip._mat-animation-noopable{animation:none;transform:scale(1)}.mat-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(--mat-tooltip-container-color, var(--mat-sys-inverse-surface));color:var(--mat-tooltip-supporting-text-color, var(--mat-sys-inverse-on-surface));border-radius:var(--mat-tooltip-container-shape, var(--mat-sys-corner-extra-small));font-family:var(--mat-tooltip-supporting-text-font, var(--mat-sys-body-small-font));font-size:var(--mat-tooltip-supporting-text-size, var(--mat-sys-body-small-size));font-weight:var(--mat-tooltip-supporting-text-weight, var(--mat-sys-body-small-weight));line-height:var(--mat-tooltip-supporting-text-line-height, var(--mat-sys-body-small-line-height));letter-spacing:var(--mat-tooltip-supporting-text-tracking, var(--mat-sys-body-small-tracking))}.mat-mdc-tooltip-surface::before{position:absolute;box-sizing:border-box;width:100%;height:100%;top:0;left:0;border:1px solid rgba(0,0,0,0);border-radius:inherit;content:\"\";pointer-events:none}.mdc-tooltip--multiline .mat-mdc-tooltip-surface{text-align:left}[dir=rtl] .mdc-tooltip--multiline .mat-mdc-tooltip-surface{text-align:right}.mat-mdc-tooltip-panel{line-height:normal}.mat-mdc-tooltip-panel.mat-mdc-tooltip-panel-non-interactive{pointer-events:none}@keyframes mat-mdc-tooltip-show{0%{opacity:0;transform:scale(0.8)}100%{opacity:1;transform:scale(1)}}@keyframes mat-mdc-tooltip-hide{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(0.8)}}.mat-mdc-tooltip-show{animation:mat-mdc-tooltip-show 150ms cubic-bezier(0, 0, 0.2, 1) forwards}.mat-mdc-tooltip-hide{animation:mat-mdc-tooltip-hide 75ms cubic-bezier(0.4, 0, 1, 1) forwards}\n"]
     }]
   }],