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

package/button/index.d.ts

@@ -12,6 +12,7 @@ import * as i4 from '@angular/material/core';
 import { InjectionToken } from '@angular/core';
 import { MatRipple } from '@angular/material/core';
 import { NgZone } from '@angular/core';
+import { OnChanges } from '@angular/core';
 import { OnDestroy } from '@angular/core';
 import { OnInit } from '@angular/core';
 import { Platform } from '@angular/cdk/platform';
@@ -94,7 +95,7 @@ export declare class MatButton extends MatButtonBase {
 }
 
 /** Base class for all buttons.  */
-declare class MatButtonBase extends _MatButtonMixin implements CanDisable, CanColor, CanDisableRipple, AfterViewInit, OnDestroy {
+declare class MatButtonBase extends _MatButtonMixin implements CanDisable, CanColor, CanDisableRipple, AfterViewInit, OnChanges, OnDestroy {
     _platform: Platform;
     _ngZone: NgZone;
     _animationMode?: string | undefined;
@@ -117,12 +118,12 @@ declare class MatButtonBase extends _MatButtonMixin implements CanDisable, CanCo
     protected _ripple?: MatRipple;
     constructor(elementRef: ElementRef, _platform: Platform, _ngZone: NgZone, _animationMode?: string | undefined);
     ngAfterViewInit(): void;
+    ngOnChanges(): void;
     ngOnDestroy(): void;
     /** Focuses the button. */
     focus(_origin?: FocusOrigin, options?: FocusOptions): void;
     /** Gets whether the button has one of the given attributes. */
     private _hasHostAttributes;
-    _isRippleDisabled(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatButtonBase, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<MatButtonBase, never, never, {}, {}, never, never, false, never>;
 }

package/checkbox/_checkbox-theme.scss

@@ -1,6 +1,7 @@
 @use 'sass:map';
 @use '@material/checkbox/checkbox-theme' as mdc-checkbox-theme;
 @use '@material/form-field' as mdc-form-field;
+@use '../core/style/sass-utils';
 @use '../core/theming/theming';
 @use '../core/typography/typography';
 @use '../core/mdc-helpers/mdc-helpers';
@@ -12,9 +13,11 @@
   $warn: map.get($config, warn);
   $foreground: map.get($config, foreground);
 
-  .mat-mdc-checkbox {
+  @include sass-utils.current-selector-or-root() {
     @include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-color-tokens($config));
+  }
 
+  .mat-mdc-checkbox {
     &.mat-primary {
       $primary-config: map.merge($config, (accent: $primary));
       @include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-color-tokens($primary-config));
@@ -40,9 +43,12 @@
 @mixin typography($config-or-theme) {
   $config: typography.private-typography-to-2018-config(
           theming.get-typography-config($config-or-theme));
-  .mat-mdc-checkbox {
+
+  @include sass-utils.current-selector-or-root() {
     @include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-typography-tokens($config));
+  }
 
+  .mat-mdc-checkbox {
     @include mdc-helpers.using-mdc-typography($config) {
       // TODO(mmalerba): Switch to static-styles, theme-styles, and theme once they're available.
       @include mdc-form-field.core-styles($query: mdc-helpers.$mdc-typography-styles-query);
@@ -53,7 +59,7 @@
 @mixin density($config-or-theme) {
   $density-scale: theming.get-density-config($config-or-theme);
 
-  .mat-mdc-checkbox {
+  @include sass-utils.current-selector-or-root() {
     @include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-density-tokens($density-scale));
   }
 

package/chips/_chips-theme.scss

@@ -2,100 +2,84 @@
 @use 'sass:map';
 @use 'sass:meta';
 @use '@material/chips/chip-theme' as mdc-chip-theme;
-@use '@material/chips/chip-set' as mdc-chip-set;
-@use '@material/theme/theme-color' as mdc-theme-color;
-@use '@material/theme/color-palette' as mdc-color-palette;
-@use '@material/typography' as mdc-typography;
-@use '../core/mdc-helpers/mdc-helpers';
+@use '../core/tokens/m2/mdc/chip' as tokens-mdc-chip;
+@use '../core/theming/palette';
 @use '../core/theming/theming';
 @use '../core/typography/typography';
+@use '../core/mdc-helpers/mdc-helpers';
 
-@mixin _chip-variant($background, $foreground) {
-  @include mdc-chip-theme.theme((
-    elevated-container-color: $background,
-    elevated-disabled-container-color: $background,
-    label-text-color: $foreground,
-    disabled-label-text-color: $foreground,
-    with-icon-icon-color: $foreground,
-    with-icon-disabled-icon-color: $foreground,
-    with-trailing-icon-disabled-trailing-icon-color: $foreground,
-    with-trailing-icon-trailing-icon-color: $foreground,
-    with-icon-selected-icon-color: $foreground,
-  ));
-}
+@function _get-default-palette($config) {
+  $is-dark: map.get($config, is-dark);
+  $grey-50: map.get(palette.$grey-palette, 50);
+  $grey-900: map.get(palette.$grey-palette, 900);
+  $default-foreground: if($is-dark, $grey-50, $grey-900);
 
-@mixin _colored-chip($palette) {
-  $background: theming.get-color-from-palette($palette);
-  $foreground: theming.get-color-from-palette($palette, default-contrast);
+  $surface: map.get(map.get($config, background), card);
+  $on-surface: if(
+    mdc-helpers.variable-safe-contrast-tone($surface, $is-dark) == 'dark',
+    #000,
+    #fff
+  );
+  $default-background: if(
+    meta.type-of($on-surface) == color and meta.type-of($surface) == color,
+    color.mix($on-surface, $surface, 12%),
+    $on-surface
+  );
 
-  &.mat-mdc-chip-selected,
-  &.mat-mdc-chip-highlighted {
-    @include _chip-variant($background, $foreground);
-  }
+  @return (default: $default-background, default-contrast: $default-foreground);
 }
 
 @mixin color($config-or-theme) {
   $config: theming.get-color-config($config-or-theme);
-  $primary: map.get($config, primary);
-  $accent: map.get($config, accent);
-  $warn: map.get($config, warn);
-  $foreground: map.get($config, foreground);
-  $is-dark: map.get($config, is-dark);
-
-  @include mdc-helpers.using-mdc-theme($config) {
-    $on-surface: mdc-theme-color.prop-value(on-surface);
-    $surface: mdc-theme-color.prop-value(surface);
-
-    .mat-mdc-standard-chip {
-      $standard-background: if(
-        meta.type-of($on-surface) == color and meta.type-of($surface) == color,
-        color.mix($on-surface, $surface, 12%),
-        $on-surface
-      );
 
-      @include _chip-variant(
-        $standard-background,
-        if($is-dark, mdc-color-palette.$grey-50, mdc-color-palette.$grey-900)
-      );
+  .mat-mdc-standard-chip {
+    $default-palette: _get-default-palette($config);
+    $default-config: map.merge($config, (primary: $default-palette));
+    $default-color-tokens: tokens-mdc-chip.get-color-tokens($default-config);
+    @include mdc-chip-theme.theme($default-color-tokens);
 
+    &.mat-mdc-chip-selected,
+    &.mat-mdc-chip-highlighted {
       &.mat-primary {
-        @include _colored-chip($primary);
+        $primary-color-tokens: tokens-mdc-chip.get-color-tokens($config);
+        @include mdc-chip-theme.theme($primary-color-tokens);
       }
 
       &.mat-accent {
-        @include _colored-chip($accent);
+        $accent-config: map.merge($config, (primary: map.get($config, accent)));
+        $accent-color-tokens: tokens-mdc-chip.get-color-tokens($accent-config);
+        @include mdc-chip-theme.theme($accent-color-tokens);
       }
 
       &.mat-warn {
-        @include _colored-chip($warn);
+        $warn-config: map.merge($config, (primary: map.get($config, warn)));
+        $warn-color-tokens: tokens-mdc-chip.get-color-tokens($warn-config);
+        @include mdc-chip-theme.theme($warn-color-tokens);
       }
     }
   }
 
   .mat-mdc-chip-focus-overlay {
-    background: map.get($foreground, base);
+    background: map.get(map.get($config, foreground), base);
   }
 }
 
 @mixin typography($config-or-theme) {
   $config: typography.private-typography-to-2018-config(
-      theming.get-typography-config($config-or-theme));
-  @include mdc-chip-set.core-styles($query: mdc-helpers.$mdc-typography-styles-query);
-  @include mdc-helpers.using-mdc-typography($config) {
-    // Note that we don't go through MDC's typography mixin, because it assigns the styles to
-    // an inner element which makes it difficult for clients to customize. Instead we apply the
-    // same styles ourselves to the root.
-    .mat-mdc-standard-chip {
-      @include mdc-typography.typography(body2, $query: mdc-helpers.$mdc-typography-styles-query);
-    }
+    theming.get-typography-config($config-or-theme)
+  );
+  $typography-tokens: tokens-mdc-chip.get-typography-tokens($config);
+
+  .mat-mdc-standard-chip {
+    @include mdc-chip-theme.theme($typography-tokens);
   }
 }
 
 @mixin density($config-or-theme) {
   $density-scale: theming.get-density-config($config-or-theme);
-  $density-scale: theming.clamp-density($density-scale, -2);
+  $density-tokens: tokens-mdc-chip.get-density-tokens($density-scale);
   .mat-mdc-chip.mat-mdc-standard-chip {
-    @include mdc-chip-theme.density($density-scale, $query: mdc-helpers.$mdc-base-styles-query);
+    @include mdc-chip-theme.theme($density-tokens);
   }
 }
 

package/core/mdc-helpers/_mdc-helpers.scss

@@ -100,7 +100,7 @@ $mat-typography-mdc-level-mappings: (
 
 // MDC logs a warning if the `contrast-tone` function is called with a CSS variable.
 // This function falls back to determining the tone based on whether the theme is light or dark.
-@function _variable-safe-contrast-tone($value, $is-dark) {
+@function variable-safe-contrast-tone($value, $is-dark) {
   @if ($value == 'dark' or $value == 'light' or type-of($value) == 'color') {
     @return mdc-theme-color.contrast-tone($value);
   }
@@ -109,7 +109,7 @@ $mat-typography-mdc-level-mappings: (
 }
 
 @function _variable-safe-ink-color-for-fill($text-style, $fill-color, $is-dark) {
-  $contrast-tone: _variable-safe-contrast-tone($fill-color, $is-dark);
+  $contrast-tone: variable-safe-contrast-tone($fill-color, $is-dark);
   @return map.get(map.get(mdc-theme-color.$text-colors, $contrast-tone), $text-style);
 }
 
@@ -137,17 +137,17 @@ $mat-typography-mdc-level-mappings: (
   // Set new values based on the given Angular Material theme.
   mdc-theme-color.$primary: $primary;
   mdc-theme-color.$on-primary:
-      if(_variable-safe-contrast-tone(mdc-theme-color.$primary, $is-dark) == 'dark', #000, #fff);
+      if(variable-safe-contrast-tone(mdc-theme-color.$primary, $is-dark) == 'dark', #000, #fff);
   mdc-theme-color.$secondary: $accent;
   mdc-theme-color.$on-secondary:
-      if(_variable-safe-contrast-tone(mdc-theme-color.$secondary, $is-dark) == 'dark', #000, #fff);
+      if(variable-safe-contrast-tone(mdc-theme-color.$secondary, $is-dark) == 'dark', #000, #fff);
   mdc-theme-color.$background: theming.get-color-from-palette($background-palette, background);
   mdc-theme-color.$surface: theming.get-color-from-palette($background-palette, card);
   mdc-theme-color.$on-surface:
-      if(_variable-safe-contrast-tone(mdc-theme-color.$surface, $is-dark) == 'dark', #000, #fff);
+      if(variable-safe-contrast-tone(mdc-theme-color.$surface, $is-dark) == 'dark', #000, #fff);
   mdc-theme-color.$error: $warn;
   mdc-theme-color.$on-error:
-      if(_variable-safe-contrast-tone(mdc-theme-color.$error, $is-dark) == 'dark', #000, #fff);
+      if(variable-safe-contrast-tone(mdc-theme-color.$error, $is-dark) == 'dark', #000, #fff);
   mdc-theme-color.$property-values: (
       // Primary
       primary: mdc-theme-color.$primary,

package/core/style/_sass-utils.scss

@@ -0,0 +1,7 @@
+// Include content under the current selector (&) or the document root if there is no current
+// selector.
+@mixin current-selector-or-root($root: html) {
+  @at-root #{& or $root} {
+    @content;
+  }
+}

package/core/tokens/m2/mdc/_chip.scss

@@ -0,0 +1,313 @@
+@use 'sass:color';
+@use 'sass:map';
+@use '../../token-utils';
+@use '../../../mdc-helpers/mdc-helpers';
+@use '../../../theming/theming';
+@use '../../../typography/typography-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mdc, chip);
+
+// Tokens that can't be configured through Angular Material's current theming API,
+// but may be in a future version of the theming API.
+//
+// Tokens that are available in MDC, but not used in Angular Material should be mapped to `null`.
+// `null` indicates that we are intentionally choosing not to emit a slot or value for the token in
+// our CSS.
+@function get-unthemable-tokens() {
+  @return (
+    // The shape & radius of the chip.
+    container-shape:
+      (
+        family: 'rounded',
+        radius: (
+          16px 16px 16px 16px,
+        )
+      ),
+    // The shape & radius of the avatar.
+    with-avatar-avatar-shape:
+      (
+        family: 'rounded',
+        radius: (
+          14px 14px 14px 14px,
+        )
+      ),
+    // The width & height of the chip avatar.
+    with-avatar-avatar-size: 28px,
+    // The width & height of the chip icon.
+    with-icon-icon-size: 18px,
+    // Not used by MDC.
+    disabled-label-text-opacity: null,
+    // Not used by MDC.
+    disabled-outline-opacity: null,
+    // Not used by MDC.
+    elevated-disabled-container-opacity: null,
+    // Not used by MDC.
+    flat-disabled-outline-opacity: null,
+    // Not used by MDC.
+    flat-disabled-unselected-outline-opacity: null,
+    // Our chips do not have a border.
+    flat-outline-width: null,
+    // Our chips do not have a border.
+    flat-selected-outline-width: null,
+    // Our chips do not have a border.
+    flat-unselected-outline-width: null,
+    // Our chips do not have a border.
+    outline-width: null,
+    // Not used by MDC.
+    with-avatar-disabled-avatar-opacity: null,
+    // Not used by MDC.
+    with-icon-disabled-icon-opacity: null,
+    // Not used by MDC.
+    with-leading-icon-disabled-leading-icon-opacity: null,
+    // Not used by MDC.
+    with-leading-icon-leading-icon-size: null,
+    // Not used by MDC.
+    with-trailing-icon-disabled-trailing-icon-opacity: null,
+    // Not used by MDC.
+    with-trailing-icon-trailing-icon-size: null,
+    // Elevated chips not implemented.
+    container-elevation: null,
+    // Elevated chips not implemented.
+    container-shadow-color: null,
+    // Our chips do not have a border.
+    disabled-outline-color: null,
+    // Elevated chips not implemented.
+    elevated-container-elevation: null,
+    // Elevated chips not implemented.
+    elevated-container-shadow-color: null,
+    // Elevated chips not implemented.
+    container-surface-tint-layer-color: null,
+    // Elevated chips not implemented.
+    elevated-disabled-container-elevation: null,
+    // Elevated chips not implemented.
+    elevated-focus-container-elevation: null,
+    // Elevated chips not implemented.
+    elevated-hover-container-elevation: null,
+    // Elevated chips not implemented.
+    elevated-pressed-container-elevation: null,
+    // Elevated chips not implemented.
+    elevated-selected-container-color: null,
+    // Elevated chips not implemented.
+    elevated-selected-container-elevation: null,
+    // Elevated chips not implemented.
+    elevated-unselected-container-color: null,
+    // Elevated chips not implemented.
+    flat-container-elevation: null,
+    // Our chips do not have a border.
+    flat-disabled-outline-color: null,
+    // Not providing this uses
+    flat-disabled-selected-container-color: null,
+    // Not used by MDC.
+    flat-disabled-selected-container-opacity: null,
+    // Unused.
+    flat-disabled-selected-outline-color: null,
+    // Unused.
+    flat-disabled-selected-outline-opacity: null,
+    // Unused.
+    flat-disabled-unselected-outline-color: null,
+    // Unused.
+    flat-focus-outline-color: null,
+    // Unused.
+    flat-outline-color: null,
+    // Unused.
+    flat-selected-container-color: null,
+    // Unused.
+    flat-selected-focus-container-elevation: null,
+    // Unused.
+    flat-selected-hover-container-elevation: null,
+    // Unused.
+    flat-selected-outline-color: null,
+    // Unused.
+    flat-selected-pressed-container-elevation: null,
+    // Unused.
+    flat-unselected-focus-container-elevation: null,
+    // Unused.
+    flat-unselected-focus-outline-color: null,
+    // Unused.
+    flat-unselected-hover-container-elevation: null,
+    // Unused.
+    flat-unselected-outline-color: null,
+    // Unused.
+    flat-unselected-pressed-container-elevation: null,
+    // Unused.
+    focus-label-text-color: null,
+    // Unused.
+    focus-outline-color: null,
+    // Unused.
+    focus-state-layer-color: null,
+    // Unused.
+    focus-state-layer-opacity: null,
+    // Unused.
+    hover-label-text-color: null,
+    // Unused.
+    hover-state-layer-color: null,
+    // Unused.
+    hover-state-layer-opacity: null,
+    // Unused.
+    outline-color: null,
+    // Unused.
+    pressed-label-text-color: null,
+    // Unused.
+    pressed-state-layer-color: null,
+    // Unused.
+    pressed-state-layer-opacity: null,
+    // Unused.
+    selected-focus-label-text-color: null,
+    // Unused.
+    selected-focus-state-layer-color: null,
+    // Unused.
+    selected-focus-state-layer-opacity: null,
+    // Unused.
+    selected-hover-label-text-color: null,
+    // Unused.
+    selected-hover-state-layer-color: null,
+    // Unused.
+    selected-hover-state-layer-opacity: null,
+    // Unused.
+    selected-label-text-color: null,
+    // Unused.
+    selected-pressed-label-text-color: null,
+    // Unused.
+    selected-pressed-state-layer-color: null,
+    // Unused.
+    selected-pressed-state-layer-opacity: null,
+    // Unused.
+    unselected-focus-label-text-color: null,
+    // Unused.
+    unselected-focus-state-layer-color: null,
+    // Unused.
+    unselected-focus-state-layer-opacity: null,
+    // Unused.
+    unselected-hover-label-text-color: null,
+    // Unused.
+    unselected-hover-state-layer-color: null,
+    // Unused.
+    unselected-hover-state-layer-opacity: null,
+    // Unused.
+    unselected-label-text-color: null,
+    // Unused.
+    unselected-pressed-label-text-color: null,
+    // Unused.
+    unselected-pressed-state-layer-color: null,
+    // Unused.
+    unselected-pressed-state-layer-opacity: null,
+    // Unused.
+    with-icon-focus-icon-color: null,
+    // Unused.
+    with-icon-hover-icon-color: null,
+    // Unused.
+    with-icon-pressed-icon-color: null,
+    // Unused.
+    with-icon-selected-focus-icon-color: null,
+    // Unused.
+    with-icon-selected-hover-icon-color: null,
+    // Unused.
+    with-icon-selected-pressed-icon-color: null,
+    // Unused.
+    with-icon-unselected-focus-icon-color: null,
+    // Unused.
+    with-icon-unselected-hover-icon-color: null,
+    // Unused.
+    with-icon-unselected-icon-color: null,
+    // Unused.
+    with-icon-unselected-pressed-icon-color: null,
+    // Unused.
+    with-leading-icon-disabled-leading-icon-color: null,
+    // Unused.
+    with-leading-icon-focus-leading-icon-color: null,
+    // Unused.
+    with-leading-icon-hover-leading-icon-color: null,
+    // Unused.
+    with-leading-icon-leading-icon-color: null,
+    // Unused.
+    with-leading-icon-pressed-leading-icon-color: null,
+    // Unused.
+    with-trailing-icon-focus-trailing-icon-color: null,
+    // Unused.
+    with-trailing-icon-hover-trailing-icon-color: null,
+    // Unused.
+    with-trailing-icon-pressed-trailing-icon-color: null
+  );
+}
+
+// Tokens that can be configured through Angular Material's color theming API.
+@function get-color-tokens($config) {
+  $palette: map.get($config, primary);
+  $background: theming.get-color-from-palette($palette);
+  $foreground: theming.get-color-from-palette($palette, default-contrast);
+
+  @return (
+    // The text color of a disabled chip.
+    disabled-label-text-color: $foreground,
+    // The background-color of the chip.
+    elevated-container-color: $background,
+    // The background-color of a disabled chip.
+    elevated-disabled-container-color: $background,
+    // The chip text color.
+    label-text-color: $foreground,
+    // The icon color of a chip.
+    with-icon-icon-color: $foreground,
+    // The color of the icon of a disabled chip.
+    with-icon-disabled-icon-color: $foreground,
+    // The color of the icon of a selected chip.
+    with-icon-selected-icon-color: $foreground,
+    // The color of the icon at the end of a disabled chip.
+    with-trailing-icon-disabled-trailing-icon-color: $foreground,
+    // The color of the icon at the end of the chip.
+    with-trailing-icon-trailing-icon-color: $foreground
+  );
+}
+
+// Tokens that can be configured through Angular Material's typography theming API.
+@function get-typography-tokens($config) {
+  // TODO(wagnermaciel): The earlier implementation of the chip used MDC's APIs to create the
+  // typography tokens. As a result, we unintentionally allowed `null` typography configs to be
+  // passed in. Since there a lot of apps that now depend on this pattern, we need this temporary
+  // fallback.
+  @if ($config == null) {
+    $config: mdc-helpers.private-fallback-typography-from-mdc();
+  }
+
+  @return (
+    // The font family of the chip text.
+    label-text-font: typography-utils.font-family($config, body-2) or
+      typography-utils.font-family($config),
+    // The line height of the chip text.
+    label-text-line-height: typography-utils.line-height($config, body-2),
+    // The font size of the chip text.
+    label-text-size: typography-utils.font-size($config, body-2),
+    // The letter spacing of the chip label.
+    label-text-tracking: typography-utils.letter-spacing($config, body-2),
+    // The font weight of the chip text.
+    label-text-weight: typography-utils.font-weight($config, body-2)
+  );
+}
+
+// Tokens that can be configured through Angular Material's density theming API.
+@function get-density-tokens($config) {
+  $scale: theming.clamp-density($config, -2);
+  @return (
+    // The height of the chip.
+    container-height:
+      map.get(
+        (
+          0: 32px,
+          -1: 28px,
+          -2: 24px,
+        ),
+        $scale
+      )
+  );
+}
+
+// Combines the tokens generated by the above functions into a single map with placeholder values.
+// This is used to create token slots.
+@function get-token-slots() {
+  @return token-utils.merge-all(
+    get-unthemable-tokens(),
+    get-color-tokens(token-utils.$placeholder-color-config),
+    get-typography-tokens(token-utils.$placeholder-typography-config),
+    get-density-tokens(token-utils.$placeholder-density-config)
+  );
+}

package/core/tokens/m2/mdc/_linear-progress.scss

@@ -17,12 +17,9 @@ $prefix: (mdc, linear-progress);
   $height: 4px;
 
   @return (
-    // The height of the progress bar. MDC has three tokens with the goal
-    // of having `track-height` apply only to the track. In our case, all three
-    // are always the same. Specify all three while the transition is in
-    // progress.
+    // The height of the progress bar. `active-indicator-height` applies to the
+    // bar and `track-height` applies to the track.
     active-indicator-height: $height,
-    bar-and-track-height: $height,
     track-height: $height,
   );
 }