feat(select): basic selection and animations (#1647)

Author: kara

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

@@ -1 +1,5 @@
-<md-select></md-select>
+<div class="demo-select">
+  <md-select placeholder="Food">
+    <md-option *ngFor="let food of foods"> {{ food.viewValue }} </md-option>
+  </md-select>
+</div>

src/demo-app/select/select-demo.scss

@@ -0,0 +1,2 @@
+.demo-select {
+}

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

@@ -8,5 +8,9 @@ import {Component} from '@angular/core';
     styleUrls: ['select-demo.css'],
 })
 export class SelectDemo {
-
+  foods = [
+    {value: 'steak', viewValue: 'Steak'},
+    {value: 'pizza', viewValue: 'Pizza'},
+    {value: 'tacos', viewValue: 'Tacos'}
+  ];
 }

src/lib/core/a11y/list-key-manager.ts

@@ -30,6 +30,10 @@ export class ListKeyManager {
     return this._tabOut.asObservable();
   }
 
+  get focusedItemIndex(): number {
+    return this._focusedItemIndex;
+  }
+
   set focusedItemIndex(value: number) {
     this._focusedItemIndex = value;
   }

src/lib/core/compatibility/style-compatibility.ts

@@ -26,6 +26,7 @@ export const ELEMENTS_SELECTOR = `
   md-list-item,
   md-menu,
   md-nav-list,
+  md-option,
   md-placeholder,
   md-progress-bar,
   md-progress-circle,

src/lib/select/README.md

@@ -0,0 +1,3 @@
+## Work in progress!
+
+The select is still a work in progress, so most features have not been implemented. Not ready for use!

src/lib/select/_select-theme.scss

@@ -2,5 +2,50 @@
 @import '../core/theming/theming';
 
 @mixin md-select-theme($theme) {
+  $foreground: map-get($theme, foreground);
+  $background: map-get($theme, background);
+  $primary: map-get($theme, primary);
 
+  .md-select-trigger {
+    color: md-color($foreground, hint-text);
+    border-bottom: 1px solid md-color($foreground, divider);
+
+    md-select:focus & {
+      border-bottom: 1px solid md-color($primary);
+    }
+  }
+
+  .md-select-placeholder {
+    md-select:focus & {
+      color: md-color($primary);
+    }
+  }
+
+  .md-select-arrow {
+    color: md-color($foreground, hint-text);
+
+    md-select:focus & {
+      color: md-color($primary);
+    }
+  }
+
+  .md-select-content {
+    background: md-color($background, card);
+  }
+
+  .md-select-value {
+    color: md-color($foreground, text);
+  }
+
+  md-option {
+    &:hover, &:focus {
+     background: md-color($background, hover);
+    }
+
+    &.md-selected {
+      background: md-color($background, hover);
+      color: md-color($primary);
+    }
+
+  }
 }

src/lib/select/index.ts

@@ -1,18 +1,22 @@
 import {NgModule, ModuleWithProviders} from '@angular/core';
+import {CommonModule} from '@angular/common';
 import {MdSelect} from './select';
 import {MdOption} from './option';
+import {OverlayModule} from '../core/overlay/overlay-directives';
+import {MdRippleModule} from '../core/ripple/ripple';
+import {OVERLAY_PROVIDERS} from '../core/overlay/overlay';
 export * from './select';
 
 @NgModule({
-    imports: [],
+    imports: [CommonModule, OverlayModule, MdRippleModule],
     exports: [MdSelect, MdOption],
     declarations: [MdSelect, MdOption],
 })
 export class MdSelectModule {
     static forRoot(): ModuleWithProviders {
         return {
             ngModule: MdSelectModule,
-            providers: []
+            providers: [OVERLAY_PROVIDERS]
         };
     }
 }

src/lib/select/option.html

@@ -0,0 +1,3 @@
+<ng-content></ng-content>
+<div class="md-option-ripple" md-ripple md-ripple-background-color="rgba(0,0,0,0)"
+     [md-ripple-trigger]="_getHostElement()"></div>

src/lib/select/option.ts

@@ -1,10 +1,75 @@
-import {Component, ViewEncapsulation} from '@angular/core';
+import {
+  Component,
+  ElementRef,
+  EventEmitter,
+  Output,
+  Renderer,
+  ViewEncapsulation
+} from '@angular/core';
+import {ENTER, SPACE} from '../core/keyboard/keycodes';
 
 @Component({
   moduleId: module.id,
   selector: 'md-option',
-  template: ``,
+  host: {
+    'role': 'option',
+    'tabindex': '0',
+    '[class.md-selected]': 'selected',
+    '[attr.aria-selected]': 'selected.toString()',
+    '(click)': 'select()',
+    '(keydown)': '_handleKeydown($event)'
+  },
+  templateUrl: 'option.html',
   styleUrls: ['select.css'],
   encapsulation: ViewEncapsulation.None
 })
-export class MdOption {}
+export class MdOption {
+  private _selected = false;
+
+  /** Event emitted when the option is selected. */
+  @Output() onSelect = new EventEmitter();
+
+  constructor(private _element: ElementRef, private _renderer: Renderer) {}
+
+  /** Whether or not the option is currently selected. */
+  get selected(): boolean {
+    return this._selected;
+  }
+
+  /**
+   * The displayed value of the option. It is necessary to show the selected option in the
+   * select's trigger.
+   * TODO(kara): Add input property alternative for node envs.
+   */
+  get viewValue(): string {
+    return this._getHostElement().textContent.trim();
+  }
+
+  /** Selects the option. */
+  select(): void {
+    this._selected = true;
+    this.onSelect.emit();
+  }
+
+  /** Deselects the option. */
+  deselect(): void {
+    this._selected = false;
+  }
+
+  /** Sets focus onto this option. */
+  focus(): void {
+    this._renderer.invokeElementMethod(this._getHostElement(), 'focus');
+  }
+
+  /** Ensures the option is selected when activated from the keyboard. */
+  _handleKeydown(event: KeyboardEvent): void {
+    if (event.keyCode === ENTER || event.keyCode === SPACE) {
+      this.select();
+    }
+  }
+
+  _getHostElement(): HTMLElement {
+    return this._element.nativeElement;
+  }
+
+}