@angular/material 17.0.0-rc.0 → 17.0.0-rc.2

package/core/tokens/m2/mdc/_extended-fab.scss

@@ -8,6 +8,9 @@ $prefix: (mdc, extended-fab);
 
 @function get-unthemable-tokens() {
   @return (
+    // =============================================================================================
+    // = TOKENS NOT USED IN ANGULAR MATERIAL                                                       =
+    // =============================================================================================
     container-color: null,
     container-elevation: null,
     container-height: null,

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

@@ -22,6 +22,13 @@ $ripple-target: '.mdc-fab__ripple';
     container-shape: 50%,
     icon-size: 24px,
 
+    // We don't use this token, because it doesn't set the color of any text inside the FAB.
+    // We create a custom token for it instead.
+    icon-color: null,
+
+    // =============================================================================================
+    // = TOKENS NOT USED IN ANGULAR MATERIAL                                                       =
+    // =============================================================================================
     container-elevation: null,
     container-height: null,
     container-shadow-color: null,
@@ -56,10 +63,17 @@ $ripple-target: '.mdc-fab__ripple';
 
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
-  $surface: inspection.get-theme-color($theme, primary, default);
-  $on-surface: inspection.get-theme-color($theme, primary, default-contrast);
+  @return (
+    // Background color of the FAB.
+    container-color: inspection.get-theme-color($theme, background, card),
+  );
+}
 
-  @return (container-color: $surface, icon-color: $on-surface);
+// Generates the mapping for the properties that change based on the FAB palette color.
+@function private-get-color-palette-color-tokens($theme, $palette-name) {
+  @return (
+    container-color: inspection.get-theme-color($theme, $palette-name, default),
+  );
 }
 
 // Tokens that can be configured through Angular Material's typography theming API.

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

@@ -1,9 +1,9 @@
 @use 'sass:map';
 @use '../../token-utils';
-@use '../../../mdc-helpers/mdc-helpers';
 @use '../../../style/sass-utils';
 @use '../../../theming/inspection';
 @use '../../../theming/theming';
+@use '../../../mdc-helpers/mdc-helpers';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mdc, filled-button);
@@ -24,6 +24,9 @@ $prefix: (mdc, filled-button);
     keep-touch-target: false,
     pressed-container-elevation: 0,
 
+    // =============================================================================================
+    // = TOKENS NOT USED IN ANGULAR MATERIAL                                                       =
+    // =============================================================================================
     focus-ring-color: null,
     focus-ring-offset: null,
     focus-state-layer-opacity: null,
@@ -43,33 +46,36 @@ $prefix: (mdc, filled-button);
     with-icon-hover-icon-color: null,
     with-icon-icon-color: null,
     with-icon-icon-size: null,
-    with-icon-pressed-icon-color: null
+    with-icon-pressed-icon-color: null,
+    focus-state-layer-color: null,
+    hover-state-layer-color: null,
+    pressed-state-layer-color: null,
   );
 }
 
