feat(select): add floatingPlaceholder option

Adds the `floatingPlaceholder` option that can be used to disable the floating placeholders.

Fixes #2569.

Author: crisbeto

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

@@ -19,7 +19,7 @@
 
   <md-card>
     <md-select placeholder="Drink" [(ngModel)]="currentDrink" [required]="isRequired" [disabled]="isDisabled"
-      #drinkControl="ngModel">
+      [floatingPlaceholder]="floatingPlaceholder" #drinkControl="ngModel">
       <md-option *ngFor="let drink of drinks" [value]="drink.value" [disabled]="drink.disabled">
         {{ drink.viewValue }}
       </md-option>
@@ -31,6 +31,7 @@
     <button md-button (click)="currentDrink='sprite-1'">SET VALUE</button>
     <button md-button (click)="isRequired=!isRequired">TOGGLE REQUIRED</button>
     <button md-button (click)="isDisabled=!isDisabled">TOGGLE DISABLED</button>
+    <button md-button (click)="floatingPlaceholder=!floatingPlaceholder">TOGGLE FLOATING PLACEHOLDER</button>
     <button md-button (click)="drinkControl.reset()">RESET</button>
   </md-card>
 

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

@@ -12,6 +12,7 @@ export class SelectDemo {
   isDisabled = false;
   showSelect = false;
   currentDrink: string;
+  floatingPlaceholder = true;
   foodControl = new FormControl('pizza-1');
 
   foods = [

src/lib/select/select.html

@@ -1,6 +1,11 @@
 <div class="md-select-trigger" cdk-overlay-origin (click)="toggle()" #origin="cdkOverlayOrigin" #trigger>
-  <span class="md-select-placeholder" [class.md-floating-placeholder]="this.selected"
-   [@transformPlaceholder]="_placeholderState" [style.width.px]="_selectedValueWidth"> {{ placeholder }} </span>
+  <span
+    class="md-select-placeholder"
+    [class.md-floating-placeholder]="selected"
+    [@transformPlaceholder]="floatingPlaceholder ? _placeholderState : ''"
+    [style.visibility]="(floatingPlaceholder || !selected) ? 'visible' : 'hidden'"
+    [style.width.px]="_selectedValueWidth"> {{ placeholder }} </span>
+
   <span class="md-select-value" *ngIf="selected"> {{ selected?.viewValue }} </span>
   <span class="md-select-arrow"></span>
 </div>

src/lib/select/select.spec.ts

@@ -16,7 +16,13 @@ describe('MdSelect', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       imports: [MdSelectModule.forRoot(), ReactiveFormsModule, FormsModule],
-      declarations: [BasicSelect, NgModelSelect, ManySelects, NgIfSelect],
+      declarations: [
+        BasicSelect,
+        NgModelSelect,
+        ManySelects,
+        NgIfSelect,
+        FloatingPlaceholderSelect
+      ],
       providers: [
         {provide: OverlayContainer, useFactory: () => {
           overlayContainerElement = document.createElement('div') as HTMLElement;
@@ -1139,6 +1145,20 @@ describe('MdSelect', () => {
       });
     }));
 
+    it('should be able to disable the floating placeholder', () => {
+      let fixture = TestBed.createComponent(FloatingPlaceholderSelect);
+      let placeholder = fixture.debugElement.query(By.css('.md-select-placeholder')).nativeElement;
+
+      fixture.detectChanges();
+
+      expect(placeholder.style.visibility).toBe('visible');
+
+      fixture.componentInstance.control.setValue('pizza-1');
+      fixture.detectChanges();
+
+      expect(placeholder.style.visibility).toBe('hidden');
+    });
+
   });
 
 });
@@ -1235,6 +1255,29 @@ class NgIfSelect {
   @ViewChild(MdSelect) select: MdSelect;
 }
 
+@Component({
+  selector: 'floating-placeholder-select',
+  template: `
+    <md-select placeholder="Food I want to eat right now" [formControl]="control"
+      [floatingPlaceholder]="floatingPlaceholder">
+      <md-option *ngFor="let food of foods" [value]="food.value">
+        {{ food.viewValue }}
+      </md-option>
+    </md-select>
+  `,
+
+})
+class FloatingPlaceholderSelect {
+  floatingPlaceholder: boolean = false;
+  foods: any[] = [
+    { value: 'steak-0', viewValue: 'Steak' },
+    { value: 'pizza-1', viewValue: 'Pizza' },
+    { value: 'tacos-2', viewValue: 'Tacos'}
+  ];
+  control = new FormControl();
+
+  @ViewChild(MdSelect) select: MdSelect;
+}
 
 
 /**

src/lib/select/select.ts

@@ -213,6 +213,12 @@ export class MdSelect implements AfterContentInit, ControlValueAccessor, OnDestr
   get required() { return this._required; }
   set required(value: any) { this._required = coerceBooleanProperty(value); }
 
+  /** Whether to float the placeholder text. */
+  @Input()
+  get floatingPlaceholder(): boolean { return this._floatingPlaceholder; }
+  set floatingPlaceholder(value) { this._floatingPlaceholder = coerceBooleanProperty(value); }
+  private _floatingPlaceholder: boolean = true;
+
   /** Event emitted when the select has been opened. */
   @Output() onOpen = new EventEmitter();