Project import generated by Copybara.

PiperOrigin-RevId: 351815658

Author: Angular Material Team

src/material-experimental/mdc-autocomplete/animations.ts

@@ -6,7 +6,6 @@
     [ngClass]="_classList"
     [attr.aria-label]="ariaLabel || null"
     [attr.aria-labelledby]="_getPanelAriaLabelledby(formFieldId)"
-    [@panelAnimation]="isOpen ? 'visible' : 'hidden'"
     #panel>
     <ng-content></ng-content>
   </div>

src/material-experimental/mdc-autocomplete/autocomplete.html

@@ -13,9 +13,6 @@
   max-height: 256px; // Prevents lists with a lot of option from growing too high.
   position: static; // MDC uses `absolute` by default which will throw off our positioning.
   visibility: hidden;
-  // MDC sets the transform-origin programatically based on whether the dropdown is above or below
-  // the input. We use our own positioning logic, so we need to set this ourselves.
-  transform-origin: center top;
 
   // Note that we include this private mixin, because the public
   // one adds a bunch of styles that we aren't using for the menu.
@@ -32,9 +29,6 @@
   .mat-mdc-autocomplete-panel-above & {
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
-    // MDC sets the transform-origin programatically based on whether the dropdown is above or below
-    // the input. We use our own positioning logic, so we need to set this ourselves.
-    transform-origin: center bottom;
   }
 
   // These classes are used to toggle the panel visibility depending on whether it has any options.

src/material-experimental/mdc-autocomplete/autocomplete.scss

@@ -7,20 +7,20 @@
  */
 
 import {
-  ChangeDetectionStrategy,
   Component,
+  ViewEncapsulation,
+  ChangeDetectionStrategy,
   ContentChildren,
   QueryList,
-  ViewEncapsulation,
 } from '@angular/core';
+import {_MatAutocompleteBase} from '@angular/material/autocomplete';
 import {
-  MAT_OPTGROUP,
   MAT_OPTION_PARENT_COMPONENT,
+  MAT_OPTGROUP,
   MatOptgroup,
   MatOption,
 } from '@angular/material-experimental/mdc-core';
-import {_MatAutocompleteBase} from '@angular/material/autocomplete';
-import {panelAnimation} from './animations';
+
 
 @Component({
   selector: 'mat-autocomplete',
@@ -35,8 +35,7 @@ import {panelAnimation} from './animations';
   },
   providers: [
     {provide: MAT_OPTION_PARENT_COMPONENT, useExisting: MatAutocomplete}
-  ],
-  animations: [panelAnimation],
+  ]
 })
 export class MatAutocomplete extends _MatAutocompleteBase {
   @ContentChildren(MAT_OPTGROUP, {descendants: true}) optionGroups: QueryList<MatOptgroup>;

src/material-experimental/mdc-autocomplete/autocomplete.ts

@@ -199,7 +199,14 @@ export class MatProgressBar extends _MatProgressBarMixinBase implements AfterVie
       const direction = this._dir ? this._dir.value : 'ltr';
       const mode = this.mode;
 
-      foundation.setReverse(direction === 'rtl' ? mode !== 'query' : mode === 'query');
+      const reverse = direction === 'rtl' ? mode !== 'query' : mode === 'query';
+      const progressDirection = reverse ? 'rtl' : 'ltr';
+      const currentDirection = this._rootElement.getAttribute('dir');
+      if (currentDirection !== progressDirection) {
+        this._rootElement.setAttribute('dir', progressDirection);
+        foundation.restartAnimation();
+      }
+
       foundation.setDeterminate(mode !== 'indeterminate' && mode !== 'query');
 
       // Divide by 100 because MDC deals with values between 0 and 1.

src/material-experimental/mdc-progress-bar/progress-bar.ts

@@ -27,8 +27,3 @@
   // declaration so the container doesn't collapse on IE11.
   flex: 1 1 auto;
 }
-
-// Ensures that the snack bar stretches to full width in handset mode.
-.mat-mdc-snack-bar-handset .mdc-snackbar__surface {
-  width: 100%;
-}

src/material-experimental/mdc-snack-bar/snack-bar-container.scss

