@angular/material 17.1.2 → 17.2.0-next.1

package/radio/_radio-theme.scss

@@ -1,7 +1,5 @@
-@use 'sass:map';
 @use '@material/radio/radio-theme' as mdc-radio-theme;
 @use '@material/form-field/form-field-theme' as mdc-form-field-theme;
-@use '../core/mdc-helpers/mdc-helpers';
 @use '../core/style/sass-utils';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
@@ -11,6 +9,9 @@
 @use '../core/tokens/m2/mdc/radio' as tokens-mdc-radio;
 @use '../core/tokens/m2/mat/radio' as tokens-mat-radio;
 
+/// Outputs base theme styles (styles not dependent on the color, typography, or density settings)
+/// for the mat-radio.
+/// @param {Map} $theme The theme to generate base styles for.
 @mixin base($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
@@ -24,9 +25,14 @@
   }
 }
 
-@mixin color($theme) {
+/// Outputs color theme styles for the mat-radio.
+/// @param {Map} $theme The theme to generate color styles for.
+/// @param {ArgList} Additional optional arguments (only supported for M3 themes):
+///   $color-variant: The color variant to use for the radio button: primary, secondary, tertiary,
+///     or error (If not specified, default primary color will be used).
+@mixin color($theme, $options...) {
   @if inspection.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...);
   }
   @else {
     .mat-mdc-radio-button {
@@ -53,6 +59,8 @@
   }
 }
 
+/// Outputs typography theme styles for the mat-radio.
+/// @param {Map} $theme The theme to generate typography styles for.
 @mixin typography($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
@@ -60,6 +68,8 @@
   @else {
     @include sass-utils.current-selector-or-root() {
       @include mdc-radio-theme.theme(tokens-mdc-radio.get-typography-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mat-radio.$prefix, tokens-mat-radio.get-typography-tokens($theme));
     }
 
     .mat-mdc-radio-button {
@@ -68,6 +78,8 @@
   }
 }
 
+/// Outputs typography theme styles for the mat-radio.
+/// @param {Map} $theme The theme to generate density styles for.
 @mixin density($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
@@ -77,20 +89,21 @@
 
     @include sass-utils.current-selector-or-root() {
       @include mdc-radio-theme.theme(tokens-mdc-radio.get-density-tokens($theme));
-    }
-
-    @include mdc-helpers.if-touch-targets-unsupported($density-scale) {
-      .mat-mdc-radio-touch-target {
-        display: none;
-      }
+      @include token-utils.create-token-values(
+        tokens-mat-radio.$prefix, tokens-mat-radio.get-density-tokens($theme));
     }
   }
 }
 
-@mixin theme($theme) {
+/// Outputs all (base, color, typography, and density) theme styles for the mat-radio.
+/// @param {Map} $theme The theme to generate styles for.
+/// @param {ArgList} Additional optional arguments (only supported for M3 themes):
+///   $color-variant: The color variant to use for the radio button: primary, secondary, tertiary,
+///     or error (If not specified, default primary color will be used).
+@mixin theme($theme, $options...) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-radio') {
     @if inspection.get-theme-version($theme) == 1 {
-      @include _theme-from-tokens(inspection.get-theme-tokens($theme));
+      @include _theme-from-tokens(inspection.get-theme-tokens($theme), $options...);
     }
     @else {
       @include base($theme);
@@ -107,10 +120,13 @@
   }
 }
 
-@mixin _theme-from-tokens($tokens) {
-  @if ($tokens != ()) {
-    @include mdc-radio-theme.theme(map.get($tokens, tokens-mdc-radio.$prefix));
-    @include token-utils.create-token-values(
-        tokens-mat-radio.$prefix, map.get($tokens, tokens-mat-radio.$prefix));
-  }
+@mixin _theme-from-tokens($tokens, $options...) {
+  $mdc-radio-tokens: token-utils.get-tokens-for($tokens, tokens-mdc-radio.$prefix, $options...);
+  $mat-radio-tokens: token-utils.get-tokens-for($tokens, tokens-mat-radio.$prefix, $options...);
+  // Don't pass $options here, since the mdc-form-field doesn't support color options,
+  // only the mdc-radio and mat-radio do.
+  $mdc-form-field-tokens: token-utils.get-tokens-for($tokens, tokens-mdc-form-field.$prefix);
+  @include mdc-radio-theme.theme($mdc-radio-tokens);
+  @include mdc-form-field-theme.theme($mdc-form-field-tokens);
+  @include token-utils.create-token-values(tokens-mat-radio.$prefix, $mat-radio-tokens);
 }

package/schematics/ng-add/index.js

@@ -18,7 +18,7 @@ const package_config_1 = require("./package-config");
  * Note that the fallback version range does not use caret, but tilde because that is
  * the default for Angular framework dependencies in CLI projects.
  */
-const fallbackMaterialVersionRange = `~17.1.2`;
+const fallbackMaterialVersionRange = `~17.2.0-next.1`;
 /**
  * Schematic factory entry-point for the `ng-add` schematic. The ng-add schematic will be
  * automatically executed if developers run `ng add @angular/material`.
@@ -33,7 +33,7 @@ function default_1(options) {
         // have the same version tag if possible.
         const ngCoreVersionTag = (0, package_config_1.getPackageVersionFromPackageJson)(host, '@angular/core');
         const materialVersionRange = (0, package_config_1.getPackageVersionFromPackageJson)(host, '@angular/material');
-        const angularDependencyVersion = ngCoreVersionTag || `^17.0.0 || ^18.0.0`;
+        const angularDependencyVersion = ngCoreVersionTag || `^17.0.0-0 || ^17.1.0-0 || ^17.2.0-0 || ^17.3.0-0 || ^18.0.0-0`;
         // The CLI inserts `@angular/material` into the `package.json` before this schematic runs.
         // This means that we do not need to insert Angular Material into `package.json` files again.
         // In some cases though, it could happen that this schematic runs outside of the CLI `ng add`

package/schematics/ng-add/index.mjs

@@ -18,7 +18,7 @@ const package_config_1 = require("./package-config");
  * Note that the fallback version range does not use caret, but tilde because that is
  * the default for Angular framework dependencies in CLI projects.
  */
-const fallbackMaterialVersionRange = `~17.1.2`;
+const fallbackMaterialVersionRange = `~17.2.0-next.1`;
 /**
  * Schematic factory entry-point for the `ng-add` schematic. The ng-add schematic will be
  * automatically executed if developers run `ng add @angular/material`.
@@ -33,7 +33,7 @@ function default_1(options) {
         // have the same version tag if possible.
         const ngCoreVersionTag = (0, package_config_1.getPackageVersionFromPackageJson)(host, '@angular/core');
         const materialVersionRange = (0, package_config_1.getPackageVersionFromPackageJson)(host, '@angular/material');
-        const angularDependencyVersion = ngCoreVersionTag || `^17.0.0 || ^18.0.0`;
+        const angularDependencyVersion = ngCoreVersionTag || `^17.0.0-0 || ^17.1.0-0 || ^17.2.0-0 || ^17.3.0-0 || ^18.0.0-0`;
         // The CLI inserts `@angular/material` into the `package.json` before this schematic runs.
         // This means that we do not need to insert Angular Material into `package.json` files again.
         // In some cases though, it could happen that this schematic runs outside of the CLI `ng add`