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

package/core/typography/_versioning.scss

@@ -0,0 +1,91 @@
+@use 'sass:map';
+@use './definition';
+
+// Whether a config is for the Material Design 2018 typography system.
+@function private-typography-is-2018-config($config) {
+  @return map.get($config, headline-1) != null;
+}
+
+// Whether a config is for the Material Design 2014 typography system.
+@function private-typography-is-2014-config($config) {
+  @return map.get($config, headline) != null;
+}
+
+// Given a config for either the 2014 or 2018 Material Design typography system,
+// produces a normalized typography config for the 2014 Material Design typography system.
+// 2014 - https://material.io/archive/guidelines/style/typography.html#typography-styles
+// 2018 - https://material.io/design/typography/the-type-system.html#type-scale
+//
+// Components using this function should be migrated to normalize to the 2018 style config instead.
+// New components should not use this function.
+@function private-typography-to-2014-config($config) {
+  @if $config == null {
+    @return null;
+  }
+  @if not private-typography-is-2014-config($config) {
+    $args: (
+      display-4: map.get($config, headline-1),
+      display-3: map.get($config, headline-2),
+      display-2: map.get($config, headline-3),
+      display-1: map.get($config, headline-4),
+      headline: map.get($config, headline-5),
+      title: map.get($config, headline-6),
+      subheading-2: map.get($config, subtitle-1),
+      subheading-1: map.get($config, subtitle-2),
+      body-2: map.get($config, body-1),
+      body-1: map.get($config, body-2),
+      button: map.get($config, button),
+      caption: map.get($config, caption),
+      font-family: map.get($config, font-family),
+    );
+    $non-null-args: ();
+    @each $key, $value in $args {
+      @if $value != null {
+        $non-null-args: map.merge($non-null-args, ($key: $value));
+      }
+    }
+    @return definition.define-legacy-typography-config($non-null-args...);
+  }
+  @return $config;
+}
+
+// Given a config for either the 2014 or 2018 Material Design typography system,
+// produces a normalized typography config for the 2018 Material Design typography system.
+// 2014 - https://material.io/archive/guidelines/style/typography.html#typography-styles
+// 2018 - https://material.io/design/typography/the-type-system.html#type-scale
+//
+// The $force option is used to allow components to specify that they want to re-map the keys, even
+// if the 2018 keys are already present. This allows those components to preserve the (incorrect)
+// behavior they had previously, when they called `private-typography-to-2014-config`. Eventually we
+// should clean this up, remove the $force option, and reconcile any screen diffs.
+@function private-typography-to-2018-config($config, $force: false) {
+  @if $config == null {
+    @return null;
+  }
+  @if $force or not private-typography-is-2018-config($config) {
+    @return (
+      headline-1: map.get($config, display-4),
+      headline-2: map.get($config, display-3),
+      headline-3: map.get($config, display-2),
+      headline-4: map.get($config, display-1),
+      headline-5: map.get($config, headline),
+      headline-6: map.get($config, title),
+      subtitle-1: map.get($config, subheading-2),
+      font-famiy: map.get($config, font-family),
+
+      // These mappings are odd, but body-2 in the 2014 system actually looks closer to subtitle-2
+      // in the 2018 system, and subeading-1 in the 2014 system looks more like body-1 in the 2018
+      // system.
+      subtitle-2: map.get($config, body-2),
+      body-1: map.get($config, subheading-1),
+
+      body-2: map.get($config, body-1),
+      button: map.get($config, button),
+      caption: map.get($config, caption),
+      overline: if(map.get($config, overline), map.get($config, overline),
+        definition.define-typography-level(12px, 32px, 500)
+      )
+    );
+  }
+  @return $config;
+}

package/datepicker/_datepicker-theme.scss

@@ -2,6 +2,7 @@
 @use 'sass:map';
 @use '../core/tokens/m2/mat/datepicker' as tokens-mat-datepicker;
 @use '../core/theming/theming';
+@use '../core/theming/inspection';
 @use '../core/tokens/token-utils';
 @use '../core/style/sass-utils';
 @use '../core/typography/typography';
