@ng-matero/extensions 18.0.3 → 18.1.1

package/tooltip/tooltip.scss

@@ -1,30 +1,11 @@
-@use '@material/theme/custom-properties' as mdc-custom-properties;
-@use '@material/tooltip/tooltip' as mdc-tooltip;
-@use '@material/tooltip/plain-tooltip-theme' as mdc-plain-tooltip-theme;
-@use '../core/tokens/m2/mdc/plain-tooltip' as m2-mdc-plain-tooltip;
-
-@include mdc-custom-properties.configure($emit-fallback-values: false, $emit-fallback-vars: false) {
-  $mdc-tooltip-token-slots: m2-mdc-plain-tooltip.get-token-slots();
-
-  // Add the MDC tooltip static styles.
-  @include mdc-tooltip.static-styles();
-
-  .mtx-mdc-tooltip {
-    // Add the official slots for the MDC tooltip.
-    @include mdc-plain-tooltip-theme.theme-styles($mdc-tooltip-token-slots);
-  }
-}
-
-// Fix tooltip' positioning when mat-tooltip and mtx-tooltip coexist.
-.mdc-tooltip.mat-mdc-tooltip,
-.mdc-tooltip.mtx-mdc-tooltip {
-  position: relative;
-}
+@use '../core/tokens/m2/mdc/plain-tooltip' as tokens-mdc-plain-tooltip;
+@use '../core/tokens/token-utils';
 
 .mtx-mdc-tooltip {
   // We don't use MDC's positioning so this has to be relative.
   position: relative;
   transform: scale(0);
+  display: inline-flex;
 
   // Increases the area of the tooltip so the user's pointer can go from the trigger directly to it.
   &::before {
@@ -56,23 +37,74 @@
     }
   }
 
-  &._mtx-animation-noopable {
+  &._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;
+
+  // TODO(crisbeto): these styles aren't necessary, but they were present in
+  // MDC and removing them is likely to cause screenshot differences.
+  will-change: transform, opacity;
+
+  @include token-utils.use-tokens(
+    tokens-mdc-plain-tooltip.$prefix,
+    tokens-mdc-plain-tooltip.get-token-slots()
+  ) {
+    @include token-utils.create-token-slot(background-color, container-color);
+    @include token-utils.create-token-slot(color, supporting-text-color);
+    @include token-utils.create-token-slot(border-radius, container-shape);
+    @include token-utils.create-token-slot(font-family, supporting-text-font);
+    @include token-utils.create-token-slot(font-size, supporting-text-size);
+    @include token-utils.create-token-slot(font-weight, supporting-text-weight);
+    @include token-utils.create-token-slot(line-height, supporting-text-line-height);
+    @include token-utils.create-token-slot(letter-spacing, supporting-text-tracking);
+  }
+
+  // Renders an outline in high contrast mode.
+  &::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 & {
+    text-align: left;
+  }
+
+  [dir='rtl'] .mdc-tooltip--multiline & {
+    text-align: right;
+  }
+}
+
 // We need the additional specificity here, because it can be overridden by `.cdk-overlay-panel`.
 .mtx-mdc-tooltip-panel.mtx-mdc-tooltip-panel-non-interactive {
   pointer-events: none;
 }
 
-// TODO(crisbeto): we may be able to use MDC directly for these animations.
-
 @keyframes mtx-mdc-tooltip-show {
   0% {
     opacity: 0;
-    transform: scale(.8);
+    transform: scale(0.8);
   }
 
   100% {
@@ -89,14 +121,14 @@
 
   100% {
     opacity: 0;
-    transform: scale(.8);
+    transform: scale(0.8);
   }
 }
 
 .mtx-mdc-tooltip-show {
-  animation: mtx-mdc-tooltip-show 150ms cubic-bezier(0, 0, .2, 1) forwards;
+  animation: mtx-mdc-tooltip-show 150ms cubic-bezier(0, 0, 0.2, 1) forwards;
 }
 
 .mtx-mdc-tooltip-hide {
-  animation: mtx-mdc-tooltip-hide 75ms cubic-bezier(.4, 0, 1, 1) forwards;
+  animation: mtx-mdc-tooltip-hide 75ms cubic-bezier(0.4, 0, 1, 1) forwards;
 }

package/core/typography/_typography.scss

@@ -1,40 +0,0 @@
-@use '@material/typography' as mdc-typography;
-@use 'sass:map';
-
-/// Defines a typography level from the Material Design spec.
-/// @param {String} $font-size The font-size for this level.
-/// @param {String | Number} $line-height The line-height for this level.
-/// @param {String | Number} $font-weight The font-weight for this level.
-/// @param {String} $font-family The font-family for this level.
-/// @param {String} $letter-spacing The letter-spacing for this level.
-/// @returns {Map} A map representing the definition of this typographic level.
-@function define-typography-level(
-  $font-size,
-  $line-height: $font-size,
-  $font-weight: 400,
-  $font-family: null,
-  $letter-spacing: normal) {
-
-  @return (
-    font-size: $font-size,
-    line-height: $line-height,
-    font-weight: $font-weight,
-    font-family: $font-family,
-    letter-spacing: $letter-spacing
-  );
-}
-
-// Converts an MDC typography level config to an Angular Material one.
-@function typography-config-level-from-mdc($mdc-level, $font-family: null) {
-  $mdc-level-config: map.get(mdc-typography.$styles, $mdc-level);
-
-  // Explicitly default the font family to null since we'll apply it globally
-  // through the `define-typgraphy-config`/`define-legacy-typography-config`.
-  @return define-typography-level(
-    $font-family: $font-family,
-    $font-size: map.get($mdc-level-config, font-size),
-    $line-height: map.get($mdc-level-config, line-height),
-    $font-weight: map.get($mdc-level-config, font-weight),
-    $letter-spacing: map.get($mdc-level-config, letter-spacing)
-  );
-}