@ng-matero/extensions 20.1.1 → 20.2.1

package/tooltip/_m2-tooltip.scss

@@ -1,50 +1,25 @@
-@use '@angular/material' as mat;
+@use 'sass:map';
 @use '../core/tokens/m2-utils';
 
-// Tokens that can't be configured through Angular Material's current theming API,
-// but may be in a future version of the theming API.
-//
-// Tokens that are available in MDC, but not used in Angular Material should be mapped to `null`.
-// `null` indicates that we are intentionally choosing not to emit a slot or value for the token in
-// our CSS.
-@function get-unthemable-tokens() {
-  @return (
-    tooltip-container-shape: 4px,
-    tooltip-supporting-text-line-height: 16px,
-  );
-}
-
-// Tokens that can be configured through Angular Material's color theming API.
-@function get-color-tokens($theme) {
-
-  @return (
-    tooltip-container-color: mat.get-theme-color($theme, background, tooltip),
-    tooltip-supporting-text-color: #fff,
-  );
-}
+@function get-tokens($theme) {
+  $system: m2-utils.get-system($theme);
 
-// Tokens that can be configured through Angular Material's typography theming API.
-@function get-typography-tokens($theme) {
   @return (
-    tooltip-supporting-text-font: mat.get-theme-typography($theme, caption, font-family),
-    tooltip-supporting-text-size: mat.get-theme-typography($theme, caption, font-size),
-    tooltip-supporting-text-weight: mat.get-theme-typography($theme, caption, font-weight),
-    tooltip-supporting-text-tracking: mat.get-theme-typography($theme, caption, letter-spacing),
+    base: (
+      tooltip-container-shape: 4px,
+      tooltip-supporting-text-line-height: 16px,
+    ),
+    color: (
+      tooltip-container-color: map.get($system, inverse-surface),
+      tooltip-supporting-text-color: map.get($system, inverse-on-surface),
+    ),
+    typography: (
+      tooltip-supporting-text-font: map.get($system, body-small-font),
+      tooltip-supporting-text-size: map.get($system, body-small-size),
+      tooltip-supporting-text-weight: map.get($system, body-small-weight),
+      tooltip-supporting-text-tracking: map.get($system, body-small-tracking),
+    ),
+    density: (),
   );
 }
 
-// Tokens that can be configured through Angular Material's density theming API.
-@function get-density-tokens($theme) {
-  @return ();
-}
-
-// Combines the tokens generated by the above functions into a single map with placeholder values.
-// This is used to create token slots.
-@function get-token-slots() {
-  @return mat.private-deep-merge-all(
-      get-unthemable-tokens(),
-      get-color-tokens(m2-utils.$placeholder-color-config),
-      get-typography-tokens(m2-utils.$placeholder-typography-config),
-      get-density-tokens(m2-utils.$placeholder-density-config)
-  );
-}

package/tooltip/_tooltip-theme.scss

@@ -5,44 +5,39 @@
 @use './m3-tooltip';
 
 @mixin base($theme) {
+  $tokens: map.get(m2-tooltip.get-tokens($theme), base);
   @if mat.get-theme-version($theme) == 1 {
-    @include token-utils.create-token-values(map.get(m3-tooltip.get-tokens($theme), base));
-  } @else {
-    // Add default values for tokens not related to color, typography, or density.
-    @include mat.private-current-selector-or-root() {
-      @include token-utils.create-token-values-mixed(m2-tooltip.get-unthemable-tokens());
-    }
+    $tokens: map.get(m3-tooltip.get-tokens($theme), base);
   }
+
+  @include token-utils.values($tokens);
 }
 
 @mixin color($theme) {
+  $tokens: map.get(m2-tooltip.get-tokens($theme), color);
   @if mat.get-theme-version($theme) == 1 {
-    @include token-utils.create-token-values(map.get(m3-tooltip.get-tokens($theme), color));
-  } @else {
-    @include mat.private-current-selector-or-root() {
-      @include token-utils.create-token-values-mixed(m2-tooltip.get-color-tokens($theme));
-    }
+    $tokens: map.get(m3-tooltip.get-tokens($theme), color);
   }
+
+  @include token-utils.values($tokens);
 }
 
 @mixin typography($theme) {
+  $tokens: map.get(m2-tooltip.get-tokens($theme), typography);
   @if mat.get-theme-version($theme) == 1 {
-    @include token-utils.create-token-values(map.get(m3-tooltip.get-tokens($theme), typography));
-  } @else {
-    @include mat.private-current-selector-or-root() {
-      @include token-utils.create-token-values-mixed(m2-tooltip.get-typography-tokens($theme));
-    }
+    $tokens: map.get(m3-tooltip.get-tokens($theme), typography);
   }
+
+  @include token-utils.values($tokens);
 }
 
 @mixin density($theme) {
+  $tokens: map.get(m2-tooltip.get-tokens($theme), density);
   @if mat.get-theme-version($theme) == 1 {
-    @include token-utils.create-token-values(map.get(m3-tooltip.get-tokens($theme), density));
-  } @else {
-    @include mat.private-current-selector-or-root() {
-      @include token-utils.create-token-values-mixed(m2-tooltip.get-density-tokens($theme));
-    }
+    $tokens: map.get(m3-tooltip.get-tokens($theme), density);
   }
+
+  @include token-utils.values($tokens);
 }
 
 /// Defines the tokens that will be available in the `overrides` mixin and for docs extraction.

package/tooltip/index.d.ts

@@ -175,7 +175,7 @@ declare class MtxTooltip implements OnDestroy, AfterViewInit {
     private readonly _destroyed;
     /** Whether ngOnDestroyed has been called. */
     private _isDestroyed;
-    constructor(...args: unknown[]);
+    constructor();
     ngAfterViewInit(): void;
     /**
      * Dispose the tooltip when destroyed.
@@ -278,7 +278,7 @@ declare class TooltipComponent implements OnDestroy {
     private readonly _showAnimation;
     /** Name of the hide animation and the class that toggles it. */
     private readonly _hideAnimation;
-    constructor(...args: unknown[]);
+    constructor();
     /**
      * Shows the tooltip with an animation originating from the provided origin
      * @param delay Amount of milliseconds to the delay showing the tooltip.

package/core/tokens/_m2-tokens.scss

@@ -1,71 +0,0 @@
-@use 'sass:map';
-@use 'sass:meta';
-@use '@angular/material' as mat;
-@use '../../alert/m2-alert';
-@use '../../colorpicker/m2-colorpicker';
-@use '../../datetimepicker/m2-datetimepicker';
-@use '../../drawer/m2-drawer';
-@use '../../grid/m2-grid';
-@use '../../loader/m2-loader';
-@use '../../popover/m2-popover';
-@use '../../progress/m2-progress';
-@use '../../select/m2-select';
-@use '../../split/m2-split';
-@use '../../tooltip/m2-tooltip';
-
-/// Gets the tokens for the given theme, m2 tokens module, and theming system.
-/// @param {Map} $theme The Angular Material theme object to generate token values from.
-/// @param {String} $module The Sass module containing the token getter functions.
-/// @param {String} $system The theming system to get tokens for. Valid values are: unthemable,
-///     color, typography, density.
-/// @return {Map} The token map by calling the token getter for the given system in the given module
-///    with the given Angular Material theme. Token names are not fully-qualified.
-@function _get-tokens-for-module-and-system($theme, $module, $system) {
-  @if $system == unthemable {
-    @return meta.call(
-        meta.get-function(get-#{$system}-tokens, $module: $module));
-  }
-  @if not mat.theme-has($theme, $system) {
-    @return ();
-  }
-  @return meta.call(
-      meta.get-function(get-#{$system}-tokens, $module: $module), $theme);
-}
-
-/// Gets the fully qualified tokens map for the given theme and m2 tokens module.
-/// @param {Map} $theme The Angular Material theme object to generate token values from.
-/// @param {String} $module The Sass module containing the token getter functions.
-/// @return {Map} The token map by calling the token getters in the given module with the given
-///     Angular Material theme. Token names are fully-qualified.
-@function _get-tokens-for-module($theme, $module) {
-  $tokens: mat.private-deep-merge-all(
-      _get-tokens-for-module-and-system($theme, $module, unthemable),
-      _get-tokens-for-module-and-system($theme, $module, color),
-      _get-tokens-for-module-and-system($theme, $module, typography),
-      _get-tokens-for-module-and-system($theme, $module, density));
-  @return map.set((), map.get(meta.module-variables($module), prefix), $tokens);
-}
-
-/// Gets the full set of M2 tokens for the given theme object.
-/// @param {Map} $theme The Angular Material theme object to generate token values from.
-/// @return {Map} The token map for the given Angular Material theme. Returned format:
-///     (
-///       (fully, qualified, namespace): (
-///         token: value
-///       )
-///     )
-@function m2-tokens-from-theme($theme) {
-  @return mat.private-deep-merge-all(
-    _get-tokens-for-module($theme, m2-alert),
-    _get-tokens-for-module($theme, m2-colorpicker),
-    _get-tokens-for-module($theme, m2-datetimepicker),
-    _get-tokens-for-module($theme, m2-drawer),
-    _get-tokens-for-module($theme, m2-grid),
-    _get-tokens-for-module($theme, m2-loader),
-    _get-tokens-for-module($theme, m2-popover),
-    _get-tokens-for-module($theme, m2-progress),
-    _get-tokens-for-module($theme, m2-select),
-    _get-tokens-for-module($theme, m2-split),
-    _get-tokens-for-module($theme, m2-tooltip),
-  );
-}