@angular/material-experimental 14.0.0-next.3 → 14.0.0-next.6

package/mdc-dialog/dialog.d.ts

@@ -34,7 +34,12 @@ export declare class MatDialog extends _MatDialogBase<MatDialogContainer> {
      * @deprecated `_location` parameter to be removed.
      * @breaking-change 10.0.0
      */
-    location: Location, defaultOptions: MatDialogConfig, scrollStrategy: any, parentDialog: MatDialog, overlayContainer: OverlayContainer, animationMode?: 'NoopAnimations' | 'BrowserAnimations');
+    location: Location, defaultOptions: MatDialogConfig, scrollStrategy: any, parentDialog: MatDialog, overlayContainer: OverlayContainer, 
+    /**
+     * @deprecated No longer used. To be removed.
+     * @breaking-change 14.0.0
+     */
+    animationMode?: 'NoopAnimations' | 'BrowserAnimations');
     static ɵfac: i0.ɵɵFactoryDeclaration<MatDialog, [null, null, { optional: true; }, { optional: true; }, null, { optional: true; skipSelf: true; }, null, { optional: true; }]>;
     static ɵprov: i0.ɵɵInjectableDeclaration<MatDialog>;
 }

package/mdc-dialog/testing/dialog-opener.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+import { ComponentType } from '@angular/cdk/overlay';
+import { _MatTestDialogOpenerBase } from '@angular/material/dialog/testing';
+import { MatDialog, MatDialogContainer, MatDialogConfig } from '@angular/material-experimental/mdc-dialog';
+/** Test component that immediately opens a dialog when bootstrapped. */
+export declare class MatTestDialogOpener<T = unknown, R = unknown> extends _MatTestDialogOpenerBase<MatDialogContainer, T, R> {
+    constructor(dialog: MatDialog);
+    /** Static method that prepares this class to open the provided component. */
+    static withComponent<T = unknown, R = unknown>(component: ComponentType<T>, config?: MatDialogConfig): ComponentType<MatTestDialogOpener<T, R>>;
+}
+export declare class MatTestDialogOpenerModule {
+}

package/mdc-dialog/testing/public-api.d.ts

@@ -7,3 +7,4 @@
  */
 export { DialogHarnessFilters } from '@angular/material/dialog/testing';
 export { MatDialogHarness, MatDialogSection } from './dialog-harness';
+export * from './dialog-opener';

package/mdc-form-field/_form-field-density.scss

@@ -77,7 +77,7 @@
   // on whether a textarea is used. This is not possible in our implementation of the
   // form-field because we do not know what type of form-field control is set up. Hence
   // we always use a fixed position for the label. This does not have any implications.
