From 12994d63a0b990393c723d52619af6001f7ef2c7 Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Tue, 19 Sep 2017 19:52:45 +0200
Subject: [PATCH] feat(autocomplete): add md-autocomplete classes to overlay
 panel

Transfers any classes added to `md-autocomplete` to the resulting panel, allowing for easier styling similarly to `md-menu`.

Fixes #4196.
---
 src/lib/autocomplete/autocomplete.html    |  2 +-
 src/lib/autocomplete/autocomplete.spec.ts | 21 +++++++++++++++++-
 src/lib/autocomplete/autocomplete.ts      | 26 ++++++++++++++---------
 3 files changed, 37 insertions(+), 12 deletions(-)

diff --git a/src/lib/autocomplete/autocomplete.html b/src/lib/autocomplete/autocomplete.html
index 41227961fe5c..aa27ebc27c47 100644
--- a/src/lib/autocomplete/autocomplete.html
+++ b/src/lib/autocomplete/autocomplete.html
@@ -1,5 +1,5 @@
 <ng-template>
-  <div class="mat-autocomplete-panel" role="listbox" [id]="id" [ngClass]="_getClassList()" #panel>
+  <div class="mat-autocomplete-panel" role="listbox" [id]="id" [ngClass]="_classList" #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 308382a9c0f9..b03ab285826c 100644
--- a/src/lib/autocomplete/autocomplete.spec.ts
+++ b/src/lib/autocomplete/autocomplete.spec.ts
@@ -1482,6 +1482,25 @@ describe('MdAutocomplete', () => {
         expect(placeholder.classList).not.toContain('mat-form-field-empty');
       }));
 
+    it('should transfer the md-autocomplete classes to the panel element', fakeAsync(() => {
+      const fixture = TestBed.createComponent(SimpleAutocomplete);
+      fixture.detectChanges();
+
+      fixture.componentInstance.trigger.openPanel();
+      tick();
+      fixture.detectChanges();
+
+      const autocomplete = fixture.debugElement.nativeElement.querySelector('md-autocomplete');
+      const panel = overlayContainerElement.querySelector('.mat-autocomplete-panel')!;
+
+      expect(autocomplete.classList).not.toContain('class-one');
+      expect(autocomplete.classList).not.toContain('class-two');
+
+      expect(panel.classList).toContain('class-one');
+      expect(panel.classList).toContain('class-two');
+    }));
+
+
   });
 
   it('should have correct width when opened', () => {
@@ -1607,7 +1626,7 @@ describe('MdAutocomplete', () => {
       <input mdInput placeholder="State" [mdAutocomplete]="auto" [formControl]="stateCtrl">
     </md-form-field>
 
-    <md-autocomplete #auto="mdAutocomplete" [displayWith]="displayFn">
+    <md-autocomplete class="class-one class-two" #auto="mdAutocomplete" [displayWith]="displayFn">
       <md-option *ngFor="let state of filteredStates" [value]="state">
         <span> {{ state.code }}: {{ state.name }}  </span>
       </md-option>
diff --git a/src/lib/autocomplete/autocomplete.ts b/src/lib/autocomplete/autocomplete.ts
index e9041dee1533..3a6b938f4bdd 100644
--- a/src/lib/autocomplete/autocomplete.ts
+++ b/src/lib/autocomplete/autocomplete.ts
@@ -76,10 +76,23 @@ export class MdAutocomplete implements AfterContentInit {
   @Output() optionSelected: EventEmitter<MdAutocompleteSelectedEvent> =
       new EventEmitter<MdAutocompleteSelectedEvent>();
 
+  /**
+   * Takes classes set on the host md-autocomplete element and applies them to the panel
+   * inside the overlay container to allow for easy styling.
+   */
+  @Input('class')
+  set classList(classList: string) {
+    if (classList && classList.length) {
+      classList.split(' ').forEach(className => this._classList[className.trim()] = true);
+      this._elementRef.nativeElement.className = '';
+    }
+  }
+  _classList: {[key: string]: boolean} = {};
+
   /** Unique ID to be used by autocomplete trigger's "aria-owns" property. */
   id: string = `md-autocomplete-${_uniqueAutocompleteIdCounter++}`;
 
-  constructor(private _changeDetectorRef: ChangeDetectorRef) { }
+  constructor(private _changeDetectorRef: ChangeDetectorRef, private _elementRef: ElementRef) { }
 
   ngAfterContentInit() {
     this._keyManager = new ActiveDescendantKeyManager<MdOption>(this.options).withWrap();
@@ -104,6 +117,8 @@ export class MdAutocomplete implements AfterContentInit {
   _setVisibility(): void {
     Promise.resolve().then(() => {
       this.showPanel = !!this.options.length;
+      this._classList['mat-autocomplete-visible'] = this.showPanel;
+      this._classList['mat-autocomplete-hidden'] = !this.showPanel;
       this._changeDetectorRef.markForCheck();
     });
   }
@@ -113,14 +128,5 @@ export class MdAutocomplete implements AfterContentInit {
     const event = new MdAutocompleteSelectedEvent(this, option);
     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
-    };
-  }
-
 }