feat(select): add md-select-header directive

Adds a `md-select-header` component, which is a fixed header above the select's options. It allows for the user to project an input to be used for filtering long lists of options.

**Note:** This component only handles the positioning, styling and exposes the panel id for a11y. The functionality is up to the user to handle.

Fixes #2812.

Author: crisbeto

src/demo-app/select/select-demo.html

@@ -113,5 +113,20 @@
     </md-card>
   </div>
 
+  <md-card *ngIf="showSelect">
+    <md-select placeholder="Drink" [(ngModel)]="currentDrink" #selectWitHeader="mdSelect">
+      <md-select-header>
+        <input type="search" [(ngModel)]="searchTerm" role="combobox" [attr.aria-owns]="selectWitHeader.panelId"
+          (ngModelChange)="filterDrinks()" placeholder="Search for a drink"/>
+      </md-select-header>
+
+      <md-option *ngFor="let drink of filteredDrinks" [value]="drink.value" [disabled]="drink.disabled">
+        {{ drink.viewValue }}
+      </md-option>
+
+    </md-select>
+  </md-card>
+
+
 </div>
 <div style="height: 500px">This div is for testing scrolled selects.</div>

src/demo-app/select/select-demo.ts

@@ -17,6 +17,7 @@ export class SelectDemo {
   currentDrink: string;
   currentPokemon: string[];
   currentPokemonFromGroup: string;
+  searchTerm: string;
   latestChangeEvent: MdSelectChange;
   floatPlaceholder: string = 'auto';
   foodControl = new FormControl('pizza-1');
@@ -43,6 +44,8 @@ export class SelectDemo {
     {value: 'milk-8', viewValue: 'Milk'},
   ];
 
+  filteredDrinks = this.drinks.slice();
+
   pokemon = [
     {value: 'bulbasaur-0', viewValue: 'Bulbasaur'},
     {value: 'charizard-1', viewValue: 'Charizard'},
@@ -101,4 +104,10 @@ export class SelectDemo {
   setPokemonValue() {
     this.currentPokemon = ['eevee-4', 'psyduck-6'];
   }
+
+  filterDrinks() {
+    this.filteredDrinks = this.searchTerm ? this.drinks.filter(item => {
+      return item.viewValue.toLowerCase().indexOf(this.searchTerm.toLowerCase()) > -1;
+    }) : this.drinks.slice();
+  }
 }

src/examples/select-header/select-header-example.css

@@ -0,0 +1 @@
+/** No CSS for this example */

src/examples/select-header/select-header-example.html

@@ -0,0 +1,12 @@
+<md-select placeholder="Favorite food" [(ngModel)]="currentDrink" name="food" #select="mdSelect">
+  <md-select-header>
+    <input type="search" [(ngModel)]="searchString" role="combobox" [attr.aria-owns]="select.panelId"
+      (ngModelChange)="filterFoods()" placeholder="Search for food"/>
+  </md-select-header>
+
+  <md-option *ngFor="let food of foods" [value]="food.value">
+    {{food.viewValue}}
+  </md-option>
+</md-select>
+
+<p> Selected value: {{selectedValue}} </p>

src/examples/select-header/select-header-example.ts

@@ -0,0 +1,30 @@
+import {Component} from '@angular/core';
+
+
+@Component({
+  selector: 'select-form-example',
+  templateUrl: './select-form-example.html',
+})
+export class SelectHeaderExample {
+  selectedValue: string;
+  searchString: string;
+
+  initialFoods = [
+    { value: 'steak-0', viewValue: 'Steak' },
+    { value: 'pizza-1', viewValue: 'Pizza' },
+    { value: 'tacos-2', viewValue: 'Tacos' },
+    { value: 'sandwich-3', viewValue: 'Sandwich' },
+    { value: 'chips-4', viewValue: 'Chips' },
+    { value: 'eggs-5', viewValue: 'Eggs' },
+    { value: 'pasta-6', viewValue: 'Pasta' },
+    { value: 'sushi-7', viewValue: 'Sushi' },
+  ];
+
+  foods = this.initialFoods.slice();
+
+  filterFoods() {
+    this.foods = this.searchString ? this.initialFoods.filter(item => {
+      return item.viewValue.toLowerCase().indexOf(this.searchString.toLowerCase()) > -1;
+    }) : this.initialFoods.slice();
+  }
+}

src/lib/core/style/_menu-common.scss

@@ -15,11 +15,10 @@ $mat-menu-icon-margin: 16px !default;
 
 @mixin mat-menu-base() {
   @include mat-elevation(8);
+  @include mat-menu-scrollable();
+
   min-width: $mat-menu-overlay-min-width;
   max-width: $mat-menu-overlay-max-width;
-
-  overflow: auto;
-  -webkit-overflow-scrolling: touch;   // for momentum scroll on mobile
 }
 
 @mixin mat-menu-item-base() {
@@ -91,3 +90,8 @@ $mat-menu-icon-margin: 16px !default;
     }
   }
 }
