@angular/material 17.1.0-next.3 → 17.1.0-rc.0

package/LICENSE

@@ -1,6 +1,6 @@
 The MIT License
 
-Copyright (c) 2023 Google LLC.
+Copyright (c) 2024 Google LLC.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/_index.scss

@@ -143,12 +143,12 @@
   tree-base;
 
 // MDC Helpers
-@forward './core/mdc-helpers/mdc-helpers' as private-* show private-using-mdc-theme,
-  private-using-mdc-typography, private-disable-mdc-fallback-declarations,
-  private-typography-config-level-from-mdc, private-if-touch-targets-unsupported,
-  $private-mdc-base-styles-query, $private-mdc-base-styles-without-animation-query,
-  $private-mdc-theme-styles-query, $private-mdc-typography-styles-query;
+@forward './core/mdc-helpers/mdc-helpers' as private-* show
+  private-disable-mdc-fallback-declarations, private-typography-config-level-from-mdc,
+  private-if-touch-targets-unsupported, $private-mdc-base-styles-query,
+  $private-mdc-base-styles-without-animation-query, $private-mdc-theme-styles-query,
+  $private-mdc-typography-styles-query;
 
 // New theming APIs:
 @forward './core/theming/inspection' show get-theme-version, get-theme-type, get-theme-color,
-  get-theme-typography, get-theme-density, theme-has;
+  get-theme-typography, get-theme-density, theme-has, theme-remove;

package/bottom-sheet/index.d.ts

@@ -2,7 +2,6 @@ import { AnimationEvent as AnimationEvent_2 } from '@angular/animations';
 import { AnimationTriggerMetadata } from '@angular/animations';
 import { BreakpointObserver } from '@angular/cdk/layout';
 import { CdkDialogContainer } from '@angular/cdk/dialog';
-import { ChangeDetectorRef } from '@angular/core';
 import { ComponentRef } from '@angular/core';
 import { ComponentType } from '@angular/cdk/portal';
 import { DialogConfig } from '@angular/cdk/dialog';
@@ -133,7 +132,6 @@ export declare class MatBottomSheetConfig<D = any> {
  * @docs-private
  */
 export declare class MatBottomSheetContainer extends CdkDialogContainer implements OnDestroy {
-    private _changeDetectorRef;
     private _breakpointSubscription;
     /** The state of the bottom sheet animations. */
     _animationState: 'void' | 'visible' | 'hidden';
@@ -141,7 +139,7 @@ export declare class MatBottomSheetContainer extends CdkDialogContainer implemen
     _animationStateChanged: EventEmitter<AnimationEvent_2>;
     /** Whether the component has been destroyed. */
     private _destroyed;
-    constructor(elementRef: ElementRef, focusTrapFactory: FocusTrapFactory, document: any, config: DialogConfig, checker: InteractivityChecker, ngZone: NgZone, overlayRef: OverlayRef, breakpointObserver: BreakpointObserver, _changeDetectorRef: ChangeDetectorRef, focusMonitor?: FocusMonitor);
+    constructor(elementRef: ElementRef, focusTrapFactory: FocusTrapFactory, document: any, config: DialogConfig, checker: InteractivityChecker, ngZone: NgZone, overlayRef: OverlayRef, breakpointObserver: BreakpointObserver, focusMonitor?: FocusMonitor);
     /** Begin animation of bottom sheet entrance into view. */
     enter(): void;
     /** Begin animation of the bottom sheet exiting from view. */
@@ -151,7 +149,7 @@ export declare class MatBottomSheetContainer extends CdkDialogContainer implemen
     _onAnimationStart(event: AnimationEvent_2): void;
     protected _captureInitialFocus(): void;
     private _toggleClass;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MatBottomSheetContainer, [null, null, { optional: true; }, null, null, null, null, null, null, null]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatBottomSheetContainer, [null, null, { optional: true; }, null, null, null, null, null, null]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MatBottomSheetContainer, "mat-bottom-sheet-container", never, {}, {}, never, never, true, never>;
 }
 

package/button/_button-base.scss

@@ -119,6 +119,12 @@
   }
 }
 
