@angular/material 21.1.1 → 21.2.0-next.0

package/button/_m2-button.scss

@@ -16,12 +16,8 @@
     -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,11 +17,6 @@
   $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: (
@@ -75,8 +70,8 @@
       fab-extended-label-text-weight: map.get($system, label-small-weight)
     ),
     density: (
-      fab-small-touch-target-display: $touch-target-display,
-      fab-touch-target-display: $touch-target-display,
+      fab-small-touch-target-display: if($density-scale < -1, none, block),
+      fab-touch-target-display: if($density-scale < -1, none, block),
     ),
   );
 }

package/button/_m2-icon-button.scss

@@ -6,11 +6,6 @@
 @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: (
@@ -32,7 +27,7 @@
     ),
     typography: (),
     density: (
-      icon-button-touch-target-display: $touch-target-display,
+      icon-button-touch-target-display: if($density-scale < -1, none, block),
       icon-button-state-layer-size: map.get((
         0: 48px,
         -1: 44px,

package/checkbox/_m2-checkbox.scss

@@ -6,11 +6,6 @@
 @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: (
@@ -33,7 +28,7 @@
       checkbox-label-text-weight: map.get($system, body-medium-weight)
     ),
     density: (
-      checkbox-touch-target-display: $touch-target-display,
+      checkbox-touch-target-display: if($density-scale < -1, none, block),
       checkbox-state-layer-size: map.get((
         0: 40px,
         -1: 36px,

package/core/m2/_theming.scss

@@ -84,13 +84,7 @@
 
   // 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: null;
-
-  @if (map.has-key($palette, $hue)) {
-    $color: map.get($palette, $hue);
-  } @else {
-    $color: map.get($palette, $hue + '');
-  }
+  $color: if(map.has-key($palette, $hue), map.get($palette, $hue), map.get($palette, $hue + ''));
 
   @if ($opacity == null) {
     @return $color;
@@ -127,15 +121,12 @@
     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) {
@@ -148,22 +139,16 @@
 // Creates a color configuration from the specified
 // primary, accent and warn palettes.
 @function _mat-create-color-config($primary, $accent, $warn: null, $is-dark) {
-  $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;
-  }
+  $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);
 
   @return (
     primary: $primary,
     accent: $accent,
-    warn: $warn-palette,
+    warn: $warn,
     is-dark: $is-dark,
     foreground: $foreground,
     background: $background,

package/core/m2/_typography-utils.scss

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

package/core/style/_elevation.scss

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

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

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

package/core/theming/_inspection.scss

@@ -31,10 +31,7 @@ $_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;
-  @if ($err) {
-    @return true;
-  }
-  @return null;
+  @return if($err, true, null);
 }
 
 /// Gets the version number of a theme object. A theme that is not a valid versioned theme object is
@@ -43,12 +40,7 @@ $_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);
-
-  @if ($err) {
-    @return 0;
-  }
-
-  @return map.get($theme, $internals, theme-version) or 0;
+  @return if($err, 0, map.get($theme, $internals, theme-version) or 0);
 }
 
 /// Gets the type of theme represented by a theme object (light or dark).
@@ -107,10 +99,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}';
     }
-    @if ($args-count == 2) {
-      @return _get-theme-role-color($theme, $args...);
-    }
-    @return _get-theme-palette-color($theme, $args...);
+    @return if($args-count == 2,
+      _get-theme-role-color($theme, $args...),
+      _get-theme-palette-color($theme, $args...)
+    );
   }
 
   @error 'Unrecognized theme version: #{$version}';

package/core/theming/_m2-inspection.scss

@@ -49,10 +49,7 @@ $_typography-properties: (font, font-family, line-height, font-size, letter-spac
   }
   $internal: map.get($theme, $_internals, m2-config);
   $theme: map.remove($theme, $_internals);
-  @if (_is-error-theme($theme)) {
-    @return $internal;
-  }
-  @return $theme;
+  @return if(_is-error-theme($theme), $internal, $theme);
 }
 
 /// Checks whether the given theme contains error values.
@@ -102,10 +99,7 @@ $_typography-properties: (font, font-family, line-height, font-size, letter-spac
   @if theme-has($colors, color) {
     $colors: m2-theming.get-color-config($colors);
   }
-  @if (map.get($colors, is-dark)) {
-    @return dark;
-  }
-  @return light;
+  @return if(map.get($colors, is-dark), dark, 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,10 +45,7 @@ $private-internal-name: _mat-theming-internals-do-not-access;
       $result: map.set($result, $key, $value);
     }
   }
-  @if ($result == ()) {
-    @return null;
-  }
-  @return $result;
+  @return if($result == (), null, $result);
 }
 
 // Checks whether the given value resolves to a theme object. Theme objects are always

package/core/tokens/_m3-tokens.scss

@@ -39,13 +39,9 @@
 }
 
 @function get-sys-color($type, $palettes, $prefix) {
-  $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);
-  }
+  $sys-color: if($type == dark,
+    m3.md-sys-color-values-dark($palettes),
+    m3.md-sys-color-values-light($palettes));
 
   @if (sass-utils.$use-system-color-variables) {
     $var-values: ();

package/core/tokens/_system.scss

@@ -347,14 +347,10 @@
 
   $color: map.get($config, color);
   @if (m2-inspection.theme-has($theme-config, 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);
-    }
-
+    $system-colors: if(map.get($color, is-dark),
+      m2.md-sys-color-values-dark($color),
+      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,13 +90,8 @@
 
     @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,8 +82,9 @@
       body-2: map.get($config, body-1),
       button: map.get($config, button),
       caption: map.get($config, caption),
-      overline:
-        map.get($config, overline) or m2-typography.define-typography-level(12px, 32px, 500),
+      overline: if(map.get($config, overline), map.get($config, overline),
+        m2-typography.define-typography-level(12px, 32px, 500)
+      )
     );
   }
   @return $config;