+
+@mixin mat-menu-scrollable() {
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;   // for momentum scroll on mobile
+}

src/lib/select/_select-theme.scss

@@ -26,6 +26,10 @@
     color: mat-color($foreground, hint-text);
   }
 
+  .mat-select-header {
+    color: mat-color($foreground, divider);
+  }
+
   .mat-select-underline {
     background-color: mat-color($foreground, divider);
   }

src/lib/select/index.ts

@@ -1,6 +1,7 @@
 import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {MdSelect} from './select';
+import {MdSelectHeader} from './select-header';
 import {MdCommonModule, OverlayModule, MdOptionModule} from '../core';
 
 
@@ -11,11 +12,12 @@ import {MdCommonModule, OverlayModule, MdOptionModule} from '../core';
     MdOptionModule,
     MdCommonModule,
   ],
-  exports: [MdSelect, MdOptionModule, MdCommonModule],
-  declarations: [MdSelect],
+  exports: [MdSelect, MdSelectHeader, MdOptionModule, MdCommonModule],
+  declarations: [MdSelect, MdSelectHeader],
 })
 export class MdSelectModule {}
 
 
 export * from './select';
+export * from './select-header';
 export {fadeInContent, transformPanel, transformPlaceholder} from './select-animations';

src/lib/select/select-header.ts

@@ -0,0 +1,13 @@
+import {Directive} from '@angular/core';
+
+
+/**
+ * Fixed header that will be rendered above a select's options.
+ */
+@Directive({
+  selector: 'md-select-header, mat-select-header',
+  host: {
+    'class': 'mat-select-header',
+  }
+})
+export class MdSelectHeader { }

src/lib/select/select.html

@@ -35,7 +35,12 @@
     [style.transformOrigin]="_transformOrigin"
     [class.mat-select-panel-done-animating]="_panelDoneAnimating">
 
-    <div class="mat-select-content" [@fadeInContent]="'showing'" (@fadeInContent.done)="_onFadeInDone()">
+    <div [@fadeInContent]="'showing'">
+      <ng-content select="md-select-header, mat-select-header"></ng-content>
+    </div>
+
+    <div class="mat-select-content" [attr.id]="panelId" [@fadeInContent]="'showing'"
+      (@fadeInContent.done)="_onFadeInDone()">
       <ng-content></ng-content>
     </div>
   </div>

src/lib/select/select.scss

@@ -117,14 +117,33 @@ $mat-select-panel-max-height: 256px !default;
   margin: 0 $mat-select-arrow-margin;
 }
 
-.mat-select-panel {
-  @include mat-menu-base();
-  padding-top: 0;
-  padding-bottom: 0;
+.mat-select-content {
+  @include mat-menu-scrollable();
   max-height: $mat-select-panel-max-height;
   min-width: 100%; // prevents some animation twitching and test inconsistencies in IE11
 
   @include cdk-high-contrast {
     outline: solid 1px;
   }
 }
+
+.mat-select-panel {
+  @include mat-menu-base();
+  border: none;
+}
+
+.mat-select-header {
+  @include mat-menu-item-base();
+  border-bottom: solid 1px;
+  box-sizing: border-box;
+
+  input {
+    display: block;
+    width: 100%;
+    height: 100%;
+    border: none;
+    outline: none;
+    padding: 0;
+    background: transparent;
+  }
+}