+// Adds an elevation shadow to a button.
+@mixin mat-private-button-elevation($token-name) {
+  // MDC outputs a variable that is the same as the token name, but suffixed with `-shadow`.
+  box-shadow: var(#{token-utils.get-token-variable($token-name) + '-shadow'});
+}
+
 @mixin mat-private-button-touch-target($is-square) {
   // Element used to ensure that the button has a touch target that meets the required minimum.
   // Note that we use this, instead of MDC's built-in `mdc-button--touch` class, because the MDC

package/button/_button-theme.scss

@@ -1,11 +1,10 @@
+@use 'sass:map';
 @use '@material/button/button-text-theme' as mdc-button-text-theme;
 @use '@material/button/button-filled-theme' as mdc-button-filled-theme;
 @use '@material/button/button-protected-theme' as mdc-button-protected-theme;
 @use '@material/button/button-outlined-theme' as mdc-button-outlined-theme;
-@use '@material/elevation/elevation-theme' as mdc-elevation-theme;
 
 @use './button-base';
-@use '../core/mdc-helpers/mdc-helpers';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
 @use '../core/tokens/token-utils';
@@ -80,142 +79,177 @@
   @include token-utils.create-token-values(tokens-mat-outlined-button.$prefix, $mat-tokens);
 }
 
-@mixin base($theme) {
-  // TODO(mmalerba): Move button base tokens here
+@mixin _theme-from-tokens($tokens) {
+  @if ($tokens != ()) {
+    @include mdc-button-text-theme.theme(map.get($tokens, tokens-mdc-text-button.$prefix));
+    @include mdc-button-protected-theme.theme(
+      map.get($tokens, tokens-mdc-protected-button.$prefix));
+    @include mdc-button-filled-theme.theme(map.get($tokens, tokens-mdc-filled-button.$prefix));
+    @include mdc-button-outlined-theme.theme(map.get($tokens, tokens-mdc-outlined-button.$prefix));
+
+    @include token-utils.create-token-values(
+      tokens-mat-text-button.$prefix, map.get($tokens, tokens-mat-text-button.$prefix));
+    @include token-utils.create-token-values(
+      tokens-mat-protected-button.$prefix, map.get($tokens, tokens-mat-protected-button.$prefix));
+    @include token-utils.create-token-values(
+      tokens-mat-filled-button.$prefix, map.get($tokens, tokens-mat-filled-button.$prefix));
+    @include token-utils.create-token-values(
+      tokens-mat-outlined-button.$prefix, map.get($tokens, tokens-mat-outlined-button.$prefix));
+  }
 }
 
-@mixin color($theme) {
-  .mat-mdc-button {
-    @include _text-button-variant($theme, null);
-
-    &.mat-primary {
-      @include _text-button-variant($theme, primary);
-    }
-
-    &.mat-accent {
-      @include _text-button-variant($theme, accent);
-    }
-
-    &.mat-warn {
-      @include _text-button-variant($theme, warn);
-    }
+@mixin base($theme) {
+  @if inspection.get-theme-version($theme) == 1 {
+    @include theme-from-tokens(inspection.get-theme-tokens($theme, base));
   }
-
-  .mat-mdc-unelevated-button {
-    @include _filled-button-variant($theme, null);
-
-    &.mat-primary {
-      @include _filled-button-variant($theme, primary);
+  @else {
+    @include sass-utils.current-selector-or-root() {
+      @include mdc-button-text-theme.theme(
+        tokens-mdc-text-button.get-unthemable-tokens());
+      @include mdc-button-filled-theme.theme(
+        tokens-mdc-filled-button.get-unthemable-tokens());
+      @include mdc-button-protected-theme.theme(
+        tokens-mdc-protected-button.get-unthemable-tokens());
+      @include mdc-button-outlined-theme.theme(
+        tokens-mdc-outlined-button.get-unthemable-tokens());
     }
+  }
+}
 
-    &.mat-accent {
-      @include _filled-button-variant($theme, accent);
+@mixin color($theme) {
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
+  }
+  @else {
+    @include sass-utils.current-selector-or-root() {
+      @include _text-button-variant($theme, null);
+      @include _filled-button-variant($theme, null);
+      @include _protected-button-variant($theme, null);
+      @include _outlined-button-variant($theme, null);
     }
 
-    &.mat-warn {
-      @include _filled-button-variant($theme, warn);
-    }
-  }
+    .mat-mdc-button {
+      &.mat-primary {
+        @include _text-button-variant($theme, primary);
+      }
 
-  .mat-mdc-raised-button {
-    @include _protected-button-variant($theme, null);
+      &.mat-accent {
+        @include _text-button-variant($theme, accent);
+      }
 
-    &.mat-primary {
-      @include _protected-button-variant($theme, primary);
+      &.mat-warn {
+        @include _text-button-variant($theme, warn);
+      }
     }
 
-    &.mat-accent {
-      @include _protected-button-variant($theme, accent);
-    }
+    .mat-mdc-unelevated-button {
+      &.mat-primary {
+        @include _filled-button-variant($theme, primary);
+      }
 
-    &.mat-warn {
-      @include _protected-button-variant($theme, warn);
+      &.mat-accent {
+        @include _filled-button-variant($theme, accent);
+      }
+
+      &.mat-warn {
+        @include _filled-button-variant($theme, warn);
+      }
     }
 
-    // TODO(wagnermaciel): Remove this workaround when b/301126527 is resolved
-    @include mdc-helpers.disable-mdc-fallback-declarations {
-      @include mdc-elevation-theme.elevation(2);
+    .mat-mdc-raised-button {
+      &.mat-primary {
+        @include _protected-button-variant($theme, primary);
+      }
 
-      &:hover, &:focus {
-        @include mdc-elevation-theme.elevation(4);
+      &.mat-accent {
+        @include _protected-button-variant($theme, accent);
       }
 
-      &:active, &:focus:active {
-        @include mdc-elevation-theme.elevation(8);
+      &.mat-warn {
+        @include _protected-button-variant($theme, warn);
       }
     }
-  }
-
-  .mat-mdc-outlined-button {
-    @include _outlined-button-variant($theme, null);
 
-    &.mat-primary {
-      @include _outlined-button-variant($theme, primary);
-    }
+    .mat-mdc-outlined-button {
+      &.mat-primary {
+        @include _outlined-button-variant($theme, primary);
+      }
 
-    &.mat-accent {
-      @include _outlined-button-variant($theme, accent);
-    }
+      &.mat-accent {
+        @include _outlined-button-variant($theme, accent);
+      }
 
-    &.mat-warn {
-      @include _outlined-button-variant($theme, warn);
+      &.mat-warn {
+        @include _outlined-button-variant($theme, warn);
+      }
     }
   }
 }
 
 @mixin typography($theme) {
-  @include sass-utils.current-selector-or-root() {
-    $text-typography-tokens: tokens-mdc-text-button.get-typography-tokens($theme);
-    $filled-typography-tokens: tokens-mdc-filled-button.get-typography-tokens($theme);
-    $outlined-typography-tokens: tokens-mdc-outlined-button.get-typography-tokens($theme);
-    $protected-typography-tokens: tokens-mdc-protected-button.get-typography-tokens($theme);
-
-    @include mdc-button-text-theme.theme($text-typography-tokens);
-    @include mdc-button-filled-theme.theme($filled-typography-tokens);
-    @include mdc-button-outlined-theme.theme($outlined-typography-tokens);
-    @include mdc-button-protected-theme.theme($protected-typography-tokens);
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
+  }
+  @else {
+    @include sass-utils.current-selector-or-root() {
+      $text-typography-tokens: tokens-mdc-text-button.get-typography-tokens($theme);
+      $filled-typography-tokens: tokens-mdc-filled-button.get-typography-tokens($theme);
+      $outlined-typography-tokens: tokens-mdc-outlined-button.get-typography-tokens($theme);
+      $protected-typography-tokens: tokens-mdc-protected-button.get-typography-tokens($theme);
+
+      @include mdc-button-text-theme.theme($text-typography-tokens);
+      @include mdc-button-filled-theme.theme($filled-typography-tokens);
+      @include mdc-button-outlined-theme.theme($outlined-typography-tokens);
+      @include mdc-button-protected-theme.theme($protected-typography-tokens);
+    }
   }
 }
 
 @mixin density($theme) {
-  $density-scale: theming.clamp-density(inspection.get-theme-density($theme), -3);
-
-  .mat-mdc-button {
-    $density-tokens: tokens-mdc-text-button.get-density-tokens($theme);
-    @include mdc-button-text-theme.theme($density-tokens);
-    @include button-base.mat-private-button-touch-target-density($density-scale);
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
   }
+  @else {
+    $density-scale: theming.clamp-density(inspection.get-theme-density($theme), -3);
 
-  .mat-mdc-raised-button {
-    $density-tokens: tokens-mdc-protected-button.get-density-tokens($theme);
-    @include mdc-button-protected-theme.theme($density-tokens);
-    @include button-base.mat-private-button-touch-target-density($density-scale);
-  }
+    @include sass-utils.current-selector-or-root() {
+      $text-density-tokens: tokens-mdc-text-button.get-density-tokens($theme);
+      $filled-density-tokens: tokens-mdc-filled-button.get-density-tokens($theme);
+      $outlined-density-tokens: tokens-mdc-outlined-button.get-density-tokens($theme);
+      $protected-density-tokens: tokens-mdc-protected-button.get-density-tokens($theme);
 
-  .mat-mdc-unelevated-button {
-    $density-tokens: tokens-mdc-filled-button.get-density-tokens($theme);
-    @include mdc-button-filled-theme.theme($density-tokens);
-    @include button-base.mat-private-button-touch-target-density($density-scale);
-  }
+      @include mdc-button-text-theme.theme($text-density-tokens);
+      @include mdc-button-filled-theme.theme($filled-density-tokens);
+      @include mdc-button-outlined-theme.theme($outlined-density-tokens);
+      @include mdc-button-protected-theme.theme($protected-density-tokens);
+    }
 
-  .mat-mdc-outlined-button {
-    $density-tokens: tokens-mdc-outlined-button.get-density-tokens($theme);
-    @include mdc-button-outlined-theme.theme($density-tokens);
-    @include button-base.mat-private-button-touch-target-density($density-scale);
+    .mat-mdc-button,
+    .mat-mdc-raised-button,
+    .mat-mdc-unelevated-button,
+    .mat-mdc-outlined-button {
+      // TODO: tokenize the touch target visibility.
+      @include button-base.mat-private-button-touch-target-density($density-scale);
+    }
   }
 }
 
 @mixin theme($theme) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-button') {
-    @include base($theme);
-    @if inspection.theme-has($theme, color) {
-      @include color($theme);
-    }
-    @if inspection.theme-has($theme, density) {
-      @include density($theme);
+    @if inspection.get-theme-version($theme) == 1 {
+      @include _theme-from-tokens(inspection.get-theme-tokens($theme));
     }
-    @if inspection.theme-has($theme, typography) {
-      @include typography($theme);
+    @else {
+      @include base($theme);
+      @if inspection.theme-has($theme, color) {
+        @include color($theme);
+      }
+      @if inspection.theme-has($theme, density) {
+        @include density($theme);
+      }
+      @if inspection.theme-has($theme, typography) {
+        @include typography($theme);
+      }
     }
   }
 }

package/button/_fab-theme.scss

@@ -47,6 +47,7 @@
   @else {
     @include sass-utils.current-selector-or-root() {
       @include _fab-variant($theme, null);
+      @include mdc-extended-fab-theme.theme(tokens-mdc-extended-fab.get-color-tokens($theme));
 
       .mat-mdc-fab,
       .mat-mdc-mini-fab {

package/button/_icon-button-theme.scss

@@ -43,19 +43,21 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
   }
   @else {
-    .mat-mdc-icon-button {
+    @include sass-utils.current-selector-or-root() {
       @include _icon-button-variant($theme, null);
 
-      &.mat-primary {
-        @include _icon-button-variant($theme, primary);
-      }
+      .mat-mdc-icon-button {
+        &.mat-primary {
+          @include _icon-button-variant($theme, primary);
+        }
 
-      &.mat-accent {
-        @include _icon-button-variant($theme, accent);
-      }
+        &.mat-accent {
+          @include _icon-button-variant($theme, accent);
+        }
 
-      &.mat-warn {
-        @include _icon-button-variant($theme, warn);
+        &.mat-warn {
+          @include _icon-button-variant($theme, warn);
+        }
       }
     }
   }

package/core/_core-theme.scss

@@ -6,7 +6,10 @@
 @use './option/optgroup-theme';
 @use './selection/pseudo-checkbox/pseudo-checkbox-theme';
 @use './style/elevation';
+@use './style/sass-utils';
 @use './typography/typography';
+@use './tokens/token-utils';
+@use './tokens/m2/mat/app' as tokens-mat-app;
 
 @mixin base($theme) {
   @include ripple-theme.base($theme);
@@ -21,13 +24,9 @@
   @include option-theme.color($theme);
   @include optgroup-theme.color($theme);
   @include pseudo-checkbox-theme.color($theme);
-
-  // Wrapper element that provides the theme background when the user's content isn't
-  // inside of a `mat-sidenav-container`. Note that we need to exclude the ampersand
-  // selector in case the mixin is included at the top level.
-  .mat-app-background#{if(&, ', &.mat-app-background', '')} {
-    background-color: inspection.get-theme-color($theme, background, background);
-    color: inspection.get-theme-color($theme, foreground, text);
+  @include sass-utils.current-selector-or-root() {
+    @include token-utils.create-token-values(tokens-mat-app.$prefix,
+      tokens-mat-app.get-color-tokens($theme));
   }
 
   // Provides external CSS classes for each elevation value. Each CSS class is formatted as

package/core/_core.scss

@@ -1,8 +1,9 @@
 @use '@angular/cdk';
-
-// Core styles that can be used to apply material design treatments to any element.
+@use './tokens/m2/mat/app' as tokens-mat-app;
+@use './tokens/token-utils';
 @use './ripple/ripple';
 @use './focus-indicators/private';
+@use './mdc-helpers/mdc-helpers';
 
 // Mixin that renders all of the core styles that are not theme-dependent.
 @mixin core() {
@@ -13,4 +14,18 @@
   @include cdk.text-field-autofill();
   @include private.structural-styling('mat');
   @include private.structural-styling('mat-mdc');
+
+  // Wrapper element that provides the theme background when the
+  // user's content isn't inside of a `mat-sidenav-container`.
+  @at-root {
+    .mat-app-background {
+      @include mdc-helpers.disable-mdc-fallback-declarations {
+        @include token-utils.use-tokens(tokens-mat-app.$prefix, tokens-mat-app.get-token-slots()) {
+          // Note: we need to emit fallback values here to avoid errors in internal builds.
+          @include token-utils.create-token-slot(background-color, background-color, transparent);
+          @include token-utils.create-token-slot(color, text-color, inherit);
+        }
+      }
+    }
+  }
 }

package/core/index.d.ts

@@ -17,6 +17,7 @@ import { Observable } from 'rxjs';
 import { OnDestroy } from '@angular/core';
 import { OnInit } from '@angular/core';
 import { Platform } from '@angular/cdk/platform';
+import { Provider } from '@angular/core';
 import { QueryList } from '@angular/core';
 import { Subject } from 'rxjs';
 import { Version } from '@angular/core';
@@ -549,7 +550,7 @@ export declare class MatLineModule {
 
 export declare class MatNativeDateModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<MatNativeDateModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<MatNativeDateModule, never, [typeof NativeDateModule], never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MatNativeDateModule, never, never, never>;
     static ɵinj: i0.ɵɵInjectorDeclaration<MatNativeDateModule>;
 }
 
@@ -952,6 +953,8 @@ export declare class NativeDateModule {
     static ɵinj: i0.ɵɵInjectorDeclaration<NativeDateModule>;
 }
 
+export declare function provideNativeDateAdapter(formats?: MatDateFormats): Provider[];
+
 /**
  * Interface that describes the configuration for the animation of a ripple.
  * There are two animation phases with different durations for the ripples.