fix(ion-button): ion-button on a tag should be excluded (#8250)

fixes #8249

.github/CONTRIBUTING.md

@@ -5,7 +5,7 @@ Thanks for your interest in contributing to the Ionic Framework! :tada:
 
 ## Contributing Etiquette
 
-Please see our [Contributor Code of Conduct](./CODE_OF_CONDUCT.md) for information on our rules of conduct.
+Please see our [Contributor Code of Conduct](https://github.com/driftyco/ionic/blob/master/CODE_OF_CONDUCT.md) for information on our rules of conduct.
 
 
 ## Creating an Issue
@@ -36,12 +36,14 @@ Looking for an issue to fix? Make sure to look through our issues with the [help
 1. Make any changes to the component.
 2. Modify the e2e test in the `test/` directory under the component directory, if possible. If the test does not exist and it is possible to show the change, please create a new test in a directory called `basic/`.
 
+
 #### TypeScript Changes
 
 1. If there is a `*.spec.ts` file located in the `test/` folder, update it to include a karma test for your change, if needed. If this file doesn't exist, please notify us.
 2. Run `gulp karma` to make sure all tests are working, regardless if a test was added.
 3. Run `gulp tslint` and fix any linter errors.
 
+
 #### Sass Changes
 
 1. If the css property is something that the user may want to override and it won't break the component layout, it should be given a Sass variable. See our [doc on naming Sass variables](https://docs.google.com/document/d/1OyOyrRE5lpB_9mdkF0HWVQLV97fHma450N8XqE4mjZQ/edit?usp=sharing).
@@ -95,19 +97,42 @@ Looking for an issue to fix? Make sure to look through our issues with the [help
     *
     * ...
     *
-    * @demo /docs/v2/demos/badge/
+    * @demo /docs/v2/demos/src/badge/
   **/
   ```
 3. Run `gulp watch.demos` to watch for changes to the demo
 4. Navigate to `http://localhost:8000/dist/demos/` and then to your component's demo to view it.
 5. If the change affects the component demos, create an issue on the `ionic-site` repo: https://github.com/driftyco/ionic-site/issues
 
-### Committing
 
-1. Install [Commitizen](https://github.com/commitizen/cz-cli#installing-the-command-line-tool) (add sudo if on OSX/Linux): `npm install -g commitizen`
-2. Use commitizen to commit instead of `git commit`: `git cz`
-3. This will prompt you with questions and commit when you are finished.
-4. Submit the Pull Request!
+## Commit Message Format
+
+We have very precise rules over how our git commit messages can be formatted. This leads to more readable messages that are easy to follow when looking through the project history. But also, we use the git commit messages to generate the our change log. (Ok you got us, it's basically Angular's commit message format).
+
+`type(scope): subject`
+
+#### Type
+Must be one of the following:
+
+* **fix**: A bug fix
+* **feat**: A new feature
+* **docs**: Documentation only changes
+* **style**: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
+* **refactor**: A code change that neither fixes a bug nor adds a feature
+* **perf**: A code change that improves performance
+* **test**: Adding missing tests
+* **chore**: Changes to the build process or auxiliary tools and libraries such as documentation generation
+
+#### Scope
+The scope could be anything specifying place of the commit change. For example `alert`, `button`, `menu`, `nav`, etc...
+
+#### Subject
+The subject contains succinct description of the change:
+
+* use the imperative, present tense: "change" not "changed" nor "changes"
+* do not capitalize first letter
+* do not place a period (.) at the end
+* entire length of the commit message must not go over 50 characters
 
 
 ## License

.github/ISSUE_TEMPLATE.md

@@ -0,0 +1,42 @@
+**Note: If you are having problems formatting your issue please refer to this article on using markdown in Github:**
+
+https://guides.github.com/features/mastering-markdown/
+
+**Note: for support questions, please use one of these channels:** 
+
+https://forum.ionicframework.com/
+http://ionicworldwide.herokuapp.com/
+
+
+#### Short description of the problem:
+
+
+#### What behavior are you expecting?
+
+
+**Steps to reproduce:**
+1. 
+2. 
+3. 
+
+```
+insert any relevant code between the above and below backticks
+```
+
+**Other information:** (e.g. stacktraces, related issues, suggestions how to fix, stackoverflow links, forum links, etc)
+ 
+
+**Which Ionic Version?** 1.x or 2.x
+
+
+#### Plunker that shows an example of your issue
+
+**For Ionic 1 issues** - http://plnkr.co/edit/Xo1QyAUx35ny1Xf9ODHx?p=preview
+
+**For Ionic 2 issues** - http://plnkr.co/edit/me3Uk0GKWVRhZWU0usad?p=preview
+
+
+**Run `ionic info` from terminal/cmd prompt:** (paste output below)
+
+
+

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,12 @@
+#### Short description of what this resolves:
+
+
+#### Changes proposed in this pull request:
+
+-
+-
+-
+
+**Ionic Version**: 1.x / 2.x
+
+**Fixes**: #

.gitignore

@@ -8,6 +8,7 @@ log.txt
 *.sublime-workspace
 
 .idea/
+.vscode/
 .sass-cache/
 .versions/
 coverage/
@@ -21,12 +22,19 @@ $RECYCLE.BIN/
 Thumbs.db
 UserInterfaceState.xcuserstate
 
-scripts/resources/web-animations-js/test/
-scripts/resources/web-animations-js/inter-*
-scripts/resources/web-animations-js/**/*.map
-scripts/resources/web-animations-js/**/*.md
-scripts/resources/web-animations-js/**/*.sh
-scripts/resources/web-animations-js/**/*.yml
-scripts/resources/web-animations-js/**/*.gz
-
 .package.tmp.json
+
+src/themes/version.scss
+scripts/e2e/webpackEntryPoints.json
+scripts/build/e2e-generated-tsconfig.json
+*.css.ts
+
+# demo stuff
+demos/node_modules
+demos/polyfills
+demos/css
+demos/fonts
+demos/src/**/*.js*
+demos/src/**/*.ngfactory.ts
+demos/src/**/*.d.ts
+demos/src/**/*.metadata.json

.scss-lint.yml

@@ -3,10 +3,15 @@
 # See config at https://github.com/brigade/scss-lint/blob/master/config/default.yml
 
 exclude:
-  - 'src/components/slides/**'
+  - 'src/components/item/item.ios.scss'
+  - 'src/components/item/item.md.scss'
+  - 'src/components/list/list.ios.scss'
   - 'src/components/show-hide-when/**'
-  - 'src/components.*.scss'
-  - 'src/util/*.scss'
+  - 'src/components/slides/**'
+  - 'src/themes/ionic.mixins.scss'
+  - 'src/themes/license.scss'
+  - 'src/themes/util.scss'
+  - 'src/themes/version.scss'
   - 'src/platform/cordova.*.scss'
 
 

GUIDE.md

@@ -1,104 +0,0 @@
-# Ionic
-
-Ionic makes it easy for web developers to best-in-class build mobile apps across major platforms, like iOS
-and Android.
-
-Since the initial release of Ionic in November 2013, 700,000 apps have been created with the Ionic SDK,
-and many have been featured as top apps in the Apple App Store, Google Play Store, and Amazon App Store.
-
-Ionic is a collection of CSS and Javascript components based on Angular 2. The core philosophy behind
-Ionic is that a web developer can use the standard HTML5/CSS/Javascript stack they already know and love,
-but get real mobile components underneath that adapt automatically to the device and platform they
-run on.
-
-## New to Ionic?
-
-If Ionic 2 is your first exposure to Ionic, jump right in with the [Getting Started]() guide. Otherwise,
-read below for some design philosophy changes from v1.
-
-## New Concepts in Ionic 2
-
-Ionic 2 brings even more parity to native SDKs like iOS and Android for the web stack.
-
-With that in mind, some core components (like routing) work differently in v2 than v1.
-
-### Navigation
-
-In Ionic 1, we used UI Router with URL routing heavily to define navigation in your app.
-
-The overwhelming feedback from Ionic 1 developers is that the routing and navigation
-system was too difficult to use in practice. It was challenging to correctly map
-URLs to views, and the navigation system didn't give the developer enough fine-grained control.
-
-With v2, we've taken a more native-friendly navigation approach with a simpler `push/pop` system.
-
-For example, in v1 we'd create a `ContactDetail` page like this:
-
-```javascript
-$stateProvider
-  .state('contact', {
-    url: "/contact/:contactId",
-    templateUrl: "templates/contact.html",
-    controller: 'ContactCtrl'
-  });
-```
-
-Then, to navigate to this, you'd do `<a ui-sref="contact({contact: contact})">{{contact.name}}</a>`
-
-We'd also need to make sure we wired up the current `<ion-nav-view name>` which was considerably more
-challenging when using nested navigation.
-
-In v2, this works a bit differently. Instead of navigating through URLs and routing (which is still
-  possible as we will see a bit later), we push and pop views onto the stack:
-
-`<ion-item (^click)="showContact(contact)">{{contact.name}}</ion-item>``
-
-```javascript
-class ContactsPage {
-  showContact(contact) {
-    this.nav.push(ContactDetail, {
-      contact: contact
-    });
-  }
-}
-```
-
-There are also shortcut directives we can use for links much like `ui-sref`, such as
-`nav-push` and `nav-pop` which can be used like this:
-
-```html
-<button [nav-push]="myContactComponent" [push-data]="contact">See contact</button>
-```
-
-```html
-<button nav-pop>Go back</button>
-```
-
-The really nice thing about this is you can infinitely navigate now (for example,
-  you can keep pushing new `ContactDetail` pages onto the stack), and
-control things like animation and the history stack the user has to navigate through.
-
-You can also navigate inside of practically any container. For example, a modal window that slides up
-can have its own navigation, and two split views can navigate independently, something
-that was not possible before.
-
-It also makes it incredibly easy to navigate to the same page in completely different
-contexts. For example, if you were building something similar to Apple's App Store
-app where there are multiple tabs at the bottom and each tab navigates independently,
-you could navigate to an `AppDetail` page from any tab, which is exactly how the App Store app works.
-
-For example, here's how the Minecraft `AppDetail` page looks in different tabs:
-
-<img src="http://ionic-io-assets.s3.amazonaws.com/images/mc1.PNG" width="300" style="width: 300px">
-<img src="http://ionic-io-assets.s3.amazonaws.com/images/mc2.PNG" width="300" style="width: 300px">
-
-Notice the page is exactly the same, but the way the user navigated to it is different.
-
-This hits on a core change in Ionic 2: the history state of the app is now your
-responsibility as a developer. It's up to you to make sure navigation provides
-a good UX, but you have the freedom to navigate as you see fit.
-
-### Routing
-
-In Ionic, routing is used more for breadcrumbs and loading state than it is for active
-navigation.

README.md

@@ -2,9 +2,9 @@
 
 # Ionic 2: Beta
 
-Ionic 2 is the next generation of [Ionic](http://ionicframework.com/), the open-source mobile app development SDK that makes it easy to build top quality mobile apps with web technologies.
+Ionic 2 is the next generation of [Ionic](http://ionicframework.com/), the open-source mobile app development SDK that makes it easy to build top quality native and progressive web apps with web technologies.
 
-Ionic 2 is based on the new [2.x version of AngularJS](https://angular.io/), and comes with many significant performance, usability, and feature improvements.
+Ionic 2 is based on the new [2.x version of Angular](https://angular.io/), and comes with many significant performance, usability, and feature improvements.
 
 See the [Building apps with Ionic 2](http://adamdbradley.github.io/building-with-ionic2) slides for a quick overview of Ionic 2.
 
@@ -14,8 +14,9 @@ To try Ionic 2 today, visit the [Ionic 2 Docs](http://ionicframework.com/docs/v2
 
 ### Contributing to Ionic 2
 
-See [CONTRIBUTING.md](https://github.com/driftyco/ionic/blob/2.0/CONTRIBUTING.md)
+See [CONTRIBUTING.md](https://github.com/driftyco/ionic/blob/master/.github/CONTRIBUTING.md)
 
 ### Ionic 2 Examples
 
 There are a few real Ionic 2 apps in the wild. The most complete is the [Ionic Conference App](https://github.com/driftyco/ionic-conference-app), a perfect starting point for building your own conference app.
+

circle.yml

@@ -2,19 +2,21 @@ general:
   branches:
     ignore:
       - ins_n_outs
-dependencies:
-  pre:
-   - ./scripts/docs/prepare.sh
-  cache_directories:
-    - "~/ionic-site" # cache ionic-site
 machine:
   node:
     version: 4.1.0
+  post:
+    - npm install -g npm@3.x.x
+dependencies:
+  pre:
+    - ./scripts/docs/prepare.sh
+  cache_directories:
+    - "~/ionic-site" # cache ionic-site
 test:
   override:
-    - echo "Automatically marking tests as passing for now"
+    - gulp lint.ts
 deployment:
  tasks:
-   branch: "2.0"
+   branch: "master"
    commands:
      - ./scripts/ci/deploy.sh

demos/action-sheet/app.html

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

demos/action-sheet/main.html

@@ -1,7 +0,0 @@
-<ion-navbar *navbar>
-  <ion-title>Action Sheet</ion-title>
-</ion-navbar>
-
-<ion-content padding>
-  <button block (click)="present()">Basic Action Sheet</button>
-</ion-content>

demos/alert/app.html

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

demos/alert/main.html

@@ -1,11 +0,0 @@
-<ion-navbar *navbar>
-  <ion-title>Alert</ion-title>
-</ion-navbar>
-
-<ion-content padding>
-  <button block (click)="doAlert()">Basic Alert</button>
-  <button light block (click)="doConfirm()">Confirm Alert</button>
-  <button secondary block (click)="doPrompt()">Prompt Alert</button>
-  <button danger block (click)="doRadio()">Radio Alert</button>
-  <button dark block (click)="doCheckbox()">Checkbox Alert</button>
-</ion-content>

demos/app.ios.scss

@@ -1 +0,0 @@
-@import "../src/ionic.ios";

demos/app.md.scss

@@ -1 +0,0 @@
-@import "../src/ionic.md";

demos/app.variables.local.scss

@@ -1,2 +0,0 @@
-$font-path: "../fonts";
-$roboto-font-path: "../fonts";

demos/app.variables.production.scss

@@ -1,2 +0,0 @@
-$font-path: "/fonts";
-$roboto-font-path: "/fonts";

demos/app.variables.scss

@@ -1,31 +0,0 @@
-// http://ionicframework.com/docs/v2/theming/
-
-
-// App Shared Variables
-// --------------------------------------------------
-// To customize the look and feel of this app, you can override
-// the Sass variables found in Ionic's source scss files. Setting
-// variables before Ionic's Sass will use these variables rather than
-// Ionic's default Sass variable values. App Shared Sass imports belong
-// in the app.core.scss file and not this file. Sass variables specific
-// to the mode belong in either the app.ios.scss or app.md.scss files.
-
-
-// App Shared Color Variables
-// --------------------------------------------------
-// It's highly recommended to change the default colors
-// to match your app's branding. Ionic uses a Sass map of
-// colors so you can add, rename and remove colors as needed.
-// The "primary" color is the only required color in the map.
-// Both iOS and MD colors can be further customized if colors
-// are different per mode.
-
-$colors: (
-  primary:    #387ef5,
-  secondary:  #32db64,
-  danger:     #f53d3d,
-  light:      #f4f4f4,
-  dark:       #222,
-  vibrant:    rebeccapurple,
-  bright:     #FFC125
-);

demos/app.wp.scss

@@ -1 +0,0 @@
-@import "../src/ionic.wp";

demos/button/index.ts

@@ -1,10 +0,0 @@
-import {Component} from '@angular/core';
-import {ionicBootstrap} from 'ionic-angular';
-
-
-@Component({
-  templateUrl: 'main.html'
-})
-class ApiDemoApp {}
-
-ionicBootstrap(ApiDemoApp);

demos/button/main.html

@@ -1,64 +0,0 @@
-
-<ion-toolbar>
-  <ion-title>Button</ion-title>
-</ion-toolbar>
-
-<ion-content text-center>
-
-  <h4>Colors</h4>
-
-  <button>Default</button>
-
-  <button secondary>Secondary</button>
-
-  <button danger>Danger</button>
-
-  <button light>Light</button>
-
-  <button dark>Dark</button>
-
-  <h4>Shapes</h4>
-
-  <button full>Full Button</button>
-
-  <button block>Block Button</button>
-
-  <button round>Round Button</button>
-
-  <button fab style="position: relative;">FAB</button>
-
-  <h4>Outlines</h4>
-
-  <button secondary full outline>Outline + Full</button>
-
-  <button secondary block outline>Outline + Block</button>
-
-  <button secondary round outline>Outline + Round</button>
-
-  <button secondary fab outline style="position: relative;">FAB</button>
-
-  <h4>Icons</h4>
-
-  <button dark>
-    <ion-icon name="star"></ion-icon>
-    Left Icon
-  </button>
-
-  <button dark>
-    Right Icon
-    <ion-icon name="star"></ion-icon>
-  </button>
-
-  <button dark>
-    <ion-icon name="star"></ion-icon>
-  </button>
-
-  <h4>Sizes</h4>
-
-  <button light large>Large</button>
-
-  <button light>Default</button>
-
-  <button light small>Small</button>
-
-</ion-content>

demos/checkbox/index.ts

@@ -1,26 +0,0 @@
-import {Component} from '@angular/core';
-import {ionicBootstrap} from 'ionic-angular';
-
-
-@Component({
-  templateUrl: 'main.html'
-})
-class ApiDemoApp {
-
-  data = {
-    jon: true,
-    daenerys: true,
-    arya: false,
-    tyroin: false,
-    sansa: true,
-    khal: false,
-    cersei: true,
-    stannis: true,
-    petyr: false,
-    hodor: true,
-    catelyn: true
-  };
-
-}
-
-ionicBootstrap(ApiDemoApp);

demos/config/page.html

@@ -1,9 +0,0 @@
-<ion-navbar *navbar>
-  <ion-title>Page</ion-title>
-</ion-navbar>
-
-<ion-content>
-  <div padding>
-    <button block (click)="pop()">Go Back to Config</button>
-  </div>
-</ion-content>

demos/events/login.html

@@ -1,31 +0,0 @@
-
-<ion-navbar *navbar>
-  <button menuToggle>
-    <ion-icon name="menu"></ion-icon>
-  </button>
-
-  <ion-title>
-    Events
-  </ion-title>
-</ion-navbar>
-
-<ion-content #content>
-  <h3 margin-left>Login</h3>
-  <p margin>Click the login button to use the credentials below. Then, toggle the menu to see the menu items change.</p>
-
-  <ion-list no-margin>
-    <ion-item>
-      <ion-label stacked primary>Name</ion-label>
-      <ion-input [(ngModel)]="user.name" disabled></ion-input>
-    </ion-item>
-    <ion-item>
-      <ion-label stacked primary>Username</ion-label>
-      <ion-input [(ngModel)]="user.username" disabled></ion-input>
-    </ion-item>
-  </ion-list>
-
-  <div padding>
-    <button block (click)="login()">Login</button>
-    <button block secondary menuToggle>Toggle Menu</button>
-  </div>
-</ion-content>

demos/events/logout.html

@@ -1,20 +0,0 @@
-
-<ion-navbar *navbar>
-  <button menuToggle>
-    <ion-icon name="menu"></ion-icon>
-  </button>
-
-  <ion-title>
-    Events
-  </ion-title>
-</ion-navbar>
-
-<ion-content #content>
-  <h3 margin-left>Logout</h3>
-  <p margin>Click the logout button to logout. Then, toggle the menu to see the menu items change.</p>
-
-  <div padding>
-    <button block (click)="logout()">Logout</button>
-    <button block secondary menuToggle>Toggle Menu</button>
-  </div>
-</ion-content>

demos/events/main.html

@@ -1,27 +0,0 @@
-<ion-menu #menu [content]="content">
-
-  <ion-toolbar secondary>
-    <ion-title>Left Menu</ion-title>
-  </ion-toolbar>
-
-  <ion-content>
-
-    <ion-list>
-      <ion-item *ngIf="loggedIn">
-        Welcome, Administrator!
-      </ion-item>
-      <button ion-item menuClose *ngFor="let p of pages" (click)="openPage(menu, p)" [hidden]="(loggedIn == true && p.showLoggedIn == false) || (loggedIn == false && p.showLoggedIn == true)">
-        <ion-label primary>{{p.title}}</ion-label>
-      </button>
-
-      <button ion-item menuToggle>
-        Close Menu
-      </button>
-
-    </ion-list>
-  </ion-content>
-
-</ion-menu>
-
-
-<ion-nav id="nav" [root]="rootView" #content swipeBackEnabled="false"></ion-nav>

demos/hide-when/index.ts

@@ -1,10 +0,0 @@
-import {Component} from '@angular/core';
-import {ionicBootstrap} from 'ionic-angular';
-
-
-@Component({
-  templateUrl: 'main.html'
-})
-class ApiDemoApp {}
-
-ionicBootstrap(ApiDemoApp);

demos/icon/index.ts

@@ -1,10 +0,0 @@
-import {Component} from '@angular/core';
-import {ionicBootstrap} from 'ionic-angular';
-
-
-@Component({
-  templateUrl: 'main.html'
-})
-class ApiDemoApp {}
-
-ionicBootstrap(ApiDemoApp);

demos/input/index.ts

@@ -1,10 +0,0 @@
-import {Component} from '@angular/core';
-import {ionicBootstrap} from 'ionic-angular';
-
-
-@Component({
-  templateUrl: 'main.html'
-})
-class ApiDemoApp {}
-
-ionicBootstrap(ApiDemoApp);

demos/item-sliding/index.ts

@@ -1,10 +0,0 @@
-import {Component} from '@angular/core';
-import {ionicBootstrap} from 'ionic-angular';
-
-
-@Component({
-  templateUrl: 'main.html'
-})
-class ApiDemoApp {}
-
-ionicBootstrap(ApiDemoApp);

demos/item-sliding/main.html

@@ -1,194 +0,0 @@
-<ion-toolbar>
-  <ion-title>Item Sliding</ion-title>
-</ion-toolbar>
-
-<ion-content class="outer-content">
-  <ion-list class="chat-sliding-demo">
-    <ion-list-header>
-      Chats
-    </ion-list-header>
-
-    <ion-item-sliding>
-      <ion-item>
-        <ion-avatar item-left>
-          <img src="./avatar-cher.png">
-        </ion-avatar>
-        <h2>Cher</h2>
-        <p>Ugh. As if.</p>
-        <ion-note item-right>
-          9:38 pm
-        </ion-note>
-      </ion-item>
-      <ion-item-options>
-        <button secondary>
-          <ion-icon name="menu"></ion-icon>
-          More
-        </button>
-        <button dark>
-          <ion-icon name="volume-off"></ion-icon>
-          Mute
-        </button>
-        <button danger>
-          <ion-icon name="trash"></ion-icon>
-          Delete
-        </button>
-      </ion-item-options>
-    </ion-item-sliding>
-
-    <ion-item-sliding>
-      <ion-item>
-        <ion-avatar item-left>
-          <img src="./avatar-dionne.png">
-        </ion-avatar>
-        <h2>Dionne</h2>
-        <p>Mr. Hall was way harsh.</p>
-        <ion-note item-right>
-          8:59 pm
-        </ion-note>
-      </ion-item>
-      <ion-item-options>
-        <button secondary>
-          <ion-icon name="menu"></ion-icon>
-          More
-        </button>
-        <button dark>
-          <ion-icon name="volume-off"></ion-icon>
-          Mute
-        </button>
-        <button danger>
-          <ion-icon name="trash"></ion-icon>
-          Delete
-        </button>
-      </ion-item-options>
-    </ion-item-sliding>
-
-    <ion-item-sliding>
-      <ion-item>
-        <ion-avatar item-left>
-          <img src="./avatar-murray.png">
-        </ion-avatar>
-        <h2>Murray</h2>
-        <p>Excuse me, "Ms. Dione."</p>
-        <ion-note item-right>
-          Wed
-        </ion-note>
-      </ion-item>
-      <ion-item-options>
-        <button secondary>
-          <ion-icon name="menu"></ion-icon>
-          More
-        </button>
-        <button dark>
-          <ion-icon name="volume-off"></ion-icon>
-          Mute
-        </button>
-        <button danger>
-          <ion-icon name="trash"></ion-icon>
-          Delete
-        </button>
-      </ion-item-options>
-    </ion-item-sliding>
-  </ion-list>
-
-  <ion-list class="login-sliding-demo">
-    <ion-list-header>
-      Logins
-    </ion-list-header>
-
-    <ion-item-sliding>
-      <ion-item>
-        <ion-icon name="logo-twitter" item-left></ion-icon>
-        <h2>Twitter</h2>
-        <p>admin</p>
-      </ion-item>
-      <ion-item-options>
-        <button>
-         edit
-        </button>
-        <button danger>
-          <ion-icon name="trash"></ion-icon>
-        </button>
-      </ion-item-options>
-    </ion-item-sliding>
-
-    <ion-item-sliding>
-      <ion-item>
-        <ion-icon name="logo-github" item-left></ion-icon>
-        <h2>GitHub</h2>
-        <p>admin37</p>
-      </ion-item>
-      <ion-item-options>
-        <button>
-         edit
-        </button>
-        <button danger>
-          <ion-icon name="trash"></ion-icon>
-        </button>
-      </ion-item-options>
-    </ion-item-sliding>
-
-    <ion-item-sliding>
-      <ion-item>
-        <ion-icon name="logo-instagram" item-left></ion-icon>
-        <h2>Instagram</h2>
-        <p>imanadmin</p>
-      </ion-item>
-      <ion-item-options>
-        <button>
-         edit
-        </button>
-        <button danger>
-          <ion-icon name="trash"></ion-icon>
-        </button>
-      </ion-item-options>
-    </ion-item-sliding>
-
-    <ion-item-sliding>
-      <ion-item>
-        <ion-icon name="logo-codepen" item-left dark></ion-icon>
-        <h2>Codepen</h2>
-        <p>administrator</p>
-      </ion-item>
-      <ion-item-options>
-        <button>
-         edit
-        </button>
-        <button danger>
-          <ion-icon name="trash"></ion-icon>
-        </button>
-      </ion-item-options>
-    </ion-item-sliding>
-
-  </ion-list>
-
-</ion-content>
-
-<style>
-  .chat-sliding-demo ion-note {
-    font-size: 13px;
-    margin-top: -8px;
-  }
-
-  .chat-sliding-demo ion-item-options .button-inner {
-    font-size: 14px;
-    flex-direction: column;
-  }
-
-  .chat-sliding-demo ion-item-options ion-icon {
-    padding-right: 0;
-    padding-bottom: 0.3em;
-  }
-
-  .login-sliding-demo .ion-logo-twitter {
-    color: #53ACEB;
-  }
-
-  .login-sliding-demo .ion-logo-github {
-    color: #000000;
-  }
-
-  .login-sliding-demo .ion-logo-instagram {
-    color: #235D8D;
-  }
-
-</style>

demos/item/index.ts

@@ -1,12 +0,0 @@
-import {Component} from '@angular/core';
-import {ionicBootstrap} from 'ionic-angular';
-
-// Uses the list's demo but passes the demo var to change the title
-@Component({
-  templateUrl: '../list/main.html'
-})
-class ApiDemoApp {
-  demo = "Item";
-}
-
-ionicBootstrap(ApiDemoApp);

demos/label/index.ts

@@ -1,10 +0,0 @@
-import {Component} from '@angular/core';
-import {ionicBootstrap} from 'ionic-angular';
-
-
-@Component({
-  templateUrl: 'main.html'
-})
-class ApiDemoApp {}
-
-ionicBootstrap(ApiDemoApp);

demos/list/index.ts

@@ -1,12 +0,0 @@
-import {Component} from '@angular/core';
-import {ionicBootstrap} from 'ionic-angular';
-
-
-@Component({
-  templateUrl: 'main.html'
-})
-class ApiDemoApp {
-  demo = "List";
-}
-
-ionicBootstrap(ApiDemoApp);

demos/local-storage/index.ts

@@ -1,90 +0,0 @@
-import {Component} from '@angular/core';
-import {ionicBootstrap, IonicApp, Config, Platform} from 'ionic-angular';
-import {Storage, LocalStorage} from 'ionic-angular';
-import {Pipe, PipeTransform, Injectable} from '@angular/core'
-
-
-@Pipe({name: 'cleanLocalData'})
-@Injectable()
-class CleanLocalDataPipe implements PipeTransform {
-  validKeys: string[];
-  output: any;
-  data: any;
-
-  transform(obj:any) : any {
-    this.validKeys = ['username', 'name', 'email', 'address'];
-    this.output = {};
-    this.data = JSON.parse(obj);
-    for (var i = 0; i < Object.keys(this.data).length; i++) {
-      if (this.validKeys.indexOf( Object.keys(this.data)[i] ) > -1) {
-        this.output[Object.keys(this.data)[i]] = this.data[Object.keys(this.data)[i]];
-      }
-    }
-    return JSON.stringify(this.output, null, 2);
-  }
-}
-
-
-@Component({
-  templateUrl: 'main.html',
-  pipes: [CleanLocalDataPipe]
-})
-class MainPage {
-  local: Storage;
-  localStorageDemo: string;
-  myItem: any;
-  keys = ['username', 'name', 'email', 'address'];
-  values = ['admin', 'Administrator', 'admin@administrator.com', '123 Admin St'];
-  addedKeys = [];
-  delKey: any;
-
-  constructor() {
-    this.local = new Storage(LocalStorage);
-    this.localStorageDemo = '{}';
-    window.localStorage.clear();
-
-    this.myItem = {
-      key: 'username',
-      value: 'admin'
-    };
-  }
-
-  set() {
-    if (this.myItem.key) {
-      let added = false;
-
-      for (let i = 0; i < this.addedKeys.length; i++) {
-        if (this.addedKeys[i] == this.myItem.key) added = true;
-      }
-
-      if (added == false) {
-        console.log("Adding key", this.myItem.key);
-        this.addedKeys.push(this.myItem.key);
-        this.delKey = this.myItem.key;
-        this.local.set(this.myItem.key, this.myItem.value );
-        this.localStorageDemo = JSON.stringify(window.localStorage, null, 2);
-      }
-    }
-  }
-
-  remove() {
-    this.local.remove(this.delKey);
-    this.localStorageDemo = JSON.stringify(window.localStorage, null, 2);
-
-    let index = this.addedKeys.indexOf(this.delKey);
-    if (index > -1) {
-      this.addedKeys.splice(index, 1);
-    }
-  }
-}
-
-
-@Component({
-  template: '<ion-nav [root]="root"></ion-nav>',
-  pipes: [CleanLocalDataPipe]
-})
-class ApiDemoApp {
-  root = MainPage;
-}
-
-ionicBootstrap(ApiDemoApp);

demos/local-storage/main.html

@@ -1,63 +0,0 @@
-<ion-toolbar>
-  <ion-title>Local Storage</ion-title>
-</ion-toolbar>
-
-
-<ion-content class="local-storage-demo outer-content">
-
-  <ion-list no-margin>
-    <ion-list-header>Add to Local Storage</ion-list-header>
-
-    <ion-item>
-      <ion-label>Key</ion-label>
-      <ion-select [(ngModel)]="myItem.key">
-        <ion-option *ngFor="let key of keys" [value]="key">
-          {{ key }}
-        </ion-option>
-      </ion-select>
-    </ion-item>
-
-    <ion-item>
-      <ion-label>Value</ion-label>
-      <ion-select [(ngModel)]="myItem.value">
-        <ion-option *ngFor="let value of values" [value]="value">
-          {{ value }}
-        </ion-option>
-      </ion-select>
-    </ion-item>
-
-  </ion-list>
-
-  <div padding>
-    <button block secondary (click)="set()">
-      <ion-icon name="add"></ion-icon>
-      Add
-    </button>
-  </div>
-
-  <ion-list no-margin>
-    <ion-list-header>Delete from Local Storage</ion-list-header>
-
-    <ion-item>
-      <ion-label>Key</ion-label>
-      <ion-select [(ngModel)]="delKey">
-        <ion-option checked>Select a Key</ion-option>
-        <ion-option *ngFor="let key of addedKeys" [value]="key">
-          {{ key }}
-        </ion-option>
-      </ion-select>
-    </ion-item>
-  </ion-list>
-
-  <div padding>
-    <button block danger (click)="remove()">
-      <ion-icon name="remove"></ion-icon>
-      Delete
-    </button>
-  </div>
-
-  <div padding>
-    <h5>Local Storage:</h5>
-    <pre>local: {{ localStorageDemo | cleanLocalData }}</pre>
-  </div>
-</ion-content>

demos/menu/page1.html

@@ -1,23 +0,0 @@
-<ion-navbar *navbar>
-  <button [menuToggle]="activeMenu">
-    <ion-icon name="menu"></ion-icon>
-  </button>
-  <ion-title>
-    Menu
-  </ion-title>
-</ion-navbar>
-
-
-<ion-content padding>
-
-  <h4>Active Menu: <b primary>{{ (activeMenu == 'menu1') ? 'Menu 1' : 'Menu 2' }}</b></h4>
-
-  <p>This page has two menus with different id's, but only one is active at a time.</p>
-
-  <button block secondary (click)="menu1Active()">Make Menu 1 Active</button>
-
-  <button block danger (click)="menu2Active()">Make Menu 2 Active</button>
-
-  <button block [menuToggle]="activeMenu">Toggle Menu</button>
-
-</ion-content>

demos/modal/app.html

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

demos/modal/index.ts

@@ -1,83 +0,0 @@
-import {Component} from '@angular/core';
-import {ionicBootstrap, IonicApp, Config, Platform, ViewController} from 'ionic-angular';
-import {Modal, NavController, NavParams, Animation} from 'ionic-angular';
-
-
-@Component({
-  templateUrl: 'main.html'
-})
-export class ModalFirstPage {
-  myParam = '';
-
-  constructor(public nav: NavController) {}
-
-  openBasicModal() {
-    let myModal = Modal.create(ModalContentPage);
-    this.nav.present(myModal);
-  }
-  openModalWithParams() {
-    let myModal = Modal.create(ModalContentPage, { 'myParam': this.myParam });
-    this.nav.present(myModal);
-  }
-  openCustomAnimationModal() {
-    let myModal = Modal.create(ModalContentPage, {
-      animation: 'my-fade-in',
-    });
-    this.nav.present(myModal);
-  }
-}
-
-@Component({
-  templateUrl: "modal-content.html"
-})
-export class ModalContentPage {
-  myParam: string;
-
-  constructor(
-    public nav: NavController,
-    public viewCtrl: ViewController,
-    params: NavParams
-  ) {
-      this.myParam = params.get('myParam');
-  }
-
-  dismiss() {
-    this.viewCtrl.dismiss();
-  }
-}
-
-
-@Component({
-  templateUrl: 'app.html'
-})
-class ApiDemoApp {
-  root = ModalFirstPage;
-}
-
-ionicBootstrap(ApiDemoApp);
-
-
-class FadeIn extends Animation {
-  constructor(enteringView, leavingView) {
-    super(enteringView.pageRef());
-    this
-      .easing('ease')
-      .duration(1000)
-      .fromTo('translateY', '0%', '0%')
-      .fadeIn()
-      .before.addClass('show-page');
-  }
-}
-Animation.register('my-fade-in', FadeIn);
-
-class FadeOut extends Animation {
-  constructor(enteringView, leavingView) {
-    super(leavingView.pageRef());
-    this
-      .easing('ease')
-      .duration(500)
-      .fadeOut()
-      .before.addClass('show-page');
-  }
-}
-Animation.register('my-fade-out', FadeOut);

demos/modal/modal-content.html

@@ -1,21 +0,0 @@
-<ion-navbar *navbar>
-  <ion-buttons start>
-    <button (click)="dismiss()">Close</button>
-  </ion-buttons>
-  <ion-title>Modals</ion-title>
-</ion-navbar>
-
-<ion-content padding>
-  <div [hidden]="!myParam">
-    <h5>Parameters passed:</h5>
-
-    <pre style="background-color: #f8f8f8">selections: [
-  {{myParam}}
-]</pre>
-
-  </div>
-  <div [hidden]="myParam">
-    <p>No parameters passed.</p>
-  </div>
-  <button danger full (click)="dismiss()">Close Modal</button>
-</ion-content>

demos/nav-params/app.html

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

demos/nav-params/index.ts

@@ -1,38 +0,0 @@
-import {Component} from '@angular/core';
-import {ionicBootstrap, NavController, NavParams} from 'ionic-angular';
-
-
-@Component({
-  templateUrl: 'main.html'
-})
-export class InitialPage {
-  myParam = '';
-
-  constructor(public nav: NavController) {}
-
-  pushParams() {
-    this.nav.push(Page2, { 'myParam': this.myParam });
-  }
-}
-
-
-@Component({
-  templateUrl: "page-2.html"
-})
-export class Page2 {
-  myParam: string;
-
-  constructor(public nav: NavController, params: NavParams) {
-    this.myParam = params.get('myParam');
-  }
-}
-
-
-@Component({
-  templateUrl: 'app.html'
-})
-class ApiDemoApp {
-  root = InitialPage;
-}
-
-ionicBootstrap(ApiDemoApp);

demos/navbar/index.ts

@@ -1,15 +0,0 @@
-import {Component} from '@angular/core';
-import {ionicBootstrap} from 'ionic-angular';
-
-
-// Use the toolbar demo but pass in the demo name to change the title
-@Component({
-  templateUrl: '../toolbar/main.html'
-})
-class ApiDemoApp {
-  demo = "Navbar";
-  favorites = "recent";
-  apps = "free";
-}
-
-ionicBootstrap(ApiDemoApp);

demos/navigation/app.html

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

demos/navigation/index.ts

@@ -1,47 +0,0 @@
-import {Component} from '@angular/core';
-import {ionicBootstrap, Config, Platform, NavController, NavParams} from 'ionic-angular';
-
-var PAGE_NUM = 2;
-
-
-@Component({
-  templateUrl: 'main.html'
-})
-export class InitialPage {
-  constructor(public nav: NavController) {}
-
-  push() {
-    this.nav.push(Page2);
-  }
-}
-
-@Component({
-  templateUrl: "page-2.html"
-})
-export class Page2 {
-  pageNum = PAGE_NUM;
-
-  constructor(private nav: NavController) {}
-
-  push() {
-    PAGE_NUM++;
-    this.nav.push(Page2);
-  }
-
-  pop() {
-    if (PAGE_NUM > 2) {
-      PAGE_NUM--;
-    }
-    this.nav.pop();
-  }
-}
-
-
-@Component({
-  templateUrl: 'app.html'
-})
-class ApiDemoApp {
-  root = InitialPage;
-}
-
-ionicBootstrap(ApiDemoApp);

demos/navigation/main.html

@@ -1,7 +0,0 @@
-<ion-navbar *navbar>
-  <ion-title>Navigation</ion-title>
-</ion-navbar>
-
-<ion-content padding>
-  <button block (click)="push()">Push New Page</button>
-</ion-content>

demos/navigation/page-2.html

@@ -1,8 +0,0 @@
-<ion-navbar *navbar>
-  <ion-title>Page {{pageNum}}</ion-title>
-</ion-navbar>
-
-<ion-content padding>
-  <button block (click)="push()">Push Another Page</button>
-  <button secondary block (click)="pop()">Pop This Page</button>
-</ion-content>

demos/output.ios.scss

@@ -1,36 +0,0 @@
-$font-path: "../fonts";
-$roboto-font-path: "../fonts";
-
-// http://ionicframework.com/docs/v2/theming/
-
-
-// App Shared Variables
-// --------------------------------------------------
-// To customize the look and feel of this app, you can override
-// the Sass variables found in Ionic's source scss files. Setting
-// variables before Ionic's Sass will use these variables rather than
-// Ionic's default Sass variable values. App Shared Sass imports belong
-// in the app.core.scss file and not this file. Sass variables specific
-// to the mode belong in either the app.ios.scss or app.md.scss files.
-
-
-// App Shared Color Variables
-// --------------------------------------------------
-// It's highly recommended to change the default colors
-// to match your app's branding. Ionic uses a Sass map of
-// colors so you can add, rename and remove colors as needed.
-// The "primary" color is the only required color in the map.
-// Both iOS and MD colors can be further customized if colors
-// are different per mode.
-
-$colors: (
-  primary:    #387ef5,
-  secondary:  #32db64,
-  danger:     #f53d3d,
-  light:      #f4f4f4,
-  dark:       #222,
-  vibrant:    rebeccapurple,
-  bright:     #FFC125
-);
-
-@import "../src/ionic.ios";

demos/output.md.scss

@@ -1,36 +0,0 @@
-$font-path: "../fonts";
-$roboto-font-path: "../fonts";
-
-// http://ionicframework.com/docs/v2/theming/
-
-
-// App Shared Variables
-// --------------------------------------------------
-// To customize the look and feel of this app, you can override
-// the Sass variables found in Ionic's source scss files. Setting
-// variables before Ionic's Sass will use these variables rather than
-// Ionic's default Sass variable values. App Shared Sass imports belong
-// in the app.core.scss file and not this file. Sass variables specific
-// to the mode belong in either the app.ios.scss or app.md.scss files.
-
-
-// App Shared Color Variables
-// --------------------------------------------------
-// It's highly recommended to change the default colors
-// to match your app's branding. Ionic uses a Sass map of
-// colors so you can add, rename and remove colors as needed.
-// The "primary" color is the only required color in the map.
-// Both iOS and MD colors can be further customized if colors
-// are different per mode.
-
-$colors: (
-  primary:    #387ef5,
-  secondary:  #32db64,
-  danger:     #f53d3d,
-  light:      #f4f4f4,
-  dark:       #222,
-  vibrant:    rebeccapurple,
-  bright:     #FFC125
-);
-
-@import "../src/ionic.md";

demos/output.wp.scss

@@ -1,36 +0,0 @@
-$font-path: "../fonts";
-$roboto-font-path: "../fonts";
-
-// http://ionicframework.com/docs/v2/theming/
-
-
-// App Shared Variables
-// --------------------------------------------------
-// To customize the look and feel of this app, you can override
-// the Sass variables found in Ionic's source scss files. Setting
-// variables before Ionic's Sass will use these variables rather than
-// Ionic's default Sass variable values. App Shared Sass imports belong
-// in the app.core.scss file and not this file. Sass variables specific
-// to the mode belong in either the app.ios.scss or app.md.scss files.
-
-
-// App Shared Color Variables
-// --------------------------------------------------
-// It's highly recommended to change the default colors
-// to match your app's branding. Ionic uses a Sass map of
-// colors so you can add, rename and remove colors as needed.
-// The "primary" color is the only required color in the map.
-// Both iOS and MD colors can be further customized if colors
-// are different per mode.
-
-$colors: (
-  primary:    #387ef5,
-  secondary:  #32db64,
-  danger:     #f53d3d,
-  light:      #f4f4f4,
-  dark:       #222,
-  vibrant:    rebeccapurple,
-  bright:     #FFC125
-);
-
-@import "../src/ionic.wp";

demos/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "ionic-demos",
+  "private": true,
+  "version": "1.0.0",
+  "description": "ionic demos",
+  "author": "Ionic Team <hi@ionic.io> (http://ionic.io)",
+  "license": "MIT",
+  "dependencies": {
+    "@ionic/storage": "^1.0.3",
+    "ionic-angular": "nightly",
+    "ionicons": "^3.0.0"
+  },
+  "devDependencies": {
+    "typescript": "^2.0.3"
+  }
+}

demos/platform/index.ts

@@ -1,20 +0,0 @@
-import {Component} from '@angular/core';
-import {ionicBootstrap, Platform} from 'ionic-angular';
-
-
-@Component({
-  templateUrl: 'main.html'
-})
-class ApiDemoApp {
-  isIos: boolean;
-  isAndroid: boolean;
-  isWindows: boolean;
-
-  constructor(platform: Platform) {
-    this.isIos = platform.is('ios');
-    this.isAndroid = platform.is('android');
-    this.isWindows = platform.is('windows');
-  }
-}
-
-ionicBootstrap(ApiDemoApp);

demos/radio/index.ts

@@ -1,12 +0,0 @@
-import {Component} from '@angular/core';
-import {ionicBootstrap} from 'ionic-angular';
-
-
-@Component({
-  templateUrl: 'main.html'
-})
-class ApiDemoApp {
-  isDisabled = true;
-}
-
-ionicBootstrap(ApiDemoApp);

demos/range/index.ts

@@ -1,18 +0,0 @@
-import {Component} from '@angular/core';
-import {ionicBootstrap} from 'ionic-angular';
-
-@Component({
-  templateUrl: 'main.html'
-})
-class ApiDemoApp {
-  brightness: number = 20;
-  saturation: number = 0;
-  warmth: number = 1300;
-  structure: any = {lower: 33, upper: 60};
-
-  onChange(ev) {
-    console.log("Changed", ev);
-  }
-}
-
-ionicBootstrap(ApiDemoApp);

demos/scroll/index.ts

@@ -1,10 +0,0 @@
-import {Component} from '@angular/core';
-import {ionicBootstrap} from 'ionic-angular';
-
-
-@Component({
-  templateUrl: 'main.html'
-})
-class ApiDemoApp {}
-
-ionicBootstrap(ApiDemoApp);

demos/scrollbar-fix.css

@@ -1,6 +0,0 @@
-body.has-scrollbar scroll-content {
-  margin-right: -15px;
-}
-body.has-scrollbar ion-menu scroll-content {
-  margin-right: 0;
-}

demos/scrollbar-fix.js

@@ -1,45 +0,0 @@
-(function(){
-
-  function hasScrollbar() {
-
-    if (typeof window.top.innerWidth === 'number') {
-        return window.top.innerWidth > window.top.document.documentElement.clientWidth;  
-    }
-
-    // rootElem for quirksmode
-    var rootElem = window.top.document.documentElement || window.top.document.body;
-
-    // Check overflow style property on body for fauxscrollbars
-    var overflowStyle;
-
-    if (typeof rootElem.currentStyle !== 'undefined') {
-        overflowStyle = rootElem.currentStyle.overflow;
-    }
-
-    overflowStyle = overflowStyle || window.top.getComputedStyle(rootElem, '').overflow;
-
-    // Also need to check the Y axis overflow
-    var overflowYStyle;
-
-    if (typeof rootElem.currentStyle !== 'undefined') {
-        overflowYStyle = rootElem.currentStyle.overflowY;
-    }
-
-    overflowYStyle = overflowYStyle || window.top.getComputedStyle(rootElem, '').overflowY;
-
-    var contentOverflows = rootElem.scrollHeight > rootElem.clientHeight;
-    var overflowShown = /^(visible|auto)$/.test(overflowStyle) || /^(visible|auto)$/.test(overflowYStyle);
-    var alwaysShowScroll = overflowStyle === 'scroll' || overflowYStyle === 'scroll';
-
-    return (contentOverflows && overflowShown) || (alwaysShowScroll)
-  }
-
-
-  if (hasScrollbar() === true) {
-    setTimeout(function() {
-      var body = document.getElementsByTagName('body')[0];
-      body.className = body.className + ' has-scrollbar';
-    }, 500);
-  }
-
-})();

demos/searchbar/index.ts

@@ -1,10 +0,0 @@
-import {Component} from '@angular/core';
-import {ionicBootstrap} from 'ionic-angular';
-
-
-@Component({
-  templateUrl: 'main.html'
-})
-class ApiDemoApp {}
-
-ionicBootstrap(ApiDemoApp);

demos/searchbar/main.html

@@ -1,41 +0,0 @@
-<ion-toolbar>
-  <ion-title>Searchbar</ion-title>
-</ion-toolbar>
-
-<ion-toolbar>
-  <ion-searchbar placeholder="Default Toolbar"></ion-searchbar>
-</ion-toolbar>
-
-<ion-toolbar primary>
-  <ion-searchbar placeholder="Primary Toolbar"></ion-searchbar>
-</ion-toolbar>
-
-<ion-toolbar secondary>
-  <ion-searchbar placeholder="Secondary Toolbar"></ion-searchbar>
-</ion-toolbar>
-
-<ion-content class="searchbar-demo">
-  <p padding-left padding-right>Searchbars can be placed in a toolbar or anywhere in the content.</p>
-
-  <ion-searchbar placeholder="Default Searchbar"></ion-searchbar>
-  <hr>
-
-  <ion-searchbar placeholder="Primary Searchbar" primary></ion-searchbar>
-  <hr>
-
-  <ion-searchbar placeholder="Secondary Searchbar" secondary></ion-searchbar>
-  <hr>
-
-  <ion-searchbar placeholder="Danger Searchbar" danger></ion-searchbar>
-
-</ion-content>
-
-<ion-toolbar danger position="bottom">
-  <ion-searchbar placeholder="Danger Toolbar"></ion-searchbar>
-</ion-toolbar>
-
-<style>
-  .searchbar-demo hr {
-    background-color: transparent;
-  }
-</style>

demos/segment/index.ts

@@ -1,23 +0,0 @@
-import {Component} from '@angular/core';
-import {ionicBootstrap} from 'ionic-angular';
-
-
-@Component({
-  templateUrl: 'main.html'
-})
-class ApiDemoApp {
-  appType = "paid";
-  safari = "links";
-  news = "local";
-  favorites = "recent";
-
-  purchased = "all";
-  mapStyle = "sat";
-  teslaModels = "X";
-
-  pet = "puppies";
-  calendar = "day";
-  proxy = "auto";
-}
-
-ionicBootstrap(ApiDemoApp);

demos/segment/main.html

@@ -1,136 +0,0 @@
-<ion-toolbar>
-  <ion-title>Segment</ion-title>
-</ion-toolbar>
-
-<ion-toolbar>
-  <ion-segment [(ngModel)]="appType">
-    <ion-segment-button value="paid">
-      Paid
-    </ion-segment-button>
-    <ion-segment-button value="free">
-      Free
-    </ion-segment-button>
-    <ion-segment-button value="top">
-      Top
-    </ion-segment-button>
-  </ion-segment>
-</ion-toolbar>
-
-<ion-toolbar>
-  <ion-segment [(ngModel)]="news" secondary>
-    <ion-segment-button value="worldwide">
-      Worldwide
-    </ion-segment-button>
-    <ion-segment-button value="local">
-      Local
-    </ion-segment-button>
-    <ion-segment-button value="headlines">
-      Headlines
-    </ion-segment-button>
-  </ion-segment>
-</ion-toolbar>
-
-<ion-toolbar>
-  <ion-segment [(ngModel)]="safari" dark class="icon-segment-demo">
-    <ion-segment-button value="bookmarks">
-      <ion-icon name="book"></ion-icon>
-    </ion-segment-button>
-    <ion-segment-button value="history">
-      <ion-icon ios="ios-glasses-outline" md="md-glasses"></ion-icon>
-    </ion-segment-button>
-    <ion-segment-button value="links">
-      <ion-icon ios="ios-at-outline" md="md-at"></ion-icon>
-    </ion-segment-button>
-  </ion-segment>
-</ion-toolbar>
-
-<ion-toolbar>
-  <ion-segment [(ngModel)]="favorites" danger>
-    <ion-segment-button value="featured">
-      Featured
-    </ion-segment-button>
-    <ion-segment-button value="recent">
-      Recent
-    </ion-segment-button>
-  </ion-segment>
-</ion-toolbar>
-
-<ion-content padding>
-  <p>Segments can be placed in a toolbar or anywhere in the content.</p>
-
-  <ion-segment [(ngModel)]="purchased" primary margin-bottom>
-    <ion-segment-button value="all">
-      All
-    </ion-segment-button>
-    <ion-segment-button value="not">
-      Not on This Phone
-    </ion-segment-button>
-  </ion-segment>
-
-  <ion-segment [(ngModel)]="mapStyle" secondary margin-bottom>
-    <ion-segment-button value="standard">
-      Standard
-    </ion-segment-button>
-    <ion-segment-button value="hybrid">
-      Hybrid
-    </ion-segment-button>
-    <ion-segment-button value="sat">
-      Satellite
-    </ion-segment-button>
-  </ion-segment>
-
-  <ion-segment [(ngModel)]="teslaModels" danger margin-bottom>
-    <ion-segment-button value="S">
-      Model S
-    </ion-segment-button>
-    <ion-segment-button value="X">
-      Model X
-    </ion-segment-button>
-    <ion-segment-button value="3">
-      Model 3
-    </ion-segment-button>
-  </ion-segment>
-
-</ion-content>
-
-<ion-toolbar position="bottom" primary>
-  <ion-segment [(ngModel)]="pet" light>
-    <ion-segment-button value="puppies">
-      Puppies
-    </ion-segment-button>
-    <ion-segment-button value="kittens">
-      Kittens
-    </ion-segment-button>
-    <ion-segment-button value="ducklings">
-      Ducklings
-    </ion-segment-button>
-  </ion-segment>
-</ion-toolbar>
-
-<ion-toolbar position="bottom" dark>
-  <ion-segment [(ngModel)]="calendar" primary>
-    <ion-segment-button value="list">
-      List
-    </ion-segment-button>
-    <ion-segment-button value="day">
-      Day
-    </ion-segment-button>
-    <ion-segment-button value="month" checked>
-      Month
-    </ion-segment-button>
-  </ion-segment>
-</ion-toolbar>
-
-<ion-toolbar position="bottom" danger>
-  <ion-segment [(ngModel)]="proxy" light>
-    <ion-segment-button value="off">
-      Off
-    </ion-segment-button>
-    <ion-segment-button value="manual">
-      Manual
-    </ion-segment-button>
-    <ion-segment-button value="auto">
-      Auto
-    </ion-segment-button>
-  </ion-segment>
-</ion-toolbar>

demos/show-when/index.ts

@@ -1,10 +0,0 @@
-import {Component} from '@angular/core';
-import {ionicBootstrap} from 'ionic-angular';
-
-
-@Component({
-  templateUrl: 'main.html'
-})
-class ApiDemoApp {}
-
-ionicBootstrap(ApiDemoApp);

demos/slides/index.ts

@@ -1,10 +0,0 @@
-import {Component} from '@angular/core';
-import {ionicBootstrap} from 'ionic-angular';
-
-
-@Component({
-  templateUrl: 'main.html'
-})
-class ApiDemoApp {}
-
-ionicBootstrap(ApiDemoApp);

demos/src/action-sheet/app.component.ts

@@ -1,15 +1,14 @@
-import {Component} from '@angular/core';
-import {ionicBootstrap, ActionSheet, NavController, Platform} from 'ionic-angular';
-
+import { Component } from '@angular/core';
+import { ActionSheetController, Platform } from 'ionic-angular';
 
 @Component({
-  templateUrl: 'main.html'
+  templateUrl: 'page.html'
 })
-export class InitialPage {
-  constructor(public nav: NavController, public platform: Platform) { }
+export class ApiDemoPage {
+  constructor(public alertCtrl: ActionSheetController, public platform: Platform) { }
 
   present() {
-    let actionSheet = ActionSheet.create({
+    let actionSheet = this.alertCtrl.create({
       title: 'Albums',
       buttons: [
         {
@@ -52,16 +51,14 @@ export class InitialPage {
       ]
     });
 
-    this.nav.present(actionSheet);
+    actionSheet.present();
   }
 }
 
 
 @Component({
-  templateUrl: 'app.html'
+  template: '<ion-nav [root]="root"></ion-nav>'
 })
-class ApiDemoApp {
-  root = InitialPage;
+export class ApiDemoApp {
+  root = ApiDemoPage;
 }
-
-ionicBootstrap(ApiDemoApp);

demos/src/action-sheet/app.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { IonicApp, IonicModule } from 'ionic-angular';
+import { ApiDemoApp, ApiDemoPage } from './app.component';
+
+@NgModule({
+  declarations: [
+    ApiDemoApp,
+    ApiDemoPage
+  ],
+  imports: [
+    IonicModule.forRoot(ApiDemoApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    ApiDemoPage
+  ]
+})
+export class AppModule {}

demos/src/action-sheet/index.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html dir="ltr" lang="en">
+<head>
+  <title>Demo</title>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+  <meta name="apple-mobile-web-app-capable" content="yes">
+
+  <link href="../../css/ionic.min.css" rel="stylesheet">
+  <link href="../scrollbar-fix.css" rel="stylesheet">
+</head>
+<body>
+  <ion-app></ion-app>
+  <script src="../../polyfills/polyfills.js"></script>
+  <script src="../scrollbar-fix.js""></script>
+  <script src="./main.bundle.js"></script>
+</body>
+</html>

demos/src/action-sheet/main.ts

@@ -0,0 +1,6 @@
+import { platformBrowser } from '@angular/platform-browser';
+import { enableProdMode } from '@angular/core';
+import { AppModuleNgFactory } from './app.module.ngfactory';
+
+enableProdMode();
+platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

demos/src/action-sheet/page.html

@@ -0,0 +1,14 @@
+<ion-header>
+
+  <ion-navbar>
+    <ion-title>Action Sheet</ion-title>
+  </ion-navbar>
+
+</ion-header>
+
+
+<ion-content padding>
+
+  <button ion-button block (click)="present()">Basic Action Sheet</button>
+
+</ion-content>

demos/src/alert/app.component.ts

@@ -1,32 +1,32 @@
-import {Component} from '@angular/core';
-import {ionicBootstrap, Alert, NavController} from 'ionic-angular';
+import { Component } from '@angular/core';
+import { AlertController } from 'ionic-angular';
 
 
 @Component({
-  templateUrl: 'main.html'
+  templateUrl: 'page.html'
 })
-export class InitialPage {
+export class ApiDemoPage {
   testRadioOpen = false;
   testRadioResult: any;
   testCheckboxOpen = false;
   testCheckboxResult: any;
 
-  constructor(public nav: NavController) {}
+  constructor(public alertCtrl: AlertController) {}
 
   doAlert() {
-    let alert = Alert.create({
+    let alert = this.alertCtrl.create({
       title: 'New Friend!',
       subTitle: 'Your friend, Obi wan Kenobi, just accepted your friend request!',
       buttons: ['Ok']
     });
 
-    this.nav.present(alert);
+    alert.present();
   }
 
   doConfirm() {
-    let alert = Alert.create({
+    let alert = this.alertCtrl.create({
       title: 'Use this lightsaber?',
-      body: 'Do you agree to use this lightsaber to do good across the intergalactic galaxy?',
+      message: 'Do you agree to use this lightsaber to do good across the intergalactic galaxy?',
       buttons: [
         {
           text: 'Disagree',
@@ -43,13 +43,13 @@ export class InitialPage {
       ]
     });
 
-    this.nav.present(alert);
+    alert.present();
   }
 
   doPrompt() {
-    let alert = Alert.create({
+    let alert = this.alertCtrl.create({
       title: 'Login',
-      body: "Enter a name for this new album you're so keen on adding",
+      message: 'Enter a name for this new album you\'re so keen on adding',
       inputs: [
         {
           name: 'title',
@@ -59,24 +59,24 @@ export class InitialPage {
       buttons: [
         {
           text: 'Cancel',
-          handler: data => {
+          handler: (data: any) => {
             console.log('Cancel clicked');
           }
         },
         {
           text: 'Save',
-          handler: data => {
+          handler: (data: any) => {
             console.log('Saved clicked');
           }
         }
       ]
     });
 
-    this.nav.present(alert);
+    alert.present();
   }
 
   doRadio() {
-    let alert = Alert.create();
+    let alert = this.alertCtrl.create();
     alert.setTitle('Lightsaber color');
 
     alert.addInput({
@@ -125,18 +125,18 @@ export class InitialPage {
     alert.addButton('Cancel');
     alert.addButton({
       text: 'Ok',
-      handler: data => {
+      handler: (data: any) => {
         console.log('Radio data:', data);
         this.testRadioOpen = false;
         this.testRadioResult = data;
       }
     });
 
-    this.nav.present(alert);
+    alert.present();
   }
 
   doCheckbox() {
-    let alert = Alert.create();
+    let alert = this.alertCtrl.create();
     alert.setTitle('Which planets have you visited?');
 
     alert.addInput({
@@ -197,24 +197,22 @@ export class InitialPage {
     alert.addButton('Cancel');
     alert.addButton({
       text: 'Okay',
-      handler: data => {
+      handler: (data: any) => {
           console.log('Checkbox data:', data);
           this.testCheckboxOpen = false;
           this.testCheckboxResult = data;
       }
     });
 
-    this.nav.present(alert);
+    alert.present();
   }
 
 }
 
 
 @Component({
-  templateUrl: 'app.html'
+  template: `<ion-nav [root]="root"></ion-nav>`
 })
-class ApiDemoApp {
-  root = InitialPage;
+export class ApiDemoApp {
+  root = ApiDemoPage;
 }
-
-ionicBootstrap(ApiDemoApp);

demos/src/alert/app.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { IonicApp, IonicModule } from 'ionic-angular';
+import { ApiDemoApp, ApiDemoPage } from './app.component';
+
+@NgModule({
+  declarations: [
+    ApiDemoApp,
+    ApiDemoPage
+  ],
+  imports: [
+    IonicModule.forRoot(ApiDemoApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    ApiDemoPage
+  ]
+})
+export class AppModule {}

demos/src/alert/index.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html dir="ltr" lang="en">
+<head>
+  <title>Demo</title>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+  <meta name="apple-mobile-web-app-capable" content="yes">
+
+  <link href="../../css/ionic.min.css" rel="stylesheet">
+  <link href="../scrollbar-fix.css" rel="stylesheet">
+</head>
+<body>
+  <ion-app></ion-app>
+  <script src="../../polyfills/polyfills.js"></script>
+  <script src="../scrollbar-fix.js""></script>
+  <script src="./main.bundle.js"></script>
+</body>
+</html>

demos/src/alert/main.ts

@@ -0,0 +1,6 @@
+import { platformBrowser } from '@angular/platform-browser';
+import { enableProdMode } from '@angular/core';
+import { AppModuleNgFactory } from './app.module.ngfactory';
+
+enableProdMode();
+platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

demos/src/alert/page.html

@@ -0,0 +1,18 @@
+<ion-header>
+
+  <ion-navbar>
+    <ion-title>Alert</ion-title>
+  </ion-navbar>
+
+</ion-header>
+
+
+<ion-content padding>
+
+  <button ion-button block (click)="doAlert()">Basic Alert</button>
+  <button ion-button color="light" block (click)="doConfirm()">Confirm Alert</button>
+  <button ion-button color="secondary" block (click)="doPrompt()">Prompt Alert</button>
+  <button ion-button color="danger" block (click)="doRadio()">Radio Alert</button>
+  <button ion-button color="dark" block (click)="doCheckbox()">Checkbox Alert</button>
+
+</ion-content>

demos/src/button/app.component.ts

@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+
+@Component({
+  templateUrl: 'page.html'
+})
+export class ApiDemoPage {}
+
+
+@Component({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+export class ApiDemoApp {
+  root = ApiDemoPage;
+}

demos/src/button/app.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { IonicApp, IonicModule } from 'ionic-angular';
+import { ApiDemoApp, ApiDemoPage } from './app.component';
+
+@NgModule({
+  declarations: [
+    ApiDemoApp,
+    ApiDemoPage
+  ],
+  imports: [
+    IonicModule.forRoot(ApiDemoApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    ApiDemoPage
+  ]
+})
+export class AppModule {}

demos/src/button/index.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html dir="ltr" lang="en">
+<head>
+  <title>Demo</title>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+  <meta name="apple-mobile-web-app-capable" content="yes">
+
+  <link href="../../css/ionic.min.css" rel="stylesheet">
+  <link href="../scrollbar-fix.css" rel="stylesheet">
+</head>
+<body>
+  <ion-app></ion-app>
+  <script src="../../polyfills/polyfills.js"></script>
+  <script src="../scrollbar-fix.js""></script>
+  <script src="./main.bundle.js"></script>
+</body>
+</html>

demos/src/button/main.ts

@@ -0,0 +1,6 @@
+import { platformBrowser } from '@angular/platform-browser';
+import { enableProdMode } from '@angular/core';
+import { AppModuleNgFactory } from './app.module.ngfactory';
+
+enableProdMode();
+platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

demos/src/button/page.html

@@ -0,0 +1,68 @@
+<ion-header>
+
+  <ion-navbar>
+    <ion-title>Button</ion-title>
+  </ion-navbar>
+
+</ion-header>
+
+
+<ion-content text-center>
+
+  <h4>Colors</h4>
+
+  <button ion-button>Default</button>
+
+  <button ion-button color="secondary">Secondary</button>
+
+  <button ion-button color="danger">Danger</button>
+
+  <button ion-button color="light">Light</button>
+
+  <button ion-button color="dark">Dark</button>
+
+  <h4>Shapes</h4>
+
+  <button ion-button full>Full Button</button>
+
+  <button ion-button block>Block Button</button>
+
+  <button ion-button round>Round Button</button>
+
+  <button ion-button fab style="position: relative;">FAB</button>
+
+  <h4>Outlines</h4>
+
+  <button ion-button color="secondary" full outline>Outline + Full</button>
+
+  <button ion-button color="secondary" block outline>Outline + Block</button>
+
+  <button ion-button color="secondary" round outline>Outline + Round</button>
+
+  <button ion-button color="secondary" fab outline style="position: relative;">FAB</button>
+
+  <h4>Icons</h4>
+
+  <button ion-button icon-left color="dark">
+    <ion-icon name="star"></ion-icon>
+    Left Icon
+  </button>
+
+  <button ion-button icon-right color="dark">
+    Right Icon
+    <ion-icon name="star"></ion-icon>
+  </button>
+
+  <button ion-button icon-only color="dark">
+    <ion-icon name="star"></ion-icon>
+  </button>
+
+  <h4>Sizes</h4>
+
+  <button ion-button color="light" large>Large</button>
+
+  <button ion-button color="light">Default</button>
+
+  <button ion-button color="light" small>Small</button>
+
+</ion-content>

demos/src/checkbox/app.component.ts

@@ -0,0 +1,32 @@
+import { Component } from '@angular/core';
+
+
+@Component({
+  templateUrl: 'page.html'
+})
+export class ApiDemoPage {
+
+  data = {
+    jon: true,
+    daenerys: true,
+    arya: false,
+    tyroin: false,
+    sansa: true,
+    khal: false,
+    cersei: true,
+    stannis: true,
+    petyr: false,
+    hodor: true,
+    catelyn: true,
+    bronn: false
+  };
+
+}
+
+
+@Component({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+export class ApiDemoApp {
+  root = ApiDemoPage;
+}

demos/src/checkbox/app.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { IonicApp, IonicModule } from 'ionic-angular';
+import { ApiDemoApp, ApiDemoPage } from './app.component';
+
+@NgModule({
+  declarations: [
+    ApiDemoApp,
+    ApiDemoPage
+  ],
+  imports: [
+    IonicModule.forRoot(ApiDemoApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    ApiDemoPage
+  ]
+})
+export class AppModule {}

demos/src/checkbox/index.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html dir="ltr" lang="en">
+<head>
+  <title>Demo</title>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+  <meta name="apple-mobile-web-app-capable" content="yes">
+
+  <link href="../../css/ionic.min.css" rel="stylesheet">
+  <link href="../scrollbar-fix.css" rel="stylesheet">
+</head>
+<body>
+  <ion-app></ion-app>
+  <script src="../../polyfills/polyfills.js"></script>
+  <script src="../scrollbar-fix.js""></script>
+  <script src="./main.bundle.js"></script>
+</body>
+</html>

demos/src/checkbox/main.ts

@@ -0,0 +1,6 @@
+import { platformBrowser } from '@angular/platform-browser';
+import { enableProdMode } from '@angular/core';
+import { AppModuleNgFactory } from './app.module.ngfactory';
+
+enableProdMode();
+platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

demos/src/checkbox/page.html

@@ -1,8 +1,14 @@
-<ion-toolbar>
-  <ion-title>Checkbox</ion-title>
-</ion-toolbar>
+<ion-header>
+
+  <ion-navbar>
+    <ion-title>Checkbox</ion-title>
+  </ion-navbar>
+
+</ion-header>
+
 
 <ion-content>
+
   <ion-list>
 
     <ion-item>
@@ -11,7 +17,7 @@
     </ion-item>
 
     <ion-item>
-      <ion-checkbox dark [(ngModel)]="data.daenerys"></ion-checkbox>
+      <ion-checkbox [(ngModel)]="data.daenerys" color="vibrant"></ion-checkbox>
       <ion-label>Daenerys Targaryen</ion-label>
     </ion-item>
 
@@ -21,12 +27,12 @@
     </ion-item>
 
     <ion-item>
-      <ion-checkbox [(ngModel)]="data.tyroin" secondary></ion-checkbox>
+      <ion-checkbox [(ngModel)]="data.tyroin" color="secondary"></ion-checkbox>
       <ion-label>Tyrion Lannister</ion-label>
     </ion-item>
 
     <ion-item>
-      <ion-checkbox [(ngModel)]="data.sansa" danger></ion-checkbox>
+      <ion-checkbox [(ngModel)]="data.sansa" color="danger"></ion-checkbox>
       <ion-label>Sansa Stark</ion-label>
     </ion-item>
 
@@ -36,7 +42,7 @@
     </ion-item>
 
     <ion-item>
-      <ion-checkbox [(ngModel)]="data.cersei" dark></ion-checkbox>
+      <ion-checkbox [(ngModel)]="data.cersei" color="dark"></ion-checkbox>
       <ion-label>Cersei Lannister</ion-label>
     </ion-item>
 
@@ -51,17 +57,17 @@
     </ion-item>
 
     <ion-item>
-      <ion-checkbox [(ngModel)]="data.hodor" dark></ion-checkbox>
+      <ion-checkbox [(ngModel)]="data.hodor" color="dark"></ion-checkbox>
       <ion-label>Hodor</ion-label>
     </ion-item>
 
     <ion-item>
-      <ion-checkbox [(ngModel)]="data.catelyn" secondary></ion-checkbox>
+      <ion-checkbox [(ngModel)]="data.catelyn" color="secondary"></ion-checkbox>
       <ion-label>Catelyn Stark</ion-label>
     </ion-item>
 
     <ion-item>
-      <ion-checkbox [(ngModel)]="data.bronn" royal></ion-checkbox>
+      <ion-checkbox [(ngModel)]="data.bronn" color="vibrant"></ion-checkbox>
       <ion-label>Bronn</ion-label>
     </ion-item>
 

demos/src/chip/app.component.ts

@@ -0,0 +1,18 @@
+import { Component } from '@angular/core';
+
+@Component({
+  templateUrl: 'page.html'
+})
+export class ApiDemoPage {
+  delete(chip: Element) {
+    chip.remove();
+  }
+}
+
+@Component({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+export class ApiDemoApp {
+  root = ApiDemoPage;
+}
+

demos/src/chip/app.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { IonicApp, IonicModule } from 'ionic-angular';
+import { ApiDemoApp, ApiDemoPage } from './app.component';
+
+@NgModule({
+  declarations: [
+    ApiDemoApp,
+    ApiDemoPage
+  ],
+  imports: [
+    IonicModule.forRoot(ApiDemoApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    ApiDemoPage
+  ]
+})
+export class AppModule {}

demos/src/chip/index.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html dir="ltr" lang="en">
+<head>
+  <title>Demo</title>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+  <meta name="apple-mobile-web-app-capable" content="yes">
+
+  <link href="../../css/ionic.min.css" rel="stylesheet">
+  <link href="../scrollbar-fix.css" rel="stylesheet">
+</head>
+<body>
+  <ion-app></ion-app>
+  <script src="../../polyfills/polyfills.js"></script>
+  <script src="../scrollbar-fix.js""></script>
+  <script src="./main.bundle.js"></script>
+</body>
+</html>

demos/src/chip/main.ts

@@ -0,0 +1,6 @@
+import { platformBrowser } from '@angular/platform-browser';
+import { enableProdMode } from '@angular/core';
+import { AppModuleNgFactory } from './app.module.ngfactory';
+
+enableProdMode();
+platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

demos/src/chip/page.html

@@ -0,0 +1,96 @@
+<ion-header>
+
+  <ion-toolbar>
+    <ion-title>Chips</ion-title>
+  </ion-toolbar>
+
+</ion-header>
+
+
+<ion-content padding style="text-align:center">
+
+  <h2>Text Chips</h2>
+
+  <ion-chip>
+    <ion-label>Default</ion-label>
+  </ion-chip>
+
+  <ion-chip>
+    <ion-label color="secondary">Secondary Label</ion-label>
+  </ion-chip>
+
+  <ion-chip>
+    <ion-label>Another With Longer Text</ion-label>
+  </ion-chip>
+
+  <h2>Color Chips</h2>
+
+  <ion-chip color="primary">
+    <ion-icon name="heart" color="dark"></ion-icon>
+    <ion-label>Primary</ion-label>
+  </ion-chip>
+
+  <ion-chip color="secondary">
+    <ion-label color="dark">Secondary w/ Dark label</ion-label>
+  </ion-chip>
+
+  <ion-chip color="danger">
+    <ion-label>Danger</ion-label>
+  </ion-chip>
+
+  <h2>Icon Chips</h2>
+
+  <ion-chip>
+    <ion-icon name="pin"></ion-icon>
+   <ion-label>Default</ion-label>
+  </ion-chip>
+
+  <ion-chip>
+    <ion-label>Secondary</ion-label>
+    <ion-icon name="pin" color="secondary"></ion-icon>
+  </ion-chip>
+
+  <h2>Avatar Chips</h2>
+
+  <ion-chip>
+    <ion-avatar>
+      <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
+    </ion-avatar>
+    <ion-label>Default</ion-label>
+  </ion-chip>
+
+  <ion-chip>
+    <ion-label>Right Avatar</ion-label>
+    <ion-avatar>
+      <img src="https://gravatar.com/avatar/d249a09fecac4da036d26c5002af2c94?d=identicon&f=y">
+    </ion-avatar>
+  </ion-chip>
+
+  <h2>Delete Chips</h2>
+
+  <ion-chip #chip1>
+    <ion-label>Default</ion-label>
+    <button ion-button clear (click)="delete(chip1)">
+      <ion-icon name="close-circle"></ion-icon>
+    </button>
+  </ion-chip>
+
+  <ion-chip #chip2>
+    <ion-icon name="pin" color="primary"></ion-icon>
+    <ion-label>With Icon</ion-label>
+    <button ion-button clear (click)="delete(chip2)">
+      <ion-icon name="close-circle"></ion-icon>
+    </button>
+  </ion-chip>
+
+  <ion-chip #chip3>
+    <ion-avatar>
+      <img src="https://gravatar.com/avatar/83b4748bf7e821165ecccd4c090d96e1?d=identicon&f=y">
+    </ion-avatar>
+    <ion-label>With Avatar</ion-label>
+    <button ion-button clear color="dark" (click)="delete(chip3)">
+      <ion-icon name="close-circle"></ion-icon>
+    </button>
+  </ion-chip>
+
+</ion-content>