fixup! fixup! feat(material-experimental/mdc-autocomplete): add panel animation

Author: mmalerba

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

@@ -15,7 +15,6 @@ import {
   transition,
   trigger
 } from '@angular/animations';
-import {numbers as menuSurfaceConstants} from '@material/menu-surface';
 
 // Animation values come from
 // https://github.com/material-components/material-components-web/blob/master/packages/mdc-menu-surface/_mixins.scss
@@ -28,12 +27,10 @@ export const panelAnimation: AnimationTriggerMetadata = trigger('panelAnimation'
   transition(':enter, hidden => visible', [
     group([
         animate('0.03s linear', style({ opacity: 1 })),
-        animate(
-            `${menuSurfaceConstants.TRANSITION_OPEN_DURATION}ms cubic-bezier(0, 0, 0.2, 1)`,
-            style({ transform: 'scale(1)' })),
+        animate('0.12s cubic-bezier(0, 0, 0.2, 1)', style({ transform: 'scale(1)' })),
     ]),
   ]),
   transition(':leave, visible => hidden', [
-    animate(`${menuSurfaceConstants.TRANSITION_CLOSE_DURATION}ms linear`, style({ opacity: 0 })),
+    animate('0.075s linear', style({ opacity: 0 })),
   ]),
 ]);

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

@@ -193,6 +193,7 @@ describe('MDC-based MatAutocomplete', () => {
       fixture.detectChanges();
       zone.simulateZoneExit();
       dispatchFakeEvent(document, 'auxclick');
+      tick();
 
       expect(fixture.componentInstance.trigger.panelOpen)
           .toBe(false, `Expected clicking outside the panel to set its state to closed.`);

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

@@ -7,21 +7,20 @@
  */
 
 import {
-  Component,
-  ViewEncapsulation,
   ChangeDetectionStrategy,
+  Component,
   ContentChildren,
   QueryList,
+  ViewEncapsulation,
 } from '@angular/core';
-import {panelAnimation} from '@angular/material-experimental/mdc-autocomplete/animations';
-import {_MatAutocompleteBase} from '@angular/material/autocomplete';
 import {
-  MAT_OPTION_PARENT_COMPONENT,
   MAT_OPTGROUP,
+  MAT_OPTION_PARENT_COMPONENT,
   MatOptgroup,
   MatOption,
 } from '@angular/material-experimental/mdc-core';
-
+import {_MatAutocompleteBase} from '@angular/material/autocomplete';
+import {panelAnimation} from './animations';
 
 @Component({
   selector: 'mat-autocomplete',

src/material/autocomplete/testing/shared.spec.ts

@@ -5,6 +5,7 @@ import {Component} from '@angular/core';
 import {ComponentFixture, inject, TestBed} from '@angular/core/testing';
 import {MatAutocompleteModule} from '@angular/material/autocomplete';
 import {MatAutocompleteHarness} from '@angular/material/autocomplete/testing';
+import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 
 /**
  * Function that can be used to run the shared autocomplete harness tests for either the non-MDC or
@@ -19,7 +20,10 @@ export function runHarnessTests(
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [autocompleteModule],
+      imports: [
+          NoopAnimationsModule,
+          autocompleteModule
+      ],
       declarations: [AutocompleteHarnessTest],
     }).compileComponents();