-@function _on-color($theme, $palette) {
-  @if ($palette) {
-    $is-dark: inspection.get-theme-type($theme) == dark;
-    @return if(mdc-helpers.variable-safe-contrast-tone($palette, $is-dark) == 'dark', #000, #fff);
-  }
-}
-
 // Tokens that can be configured through Angular Material's color theming API.
-@function get-color-tokens($theme, $color: null, $on-color: null) {
+@function get-color-tokens($theme) {
   $is-dark: inspection.get-theme-type($theme) == dark;
-  $primary: inspection.get-theme-color($theme, primary);
   $surface: inspection.get-theme-color($theme, background, card);
-  $on-primary: _on-color($theme, $primary);
-  $on-surface: _on-color($theme, $surface);
+  $on-surface: if($is-dark, #fff, #000);
 
   @return (
-    container-color: if($color, $color, transparent),
+    container-color: $surface,
+    label-text-color: $on-surface,
     disabled-container-color: rgba($on-surface, 0.12),
     disabled-label-text-color: rgba($on-surface, if($is-dark, 0.5, 0.38)),
-    focus-state-layer-color: $on-primary,
-    hover-state-layer-color: $on-primary,
-    label-text-color: if($on-color, $on-color, inherit),
-    pressed-state-layer-color: $on-primary
+  );
+}
+
+// Generates the mapping for the properties that change based on the button palette color.
+@function private-get-color-palette-color-tokens($theme, $palette-name) {
+  $is-dark: inspection.get-theme-type($theme) == dark;
+  $container-color: inspection.get-theme-color($theme, $palette-name, default);
+  $contrast-tone: mdc-helpers.variable-safe-contrast-tone($container-color, $is-dark);
+
+  @return (
+    container-color: $container-color,
+    label-text-color: if($contrast-tone == 'dark', #000, #fff),
   );
 }
 

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

@@ -1,4 +1,5 @@
 @use '../../../style/sass-utils';
+@use '../../../theming/inspection';
 @use '../../token-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
@@ -20,12 +21,7 @@ $prefix: (mdc, icon-button);
     state-layer-size: 48px,
     // MDC's icon size applied to svg and img elements inside the component
     icon-size: 24px,
-    // Only applies to :disabled icons, but Angular Components uses [disabled] since :disabled
-    // wouldn't work on <a> tags.
-    disabled-icon-color: black,
-    // Angular version applies an opacity 1 with a color change, and this only applies with
-    // :disabled anyways.
-    disabled-icon-opacity: 0.38,
+
     // =============================================================================================
     // = TOKENS NOT USED IN ANGULAR MATERIAL                                                       =
     // =============================================================================================
@@ -41,13 +37,27 @@ $prefix: (mdc, icon-button);
     pressed-state-layer-opacity: null,
     focus-ring-color: null,
     focus-ring-offset: null,
+
+    // We use a color with an opacity to show the disabled state,
+    // instead of applying it to the entire button.
+    disabled-icon-opacity: null,
   );
 }
 
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
+  $is-dark: inspection.get-theme-type($theme) == dark;
+
   @return (
     icon-color: inherit,
+    disabled-icon-color: if($is-dark, rgba(#fff, 0.5), rgba(#000, 0.38)),
+  );
+}
+
+// Generates the mapping for the properties that change based on the button palette color.
+@function private-get-color-palette-color-tokens($theme, $palette-name) {
+  @return (
+    icon-color: inspection.get-theme-color($theme, $palette-name)
   );
 }
 

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

@@ -0,0 +1,120 @@
+@use 'sass:map';
+@use '../../token-utils';
+@use '../../../style/sass-utils';
+@use '../../../theming/inspection';
+@use '../../../theming/theming';
+@use '../../../mdc-helpers/mdc-helpers';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mdc, outlined-button);
+
+// 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 (
+    keep-touch-target: false,
+
+    outline-width: 1px,
+    container-shape: 4px,
+
+    // =============================================================================================
+    // = TOKENS NOT USED IN ANGULAR MATERIAL                                                       =
+    // =============================================================================================
+    hover-state-layer-opacity: null,
+    focus-state-layer-opacity: null,
+    pressed-state-layer-opacity: null,
+
+    focus-state-layer-color: null,
+    hover-state-layer-color: null,
+    pressed-state-layer-color: null,
+
+    hover-label-text-color: null,
+    focus-label-text-color: null,
+    pressed-label-text-color: null,
+
+    hover-outline-color: null,
+    focus-outline-color: null,
+    pressed-outline-color: null,
+
+    focus-ring-color: null,
+    focus-ring-offset: null,
+
+    with-icon-icon-size: null,
+    with-icon-icon-color: null,
+    with-icon-hover-icon-color: null,
+    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
+  );
+}
+
+// Tokens that can be configured through Angular Material's color theming API.
+@function get-color-tokens($theme) {
+  $is-dark: inspection.get-theme-type($theme) == dark;
+  $surface: inspection.get-theme-color($theme, background, card);
+  $contrast-tone: mdc-helpers.variable-safe-contrast-tone($surface, $is-dark);
+  $on-surface: if($contrast-tone == 'dark', #000, #fff);
+
+  @return (
+    disabled-outline-color: rgba($on-surface, 0.12),
+    disabled-label-text-color: rgba($on-surface, if($is-dark, 0.5, 0.38)),
+    label-text-color: if($is-dark, #fff, #000),
+    outline-color: rgba($on-surface, 0.12)
+  );
+}
+
+// Generates the mapping for the properties that change based on the button palette color.
+@function private-get-color-palette-color-tokens($theme, $palette-name) {
+  @return (
+    label-text-color: inspection.get-theme-color($theme, $palette-name, default),
+
+    // TODO: we shouldn't have to set this since it's the same as the non-palette version, however
+    // there are a bunch of tests internally that depend on it. We should remove this and clean
+    // up the screenshots separately.
+    outline-color: map.get(get-color-tokens($theme), outline-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) {
+  $scale: theming.clamp-density(inspection.get-theme-density($theme), -3);
+
+  @return (
+    container-height:
+      map.get(
+        (
+          0: 36px,
+          -1: 32px,
+          -2: 28px,
+          -3: 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 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/_protected-button.scss

@@ -1,9 +1,9 @@
 @use 'sass:map';
 @use '../../token-utils';
-@use '../../../mdc-helpers/mdc-helpers';
 @use '../../../style/sass-utils';
 @use '../../../theming/inspection';
 @use '../../../theming/theming';
+@use '../../../mdc-helpers/mdc-helpers';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mdc, protected-button);
@@ -19,6 +19,9 @@ $prefix: (mdc, protected-button);
     container-shape: 4px,
     keep-touch-target: false,
 
+    // =============================================================================================
+    // = TOKENS NOT USED IN ANGULAR MATERIAL                                                       =
+    // =============================================================================================
     focus-ring-color: null,
     focus-ring-offset: null,
     focus-state-layer-opacity: null,
@@ -43,36 +46,38 @@ $prefix: (mdc, protected-button);
     with-icon-focus-icon-color: null,
     with-icon-hover-icon-color: null,
     with-icon-icon-color: null,
-    with-icon-pressed-icon-color: null
+    with-icon-pressed-icon-color: null,
+    focus-state-layer-color: null,
+    hover-state-layer-color: null,
+    pressed-state-layer-color: null,
   );
 }
 
-@function _on-color($theme, $palette) {
-  @if ($palette) {
-    $is-dark: inspection.get-theme-type($theme) == dark;
-    @return if(mdc-helpers.variable-safe-contrast-tone($palette, $is-dark) == 'dark', #000, #fff);
-  }
-}
-
 // Tokens that can be configured through Angular Material's color theming API.
-@function get-color-tokens($theme, $color: null, $on-color: null) {
+@function get-color-tokens($theme) {
   $is-dark: inspection.get-theme-type($theme) == dark;
-  $primary: inspection.get-theme-color($theme, primary);
-  $surface: inspection.get-theme-color($theme, background, card);
-  $on-primary: _on-color($theme, $primary);
-  $on-surface: _on-color($theme, $surface);
+  $on-surface: if($is-dark, #fff, #000);
 
   @return (
-    container-color: if($color, $color, transparent),
-    focus-state-layer-color: $on-primary,
-    hover-state-layer-color: $on-primary,
-    pressed-state-layer-color: $on-primary,
-    label-text-color: if($on-color, $on-color, inherit),
+    container-color: inspection.get-theme-color($theme, background, card),
+    label-text-color: $on-surface,
     disabled-container-color: rgba($on-surface, 0.12),
     disabled-label-text-color: rgba($on-surface, if($is-dark, 0.5, 0.38))
   );
 }
 
+// Generates the mapping for the properties that change based on the button palette color.
+@function private-get-color-palette-color-tokens($theme, $palette-name) {
+  $is-dark: inspection.get-theme-type($theme) == dark;
+  $container-color: inspection.get-theme-color($theme, $palette-name, default);
+  $contrast-tone: mdc-helpers.variable-safe-contrast-tone($container-color, $is-dark);
+
+  @return (
+    container-color: $container-color,
+    label-text-color: if($contrast-tone == 'dark', #000, #fff),
+  );
+}
+
 // Tokens that can be configured through Angular Material's typography theming API.
 @function get-typography-tokens($theme) {
   @return ();

package/dialog/index.d.ts

@@ -4,6 +4,7 @@ import { ComponentFactoryResolver } from '@angular/core';
 import { ComponentPortal } from '@angular/cdk/portal';
 import { ComponentRef } from '@angular/core';
 import { ComponentType } from '@angular/cdk/overlay';
+import { Dialog } from '@angular/cdk/dialog';
 import { DialogRef } from '@angular/cdk/dialog';
 import { Direction } from '@angular/cdk/bidi';
 import { ElementRef } from '@angular/core';
@@ -134,7 +135,7 @@ export declare class MatDialog implements OnDestroy {
     private readonly _openDialogsAtThisLevel;
     private readonly _afterAllClosedAtThisLevel;
     private readonly _afterOpenedAtThisLevel;
-    private _dialog;
+    protected _dialog: Dialog;
     protected dialogConfigClass: typeof MatDialogConfig;
     private readonly _dialogRefConstructor;
     private readonly _dialogContainerType;

package/divider/_divider-theme.scss

@@ -5,7 +5,10 @@
 @use '../core/tokens/m2/mat/divider' as tokens-mat-divider;
 
 @mixin base($theme) {
-  // TODO(mmalerba): Move divider base tokens here
+  @include sass-utils.current-selector-or-root() {
+    @include token-utils.create-token-values(
+        tokens-mat-divider.$prefix, tokens-mat-divider.get-unthemable-tokens());
+  }
 }
 
 @mixin color($theme) {

package/esm2022/autocomplete/autocomplete-origin.mjs

@@ -17,14 +17,14 @@ export class MatAutocompleteOrigin {
     elementRef) {
         this.elementRef = elementRef;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.6", ngImport: i0, type: MatAutocompleteOrigin, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.0-next.6", type: MatAutocompleteOrigin, selector: "[matAutocompleteOrigin]", exportAs: ["matAutocompleteOrigin"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.0", ngImport: i0, type: MatAutocompleteOrigin, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.0-rc.0", type: MatAutocompleteOrigin, selector: "[matAutocompleteOrigin]", exportAs: ["matAutocompleteOrigin"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.6", ngImport: i0, type: MatAutocompleteOrigin, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.0", ngImport: i0, type: MatAutocompleteOrigin, decorators: [{
             type: Directive,
             args: [{
                     selector: '[matAutocompleteOrigin]',
                     exportAs: 'matAutocompleteOrigin',
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }] });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXV0b2NvbXBsZXRlLW9yaWdpbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy9tYXRlcmlhbC9hdXRvY29tcGxldGUvYXV0b2NvbXBsZXRlLW9yaWdpbi50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7Ozs7O0dBTUc7QUFFSCxPQUFPLEVBQUMsU0FBUyxFQUFFLFVBQVUsRUFBQyxNQUFNLGVBQWUsQ0FBQzs7QUFFcEQ7OztHQUdHO0FBS0gsTUFBTSxPQUFPLHFCQUFxQjtJQUNoQztJQUNFLGtFQUFrRTtJQUMzRCxVQUFtQztRQUFuQyxlQUFVLEdBQVYsVUFBVSxDQUF5QjtJQUN6QyxDQUFDO3FIQUpPLHFCQUFxQjt5R0FBckIscUJBQXFCOztrR0FBckIscUJBQXFCO2tCQUpqQyxTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSx5QkFBeUI7b0JBQ25DLFFBQVEsRUFBRSx1QkFBdUI7aUJBQ2xDIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBAbGljZW5zZVxuICogQ29weXJpZ2h0IEdvb2dsZSBMTEMgQWxsIFJpZ2h0cyBSZXNlcnZlZC5cbiAqXG4gKiBVc2Ugb2YgdGhpcyBzb3VyY2UgY29kZSBpcyBnb3Zlcm5lZCBieSBhbiBNSVQtc3R5bGUgbGljZW5zZSB0aGF0IGNhbiBiZVxuICogZm91bmQgaW4gdGhlIExJQ0VOU0UgZmlsZSBhdCBodHRwczovL2FuZ3VsYXIuaW8vbGljZW5zZVxuICovXG5cbmltcG9ydCB7RGlyZWN0aXZlLCBFbGVtZW50UmVmfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuLyoqXG4gKiBEaXJlY3RpdmUgYXBwbGllZCB0byBhbiBlbGVtZW50IHRvIG1ha2UgaXQgdXNhYmxlXG4gKiBhcyBhIGNvbm5lY3Rpb24gcG9pbnQgZm9yIGFuIGF1dG9jb21wbGV0ZSBwYW5lbC5cbiAqL1xuQERpcmVjdGl2ZSh7XG4gIHNlbGVjdG9yOiAnW21hdEF1dG9jb21wbGV0ZU9yaWdpbl0nLFxuICBleHBvcnRBczogJ21hdEF1dG9jb21wbGV0ZU9yaWdpbicsXG59KVxuZXhwb3J0IGNsYXNzIE1hdEF1dG9jb21wbGV0ZU9yaWdpbiB7XG4gIGNvbnN0cnVjdG9yKFxuICAgIC8qKiBSZWZlcmVuY2UgdG8gdGhlIGVsZW1lbnQgb24gd2hpY2ggdGhlIGRpcmVjdGl2ZSBpcyBhcHBsaWVkLiAqL1xuICAgIHB1YmxpYyBlbGVtZW50UmVmOiBFbGVtZW50UmVmPEhUTUxFbGVtZW50PixcbiAgKSB7fVxufVxuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXV0b2NvbXBsZXRlLW9yaWdpbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy9tYXRlcmlhbC9hdXRvY29tcGxldGUvYXV0b2NvbXBsZXRlLW9yaWdpbi50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7Ozs7O0dBTUc7QUFFSCxPQUFPLEVBQUMsU0FBUyxFQUFFLFVBQVUsRUFBQyxNQUFNLGVBQWUsQ0FBQzs7QUFFcEQ7OztHQUdHO0FBS0gsTUFBTSxPQUFPLHFCQUFxQjtJQUNoQztJQUNFLGtFQUFrRTtJQUMzRCxVQUFtQztRQUFuQyxlQUFVLEdBQVYsVUFBVSxDQUF5QjtJQUN6QyxDQUFDO21IQUpPLHFCQUFxQjt1R0FBckIscUJBQXFCOztnR0FBckIscUJBQXFCO2tCQUpqQyxTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSx5QkFBeUI7b0JBQ25DLFFBQVEsRUFBRSx1QkFBdUI7aUJBQ2xDIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBAbGljZW5zZVxuICogQ29weXJpZ2h0IEdvb2dsZSBMTEMgQWxsIFJpZ2h0cyBSZXNlcnZlZC5cbiAqXG4gKiBVc2Ugb2YgdGhpcyBzb3VyY2UgY29kZSBpcyBnb3Zlcm5lZCBieSBhbiBNSVQtc3R5bGUgbGljZW5zZSB0aGF0IGNhbiBiZVxuICogZm91bmQgaW4gdGhlIExJQ0VOU0UgZmlsZSBhdCBodHRwczovL2FuZ3VsYXIuaW8vbGljZW5zZVxuICovXG5cbmltcG9ydCB7RGlyZWN0aXZlLCBFbGVtZW50UmVmfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuLyoqXG4gKiBEaXJlY3RpdmUgYXBwbGllZCB0byBhbiBlbGVtZW50IHRvIG1ha2UgaXQgdXNhYmxlXG4gKiBhcyBhIGNvbm5lY3Rpb24gcG9pbnQgZm9yIGFuIGF1dG9jb21wbGV0ZSBwYW5lbC5cbiAqL1xuQERpcmVjdGl2ZSh7XG4gIHNlbGVjdG9yOiAnW21hdEF1dG9jb21wbGV0ZU9yaWdpbl0nLFxuICBleHBvcnRBczogJ21hdEF1dG9jb21wbGV0ZU9yaWdpbicsXG59KVxuZXhwb3J0IGNsYXNzIE1hdEF1dG9jb21wbGV0ZU9yaWdpbiB7XG4gIGNvbnN0cnVjdG9yKFxuICAgIC8qKiBSZWZlcmVuY2UgdG8gdGhlIGVsZW1lbnQgb24gd2hpY2ggdGhlIGRpcmVjdGl2ZSBpcyBhcHBsaWVkLiAqL1xuICAgIHB1YmxpYyBlbGVtZW50UmVmOiBFbGVtZW50UmVmPEhUTUxFbGVtZW50PixcbiAgKSB7fVxufVxuIl19