@angular/material-experimental 16.1.0 → 16.2.0-next.0

package/_index.scss

@@ -5,6 +5,8 @@
   popover-edit-typography, popover-edit-density, popover-edit-theme;
 
 // Token-based theming API
-@forward './theming/theming' show theme, card, checkbox;
+@forward './theming/theming' show theme, retheme;
+@forward './theming/checkbox' show checkbox;
+@forward './theming/card' show card;
 
 // Additional public APIs for individual components

package/esm2022/version.mjs

@@ -7,5 +7,5 @@
  */
 import { Version } from '@angular/core';
 /** Current version of the Material experimental package. */
-export const VERSION = new Version('16.1.0');
+export const VERSION = new Version('16.2.0-next.0');
 //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidmVyc2lvbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3NyYy9tYXRlcmlhbC1leHBlcmltZW50YWwvdmVyc2lvbi50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7Ozs7O0dBTUc7QUFFSCxPQUFPLEVBQUMsT0FBTyxFQUFDLE1BQU0sZUFBZSxDQUFDO0FBRXRDLDREQUE0RDtBQUM1RCxNQUFNLENBQUMsTUFBTSxPQUFPLEdBQUcsSUFBSSxPQUFPLENBQUMsbUJBQW1CLENBQUMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQGxpY2Vuc2VcbiAqIENvcHlyaWdodCBHb29nbGUgTExDIEFsbCBSaWdodHMgUmVzZXJ2ZWQuXG4gKlxuICogVXNlIG9mIHRoaXMgc291cmNlIGNvZGUgaXMgZ292ZXJuZWQgYnkgYW4gTUlULXN0eWxlIGxpY2Vuc2UgdGhhdCBjYW4gYmVcbiAqIGZvdW5kIGluIHRoZSBMSUNFTlNFIGZpbGUgYXQgaHR0cHM6Ly9hbmd1bGFyLmlvL2xpY2Vuc2VcbiAqL1xuXG5pbXBvcnQge1ZlcnNpb259IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG4vKiogQ3VycmVudCB2ZXJzaW9uIG9mIHRoZSBNYXRlcmlhbCBleHBlcmltZW50YWwgcGFja2FnZS4gKi9cbmV4cG9ydCBjb25zdCBWRVJTSU9OID0gbmV3IFZlcnNpb24oJzAuMC4wLVBMQUNFSE9MREVSJyk7XG4iXX0=

package/fesm2022/material-experimental.mjs

@@ -1,7 +1,7 @@
 import { Version } from '@angular/core';
 
 /** Current version of the Material experimental package. */
-const VERSION = new Version('16.1.0');
+const VERSION = new Version('16.2.0-next.0');
 
 export { VERSION };
 //# sourceMappingURL=material-experimental.mjs.map

