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

fixes #8249

.github/CONTRIBUTING.md

@@ -1,40 +1,140 @@
+# Contributing
 
-### Creating an Issue
-
-If you have a question on how something works, or its expected functionality, you might want to visit the [Ionic Forum](http://forum.ionicframework.com/) first.
-
-If you think you have found a bug, or have a new feature idea, please start by making sure it hasn't already been [reported](https://github.com/driftyco/ionic/issues?state=open). You can search through existing issues to see if someone's reported one similar to yours.
-
-If not, then [create a codepen.io](http://codepen.io/ionic/public-list) that demonstrates the problem (try to use as little code as possible: the more minimalist, the faster we can debug it). Also, please do not group multiple topics into one issue, but instead each should be its own issue.
-
-Next, [create a new issue](https://github.com/driftyco/ionic/issues/new) that thoroughly explains the problem, how to reproduce the issue, and provide any additional information such as code examples and error logs.
+Thanks for your interest in contributing to the Ionic Framework! :tada:
 
 
-### Issue Etiquette Guidelines
+## Contributing Etiquette
 
-Poor  attitude, ranting, name-calling, bullying, being a jerk, complaining, or spamming are fruitless and unacceptable. Issues that violate the open source spirit of this community, or  any of the guidelines listed here, may result in your Issue being deleted or reposted to our Forum, a better place for debate and discussion. If you wish to contribute, either make your response respectful or do not bother to respond. You’ll find it’s pretty ineffective.
-
-Simply put: be respectful and act like an adult. Critiques are better made on the Forum. If you can’t do that, this isn’t a community  for you.
+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.
 
 
-### Pull Request Guidelines
+## Creating an Issue
 
-When in doubt, keep your pull requests small. To give a PR the best chance of getting accepted, do not bundle more than one "feature" or bug fix per PR. Doing so makes it very hard to accept it if one of the fixes has issues.
+If you have a question about using the framework, please ask on the [Ionic Forum](http://forum.ionicframework.com/) or in the [Ionic Worldwide Slack](http://ionicworldwide.herokuapp.com/) group.
 
-It's always best to create two smaller PRs than one big one.
+If you think you have found a bug, or have a new feature idea, please start by making sure it hasn't already been [reported](https://github.com/driftyco/ionic/issues?utf8=%E2%9C%93&q=is%3Aissue). You can search through existing issues to see if there is a similar one reported. Include closed issues as it may have been closed with a solution.
 
-### Style
+Next, [create a new issue](https://github.com/driftyco/ionic/issues/new) that thoroughly explains the problem. Please fill out the populated issue form before submitting the issue.
 
-Always use two spaces, no tabs. This goes for any HTML, CSS, or Javascript.
 
-### License
+## Creating a Pull Request
+
+We appreciate you taking the time to contribute! Before submitting a pull request, we ask that you please [create an issue](#creating-an-issue) that explains the bug or feature request and let us know that you plan on creating a pull request for it. If an issue already exists, please comment on that issue letting us know you would like to submit a pull request for it. This helps us to keep track of the pull request and make sure there isn't duplicated effort.
+
+Looking for an issue to fix? Make sure to look through our issues with the [help wanted](https://github.com/driftyco/ionic/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22) label!
+
+### Setup
+
+1. Fork the repo.
+2. Clone your fork.
+3. Make a branch for your change.
+4. Run `npm install` (make sure you have [node](https://nodejs.org/en/) and [npm](http://blog.npmjs.org/post/85484771375/how-to-install-npm) installed first)
+
+
+### Modifying Components
+
+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).
+2. After any changes to the Sass files run the [Sass Linter](https://github.com/brigade/scss-lint), and fix any linter errors:
+ - Requires [Ruby](https://www.ruby-lang.org/en/documentation/installation/). **Skip this step entirely if you are unable to install Ruby.**
+ - Install the linter: `gem install scss_lint`
+ - Make sure to run the linter at the root of the repository.
+ - To check all component Sass files: `scss-lint ionic/**/**/*.scss`
+ - To check a specific Sass file: `scss-lint src/components/toolbar/toolbar.ios.scss`
+
+
+#### Viewing Changes
+
+1. Run the gulp watch task for e2e tests: `gulp watch.e2e`
+2. Launch your browser and navigate to `http://localhost:8000/dist/e2e`
+3. From here, navigate to the component you are changing.
+4. Any changes to the e2e tests in the `test/` directory will show here.
+5. If your changes look good, you're ready to [commit](#committing)!
+
+
+#### Adding Documentation
+
+1. To add or modify API Documentation for a component, it should be added/changed in the component's TypeScript (`*.ts`) file, prior to the Class definition. For example, `Badge` looks similar to this:
+
+  ```
+  /**
+    * @name Badge
+    * @module ionic
+    * @description
+    * Badges are simple components in Ionic containing numbers or text.
+    *
+    * @see {@link /docs/v2/components/#badges Badges Component Docs}
+    * @demo /docs/v2/demos/badge/
+  **/
+  ```
+
+  where `@name` is the Class name, `@description` is the description displayed on the documentation page, `@see` links to any related pages, and `@demo` links to the API demo located in the `demos` folder.
+2. In order to run API documentation locally, you will need to clone the `ionic-site` repo as a sibling to the `ionic` repo and then run it: https://github.com/driftyco/ionic-site#local-build
+3. Then, run `gulp docs` in the `ionic` repo every time you make a change and the site will update.
+4. If the change affects the component documentation, create an issue on the `ionic-site` repo: https://github.com/driftyco/ionic-site/issues
+
+
+#### Adding Demos
+
+1. Create or modify the demo in the `demos/` folder.
+2. If it is new, link to the demo in the component's TypeScript (`*.ts`) file (under `src/components`) by adding a link to it in the documentation using `@demo`, for example:
+
+  ```
+  /**
+    * @name 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
+
+
+## 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
 
 By contributing your code to the driftyco/ionic GitHub Repository, you agree to license your contribution under the MIT license.
-
-## Ionic 1.x
-
-Please read the contributing guide on the ionic website: http://ionicframework.com/contribute/
-
-## Ionic 2.x
-
-See the Ionic 2 [CONTRIBUTING](https://github.com/driftyco/ionic/blob/2.0/CONTRIBUTING.md) file.

.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'
 
 

CHANGELOG.md

@@ -1,3 +1,925 @@
+<a name="2.0.0-rc.0"></a>
+# [2.0.0-rc.0](https://github.com/driftyco/ionic/compare/v2.0.0-beta.11...v2.0.0-rc.0) (2016-09-28)
+
+RC0 requires changes to the structure of your app. To get started updating your app see the [upgrade steps](#steps-to-upgrade-to-rc0) section below.
+
+### New Features
+* Ionic 2 API finalized for `2.0.0` release
+* Angular 2.0.0 (final!)
+* ionViewCanEnter / CanLeave lifecycle events
+* FAB Button lists
+* Ahead of Time (AoT) compiler ready
+* Components can now individually set a mode, which means an app can mix and match iOS / Material Design / Windows Platform modes if that’s desired.
+* Typescript 2.0
+* @types support for third-party libraries
+* Move away from `gulp` to `@ionic/app-scripts`
+* Use Rollup for bundling instead of `browserify` or `webpack`
+
+### BREAKING CHANGES
+
+* Angular upgrade to [2.0.0](https://angular.io/docs/ts/latest/cookbook/rc4-to-rc5.html)
+
+* [Renamed Lifecycle events](#lifecycle-events-renamed).
+
+* Storage has been removed from ionic-angular and into a separate module, @ionic/storage.
+Starters have been updated to add this, make sure to add it to your package.json if you’re using the storage system. See more [details here](#storage).
+
+* Nav transitions are queued. For more info on what this means for you see [this section](#nav-transitions).
+
+* Removed Tabs `preloadTabs` ability. This is no longer needed with the Ahead of Time (AoT) compiler.
+
+* Icons in buttons require an attribute on the parent button in order to style them.
+
+* Platform and mode CSS classes have been moved from the <body> element to the <ion-app> element.
+
+* select: Select’s `alertOptions` input has been renamed to `selectOptions`. See more [details here](#select-changes).
+
+* colors: Colors should be passed in the `color` input on components, not added
+individually as an attribute on the component. See more [details here](#component-colors).
+
+* buttons: `<button>` becomes `<button ion-button>`. See more [details here](#new-behavior-of-button) and [here](#new-behavior-of-icons-in-buttons).
+
+* Head link tags for CSS files are no longer dynamically updated, but one CSS file is imported.
+(Future build processes will narrow down the CSS file further to only include what’s used). See more [details here](#update-css-link-tags).
+
+* The `<scroll-content>` element, which is internal to `<ion-content>`, has been renamed to
+  `<div class=”scroll-content”>` since it was neither a directive nor a web component.
+
+* `<ion-fixed>` has been removed, use `<div ion-fixed>` instead.
+
+* scss: Changes to how sass/scss is imported. See more [details here](#sass-import).
+
+* typings: We have stopped using the `typings` tool and have migrated to `npm @types`. See more [details here](#typings).
+
+#### Lifecycle Events Renamed
+
+Renamed `ionViewLoaded` to `ionViewDidLoad`
+Removed `ionViewDidUnload`
+Removed `fireOtherLifecycles` from ViewController
+
+#### Nav Transitions
+
+Nav transitions are now queued. Meaning if you run:
+
+```
+navCtrl.push(Page1);
+navCtrl.push(Page2);
+```
+
+Page1 will transition in, then immediately Page2 will transition in. There can never be two transitions happening at the same time.
+
+Page transition promises can now possibly reject the returned promises. Used mainly for `ionViewCanEnter` and `ionViewCanLeave`.
+
+#### Component Colors
+
+Colors are no longer added directly to a component, they should instead be passed in the `color` attribute.
+
+For example:
+
+```
+<ion-tabs primary>
+```
+
+Becomes
+
+```
+<ion-tabs color=”primary”>
+```
+
+Or to bind an expression to color:
+
+```
+<ion-navbar [color]="barColor">
+   ...
+</ion-navbar>
+```
+
+```ts
+@Component({
+  templateUrl: 'build/pages/about/about.html'
+})
+export class AboutPage {
+  barColor: string;
+
+  constructor(private nav: NavController, platform: Platform) {
+    this.barColor = platform.is('android') ? 'primary' : 'light';
+  }
+}
+```
+
+Components with this property:
+ Badge
+ Button
+ Checkbox
+ Chip
+ FAB
+ Icon
+ Item (Item, Item Divider, List Header)
+ Label
+ Navbar
+ Radio
+ Searchbar
+ Segment
+ Spinner
+ Tabs
+ Toggle
+ Toolbar
+ Typography (headers, paragraphs, spans, etc.)
+
+**Reason for this change:**
+It was difficult to dynamically add colors to components, especially if the name of the color attribute was unknown in the template.
+This change keeps the css flat since we aren’t chaining color attributes on components and instead we assign a class to the component which includes the color’s name.
+This allows you to easily toggle a component between multiple colors.
+Speeds up performance because we are no longer reading through all of the attributes to grab the color ones.
+
+#### Select Changes
+
+Select’s `alertOptions` input has been renamed to `selectOptions`. It now allows you to pass options for either the alert or action-sheet
+interface. Refer to their documentation for the options each of them
+accept.
+
+[ActionSheet](http://ionicframework.com/docs/v2/api/components/action-sheet/ActionSheetController/#create)
+[Alert](http://ionicframework.com/docs/v2/api/components/alert/AlertController/#create)
+
+#### New Behavior of Button
+`<button>` becomes `<button ion-button>`
+`<a button>` becomes `<a ion-button>`
+`<button ion-item>` does not get the `ion-button` attribute
+Buttons inside of `<ion-item-options>` do get the `ion-button` attribute
+
+**Reason for this change:**
+It was difficult to have custom buttons since buttons automatically received the Ionic styles - the user can now take advantage of adding their own styling to a button if they want it to behave differently than the Ionic button.
+Keeping the `<a>` and `<button>` element and adding `ion-button` as an attribute gives us the ability to take advantage of the native functionality and built-in accessibility of native elements. If Ionic provided an <ion-button> we’d have to copy over all the possible attributes and events to the real nested button/link (type=submit, formnovalidate, value, autofocus, href, target, focus/blur, download, nofollow, ping, tel:86705309, etc). Additionally, ng2 does not have the “replace” directive where <ion-button> could be turned into <a ion-button>.
+Since `button` was already being used as an attribute to the `<a>` element, this is more consistent between the two.
+If a navPush or navPop directive is on an `<a ion-button>`, Ionic can automatically add the `href` attribute.
+[A few reasons why we didn’t create `<ion-button>`](https://www.youtube.com/watch?list=PLNYkxOF6rcICWx0C9LVWWVqvHlYJyqw7g&v=CZGqnp06DnI)
+
+
+references #7467
+* button: - `<button>` becomes `<button ion-button>`
+- `<a button>` becomes `<a ion-button>`
+- `<button ion-item>` does not get the `ion-button` attribute
+- Buttons inside of `<ion-item-options>` do get the `ion-button`
+attribute
+- Removed the `category` attribute, this should be passed in
+`ion-button` instead.
+- Button attributes added for icons in buttons: `icon-only`,
+`icon-left`, and `icon-right`
+
+
+#### New Behavior of Icons in Buttons
+
+Icon only buttons
+```
+<button>
+  <ion-icon name=”rainy”></ion-icon>
+</button>
+```
+
+becomes
+
+```
+<button ion-button icon-only>
+  <ion-icon name=”rainy”></ion-icon>
+</button>
+```
+Icon left of text in a button
+```
+<button>
+  <ion-icon name=”rainy”></ion-icon>
+  Rainy
+</button>
+```
+
+becomes
+
+```
+<button ion-button icon-left>
+  <ion-icon name=”rainy”></ion-icon>
+  Rainy
+</button>
+```
+Icon right of text in a button
+```
+<button>
+  Rainy
+  <ion-icon name=”rainy”></ion-icon>
+</button>
+```
+
+becomes
+
+```
+<button ion-button icon-right>
+  Rainy
+  <ion-icon name=”rainy”></ion-icon>
+</button>
+```
+Item option buttons - the `icon-left` attribute should still be added to the `<ion-item-options>` container and not the button itself.
+`menuToggle` buttons should not get the `icon-only` attribute
+
+**Reason for this change:**
+There was a noticeable performance decrease from us reading in each button to determine where icons were placed and how to style them. This change improves performance.
+This adds styling so that the buttons and icons will be padded a certain amount, but the user is free to leave these attributes off and style the components themselves.
+
+#### Update CSS Link Tags
+
+Ionic stylesheets are no longer dynamically loaded per platform. Instead there will be one CSS file to import. Note that future build processes will slim down the CSS file even further to only include component CSS actually used.
+
+In the head of your `index.html` file, replace:
+
+```
+<!-- ionic dynamically decides which stylesheet to load -->
+<link ios-href="build/css/app.ios.css" rel="stylesheet">
+<link md-href="build/css/app.md.css" rel="stylesheet">
+<link wp-href="build/css/app.wp.css" rel="stylesheet">
+```
+
+With:
+
+```
+<link href="build/main.css" rel="stylesheet">
+```
+#### Sass Import
+
+The default configuration will be updated, but if your existing app is using Sass and importing Ionic Sass files directly you’ll need to update the `includePaths` of Node Sass.
+
+```
+node_modules/ionic-angular/themes
+```
+
+Next, to include Ionic into your custom Sass file you’ll need to update the Ionic import to this:
+
+```
+@import "ionic.theme.default";
+```
+
+#### Typings
+
+Any type definitions for third party libraries that are included via the `typings` tool and are included in the the typings.json file should
+be updated to use `npm @types`. An example of how this looks is:
+
+```
+npm install @types/lodash --save-dev --save-exact
+```
+
+Delete the `typings.json` file, and the `typings` directory.
+
+#### Storage
+
+The storage utilities have been moved outside of the framework to a separate library called `@ionic/storage`.
+
+This library can be installed by executing the following command:
+
+```
+npm install @ionic/storage --save --save-exact
+```
+
+It must be included in the app's `NgModule` list of `providers`:
+
+```
+import { Storage } from '@ionic/storage';
+
+...
+
+@NgModule({
+  ...
+  providers: [Storage]
+})
+
+```
+
+It can then be injected into any class that needs access to it:
+
+```
+import { Storage } from '@ionic/storage';
+
+...
+
+export class MyAwesomePage {
+  constructor(public storage: Storage) {
+  }
+
+  ionViewDidEnter() {
+
+    this.storage.get('myKey').then( (value:any) => {
+      console.log('My value is:', value);
+    });
+  }
+}
+```
+
+#### Deployment Changes
+
+`ionic-angular` package includes es5 code with es2015 module import/exports, `umd` modules, and pure `es2015` code. The `package.json` is set up using the `main` and `module` options to make this work seamlessly.
+
+### Steps to Upgrade to RC0
+
+We are providing 2 ways to update your app with this release. The first way will guide you through creating a new Ionic 2 project and copying your project files to it. This is the easiest way to update your app in our opinion. The second way will step through how to update your existing project. There are a lot of steps involved with this way, and we recommend viewing our conference app for any clarification if you choose this way. This is it! We don’t plan on making any more major API changes after this version.
+
+Note: For details on NgModules you can read the Angular docs on them [here](https://angular.io/docs/ts/latest/guide/ngmodule.html)
+
+#### Copying Your Project to a New Project
+
+1. Install the latest Ionic CLI:
+
+```
+npm install -g ionic
+```
+Note: if you have installed the beta cli you should run `npm uninstall -g ionic` first.
+
+
+2. Create a new Ionic 2 RC0 app:
+
+```
+ionic start --v2 myApp
+```
+
+3. Copy/paste all of your pages from `app/pages/` of your beta.11 app to `src/pages/`, providers from `app/providers` to `src/providers` pipes from `app/pipes` to `src/pipes` and any custom components to `src/components` in the new RC0 app.
+
+4. Modify all `templateUrl`'s to be relative to the `.ts` file. For example in `app.component.ts` the url should change from `build/app.html` to `app.html` and in a page referencing `about.html` from `build/pages/about/about.html` to `about.html`.
+
+5. Import and add each of your pages to the `declarations` array and the `entryComponents` array in `src/app/app.module.ts.
+
+6. Import and add each of your custom components to the `declarations` array in `src/app/app.module.ts`.
+
+7. Import and add each of your providers to the `providers` array in `src/app/app.module.ts`.
+
+8. Remove any use of the `providers` entry in `@Component` from your pages.
+
+9. Change any uses of the `private` TypeScript keyword to `public`.
+
+10. Change `<button />` to `<button ion-button />` according to [these instructions](#new-behavior-of-button).
+
+11. Pass colors to the `color` attribute : `<button primary />` changes to `<button color=”primary” />`.
+
+12. Move any Ionic config to the `IonicModule.forRoot(MyApp, {configObject})` in `app.module.ts` where its says `configObject`.
+
+13. Move any variables from the mode specific sass files in you're beta.11 app into the `app.variables` file under the mode heading in the new RC0 app.
+
+
+#### Modifying your Existing Project
+
+1. Install the latest Ionic CLI:
+```
+npm install -g ionic
+```
+Note: if you have installed the beta cli you should run `npm uninstall -g ionic` first.
+
+2. Update package.json dependencies and devDependencies to match the [ionic2-app-base package.json](https://github.com/driftyco/ionic2-app-base/blob/master/package.json), then run `npm install` in your project folder.
+
+3. Copy the npm scripts from the [ionic2-app-base package.json](https://github.com/driftyco/ionic2-app-base/blob/master/package.json) to your package.json.
+
+4. Delete the `gulpfile.js`.
+
+5. Rename folder `app` to `src`.
+
+6. Create directory `app` inside of `src`.
+
+7. Move `app.html` and `app.ts` inside of `src/app`.
+
+8. Rename `app.ts` to `app.component.ts`.
+
+9. Add `app.module.ts` file and copy content from [ionic2-starter-blank](https://github.com/driftyco/ionic2-starter-blank/blob/master/src/app/app.module.ts).
+
+10. Move any providers from `ionicBootstrap` in `app.component.ts` to the providers in `app.module.ts`. Make sure to copy imports too.
+
+11. Import and add any of your custom components to the `declarations` array in `src/app/app.module.ts`.
+
+12. Move any Ionic config to the `IonicModule.forRoot(MyApp, {configObject})` in `app.module.ts` where it says `configObject`.
+
+13. Remove `ionicBootstrap` code from `app.component.ts`.
+
+14. Export the main app class in `app.component.ts` and then rename all uses of `MyApp` in `app.module.ts` to your main app class (or rename the export to `MyApp` in `app.component.ts`).
+
+15. Fix any imports in `app.component.ts` to use the correct path. For example, `./pages` becomes `../pages`.
+
+16. Modify `app.module.ts` to import your page specific classes. See `HomePage` for example. All pages should be included here.
+
+17. Fix any import paths in `app.module.ts`. For example, `./providers` becomes `../providers`.
+
+18. Add `main.dev.ts` and `main.prod.ts` files from [ionic2-app-base](https://github.com/driftyco/ionic2-app-base/tree/master/src/app) to `app/`.
+
+19. Move `www/index.html` to `src/index.html` and modify it to look like [ionic2-app-base](https://github.com/driftyco/ionic2-app-base/blob/master/src/index.html), make sure to keep any external scripts you have added.
+
+20. Move `www/assets` to `src/assets`.
+
+21. Move `www/img` to `src/assets/img`.
+
+22. Move any other resources you have in `www/` to `src/assets/`.
+
+23. Modify all `templateUrl`'s to be relative to the `.ts` file. For example in `app.component.ts` the url should change from `build/app.html` to `app.html` and in a page referencing `about.html` from `build/pages/about/about.html` to `about.html`.
+
+24. Update .gitignore to match [ionic2-app-base](https://github.com/driftyco/ionic2-app-base/blob/master/.gitignore).
+
+25. Delete the `typings/` folder and `typings.json` file.
+
+26. Update `tsconfig.json` to match [ionic2-app-base](https://github.com/driftyco/ionic2-app-base/blob/master/tsconfig.json).
+
+27. Modify `theme/` folder to delete the `app.core.scss` file and copy `app.variables.scss` from the [ionic2-app-base](https://github.com/driftyco/ionic2-app-base/blob/master/src/theme/variables.scss), then rename it to `variables.scss`.
+
+28. Move any variables from the mode specific files into the `app.variables` file under the mode heading.
+
+29. Fix any paths to images in your app. For example, before the path may look like `<img src="img/myImg.png">` and now it should be `<img src="assets/img/myImg.png">`.
+
+30. Change any uses of the `private` TypeScript keyword to `public`.
+
+31. Change any Ionic buttons from `<button />` to `<button ion-button />`, see [docs]() above.
+
+32. Pass colors to the `color` attribute : `<button primary />` changes to `<button color=”primary” />`.
+
+33. Add appropriate icon attributes, if the icon is on the left of the text in a button it should get `icon-left`, if the icon is on the right add `icon-right`, and if the button only has an icon in it, add the `icon-only` attribute to the button. [See New Behavior of Icons in Buttons]()
+
+
+### Bug Fixes
+
+* **action-sheet:** add icon-left to the button if an icon exists ([a731528](https://github.com/driftyco/ionic/commit/a731528))
+* **animation:** prevent possible raf null errors ([0e8ebe5](https://github.com/driftyco/ionic/commit/0e8ebe5))
+* **app:** corrected paths to theme from app.scss ([001c1c9](https://github.com/driftyco/ionic/commit/001c1c9))
+* **changelog:** specify version of forms ([82852fb](https://github.com/driftyco/ionic/commit/82852fb))
+* **checkbox:** disabled toggle should not fire events or animate ([3324e32](https://github.com/driftyco/ionic/commit/3324e32))
+* **di:** update dependency injection and default configs ([7c05d0c](https://github.com/driftyco/ionic/commit/7c05d0c))
+* **docs:** get rid of reference to [@Page](https://github.com/Page) ([6fb848c](https://github.com/driftyco/ionic/commit/6fb848c))
+* **exports:** update module exports ([6784f5e](https://github.com/driftyco/ionic/commit/6784f5e))
+* **fab:** colors in speed dial buttons ([b70614b](https://github.com/driftyco/ionic/commit/b70614b))
+* **gestures:** fixes scroll issue with hammer config ([174efc1](https://github.com/driftyco/ionic/commit/174efc1)), closes [#6897](https://github.com/driftyco/ionic/issues/6897)
+* **ion-fixed:** ion-fixed directive is not longer needed ([75d5526](https://github.com/driftyco/ionic/commit/75d5526))
+* **item:** regression in sliding item introduced by 52ada1c ([e0c2129](https://github.com/driftyco/ionic/commit/e0c2129))
+* **item:** sliding item events are zone wrapped ([47491fb](https://github.com/driftyco/ionic/commit/47491fb)), closes [#7630](https://github.com/driftyco/ionic/issues/7630)
+* **item:** sliding item with icon-only buttons ([1d3d5a1](https://github.com/driftyco/ionic/commit/1d3d5a1))
+* **menu:** open/close race condition ([8585427](https://github.com/driftyco/ionic/commit/8585427)), closes [#7629](https://github.com/driftyco/ionic/issues/7629) [#8001](https://github.com/driftyco/ionic/issues/8001)
+* gulp validate passes successfully ([b750e46](https://github.com/driftyco/ionic/commit/b750e46))
+* **nav:** move null assignment of _onWillDismiss ([35193c4](https://github.com/driftyco/ionic/commit/35193c4))
+* **nav:** setRoot() and setPages() should not animate ([7012734](https://github.com/driftyco/ionic/commit/7012734))
+* **navigation:** move onWillDismiss and onDidDismiss, add unit tests ([e26c425](https://github.com/driftyco/ionic/commit/e26c425))
+* **platform:** fire platform ready on app init ([963e835](https://github.com/driftyco/ionic/commit/963e835))
+* **reorder:** adjust reorder icon style for iOS and MD ([f3bb2dc](https://github.com/driftyco/ionic/commit/f3bb2dc))
+* **templates:** add template tabs [#8207](https://github.com/driftyco/ionic/issues/8207) ([#8208](https://github.com/driftyco/ionic/issues/8208)) ([0f6ce28](https://github.com/driftyco/ionic/commit/0f6ce28))
+* **urlSerializer:** improve findLinkByComponentData ([9d563f5](https://github.com/driftyco/ionic/commit/9d563f5))
+
+
+### Code Refactoring
+
+* **button:** add ion-button attribute and icon attributes to style buttons ([938864e](https://github.com/driftyco/ionic/commit/938864e)), closes [#7466](https://github.com/driftyco/ionic/issues/7466)
+* **colors:** color should be added as an input instead of directly adding the color to the component ([55a0257](https://github.com/driftyco/ionic/commit/55a0257)), closes [#7087](https://github.com/driftyco/ionic/issues/7087) [#7401](https://github.com/driftyco/ionic/issues/7401) [#7523](https://github.com/driftyco/ionic/issues/7523)
+* **select:** rename alertOptions to selectOptions, add ability to pass them for action-sheet ([b8285b7](https://github.com/driftyco/ionic/commit/b8285b7)), closes [#7764](https://github.com/driftyco/ionic/issues/7764)
+
+
+### Features
+
+* **action-sheet:** add ability to pass multiple classes to cssClass ([68ab261](https://github.com/driftyco/ionic/commit/68ab261))
+* **chips:** added Chip component ([421f637](https://github.com/driftyco/ionic/commit/421f637))
+* **chips:** finished Component ([0dece72](https://github.com/driftyco/ionic/commit/0dece72))
+* **fab:** update floating action buttons ([490a06d](https://github.com/driftyco/ionic/commit/490a06d))
+* **itemReorder:** animate reorder button ([1f78487](https://github.com/driftyco/ionic/commit/1f78487))
+* **loading:** add ability to pass multiple classes to cssClass ([466dea3](https://github.com/driftyco/ionic/commit/466dea3))
+* **loading:** add setContent function ([c750847](https://github.com/driftyco/ionic/commit/c750847))
+* add polyfill task ([ce78194](https://github.com/driftyco/ionic/commit/ce78194))
+* **nav:** component url navigation ([f477aa2](https://github.com/driftyco/ionic/commit/f477aa2))
+* **nav:** set default stack history on app init ([ca8cc0a](https://github.com/driftyco/ionic/commit/ca8cc0a))
+* **polyfills:** split up code and source polyfill task ([#8130](https://github.com/driftyco/ionic/issues/8130)) ([bcec66c](https://github.com/driftyco/ionic/commit/bcec66c))
+* **popover:** add ability to pass multiple classes to cssClass ([a685cdc](https://github.com/driftyco/ionic/commit/a685cdc))
+* **toast:** add ability to pass multiple classes to cssClass ([79e25a3](https://github.com/driftyco/ionic/commit/79e25a3))
+
+
+### Performance Improvements
+
+* **item:** apply will-change only when list is active ([4bcd815](https://github.com/driftyco/ionic/commit/4bcd815))
+* **reorder:** reorder icon is display: none by default ([26441ec](https://github.com/driftyco/ionic/commit/26441ec))
+* **ripple:** md ripple effect update to not affect layout ([14a3ea2](https://github.com/driftyco/ionic/commit/14a3ea2))
+
+<a name="2.0.0-beta.11"></a>
+# [2.0.0-beta.11](https://github.com/driftyco/ionic/compare/v2.0.0-beta.10...v2.0.0-beta.11) (2016-08-05)
+
+### BREAKING CHANGES
+
+- Angular2 has been updated to [RC4](https://github.com/angular/angular/blob/master/CHANGELOG.md#200-rc4-2016-06-30).
+- ViewController’s `onDismiss` has been renamed to `onDidDismiss`
+- Forms have been upgraded to `@angular/forms` - [Angular2 Forms Changes](https://docs.google.com/document/u/1/d/1RIezQqE4aEhBRmArIAS1mRIZtWFf6JxN_7B4meyWK0Y/pub).
+- [Overlay components](#overlays) should now be created with their injected provider.
+- The [Select Options](#select--option-7334) `checked` attribute has been renamed to `selected`.
+- [Tab’s input and config variables](#tab-inputconfig-7143) have been renamed.
+- [Material Design tabs](#material-design-tabs-7455) have been updated to resemble Material Design’s bottom navigation spec: https://material.google.com/components/bottom-navigation.html
+- [Input highlight](#input-highlight-6449) was added as an option for `ios` and `wp` mode, but defaults to false.
+- Please review the [Steps to Upgrade](#steps-to-upgrade-to-beta-11) below.
+
+#### Overlays
+
+- Overlay components, such as Alert or Modals, should now be created using its injected provider.
+- Overlays now have the `present()` method on the overlay’s instance, rather than using `nav.present(overlayInstance)`.
+- All overlays now present on top of all app content, to include menus.
+- Below is an example of the change to `Alert`, but the pattern is the same for all overlays: ActionSheet, Loading, Modal, Picker, Popover, Toast
+
+  WAS:
+
+  ```
+  import { NavController, Alert } from ‘ionic-angular’;
+
+  constructor(public nav: NavController) {
+  }
+
+  doAlert() {
+    let alert = Alert.create({
+       title: 'Alert',
+    });
+    this.nav.present(alert);
+  }
+  ```
+
+  NOW:
+
+  ```
+  import { AlertController } from ‘ionic-angular’;
+
+  constructor(public alertCtrl: AlertController) {
+  }
+
+  doAlert() {
+    let alert = this.alertCtrl.create({
+      title: 'Alert'
+    });
+    alert.present();
+  }
+  ```
+
+
+#### Select / Option [#7334](https://github.com/driftyco/ionic/issues/7334)
+
+The Option component’s `checked` attribute has been renamed to `selected` in order to make an option selected. This follows the MDN spec for a select option: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option
+
+If a `ngModel` is added to the Select component the value of the `ngModel` will take precedence over the `selected` attribute.
+
+See the [Select](http://ionicframework.com/docs/v2/api/components/select/Select/) and [Option](http://ionicframework.com/docs/v2/api/components/option/Option/) documentation for usage examples.
+
+#### Tab Input/Config [#7143](https://github.com/driftyco/ionic/issues/7143)
+
+Tab input/config options have been renamed. The following options were
+renamed:
+
+- `tabbarHighlight` -> `tabsHighlight`
+- `tabbarLayout` -> `tabsLayout`
+- `tabSubPages` -> `tabsHideOnSubPages`
+- `tabbarPlacement` -> `tabsPlacement`
+
+The previous names have been deprecated. They will still work in the
+current release but will be removed in the future so please update to
+the new names.
+
+#### Material Design Tabs [#7455](https://github.com/driftyco/ionic/issues/7455)
+
+Material Design mode defaults have changed to the following:
+
+```
+tabsHighlight: false,
+tabsPlacement: 'bottom',
+tabsHideOnSubPages: false
+```
+
+`tabsHighlight` can now be passed as an attribute on the `ion-tabs` element, this allows for tabs to be added in multiple places inside of an app and enable the highlight on some of them.
+
+Styling of the Material Design tabs reflects the spec for bottom navigation: https://material.google.com/components/bottom-navigation.html
+
+To get the old style of tabs, override the config in your bootstrap, for example:
+
+```
+ionicBootstrap(ConferenceApp, [ConferenceData, UserData], {
+  platforms: {
+    android: {
+      tabsPlacement: 'top',
+      tabsHideOnSubPages: true,
+      tabsHighlight: true
+    }
+  }
+});
+```
+
+And optionally override any of the Sass variables for `md` mode in `theme/app.md.scss`:
+
+```
+$tabs-md-tab-text-capitalization: uppercase;
+$tabs-md-tab-font-weight: 500;
+$tabs-md-tab-text-transform: scale(1);
+```
+
+For a searchable list of all of the Sass variables, see the theming documentation: http://ionicframework.com/docs/v2/theming/overriding-ionic-variables/
+
+
+#### Input Highlight [#6449](https://github.com/driftyco/ionic/issues/6449)
+
+Fixed typos in the input highlight variables:
+- `$text-input-md-hightlight-color-valid` -> `$text-input-md-highlight-color-valid`
+- `$text-input-wp-hightlight-color-valid` -> `$text-input-wp-highlight-color-valid`
+
+Modified variables to turn on/off the highlight:
+
+ios (defaults to false for all):
+
+```
+$text-input-ios-show-focus-highlight: false !default;
+$text-input-ios-show-valid-highlight: $text-input-ios-show-focus-highlight !default;
+$text-input-ios-show-invalid-highlight: $text-input-ios-show-focus-highlight !default;
+```
+
+md (defaults to true for all):
+
+```
+$text-input-md-show-focus-highlight: true !default;
+$text-input-md-show-valid-highlight: $text-input-md-show-focus-highlight !default;
+$text-input-md-show-invalid-highlight: $text-input-md-show-focus-highlight !default;
+```
+
+wp (defaults to true for all):
+
+```
+$text-input-wp-show-focus-highlight: true !default;
+$text-input-wp-show-valid-highlight: $text-input-wp-show-focus-highlight !default;
+$text-input-wp-show-invalid-highlight: $text-input-wp-show-focus-highlight !default;
+```
+
+#### Steps to Upgrade to Beta 11
+
+1. Run the following command in a terminal to update the npm dependencies:
+
+  ```
+  npm install --save --save-exact ionic-angular@2.0.0-beta.11 @angular/common@2.0.0-rc.4 @angular/compiler@2.0.0-rc.4 @angular/core@2.0.0-rc.4 @angular/http@2.0.0-rc.4 @angular/platform-browser@2.0.0-rc.4 @angular/platform-browser-dynamic@2.0.0-rc.4 @angular/forms@0.2.0 rxjs@5.0.0-beta.6 zone.js@0.6.12
+  ```
+
+2. Update all Overlay components to be presented by their controller instead of `NavController`. For example, to update the popover component, the following code:
+
+  ```
+  constructor(private nav: NavController) {}
+
+  presentPopover(event) {
+    let popover = Popover.create(PopoverPage);
+    this.nav.present(popover, { ev: event });
+  }
+  ```
+
+  becomes:
+
+  ```
+  constructor(private popoverCtrl: PopoverController) {}
+
+  presentPopover(event) {
+    let popover = this.popoverCtrl.create(PopoverPage);
+    popover.present({ ev: event });
+  }
+  ```
+
+3. Update any uses of `ViewController.onDismiss` to `ViewController.onDidDismiss`. The following code on dismiss of a modal:
+
+  ```
+  modal.onDismiss(() => {
+
+  });
+  ```
+
+  becomes:
+
+  ```
+  modal.onDidDismiss(() => {
+
+  });
+  ```
+
+4. Update any uses of `checked` on an `<ion-option>` to use `selected`.
+
+5. If you are using any of the tab config variables, update them to reflect the new names [above](#tab-inputconfig-7143).
+
+6. If you are using any of the Sass Variables to override [tabs](#material-design-tabs-7455) or [input highlights](#input-highlight-6449), update them to reflect the new names above.
+
+7. Please see the [Ionic Conference App](https://github.com/driftyco/ionic-conference-app) for an example of upgrading to Beta 11.
+
+
+### Bug Fixes
+
+* **activator:** do not activate elements while scrolling ([845a516](https://github.com/driftyco/ionic/commit/845a516)), closes [#7141](https://github.com/driftyco/ionic/issues/7141)
+* **animation:** ele as string selector ([9fa31a1](https://github.com/driftyco/ionic/commit/9fa31a1))
+* **animation:** fix easing timing function ([0cb093e](https://github.com/driftyco/ionic/commit/0cb093e)), closes [#7130](https://github.com/driftyco/ionic/issues/7130)
+* **app:** add status bar padding when tab subpages are hidden ([d01ee4b](https://github.com/driftyco/ionic/commit/d01ee4b)), closes [#7203](https://github.com/driftyco/ionic/issues/7203)
+* **backdrop:** flicker in UIWebView ([44ab527](https://github.com/driftyco/ionic/commit/44ab527))
+* **backdrop:** use raf when adding/removing disable-scroll css ([941cb1d](https://github.com/driftyco/ionic/commit/941cb1d))
+* **bootstrap:** return promise and resolve ionicBootstrap ([aebdf2f](https://github.com/driftyco/ionic/commit/aebdf2f)), closes [#7145](https://github.com/driftyco/ionic/issues/7145)
+* **bootstrap:** tapclick is injected, probably ([7358072](https://github.com/driftyco/ionic/commit/7358072))
+* **button:** apply css for buttons w/ ngIf ([816a648](https://github.com/driftyco/ionic/commit/816a648)), closes [#5927](https://github.com/driftyco/ionic/issues/5927)
+* **button:** outline buttons do not have hairline borders in iOS ([4e88f89](https://github.com/driftyco/ionic/commit/4e88f89))
+* **datetime:** format seconds token ([4fff262](https://github.com/driftyco/ionic/commit/4fff262)), closes [#6951](https://github.com/driftyco/ionic/issues/6951)
+* **datetime-util:** fix convertDataToISO to handle negative timezone offsets ([ba53a23](https://github.com/driftyco/ionic/commit/ba53a23))
+* **generator:** change nav to navCtrl ([b19547c](https://github.com/driftyco/ionic/commit/b19547c))
+* **gestures:** detecting swipe angle correctly + sliding item logic fix ([d230cb4](https://github.com/driftyco/ionic/commit/d230cb4))
+* **input:** add input highlight for ios, fix the highlight size ([11a24b9](https://github.com/driftyco/ionic/commit/11a24b9)), closes [#6449](https://github.com/driftyco/ionic/issues/6449)
+* **item:** sliding item is closed when tapped ([7aa559a](https://github.com/driftyco/ionic/commit/7aa559a)), closes [#7094](https://github.com/driftyco/ionic/issues/7094)
+* **loading:** clear timeout if dismissed before timeout fires ([5bbe31a](https://github.com/driftyco/ionic/commit/5bbe31a))
+* **loading:** fix loading overlay during app init ([b615c60](https://github.com/driftyco/ionic/commit/b615c60)), closes [#6209](https://github.com/driftyco/ionic/issues/6209)
+* **menu:** add statusbarPadding to the header and content in a menu ([a468fde](https://github.com/driftyco/ionic/commit/a468fde)), closes [#7385](https://github.com/driftyco/ionic/issues/7385)
+* **menu:** fix content going under header ([3cd31c3](https://github.com/driftyco/ionic/commit/3cd31c3)), closes [#7084](https://github.com/driftyco/ionic/issues/7084)
+* **menu:** getBackdropElement ([cac1d4f](https://github.com/driftyco/ionic/commit/cac1d4f))
+* **menu:** only one menu can be opened at a time ([cac378f](https://github.com/driftyco/ionic/commit/cac378f)), closes [#6826](https://github.com/driftyco/ionic/issues/6826)
+* **menu:** swipe menu is triggered when the swipe |angle| < 40º ([32a70a6](https://github.com/driftyco/ionic/commit/32a70a6))
+* **nav:** fire lifecycle events from app root portal ([a4e393b](https://github.com/driftyco/ionic/commit/a4e393b))
+* **nav:** fix menuCtrl reference in swipe back ([55a5e83](https://github.com/driftyco/ionic/commit/55a5e83))
+* **nav:** register child nav when created from modal ([61a8625](https://github.com/driftyco/ionic/commit/61a8625))
+* **picker:** fix iOS 8 picker display ([86fd8a4](https://github.com/driftyco/ionic/commit/86fd8a4)), closes [#7319](https://github.com/driftyco/ionic/issues/7319)
+* **popover:** remove min-height from ios, add sass variables ([55bc32d](https://github.com/driftyco/ionic/commit/55bc32d)), closes [#7215](https://github.com/driftyco/ionic/issues/7215)
+* **range:** add mouse listeners to document ([267ced6](https://github.com/driftyco/ionic/commit/267ced6))
+* **range:** align the label in an item range to the center ([d675d39](https://github.com/driftyco/ionic/commit/d675d39)), closes [#7046](https://github.com/driftyco/ionic/issues/7046)
+* **range:** ion-label stacked with ion-range ([5a8fe82](https://github.com/driftyco/ionic/commit/5a8fe82)), closes [#7046](https://github.com/driftyco/ionic/issues/7046)
+* **range:** set ticks to an empty array to prevent errors ([7a2ad99](https://github.com/driftyco/ionic/commit/7a2ad99))
+* **reorder:** better style ([f289ac6](https://github.com/driftyco/ionic/commit/f289ac6))
+* **reorder:** canceled reorder is animated smoothly back ([8483a43](https://github.com/driftyco/ionic/commit/8483a43))
+* **reorder:** non ion-item elements can be reordered ([ea9dd02](https://github.com/driftyco/ionic/commit/ea9dd02)), closes [#7339](https://github.com/driftyco/ionic/issues/7339)
+* **reorder:** reorder can be used with any element ([d993a1b](https://github.com/driftyco/ionic/commit/d993a1b))
+* **scroll:** fix scrolling after switching tabs ([e4bbcc6](https://github.com/driftyco/ionic/commit/e4bbcc6)), closes [#7154](https://github.com/driftyco/ionic/issues/7154)
+* **select:** add the cssClass passed by the user to the alert for a select ([81ddd7f](https://github.com/driftyco/ionic/commit/81ddd7f)), closes [#6835](https://github.com/driftyco/ionic/issues/6835)
+* **slides:** delay loading slides until view ready ([580b8d5](https://github.com/driftyco/ionic/commit/580b8d5)), closes [#7089](https://github.com/driftyco/ionic/issues/7089)
+* **sliding:** much better UX + performance ([d6f62bc](https://github.com/driftyco/ionic/commit/d6f62bc)), closes [#6913](https://github.com/driftyco/ionic/issues/6913) [#6958](https://github.com/driftyco/ionic/issues/6958)
+* **tabs:** add sass variable for inactive opacity and pass it to the colors loop ([99efa36](https://github.com/driftyco/ionic/commit/99efa36))
+* **tabs:** center tabbar content ([997d54e](https://github.com/driftyco/ionic/commit/997d54e))
+* **tabs:** fix preloadTabs null element reference ([2d19308](https://github.com/driftyco/ionic/commit/2d19308)), closes [#7109](https://github.com/driftyco/ionic/issues/7109)
+* **tabs:** make the text color opaque instead of the entire button ([dd969a2](https://github.com/driftyco/ionic/commit/dd969a2)), closes [#6638](https://github.com/driftyco/ionic/issues/6638)
+* **util:** UIEventManager should handle touchcancel event ([b805602](https://github.com/driftyco/ionic/commit/b805602))
+
+### Features
+
+* **alert:** allow smooth overflow scrolling ([5542a93](https://github.com/driftyco/ionic/commit/5542a93))
+* **content:** add a resize function to recalculate the content size ([1fe1c1e](https://github.com/driftyco/ionic/commit/1fe1c1e))
+* **footer:** apply shadow on MD footer and tabbar bottom ([686c262](https://github.com/driftyco/ionic/commit/686c262))
+* **gesture:** Introducing new gesture controller ([9f19023](https://github.com/driftyco/ionic/commit/9f19023))
+* **gesture-controller:** disable/enable scrolling ([72c24bc](https://github.com/driftyco/ionic/commit/72c24bc))
+* **header:** apply shadow on MD headers ([6fa2faf](https://github.com/driftyco/ionic/commit/6fa2faf))
+* **ion-content:** iOS only scroll bounce ([5c80445](https://github.com/driftyco/ionic/commit/5c80445))
+* **select:** add disabled status in select options ([76619cf](https://github.com/driftyco/ionic/commit/76619cf))
+* **tabs:** apply shadow on MD tabbar top ([1f4b3e2](https://github.com/driftyco/ionic/commit/1f4b3e2))
+* **tabs:** add the transition for material design tabs ([eea7e6b](https://github.com/driftyco/ionic/commit/eea7e6b))
+* **toolbar:** add attributes to hide all borders and box shadows ([88b637b](https://github.com/driftyco/ionic/commit/88b637b)), closes [#7237](https://github.com/driftyco/ionic/issues/7237)
+* **viewcontroller:** add onWillDismiss callback ([ec99bfd](https://github.com/driftyco/ionic/commit/ec99bfd)), closes [#6702](https://github.com/driftyco/ionic/issues/6702)
+
+### Performance Improvements
+
+* **animation:** using will-change when using progressStep() ([267aa32](https://github.com/driftyco/ionic/commit/267aa32))
+* **menu:** several improvements ([86c5aaf](https://github.com/driftyco/ionic/commit/86c5aaf))
+
+
+<a name="2.0.0-beta.10"></a>
+# [2.0.0-beta.10](https://github.com/driftyco/ionic/compare/v2.0.0-beta.9...v2.0.0-beta.10) (2016-06-27)
+
+### BREAKING CHANGES
+
+- `ion-content` now takes up 100% of the viewport height, but it has margin added to the top and bottom to adjust for headers, footers, and tabs.
+- `ion-content` now accepts `fullscreen` as an attribute to to tell the content to scroll behind the header. This allows for transparent toolbars and tab pages without navbars!
+- `ion-navbar` no longer has the `*navbar` attribute.
+- `ion-navbar` should now be wrapped in an `ion-header`
+
+  ```
+  <ion-header>
+    <ion-navbar></ion-navbar>
+  </ion-header>
+  ```
+
+- `ios` only: `ion-toolbar`/`ion-navbar` will always have borders to both the top and bottom of the element. Use the attributes `no-border-top` and `no-border-bottom` to remove the respective borders.
+- An `ion-nav` or `ion-tabs` is required in the root component. If one of these does not exist your content may be pushed up behind your header.
+- The `position` attribute has been removed from the `ion-toolbar`, it should now be placed in an `ion-header` or an `ion-footer`. It can also be placed inside of an `ion-content`.
+- The only elements that should be children of a page are `ion-header`, `ion-content`, and `ion-footer`.
+
+
+#### Steps to Upgrade to Beta 10
+
+1. Run the following command from your command prompt/terminal to update to the latest version of the Ionic framework 2:
+
+  ```
+  npm install --save ionic-angular@2.0.0-beta.10 @angular/common@2.0.0-rc.3 @angular/compiler@2.0.0-rc.3 @angular/platform-browser@2.0.0-rc.3 @angular/platform-browser-dynamic@2.0.0-rc.3 @angular/http@2.0.0-rc.3 @angular/core@2.0.0-rc.3  @angular/router@2.0.0-rc.2
+  ```
+
+2. Remove the `*navbar` attribute so this:
+
+  ```
+  <ion-navbar *navbar>
+  ```
+
+  becomes this:
+
+  ```
+  <ion-navbar>
+  ```
+
+3. Wrap any toolbars/navbars above the `ion-content` in an `ion-header`. The following:
+
+  ```
+  <ion-navbar>
+    <ion-title>
+      Navbar Title
+    </ion-title>
+  </ion-navbar>
+
+  <ion-toolbar>
+    <ion-title>
+      Toolbar Title
+    </ion-title>
+  </ion-toolbar>
+
+  <ion-content>
+
+  </ion-content>
+  ```
+
+  becomes:
+
+  ```
+  <ion-header>
+    <ion-navbar>
+      <ion-title>
+        Navbar Title
+      </ion-title>
+    </ion-navbar>
+
+    <ion-toolbar>
+      <ion-title>
+        Toolbar Title
+      </ion-title>
+    </ion-toolbar>
+  </ion-header>
+
+  <ion-content>
+
+  </ion-content>
+  ```
+
+4. Wrap any toolbars/navbars after the `ion-content` in an `ion-footer`. The following:
+
+  ```
+  <ion-content>
+
+  </ion-content>
+
+  <ion-toolbar position="bottom">
+    <ion-title>Footer Toolbar</ion-title>
+  </ion-toolbar>
+  ```
+
+  becomes:
+
+  ```
+  <ion-content>
+
+  </ion-content>
+
+  <ion-footer>
+    <ion-toolbar>
+      <ion-title>Footer Toolbar</ion-title>
+    </ion-toolbar>
+  </ion-footer>
+  ```
+
+
+### Bug Fixes
+
+* **animation:** correctly apply will-change: transform ([a1223da](https://github.com/driftyco/ionic/commit/a1223da))
+* **bootstrap:** only add customProviders when present ([0e9e85c](https://github.com/driftyco/ionic/commit/0e9e85c))
+* **content:** adjust footer bottom based on the tabbar without padding ([4567de2](https://github.com/driftyco/ionic/commit/4567de2))
+* **content:** set footer height to 0 so it won't be undefined ([3db67f9](https://github.com/driftyco/ionic/commit/3db67f9))
+* **cordova:** fix the status bar padding with the new structure ([15642e4](https://github.com/driftyco/ionic/commit/15642e4))
+* **demos:** updates @angular paths ([b7826ba](https://github.com/driftyco/ionic/commit/b7826ba))
+* **footer:** show footer toolbar w/ tabbar bottom ([99c50a1](https://github.com/driftyco/ionic/commit/99c50a1))
+* **generator:** fix closing tag for header ([47e09a1](https://github.com/driftyco/ionic/commit/47e09a1))
+* **header:** optional ViewController injection ([5a85d82](https://github.com/driftyco/ionic/commit/5a85d82))
+* **input:** allow button click when input has focus ([ae86ab8](https://github.com/driftyco/ionic/commit/ae86ab8)), closes [#6514](https://github.com/driftyco/ionic/issues/6514) [#6944](https://github.com/driftyco/ionic/issues/6944)
+* **input:** check if there is a value when setting value ([d0b1930](https://github.com/driftyco/ionic/commit/d0b1930))
+* **input:** fix the clear input button to always be vertically aligned ([e4cc672](https://github.com/driftyco/ionic/commit/e4cc672))
+* **item:** inherit overflow and text-overflow from the parent item in a paragraph ([4009575](https://github.com/driftyco/ionic/commit/4009575))
+* **item:** listEle does not longer exist ([22fad4c](https://github.com/driftyco/ionic/commit/22fad4c))
+* **item:** sliding item works with and without borders ([2303c16](https://github.com/driftyco/ionic/commit/2303c16)), closes [#7081](https://github.com/driftyco/ionic/issues/7081)
+* **item:** sliding items don't fire (click) when swiped ([38ab17b](https://github.com/driftyco/ionic/commit/38ab17b))
+* **modal:** add class name to modal ([6e34739](https://github.com/driftyco/ionic/commit/6e34739)), closes [#7000](https://github.com/driftyco/ionic/issues/7000)
+* **nav:** auto set iOS black transition bg via css ([7842991](https://github.com/driftyco/ionic/commit/7842991))
+* **picker:** adds align to the PickerColumn interface ([b8551de](https://github.com/driftyco/ionic/commit/b8551de))
+* **refresher:** adjust location after layout updates ([603000f](https://github.com/driftyco/ionic/commit/603000f))
+* **refresher:** only listen for mousemove/touchmove when needed ([1a58a41](https://github.com/driftyco/ionic/commit/1a58a41))
+* **tabs:** don't add outline to the class name if it is a logo icon ([af22287](https://github.com/driftyco/ionic/commit/af22287)), closes [#6899](https://github.com/driftyco/ionic/issues/6899)
+* **tabs:** fix tabs rootNav ([ae40edf](https://github.com/driftyco/ionic/commit/ae40edf))
+* **tabs:** hide tab's navbar when a page comes without a navbar ([2d68089](https://github.com/driftyco/ionic/commit/2d68089)), closes [#5556](https://github.com/driftyco/ionic/issues/5556)
+* **tabs:** reference parent instead of parentTabs ([ed6d0fa](https://github.com/driftyco/ionic/commit/ed6d0fa))
+* **tabs:** swipeBackEnabled works with tabs as expected ([2bff535](https://github.com/driftyco/ionic/commit/2bff535))
+* **toggle:** host listeners are not longer needed ([4aa322d](https://github.com/driftyco/ionic/commit/4aa322d))
+* **toolbar:** place iOS border on ion-header/footer ([48c1ffd](https://github.com/driftyco/ionic/commit/48c1ffd))
+* **toolbar:** position toolbar relative and add z-index ([1d8ba4a](https://github.com/driftyco/ionic/commit/1d8ba4a))
+* **virtualScroll:** first node should use clientTop/clientLeft ([2197d49](https://github.com/driftyco/ionic/commit/2197d49))
+
+### Features
+
+* **feature-detect:** detect if backdrop-filter is supported ([89564f1](https://github.com/driftyco/ionic/commit/89564f1))
+* **fullscreen:** add fullscreen property to ion-content ([f20c7e4](https://github.com/driftyco/ionic/commit/f20c7e4))
+* **item:** sliding items work with list reorder ([bfdc898](https://github.com/driftyco/ionic/commit/bfdc898))
+* **list:** add list headers and item dividers as items ([712ff81](https://github.com/driftyco/ionic/commit/712ff81)), closes [#5561](https://github.com/driftyco/ionic/issues/5561)
+* **list:** reorder list items ([5c38921](https://github.com/driftyco/ionic/commit/5c38921))
+* **range:** add debounce input for ionChange event ([55eccb3](https://github.com/driftyco/ionic/commit/55eccb3)), closes [#6894](https://github.com/driftyco/ionic/issues/6894)
+* **toolbar:** control toolbar borders on top/bottom ([3a7addf](https://github.com/driftyco/ionic/commit/3a7addf))
+
+### Performance Improvements
+
+* **reorder:** hit test refactored ([6a52a4a](https://github.com/driftyco/ionic/commit/6a52a4a))
+
+
+
 <a name="2.0.0-beta.9"></a>
 # [2.0.0-beta.9](https://github.com/driftyco/ionic/compare/v2.0.0-beta.8...v2.0.0-beta.9) (2016-06-16)
 
@@ -8,27 +930,27 @@
 - Searchbar's events no longer emit the Searchbar itself, they now emit the input's `$event` for each native input event. Instead of grabbing the value from the searchbar, you should grab it from the event target. For example:
 
   Previously when an event was called the function called would look similar to this:
-  
+
   ```
   getItems(searchbar) {
     // set q to the value of the searchbar input
     var q = searchbar.value;
   }
   ```
-  
+
   Now it should be similar to this:
-  
+
   ```
   getItems(ev) {
     // set q to the value of the searchbar input
     var q = ev.target.value;
   }
   ```
-  
+
 - `ngModel` is no longer required on Searchbar, but it can still be used. You can get the value of the input through Searchbar's [Output Events](http://ionicframework.com/docs/v2/api/components/searchbar/Searchbar/#output-events).
 - Added the ability to pass `autocomplete`, `autocorrect`, `spellcheck`, and `type` to the searchbar which is passed to the input.
 - The `hideCancelButton` attribute was removed in favor of `showCancelButton` which is set to `false` by default.
-  
+
 
 ### Features
 

CONTRIBUTING.md

@@ -1,115 +0,0 @@
-# Contributing
-
-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.
-
-
-## Creating an Issue
-
-If you have a question about using the framework, please ask on the [Ionic Forum](http://forum.ionicframework.com/) or in the [Ionic Worldwide Slack](http://ionicworldwide.herokuapp.com/) group.
-
-If you think you have found a bug, or have a new feature idea, please start by making sure it hasn't already been [reported](https://github.com/driftyco/ionic/issues?utf8=%E2%9C%93&q=is%3Aissue). You can search through existing issues to see if there is a similar one reported. Include closed issues as it may have been closed with a solution.
-
-Next, [create a new issue](https://github.com/driftyco/ionic/issues/new) that thoroughly explains the problem. Please fill out the populated issue form before submitting the issue.
-
-
-## Creating a Pull Request
-
-We appreciate you taking the time to contribute! Before submitting a pull request, we ask that you please [create an issue](#creating-an-issue) that explains the bug or feature request and let us know that you plan on creating a pull request for it. If an issue already exists, please comment on that issue letting us know you would like to submit a pull request for it. This helps us to keep track of the pull request and make sure there isn't duplicated effort.
-
-Looking for an issue to fix? Make sure to look through our issues with the [help wanted](https://github.com/driftyco/ionic/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22) label!
-
-### Setup
-
-1. Fork the repo.
-2. Clone your fork.
-3. Make a branch for your change.
-4. Run `npm install` (make sure you have [node](https://nodejs.org/en/) and [npm](http://blog.npmjs.org/post/85484771375/how-to-install-npm) installed first)
-
-
-### Modifying Components
-
-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).
-2. After any changes to the Sass files run the [Sass Linter](https://github.com/brigade/scss-lint), and fix any linter errors:
- - Requires [Ruby](https://www.ruby-lang.org/en/documentation/installation/). **Skip this step entirely if you are unable to install Ruby.**
- - Install the linter: `gem install scss_lint`
- - Make sure to run the linter at the root of the repository.
- - To check all component Sass files: `scss-lint ionic/**/**/*.scss`
- - To check a specific Sass file: `scss-lint src/components/toolbar/toolbar.ios.scss`
-
-
-#### Viewing Changes
-
-1. Run the gulp watch task for e2e tests: `gulp watch.e2e`
-2. Launch your browser and navigate to `http://localhost:8000/dist/e2e`
-3. From here, navigate to the component you are changing.
-4. Any changes to the e2e tests in the `test/` directory will show here.
-5. If your changes look good, you're ready to [commit](#committing)!
-
-
-#### Adding Documentation
-
-1. To add or modify API Documentation for a component, it should be added/changed in the component's TypeScript (`*.ts`) file, prior to the Class definition. For example, `Badge` looks similar to this:
-
-  ```
-  /**
-    * @name Badge
-    * @module ionic
-    * @description
-    * Badges are simple components in Ionic containing numbers or text.
-    *
-    * @see {@link /docs/v2/components/#badges Badges Component Docs}
-    * @demo /docs/v2/demos/badge/
-  **/
-  ```
-
-  where `@name` is the Class name, `@description` is the description displayed on the documentation page, `@see` links to any related pages, and `@demo` links to the API demo located in the `demos` folder.
-2. In order to run API documentation locally, you will need to clone the `ionic-site` repo as a sibling to the `ionic` repo and then run it: https://github.com/driftyco/ionic-site#local-build
-3. Then, run `gulp docs` in the `ionic` repo every time you make a change and the site will update.
-4. If the change affects the component documentation, create an issue on the `ionic-site` repo: https://github.com/driftyco/ionic-site/issues
-
-
-#### Adding Demos
-
-1. Create or modify the demo in the `demos/` folder.
-2. If it is new, link to the demo in the component's TypeScript (`*.ts`) file (under `src/components`) by adding a link to it in the documentation using `@demo`, for example:
-
-  ```
-  /**
-    * @name Badge
-    *
-    * ...
-    *
-    * @demo /docs/v2/demos/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!
-
-
-## License
-
-By contributing your code to the driftyco/ionic GitHub Repository, you agree to license your contribution under the MIT license.

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,17 +2,19 @@ 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: "master"

demos/alert/main.html

@@ -1,18 +0,0 @@
-<ion-header>
-
-  <ion-navbar>
-    <ion-title>Alert</ion-title>
-  </ion-navbar>
-
-</ion-header>
-
-
-<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/main.html

@@ -1,68 +0,0 @@
-<ion-header>
-
-  <ion-navbar>
-    <ion-title>Button</ion-title>
-  </ion-navbar>
-
-</ion-header>
-
-
-<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/item/index.ts

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

demos/label/index.ts

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

demos/local-storage/index.ts

@@ -1,91 +0,0 @@
-import { Component, Injectable, Pipe, PipeTransform } from '@angular/core';
-
-import { Config, IonicApp, ionicBootstrap, LocalStorage, Platform, Storage } from 'ionic-angular';
-
-
-@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 ApiDemoPage {
-  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 = ApiDemoPage;
-}
-
-ionicBootstrap(ApiDemoApp);

demos/local-storage/main.html

@@ -1,68 +0,0 @@
-<ion-header>
-
-  <ion-navbar>
-    <ion-title>Local Storage</ion-title>
-  </ion-navbar>
-
-</ion-header>
-
-
-<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/main.html

@@ -1,27 +0,0 @@
-<ion-header>
-
-  <ion-navbar>
-    <button [menuToggle]="activeMenu">
-      <ion-icon name="menu"></ion-icon>
-    </button>
-    <ion-title>
-      Menu
-    </ion-title>
-  </ion-navbar>
-
-</ion-header>
-
-
-<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/index.ts

@@ -1,84 +0,0 @@
-import { Component } from '@angular/core';
-
-import { Animation, Config, IonicApp, ionicBootstrap, Modal, NavController, NavParams, Platform, ViewController } 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({
-  template: '<ion-nav [root]="root"></ion-nav>'
-})
-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/nav-params/index.ts

@@ -1,39 +0,0 @@
-import { Component } from '@angular/core';
-
-import { ionicBootstrap, NavController, NavParams } from 'ionic-angular';
-
-
-@Component({
-  templateUrl: 'main.html'
-})
-export class ApiDemoPage {
-  myParam: string = '';
-
-  constructor(public nav: NavController) {}
-
-  pushParams() {
-    this.nav.push(PushPage, { 'myParam': this.myParam });
-  }
-}
-
-
-@Component({
-  templateUrl: "page.html"
-})
-export class PushPage {
-  myParam: string;
-
-  constructor(public nav: NavController, params: NavParams) {
-    this.myParam = params.get('myParam');
-  }
-}
-
-
-@Component({
-  template: '<ion-nav [root]="root"></ion-nav>'
-})
-class ApiDemoApp {
-  root = ApiDemoPage;
-}
-
-ionicBootstrap(ApiDemoApp);

demos/navigation/index.ts

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

demos/navigation/page.html

@@ -1,15 +0,0 @@
-<ion-header>
-
-  <ion-navbar>
-    <ion-title>Page {{pageNum}}</ion-title>
-  </ion-navbar>
-
-</ion-header>
-
-
-<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/scroll/index.ts

@@ -1,19 +0,0 @@
-import { Component } from '@angular/core';
-
-import { ionicBootstrap } from 'ionic-angular';
-
-
-@Component({
-  templateUrl: 'main.html'
-})
-class ApiDemoPage {}
-
-
-@Component({
-  template: '<ion-nav [root]="root"></ion-nav>'
-})
-class ApiDemoApp {
-  root = ApiDemoPage;
-}
-
-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/segment/index.ts

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

demos/segment/main.html

@@ -1,147 +0,0 @@
-<ion-header>
-
-  <ion-navbar>
-    <ion-title>Segment</ion-title>
-  </ion-navbar>
-
-  <ion-toolbar no-border-top>
-    <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 no-border-top>
-    <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 no-border-top>
-    <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 no-border-top>
-    <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-header>
-
-
-<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-footer>
-
-  <ion-toolbar no-border-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 no-border-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 no-border-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>
-
-</ion-footer>

demos/show-when/index.ts

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

demos/slides/index.ts

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

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

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

@@ -9,6 +9,6 @@
 
 <ion-content padding>
 
-  <button block (click)="present()">Basic Action Sheet</button>
+  <button ion-button block (click)="present()">Basic Action Sheet</button>
 
 </ion-content>

demos/src/alert/app.component.ts

@@ -1,10 +1,9 @@
 import { Component } from '@angular/core';
-
-import { Alert, ionicBootstrap, NavController } from 'ionic-angular';
+import { AlertController } from 'ionic-angular';
 
 
 @Component({
-  templateUrl: 'main.html'
+  templateUrl: 'page.html'
 })
 export class ApiDemoPage {
   testRadioOpen = false;
@@ -12,22 +11,22 @@ export class ApiDemoPage {
   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',
@@ -44,13 +43,13 @@ export class ApiDemoPage {
       ]
     });
 
-    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',
@@ -60,24 +59,24 @@ export class ApiDemoPage {
       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({
@@ -126,18 +125,18 @@ export class ApiDemoPage {
     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({
@@ -198,24 +197,22 @@ export class ApiDemoPage {
     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({
-  template: '<ion-nav [root]="root"></ion-nav>'
+  template: `<ion-nav [root]="root"></ion-nav>`
 })
-class ApiDemoApp {
+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

@@ -1,12 +1,10 @@
 import { Component } from '@angular/core';
 
-import { ionicBootstrap } from 'ionic-angular';
-
 
 @Component({
-  templateUrl: 'main.html'
+  templateUrl: 'page.html'
 })
-class ApiDemoPage {
+export class ApiDemoPage {
 
   data = {
     jon: true,
@@ -19,7 +17,8 @@ class ApiDemoPage {
     stannis: true,
     petyr: false,
     hodor: true,
-    catelyn: true
+    catelyn: true,
+    bronn: false
   };
 
 }
@@ -28,8 +27,6 @@ class ApiDemoPage {
 @Component({
   template: '<ion-nav [root]="root"></ion-nav>'
 })
-class ApiDemoApp {
+export class ApiDemoApp {
   root = ApiDemoPage;
 }
-
-ionicBootstrap(ApiDemoApp);

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

@@ -17,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>
 
@@ -27,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>
 
@@ -42,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>
 
@@ -57,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

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

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>

demos/src/config/app.component.ts

@@ -1,41 +1,39 @@
 import { Component } from '@angular/core';
-
-import { ionicBootstrap, IonicApp, Platform, NavController } from 'ionic-angular';
-
+import { Platform, NavController } from 'ionic-angular';
 
 if (!window.localStorage) {
-  Object.defineProperty(window, "localStorage", new (function () {
+  Object.defineProperty(window, 'localStorage', new (function () {
     var aKeys = [], oStorage = {};
-    Object.defineProperty(oStorage, "getItem", {
+    Object.defineProperty(oStorage, 'getItem', {
       value: function (sKey) { return sKey ? this[sKey] : null; },
       writable: false,
       configurable: false,
       enumerable: false
     });
-    Object.defineProperty(oStorage, "key", {
+    Object.defineProperty(oStorage, 'key', {
       value: function (nKeyId) { return aKeys[nKeyId]; },
       writable: false,
       configurable: false,
       enumerable: false
     });
-    Object.defineProperty(oStorage, "setItem", {
+    Object.defineProperty(oStorage, 'setItem', {
       value: function (sKey, sValue) {
-        if(!sKey) { return; }
-        document.cookie = escape(sKey) + "=" + escape(sValue) + "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/";
+        if (!sKey) { return; }
+        document.cookie = encodeURI(sKey) + '=' + encodeURI(sValue) + '; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/';
       },
       writable: false,
       configurable: false,
       enumerable: false
     });
-    Object.defineProperty(oStorage, "length", {
+    Object.defineProperty(oStorage, 'length', {
       get: function () { return aKeys.length; },
       configurable: false,
       enumerable: false
     });
-    Object.defineProperty(oStorage, "removeItem", {
+    Object.defineProperty(oStorage, 'removeItem', {
       value: function (sKey) {
-        if(!sKey) { return; }
-        document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
+        if (!sKey) { return; }
+        document.cookie = encodeURI(sKey) + '=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/';
       },
       writable: false,
       configurable: false,
@@ -45,15 +43,18 @@ if (!window.localStorage) {
       var iThisIndx;
       for (var sKey in oStorage) {
         iThisIndx = aKeys.indexOf(sKey);
-        if (iThisIndx === -1) { oStorage.setItem(sKey, oStorage[sKey]); }
-        else { aKeys.splice(iThisIndx, 1); }
+        if (iThisIndx === -1) {
+          (oStorage as any).setItem(sKey, oStorage[sKey]);
+        } else {
+          aKeys.splice(iThisIndx, 1);
+        }
         delete oStorage[sKey];
       }
-      for (aKeys; aKeys.length > 0; aKeys.splice(0, 1)) { oStorage.removeItem(aKeys[0]); }
+      for (aKeys; aKeys.length > 0; aKeys.splice(0, 1)) { (oStorage as any).removeItem(aKeys[0]); }
       for (var aCouple, iKey, nIdx = 0, aCouples = document.cookie.split(/\s*;\s*/); nIdx < aCouples.length; nIdx++) {
         aCouple = aCouples[nIdx].split(/\s*=\s*/);
         if (aCouple.length > 1) {
-          oStorage[iKey = unescape(aCouple[0])] = unescape(aCouple[1]);
+          oStorage[iKey = decodeURI(aCouple[0])] = decodeURI(aCouple[1]);
           aKeys.push(iKey);
         }
       }
@@ -79,28 +80,33 @@ export class TabPage {
 
 
 @Component({
-  templateUrl: 'main.html'
+  templateUrl: 'page.html'
 })
 export class ApiDemoPage {
   config: any;
   initialConfig: any;
 
-  constructor(public platform: Platform, public nav: NavController) {
+  constructor(public platform: Platform, public navCtrl: NavController) {
 
     if (window.localStorage.getItem('configDemo') !== null) {
       this.config = JSON.parse(window.localStorage.getItem('configDemo'));
-    }
-    else if (platform.is('ios')) {
+    } else if (platform.is('ios')) {
       this.config = {
         'backButtonIcon': 'ios-arrow-back',
         'iconMode': 'ios',
-        'tabbarPlacement': 'bottom'
+        'tabsPlacement': 'bottom'
+      };
+    } else if (platform.is('windows')) {
+      this.config = {
+        'backButtonIcon': 'ios-arrow-back',
+        'iconMode': 'ios',
+        'tabsPlacement': 'top'
       };
     } else {
       this.config = {
         'backButtonIcon': 'md-arrow-back',
         'iconMode': 'md',
-        'tabbarPlacement': 'top'
+        'tabsPlacement': 'bottom'
       };
     }
 
@@ -113,18 +119,18 @@ export class ApiDemoPage {
   }
 
   push() {
-    this.nav.push(PushPage);
+    this.navCtrl.push(PushPage);
   }
 }
 
 @Component({
-  templateUrl: 'page.html'
+  templateUrl: 'push-page.html'
 })
 export class PushPage {
-  constructor(public nav: NavController) {}
+  constructor(public navCtrl: NavController) {}
 
   pop() {
-    this.nav.pop();
+    this.navCtrl.pop();
   }
 }
 
@@ -132,8 +138,6 @@ export class PushPage {
 @Component({
   template: '<ion-nav [root]="root" #content></ion-nav>'
 })
-class ApiDemoApp {
+export class ApiDemoApp {
   root = TabPage;
 }
-
-ionicBootstrap(ApiDemoApp, null, CONFIG_DEMO);

demos/src/config/app.module.ts

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

demos/src/config/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/config/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/config/page.html

@@ -31,7 +31,7 @@
 
     <ion-item>
       <ion-label>Tab Placement</ion-label>
-      <ion-select [(ngModel)]="config.tabbarPlacement">
+      <ion-select [(ngModel)]="config.tabsPlacement">
         <ion-option value="bottom">bottom</ion-option>
         <ion-option value="top">top</ion-option>
       </ion-select>
@@ -41,7 +41,7 @@
   <p class="note">Note: the config will not be updated until you click the button below.</p>
 
   <div padding>
-    <button block (click)="load()">
+    <button ion-button block (click)="load()">
       Update Config
     </button>
   </div>
@@ -50,14 +50,14 @@
 
   <!-- this has to be formatted weird for pre -->
   <pre margin>
-ionicBootstrap(MyApp, [], {
+<!--ionicBootstrap(MyApp, [], {
   backButtonIcon: "{{initialConfig.backButtonIcon}}"
   iconMode: "{{initialConfig.iconMode}}"
-  tabbarPlacement: "{{initialConfig.tabbarPlacement}}"
-});</pre>
+  tabsPlacement: "{{initialConfig.tabsPlacement}}"
+});--></pre>
 
   <div padding>
-    <button block secondary (click)="push()">
+    <button ion-button block color="secondary" (click)="push()">
       Go to Another Page
     </button>
   </div>

demos/src/config/push-page.html

@@ -6,6 +6,6 @@
 
 <ion-content>
   <div padding>
-    <button block (click)="pop()">Go Back to Config</button>
+    <button ion-button block (click)="pop()">Go Back to Config</button>
   </div>
 </ion-content>

demos/src/datetime/app.component.ts

@@ -1,12 +1,9 @@
 import { Component } from '@angular/core';
 
-import { ionicBootstrap } from 'ionic-angular';
-
-
 @Component({
-  templateUrl: 'main.html'
+  templateUrl: 'page.html'
 })
-class ApiDemoPage {
+export class ApiDemoPage {
   wwwReleased = '1991';
   netscapeReleased = '1994-12-15T13:47:20.789';
   operaReleased = '1995-04-15';
@@ -68,8 +65,6 @@ class ApiDemoPage {
 @Component({
   template: '<ion-nav [root]="root"></ion-nav>'
 })
-class ApiDemoApp {
+export class ApiDemoApp {
   root = ApiDemoPage;
 }
-
-ionicBootstrap(ApiDemoApp);

demos/src/datetime/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/datetime/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/datetime/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/events/app.component.ts

@@ -1,15 +1,13 @@
 import { Component, ViewChild } from '@angular/core';
-
-import { Events, ionicBootstrap, Nav } from 'ionic-angular';
-
+import { Events, Nav } from 'ionic-angular';
 
 @Component({
   templateUrl: 'login.html'
 })
-class Login {
+export class Login {
   user = {
-    name: "Administrator",
-    username: "admin"
+    name: 'Administrator',
+    username: 'admin'
   };
 
   constructor(private events: Events) {}
@@ -20,11 +18,10 @@ class Login {
 
 }
 
-
 @Component({
   templateUrl: 'logout.html'
 })
-class Logout {
+export class Logout {
   constructor(private events: Events) {}
 
   logout() {
@@ -36,7 +33,7 @@ class Logout {
 @Component({
   templateUrl: 'app.html'
 })
-class ApiDemoApp {
+export class ApiDemoApp {
   @ViewChild(Nav) nav: Nav;
 
   root = Login;
@@ -71,5 +68,3 @@ class ApiDemoApp {
     });
   }
 }
-
-ionicBootstrap(ApiDemoApp);

demos/src/events/app.html

@@ -1,8 +1,10 @@
 <ion-menu #menu [content]="content">
 
-  <ion-toolbar secondary>
-    <ion-title>Left Menu</ion-title>
-  </ion-toolbar>
+  <ion-header>
+    <ion-toolbar color="secondary">
+      <ion-title>Left Menu</ion-title>
+    </ion-toolbar>
+  </ion-header>
 
   <ion-content>
 
@@ -11,7 +13,7 @@
         Logged in as <b>Administrator</b>
       </ion-list-header>
       <button ion-item menuClose *ngFor="let p of loggedInPages" (click)="openPage(menu, p)">
-        <ion-label primary>{{p.title}}</ion-label>
+        <ion-label color="primary">{{p.title}}</ion-label>
       </button>
 
       <button ion-item menuToggle>
@@ -25,7 +27,7 @@
         Please Log In
       </ion-list-header>
       <button ion-item menuClose *ngFor="let p of loggedOutPages" (click)="openPage(menu, p)">
-        <ion-label primary>{{p.title}}</ion-label>
+        <ion-label color="primary">{{p.title}}</ion-label>
       </button>
 
       <button ion-item menuToggle>

demos/src/events/app.module.ts

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

demos/src/events/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/events/login.html

@@ -1,7 +1,7 @@
 <ion-header>
 
   <ion-navbar>
-    <button menuToggle>
+    <button ion-button menuToggle>
       <ion-icon name="menu"></ion-icon>
     </button>
 
@@ -20,18 +20,18 @@
 
   <ion-list no-margin>
     <ion-item>
-      <ion-label stacked primary>Name</ion-label>
+      <ion-label stacked color="primary">Name</ion-label>
       <ion-input [(ngModel)]="user.name" disabled></ion-input>
     </ion-item>
     <ion-item>
-      <ion-label stacked primary>Username</ion-label>
+      <ion-label stacked color="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>
+    <button ion-button block (click)="login()">Login</button>
+    <button ion-button block color="secondary" menuToggle>Toggle Menu</button>
   </div>
 
 </ion-content>

demos/src/events/logout.html

@@ -1,7 +1,7 @@
 <ion-header>
 
   <ion-navbar>
-    <button menuToggle>
+    <button ion-button menuToggle>
       <ion-icon name="menu"></ion-icon>
     </button>
 
@@ -17,7 +17,7 @@
   <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>
+    <button ion-button block (click)="logout()">Logout</button>
+    <button ion-button block color="secondary" menuToggle>Toggle Menu</button>
   </div>
 </ion-content>

demos/src/events/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/fab/app.component.ts

@@ -0,0 +1,30 @@
+import { Component } from '@angular/core';
+import { FabContainer } from 'ionic-angular';
+
+@Component({
+  templateUrl: 'page.html'
+})
+export class ApiDemoPage {
+  array: number[] = [];
+
+  add() {
+    this.array.push(1);
+  }
+
+  clickMainFAB() {
+    console.log('Clicked open social menu');
+  }
+
+  openSocial(network: string, fab: FabContainer) {
+    console.log('Share in ' + network);
+    fab.close();
+  }
+}
+
+
+@Component({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+export class ApiDemoApp {
+  root = ApiDemoPage;
+}

demos/src/fab/app.module.ts

@@ -0,0 +1,19 @@
+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/fab/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/fab/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/fab/page.html

@@ -0,0 +1,72 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Floating Action Buttons</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content fullscreen>
+  <div f></div>
+  <div f></div>
+  <div f *ngFor="let a of array"></div>
+
+  <ion-fab top right edge #fab1>
+    <button ion-fab mini (click)="clickMainFAB()"><ion-icon name="add"></ion-icon></button>
+    <ion-fab-list>
+      <button ion-fab (click)="openSocial('facebook', fab1)"><ion-icon name="logo-facebook"></ion-icon></button>
+      <button ion-fab (click)="openSocial('twitter', fab1)"><ion-icon name="logo-twitter"></ion-icon></button>
+      <button ion-fab (click)="openSocial('vimeo', fab1)"><ion-icon name="logo-vimeo"></ion-icon></button>
+      <button ion-fab (click)="openSocial('googleplus', fab1)"><ion-icon name="logo-googleplus"></ion-icon></button>
+    </ion-fab-list>
+  </ion-fab>
+
+  <ion-fab right bottom #fab2>
+    <button ion-fab color="light"><ion-icon name="arrow-dropleft"></ion-icon></button>
+    <ion-fab-list side="left">
+      <button ion-fab (click)="openSocial('facebook', fab2)"><ion-icon name="logo-facebook"></ion-icon></button>
+      <button ion-fab (click)="openSocial('twitter', fab2)"><ion-icon name="logo-twitter"></ion-icon></button>
+      <button ion-fab (click)="openSocial('vimeo', fab2)"><ion-icon name="logo-vimeo"></ion-icon></button>
+      <button ion-fab (click)="openSocial('googleplus', fab2)"><ion-icon name="logo-googleplus"></ion-icon></button>
+    </ion-fab-list>
+  </ion-fab>
+
+  <ion-fab left top #fab3>
+    <button ion-fab color="secondary"><ion-icon name="arrow-dropright"></ion-icon></button>
+    <ion-fab-list side="right">
+      <button ion-fab (click)="openSocial('facebook', fab3)"><ion-icon name="logo-facebook"></ion-icon></button>
+      <button ion-fab (click)="openSocial('twitter', fab3)"><ion-icon name="logo-twitter"></ion-icon></button>
+      <button ion-fab (click)="openSocial('vimeo', fab3)"><ion-icon name="logo-vimeo"></ion-icon></button>
+      <button ion-fab (click)="openSocial('googleplus', fab3)"><ion-icon name="logo-googleplus"></ion-icon></button>
+    </ion-fab-list>
+  </ion-fab>
+
+  <ion-fab left bottom #fab4>
+    <button ion-fab color="dark"><ion-icon name="arrow-dropup"></ion-icon></button>
+    <ion-fab-list side="top">
+      <button ion-fab (click)="openSocial('facebook', fab4)"><ion-icon name="logo-facebook"></ion-icon></button>
+      <button ion-fab (click)="openSocial('twitter', fab4)"><ion-icon name="logo-twitter"></ion-icon></button>
+      <button ion-fab (click)="openSocial('vimeo', fab4)"><ion-icon name="logo-vimeo"></ion-icon></button>
+      <button ion-fab (click)="openSocial('googleplus', fab4)"><ion-icon name="logo-googleplus"></ion-icon></button>
+    </ion-fab-list>
+  </ion-fab>
+
+  <ion-fab center middle #fab5>
+    <button ion-fab color="danger" (click)="clickMainFAB()"><ion-icon name="md-share"></ion-icon></button>
+    <ion-fab-list side="top">
+      <button ion-fab (click)="openSocial('vimeo', fab5)" color="primary"><ion-icon name="logo-vimeo"></ion-icon></button>
+    </ion-fab-list>
+    <ion-fab-list side="bottom">
+      <button ion-fab (click)="openSocial('facebook', fab5)" color="secondary"><ion-icon name="logo-facebook"></ion-icon></button>
+    </ion-fab-list>
+    <ion-fab-list side="left">
+      <button ion-fab (click)="openSocial('googleplus', fab5)" color="light"><ion-icon name="logo-googleplus"></ion-icon></button>
+    </ion-fab-list>
+    <ion-fab-list side="right">
+      <button ion-fab (click)="openSocial('twitter', fab5)" color="dark"><ion-icon name="logo-twitter"></ion-icon></button>
+    </ion-fab-list>
+  </ion-fab>
+
+  <ion-fab right middle>
+    <button ion-fab color="danger" (click)="add()"><ion-icon name="add"></ion-icon></button>
+  </ion-fab>
+
+</ion-content>

demos/src/hide-when/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/hide-when/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/hide-when/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>