@angular/material-experimental 14.0.0-next.1 → 14.0.0-next.4

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-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-menu/menu.d.ts

@@ -16,7 +16,7 @@ export declare const MAT_MENU_SCROLL_STRATEGY_FACTORY_PROVIDER: Provider;
 export declare class MatMenu extends _MatMenuBase {
     protected _elevationPrefix: string;
     protected _baseElevation: number;
-    constructor(_elementRef: ElementRef<HTMLElement>, _ngZone: NgZone, _defaultOptions: MatMenuDefaultOptions);
+    constructor(elementRef: ElementRef<HTMLElement>, ngZone: NgZone, defaultOptions: MatMenuDefaultOptions);
     static ɵfac: i0.ɵɵFactoryDeclaration<MatMenu, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MatMenu, "mat-menu", ["matMenu"], {}, {}, never, ["*"]>;
 }

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/ink-bar.d.ts

@@ -47,7 +47,7 @@ export declare class MatInkBarFoundation {
     /** Removes the ink bar from the current item. */
     deactivate(): void;
     /** Gets the ClientRect of the ink bar. */
-    computeContentClientRect(): ClientRect;
+    computeContentClientRect(): DOMRect;
     /** Initializes the foundation. */
     init(): void;
     /** Destroys the foundation. */