-  .mat-mdc-form-field .mat-mdc-text-field-wrapper .mdc-floating-label {
+  .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-floating-label {
     top: math.div($height, 2);
   }
 
@@ -107,7 +107,7 @@
     // Update the spacing for filled form fields to account for the hidden floating label.
     @include _infix-vertical-spacing-filled(
           $no-label-padding, $no-label-padding);
-    .mat-mdc-text-field-wrapper:not(.mdc-text-field--outlined) .mdc-floating-label {
+    .mat-mdc-text-field-wrapper:not(.mdc-text-field--outlined) .mat-mdc-floating-label {
         display: none;
     }
   }

package/mdc-form-field/_form-field-high-contrast.scss

@@ -4,11 +4,20 @@
   $focus-indicator-width: 3px;
   $focus-indicator-style: dashed;
 
-  // The outline of the `fill` appearance is achieved through a background color
-  // which won't be visible in high contrast mode. Add an outline to replace it.
-  .mat-form-field-appearance-fill .mat-mdc-text-field-wrapper {
-    @include a11y.high-contrast(active, off) {
-      outline: solid 1px;
+  .mat-form-field-appearance-fill {
+    // The outline of the `fill` appearance is achieved through a background color
+    // which won't be visible in high contrast mode. Add an outline to replace it.
+    .mat-mdc-text-field-wrapper {
+      @include a11y.high-contrast(active, off) {
+        outline: solid 1px;
+      }
+    }
+
+    // Use GreyText for the disabled outline color which will account for the user's configuration.
+    &.mat-form-field-disabled .mat-mdc-text-field-wrapper {
+      @include a11y.high-contrast(active, off) {
+        outline-color: GrayText;
+      }
     }
   }
 

package/mdc-form-field/_form-field-theme.scss

@@ -76,7 +76,7 @@
     // shows `body1` for text fields though, so we manually override the typography.
     // Note: Form controls inherit the typography from the parent form field.
     .mat-mdc-form-field,
-    .mat-mdc-form-field .mdc-floating-label {
+    .mat-mdc-floating-label {
       @include mdc-typography.typography(body1, $query: mdc-helpers.$mat-typography-styles-query);
     }
 

package/mdc-form-field/_mdc-text-field-structure-overrides.scss

@@ -20,7 +20,7 @@
   // In order to ensure proper alignment of the floating label, we reset its line-height.
   // The line-height is not important as the element is absolutely positioned and only has one line
   // of text.
-  .mat-mdc-form-field .mdc-floating-label.mdc-floating-label {
+  .mat-mdc-form-field .mat-mdc-floating-label.mdc-floating-label {
     line-height: normal;
   }
 
@@ -95,7 +95,7 @@
   // the notched outline container, and already applies a specific horizontal spacing which
   // we do not want to overwrite. *Note*: We need to have increased specificity for this
   // override because the `right` property will be set with higher specificity in RTL mode.
-  .mat-mdc-text-field-wrapper .mat-mdc-form-field-infix .mdc-floating-label {
+  .mat-mdc-text-field-wrapper .mat-mdc-form-field-infix .mat-mdc-floating-label {
     left: auto;
     right: auto;
   }

package/mdc-form-field/directives/floating-label.d.ts

@@ -24,13 +24,11 @@ export declare class MatFormFieldFloatingLabel {
     private _elementRef;
     /** Whether the label is floating. */
     floating: boolean;
-    /** Whether the label is required. */
-    required: boolean;
     constructor(_elementRef: ElementRef);
     /** Gets the width of the label. Used for the outline notch. */
     getWidth(): number;
     /** Gets the HTML element for the floating label. */
     get element(): HTMLElement;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatFormFieldFloatingLabel, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatFormFieldFloatingLabel, "label[matFormFieldFloatingLabel]", never, { "floating": "floating"; "required": "required"; }, {}, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatFormFieldFloatingLabel, "label[matFormFieldFloatingLabel]", never, { "floating": "floating"; }, {}, never>;
 }

package/mdc-form-field/form-field.d.ts

@@ -32,9 +32,18 @@ export declare type SubscriptSizing = 'fixed' | 'dynamic';
  * using the `MAT_FORM_FIELD_DEFAULT_OPTIONS` injection token.
  */
 export interface MatFormFieldDefaultOptions {
+    /** Default form field appearance style. */
     appearance?: MatFormFieldAppearance;
+    /** Default color of the form field. */
+    color?: ThemePalette;
+    /** Whether the required marker should be hidden by default. */
     hideRequiredMarker?: boolean;
+    /**
+     * Whether the label for form fields should by default float `always`,
+     * `never`, or `auto` (only when necessary).
+     */
     floatLabel?: FloatLabelType;
+    /** Whether the form field should reserve space for one line by default. */
     subscriptSizing?: SubscriptSizing;
 }
 /**
@@ -43,7 +52,7 @@ export interface MatFormFieldDefaultOptions {
  */
 export declare const MAT_FORM_FIELD_DEFAULT_OPTIONS: InjectionToken<MatFormFieldDefaultOptions>;
 /** Container for form controls that applies Material Design styling and behavior. */
-export declare class MatFormField implements AfterViewInit, OnDestroy, AfterContentChecked, AfterContentInit {
+export declare class MatFormField implements AfterContentInit, AfterContentChecked, AfterViewInit, OnDestroy {
     private _elementRef;
     private _changeDetectorRef;
     private _ngZone;
@@ -69,13 +78,13 @@ export declare class MatFormField implements AfterViewInit, OnDestroy, AfterCont
     get hideRequiredMarker(): boolean;
     set hideRequiredMarker(value: BooleanInput);
     private _hideRequiredMarker;
-    /** The color palette for the form-field. */
+    /** The color palette for the form field. */
     color: ThemePalette;
     /** Whether the label should always float or float as the user types. */
     get floatLabel(): FloatLabelType;
     set floatLabel(value: FloatLabelType);
     private _floatLabel;
-    /** The form-field appearance style. */
+    /** The form field appearance style. */
     get appearance(): MatFormFieldAppearance;
     set appearance(value: MatFormFieldAppearance);
     private _appearance;
@@ -120,20 +129,20 @@ export declare class MatFormField implements AfterViewInit, OnDestroy, AfterCont
      */
     getLabelId(): string | null;
     /**
-     * Gets an ElementRef for the element that a overlay attached to the form-field
+     * Gets an ElementRef for the element that a overlay attached to the form field
      * should be positioned relative to.
      */
     getConnectedOverlayOrigin(): ElementRef;
     /** Animates the placeholder up and locks it in position. */
     _animateAndLockLabel(): void;
-    /** Initializes the registered form-field control. */
+    /** Initializes the registered form field control. */
     private _initializeControl;
     private _checkPrefixAndSuffixTypes;
     /** Initializes the prefix and suffix containers. */
     private _initializePrefixAndSuffix;
     /**
      * Initializes the subscript by validating hints and synchronizing "aria-describedby" ids
-     * with the custom form-field control. Also subscribes to hint and error changes in order
+     * with the custom form field control. Also subscribes to hint and error changes in order
      * to be able to validate and synchronize ids on change.
      */
     private _initializeSubscript;
@@ -143,7 +152,7 @@ export declare class MatFormField implements AfterViewInit, OnDestroy, AfterCont
     /**
      * The floating label in the docked state needs to account for prefixes. The horizontal offset
      * is calculated whenever the appearance changes to `outline`, the prefixes change, or when the
-     * form-field is added to the DOM. This method sets up all subscriptions which are needed to
+     * form field is added to the DOM. This method sets up all subscriptions which are needed to
      * trigger the label offset update. In general, we want to avoid performing measurements often,
      * so we rely on the `NgZone` as indicator when the offset should be recalculated, instead of
      * checking every change detection cycle.
@@ -155,7 +164,7 @@ export declare class MatFormField implements AfterViewInit, OnDestroy, AfterCont
     /**
      * Whether the label should display in the infix. Labels in the outline appearance are
      * displayed as part of the notched-outline and are horizontally offset to account for
-     * form-field prefix content. This won't work in server side rendering since we cannot
+     * form field prefix content. This won't work in server side rendering since we cannot
      * measure the width of the prefix container. To make the docked label appear as if the
      * right offset has been calculated, we forcibly render the label inside the infix. Since
      * the label is part of the infix, the label cannot overflow the prefix content.

package/mdc-helpers/_mdc-helpers.scss

@@ -1,6 +1,5 @@
 // TODO(mmalerba): this file should be split into separate cohesive partials for things like
-//  "theming", "typography", "core". Currently splitting it is difficult because of our brittle
-//  gulp-based release build process. We can update this when we switch to bazel.
+//  "theming", "typography", "core".
 
 @use '@material/feature-targeting' as mdc-feature-targeting;
 @use '@material/typography' as mdc-typography;

package/mdc-list/_list-theme.scss

@@ -4,6 +4,7 @@
 @use './list-option-theme';
 @use '../mdc-helpers/mdc-helpers';
 @use '../../material/core/typography/typography';
+@use '../../material/core/typography/typography-utils';
 @use '../../material/core/theming/theming';
 
 
@@ -55,6 +56,14 @@
     @include mdc-list.without-ripple($query: mdc-helpers.$mat-typography-styles-query);
     @include list-option-theme.private-list-option-typography-styles();
   }
+
+  // According to the public spec this should be subtitle-1.
+  // However, body-1 and subtitle-1 are nearly identical in the public spec,
+  // and the Google-specific spec states that it should be body-1.
+  // For consistency, we use body-1 for both public and Google internal.
+  .mat-mdc-list-item .mdc-list-item__primary-text {
+    @include typography-utils.typography-level($config, body-1);
+  }
 }
 
 @mixin theme($theme-or-color-config) {

package/mdc-list/list.d.ts

@@ -21,7 +21,11 @@ export declare class MatListItem extends MatListItemBase {
     _meta: QueryList<MatListItemMeta>;
     _unscopedContent: ElementRef<HTMLSpanElement>;
     _itemText: ElementRef<HTMLElement>;
+    /** Indicates whether an item in a `<mat-nav-list>` is the currently active page. */
+    get activated(): boolean;
+    set activated(activated: boolean);
+    _activated: boolean;
     constructor(element: ElementRef, ngZone: NgZone, listBase: MatListBase, platform: Platform, globalRippleOptions?: RippleGlobalOptions, animationMode?: string);
     static ɵfac: i0.ɵɵFactoryDeclaration<MatListItem, [null, null, null, null, { optional: true; }, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatListItem, "mat-list-item, a[mat-list-item], button[mat-list-item]", ["matListItem"], {}, {}, ["_lines", "_titles", "_meta"], ["[matListItemAvatar],[matListItemIcon]", "[matListItemTitle]", "[matListItemLine]", "*", "[matListItemMeta]", "mat-divider"]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatListItem, "mat-list-item, a[mat-list-item], button[mat-list-item]", ["matListItem"], { "activated": "activated"; }, {}, ["_lines", "_titles", "_meta"], ["[matListItemAvatar],[matListItemIcon]", "[matListItemTitle]", "[matListItemLine]", "*", "[matListItemMeta]", "mat-divider"]>;
 }

package/mdc-paginator/public-api.d.ts

@@ -7,4 +7,4 @@
  */
 export * from './module';
 export * from './paginator';
-export { MatPaginatorIntl, MAT_PAGINATOR_INTL_PROVIDER_FACTORY, MAT_PAGINATOR_INTL_PROVIDER, PageEvent, } from '@angular/material/paginator';
+export { MatPaginatorIntl, MAT_PAGINATOR_INTL_PROVIDER_FACTORY, MAT_PAGINATOR_INTL_PROVIDER, PageEvent, MatPaginatorSelectConfig, } from '@angular/material/paginator';

package/mdc-select/_select-theme.scss

@@ -71,7 +71,7 @@
       @include mdc-list.list-base(mdc-helpers.$mat-typography-styles-query);
     }
 
-    .mat-mdc-select-value {
+    .mat-mdc-select {
       @include mdc-typography.typography(body1, $query: mdc-helpers.$mat-typography-styles-query);
     }
   }

package/mdc-table/_table-theme.scss

@@ -15,8 +15,6 @@
   $orig-row-hover-fill-color: mdc-data-table-theme.$row-hover-fill-color;
   $orig-header-row-text-color: mdc-data-table-theme.$header-row-text-color;
   $orig-row-text-color: mdc-data-table-theme.$row-text-color;
-  $orig-sort-icon-color: mdc-data-table-theme.$sort-icon-color;
-  $orig-sort-icon-active-color: mdc-data-table-theme.$sort-icon-active-color;
   $orig-stroke-color: mdc-data-table-theme.$stroke-color;
 
   @include mdc-helpers.mat-using-mdc-theme($config) {
@@ -25,12 +23,9 @@
     mdc-data-table-theme.$row-hover-fill-color: rgba(mdc-theme-color.prop-value(on-surface), 0.04);
     mdc-data-table-theme.$header-row-text-color: rgba(mdc-theme-color.prop-value(on-surface), 0.87);
     mdc-data-table-theme.$row-text-color: rgba(mdc-theme-color.prop-value(on-surface), 0.87);
-    mdc-data-table-theme.$sort-icon-color: rgba(mdc-theme-color.prop-value(on-surface), 0.6);
-    mdc-data-table-theme.$sort-icon-active-color:
-        rgba(mdc-theme-color.prop-value(on-surface), 0.87);
     mdc-data-table-theme.$stroke-color: rgba(mdc-theme-color.prop-value(on-surface), 0.12);
 
-    @include mdc-data-table.core-styles($query: mdc-helpers.$mat-theme-styles-query);
+    @include mdc-data-table.table-styles($query: mdc-helpers.$mat-theme-styles-query);
   }
 
   // Restore original values of MDC global variables.
@@ -39,8 +34,6 @@
   mdc-data-table-theme.$row-hover-fill-color: $orig-row-hover-fill-color;
   mdc-data-table-theme.$header-row-text-color: $orig-header-row-text-color;
   mdc-data-table-theme.$row-text-color: $orig-row-text-color;
-  mdc-data-table-theme.$sort-icon-color: $orig-sort-icon-color;
-  mdc-data-table-theme.$sort-icon-active-color: $orig-sort-icon-active-color;
   mdc-data-table-theme.$stroke-color: $orig-stroke-color;
 
   .mat-mdc-table {
@@ -53,7 +46,7 @@
   $config: typography.private-typography-to-2018-config(
       theming.get-typography-config($config-or-theme));
   @include mdc-helpers.mat-using-mdc-typography($config) {
-    @include mdc-data-table.core-styles($query: mdc-helpers.$mat-typography-styles-query);
+    @include mdc-data-table.table-styles($query: mdc-helpers.$mat-typography-styles-query);
   }
 }
 

package/mdc-tabs/_tabs-common.scss

@@ -104,6 +104,15 @@ $mat-tab-animation-duration: 500ms !default;
     z-index: 2;
     -webkit-tap-highlight-color: transparent;
     touch-action: none;
+    box-sizing: content-box;
+    background: none;
+    border: none;
+    outline: 0;
+    padding: 0;
+
+    &::-moz-focus-inner {
+      border: 0;
+    }
 
     .mat-ripple-element {
       opacity: map.get(mdc-ripple.$dark-ink-opacities, press);

package/mdc-tabs/tab-group.d.ts

@@ -24,7 +24,11 @@ export declare class MatTabGroup extends _MatTabGroupBase {
     get fitInkBarToContent(): boolean;
     set fitInkBarToContent(v: BooleanInput);
     private _fitInkBarToContent;
+    /** Whether tabs should be stretched to fill the header. */
+    get stretchTabs(): boolean;
+    set stretchTabs(v: BooleanInput);
+    private _stretchTabs;
     constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, defaultConfig?: MatTabsConfig, animationMode?: string);
     static ɵfac: i0.ɵɵFactoryDeclaration<MatTabGroup, [null, null, { optional: true; }, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatTabGroup, "mat-tab-group", ["matTabGroup"], { "color": "color"; "disableRipple": "disableRipple"; "fitInkBarToContent": "fitInkBarToContent"; }, {}, ["_allTabs"], never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatTabGroup, "mat-tab-group", ["matTabGroup"], { "color": "color"; "disableRipple": "disableRipple"; "fitInkBarToContent": "fitInkBarToContent"; "stretchTabs": "mat-stretch-tabs"; }, {}, ["_allTabs"], never>;
 }

package/mdc-tabs/tab-nav-bar/tab-nav-bar.d.ts

@@ -25,6 +25,10 @@ export declare class MatTabNav extends _MatTabNavBase implements AfterContentIni
     get fitInkBarToContent(): boolean;
     set fitInkBarToContent(v: BooleanInput);
     _fitInkBarToContent: BehaviorSubject<boolean>;
+    /** Whether tabs should be stretched to fill the header. */
+    get stretchTabs(): boolean;
+    set stretchTabs(v: BooleanInput);
+    private _stretchTabs;
     _items: QueryList<MatTabLink>;
     _tabListContainer: ElementRef;
     _tabList: ElementRef;
@@ -35,7 +39,7 @@ export declare class MatTabNav extends _MatTabNavBase implements AfterContentIni
     constructor(elementRef: ElementRef, dir: Directionality, ngZone: NgZone, changeDetectorRef: ChangeDetectorRef, viewportRuler: ViewportRuler, platform: Platform, animationMode?: string, defaultConfig?: MatTabsConfig);
     ngAfterContentInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatTabNav, [null, { optional: true; }, null, null, null, null, { optional: true; }, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatTabNav, "[mat-tab-nav-bar]", ["matTabNavBar", "matTabNav"], { "color": "color"; "fitInkBarToContent": "fitInkBarToContent"; }, {}, ["_items"], ["*"]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatTabNav, "[mat-tab-nav-bar]", ["matTabNavBar", "matTabNav"], { "color": "color"; "fitInkBarToContent": "fitInkBarToContent"; "stretchTabs": "mat-stretch-tabs"; }, {}, ["_items"], ["*"]>;
 }
 /**
  * Link inside of a `mat-tab-nav-bar`.