@@ -20,10 +20,3 @@
 .mdc-data-table__table {
   table-layout: auto;
 }
-
-// MDC table rows are styled with a top border, whereas our legacy flex table styles rows with
-// a bottom border. Remove the bottom border style from the rows and let MDC display its top
-// border.
-mat-row.mat-mdc-row, mat-header-row.mat-mdc-header-row, mat-footer-row.mat-mdc-footer-row {
-  border-bottom: none;
-}

src/material-experimental/mdc-table/table.scss

@@ -8,6 +8,7 @@
 
 import {CdkTextColumn} from '@angular/cdk/table';
 import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core';
+import {_MAT_TEXT_COLUMN_TEMPLATE} from '@angular/material/table';
 
 /**
  * Column that simply shows text content for the header and row cells. Assumes that the table
@@ -20,16 +21,7 @@ import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/co
  */
 @Component({
   selector: 'mat-text-column',
-  template: `
-    <ng-container matColumnDef>
-      <th mat-header-cell *matHeaderCellDef [style.text-align]="justify">
-        {{headerText}}
-      </th>
-      <td mat-cell *matCellDef="let data" [style.text-align]="justify">
-        {{dataAccessor(data, name)}}
-      </td>
-    </ng-container>
-  `,
+  template: _MAT_TEXT_COLUMN_TEMPLATE,
   encapsulation: ViewEncapsulation.None,
   // Change detection is intentionally not set to OnPush. This component's template will be provided
   // to the table to be inserted into its view. This is problematic when change detection runs since

src/material-experimental/mdc-table/text-column.ts

@@ -74,54 +74,24 @@
   @return map-get($config, headline-1) != null;
 }
 
-// Whether a config is for the Material Design 2014 typography system.
-@function mat-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
-@function mat-private-typography-to-2014-config($config) {
+@function mat-private-typography-normalized-config($config) {
   @if mat-private-typography-is-2018-config($config) {
     @return mat-typography-config(
-        $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),
+        $display-3: map-get($config, display-1),
+        $display-2: map-get($config, display-2),
+        $display-1: map-get($config, display-3),
+        $headline: map-get($config, headline-4),
+        $title: map-get($config, subtitle-1),
+        $subheading-2: map-get($config, subhead-1),
+        $subheading-1: map-get($config, subhead-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),
-    );
-  }
-  @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
-@function mat-private-typography-to-2018-config($config) {
-  @if mat-private-typography-is-2014-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),
-        subtitle-2: map-get($config, subheading-1),
-        body-1: map-get($config, body-2),
-        body-2: map-get($config, body-1),
-        button: map-get($config, button),
-        caption: map-get($config, caption),
+        $button: map-get($config, button),
     );
   }
   @return $config;

src/material/core/typography/_typography.scss

@@ -9,6 +9,17 @@
 import {CdkTextColumn} from '@angular/cdk/table';
 import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core';
 
+export const _MAT_TEXT_COLUMN_TEMPLATE = `
+  <ng-container matColumnDef>
+    <th mat-header-cell *matHeaderCellDef [style.text-align]="justify">
+      {{headerText}}
+    </th>
+    <td mat-cell *matCellDef="let data" [style.text-align]="justify">
+      {{dataAccessor(data, name)}}
+    </td>
+  </ng-container>
+`;
+
 /**
  * Column that simply shows text content for the header and row cells. Assumes that the table
  * is using the native table implementation (`<table>`).
@@ -20,16 +31,7 @@ import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/co
  */
 @Component({
   selector: 'mat-text-column',
-  template: `
-    <ng-container matColumnDef>
-      <th mat-header-cell *matHeaderCellDef [style.text-align]="justify">
-        {{headerText}}
-      </th>
-      <td mat-cell *matCellDef="let data" [style.text-align]="justify">
-        {{dataAccessor(data, name)}}
-      </td>
-    </ng-container>
-  `,
+  template: _MAT_TEXT_COLUMN_TEMPLATE,
   encapsulation: ViewEncapsulation.None,
   // Change detection is intentionally not set to OnPush. This component's template will be provided
   // to the table to be inserted into its view. This is problematic when change detection runs since