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

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)]="selectedValue" 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

@@ -9,6 +9,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';
 
 
@@ -19,11 +20,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,21 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+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;
+ }
+}