package/fesm2022/material-experimental.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"material-experimental.mjs","sources":["../../../../../../src/material-experimental/version.ts"],"sourcesContent":["/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nimport {Version} from '@angular/core';\n\n/** Current version of the Material experimental package. */\nexport const VERSION = new Version('16.1.0');\n"],"names":[],"mappings":";;AAUA;MACa,OAAO,GAAG,IAAI,OAAO,CAAC,mBAAmB;;;;"}
+{"version":3,"file":"material-experimental.mjs","sources":["../../../../../../src/material-experimental/version.ts"],"sourcesContent":["/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nimport {Version} from '@angular/core';\n\n/** Current version of the Material experimental package. */\nexport const VERSION = new Version('16.2.0-next.0');\n"],"names":[],"mappings":";;AAUA;MACa,OAAO,GAAG,IAAI,OAAO,CAAC,mBAAmB;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular/material-experimental",
-  "version": "16.1.0",
+  "version": "16.2.0-next.0",
   "description": "Experimental components for Angular Material",
   "repository": {
     "type": "git",
@@ -48,13 +48,13 @@
     }
   },
   "peerDependencies": {
-    "@angular/animations": "^16.0.0 || ^17.0.0",
-    "@angular/cdk": "16.1.0",
-    "@angular/core": "^16.0.0 || ^17.0.0",
-    "@angular/common": "^16.0.0 || ^17.0.0",
-    "@angular/forms": "^16.0.0 || ^17.0.0",
-    "@angular/platform-browser": "^16.0.0 || ^17.0.0",
-    "@angular/material": "16.1.0"
+    "@angular/animations": "^16.0.0-0 || ^16.1.0-0 || ^16.2.0-0 || ^16.3.0-0 || ^17.0.0-0",
+    "@angular/cdk": "16.2.0-next.0",
+    "@angular/core": "^16.0.0-0 || ^16.1.0-0 || ^16.2.0-0 || ^16.3.0-0 || ^17.0.0-0",
+    "@angular/common": "^16.0.0-0 || ^16.1.0-0 || ^16.2.0-0 || ^16.3.0-0 || ^17.0.0-0",
+    "@angular/forms": "^16.0.0-0 || ^16.1.0-0 || ^16.2.0-0 || ^16.3.0-0 || ^17.0.0-0",
+    "@angular/platform-browser": "^16.0.0-0 || ^16.1.0-0 || ^16.2.0-0 || ^16.3.0-0 || ^17.0.0-0",
+    "@angular/material": "16.2.0-next.0"
   },
   "dependencies": {
     "tslib": "^2.3.0",

package/theming/_card.scss

@@ -0,0 +1,93 @@
+@use 'sass:color';
+@use 'sass:meta';
+@use '@angular/material' as mat;
+@use './token-resolution';
+
+// TODO(mmalerba): This should live under material/card when moving out of experimental.
+
+/// Gets tokens for setting the card's shape.
+/// @param {String} $shape The card's shape.
+/// @return {Map} A map of tokens for setting the card's shape.
+// Note: we use a function rather than simple rename, because we want to map a single shape value to
+// multiple tokens, rather than offer separate shape customizations for elevated and outlined cards.
+@function _get-tokens-for-card-shape($shape) {
+  @return (
+      (mdc, elevated-card): (container-shape: $shape),
+      (mdc, outline-card): (container-shape: $shape),
+  );
+}
+
+/// Gets tokens for setting the card's color.
+/// @param {String} $shape The card's shape.
+/// @return {Map} A map of tokens for setting the card's shape.
+@function _get-tokens-for-card-color($color) {
+  @return (
+      (mdc, elevated-card): (container-color: $color),
+      (mdc, outline-card): (container-color: $color),
+  );
+}
+
+/// Gets a map of card token values that are derived from the theme type.
+/// @param {'light' | 'dark'} $theme-type The type of theme.
+/// @return {Map} A map of card token values derived from the given theme type.
+@function _get-tokens-for-theme-type($theme-type) {
+  $is-dark: $theme-type == 'dark';
+  $foreground: if($is-dark, white, black);
+  $card-color: if($is-dark, mat.get-color-from-palette(mat.$gray-palette, 800), white);
+  $outline-color: color.change($foreground, $alpha: 0.12);
+  $subtitle-color: if($is-dark, rgba(white, 0.7), rgba(black, 0.54));
+
+  @return (
+    (mdc, elevated-card): (
+      container-color: $card-color,
+    ),
+    (mdc, outlined-card): (
+      container-color: $card-color,
+      outline-color: $outline-color,
+    ),
+    (mat, card): (
+      subtitle-text-color: $subtitle-color,
+    ),
+  );
+}
+
+/// Resolvers for mat-card customizations.
+$_customization-resolvers: mat.private-merge-all(
+  token-resolution.alias((
+    elevation: container-elevation,
+    shadow-color: container-shadow-color,
+  ), (mdc, elevated-card)),
+  token-resolution.forward((
+    outline-width,
+    outline-color
+  ), (mdc, outlined-card)),
+  token-resolution.alias((
+    title-font: title-text-font,
+    title-line-height: title-text-line-height,
+    title-font-size: title-text-size,
+    title-letter-spacing: title-text-tracking,
+    title-font-weight: title-text-weight,
+    subtitle-font: subtitle-text-font,
+    subtitle-line-height: subtitle-text-line-height,
+    subtitle-font-size: subtitle-text-size,
+    subtitle-letter-spacing: subtitle-text-tracking,
+    subtitle-font-weight: subtitle-text-weight,
+    subtitle-color: subtitle-text-color
+  ), (mat, card)),
+  (
+    background-color: meta.get-function(_get-tokens-for-card-color),
+    border-radius: meta.get-function(_get-tokens-for-card-shape),
+    theme-type: meta.get-function(_get-tokens-for-theme-type),
+  )
+);
+
+/// Configure the mat-card's theme.
+/// @param {Map} $customizations [()] A map of custom values to use when theming mat-card.
+@function card($customizations: ()) {
+  @return (
+    id: 'mat.card',
+    customizations: token-resolution.resolve-customized-tokens(
+        'mat.card', $_customization-resolvers, $customizations),
+    deps: (),
+  );
+}

package/theming/_checkbox.scss

@@ -0,0 +1,109 @@
+@use 'sass:color';
+@use 'sass:map';
+@use 'sass:meta';
+@use '@angular/material' as mat;
+@use '@material/theme/theme-color' as mdc-theme-color;
+@use './token-resolution';
+
+// TODO(mmalerba): This should live under material/checkbox when moving out of experimental.
+
+// Duplicated from core/tokens/m2/mdc/checkbox
+// TODO(mmalerba): Delete duplicated code when this is moved out of experimental.
+@function _contrast-tone($value, $light-color: '#fff', $dark-color: '#000') {
+  @if ($value == 'dark' or $value == 'light' or type-of($value) == 'color') {
+    @return if(mdc-theme-color.contrast-tone($value) == 'dark', $dark-color, $light-color);
+  }
+  @return false;
+}
+
+/// Gets a map of checkbox token values that are derived from the given palette.
+/// @param {Map} $palette An Angular Material palette object.
+/// @return {Map} A map of checkbox token values derived from the given palette.
+@function _get-tokens-for-color-palette($palette) {
+  $palette-default-color: mat.get-color-from-palette($palette);
+  $checkmark-color: _contrast-tone($palette-default-color);
+
+  @return (
+    (mdc, checkbox): (
+      selected-checkmark-color: $checkmark-color,
+      selected-focus-icon-color: $palette-default-color,
+      selected-hover-icon-color: $palette-default-color,
+      selected-icon-color: $palette-default-color,
+      selected-pressed-icon-color: $palette-default-color,
+      selected-focus-state-layer-color: $palette-default-color,
+      selected-hover-state-layer-color: $palette-default-color,
+      selected-pressed-state-layer-color: $palette-default-color,
+    )
+  );
+}
+
+/// Gets a map of checkbox token values that are derived from the theme type.
+/// @param {'light' | 'dark'} $theme-type The type of theme.
+/// @return {Map} A map of checkbox token values derived from the given theme type.
+@function _get-tokens-for-theme-type($theme-type) {
+  $is-dark: $theme-type == dark;
+  $foreground: if($is-dark, white, black);
+  $disabled-color: color.change($foreground, $alpha: 0.38);
+  $border-color: color.change($foreground, $alpha: 0.54);
+  $active-border-color: mat.get-color-from-palette(mat.$gray-palette, if($is-dark, 200, 900));
+
+  @return (
+    (mdc, checkbox): (
+      disabled-selected-icon-color: $disabled-color,
+      disabled-unselected-icon-color: $disabled-color,
+      unselected-focus-icon-color: $active-border-color,
+      unselected-hover-icon-color: $active-border-color,
+      unselected-icon-color: $border-color,
+      unselected-pressed-icon-color: $border-color,
+      unselected-focus-state-layer-color: $foreground,
+      unselected-hover-state-layer-color: $foreground,
+      unselected-pressed-state-layer-color: $foreground,
+    )
+  );
+}
+
+/// Resolvers for mat-checkbox customizations.
+$_customization-resolvers: map.merge(
+    token-resolution.alias((
+      checkmark-color: selected-checkmark-color,
+      disabled-checkmark-color: disabled-selected-checkmark-color,
+      selected-focus-ring-opacity: selected-focus-state-layer-opacity,
+      selected-hover-ring-opacity: selected-hover-state-layer-opacity,
+      selected-pressed-ring-opacity: selected-pressed-state-layer-opacity,
+      unselected-focus-ring-opacity: unselected-focus-state-layer-opacity,
+      unselected-hover-ring-opacity: unselected-hover-state-layer-opacity,
+      unselected-pressed-ring-opacity: unselected-pressed-state-layer-opacity,
+      disabled-selected-box-color: disabled-selected-icon-color,
+      disabled-unselected-box-color: disabled-unselected-icon-color,
+      selected-focus-box-color: selected-focus-icon-color,
+      selected-hover-box-color: selected-hover-icon-color,
+      selected-box-color: selected-icon-color,
+      selected-pressed-box-color: selected-pressed-icon-color,
+      unselected-focus-box-color: unselected-focus-icon-color,
+      unselected-hover-box-color: unselected-hover-icon-color,
+      unselected-box-color: unselected-icon-color,
+      unselected-pressed-box-color: unselected-pressed-icon-color,
+      selected-focus-ring-color: selected-focus-state-layer-color,
+      selected-hover-ring-color: selected-hover-state-layer-color,
+      selected-pressed-ring-color: selected-pressed-state-layer-color,
+      unselected-focus-ring-color: unselected-focus-state-layer-color,
+      unselected-hover-ring-color: unselected-hover-state-layer-color,
+      unselected-pressed-ring-color: unselected-pressed-state-layer-color,
+      ripple-size: state-layer-size,
+    ), (mdc, checkbox)),
+    (
+      color-palette: meta.get-function(_get-tokens-for-color-palette),
+      theme-type: meta.get-function(_get-tokens-for-theme-type),
+    )
+);
+
+/// Configure the mat-checkbox's theme.
+/// @param {Map} $customizations [()] A map of custom values to use when theming mat-checkbox.
+@function checkbox($customizations: ()) {
+  @return (
+    id: 'mat.checkbox',
+    customizations: token-resolution.resolve-customized-tokens(
+        'mat.checkbox', $_customization-resolvers, $customizations),
+    deps: (),
+  );
+}

package/theming/_theming.scss

@@ -110,25 +110,5 @@ $_error-on-missing-dep: false;
 //   - override-theme
 //   - retheme
 @mixin retheme($components) {
-  @include _theme((), $components);
-}
-
-/// Configure the mat-card's theme.
-/// @param {Map} $customizations [()] A map of custom token values to use when theming mat-card.
-@function card($customizations: ()) {
-  @return (
-    id: 'mat.card',
-    customizations: $customizations,
-    deps: (),
-  );
-}
-
-/// Configure the mat-checkbox's theme.
-/// @param {Map} $customizations [()] A map of custom token values to use when theming mat-checkbox.
-@function checkbox($customizations: ()) {
-  @return (
-    id: 'mat.checkbox',
-    customizations: $customizations,
-    deps: (),
-  );
+  @include _theme((), mat.private-coerce-to-list($components));
 }

package/theming/_token-resolution.scss

@@ -0,0 +1,88 @@
+@use 'sass:list';
+@use 'sass:map';
+@use 'sass:meta';
+
+/// Creates a map of short token names to fully qualified token name under the given namespace.
+/// @param {List} $tokens A list of tokens to forward under the given namespace.
+/// @param {List} $namespace The namespace to use for the forwarded tokens.
+/// @return {Map} A map of the short token name to pairs of (namespace, token-name) representing the
+///     fully-qualified name
+/// @example
+///     forward((token1, token2), (mat, my-comp))
+///     => (
+///       token1: ((mat, my-comp), token1),
+///       token2: ((mat, my-comp), token1)
+///     )
+@function forward($tokens, $namespace) {
+  $result: ();
+  @each $token in $tokens {
+    $result: map.set($result, $token, ($namespace, $token));
+  }
+  @return $result;
+}
+
+// Creates a map of token alias names to fully qualified canonical names under the given namespace.
+/// @param {Map} $tokens A map of aliases to canonical short names for tokens under the given
+///     namespace.
+/// @param {List} $namespace The namespace to use for the canonical tokens.
+/// @return A map of the token alias name to pairs of (namespace, token-name) representing the
+///     fully-qualified canonical name of the token.
+/// @example
+///     alias((alias1: canonical1, alias2: canonical2), (mat, my-comp))
+///     => (
+///       alias1: ((mat, my-comp), canonical1),
+///       alias2: ((mat, my-comp), canonical2)
+///     )
+@function alias($tokens, $namespace) {
+  $result: ();
+  @each $from, $to in $tokens {
+    $result: map.set($result, $from, ($namespace, $to));
+  }
+  @return $result;
+}
+
+/// Gets the full set of customized tokens from a component configuration's customization map.
+/// @param {String} $component-id The id of the component whose customizations are being resolved.
+///     Used for error logging purposes.
+/// @param {Map} $customization-resolvers A map of resolvers that map customization keys to
+///     fully-qualified token names or functions to generate fully-qualified token names.
+/// @param {Map} $customizations A map of values for customization keys
+/// @return {Map} A map of fully-qualified token values
+/// @example
+///     resolve-customized-tokens('mat.checkbox',
+///       forward(my-color, my-size, (mat, my-comp)),
+///       (my-color: red, my-size: 100px)
+///     )
+///     => (
+///       (mat, my-comp): (
+///         my-color: red,
+///         my-size: 100px
+///       )
+///     )
+@function resolve-customized-tokens($component-id, $customization-resolvers, $customizations) {
+  $result: ();
+
+  @each $customization, $value in $customizations {
+    $resolver: map.get($customization-resolvers, $customization);
+    @if not $resolver {
+      @error 'Unrecognized customization for #{$component-id}: #{$customization}';
+    }
+
+    $resolver-type: meta.type-of($resolver);
+    @if $resolver-type == 'list' {
+      // If the resolver is a list, it represents the token namespace and name.
+      $key-and-value: list.append($resolver, $value);
+      $result: map.deep-merge($result, map.set((), $key-and-value...));
+    }
+    @else if $resolver-type == 'function' {
+      // If the resolver is a function, it should take a value and return a token map.
+      $result: map.deep-merge($result, meta.call($resolver, $value));
+    }
+    @else {
+      // Anything else is unexpected.
+      @error 'Invalid customization resolver for `#{$customization}` on #{$component-id}';
+    }
+  }
+
+  @return $result;
+}