Merge branch 'master' into css-refactor

demos/action-sheet/app.html

@@ -0,0 +1,2 @@
+<ion-nav id="nav" [root]="rootPage" #content></ion-nav>
+<ion-overlay></ion-overlay>

demos/action-sheet/index.ts

@@ -1,41 +1,51 @@
-import {App, ActionSheet} from 'ionic/ionic';
-
+import {App, Page, IonicApp, Config, Platform} from 'ionic/ionic';
+import {ActionSheet} from 'ionic/ionic';
 
 @App({
+  templateUrl: 'app.html'
+})
+class ApiDemoApp {
+
+  constructor() {
+    this.rootPage = InitialPage;
+  }
+}
+
+@Page({
   templateUrl: 'main.html'
 })
-class IonicApp {
-
-  constructor(actionSheet: ActionSheet) {
+export class InitialPage {
+  constructor(actionSheet: ActionSheet, platform: Platform) {
     this.actionSheet = actionSheet;
+    this.platform = platform;
   }
 
-  openMenu() {
+  open() {
 
     this.actionSheet.open({
       buttons: [
-        { text: 'Share This' },
-        { text: 'Move' }
+        { text: 'Share'},
+        { text: 'Play'},
+        { text: 'Favorite'}
       ],
       destructiveText: 'Delete',
-      titleText: 'Modify your album',
+      titleText: 'Albums',
       cancelText: 'Cancel',
-      cancel: function() {
+      cancel: () => {
         console.log('Canceled');
       },
       destructiveButtonClicked: () => {
         console.log('Destructive clicked');
       },
-      buttonClicked: function(index) {
+      buttonClicked: (index) => {
         console.log('Button clicked', index);
-        if(index == 1) { return false; }
+        if (index == 1) { return false; }
         return true;
       }
 
     }).then(actionSheetRef => {
       this.actionSheetRef = actionSheetRef;
     });
-
   }
-
 }
+

demos/action-sheet/main.html

@@ -1,3 +1,9 @@
+<ion-navbar *navbar>
+  <ion-title>Action Sheet</ion-title>
+</ion-navbar>
+
 <ion-content padding>
-  <button (click)="openMenu()">Open Action Sheet</button>
-</ion-content>
+  <ion-row>
+    <button full block (click)="open()">Open Action Sheet</button>    
+  </ion-row>
+<ion-content>

demos/hide-when/app.html

@@ -0,0 +1 @@
+<ion-nav id="nav" [root]="rootPage" #content></ion-nav>

demos/hide-when/index.ts

@@ -0,0 +1,20 @@
+import {App, Page, IonicApp} from 'ionic/ionic';
+
+@App({
+  templateUrl: 'app.html'
+})
+class ApiDemoApp {
+
+  constructor() {
+    this.rootPage = InitialPage;
+  }
+}
+
+@Page({
+  templateUrl: 'main.html'
+})
+export class InitialPage {
+  constructor() {
+  }
+}
+

demos/hide-when/main.html

@@ -0,0 +1,9 @@
+<ion-navbar *navbar>
+  <ion-title>HideWhen</ion-title>
+</ion-navbar>
+
+<ion-content padding>
+  <p hide-when="android">
+    <b>(hide-when="android")</b> This text is hidden on Android only. Click the Android tab to hide this text.
+  </p>
+<ion-content>

demos/show-when/app.html

@@ -0,0 +1 @@
+<ion-nav id="nav" [root]="rootPage" #content></ion-nav>

demos/show-when/index.ts

@@ -0,0 +1,20 @@
+import {App, Page, IonicApp} from 'ionic/ionic';
+
+@App({
+  templateUrl: 'app.html'
+})
+class ApiDemoApp {
+
+  constructor() {
+    this.rootPage = InitialPage;
+  }
+}
+
+@Page({
+  templateUrl: 'main.html'
+})
+export class InitialPage {
+  constructor() {
+  }
+}
+

demos/show-when/main.html

@@ -0,0 +1,9 @@
+<ion-navbar *navbar>
+  <ion-title>ShowWhen</ion-title>
+</ion-navbar>
+
+<ion-content padding>
+  <p show-when="ios">
+    <b>(show-when="ios")</b> This text is shown on iOS only. Click the Android tab to hide this text.
+  </p>
+<ion-content>

ionic/components/action-sheet/action-sheet.ts

@@ -109,6 +109,7 @@ class ActionSheetCmp {
  * }
  * ```
  *
+ * @demo /docs/v2/demos/action-sheet/
  * @see {@link /docs/v2/components#action-sheets ActionSheet Component Docs}
  */
 @Injectable()

ionic/components/show-hide-when/show-hide-when.ts

@@ -53,12 +53,15 @@ class DisplayWhen {
 
 /**
  *
- * The `show-when` attribute takes a value or expression, and only shows the element it has been added to when
- * the value or expression is true. Complements the [hide-when attribute](../HideWhen).
+ * The `show-when` attribute takes a string that represents a plaform or screen orientation.
+ * The element the attribute is added to will only be shown when that platform or screen orientation is active.
+ * Complements the [hide-when attribute](../HideWhen).
  * @usage
  * ```html
- * <div show-when="false">I am hidden!</div>
+ * <div show-when="ios">I am only visible on iOS!</div>
  * ```
+ * @demo /docs/v2/demos/show-when/
+ * @see {@link ../HideWhen HideWhen API Docs}
  */
 @Directive({
   selector: '[show-when]',
@@ -87,12 +90,15 @@ export class ShowWhen extends DisplayWhen {
 
 /**
  *
- * The `hide-when` attribute takes a value or expression, and hides the element it has been added to when
- * the value or expression is true. Complements the [show-when attribute](../ShowWhen).
+ * The `hide-when` attribute takes a string that represents a plaform or screen orientation.
+ * The element the attribute is added to will only be hidden when that platform or screen orientation is active.
+ * Complements the [show-when attribute](../ShowWhen).
  * @usage
  * ```html
- * <div hide-when="true">I am hidden!</div>
+ * <div hide-when="android">I am hidden on Android!</div>
  * ```
+ * @demo /docs/v2/demos/hide-when/
+ * @see {@link ../ShowWhen ShowWhen API Docs}
  */
 @Directive({
   selector: '[hide-when]',