feat(autocomplete): add input for adding classes to the panel

src/lib/autocomplete/autocomplete.html

@@ -1,5 +1,12 @@
 <ng-template>
-  <div class="mat-autocomplete-panel" role="listbox" [id]="id" [ngClass]="_getClassList()" #panel>
+  <div 
+    class="mat-autocomplete-panel" 
+    role="listbox" 
+    [id]="id" 
+    [ngClass]="panelClass"
+    [class.mat-autocomplete-visible]="showPanel"
+    [class.mat-autocomplete-hidden]="!showPanel"
+    #panel>
     <ng-content></ng-content>
   </div>
 </ng-template>

src/lib/autocomplete/autocomplete.spec.ts

@@ -277,6 +277,19 @@ describe('MdAutocomplete', () => {
       });
     }));
 
+    it('should be able to set extra classes on the panel', () => {
+      fixture.componentInstance.trigger.openPanel();
+      fixture.whenStable().then(() => {
+        fixture.detectChanges();
+
+        const panel =
+          overlayContainerElement.querySelector('.mat-autocomplete-panel') as HTMLElement;
+
+        expect(panel.classList).toContain('custom-one');
+        expect(panel.classList).toContain('custom-two');
+      });
+    });
+
     it('should keep the label floating until the panel closes', async(() => {
       fixture.componentInstance.trigger.openPanel();
       expect(fixture.componentInstance.formField.floatPlaceholder)
@@ -1607,7 +1620,7 @@ describe('MdAutocomplete', () => {
       <input mdInput placeholder="State" [mdAutocomplete]="auto" [formControl]="stateCtrl">
     </md-form-field>
 
-    <md-autocomplete #auto="mdAutocomplete" [displayWith]="displayFn">
+    <md-autocomplete #auto="mdAutocomplete" [displayWith]="displayFn" [panelClass]="panelClass">
       <md-option *ngFor="let state of filteredStates" [value]="state">
         <span> {{ state.code }}: {{ state.name }}  </span>
       </md-option>
@@ -1620,6 +1633,7 @@ class SimpleAutocomplete implements OnDestroy {
   valueSub: Subscription;
   placeholder = 'auto';
   width: number;
+  panelClass = ['custom-one', 'custom-two'];
 
   @ViewChild(MdAutocompleteTrigger) trigger: MdAutocompleteTrigger;
   @ViewChild(MdAutocomplete) panel: MdAutocomplete;

src/lib/autocomplete/autocomplete.ts

@@ -72,6 +72,9 @@ export class MdAutocomplete implements AfterContentInit {
   /** Function that maps an option's control value to its display value in the trigger. */
   @Input() displayWith: ((value: any) => string) | null = null;
 
+  /** Classes to be passed to the select panel. Supports the same syntax as `ngClass`. */
+  @Input() panelClass: string|string[]|Set<string>|{[key: string]: any};
+
   /** Event that is emitted whenever an option from the list is selected. */
   @Output() optionSelected: EventEmitter<MdAutocompleteSelectedEvent> =
       new EventEmitter<MdAutocompleteSelectedEvent>();
@@ -114,13 +117,5 @@ export class MdAutocomplete implements AfterContentInit {
     this.optionSelected.emit(event);
   }
 
-  /** Sets a class on the panel based on whether it is visible. */
-  _getClassList() {
-    return {
-      'mat-autocomplete-visible': this.showPanel,
-      'mat-autocomplete-hidden': !this.showPanel
-    };
-  }
-
 }