package/fesm2022/_tooltip-chunk.mjs

@@ -2,8 +2,9 @@ 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, DOCUMENT, Renderer2, afterNextRender, Directive, Input, ChangeDetectorRef, Component, ViewEncapsulation, ChangeDetectionStrategy, ViewChild } from '@angular/core';
-import { Platform } from '@angular/cdk/platform';
+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 { AriaDescriber, FocusMonitor } from '@angular/cdk/a11y';
 import { Directionality } from '@angular/cdk/bidi';
 import { createRepositionScrollStrategy, ScrollDispatcher, createFlexibleConnectedPositionStrategy, createOverlayRef } from '@angular/cdk/overlay';
@@ -35,9 +36,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 = {
+const passiveListenerOptions = normalizePassiveListenerOptions({
   passive: true
-};
+});
 const MIN_VIEWPORT_TOOLTIP_THRESHOLD = 8;
 const UNBOUNDED_ANCHOR_GAP = 8;
 const MIN_HEIGHT = 24;
@@ -52,8 +53,6 @@ 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
@@ -152,7 +151,7 @@ class MatTooltip {
       this._setTooltipClass(this._tooltipClass);
     }
   }
-  _eventCleanups = [];
+  _passiveListeners = [];
   _touchstartTimeout = null;
   _destroyed = new Subject();
   _isDestroyed = false;
@@ -196,8 +195,10 @@ class MatTooltip {
       this._overlayRef.dispose();
       this._tooltipInstance = null;
     }
-    this._eventCleanups.forEach(cleanup => cleanup());
-    this._eventCleanups.length = 0;
+    this._passiveListeners.forEach(([event, listener]) => {
+      nativeElement.removeEventListener(event, listener, passiveListenerOptions);
+    });
+    this._passiveListeners.length = 0;
     this._destroyed.next();
     this._destroyed.complete();
     this._isDestroyed = true;
@@ -406,7 +407,7 @@ class MatTooltip {
   }
   _setTooltipClass(tooltipClass) {
     if (this._tooltipInstance) {
-      this._tooltipInstance.tooltipClass = tooltipClass instanceof Set ? Array.from(tooltipClass) : tooltipClass;
+      this._tooltipInstance.tooltipClass = tooltipClass;
       this._tooltipInstance._markForCheck();
     }
   }
@@ -456,21 +457,21 @@ class MatTooltip {
     }
   }
   _setupPointerEnterEventsIfNeeded() {
-    if (this._disabled || !this.message || !this._viewInitialized || this._eventCleanups.length) {
+    if (this._disabled || !this.message || !this._viewInitialized || this._passiveListeners.length) {
       return;
     }
     if (!this._isTouchPlatform()) {
-      this._addListener('mouseenter', event => {
+      this._passiveListeners.push(['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._addListener('touchstart', event => {
+      this._passiveListeners.push(['touchstart', event => {
         const touch = event.targetTouches?.[0];
         const origin = touch ? {
           x: touch.clientX,
@@ -485,30 +486,23 @@ 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()) {
-      this._addListener('mouseleave', event => {
+      exitListeners.push(['mouseleave', event => {
         const newTarget = event.relatedTarget;
         if (!newTarget || !this._overlayRef?.overlayElement.contains(newTarget)) {
           this.hide();
         }
-      });
-      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();
-          }
-        }
-      });
+      }], ['wheel', event => this._wheelListener(event)]);
     } else if (this.touchGestures !== 'off') {
       this._disableNativeGesturesIfNecessary();
       const touchendListener = () => {
@@ -517,12 +511,15 @@ class MatTooltip {
         }
         this.hide(this._defaultOptions?.touchendHideDelay);
       };
-      this._addListener('touchend', touchendListener);
-      this._addListener('touchcancel', touchendListener);
+      exitListeners.push(['touchend', touchendListener], ['touchcancel', touchendListener]);
     }
+    this._addListeners(exitListeners);
+    this._passiveListeners.push(...exitListeners);
   }
-  _addListener(name, listener) {
-    this._eventCleanups.push(this._renderer.listen(this._elementRef.nativeElement, name, listener, passiveListenerOptions));
+  _addListeners(listeners) {
+    listeners.forEach(([event, listener]) => {
+      this._elementRef.nativeElement.addEventListener(event, listener, passiveListenerOptions);
+    });
   }
   _isTouchPlatform() {
     if (this._platform.IOS || this._platform.ANDROID) {
@@ -532,6 +529,15 @@ 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') {
@@ -803,8 +809,14 @@ class TooltipComponent {
       static: true
     }],
     ngImport: i0,
-    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",
+    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",
     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
   });
@@ -824,7 +836,8 @@ i0.ɵɵngDeclareClassMetadata({
         '(mouseleave)': '_handleMouseLeave($event)',
         'aria-hidden': 'true'
       },
-      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",
+      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",
       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"]
     }]
   }],