@@ -15,60 +16,52 @@ $today-fade-amount: 0.2;
 $calendar-body-font-size: 13px !default;
 $calendar-weekday-table-font-size: 11px !default;
 
-@mixin _calendar-color($config, $palette) {
-  $palette-color: theming.get-color-from-palette(map.get($config, $palette));
+@mixin _calendar-color($theme, $palette-name) {
+  $palette-color: inspection.get-theme-color($theme, $palette-name);
   $range-color: tokens-mat-datepicker.private-get-range-background-color($palette-color);
   $range-tokens: tokens-mat-datepicker.get-range-color-tokens($range-color);
   $calendar-tokens:
-    tokens-mat-datepicker.private-get-calendar-color-palette-color-tokens($config, $palette);
+    tokens-mat-datepicker.private-get-calendar-color-palette-color-tokens($theme, $palette-name);
 
   @include token-utils.create-token-values(tokens-mat-datepicker.$prefix,
     map.merge($calendar-tokens, $range-tokens));
 }
 
-@mixin color($config-or-theme) {
-  $config: theming.get-color-config($config-or-theme);
-  $foreground: map.get($config, foreground);
-  $background: map.get($config, background);
-  $disabled-color: theming.get-color-from-palette($foreground, disabled-text);
-
+@mixin color($theme) {
   @include sass-utils.current-selector-or-root() {
     @include token-utils.create-token-values(tokens-mat-datepicker.$prefix,
-      tokens-mat-datepicker.get-color-tokens($config));
+      tokens-mat-datepicker.get-color-tokens($theme));
   }
 
   .mat-datepicker-content {
     &.mat-accent {
-      @include _calendar-color($config, accent);
+      @include _calendar-color($theme, accent);
     }
 
     &.mat-warn {
-      @include _calendar-color($config, warn);
+      @include _calendar-color($theme, warn);
     }
   }
 
   .mat-datepicker-toggle-active {
     &.mat-accent {
       $accent-tokens:
-        tokens-mat-datepicker.private-get-toggle-color-palette-color-tokens($config, accent);
+        tokens-mat-datepicker.private-get-toggle-color-palette-color-tokens($theme, accent);
       @include token-utils.create-token-values(tokens-mat-datepicker.$prefix, $accent-tokens);
     }
 
     &.mat-warn {
       $warn-tokens:
-        tokens-mat-datepicker.private-get-toggle-color-palette-color-tokens($config, warn);
+        tokens-mat-datepicker.private-get-toggle-color-palette-color-tokens($theme, warn);
       @include token-utils.create-token-values(tokens-mat-datepicker.$prefix, $warn-tokens);
     }
   }
 }
 
-@mixin typography($config-or-theme) {
-  $config: typography.private-typography-to-2014-config(
-      theming.get-typography-config($config-or-theme));
-
+@mixin typography($theme) {
   @include sass-utils.current-selector-or-root() {
     @include token-utils.create-token-values(tokens-mat-datepicker.$prefix,
-      tokens-mat-datepicker.get-typography-tokens($config));
+      tokens-mat-datepicker.get-typography-tokens($theme));
   }
 }
 
@@ -90,9 +83,7 @@ $calendar-weekday-table-font-size: 11px !default;
   }
 }
 
-@mixin density($config-or-theme) {
-  $density-scale: theming.get-density-config($config-or-theme);
-
+@mixin density($theme) {
   // TODO(crisbeto): move this into the structural styles
   // once the icon button density is switched to tokens.
 
@@ -103,21 +94,16 @@ $calendar-weekday-table-font-size: 11px !default;
   }
 }
 
