@angular/material-experimental 16.1.0-next.1 → 16.1.0-rc.0

package/popover-edit/index.d.ts

@@ -29,7 +29,7 @@ declare namespace i2 {
 /** Closes the lens on click. */
 export declare class MatEditClose<FormValue> extends CdkEditClose<FormValue> {
     static ɵfac: i0.ɵɵFactoryDeclaration<MatEditClose<any>, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatEditClose<any>, "[matEditClose]", never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatEditClose<any>, "[matEditClose]", never, {}, {}, never, never, false, never, false>;
 }
 
 /**
@@ -40,7 +40,7 @@ export declare class MatEditClose<FormValue> extends CdkEditClose<FormValue> {
  */
 export declare class MatEditLens<FormValue> extends CdkEditControl<FormValue> {
     static ɵfac: i0.ɵɵFactoryDeclaration<MatEditLens<any>, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatEditLens<any>, "form[matEditLens]", never, { "clickOutBehavior": { "alias": "matEditLensClickOutBehavior"; "required": false; }; "preservedFormValue": { "alias": "matEditLensPreservedFormValue"; "required": false; }; "ignoreSubmitUnlessValid": { "alias": "matEditLensIgnoreSubmitUnlessValid"; "required": false; }; }, { "preservedFormValueChange": "matEditLensPreservedFormValueChange"; }, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatEditLens<any>, "form[matEditLens]", never, { "clickOutBehavior": { "alias": "matEditLensClickOutBehavior"; "required": false; }; "preservedFormValue": { "alias": "matEditLensPreservedFormValue"; "required": false; }; "ignoreSubmitUnlessValid": { "alias": "matEditLensIgnoreSubmitUnlessValid"; "required": false; }; }, { "preservedFormValueChange": "matEditLensPreservedFormValueChange"; }, never, never, false, never, false>;
 }
 
 /**
@@ -49,13 +49,13 @@ export declare class MatEditLens<FormValue> extends CdkEditControl<FormValue> {
  */
 export declare class MatEditOpen extends CdkEditOpen {
     static ɵfac: i0.ɵɵFactoryDeclaration<MatEditOpen, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatEditOpen, "[matEditOpen]", never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatEditOpen, "[matEditOpen]", never, {}, {}, never, never, false, never, false>;
 }
 
 /** Reverts the form to its initial or previously submitted state on click. */
 export declare class MatEditRevert<FormValue> extends CdkEditRevert<FormValue> {
     static ɵfac: i0.ɵɵFactoryDeclaration<MatEditRevert<any>, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatEditRevert<any>, "button[matEditRevert]", never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatEditRevert<any>, "button[matEditRevert]", never, {}, {}, never, never, false, never, false>;
 }
 
 /**
@@ -66,7 +66,7 @@ export declare class MatEditRevert<FormValue> extends CdkEditRevert<FormValue> {
 export declare class MatPopoverEdit<C> extends CdkPopoverEdit<C> {
     protected panelClass(): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatPopoverEdit<any>, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatPopoverEdit<any>, "[matPopoverEdit]:not([matPopoverEditTabOut])", never, { "template": { "alias": "matPopoverEdit"; "required": false; }; "context": { "alias": "matPopoverEditContext"; "required": false; }; "colspan": { "alias": "matPopoverEditColspan"; "required": false; }; "disabled": { "alias": "matPopoverEditDisabled"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatPopoverEdit<any>, "[matPopoverEdit]:not([matPopoverEditTabOut])", never, { "template": { "alias": "matPopoverEdit"; "required": false; }; "context": { "alias": "matPopoverEditContext"; "required": false; }; "colspan": { "alias": "matPopoverEditColspan"; "required": false; }; "disabled": { "alias": "matPopoverEditDisabled"; "required": false; }; }, {}, never, never, false, never, false>;
 }
 
 export declare class MatPopoverEditModule {
@@ -83,7 +83,7 @@ export declare class MatPopoverEditModule {
 export declare class MatPopoverEditTabOut<C> extends CdkPopoverEditTabOut<C> {
     protected panelClass(): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatPopoverEditTabOut<any>, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatPopoverEditTabOut<any>, "[matPopoverEdit][matPopoverEditTabOut]", never, { "template": { "alias": "matPopoverEdit"; "required": false; }; "context": { "alias": "matPopoverEditContext"; "required": false; }; "colspan": { "alias": "matPopoverEditColspan"; "required": false; }; "disabled": { "alias": "matPopoverEditDisabled"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatPopoverEditTabOut<any>, "[matPopoverEdit][matPopoverEditTabOut]", never, { "template": { "alias": "matPopoverEdit"; "required": false; }; "context": { "alias": "matPopoverEditContext"; "required": false; }; "colspan": { "alias": "matPopoverEditColspan"; "required": false; }; "disabled": { "alias": "matPopoverEditDisabled"; "required": false; }; }, {}, never, never, false, never, false>;
 }
 
 /**
@@ -95,7 +95,7 @@ export declare class MatRowHoverContent extends CdkRowHoverContent {
     protected makeElementHiddenButFocusable(element: HTMLElement): void;
     protected makeElementVisible(element: HTMLElement): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatRowHoverContent, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatRowHoverContent, "[matRowHoverContent]", never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatRowHoverContent, "[matRowHoverContent]", never, {}, {}, never, never, false, never, false>;
 }
 
 export { }

package/selection/index.d.ts

@@ -54,7 +54,7 @@ export declare class MatRowSelection<T> extends CdkRowSelection<T> {
     /** The value that is associated with the row */
     value: T;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatRowSelection<any>, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatRowSelection<any>, "[matRowSelection]", never, { "index": { "alias": "matRowSelectionIndex"; "required": false; }; "value": { "alias": "matRowSelectionValue"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatRowSelection<any>, "[matRowSelection]", never, { "index": { "alias": "matRowSelectionIndex"; "required": false; }; "value": { "alias": "matRowSelectionValue"; "required": false; }; }, {}, never, never, false, never, false>;
 }
 
 /**
@@ -69,7 +69,7 @@ export declare class MatRowSelection<T> extends CdkRowSelection<T> {
  */
 export declare class MatSelectAll<T> extends CdkSelectAll<T> {
     static ɵfac: i0.ɵɵFactoryDeclaration<MatSelectAll<any>, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatSelectAll<any>, "[matSelectAll]", ["matSelectAll"], {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatSelectAll<any>, "[matSelectAll]", ["matSelectAll"], {}, {}, never, never, false, never, false>;
 }
 
 /**
@@ -85,7 +85,7 @@ export declare class MatSelection<T> extends CdkSelection<T> {
     /** Emits when selection changes. */
     readonly change: EventEmitter<SelectionChange<T>>;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatSelection<any>, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatSelection<any>, "[matSelection]", ["matSelection"], { "multiple": { "alias": "matSelectionMultiple"; "required": false; }; }, { "change": "matSelectionChange"; }, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatSelection<any>, "[matSelection]", ["matSelection"], { "multiple": { "alias": "matSelectionMultiple"; "required": false; }; }, { "change": "matSelectionChange"; }, never, never, false, never, false>;
 }
 
 /**
@@ -109,7 +109,7 @@ export declare class MatSelectionColumn<T> implements OnInit, OnDestroy {
     ngOnDestroy(): void;
     private _syncColumnDefName;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatSelectionColumn<any>, [{ optional: true; }, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatSelectionColumn<any>, "mat-selection-column", never, { "name": { "alias": "name"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatSelectionColumn<any>, "mat-selection-column", never, { "name": { "alias": "name"; "required": false; }; }, {}, never, never, false, never, false>;
 }
 
 export declare class MatSelectionModule {
@@ -132,7 +132,7 @@ export declare class MatSelectionToggle<T> extends CdkSelectionToggle<T> {
     /** The value that is associated with the toggle */
     value: T;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatSelectionToggle<any>, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatSelectionToggle<any>, "[matSelectionToggle]", ["matSelectionToggle"], { "index": { "alias": "matSelectionToggleIndex"; "required": false; }; "value": { "alias": "matSelectionToggleValue"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatSelectionToggle<any>, "[matSelectionToggle]", ["matSelectionToggle"], { "index": { "alias": "matSelectionToggleIndex"; "required": false; }; "value": { "alias": "matSelectionToggleValue"; "required": false; }; }, {}, never, never, false, never, false>;
 }
 
 export { SelectionChange }

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: (),
+  );
+}