feat(select): add select component and functionality

update(select): remove scroll-y css in md-select-menu
add keyboard controls
add ARIA support (WIP)
add hover effect
fix mobile rendering
add aria controls for select

Closes #1562.

src/components/select/demoBasicUsage/index.html

@@ -0,0 +1,14 @@
+<div ng-app="selectDemoBasic" ng-controller="AppCtrl" layout="column" layout-align="center center" style="min-height: 300px;">
+  <p>A select can be used to select a single element from a list:</p>
+  <md-select ng-model="neighborhood" placeholder="Neighborhood">
+    <md-option ng-value="opt" ng-repeat="opt in neighborhoods">{{ opt }}</md-option>
+  </md-select>
+  <p class="result">{{ neighborhood ? 'You selected ' + neighborhood : 'You haven\'t selected a neighborhood yet' }}</p>
+
+  <p>A select can also specify its own label and be used to pick multiple entries:</p>
+  <md-select multiple ng-model="multiNeighborhood" placeholder="Neighborhood">
+    <md-select-label>{{ multiNeighborhood.length ? multiNeighborhood.join(', ') : 'Choose some' }}</md-select-label>
+    <md-option ng-value="opt" ng-repeat="opt in neighborhoods2">{{ opt }}</md-option>
+  </md-select>
+  <p class="result">{{ multiNeighborhood ? 'You selected ' + multiNeighborhood : 'You haven\'t selected anything yet' }}</p>
+</div>

src/components/select/demoBasicUsage/script.js

@@ -0,0 +1,5 @@
+angular.module('selectDemoBasic', ['ngMaterial'])
+.controller('AppCtrl', function($scope) {
+  $scope.neighborhoods = ['Chelsea', 'Financial District', 'Midtown', 'West Village', 'Williamsburg'];
+  $scope.neighborhoods2 = ['Chelsea', 'Financial District', 'Lower Manhattan', 'Midtown', 'Soho', 'Upper Manhattan', 'West Village', 'Williamsburg' ];
+});

src/components/select/demoBasicUsage/style.css

@@ -0,0 +1,14 @@
+p {
+  padding: 0 20px;
+  text-align: center;
+}
+
+p.result {
+  font-size: 0.8em;
+  color: #777;
+}
+
+
+.demo-content  {
+    min-height: 348px;
+}

src/components/select/demoOptionGroups/index.html

@@ -0,0 +1,14 @@
+<div ng-controller="SelectOptGroupController" layout="column" layout-align="center center">
+  <p>Option groups can help provide contextual groupings about the options provided:</p>
+  <div layout="column" layout-align="center center" style="height: 100px;">
+    <md-select ng-model="favoriteTopping" placeholder="Favorite Topping">
+      <md-optgroup label="Meats">
+        <md-option ng-value="topping.name" ng-repeat="topping in toppings | filter: {category: 'meat' }">{{topping.name}}</md-option>
+      </md-option-group>
+      <md-optgroup label="Veggies">
+        <md-option ng-value="topping.name" ng-repeat="topping in toppings | filter: {category: 'veg' }">{{topping.name}}</md-option>
+      </md-option-group>
+    </md-select>
+    <p class="result">{{ favoriteTopping ? 'Your favorite topping is ' + favoriteTopping : 'Please select a topping'}}</p>
+  </div>
+</div>

src/components/select/demoOptionGroups/script.js

@@ -0,0 +1,13 @@
+angular.module('selectDemoOptGroups', ['ngMaterial'])
+.controller('SelectOptGroupController', function($scope) {
+  $scope.toppings = [
+    { category: 'meat', name: 'Pepperoni' },
+    { category: 'meat', name: 'Sausage' },
+    { category: 'meat', name: 'Ground Beef' },
+    { category: 'meat', name: 'Bacon' },
+    { category: 'veg', name: 'Mushrooms' },
+    { category: 'veg', name: 'Onion' },
+    { category: 'veg', name: 'Green Pepper' },
+    { category: 'veg', name: 'Green Olives' },
+  ];
+});

src/components/select/demoOptionGroups/style.css

@@ -0,0 +1,14 @@
+p {
+  padding: 0 20px;
+  text-align: center;
+}
+
+p.result {
+  font-size: 0.8em;
+  color: #777;
+}
+
+
+.demo-content  {
+    min-height: 348px;
+}

src/components/select/demoOptionsWithAsyncSearch/index.html

@@ -0,0 +1,10 @@
+<div ng-controller="SelectAsyncController" layout="column" layout-align="center center" style="padding:40px">
+  <p>Select can call an arbitrary function on show. If this function returns a promise, it will display a loading indicator while it is being resolved:</p>
+  <div layout="column" layout-align="center center" style="height: 100px;">
+    <md-select ng-model="user" md-on-open="loadUsers()", style="min-width: 200px;">
+      <md-select-label>{{ user ? user.name : 'Assign to user' }}</md-select-label>
+      <md-option ng-value="user" ng-repeat="user in users">{{user.name}}</md-option>
+    </md-select>
+    <p class="result">You have assigned the task to: {{ user ? user.name : 'No one yet' }}</p>
+  </div>
+</div>

src/components/select/demoOptionsWithAsyncSearch/script.js

@@ -0,0 +1,17 @@
+angular.module('selectDemoOptionsAsync', ['ngMaterial'])
+.controller('SelectAsyncController', function($timeout, $scope) {
+
+  $scope.loadUsers = function() {
+    // Use timeout to simulate a 650ms request.
+    $scope.users = [];
+    return $timeout(function() {
+      $scope.users = [
+        { id: 1, name: 'Scooby Doo' },
+        { id: 2, name: 'Shaggy Rodgers' },
+        { id: 3, name: 'Fred Jones' },
+        { id: 4, name: 'Daphne Blake' },
+        { id: 5, name: 'Velma Dinkley' },
+      ];
+    }, 650);
+  };
+});

src/components/select/demoOptionsWithAsyncSearch/style.css

@@ -0,0 +1,14 @@
+p {
+  padding: 0 20px;
+  text-align: center;
+}
+
+p.result {
+  font-size: 0.8em;
+  color: #777;
+}
+
+
+.demo-content  {
+    min-height: 348px;
+}

src/components/select/select-theme.scss

@@ -0,0 +1,49 @@
+md-select.md-THEME_NAME-theme {
+  &:focus {
+    .md-select-label {
+      border-bottom-color: '{{primary-color}}';
+      color: '{{ foreground-1 }}';
+      &.md-placeholder {
+        color: '{{ foreground-1 }}';
+      }
+    }
+    &.md-accent .md-select-label {
+      border-bottom-color: '{{accent-color}}';
+    }
+    &.md-warn .md-select-label {
+      border-bottom-color: '{{warn-color}}';
+    }
+  }
+  .md-select-label {
+    &.md-placeholder {
+      color: '{{foreground-3}}';
+    }
+    border-bottom-color: '{{foreground-4}}';
+  }
+}
+
+md-select-menu.md-THEME_NAME-theme {
+
+  md-optgroup {
+    color: '{{foreground-2}}';
+    md-option {
+      color: '{{foreground-1}}';
+    }
+  }
+  md-option[selected] {
+    background-color: '{{primary-50}}';
+    &:focus {
+      background-color: '{{primary-100}}';
+    }
+    &.md-accent {
+      background-color: '{{accent-50}}';
+      &:focus {
+        background-color: '{{accent-100}}';
+      }
+    }
+  }
+  md-option:focus:not([selected]) {
+    background: '{{background-200}}';
+  }
+
+}