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

package/_index.scss

@@ -4,4 +4,7 @@
 @forward './popover-edit/popover-edit-theme' as popover-edit-* show popover-edit-color,
   popover-edit-typography, popover-edit-density, popover-edit-theme;
 
+// Token-based theming API
+@forward './theming/theming' show theme, card, checkbox;
+
 // 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-next.0');
+export const VERSION = new Version('16.1.0-next.2');
 //# 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-next.0');
+const VERSION = new Version('16.1.0-next.2');
 
 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-next.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.1.0-next.2');\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-next.0",
+  "version": "16.1.0-next.2",
   "description": "Experimental components for Angular Material",
   "repository": {
     "type": "git",
@@ -49,62 +49,62 @@
   },
   "peerDependencies": {
     "@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.1.0-next.0",
+    "@angular/cdk": "16.1.0-next.2",
     "@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.1.0-next.0"
+    "@angular/material": "16.1.0-next.2"
   },
   "dependencies": {
     "tslib": "^2.3.0",
-    "@material/animation": "15.0.0-canary.3b5b55e31.0",
-    "@material/auto-init": "15.0.0-canary.3b5b55e31.0",
-    "@material/banner": "15.0.0-canary.3b5b55e31.0",
-    "@material/base": "15.0.0-canary.3b5b55e31.0",
-    "@material/button": "15.0.0-canary.3b5b55e31.0",
-    "@material/card": "15.0.0-canary.3b5b55e31.0",
-    "@material/checkbox": "15.0.0-canary.3b5b55e31.0",
-    "@material/chips": "15.0.0-canary.3b5b55e31.0",
-    "@material/circular-progress": "15.0.0-canary.3b5b55e31.0",
-    "@material/data-table": "15.0.0-canary.3b5b55e31.0",
-    "@material/density": "15.0.0-canary.3b5b55e31.0",
-    "@material/dialog": "15.0.0-canary.3b5b55e31.0",
-    "@material/dom": "15.0.0-canary.3b5b55e31.0",
-    "@material/drawer": "15.0.0-canary.3b5b55e31.0",
-    "@material/elevation": "15.0.0-canary.3b5b55e31.0",
-    "@material/fab": "15.0.0-canary.3b5b55e31.0",
-    "@material/feature-targeting": "15.0.0-canary.3b5b55e31.0",
-    "@material/floating-label": "15.0.0-canary.3b5b55e31.0",
-    "@material/form-field": "15.0.0-canary.3b5b55e31.0",
-    "@material/icon-button": "15.0.0-canary.3b5b55e31.0",
-    "@material/image-list": "15.0.0-canary.3b5b55e31.0",
-    "@material/layout-grid": "15.0.0-canary.3b5b55e31.0",
-    "@material/line-ripple": "15.0.0-canary.3b5b55e31.0",
-    "@material/linear-progress": "15.0.0-canary.3b5b55e31.0",
-    "@material/list": "15.0.0-canary.3b5b55e31.0",
-    "@material/menu": "15.0.0-canary.3b5b55e31.0",
-    "@material/menu-surface": "15.0.0-canary.3b5b55e31.0",
-    "@material/notched-outline": "15.0.0-canary.3b5b55e31.0",
-    "@material/radio": "15.0.0-canary.3b5b55e31.0",
-    "@material/ripple": "15.0.0-canary.3b5b55e31.0",
-    "@material/rtl": "15.0.0-canary.3b5b55e31.0",
-    "@material/segmented-button": "15.0.0-canary.3b5b55e31.0",
-    "@material/select": "15.0.0-canary.3b5b55e31.0",
-    "@material/shape": "15.0.0-canary.3b5b55e31.0",
-    "@material/slider": "15.0.0-canary.3b5b55e31.0",
-    "@material/snackbar": "15.0.0-canary.3b5b55e31.0",
-    "@material/switch": "15.0.0-canary.3b5b55e31.0",
-    "@material/tab": "15.0.0-canary.3b5b55e31.0",
-    "@material/tab-bar": "15.0.0-canary.3b5b55e31.0",
-    "@material/tab-indicator": "15.0.0-canary.3b5b55e31.0",
-    "@material/tab-scroller": "15.0.0-canary.3b5b55e31.0",
-    "@material/textfield": "15.0.0-canary.3b5b55e31.0",
-    "@material/theme": "15.0.0-canary.3b5b55e31.0",
-    "@material/tooltip": "15.0.0-canary.3b5b55e31.0",
-    "@material/top-app-bar": "15.0.0-canary.3b5b55e31.0",
-    "@material/touch-target": "15.0.0-canary.3b5b55e31.0",
-    "@material/typography": "15.0.0-canary.3b5b55e31.0"
+    "@material/animation": "15.0.0-canary.90291f2e2.0",
+    "@material/auto-init": "15.0.0-canary.90291f2e2.0",
+    "@material/banner": "15.0.0-canary.90291f2e2.0",
+    "@material/base": "15.0.0-canary.90291f2e2.0",
+    "@material/button": "15.0.0-canary.90291f2e2.0",
+    "@material/card": "15.0.0-canary.90291f2e2.0",
+    "@material/checkbox": "15.0.0-canary.90291f2e2.0",
+    "@material/chips": "15.0.0-canary.90291f2e2.0",
+    "@material/circular-progress": "15.0.0-canary.90291f2e2.0",
+    "@material/data-table": "15.0.0-canary.90291f2e2.0",
+    "@material/density": "15.0.0-canary.90291f2e2.0",
+    "@material/dialog": "15.0.0-canary.90291f2e2.0",
+    "@material/dom": "15.0.0-canary.90291f2e2.0",
+    "@material/drawer": "15.0.0-canary.90291f2e2.0",
+    "@material/elevation": "15.0.0-canary.90291f2e2.0",
+    "@material/fab": "15.0.0-canary.90291f2e2.0",
+    "@material/feature-targeting": "15.0.0-canary.90291f2e2.0",
+    "@material/floating-label": "15.0.0-canary.90291f2e2.0",
+    "@material/form-field": "15.0.0-canary.90291f2e2.0",
+    "@material/icon-button": "15.0.0-canary.90291f2e2.0",
+    "@material/image-list": "15.0.0-canary.90291f2e2.0",
+    "@material/layout-grid": "15.0.0-canary.90291f2e2.0",
+    "@material/line-ripple": "15.0.0-canary.90291f2e2.0",
+    "@material/linear-progress": "15.0.0-canary.90291f2e2.0",
+    "@material/list": "15.0.0-canary.90291f2e2.0",
+    "@material/menu": "15.0.0-canary.90291f2e2.0",
+    "@material/menu-surface": "15.0.0-canary.90291f2e2.0",
+    "@material/notched-outline": "15.0.0-canary.90291f2e2.0",
+    "@material/radio": "15.0.0-canary.90291f2e2.0",
+    "@material/ripple": "15.0.0-canary.90291f2e2.0",
+    "@material/rtl": "15.0.0-canary.90291f2e2.0",
+    "@material/segmented-button": "15.0.0-canary.90291f2e2.0",
+    "@material/select": "15.0.0-canary.90291f2e2.0",
+    "@material/shape": "15.0.0-canary.90291f2e2.0",
+    "@material/slider": "15.0.0-canary.90291f2e2.0",
+    "@material/snackbar": "15.0.0-canary.90291f2e2.0",
+    "@material/switch": "15.0.0-canary.90291f2e2.0",
+    "@material/tab": "15.0.0-canary.90291f2e2.0",
+    "@material/tab-bar": "15.0.0-canary.90291f2e2.0",
+    "@material/tab-indicator": "15.0.0-canary.90291f2e2.0",
+    "@material/tab-scroller": "15.0.0-canary.90291f2e2.0",
+    "@material/textfield": "15.0.0-canary.90291f2e2.0",
+    "@material/theme": "15.0.0-canary.90291f2e2.0",
+    "@material/tooltip": "15.0.0-canary.90291f2e2.0",
+    "@material/top-app-bar": "15.0.0-canary.90291f2e2.0",
+    "@material/touch-target": "15.0.0-canary.90291f2e2.0",
+    "@material/typography": "15.0.0-canary.90291f2e2.0"
   },
   "sideEffects": false,
   "module": "./fesm2022/material-experimental.mjs",