-@mixin theme($theme-or-color-config) {
-  $theme: theming.private-legacy-get-theme($theme-or-color-config);
+@mixin theme($theme) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-datepicker') {
-    $color: theming.get-color-config($theme);
-    $density: theming.get-density-config($theme);
-    $typography: theming.get-typography-config($theme);
-
-    @if $color != null {
-      @include color($color);
+    @if inspection.theme-has($theme, color) {
+      @include color($theme);
     }
-    @if $density != null {
-      @include density($density);
+    @if inspection.theme-has($theme, density) {
+      @include density($theme);
     }
-    @if $typography != null {
-      @include typography($typography);
+    @if inspection.theme-has($theme, typography) {
+      @include typography($theme);
     }
   }
 }

package/datepicker/index.d.ts

@@ -1594,7 +1594,7 @@ export declare class MatMonthView<D> implements AfterContentInit, OnChanges, OnD
     /** Handles when a new date is selected. */
     _dateSelected(event: MatCalendarUserEvent<number>): void;
     /**
-     * Takes the index of a calendar body cell wrapped in in an event as argument. For the date that
+     * Takes the index of a calendar body cell wrapped in an event as argument. For the date that
      * corresponds to the given cell, set `activeDate` to that date and fire `activeDateChange` with
      * that date.
      *
@@ -1706,7 +1706,7 @@ export declare class MatMultiYearView<D> implements AfterContentInit, OnDestroy
     /** Handles when a new year is selected. */
     _yearSelected(event: MatCalendarUserEvent<number>): void;
     /**
-     * Takes the index of a calendar body cell wrapped in in an event as argument. For the date that
+     * Takes the index of a calendar body cell wrapped in an event as argument. For the date that
      * corresponds to the given cell, set `activeDate` to that date and fire `activeDateChange` with
      * that date.
      *
@@ -1863,7 +1863,7 @@ export declare class MatYearView<D> implements AfterContentInit, OnDestroy {
     /** Handles when a new month is selected. */
     _monthSelected(event: MatCalendarUserEvent<number>): void;
     /**
-     * Takes the index of a calendar body cell wrapped in in an event as argument. For the date that
+     * Takes the index of a calendar body cell wrapped in an event as argument. For the date that
      * corresponds to the given cell, set `activeDate` to that date and fire `activeDateChange` with
      * that date.
      *

package/dialog/_dialog-theme.scss

@@ -1,44 +1,43 @@
 @use '@material/dialog/dialog-theme' as mdc-dialog-theme;
+@use '../core/style/sass-utils';
 @use '../core/tokens/m2/mdc/dialog' as tokens-mdc-dialog;
 @use '../core/theming/theming';
+@use '../core/theming/inspection';
 @use '../core/typography/typography';
 
-@mixin color($config-or-theme) {
-  $config: theming.get-color-config($config-or-theme);
 
-  .mat-mdc-dialog-container {
-    @include mdc-dialog-theme.theme(tokens-mdc-dialog.get-color-tokens($config));
+@mixin base($theme) {
+  // Add default values for tokens not related to color, typography, or density.
+  @include sass-utils.current-selector-or-root() {
+    @include mdc-dialog-theme.theme(tokens-mdc-dialog.get-unthemable-tokens());
   }
 }
 
-@mixin typography($config-or-theme) {
-  $config: typography.private-typography-to-2018-config(
-      theming.get-typography-config($config-or-theme));
-
+@mixin color($theme) {
   .mat-mdc-dialog-container {
-    @include mdc-dialog-theme.theme(tokens-mdc-dialog.get-typography-tokens($config));
+    @include mdc-dialog-theme.theme(tokens-mdc-dialog.get-color-tokens($theme));
   }
 }
 
-@mixin density($config-or-theme) {
-  $density-scale: theming.get-density-config($config-or-theme);
+@mixin typography($theme) {
+  .mat-mdc-dialog-container {
+    @include mdc-dialog-theme.theme(tokens-mdc-dialog.get-typography-tokens($theme));
+  }
 }
 
-@mixin theme($theme-or-color-config) {
-  $theme: theming.private-legacy-get-theme($theme-or-color-config);
-  @include theming.private-check-duplicate-theme-styles($theme, 'mat-dialog') {
-    $color: theming.get-color-config($theme);
-    $density: theming.get-density-config($theme);
-    $typography: theming.get-typography-config($theme);
+@mixin density($theme) {}
 
-    @if $color != null {
-      @include color($color);
+@mixin theme($theme) {
+  @include theming.private-check-duplicate-theme-styles($theme, 'mat-dialog') {
+    @include base($theme);
+    @if inspection.theme-has($theme, color) {
+      @include color($theme);
     }
-    @if $density != null {
-      @include density($density);
+    @if inspection.theme-has($theme, density) {
+      @include density($theme);
     }
-    @if $typography != null {
-      @include typography($typography);
+    @if inspection.theme-has($theme, typography) {
+      @include typography($theme);
     }
   }
 }

package/dialog/_mdc-dialog-structure-overrides.scss

@@ -38,19 +38,21 @@
       max-width: inherit;
     }
 
-    // MDC by default sets the `surface` to `display: flex`. MDC does this in order to
-    // be able to make the content scrollable while locking the title and actions. This
-    // does not work in our dialog anyway because due to the content projection, arbitrary
-    // components can be immediate children of the surface and make this a noop. If only
-    // templates or DOM elements are projected, the flex display could cause unexpected
-    // alignment issues as explained in our coding standards (see `CODING_STANDARDS.md`).
-    // Additionally, the surface by default should expand based on the parent overlay
-    // boundaries (so that boundaries for the overlay config are respected). The surface
-    // by default would only expand based on its content.
     .mdc-dialog__surface {
-      display: block;
       width: 100%;
       height: 100%;
     }
   }
+
+  // When a component is passed into the dialog, the host element interrupts
+  // the `display:flex` from affecting the dialog title, content, and
+  // actions. To fix this, we make the component host `display: contents` by
+  // marking its host with the `mat-mdc-dialog-component-host` class.
+  //
+  // Note that this problem does not exist when a template ref is used since
+  // the title, contents, and actions are then nested directly under the
+  // dialog surface.
+  .mat-mdc-dialog-component-host {
+    display: contents;
+  }
 }

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 { ComponentPortal } from '@angular/cdk/portal';
 import { ComponentRef } from '@angular/core';
 import { ComponentType } from '@angular/cdk/overlay';
 import { DialogRef } from '@angular/cdk/dialog';
@@ -365,6 +366,7 @@ export declare class MatDialogContainer extends CdkDialogContainer<MatDialogConf
      */
     protected _openAnimationDone(totalTime: number): void;
     ngOnDestroy(): void;
+    attachComponentPortal<T>(portal: ComponentPortal<T>): ComponentRef<T>;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatDialogContainer, [null, null, { optional: true; }, null, null, null, null, { optional: true; }, null]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MatDialogContainer, "mat-dialog-container", never, {}, {}, never, never, false, never>;
 }

package/divider/_divider-theme.scss

@@ -1,36 +1,30 @@
 @use '../core/style/sass-utils';
 @use '../core/theming/theming';
+@use '../core/theming/inspection';
 @use '../core/tokens/token-utils';
 @use '../core/tokens/m2/mat/divider' as tokens-mat-divider;
 
-@mixin color($config-or-theme) {
-  $config: theming.get-color-config($config-or-theme);
-
+@mixin color($theme) {
   @include sass-utils.current-selector-or-root() {
     @include token-utils.create-token-values(tokens-mat-divider.$prefix,
-            tokens-mat-divider.get-color-tokens($config));
+            tokens-mat-divider.get-color-tokens($theme));
   }
 }
 
-@mixin typography($config-or-theme) {}
+@mixin typography($theme) {}
 
-@mixin density($config-or-theme) {}
+@mixin density($theme) {}
 
-@mixin theme($theme-or-color-config) {
-  $theme: theming.private-legacy-get-theme($theme-or-color-config);
+@mixin theme($theme) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-divider') {
-    $color: theming.get-color-config($theme);
-    $density: theming.get-density-config($theme);
-    $typography: theming.get-typography-config($theme);
-
-    @if $color != null {
-      @include color($color);
+    @if inspection.theme-has($theme, color) {
+      @include color($theme);
     }
-    @if $density != null {
-      @include density($density);
+    @if inspection.theme-has($theme, density) {
+      @include density($theme);
     }
-    @if $typography != null {
-      @include typography($typography);
+    @if inspection.theme-has($theme, typography) {
+      @include typography($theme);
     }
   }
 }