feat(material/autocomplete): add panelClass default option

Author: andrewseguin

src/material/autocomplete/autocomplete.spec.ts

@@ -2119,6 +2119,40 @@ 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: {panelClass: 'default1 default2'}}
+      ]);
+
+      fixture.detectChanges();
+      fixture.componentInstance.trigger.openPanel();
+      fixture.detectChanges();
+
+      const panelClassList =
+          overlayContainerElement.querySelector('.mat-autocomplete-panel')!.classList;
+      expect(panelClassList).toContain('default1');
+      expect(panelClassList).toContain('default2');
+    }));
+
+    it('should apply them if provided as array', fakeAsync(() => {
+      const fixture = createComponent(SimpleAutocomplete, [
+        {provide: MAT_AUTOCOMPLETE_DEFAULT_OPTIONS,
+          useValue: {panelClass: ['default1', 'default2']}}
+      ]);
+
+      fixture.detectChanges();
+      fixture.componentInstance.trigger.openPanel();
+      fixture.detectChanges();
+
+      const panelClassList =
+          overlayContainerElement.querySelector('.mat-autocomplete-panel')!.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

@@ -8,6 +8,7 @@
 
 import {ActiveDescendantKeyManager} from '@angular/cdk/a11y';
 import {BooleanInput, coerceBooleanProperty} from '@angular/cdk/coercion';
+import {coerceArray} from '@angular/cdk/coercion/array';
 import {
   AfterContentInit,
   ChangeDetectionStrategy,
@@ -75,6 +76,9 @@ const _MatAutocompleteMixinBase: CanDisableRippleCtor & typeof MatAutocompleteBa
 export interface MatAutocompleteDefaultOptions {
   /** Whether the first option should be highlighted when an autocomplete panel is opened. */
   autoActiveFirstOption?: boolean;
+
+  /** Extra CSS classes to be added to the autocomplete panel. */
+  panelClass?: string | string[];
 }
 
 /** Injection token to be used to override the default options for `mat-autocomplete`. */
@@ -167,16 +171,13 @@ export abstract class _MatAutocompleteBase extends _MatAutocompleteMixinBase imp
    */
   @Input('class')
   set classList(value: string) {
+    this._resetClassList();
+    this._setVisibilityClasses(this._classList);
+
     if (value && value.length) {
-      this._classList = value.split(' ').reduce((classList, className) => {
-        classList[className.trim()] = true;
-        return classList;
-      }, {} as {[key: string]: boolean});
-    } else {
-      this._classList = {};
+      this._classList[value] = true;
     }
 
-    this._setVisibilityClasses(this._classList);
     this._elementRef.nativeElement.className = '';
   }
   _classList: {[key: string]: boolean} = {};
@@ -187,10 +188,11 @@ export abstract class _MatAutocompleteBase extends _MatAutocompleteMixinBase imp
   constructor(
     private _changeDetectorRef: ChangeDetectorRef,
     private _elementRef: ElementRef<HTMLElement>,
-    @Inject(MAT_AUTOCOMPLETE_DEFAULT_OPTIONS) defaults: MatAutocompleteDefaultOptions) {
+    @Inject(MAT_AUTOCOMPLETE_DEFAULT_OPTIONS) private _defaults: MatAutocompleteDefaultOptions) {
     super();
 
-    this._autoActiveFirstOption = !!defaults.autoActiveFirstOption;
+    this._autoActiveFirstOption = !!_defaults.autoActiveFirstOption;
+    this._resetClassList();
   }
 
   ngAfterContentInit() {
@@ -207,6 +209,15 @@ export abstract class _MatAutocompleteBase extends _MatAutocompleteMixinBase imp
     this._activeOptionChanges.unsubscribe();
   }
 
+  /** Sets the default value for the classes applied to the panel. */
+  _resetClassList() {
+    this._classList = {};
+
+    if (this._defaults.panelClass) {
+      this._classList[coerceArray(this._defaults.panelClass).join(' ')] = true;
+    }
+  }
+
   /**
    * Sets the panel scrollTop. This allows us to manually scroll to display options
    * above or below the fold, as they are not actually being focused when active.