feat(material/autocomplete): add panelClass default option

Author: andrewseguin

src/material/autocomplete/autocomplete-trigger.ts

@@ -49,7 +49,11 @@ import {MAT_FORM_FIELD, MatFormField} from '@angular/material/form-field';
 import {defer, fromEvent, merge, Observable, of as observableOf, Subject, Subscription} from 'rxjs';
 import {delay, filter, map, switchMap, take, tap} from 'rxjs/operators';
 
-import {_MatAutocompleteBase} from './autocomplete';
+import {
+  _MatAutocompleteBase,
+  MAT_AUTOCOMPLETE_DEFAULT_OPTIONS,
+  MatAutocompleteDefaultOptions
+} from './autocomplete';
 import {_MatAutocompleteOriginBase} from './autocomplete-origin';
 
 
@@ -208,7 +212,9 @@ export abstract class _MatAutocompleteTriggerBase implements ControlValueAccesso
               @Optional() private _dir: Directionality,
               @Optional() @Inject(MAT_FORM_FIELD) @Host() private _formField: MatFormField,
               @Optional() @Inject(DOCUMENT) private _document: any,
-              private _viewportRuler: ViewportRuler) {
+              private _viewportRuler: ViewportRuler,
+              @Optional() @Inject(MAT_AUTOCOMPLETE_DEFAULT_OPTIONS)
+              private _defaults?: MatAutocompleteDefaultOptions) {
     this._scrollStrategy = scrollStrategy;
   }
 
@@ -638,7 +644,8 @@ export abstract class _MatAutocompleteTriggerBase implements ControlValueAccesso
       positionStrategy: this._getOverlayPosition(),
       scrollStrategy: this._scrollStrategy(),
       width: this._getPanelWidth(),
-      direction: this._dir
+      direction: this._dir,
+      panelClass: this._defaults?.overlayPanelClass,
     });
   }
 

src/material/autocomplete/autocomplete.spec.ts

@@ -2119,6 +2119,39 @@ describe('MatAutocomplete', () => {
     }));
   });
 
+  describe('with panel classes in the default options', () => {
+    it('should apply them if provided as string', fakeAsync(() => {
+      const fixture = createComponent(SimpleAutocomplete, [
+        {provide: MAT_AUTOCOMPLETE_DEFAULT_OPTIONS,
+          useValue: {overlayPanelClass: 'default1'}}
+      ]);
+
+      fixture.detectChanges();
+      fixture.componentInstance.trigger.openPanel();
+      fixture.detectChanges();
+
+      const panelClassList =
+          overlayContainerElement.querySelector('.cdk-overlay-pane')!.classList;
+      expect(panelClassList).toContain('default1');
+    }));
+
+    it('should apply them if provided as array', fakeAsync(() => {
+      const fixture = createComponent(SimpleAutocomplete, [
+        {provide: MAT_AUTOCOMPLETE_DEFAULT_OPTIONS,
+          useValue: {overlayPanelClass: ['default1', 'default2']}}
+      ]);
+
+      fixture.detectChanges();
+      fixture.componentInstance.trigger.openPanel();
+      fixture.detectChanges();
+
+      const panelClassList =
+          overlayContainerElement.querySelector('.cdk-overlay-pane')!.classList;
+      expect(panelClassList).toContain('default1');
+      expect(panelClassList).toContain('default2');
+    }));
+  });
+
   describe('misc', () => {
 
     it('should allow basic use without any forms directives', () => {

src/material/autocomplete/autocomplete.ts

@@ -75,6 +75,9 @@ const _MatAutocompleteMixinBase: CanDisableRippleCtor & typeof MatAutocompleteBa
 export interface MatAutocompleteDefaultOptions {
   /** Whether the first option should be highlighted when an autocomplete panel is opened. */
   autoActiveFirstOption?: boolean;
+
+  /** Class or list of classes to be applied to the autocomplete's overlay panel. */
+  overlayPanelClass?: string | string[];
 }
 
 /** Injection token to be used to override the default options for `mat-autocomplete`. */