From 8de3fb118a4806b4535a406b950b67aefd5990fd Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Wed, 17 May 2017 22:02:31 +0200
Subject: [PATCH] feat(select): add input for adding classes to the panel

Adds the `panelClass` input, which allows consumers to set extra classes on a select's panel.

Fixes #4485.
---
 src/lib/select/select.html    |  6 +++---
 src/lib/select/select.spec.ts | 14 +++++++++++++-
 src/lib/select/select.ts      |  3 +++
 3 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/src/lib/select/select.html b/src/lib/select/select.html
index 510da0dc78a4..e3d9650d6bf4 100644
--- a/src/lib/select/select.html
+++ b/src/lib/select/select.html
@@ -16,9 +16,9 @@
 <ng-template cdk-connected-overlay [origin]="origin" [open]="panelOpen" hasBackdrop (backdropClick)="close()"
   backdropClass="cdk-overlay-transparent-backdrop" [positions]="_positions" [minWidth]="_triggerWidth"
   [offsetY]="_offsetY" (attach)="_onAttached()" (detach)="close()">
-  <div class="mat-select-panel" [@transformPanel]="'showing'" (@transformPanel.done)="_onPanelDone()"
-    (keydown)="_keyManager.onKeydown($event)" [style.transformOrigin]="_transformOrigin"
-      [class.mat-select-panel-done-animating]="_panelDoneAnimating" [ngClass]="'mat-' + color">
+  <div class="mat-select-panel {{ 'mat-' + color }}" [ngClass]="panelClass" [@transformPanel]="'showing'"
+    (@transformPanel.done)="_onPanelDone()" (keydown)="_keyManager.onKeydown($event)"
+      [style.transformOrigin]="_transformOrigin" [class.mat-select-panel-done-animating]="_panelDoneAnimating">
     <div class="mat-select-content" [@fadeInContent]="'showing'" (@fadeInContent.done)="_onFadeInDone()">
       <ng-content></ng-content>
     </div>
diff --git a/src/lib/select/select.spec.ts b/src/lib/select/select.spec.ts
index 43a4af6673cf..f46c8456728a 100644
--- a/src/lib/select/select.spec.ts
+++ b/src/lib/select/select.spec.ts
@@ -232,6 +232,16 @@ describe('MdSelect', () => {
       });
     }));
 
+    it('should be able to set extra classes on the panel', () => {
+      trigger.click();
+      fixture.detectChanges();
+
+      const panel = overlayContainerElement.querySelector('.mat-select-panel') as HTMLElement;
+
+      expect(panel.classList).toContain('custom-one');
+      expect(panel.classList).toContain('custom-two');
+    });
+
   });
 
   describe('selection logic', () => {
@@ -2003,7 +2013,8 @@ describe('MdSelect', () => {
   template: `
     <div [style.height.px]="heightAbove"></div>
     <md-select placeholder="Food" [formControl]="control" [required]="isRequired"
-      [tabIndex]="tabIndexOverride" [aria-label]="ariaLabel" [aria-labelledby]="ariaLabelledby">
+      [tabIndex]="tabIndexOverride" [aria-label]="ariaLabel" [aria-labelledby]="ariaLabelledby"
+      [panelClass]="panelClass">
       <md-option *ngFor="let food of foods" [value]="food.value" [disabled]="food.disabled">
         {{ food.viewValue }}
       </md-option>
@@ -2029,6 +2040,7 @@ class BasicSelect {
   tabIndexOverride: number;
   ariaLabel: string;
   ariaLabelledby: string;
+  panelClass = ['custom-one', 'custom-two'];
 
   @ViewChild(MdSelect) select: MdSelect;
   @ViewChildren(MdOption) options: QueryList<MdOption>;
diff --git a/src/lib/select/select.ts b/src/lib/select/select.ts
index 5099709a42f6..afd634339426 100644
--- a/src/lib/select/select.ts
+++ b/src/lib/select/select.ts
@@ -229,6 +229,9 @@ export class MdSelect implements AfterContentInit, OnDestroy, OnInit, ControlVal
   /** All of the defined select options. */
   @ContentChildren(MdOption) options: QueryList<MdOption>;
 
+  /** Classes to be passed to the select panel. Supports the same syntax as `ngClass`. */
+  @Input() panelClass: string|string[]|Set<string>|{[key: string]: any};
+
   /** Placeholder to be shown if no value has been selected. */
   @Input()
   get placeholder() { return this._placeholder; }