From 9a4b6bb9b02c97e743e1cbd8396c6e7b2cf0144f Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@gmail.com>
Date: Fri, 5 Feb 2016 14:43:16 -0500
Subject: [PATCH] docs(demos): add demo for select

references driftyco/ionic-site#397
---
 demos/select/index.ts             |  30 +++++++
 demos/select/main.html            | 135 ++++++++++++++++++++++++++++++
 ionic/components/select/select.ts |   3 +-
 3 files changed, 167 insertions(+), 1 deletion(-)
 create mode 100644 demos/select/index.ts
 create mode 100644 demos/select/main.html

diff --git a/demos/select/index.ts b/demos/select/index.ts
new file mode 100644
index 0000000000..13d1222f64
--- /dev/null
+++ b/demos/select/index.ts
@@ -0,0 +1,30 @@
+import {App, Page} from 'ionic/ionic';
+
+@App({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+class ApiDemoApp {
+  constructor() {
+    this.root = MainPage;
+  }
+}
+
+@Page({
+  templateUrl: 'main.html'
+})
+class MainPage {
+  constructor() {
+    this.musicAlertOpts = {
+      title: '1994 Music',
+      subTitle: 'Select your favorite'
+    };
+
+    this.petOptions = [
+      { text: 'Bird', value: 'bird' },
+      { text: 'Cat', value: 'cat', checked: true },
+      { text: 'Dog', value: 'dog', checked: true },
+      { text: 'Honey Badger', value: 'honeybadger' },
+      { text: 'Pig', value: 'pig' },
+    ];
+  }
+}
diff --git a/demos/select/main.html b/demos/select/main.html
new file mode 100644
index 0000000000..4a4400adbc
--- /dev/null
+++ b/demos/select/main.html
@@ -0,0 +1,135 @@
+<ion-toolbar>
+  <ion-title>Select</ion-title>
+</ion-toolbar>
+
+<ion-content class="outer-content">
+
+  <ion-list>
+    <ion-list-header>Single Value Select</ion-list-header>
+
+    <ion-item>
+      <ion-label>Gender</ion-label>
+      <ion-select [(ngModel)]="gender">
+        <ion-option value="f" checked="true">Female</ion-option>
+        <ion-option value="m">Male</ion-option>
+      </ion-select>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>Gaming</ion-label>
+      <ion-select [(ngModel)]="gaming">
+        <ion-option value="nes">NES</ion-option>
+        <ion-option value="n64">Nintendo64</ion-option>
+        <ion-option value="ps">PlayStation</ion-option>
+        <ion-option value="genesis">Sega Genesis</ion-option>
+        <ion-option value="saturn">Sega Saturn</ion-option>
+        <ion-option value="snes">SNES</ion-option>
+      </ion-select>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>Operating System</ion-label>
+      <ion-select [(ngModel)]="os" submitText="Okay" cancelText="Nah">
+        <ion-option value="dos">DOS</ion-option>
+        <ion-option value="lunix">Linux</ion-option>
+        <ion-option value="mac7">Mac OS 7</ion-option>
+        <ion-option value="mac8">Mac OS 8</ion-option>
+        <ion-option value="win3.1" checked>Windows 3.1</ion-option>
+        <ion-option value="win95">Windows 95</ion-option>
+        <ion-option value="win98">Windows 98</ion-option>
+      </ion-select>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>Music</ion-label>
+      <ion-select [(ngModel)]="music" [alertOptions]="musicAlertOpts">
+        <ion-option>Alice in Chains</ion-option>
+        <ion-option>Green Day</ion-option>
+        <ion-option>Nirvana</ion-option>
+        <ion-option>Pearl Jam</ion-option>
+        <ion-option>Smashing Pumpkins</ion-option>
+        <ion-option>Soundgarden</ion-option>
+        <ion-option (select)="stpSelect()">Stone Temple Pilots</ion-option>
+      </ion-select>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>Date</ion-label>
+      <ion-select [(ngModel)]="month">
+        <ion-option value="01">January</ion-option>
+        <ion-option value="02">February</ion-option>
+        <ion-option value="03">March</ion-option>
+        <ion-option value="04">April</ion-option>
+        <ion-option value="05">May</ion-option>
+        <ion-option value="06">June</ion-option>
+        <ion-option value="07">July</ion-option>
+        <ion-option value="08">August</ion-option>
+        <ion-option value="09">September</ion-option>
+        <ion-option value="10">October</ion-option>
+        <ion-option value="11">November</ion-option>
+        <ion-option value="12" checked="true">December</ion-option>
+      </ion-select>
+      <ion-select [(ngModel)]="year">
+        <ion-option>1989</ion-option>
+        <ion-option>1990</ion-option>
+        <ion-option>1991</ion-option>
+        <ion-option>1992</ion-option>
+        <ion-option>1993</ion-option>
+        <ion-option checked="true">1994</ion-option>
+        <ion-option>1995</ion-option>
+        <ion-option>1996</ion-option>
+        <ion-option>1997</ion-option>
+        <ion-option>1998</ion-option>
+        <ion-option>1999</ion-option>
+      </ion-select>
+    </ion-item>
+
+  </ion-list>
+
+  <ion-list>
+    <ion-list-header>Multiple Value Select</ion-list-header>
+
+    <ion-item>
+      <ion-label>Toppings</ion-label>
+      <ion-select [(ngModel)]="toppings" multiple="true" cancelText="Nah" okText="Okay!">
+        <ion-option value="bacon" checked="true">Bacon</ion-option>
+        <ion-option value="olives">Black Olives</ion-option>
+        <ion-option value="xcheese" checked="true">Extra Cheese</ion-option>
+        <ion-option value="peppers">Green Peppers</ion-option>
+        <ion-option value="mushrooms">Mushrooms</ion-option>
+        <ion-option value="onions">Onions</ion-option>
+        <ion-option value="pepperoni">Pepperoni</ion-option>
+        <ion-option value="pineapple">Pineapple</ion-option>
+        <ion-option value="sausage">Sausage</ion-option>
+        <ion-option value="Spinach">Spinach</ion-option>
+      </ion-select>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>Car Features</ion-label>
+      <ion-select [(ngModel)]="carFeatures" [multiple]="true">
+        <ion-option value="backupcamera">Backup Camera</ion-option>
+        <ion-option value="heatedseats">Headted Seats</ion-option>
+        <ion-option value="keyless">Keyless Entry</ion-option>
+        <ion-option value="navigation">Navigation</ion-option>
+        <ion-option value="parkingassist">Parking Assist</ion-option>
+        <ion-option value="sunroof">Sun Roof</ion-option>
+      </ion-select>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>Pets</ion-label>
+      <ion-select [(ngModel)]="pets" multiple>
+        <ion-option *ngFor="#o of petOptions" [value]="o.value" [checked]="o.checked">{{o.text}}</ion-option>
+      </ion-select>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>Disabled</ion-label>
+      <ion-select multiple disabled>
+        <ion-option checked="true">Selected Text</ion-option>
+      </ion-select>
+    </ion-item>
+  </ion-list>
+
+</ion-content>
diff --git a/ionic/components/select/select.ts b/ionic/components/select/select.ts
index 272147659b..d17e7e7887 100644
--- a/ionic/components/select/select.ts
+++ b/ionic/components/select/select.ts
@@ -98,7 +98,8 @@ import {Option} from '../option/option';
  * @property [multiple] - Whether or not the select component can accept multipl selections
  * @property [disabled] - Whether or not the select component is disabled or not
  * @property (change) - Any expression you want to evaluate when the selection has changed
-
+ *
+ * @demo /docs/v2/demos/select/
  */
 @Component({
   selector: 'ion-select',