From 461ba11de9d93f44111fc0eb3860e19abf3ab893 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@gmail.com>
Date: Tue, 14 Jun 2016 20:24:35 -0400
Subject: [PATCH] feat(select): add placeholder as an input for select

closes #6862
---
 src/components/select/select.ios.scss             | 5 +++++
 src/components/select/select.md.scss              | 5 +++++
 src/components/select/select.ts                   | 8 +++++++-
 src/components/select/select.wp.scss              | 6 ++++++
 src/components/select/test/single-value/main.html | 2 +-
 5 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/src/components/select/select.ios.scss b/src/components/select/select.ios.scss
index bf5d1d03552..9c9d23fc4d9 100644
--- a/src/components/select/select.ios.scss
+++ b/src/components/select/select.ios.scss
@@ -10,12 +10,17 @@ $select-ios-padding-bottom:      $item-ios-padding-bottom !default;
 $select-ios-padding-left:        $item-ios-padding-left !default;
 
 $select-ios-icon-color:          #999 !default;
+$select-ios-placeholder-color:   $select-ios-icon-color !default;
 
 
 ion-select {
   padding: $select-ios-padding-top $select-ios-padding-right  $select-ios-padding-bottom $select-ios-padding-left;
 }
 
+.select-placeholder {
+  color: $select-ios-placeholder-color;
+}
+
 .select-icon {
   position: relative;
 
diff --git a/src/components/select/select.md.scss b/src/components/select/select.md.scss
index 6f6779934ac..1b4bfda4c68 100644
--- a/src/components/select/select.md.scss
+++ b/src/components/select/select.md.scss
@@ -10,12 +10,17 @@ $select-md-padding-bottom:      $item-md-padding-bottom !default;
 $select-md-padding-left:        $item-md-padding-left !default;
 
 $select-md-icon-color:          #999 !default;
+$select-md-placeholder-color:   $select-md-icon-color !default;
 
 
 ion-select {
   padding: $select-md-padding-top $select-md-padding-right $select-md-padding-bottom $select-md-padding-left;
 }
 
+.select-placeholder {
+  color: $select-md-placeholder-color;
+}
+
 .item-select ion-label {
   margin-left: 0;
 }
diff --git a/src/components/select/select.ts b/src/components/select/select.ts
index 138c89f7983..e9127b6a383 100644
--- a/src/components/select/select.ts
+++ b/src/components/select/select.ts
@@ -116,7 +116,8 @@ const SELECT_VALUE_ACCESSOR = new Provider(
 @Component({
   selector: 'ion-select',
   template:
-    '<div class="select-text">{{_text}}</div>' +
+    '<div *ngIf="!_text" class="select-placeholder select-text">{{placeholder}}</div>' +
+    '<div *ngIf="_text" class="select-text">{{_text}}</div>' +
     '<div class="select-icon">' +
       '<div class="select-icon-inner"></div>' +
     '</div>' +
@@ -159,6 +160,11 @@ export class Select {
    */
   @Input() okText: string = 'OK';
 
+  /**
+   * @input {string} The text to display when the select is empty.
+   */
+  @Input() placeholder: string;
+
   /**
    * @input {any} Any addition options that the alert interface can take.
    * See the [Alert API docs](../../alert/Alert) for the create options.
diff --git a/src/components/select/select.wp.scss b/src/components/select/select.wp.scss
index a5e5626a852..ab76b8d397b 100644
--- a/src/components/select/select.wp.scss
+++ b/src/components/select/select.wp.scss
@@ -17,7 +17,9 @@ $select-wp-border-color:        $input-wp-border-color !default;
 
 $select-wp-icon-width:          18px !default;
 $select-wp-icon-arrow-width:    2px !default;
+
 $select-wp-icon-color:          $select-wp-border-color !default;
+$select-wp-placeholder-color:   $select-wp-icon-color !default;
 
 
 ion-select {
@@ -32,6 +34,10 @@ ion-select {
   line-height: 3rem;
 }
 
+.select-placeholder {
+  color: $select-wp-placeholder-color;
+}
+
 .item-select ion-label {
   margin-left: 0;
 }
diff --git a/src/components/select/test/single-value/main.html b/src/components/select/test/single-value/main.html
index 46508a6f859..3bc10dc69fc 100644
--- a/src/components/select/test/single-value/main.html
+++ b/src/components/select/test/single-value/main.html
@@ -49,7 +49,7 @@
 
   <ion-item>
     <ion-label>Music</ion-label>
-    <ion-select [(ngModel)]="music" [alertOptions]="musicAlertOpts">
+    <ion-select [(ngModel)]="music" [alertOptions]="musicAlertOpts" placeholder="Select Music">
       <ion-option>Alice in Chains</ion-option>
       <ion-option>Green Day</ion-option>
       <ion-option>Nirvana</ion-option>