@angular/material 17.0.3 → 17.0.5

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

@@ -151,4 +151,4 @@
 
 // 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/button/_button-theme.scss

@@ -1,4 +1,3 @@
-@use '@material/button/button' as mdc-button;
 @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;
@@ -19,7 +18,7 @@
 @use '../core/tokens/m2/mat/protected-button' as tokens-mat-protected-button;
 @use '../core/tokens/m2/mdc/text-button' as tokens-mdc-text-button;
 @use '../core/tokens/m2/mat/text-button' as tokens-mat-text-button;
-
+@use '../core/style/sass-utils';
 
 @mixin _text-button-variant($theme, $palette) {
   $mdc-tokens: if($palette,
@@ -165,15 +164,16 @@
 }
 
 @mixin typography($theme) {
-  @include mdc-helpers.using-mdc-typography($theme) {
-    @include mdc-button.without-ripple($query: mdc-helpers.$mdc-typography-styles-query);
-  }
-
-  .mat-mdc-button,
-  .mat-mdc-raised-button,
-  .mat-mdc-outlined-button,
-  .mat-mdc-unelevated-button {
-    line-height: inherit;
+  @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);
   }
 }
 

package/core/index.d.ts

@@ -784,6 +784,8 @@ export declare class MatRipple implements OnInit, OnDestroy, RippleTarget {
  *
  * This service allows us to avoid eagerly creating & attaching MatRipples.
  * It works by creating & attaching a ripple only when a component is first interacted with.
+ *
+ * @docs-private
  */
 export declare class MatRippleLoader implements OnDestroy {
     private _document;
@@ -791,6 +793,7 @@ export declare class MatRippleLoader implements OnDestroy {
     private _globalRippleOptions;
     private _platform;
     private _ngZone;
+    private _hosts;
     constructor();
     ngOnDestroy(): void;
     /**
@@ -811,8 +814,9 @@ export declare class MatRippleLoader implements OnDestroy {
     /** Handles creating and attaching component internals when a component it is initially interacted with. */
     private _onInteraction;
     /** Creates a MatRipple and appends it to the given element. */
-    createRipple(host: HTMLElement): MatRipple | undefined;
-    attachRipple(host: Element, ripple: MatRipple): void;
+    private _createRipple;
+    attachRipple(host: HTMLElement, ripple: MatRipple): void;
+    destroyRipple(host: HTMLElement): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatRippleLoader, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<MatRippleLoader>;
 }

package/core/tokens/m2/mat/_form-field.scss

@@ -1,6 +1,10 @@
+@use 'sass:math';
 @use 'sass:map';
+@use '@material/textfield' as mdc-textfield;
+@use '@material/density' as mdc-density;
 @use '../../token-utils';
 @use '../../../style/sass-utils';
+@use '../../../theming/theming';
 @use '../../../theming/inspection';
 @use '../../../theming/palette';
 
@@ -86,7 +90,52 @@ $prefix: (mat, form-field);
 
 // Tokens that can be configured through Angular Material's density theming API.
 @function get-density-tokens($theme) {
-  @return ();
+  $density-scale: theming.clamp-density(inspection.get-theme-density($theme), -4);
+  $height: mdc-density.prop-value(
+    $density-config: mdc-textfield.$density-config,
+    $density-scale: inspection.get-theme-density($theme),
+    $property-name: height,
+  );
+  $hide-label: $height < mdc-textfield.$minimum-height-for-filled-label;
+
+  // We computed the desired height of the form-field using the density configuration. The
+  // spec only describes vertical spacing/alignment in non-dense mode. This means that we
+  // cannot update the spacing to explicit numbers based on the density scale. Instead, we
+  // determine the height reduction and equally subtract it from the default `top` and `bottom`
+  // padding that is provided by the Material Design specification.
+  $vertical-deduction: math.div(mdc-textfield.$height - $height, 2);
+
+  // Note: these calculations are trivial enough that we could do them at runtime with `calc`
+  // and the value of the `height` token. The problem is that because we need to hide the label
+  // if the container becomes too short, we have to change the padding calculation. This is
+  // complicated further by the fact that filled form fields without labels have the same
+  // vertical padding as outlined ones. Alternatives:
+  // 1. Using container queries to hide the label and change the padding - this doesn't work
+  // because size container queries require setting the `container-type` property which breaks
+  // the form field layout. We could use style queries, but they're only supported in Chrome.
+  // 2. Monitoring the size of the label - we already have a `ResizeObserver` on the label so we
+  // could reuse it to also check when it becomes `display: none`. This would allows us to remove
+  // the three padding tokens. We don't do it, because it would require us to always set up
+  // the resize observer, as opposed to currently where it's only set up for outlined form fields.
+  // This may lead to performance regressions.
+  // 3. Conditionally adding `::before` and `::after` to the infix with positive and negative
+  // margin respectively - this works, but is likely to break a lot of overrides that are targeting
+  // a specific padding. It also runs the risk of overflowing the container.
+  // TODO: switch the padding tokens to style-based container queries
+  // when they become available in all the browsers we support.
+  $filled-with-label-padding-top: 24px - $vertical-deduction;
+  $filled-with-label-padding-bottom: 8px - $vertical-deduction;
+  $vertical-padding: 16px - $vertical-deduction;
+
+  @return (
+    container-height: $height,
+    filled-label-display: if($hide-label, none, block),
+    container-vertical-padding: $vertical-padding,
+    filled-with-label-container-padding-top:
+      if($hide-label, $vertical-padding, $filled-with-label-padding-top),
+    filled-with-label-container-padding-bottom:
+      if($hide-label, $vertical-padding, $filled-with-label-padding-bottom),
+  );
 }
 
 // Combines the tokens generated by the above functions into a single map with placeholder values.

package/core/tokens/m2/mat/_slider.scss

@@ -1,3 +1,4 @@
+@use 'sass:map';
 @use '../../token-utils';
 @use '../../../style/sass-utils';
 @use '../../../theming/inspection';
@@ -8,23 +9,48 @@ $prefix: (mat, slider);
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
 @function get-unthemable-tokens() {
-  @return ();
+  @return (
+    value-indicator-width: auto,
+    value-indicator-height: 32px,
+    value-indicator-caret-display: block,
+    value-indicator-border-radius: 4px,
+    value-indicator-padding: 0 12px,
+    value-indicator-text-transform: none,
+    value-indicator-container-transform: translateX(-50%)
+  );
 }
 
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
+  $theme-color-tokens: private-get-color-palette-color-tokens($theme, primary);
   $is-dark: inspection.get-theme-type($theme) == dark;
 
+  @return map.merge(
+    $theme-color-tokens,
+    (
+      // Opacity of value indicator text container
+      value-indicator-opacity: if($is-dark, 0.9, 0.6)
+    ),
+  );
+}
+
+// Generates tokens for the slider properties that change based on the theme.
+@function private-get-color-palette-color-tokens($theme, $palette-name) {
+  $ripple-color: inspection.get-theme-color($theme, $palette-name);
+  $hover-ripple-color: if($ripple-color == null, null, #{rgba($ripple-color, 0.05)});
+  $focus-ripple-color: if($ripple-color == null, null, #{rgba($ripple-color, 0.2)});
+
   @return (
-    // Opacity of value indicator text container
-    value-indicator-opacity: if($is-dark, 0.9, 0.6),
+    ripple-color: $ripple-color,
+    hover-state-layer-color: $hover-ripple-color,
+    focus-state-layer-color: $focus-ripple-color
   );
 }
 
 // Tokens that can be configured through Angular Material's typography theming API.
 @function get-typography-tokens($theme) {
   @return ();
- }
+}
 
 // Tokens that can be configured through Angular Material's density theming API.
 @function get-density-tokens($theme) {
@@ -35,9 +61,9 @@ $prefix: (mat, slider);
 // This is used to create token slots.
 @function get-token-slots() {
   @return sass-utils.deep-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)
+    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/mat/_tab-header.scss

@@ -8,7 +8,12 @@ $prefix: (mat, tab-header);
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
 @function get-unthemable-tokens() {
-  @return ();
+  @return (
+    // For some period of time, the MDC tabs removed the divider. This has been added back in
+    // and will be present in M3.
+    divider-color: transparent,
+    divider-height: 0,
+  );
 }
 
 // Tokens that can be configured through Angular Material's color theming API.

package/core/tokens/m2/mdc/_filled-button.scss

@@ -35,11 +35,6 @@ $prefix: (mdc, filled-button);
     container-shadow-color: null,
     focus-label-text-color: null,
     hover-label-text-color: null,
-    label-text-font: null,
-    label-text-size: null,
-    label-text-tracking: null,
-    label-text-transform: null,
-    label-text-weight: null,
     pressed-label-text-color: null,
     with-icon-disabled-icon-color: null,
     with-icon-focus-icon-color: null,
@@ -81,7 +76,13 @@ $prefix: (mdc, filled-button);
 
 // Tokens that can be configured through Angular Material's typography theming API.
 @function get-typography-tokens($theme) {
-  @return ();
+  @return (
+    label-text-font: inspection.get-theme-typography($theme, button, font-family),
+    label-text-size: inspection.get-theme-typography($theme, button, font-size),
+    label-text-tracking: inspection.get-theme-typography($theme, button, letter-spacing),
+    label-text-weight: inspection.get-theme-typography($theme, button, font-weight),
+    label-text-transform: none,
+  );
 }
 
 // Tokens that can be configured through Angular Material's density theming API.

package/core/tokens/m2/mdc/_outlined-button.scss

@@ -49,12 +49,6 @@ $prefix: (mdc, outlined-button);
     with-icon-focus-icon-color: null,
     with-icon-pressed-icon-color: null,
     with-icon-disabled-icon-color: null,
-
-    label-text-size: null,
-    label-text-font: null,
-    label-text-weight: null,
-    label-text-tracking: null,
-    label-text-transform: null
   );
 }
 
@@ -87,7 +81,13 @@ $prefix: (mdc, outlined-button);
 
 // Tokens that can be configured through Angular Material's typography theming API.
 @function get-typography-tokens($theme) {
-  @return ();
+  @return (
+    label-text-font: inspection.get-theme-typography($theme, button, font-family),
+    label-text-size: inspection.get-theme-typography($theme, button, font-size),
+    label-text-tracking: inspection.get-theme-typography($theme, button, letter-spacing),
+    label-text-weight: inspection.get-theme-typography($theme, button, font-weight),
+    label-text-transform: none,
+  );
 }
 
 // Tokens that can be configured through Angular Material's density theming API.

package/core/tokens/m2/mdc/_protected-button.scss

@@ -33,11 +33,6 @@ $prefix: (mdc, protected-button);
     disabled-container-elevation: null,
     focus-container-elevation: null,
     pressed-container-elevation: null,
-    label-text-font: null,
-    label-text-size: null,
-    label-text-tracking: null,
-    label-text-transform: null,
-    label-text-weight: null,
     with-icon-icon-size: null,
     focus-label-text-color: null,
     hover-label-text-color: null,
@@ -80,7 +75,13 @@ $prefix: (mdc, protected-button);
 
 // Tokens that can be configured through Angular Material's typography theming API.
 @function get-typography-tokens($theme) {
-  @return ();
+  @return (
+    label-text-font: inspection.get-theme-typography($theme, button, font-family),
+    label-text-size: inspection.get-theme-typography($theme, button, font-size),
+    label-text-tracking: inspection.get-theme-typography($theme, button, letter-spacing),
+    label-text-weight: inspection.get-theme-typography($theme, button, font-weight),
+    label-text-transform: none,
+  );
 }
 
 // Tokens that can be configured through Angular Material's density theming API.

package/core/tokens/m2/mdc/_text-button.scss

@@ -21,13 +21,6 @@ $prefix: (mdc, text-button);
     // prevent the buttons from collapsing if a density mixin isn't included.
     container-height: 36px,
 
-    // TODO: handle these through the typography styles eventually.
-    label-text-font: null,
-    label-text-size: null,
-    label-text-tracking: null,
-    label-text-transform: null,
-    label-text-weight: null,
-
     // =============================================================================================
     // = TOKENS NOT USED IN ANGULAR MATERIAL                                                       =
     // =============================================================================================
@@ -74,7 +67,13 @@ $prefix: (mdc, text-button);
 
 // Tokens that can be configured through Angular Material's typography theming API.
 @function get-typography-tokens($theme) {
-  @return ();
+  @return (
+    label-text-font: inspection.get-theme-typography($theme, button, font-family),
+    label-text-size: inspection.get-theme-typography($theme, button, font-size),
+    label-text-tracking: inspection.get-theme-typography($theme, button, letter-spacing),
+    label-text-weight: inspection.get-theme-typography($theme, button, font-weight),
+    label-text-transform: none,
+  );
 }
 
 // Tokens that can be configured through Angular Material's density theming API.