From 83a7ccf9d82588f56490dffa4a6c10ff6fa344ec Mon Sep 17 00:00:00 2001
From: David Reher <david.reher@gmx.de>
Date: Thu, 24 Aug 2017 08:25:37 +0000
Subject: [PATCH] feat(autocomplete): add input for adding classes to the panel

implemented simalar to select's panel class feature. fixes #4196.
---
 src/lib/autocomplete/autocomplete.html    |  9 ++++++++-
 src/lib/autocomplete/autocomplete.spec.ts | 16 +++++++++++++++-
 src/lib/autocomplete/autocomplete.ts      | 11 +++--------
 3 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/src/lib/autocomplete/autocomplete.html b/src/lib/autocomplete/autocomplete.html
index 41227961fe5c..18815afeb700 100644
--- a/src/lib/autocomplete/autocomplete.html
+++ b/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>
diff --git a/src/lib/autocomplete/autocomplete.spec.ts b/src/lib/autocomplete/autocomplete.spec.ts
index 3678b583caa5..a0ae12038af3 100644
--- a/src/lib/autocomplete/autocomplete.spec.ts
+++ b/src/lib/autocomplete/autocomplete.spec.ts
@@ -275,6 +275,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)
@@ -1556,7 +1569,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>
@@ -1569,6 +1582,7 @@ class SimpleAutocomplete implements OnDestroy {
   valueSub: Subscription;
   placeholder = 'auto';
   width: number;
+  panelClass = ['custom-one', 'custom-two'];
 
   @ViewChild(MdAutocompleteTrigger) trigger: MdAutocompleteTrigger;
   @ViewChild(MdAutocomplete) panel: MdAutocomplete;
diff --git a/src/lib/autocomplete/autocomplete.ts b/src/lib/autocomplete/autocomplete.ts
index a7253fde8b13..61caaceda853 100644
--- a/src/lib/autocomplete/autocomplete.ts
+++ b/src/lib/autocomplete/autocomplete.ts
@@ -63,6 +63,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};
+
   /** Unique ID to be used by autocomplete trigger's "aria-owns" property. */
   id: string = `md-autocomplete-${_uniqueAutocompleteIdCounter++}`;
 
@@ -95,13 +98,5 @@ export class MdAutocomplete implements AfterContentInit {
     });
   }
 
-  /** Sets a class on the panel based on whether it is visible. */
-  _getClassList() {
-    return {
-      'mat-autocomplete-visible': this.showPanel,
-      'mat-autocomplete-hidden': !this.showPanel
-    };
-  }
-
 }