@angular/material 17.2.0-rc.0 → 17.2.1

package/select/_select-theme.scss

@@ -1,11 +1,10 @@
-@use '@material/density' as mdc-density;
-@use '@material/textfield' as mdc-textfield;
 @use '../core/tokens/m2/mat/select' as tokens-mat-select;
 @use '../core/tokens/token-utils';
 @use '../core/style/sass-utils';
 
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
+@use '../core/theming/validation';
 @use '../core/typography/typography';
 
 /// Outputs base theme styles (styles not dependent on the color, typography, or density settings)
@@ -71,23 +70,6 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
   }
   @else {
-    $density-scale: inspection.get-theme-density($theme);
-
-    // Density is clamped at -5 here, because MDC's form field throws an error for anything lower.
-    $form-field-height: mdc-density.prop-value(
-      $density-config: mdc-textfield.$density-config,
-      $density-scale: theming.clamp-density($density-scale, -5),
-      $property-name: height,
-    );
-
-    // On lower densities the filled form field hides its label which causes the label to
-    // be misaligned. Remove the additional offset that was added because of the label.
-    @if ($form-field-height < mdc-textfield.$minimum-height-for-filled-label) {
-      .mat-form-field-appearance-fill .mat-mdc-select-arrow-wrapper {
-        transform: none;
-      }
-    }
-
     @include sass-utils.current-selector-or-root() {
       @include token-utils.create-token-values(tokens-mat-select.$prefix,
         tokens-mat-select.get-density-tokens($theme));
@@ -121,6 +103,8 @@
 }
 
 @mixin _theme-from-tokens($tokens, $options...) {
+  @include validation.selector-defined(
+      'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector');
   $mat-select-tokens: token-utils.get-tokens-for($tokens, tokens-mat-select.$prefix, $options...);
   @include token-utils.create-token-values(tokens-mat-select.$prefix, $mat-select-tokens);
 }

package/sidenav/_sidenav-theme.scss

@@ -1,6 +1,7 @@
 @use 'sass:map';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
+@use '../core/theming/validation';
 @use '../core/tokens/m2/mat/sidenav' as tokens-mat-sidenav;
 @use '../core/tokens/token-utils';
 @use '../core/style/sass-utils';
@@ -64,6 +65,8 @@
 }
 
 @mixin _theme-from-tokens($tokens) {
+  @include validation.selector-defined(
+      'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector');
   @if ($tokens != ()) {
     @include token-utils.create-token-values(
         tokens-mat-sidenav.$prefix, map.get($tokens, tokens-mat-sidenav.$prefix));

package/slide-toggle/_slide-toggle-theme.scss

@@ -3,6 +3,7 @@
 @use '../core/style/sass-utils';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
+@use '../core/theming/validation';
 @use '../core/tokens/token-utils';
 @use '../core/typography/typography';
 @use '../core/tokens/m2/mdc/form-field' as tokens-mdc-form-field;
@@ -133,6 +134,8 @@
 }
 
 @mixin _theme-from-tokens($tokens, $options...) {
+  @include validation.selector-defined(
+      'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector');
   // Don't pass $options here, since the mdc-form-field doesn't support color options,
   // only the mdc-switch does.
   $mdc-form-field-tokens: token-utils.get-tokens-for($tokens, tokens-mdc-form-field.$prefix);

package/slider/_slider-theme.scss

@@ -1,6 +1,7 @@
 @use '@material/slider/slider-theme' as mdc-slider-theme;
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
+@use '../core/theming/validation';
 @use '../core/typography/typography';
 @use '../core/style/sass-utils';
 @use '../core/tokens/token-utils';
@@ -129,6 +130,8 @@
 }
 
 @mixin _theme-from-tokens($tokens, $options...) {
+  @include validation.selector-defined(
+      'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector');
   $mdc-slider-tokens: token-utils.get-tokens-for($tokens, tokens-mdc-slider.$prefix, $options...);
   $mat-slider-tokens: token-utils.get-tokens-for($tokens, tokens-mat-slider.$prefix, $options...);
   @include mdc-slider-theme.theme($mdc-slider-tokens);

package/snack-bar/_snack-bar-theme.scss

@@ -2,6 +2,7 @@
 @use '@material/snackbar/snackbar-theme' as mdc-snackbar-theme;
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
+@use '../core/theming/validation';
 @use '../core/style/sass-utils';
 @use '../core/typography/typography';
 @use '../core/tokens/token-utils';
@@ -69,6 +70,8 @@
 }
 
 @mixin _theme-from-tokens($tokens) {
+  @include validation.selector-defined(
+      'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector');
   @if ($tokens != ()) {
     @include mdc-snackbar-theme.theme(map.get($tokens, tokens-mdc-snack-bar.$prefix));
     @include token-utils.create-token-values(

package/sort/_sort-theme.scss

@@ -4,6 +4,7 @@
 @use '../core/typography/typography';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
+@use '../core/theming/validation';
 @use '../core/tokens/token-utils';
 
 @mixin base($theme) {
@@ -70,6 +71,8 @@
 }
 
 @mixin _theme-from-tokens($tokens) {
+  @include validation.selector-defined(
+      'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector');
   @if ($tokens != ()) {
     @include token-utils.create-token-values(
         tokens-mat-sort.$prefix, map.get($tokens, tokens-mat-sort.$prefix));

package/sort/index.d.ts

@@ -5,10 +5,10 @@ import { ChangeDetectorRef } from '@angular/core';
 import { ElementRef } from '@angular/core';
 import { EventEmitter } from '@angular/core';
 import { FocusMonitor } from '@angular/cdk/a11y';
-import { HasInitialized } from '@angular/material/core';
 import * as i0 from '@angular/core';
 import * as i1 from '@angular/material/core';
 import { InjectionToken } from '@angular/core';
+import { Observable } from 'rxjs';
 import { OnChanges } from '@angular/core';
 import { OnDestroy } from '@angular/core';
 import { OnInit } from '@angular/core';
@@ -68,8 +68,9 @@ export declare const MAT_SORT_HEADER_INTL_PROVIDER: {
 export declare function MAT_SORT_HEADER_INTL_PROVIDER_FACTORY(parentIntl: MatSortHeaderIntl): MatSortHeaderIntl;
 
 /** Container for MatSortables to manage the sort state and provide default sort parameters. */
-export declare class MatSort extends _MatSortBase implements HasInitialized, OnChanges, OnDestroy, OnInit {
+export declare class MatSort implements OnChanges, OnDestroy, OnInit {
     private _defaultOptions?;
+    private _initializedStream;
     /** Collection of all registered sortables that this directive manages. */
     sortables: Map<string, MatSortable>;
     /** Used to notify any child components listening to state changes. */
@@ -94,6 +95,8 @@ export declare class MatSort extends _MatSortBase implements HasInitialized, OnC
     disabled: boolean;
     /** Event emitted when the user changes either the active sort or sort direction. */
     readonly sortChange: EventEmitter<Sort>;
+    /** Emits when the paginator is initialized. */
+    initialized: Observable<void>;
     constructor(_defaultOptions?: MatSortDefaultOptions | undefined);
     /**
      * Register function to be used by the contained MatSortables. Adds the MatSortable to the
@@ -141,11 +144,6 @@ export declare const matSortAnimations: {
     readonly allowChildren: AnimationTriggerMetadata;
 };
 
-/** @docs-private */
-declare const _MatSortBase: (new (...args: any[]) => HasInitialized) & {
-    new (): {};
-};
-
 /** Default options for `mat-sort`.  */
 export declare interface MatSortDefaultOptions {
     /** Whether to disable clearing the sorting state. */

package/stepper/_stepper-theme.scss

@@ -1,5 +1,6 @@
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
+@use '../core/theming/validation';
 @use '../core/typography/typography';
 @use '../core/style/sass-utils';
 @use '../core/tokens/token-utils';
@@ -96,6 +97,8 @@
 }
 
 @mixin _theme-from-tokens($tokens, $options...) {
+  @include validation.selector-defined(
+      'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector');
   @if ($tokens != ()) {
     $mat-stepper-tokens: token-utils.get-tokens-for(
       $tokens,

package/table/_table-theme.scss

@@ -2,6 +2,7 @@
 @use '../core/tokens/m2/mat/table' as tokens-mat-table;
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
+@use '../core/theming/validation';
 @use '../core/typography/typography';
 @use '../core/tokens/token-utils';
 @use '../core/style/sass-utils';
@@ -75,6 +76,8 @@
 }
 
 @mixin _theme-from-tokens($tokens) {
+  @include validation.selector-defined(
+      'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector');
   @if ($tokens != ()) {
     @include token-utils.create-token-values(
         tokens-mat-table.$prefix, map.get($tokens, tokens-mat-table.$prefix));

package/tabs/_tabs-theme.scss

@@ -7,6 +7,7 @@
 @use '../core/tokens/m2/mat/tab-header-with-background' as tokens-mat-tab-header-with-background;
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
+@use '../core/theming/validation';
 @use '../core/typography/typography';
 @use '../core/tokens/token-utils';
 
@@ -147,6 +148,8 @@
 }
 
 @mixin _theme-from-tokens($tokens, $options...) {
+  @include validation.selector-defined(
+      'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector');
   $mdc-tab-indicator-tokens: token-utils.get-tokens-for(
       $tokens, tokens-mdc-tab-indicator.$prefix, $options...);
   $mat-tab-header-tokens: token-utils.get-tokens-for(

package/tabs/index.d.ts

@@ -74,6 +74,34 @@ declare namespace i6 {
     }
 }
 
+declare abstract class InkBarItem implements OnInit, OnDestroy {
+    private _elementRef;
+    private _inkBarElement;
+    private _inkBarContentElement;
+    private _fitToContent;
+    /** Whether the ink bar should fit to the entire tab or just its content. */
+    get fitInkBarToContent(): boolean;
+    set fitInkBarToContent(newValue: boolean);
+    /** Aligns the ink bar to the current item. */
+    activateInkBar(previousIndicatorClientRect?: DOMRect): void;
+    /** Removes the ink bar from the current item. */
+    deactivateInkBar(): void;
+    /** Initializes the foundation. */
+    ngOnInit(): void;
+    /** Destroys the foundation. */
+    ngOnDestroy(): void;
+    /** Creates and appends the ink bar element. */
+    private _createInkBarElement;
+    /**
+     * Appends the ink bar to the tab host element or content, depending on whether
+     * the ink bar should fit to content.
+     */
+    private _appendInkBarElement;
+    static ɵfac: i0.ɵɵFactoryDeclaration<InkBarItem, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<InkBarItem, never, never, { "fitInkBarToContent": { "alias": "fitInkBarToContent"; "required": false; }; }, {}, never, never, false, never>;
+    static ngAcceptInputType_fitInkBarToContent: unknown;
+}
+
 /** Injection token for the MatInkBar's Positioner. */
 export declare const _MAT_INK_BAR_POSITIONER: InjectionToken<_MatInkBarPositioner>;
 
@@ -714,7 +742,7 @@ export declare class MatTabLabel extends CdkPortal {
  * Used in the `mat-tab-group` view to display tab labels.
  * @docs-private
  */
-export declare class MatTabLabelWrapper extends _MatTabLabelWrapperMixinBase {
+export declare class MatTabLabelWrapper extends InkBarItem {
     elementRef: ElementRef;
     /** Whether the tab is disabled. */
     disabled: boolean;
@@ -728,17 +756,10 @@ export declare class MatTabLabelWrapper extends _MatTabLabelWrapperMixinBase {
     static ngAcceptInputType_disabled: unknown;
 }
 
-/** @docs-private */
-declare const _MatTabLabelWrapperMixinBase: {
-    new (): {
-        elementRef: ElementRef;
-    };
-} & (new (...args: any[]) => MatInkBarItem);
-
 /**
  * Link inside a `mat-tab-nav-bar`.
  */
-export declare class MatTabLink extends _MatTabLinkMixinBase implements AfterViewInit, OnDestroy, RippleTarget, FocusableOption {
+export declare class MatTabLink extends InkBarItem implements AfterViewInit, OnDestroy, RippleTarget, FocusableOption {
     private _tabNavBar;
     /** @docs-private */ elementRef: ElementRef;
     private _focusMonitor;
@@ -788,12 +809,6 @@ export declare class MatTabLink extends _MatTabLinkMixinBase implements AfterVie
     static ngAcceptInputType_tabIndex: unknown;
 }
 
-declare const _MatTabLinkMixinBase: {
-    new (): {
-        elementRef: ElementRef;
-    };
-} & (new (...args: any[]) => MatInkBarItem);
-
 /**
  * Navigation component matching the styles of the tab group header.
  * Provides anchored navigation with animated ink bar.

package/toolbar/_toolbar-theme.scss

@@ -1,6 +1,7 @@
 @use 'sass:map';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
+@use '../core/theming/validation';
 @use '../core/typography/typography';
 @use '../core/tokens/m2/mat/toolbar' as tokens-mat-toolbar;
 @use '../core/tokens/token-utils';
@@ -92,6 +93,8 @@
 }
 
 @mixin _theme-from-tokens($tokens) {
+  @include validation.selector-defined(
+      'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector');
   @if ($tokens != ()) {
     @include token-utils.create-token-values(tokens-mat-toolbar.$prefix,
       map.get($tokens, tokens-mat-toolbar.$prefix));

package/tooltip/_tooltip-theme.scss

@@ -3,6 +3,7 @@
 @use '../core/style/sass-utils';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
+@use '../core/theming/validation';
 @use '../core/typography/typography';
 @use '../core/tokens/m2/mdc/plain-tooltip' as tokens-mdc-plain-tooltip;
 
@@ -81,6 +82,8 @@
 }
 
 @mixin _theme-from-tokens($tokens) {
+  @include validation.selector-defined(
+      'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector');
   @if $tokens != () {
     @include mdc-plain-tooltip-theme.theme(map.get($tokens, tokens-mdc-plain-tooltip.$prefix));
   }

package/tree/_tree-theme.scss

@@ -1,6 +1,7 @@
 @use 'sass:map';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
+@use '../core/theming/validation';
 @use '../core/typography/typography';
 @use '../core/style/sass-utils';
 @use '../core/tokens/token-utils';
@@ -75,6 +76,8 @@
 }
 
 @mixin _theme-from-tokens($tokens) {
+  @include validation.selector-defined(
+      'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector');
   @if ($tokens != ()) {
     @include token-utils.create-token-values(
         tokens-mat-tree.$prefix, map.get($tokens, tokens-mat-tree.$prefix));