package/theming/_theming.scss

@@ -0,0 +1,134 @@
+@use 'sass:list';
+@use 'sass:map';
+@use 'sass:meta';
+@use '@angular/material' as mat;
+
+/// Whether to throw an error when a required dep is not configured. If false, the dep will be
+/// automatically configured instead.
+$_error-on-missing-dep: false;
+
+/// Applies the theme for the given component configuration.
+/// @param {Map} $tokens A map containing the default values to use for tokens not explicitly
+///     customized in the component config object.
+/// @param {List} $component The component config object to emit theme tokens for.
+/// @output CSS variables representing the theme tokens for this component.
+@mixin _apply-theme($tokens, $component) {
+  $id: map.get($component, id);
+  $tokens: map.deep-merge($tokens, map.get($component, customizations));
+
+  // NOTE: for now we use a hardcoded if-chain, but in the future when first-class mixins are
+  // supported, the configuration data will contain a reference to its own theme mixin.
+  @if $id == 'mat.card' {
+    @include mat.private-apply-card-theme-from-tokens($tokens);
+  }
+  @else if $id == 'mat.checkbox' {
+    @include mat.private-apply-checkbox-theme-from-tokens($tokens);
+  }
+  @else {
+    @error 'Unrecognized component theme: #{id}';
+  }
+}
+
+/// Gets the transitive closure of the given list of component configuration dependencies.
+/// @param {List} $components The list of component config objects to get the transitive deps for.
+/// @param {Map} $configured [()] A map of already configured component IDs. Used for recursion,
+///     should not be passed when calling.
+/// @return {List} The transitive closure of configs for the given $components.
+// TODO(mmalerba): Currently we use the deps to determine if additional tokens, other than the
+//  explicitly requested ones need to be emitted, but the deps do not affect the ordering in which
+//  the various configs are processed. Before moving out of experimental we should think more about
+//  the ordering behavior we want. For the most part the order shouldn't matter, unless we have 2
+//  configs trying to set the same token.
+@function _get-transitive-deps($components, $configured: ()) {
+  // Mark the given components as configured.
+  @each $component in $components {
+    $configured: map.set($configured, map.get($component, id), true);
+  }
+  $new-deps: ();
+
+  // Check each of the given components for new deps.
+  @each $component in $components {
+    // Note: Deps are specified as getter functions that return a config object rather than a direct
+    // config object. This allows us to only call the getter if the dep has not yet been configured.
+    // This can be useful if we have 2 components that want to require each other to be configured.
+    // Example: form-field and input. If we used direct config objects in this case, it would cause
+    // infinite co-recursion.
+    @each $dep-getter in mat.private-coerce-to-list(map.get($component, deps)) {
+      $dep: meta.call($dep-getter);
+      $dep-id: map.get($dep, id);
+      @if not (map.has-key($configured, $dep-id)) {
+        @if $_error-on-missing-dep {
+          @error 'Missing theme: `#{map.get($component, id)}` depends on `#{$dep-id}`.' +
+            ' Please configure the theme for `#{$dep-id}` in your call to `mat.theme`';
+        }
+        @else {
+          $configured: map.set($configured, $dep-id, true);
+          $new-deps: list.append($new-deps, $dep);
+        }
+      }
+    }
+  }
+
+  // Append on the new deps to this list of component configurations and return.
+  @if list.length($new-deps) > 0 {
+    $components: list.join($components, _get-transitive-deps($new-deps, $configured));
+  }
+  @return $components;
+}
+
+/// Apply the themes for the given component configs with the given ste of fallback token values.
+/// @param {Map} $tokens A map of fallback values to use for tokens that are not explicitly
+///     customized by one of the component configs.
+/// @param {List} $components The list of component configurations to emit tokens for.
+/// @output CSS variables representing the theme tokens for the given component configs.
+@mixin _theme($tokens, $components) {
+  // Call the theme mixin for each configured component.
+  @each $component in $components {
+    @include _apply-theme($tokens, $component);
+  }
+}
+
+/// Takes the full list of tokens and a list of components to configure, and outputs all theme
+/// tokens for the configured components.
+/// @param {Map} $tokens A map of all tokens for the current design system.
+/// @param {List} $components The list of component configurations to emit tokens for.
+/// @output CSS variables representing the theme tokens for the given component configs.
+// TODO(mmalerba): Consider an alternate API where `$tokens` is not a separate argument,
+//  but one of the configs in the `$components` list
+@mixin theme($tokens, $components) {
+  @include _theme($tokens, _get-transitive-deps(mat.private-coerce-to-list($components)));
+}
+
+/// Takes a list of components to configure, and outputs only the theme tokens that are explicitly
+/// customized by the configurations.
+/// @param {List} $components The list of component configurations to emit tokens for.
+/// @output CSS variables representing the theme tokens for the given component configs.
+// TODO(mmalerba): What should we call this?
+//   - update-theme
+//   - adjust-theme
+//   - edit-theme
+//   - 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: (),
+  );
+}