@angular/material 16.2.0-next.5 → 16.2.0

package/bottom-sheet/index.d.ts

@@ -3,6 +3,7 @@ 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';
 import { DialogRef } from '@angular/cdk/dialog';
@@ -167,6 +168,11 @@ export declare class MatBottomSheetRef<T = any, R = any> {
     private _ref;
     /** Instance of the component making up the content of the bottom sheet. */
     get instance(): T;
+    /**
+     * `ComponentRef` of the component opened into the bottom sheet. Will be
+     * null when the bottom sheet is opened using a `TemplateRef`.
+     */
+    get componentRef(): ComponentRef<T> | null;
     /**
      * Instance of the component into which the bottom sheet content is projected.
      * @docs-private

package/core/selection/pseudo-checkbox/_pseudo-checkbox-common.scss

@@ -42,7 +42,7 @@ $padding: checkbox-common.$border-width * 2;
 // `$box-size`: size of the checkbox.
 // `$border-size`: size of the checkbox's border.
 @mixin _checkbox-indeterminate-styles-with-size($box-size, $border-size) {
-  // Center the line in the the checkbox. `$checkbox-common.$border-width` is the width of the line.
+  // Center the line in the checkbox. `$checkbox-common.$border-width` is the width of the line.
   top: math.div($box-size - checkbox-common.$border-width, 2) - $border-size;
   width: $box-size - checkbox-common.$border-width - (2 * $border-size);
 }

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

@@ -0,0 +1,72 @@
+@use 'sass:map';
+@use '../../token-utils';
+@use '../../../style/sass-utils';
+@use '../../../typography/typography-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mat, form-field);
+
+// 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 ();
+}
+
+// Tokens that can be configured through Angular Material's color theming API.
+@function get-color-tokens($config) {
+  $is-dark: map.get($config, is-dark);
+  $on-surface: if($is-dark, #fff, #000);
+
+  @return (
+    // MDC has a token for the enabled placeholder, but not for the disabled one.
+    disabled-input-text-placeholder-color: rgba($on-surface, 0.38),
+  );
+}
+
+// Tokens that can be configured through Angular Material's typography theming API.
+@function get-typography-tokens($config) {
+  $fallback-font-family: typography-utils.font-family($config);
+
+  @return (
+    // MDC uses `subtitle1` for the input value, placeholder and floating label. The spec
+    // shows `body1` for text fields though, so we manually override the typography.
+    // Note: Form controls inherit the typography from the parent form field.
+    container-text-font: typography-utils.font-family($config, body-1) or $fallback-font-family,
+    container-text-line-height: typography-utils.line-height($config, body-1),
+    container-text-size: typography-utils.font-size($config, body-1),
+    container-text-tracking: typography-utils.letter-spacing($config, body-1),
+    container-text-weight: typography-utils.font-weight($config, body-1),
+
+    // In the container styles, we updated the floating label to use the `body-1` typography level.
+    // The MDC notched outline overrides this accidentally (only when the label floats) to a
+    // `rem`-based value. This results in different label widths when floated/docked and ultimately
+    // breaks the notch width as it has been measured in the docked state (where `body-1` is
+    // applied). We try to unset these styles set by the `mdc-notched-outline`:
+    // https://github.com/material-components/material-components-web/blob/master/packages/mdc-notched-outline/_mixins.scss#L272-L292.
+    // This is why we can't use their `label-text-populated-size` token and we have to declare
+    // our own version of it.
+    outlined-label-text-populated-size: typography-utils.font-size($config, body-1),
+
+    subscript-text-font: typography-utils.font-family($config, caption) or $fallback-font-family,
+    subscript-text-line-height: typography-utils.line-height($config, caption),
+    subscript-text-size: typography-utils.font-size($config, caption),
+    subscript-text-tracking: typography-utils.letter-spacing($config, caption),
+    subscript-text-weight: typography-utils.font-weight($config, caption),
+  );
+}
+
+// Tokens that can be configured through Angular Material's density theming API.
+@function get-density-tokens($config) {
+  @return ();
+}
+
+// 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 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)
+  );
+}

package/core/tokens/m2/mat/_grid-list.scss

@@ -0,0 +1,46 @@
+@use '../../token-utils';
+@use '../../../typography/typography-utils';
+@use '../../../style/sass-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mat, grid-list);
+
+// 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 ();
+}
+
+// Tokens that can be configured through Angular Material's color theming API.
+@function get-color-tokens($config) {
+  @return ();
+}
+
+// Tokens that can be configured through Angular Material's typography theming API.
+@function get-typography-tokens($config) {
+  @return (
+    // TODO(crisbeto): other components have tokens for all typography dimensions.
+    // Here we only set the font size to maintain the same appearance as the pre-tokens
+    // theming API. Consider adding more tokens for letter spacing, font weight etc.
+    tile-header-primary-text-size: typography-utils.font-size($config, body-1),
+    tile-header-secondary-text-size: typography-utils.font-size($config, caption),
+    tile-footer-primary-text-size: typography-utils.font-size($config, body-1),
+    tile-footer-secondary-text-size: typography-utils.font-size($config, caption),
+  );
+}
+
+// Tokens that can be configured through Angular Material's density theming API.
+@function get-density-tokens($config) {
+  @return ();
+}
+
+// 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 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)
+  );
+}

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

@@ -0,0 +1,45 @@
+@use '../../token-utils';
+@use '../../../style/sass-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mat, icon);
+
+// 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 ();
+}
+
+// Tokens that can be configured through Angular Material's color theming API.
+@function get-color-tokens($config) {
+  // Default the icon to `inherit` so it matches the text around it.
+  @return private-get-icon-color-tokens(inherit);
+}
+
+// Tokens that can be configured through Angular Material's typography theming API.
+@function get-typography-tokens($config) {
+  @return ();
+}
+
+// Tokens that can be configured through Angular Material's density theming API.
+@function get-density-tokens($config) {
+  @return ();
+}
+
+// Mixin used to set a specific color on an icon.
+@function private-get-icon-color-tokens($color) {
+  @return (
+    color: $color,
+  );
+}
+
+// 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 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)
+  );
+}

package/core/tokens/m2/mat/_slide-toggle.scss

@@ -29,7 +29,7 @@ $prefix: (mat, slide-toggle);
   @return (
     label-text-font: typography-utils.font-family($config),
     label-text-size: typography-utils.font-size($config, body-2),
-    label-text-letter-spacing: typography-utils.letter-spacing($config, body-2),
+    label-text-tracking: typography-utils.letter-spacing($config, body-2),
     label-text-line-height: typography-utils.line-height($config, body-2),
     label-text-weight: typography-utils.font-weight($config, body-2),
   );

package/core/tokens/m2/mat/_tab-header.scss

@@ -49,7 +49,7 @@ $prefix: (mat, tab-header);
     label-text-font:
       typography-utils.font-family($config, button) or typography-utils.font-family($config),
     label-text-size: typography-utils.font-size($config, button),
-    label-text-letter-spacing: typography-utils.letter-spacing($config, button),
+    label-text-tracking: typography-utils.letter-spacing($config, button),
     label-text-line-height: typography-utils.line-height($config, button),
     label-text-weight: typography-utils.font-weight($config, button),
   );

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

@@ -16,7 +16,7 @@ $prefix: (mdc, circular-progress);
   @return (
     // The thickness of the progress spinner's active indicator.
     active-indicator-width: 4px,
-    // The the diameter of the spinner
+    // The diameter of the spinner
     size: 48px,
     // =============================================================================================
     // = TOKENS NOT USED IN ANGULAR MATERIAL                                                       =

package/core/tokens/m2/mdc/_filled-text-field.scss

@@ -0,0 +1,175 @@
+@use 'sass:color';
+@use 'sass:map';
+@use 'sass:meta';
+@use '../../../theming/theming';
+@use '../../../style/sass-utils';
+@use '../../../typography/typography-utils';
+@use '../../token-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mdc, filled-text-field);
+
+// 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 (
+    active-indicator-height: 1px,
+    focus-active-indicator-height: 2px,
+    container-shape: 4px,
+
+    // =============================================================================================
+    // = TOKENS NOT USED IN ANGULAR MATERIAL                                                       =
+    // =============================================================================================
+    disabled-active-indicator-height: null,
+    hover-active-indicator-height: null,
+    disabled-active-indicator-opacity: null,
+    error-focus-caret-color: null,
+    error-hover-caret-color: null,
+    focus-caret-color: null,
+    hover-caret-color: null,
+    label-text-populated-line-height: null,
+    label-text-populated-size: null,
+    label-text-type: null,
+    disabled-label-text-opacity: null,
+    hover-label-text-color: null,
+    error-hover-label-text-color: null,
+    supporting-text-color: null,
+    supporting-text-font: null,
+    supporting-text-line-height: null,
+    supporting-text-size: null,
+    supporting-text-tracking: null,
+    supporting-text-weight: null,
+    disabled-supporting-text-color: null,
+    disabled-supporting-text-opacity: null,
+    error-focus-supporting-text-color: null,
+    error-hover-supporting-text-color: null,
+    error-supporting-text-color: null,
+    focus-supporting-text-color: null,
+    hover-supporting-text-color: null,
+    input-text-prefix-color: null,
+    container-height: null,
+    disabled-trailing-icon-color: null,
+    disabled-trailing-icon-opacity: null,
+    error-focus-trailing-icon-color: null,
+    error-hover-trailing-icon-color: null,
+    error-trailing-icon-color: null,
+    focus-trailing-icon-color: null,
+    hover-trailing-icon-color: null,
+    trailing-icon-color: null,
+    trailing-icon-size: null,
+    disabled-leading-icon-color: null,
+    disabled-leading-icon-opacity: null,
+    error-focus-leading-icon-color: null,
+    error-hover-leading-icon-color: null,
+    error-leading-icon-color: null,
+    focus-leading-icon-color: null,
+    hover-leading-icon-color: null,
+    leading-icon-color: null,
+    leading-icon-size: null,
+    input-text-type: null,
+    input-text-suffix-color: null,
+    input-text-font: null,
+    input-text-line-height: null,
+    input-text-size: null,
+    input-text-tracking: null,
+    input-text-weight: null,
+    error-input-text-color: null,
+    focus-input-text-color: null,
+    hover-input-text-color: null,
+    disabled-input-text-opacity: null,
+    error-focus-input-text-color: null,
+    error-hover-input-text-color: null,
+    disabled-container-opacity: null,
+    error-hover-state-layer-color: null,
+    error-hover-state-layer-opacity: null,
+    hover-state-layer-color: null,
+    hover-state-layer-opacity: null,
+    label-text-line-height: null, // We override the line height to `normal` so don't emit a slot.
+  );
+}
+
+// Tokens that can be configured through Angular Material's color theming API.
+@function get-color-tokens($config) {
+  $foreground: map.get($config, foreground);
+  $background: map.get($config, background);
+  $warn: map.get($config, warn);
+  $is-dark: map.get($config, is-dark);
+  $surface: theming.get-color-from-palette($background, card);
+  $on-surface: if($is-dark, #fff, #000);
+  $warn-color: theming.get-color-from-palette($warn);
+  $color-tokens: private-get-color-palette-color-tokens($config, primary);
+
+  @return map.merge($color-tokens, (
+    container-color: _variable-safe-mix($on-surface, $surface, 4%),
+    disabled-container-color: _variable-safe-mix($on-surface, $surface, 2%),
+
+    label-text-color: rgba($on-surface, 0.6),
+    disabled-label-text-color: rgba($on-surface, 0.38),
+
+    input-text-color: rgba($on-surface, 0.87),
+    disabled-input-text-color: rgba($on-surface, 0.38),
+    input-text-placeholder-color: rgba($on-surface, 0.6),
+
+    error-focus-label-text-color: $warn-color,
+    error-label-text-color: $warn-color,
+    error-caret-color: $warn-color,
+
+    active-indicator-color: rgba($on-surface, 0.42),
+    disabled-active-indicator-color: rgba($on-surface, 0.06),
+    hover-active-indicator-color: rgba($on-surface, 0.87),
+    error-active-indicator-color: $warn-color,
+    error-focus-active-indicator-color: $warn-color,
+    error-hover-active-indicator-color: $warn-color,
+  ));
+}
+
+@function _variable-safe-mix($first-color, $second-color, $amount) {
+  @if (meta.type-of($first-color) == color and meta.type-of($second-color) == color) {
+    @return color.mix($first-color, $second-color, $amount);
+  }
+  @return $first-color;
+}
+
+// Generates the mapping for the properties that change based on the slide toggle color.
+@function private-get-color-palette-color-tokens($config, $palette-name) {
+  $palette: map.get($config, $palette-name);
+  $palette-color: theming.get-color-from-palette($palette);
+
+  @return (
+    caret-color: $palette-color,
+    focus-active-indicator-color: $palette-color,
+    focus-label-text-color: theming.get-color-from-palette($palette, default, 0.87),
+  );
+}
+
+// Tokens that can be configured through Angular Material's typography theming API.
+@function get-typography-tokens($config) {
+  $fallback-font-family: typography-utils.font-family($config);
+
+  @return (
+    label-text-font: typography-utils.font-family($config, body-1) or $fallback-font-family,
+    label-text-size: typography-utils.font-size($config, body-1),
+    label-text-tracking: typography-utils.letter-spacing($config, body-1),
+    label-text-weight: typography-utils.font-weight($config, body-1),
+  );
+}
+
+// Tokens that can be configured through Angular Material's density theming API.
+@function get-density-tokens($config) {
+  @return ();
+}
+
+// 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 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)
+  );
+}

package/core/tokens/m2/mdc/_outlined-text-field.scss

@@ -0,0 +1,158 @@
+@use 'sass:map';
+@use '../../../theming/theming';
+@use '../../../style/sass-utils';
+@use '../../../typography/typography-utils';
+@use '../../token-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mdc, outlined-text-field);
+
+// 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 (
+    outline-width: 1px,
+    focus-outline-width: 2px,
+    container-shape: 4px,
+
+    // =============================================================================================
+    // = TOKENS NOT USED IN ANGULAR MATERIAL                                                       =
+    // =============================================================================================
+    error-focus-caret-color: null,
+    error-hover-caret-color: null,
+    focus-caret-color: null,
+    hover-caret-color: null,
+    disabled-outline-opacity: null,
+    hover-outline-width: null,
+    disabled-outline-width: null,
+    label-text-type: null,
+    label-text-populated-line-height: null,
+    label-text-populated-size: null,
+    hover-label-text-color: null,
+    error-hover-label-text-color: null,
+    disabled-label-text-opacity: null,
+    disabled-supporting-text-color: null,
+    disabled-supporting-text-opacity: null,
+    error-focus-supporting-text-color: null,
+    error-hover-supporting-text-color: null,
+    error-supporting-text-color: null,
+    focus-supporting-text-color: null,
+    hover-supporting-text-color: null,
+    supporting-text-color: null,
+    supporting-text-font: null,
+    supporting-text-line-height: null,
+    supporting-text-size: null,
+    supporting-text-tracking: null,
+    supporting-text-type: null,
+    supporting-text-weight: null,
+    disabled-leading-icon-color: null,
+    disabled-leading-icon-opacity: null,
+    error-focus-leading-icon-color: null,
+    error-hover-leading-icon-color: null,
+    error-leading-icon-color: null,
+    focus-leading-icon-color: null,
+    hover-leading-icon-color: null,
+    leading-icon-color: null,
+    leading-icon-size: null,
+    disabled-trailing-icon-color: null,
+    disabled-trailing-icon-opacity: null,
+    error-focus-trailing-icon-color: null,
+    error-hover-trailing-icon-color: null,
+    error-trailing-icon-color: null,
+    focus-trailing-icon-color: null,
+    hover-trailing-icon-color: null,
+    trailing-icon-color: null,
+    trailing-icon-size: null,
+    input-text-prefix-color: null,
+    input-text-type: null,
+    container-height: null,
+    input-text-suffix-color: null,
+    input-text-font: null,
+    input-text-line-height: null,
+    input-text-size: null,
+    input-text-tracking: null,
+    input-text-weight: null,
+    disabled-input-text-opacity: null,
+    error-focus-input-text-color: null,
+    error-hover-input-text-color: null,
+    error-input-text-color: null,
+    focus-input-text-color: null,
+    hover-input-text-color: null,
+    label-text-line-height: null, // We override the line height to `normal` so don't emit a slot.
+  );
+}
+
+// Tokens that can be configured through Angular Material's color theming API.
+@function get-color-tokens($config) {
+  $foreground: map.get($config, foreground);
+  $warn: map.get($config, warn);
+  $is-dark: map.get($config, is-dark);
+  $on-surface: if($is-dark, #fff, #000);
+  $warn-color: theming.get-color-from-palette($warn);
+  $color-tokens: private-get-color-palette-color-tokens($config, primary);
+
+  @return map.merge($color-tokens, (
+    label-text-color: rgba($on-surface, 0.6),
+    disabled-label-text-color: rgba($on-surface, 0.38),
+
+    input-text-color: rgba($on-surface, 0.87),
+    disabled-input-text-color: rgba($on-surface, 0.38),
+    input-text-placeholder-color: rgba($on-surface, 0.6),
+
+    error-caret-color: $warn-color,
+    error-focus-label-text-color: $warn-color,
+    error-label-text-color: $warn-color,
+
+    // Outline tokens
+    outline-color: rgba($on-surface, 0.38),
+    disabled-outline-color: rgba($on-surface, 0.06),
+    hover-outline-color: rgba($on-surface, 0.87),
+    error-focus-outline-color: $warn-color,
+    error-hover-outline-color: $warn-color,
+    error-outline-color: $warn-color,
+  ));
+}
+
+// Generates the mapping for the properties that change based on the slide toggle color.
+@function private-get-color-palette-color-tokens($config, $palette-name) {
+  $palette: map.get($config, $palette-name);
+  $palette-color: theming.get-color-from-palette($palette);
+
+  @return (
+    caret-color: $palette-color,
+    focus-outline-color: $palette-color,
+    focus-label-text-color: theming.get-color-from-palette($palette, default, 0.87),
+  );
+}
+
+// Tokens that can be configured through Angular Material's typography theming API.
+@function get-typography-tokens($config) {
+  $fallback-font-family: typography-utils.font-family($config);
+
+  @return (
+    label-text-font: typography-utils.font-family($config, body-1) or $fallback-font-family,
+    label-text-size: typography-utils.font-size($config, body-1),
+    label-text-tracking: typography-utils.letter-spacing($config, body-1),
+    label-text-weight: typography-utils.font-weight($config, body-1),
+  );
+}
+
+// Tokens that can be configured through Angular Material's density theming API.
+@function get-density-tokens($config) {
+  @return ();
+}
+
+// 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 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)
+  );
+}

package/core/tokens/m2/mdc/_plain-tooltip.scss

@@ -51,9 +51,9 @@ $prefix: (mdc, plain-tooltip);
     // Font for the tooltip text.
     supporting-text-font: typography-utils.font-family($config, caption)
     or typography-utils.font-family($config),
-    // Font size for the the tooltip text.
+    // Font size for the tooltip text.
     supporting-text-size: typography-utils.font-size($config, caption),
-    // Font weight of the the tooltip text.
+    // Font weight of the tooltip text.
     supporting-text-weight: typography-utils.font-weight($config, caption),
     // Tracking (space between letters) of the tooltip text.
     supporting-text-tracking: typography-utils.letter-spacing($config, caption),

package/dialog/index.d.ts

@@ -1,6 +1,7 @@
 import { AnimationTriggerMetadata } from '@angular/animations';
 import { CdkDialogContainer } from '@angular/cdk/dialog';
 import { ComponentFactoryResolver } from '@angular/core';
+import { ComponentRef } from '@angular/core';
 import { ComponentType } from '@angular/cdk/overlay';
 import { DialogRef } from '@angular/cdk/dialog';
 import { Direction } from '@angular/cdk/bidi';
@@ -432,6 +433,11 @@ export declare class MatDialogRef<T, R = any> {
     _containerInstance: _MatDialogContainerBase;
     /** The instance of component opened into the dialog. */
     componentInstance: T;
+    /**
+     * `ComponentRef` of the component opened into the dialog. Will be
+     * null when the dialog is opened using a `TemplateRef`.
+     */
+    readonly componentRef: ComponentRef<T> | null;
     /** Whether the user is allowed to close the dialog. */
     disableClose: boolean | undefined;
     /** Unique ID for the dialog. */