@angular/material 17.0.0-next.1 → 17.0.0-next.3

package/form-field/_form-field-sizing.scss

@@ -3,7 +3,7 @@
 $mat-form-field-outline-top-spacing: 12px;
 
 // Infix stretches to fit the container, but naturally wants to be this wide. We set
-// this in order to have a a consistent natural size for the various types of controls
+// this in order to have a consistent natural size for the various types of controls
 // that can go in a form field.
 $mat-form-field-default-infix-width: 180px !default;
 

package/grid-list/_grid-list-theme.scss

@@ -1,4 +1,5 @@
 @use '../core/theming/theming';
+@use '../core/theming/inspection';
 @use '../core/typography/typography';
 @use '../core/tokens/m2/mat/grid-list' as tokens-mat-grid-list;
 @use '../core/style/sass-utils';
@@ -6,35 +7,27 @@
 
 
 // Include this empty mixin for consistency with the other components.
-@mixin color($config-or-theme) {}
-
-@mixin typography($config-or-theme) {
-  $config: typography.private-typography-to-2014-config(
-      theming.get-typography-config($config-or-theme));
+@mixin color($theme) {}
 
+@mixin typography($theme) {
   @include sass-utils.current-selector-or-root() {
     @include token-utils.create-token-values(tokens-mat-grid-list.$prefix,
-      tokens-mat-grid-list.get-typography-tokens($config));
+      tokens-mat-grid-list.get-typography-tokens($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-grid-list') {
-    $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/icon/_icon-theme.scss

@@ -1,58 +1,50 @@
-@use 'sass:map';
 @use '../core/theming/theming';
+@use '../core/theming/inspection';
 @use '../core/tokens/m2/mat/icon' as tokens-mat-icon;
 @use '../core/tokens/token-utils';
 @use '../core/style/sass-utils';
 
-@mixin _palette-colors($config, $palette-name) {
-  $palette: map.get($config, $palette-name);
-  $color: theming.get-color-from-palette($palette, text);
+@mixin _palette-colors($theme, $palette-name) {
+  $color: inspection.get-theme-color($theme, $palette-name, text);
   $tokens: tokens-mat-icon.private-get-icon-color-tokens($color);
   @include token-utils.create-token-values(tokens-mat-icon.$prefix, $tokens);
 }
 
-@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-icon.$prefix,
-      tokens-mat-icon.get-color-tokens($config));
+      tokens-mat-icon.get-color-tokens($theme));
   }
 
   .mat-icon {
     &.mat-primary {
-      @include _palette-colors($config, primary);
+      @include _palette-colors($theme, primary);
     }
 
     &.mat-accent {
-      @include _palette-colors($config, accent);
+      @include _palette-colors($theme, accent);
     }
 
     &.mat-warn {
-      @include _palette-colors($config, warn);
+      @include _palette-colors($theme, warn);
     }
   }
 }
 
-@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-icon') {
-    $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/list/_list-theme.scss

@@ -12,7 +12,7 @@
 @use '../core/tokens/m2/mdc/list' as tokens-mdc-list;
 @use '../core/typography/typography';
 
-@mixin base($config-or-theme) {
+@mixin base($theme) {
   // Add default values for tokens not related to color, typography, or density.
   @include sass-utils.current-selector-or-root() {
     @include mdc-list-theme.theme(tokens-mdc-list.get-unthemable-tokens());

package/menu/_menu-theme.scss

@@ -2,44 +2,35 @@
 @use '../core/style/sass-utils';
 @use '../core/tokens/token-utils';
 @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);
-
+@mixin color($theme) {
   @include sass-utils.current-selector-or-root() {
     @include token-utils.create-token-values(tokens-mat-menu.$prefix,
-      tokens-mat-menu.get-color-tokens($config));
+      tokens-mat-menu.get-color-tokens($theme));
   }
 }
 
-@mixin typography($config-or-theme) {
-  $config: typography.private-typography-to-2018-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-menu.$prefix,
-      tokens-mat-menu.get-typography-tokens($config));
+      tokens-mat-menu.get-typography-tokens($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-menu') {
-    $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/menu/index.d.ts

@@ -1,15 +1,10 @@
-import { _AbstractConstructor } from '@angular/material/core';
 import { AfterContentInit } from '@angular/core';
 import { AfterViewInit } from '@angular/core';
 import { AnimationEvent as AnimationEvent_2 } from '@angular/animations';
 import { AnimationTriggerMetadata } from '@angular/animations';
 import { ApplicationRef } from '@angular/core';
-import { BooleanInput } from '@angular/cdk/coercion';
-import { CanDisable } from '@angular/material/core';
-import { CanDisableRipple } from '@angular/material/core';
 import { ChangeDetectorRef } from '@angular/core';
 import { ComponentFactoryResolver } from '@angular/core';
-import { _Constructor } from '@angular/material/core';
 import { Direction } from '@angular/cdk/bidi';
 import { Directionality } from '@angular/cdk/bidi';
 import { ElementRef } from '@angular/core';
@@ -166,13 +161,9 @@ export declare class MatMenu implements AfterContentInit, MatMenuPanel<MatMenuIt
      */
     lazyContent: MatMenuContent;
     /** Whether the menu should overlap its trigger. */
-    get overlapTrigger(): boolean;
-    set overlapTrigger(value: BooleanInput);
-    private _overlapTrigger;
+    overlapTrigger: boolean;
     /** Whether the menu has a backdrop. */
-    get hasBackdrop(): boolean | undefined;
-    set hasBackdrop(value: BooleanInput);
-    private _hasBackdrop;
+    hasBackdrop?: boolean;
     /**
      * This method takes classes set on the host mat-menu element and applies them on the
      * menu template that displays in the overlay container.  Otherwise, it's difficult
@@ -259,6 +250,8 @@ export declare class MatMenu implements AfterContentInit, MatMenuPanel<MatMenuIt
     private _updateDirectDescendants;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatMenu, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MatMenu, "mat-menu", ["matMenu"], { "backdropClass": { "alias": "backdropClass"; "required": false; }; "ariaLabel": { "alias": "aria-label"; "required": false; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; }; "ariaDescribedby": { "alias": "aria-describedby"; "required": false; }; "xPosition": { "alias": "xPosition"; "required": false; }; "yPosition": { "alias": "yPosition"; "required": false; }; "overlapTrigger": { "alias": "overlapTrigger"; "required": false; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; "panelClass": { "alias": "class"; "required": false; }; "classList": { "alias": "classList"; "required": false; }; }, { "closed": "closed"; "close": "close"; }, ["lazyContent", "_allItems", "items"], ["*"], false, never>;
+    static ngAcceptInputType_overlapTrigger: unknown;
+    static ngAcceptInputType_hasBackdrop: any;
 }
 
 /**
@@ -325,7 +318,7 @@ export declare interface MatMenuDefaultOptions {
 /**
  * Single item inside a `mat-menu`. Provides the menu item styling and accessibility treatment.
  */
-export declare class MatMenuItem extends _MatMenuItemBase implements FocusableOption, CanDisable, CanDisableRipple, AfterViewInit, OnDestroy {
+export declare class MatMenuItem implements FocusableOption, AfterViewInit, OnDestroy {
     private _elementRef;
     private _document?;
     private _focusMonitor?;
@@ -333,6 +326,10 @@ export declare class MatMenuItem extends _MatMenuItemBase implements FocusableOp
     private _changeDetectorRef?;
     /** ARIA role for the menu item. */
     role: 'menuitem' | 'menuitemradio' | 'menuitemcheckbox';
+    /** Whether the menu item is disabled. */
+    disabled: boolean;
+    /** Whether ripples are disabled on the menu item. */
+    disableRipple: boolean;
     /** Stream that emits when the menu item is hovered. */
     readonly _hovered: Subject<MatMenuItem>;
     /** Stream that emits when the menu item is focused. */
@@ -365,14 +362,11 @@ export declare class MatMenuItem extends _MatMenuItemBase implements FocusableOp
     _setTriggersSubmenu(triggersSubmenu: boolean): void;
     _hasFocus(): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatMenuItem, [null, null, null, { optional: true; }, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatMenuItem, "[mat-menu-item]", ["matMenuItem"], { "disabled": { "alias": "disabled"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; "role": { "alias": "role"; "required": false; }; }, {}, never, ["mat-icon, [matMenuItemIcon]", "*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatMenuItem, "[mat-menu-item]", ["matMenuItem"], { "role": { "alias": "role"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; }, {}, never, ["mat-icon, [matMenuItemIcon]", "*"], false, never>;
+    static ngAcceptInputType_disabled: unknown;
+    static ngAcceptInputType_disableRipple: unknown;
 }
 
-/** @docs-private */
-declare const _MatMenuItemBase: _Constructor<CanDisableRipple> & _AbstractConstructor<CanDisableRipple> & _Constructor<CanDisable> & _AbstractConstructor<CanDisable> & {
-    new (): {};
-};
-
 export declare class MatMenuModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<MatMenuModule, never>;
     static ɵmod: i0.ɵɵNgModuleDeclaration<MatMenuModule, [typeof i1.MatMenu, typeof i2.MatMenuItem, typeof i3.MatMenuContent, typeof i4.MatMenuTrigger], [typeof i5.CommonModule, typeof i6.MatRippleModule, typeof i6.MatCommonModule, typeof i7.OverlayModule], [typeof i8.CdkScrollableModule, typeof i1.MatMenu, typeof i6.MatCommonModule, typeof i2.MatMenuItem, typeof i3.MatMenuContent, typeof i4.MatMenuTrigger]>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular/material",
-  "version": "17.0.0-next.1",
+  "version": "17.0.0-next.3",
   "description": "Angular Material",
   "repository": {
     "type": "git",
@@ -478,7 +478,7 @@
   },
   "peerDependencies": {
     "@angular/animations": "^17.0.0-0 || ^17.1.0-0 || ^17.2.0-0 || ^17.3.0-0 || ^18.0.0-0",
-    "@angular/cdk": "17.0.0-next.1",
+    "@angular/cdk": "17.0.0-next.3",
     "@angular/core": "^17.0.0-0 || ^17.1.0-0 || ^17.2.0-0 || ^17.3.0-0 || ^18.0.0-0",
     "@angular/common": "^17.0.0-0 || ^17.1.0-0 || ^17.2.0-0 || ^17.3.0-0 || ^18.0.0-0",
     "@angular/forms": "^17.0.0-0 || ^17.1.0-0 || ^17.2.0-0 || ^17.3.0-0 || ^18.0.0-0",