fix(action-sheet): remove ios inertia scroll to fix flicker

fixes #13262

.github/CONTRIBUTING.md

@@ -70,7 +70,21 @@ Please see our [Contributor Code of Conduct](https://github.com/ionic-team/ionic
 
 #### Adding Documentation
 
-1. To add or modify API Documentation for a component, it should be added/changed in the `readme.md` file in the component's directory. If the updates are to a specific `@Prop`, `@Event` or `@Method`, then please make the changes to the component's TypeScript (`*.ts`). Properties, events and methods information within the `readme.md` file are auto generated directly from the JSDoc comments within the TypeScript file.
+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/ionic-team/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/ionic-team/ionic-site/issues

.github/ISSUE_TEMPLATE.md

@@ -1,12 +1,18 @@
+<!-- Before submitting an issue, please consult our troubleshooting guide (http://ionicframework.com/docs/troubleshooting/) and developer resources (http://ionicframework.com/docs/developer-resources/) -->
+
+<!-- Please make sure you are posting an issue pertaining to the Ionic Framework. If you are having an issue with the Ionic Pro services (Ionic View, Ionic Deploy, etc.) please consult the Ionic Pro support portal (http://support.ionicjs.com) -->
+
 **Ionic version:**  (check one with "x")
-[ ] **1.x** (For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
+(For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
 [ ] **2.x**
 [ ] **3.x**
+[ ] **4.x**
 
 **I'm submitting a ...**  (check one with "x")
 [ ] bug report
 [ ] feature request
-[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/
+
+Please do not submit support requests or "How to" questions here. Instead, please use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/
 
 **Current behavior:**
 <!-- Describe how the bug manifests. -->
@@ -15,17 +21,22 @@
 <!-- Describe what the behavior would be without the bug. -->
 
 **Steps to reproduce:**
-<!-- If you are able to illustrate the bug or feature request with an example, please provide steps to reproduce and if possible a demo using one of the following templates:
-
-For Ionic V1 issues - http://plnkr.co/edit/Xo1QyAUx35ny1Xf9ODHx?p=preview
-
-For Ionic issues - http://plnkr.co/edit/z0DzVL?p=preview
--->
+<!--  Please explain the steps required to duplicate the issue, especially if you are able to provide a sample application. -->
 
 **Related code:**
 
+<!-- If you are able to illustrate the bug or feature request with an example, please provide a sample application via one of the following means:
+
+A sample application via GitHub
+
+StackBlitz (https://stackblitz.com)
+
+Plunker (http://plnkr.co/edit/cpeRJs?p=preview)
+
+-->
+
 ```
-insert any relevant code here
+insert short code snippets here
 ```
 
 **Other information:**

.github/ionic-issue-bot.yml

@@ -1,29 +0,0 @@
-triage:
-  label: triage
-  dryRun: false
-
-support:
-  label: support
-  message: >
-    Thanks for the issue! This issue appears to be a support request. We use this issue tracker exclusively for
-    bug reports and feature requests. Please use our [forum](https://forum.ionicframework.com) or our
-    [slack channel](https://ionicworldwide.herokuapp.com/) for questions about the framework.
-    
-    
-    Thank you for using Ionic!
-  close: true
-  lock: true
-  dryRun: false
-
-incomplete:
-  label: missing template
-  message: >
-    Thanks for the issue! It appears that you have not filled out the provided issue template. We use this issue
-    template in order to gather more information and further assist you. Please create a new issue and ensure the
-    template is fully filled out.
-    
-    
-    Thank you for using Ionic!
-  close: true
-  lock: true
-  dryRun: false

.gitignore

@@ -9,17 +9,15 @@ log.txt
 *.sublime-workspace
 
 .idea/
+.sourcemaps/
 .vscode/
 .sass-cache/
 .versions/
 coverage/
-collection/
 dist/
 node_modules/
 tmp/
 temp/
-packages/core/theme-builder/
-packages/core/test-components/
 $RECYCLE.BIN/
 
 .DS_Store
@@ -34,8 +32,6 @@ scripts/e2e/webpackEntryPoints.json
 scripts/build/e2e-generated-tsconfig.json
 *.css.ts
 
-stencil-stats.json
-
 # demo stuff
 demos/node_modules
 demos/polyfills

.scss-lint.yml

@@ -4,16 +4,12 @@
 
 plugin_directories: ['.scss-linters']
 
-scss_files: 'src/**/*.scss'
-
 exclude:
   - 'src/themes/ionic.mixins.scss'
   - 'src/themes/license.scss'
-  - 'src/themes/normalize.scss'
   - 'src/themes/util.scss'
   - 'src/themes/version.scss'
   - 'src/platform/cordova.*.scss'
-  - 'src/components/slides/slides-vendor.scss'
 
 
 linters:
@@ -39,12 +35,9 @@ linters:
 
       # Box
 
-      - box-sizing
       - position
       - top
-      - right
       - bottom
-      - left
       - z-index
       - display
       - overflow
@@ -114,13 +107,10 @@ linters:
       - font
       - font-family
       - font-size
-      - -moz-osx-font-smoothing
-      - -webkit-font-smoothing
-      - font-smooth
+      - font-smoothing
       - font-style
       - font-variant
       - font-weight
-      - src
 
       - letter-spacing
       - line-height

BREAKING.md

@@ -1,908 +0,0 @@
-
-# Breaking Changes
-
-A list of the breaking changes introduced in Ionic Angular v4.
-
-- [Dynamic Mode](#dynamic-mode)
-- [Button](#button)
-- [Chip](#chip)
-- [Colors](#colors)
-- [Datetime](#datetime)
-- [FAB](#fab)
-- [Fixed Content](#fixed-content)
-- [Icon](#icon)
-- [Input](#Input)
-- [Item](#item)
-- [Item Divider](#item-divider)
-- [Item Sliding](#item-sliding)
-- [List Header](#list-header)
-- [Menu Toggle](#menu-toggle)
-- [Nav](#nav)
-- [Option](#option)
-- [Radio](#radio)
-- [Range](#range)
-- [Segment](#segment)
-- [Select](#select)
-- [Text/Typography](#text-typography)
-- [Theming](#theming)
-- [Toolbar](#toolbar)
-
-
-## Dynamic Mode
-
-Components are no longer able to have their mode changed dynamically. You can change the mode before the first render, but after that it will not style properly because only the initial mode's styles are included.
-
-## Button
-
-### Markup Changed
-
-Button should now be written as an `<ion-button>` element. Ionic will determine when to render an anchor tag based on the presence of an `href` attribute.
-
-**Old Usage Example:**
-
-```html
-<button ion-button (click)="doSomething()">
-  Default Button
-</button>
-
-<a ion-button href="#">
-  Default Anchor
-</a>
-```
-
-**New Usage Example:**
-
-```html
-<ion-button (click)="doSomething()">
-  Default Button
-</ion-button>
-
-<ion-button href="#">
-  Default Anchor
-</ion-button>
-```
-
-### Attributes Renamed
-
-Previously to style icons inside of a button the following attributes were used: `icon-left`, `icon-right`, (and with the added support of RTL) `icon-start`, `icon-end`.
-
-These have been renamed to the following, and moved from the button element to the icon itself:
-
-| Old Property              | New Property   | Property Behavior                                                     |
-|---------------------------|----------------|-----------------------------------------------------------------------|
-| `icon-left`, `icon-start` | `slot="start"` | Positions to the left of the button in LTR, and to the right in RTL.  |
-| `icon-right`, `icon-end`  | `slot="end"`   | Positions to the right of the button in LTR, and to the left in RTL.  |
-
-In addition, several sets of mutually exclusive boolean attributes have been combined into a single string attribute.
-
-The `small` and `large` attributes are now combined under the `size` attribute. The `clear`, `outline`, and `solid` attributes have been combined under `fill`. And, lastly, the `full` and `block` attributes have been combined under `expand`.
-
-| Old Property                | New Property | Property Behavior           |
-| --------------------------- | ------------ | --------------------------- |
-| `small`, `large`            | `size`       |  Sets the button size.      |
-| `clear`, `outline`, `solid` | `fill`       | Sets the button fill style. |
-| `full`, `block`             | `expand`     | Sets the button width.      |
-
-
-**Old Usage Example:**
-
-```html
-<ion-button icon-left>
-  <ion-icon name="home"></ion-icon>
-  Icon Left
-</ion-button>
-
-<ion-button icon-start>
-  <ion-icon name="home"></ion-icon>
-  Icon Left on LTR, Right on RTL
-</ion-button>
-
-<ion-button icon-right>
-  Icon Right
-  <ion-icon name="home"></ion-icon>
-</ion-button>
-
-<ion-button icon-end>
-  Icon Right on LTR, Left on RTL
-  <ion-icon name="home"></ion-icon>
-</ion-button>
-
-<ion-button large>
-  Large Button
-</ion-button>
-
-<ion-button outline>
-  Outline Button
-</ion-button>
-
-<ion-button full>
-  Full-width Button
-</ion-button>
-```
-
-**New Usage Example:**
-
-```html
-<ion-button>
-  <ion-icon slot="start" name="home"></ion-icon>
-  Icon Left on LTR, Right on RTL
-</ion-button>
-
-<ion-button>
-  Icon Right on LTR, Left on RTL
-  <ion-icon slot="end" name="home"></ion-icon>
-</ion-button>
-
-<ion-button size="large">
-  Large Button
-</ion-button>
-
-<ion-button fill="outline">
-  Outline Button
-</ion-button>
-
-<ion-button expand="full">
-  Full-width Button
-</ion-button>
-```
-
-## Chip
-
-### Markup Changed
-
-Buttons inside of an `<ion-chip>` container should now be written as an `<ion-chip-button>` element. Ionic will determine when to render an anchor tag based on the presence of an `href` attribute.
-
-**Old Usage Example:**
-
-```html
-<ion-chip>
-  <ion-label>Default</ion-label>
-  <ion-button clear color="light">
-    <ion-icon name="close-circle"></ion-icon>
-  </ion-button>
-</ion-chip>
-```
-
-**New Usage Example:**
-
-```html
-<ion-chip>
-  <ion-label>Default</ion-label>
-  <ion-chip-button fill="clear" color="light">
-    <ion-icon name="close-circle"></ion-icon>
-  </ion-chip-button>
-</ion-chip>
-```
-
-
-## Colors
-
-The default Ionic theme colors have changed. Previously we had:
-
-```
-primary:         #327eff
-secondary:       #32db64
-danger:          #f53d3d
-light:           #f4f4f4
-dark:            #222
-```
-
-Some of their values have changed and we now include more colors by default:
-
-```
-primary:         #3880ff
-secondary:       #0cd1e8
-tertiary:        #7044ff
-success:         #10dc60
-warning:         #ffce00
-danger:          #f04141
-light:           #f4f5f8
-medium:          #989aa2
-dark:            #222428
-```
-
-The `secondary` color saw the largest change. If you were previously using our `secondary` color we recommend switching to `success` instead.
-
-
-## Datetime
-
-The Datetime classes and interfaces have changed capitalization from `DateTime` to `Datetime`. This is more consistent with other components and their tags.
-
-**Old Usage Example:**
-
-```javascript
-import { DateTime } from 'ionic-angular';
-```
-
-**New Usage Example:**
-
-```javascript
-import { Datetime } from 'ionic-angular';
-```
-
-## FAB
-
-### Markup Changed
-
-Buttons inside of an `<ion-fab>` container should now be written as an `<ion-fab-button>` element. Ionic will determine when to render an anchor tag based on the presence of an `href` attribute.
-
-**Old Usage Example:**
-
-```html
-<ion-fab top right edge>
-  <button ion-fab>
-    <ion-icon name="add"></ion-icon>
-  </button>
-  <ion-fab-list>
-    <button ion-fab>
-      <ion-icon name="logo-facebook"></ion-icon>
-    </button>
-    <button ion-fab>
-      <ion-icon name="logo-twitter"></ion-icon>
-    </button>
-    <button ion-fab>
-      <ion-icon name="logo-vimeo"></ion-icon>
-    </button>
-    <button ion-fab>
-      <ion-icon name="logo-googleplus"></ion-icon>
-    </button>
-  </ion-fab-list>
-</ion-fab>
-```
-
-**New Usage Example:**
-
-```html
-<ion-fab top right edge>
-  <ion-fab-button>
-    <ion-icon name="add"></ion-icon>
-  </ion-fab-button>
-  <ion-fab-list>
-    <ion-fab-button>
-      <ion-icon name="logo-facebook"></ion-icon>
-    </ion-fab-button>
-    <ion-fab-button>
-      <ion-icon name="logo-twitter"></ion-icon>
-    </ion-fab-button>
-    <ion-fab-button>
-      <ion-icon name="logo-vimeo"></ion-icon>
-    </ion-fab-button>
-    <ion-fab-button>
-      <ion-icon name="logo-googleplus"></ion-icon>
-    </ion-fab-button>
-  </ion-fab-list>
-</ion-fab>
-```
-
-### Fixed Content
-
-The `<ion-fab>` container was previously placed inside of the fixed content by default. Now, any fixed content should go inside of the `<ion-fixed>` container.
-
-**Old Usage Example:**
-
-```html
-<ion-content>
-  <ion-fab top right edge>
-    <!-- fab buttons and lists -->
-  </ion-fab>
-  Scrollable Content
-</ion-content>
-```
-
-**New Usage Example:**
-
-```html
-<ion-fixed>
-  <ion-fab top right edge>
-    <!-- fab buttons and lists -->
-  </ion-fab>
-</ion-fixed>
-<ion-content>
-  Scrollable Content
-</ion-content>
-```
-
-## Icon
-
-### Fonts Removed
-
-Icons have been refactored to use SVGs instead of fonts. Ionic will only fetch the SVG for the icon when it is needed, instead of having a large font file that is always loaded in.
-
-If any `CSS` is being overridden for an icon it will need to change to override the SVG itself. Below is a usage example of the differences in changing the icon color.
-
-**Old Usage Example:**
-
-```css
-.icon {
-  color: #000;
-}
-```
-
-**New Usage Example:**
-
-```css
-.icon {
-  fill: #000;
-}
-```
-
-### Property Removed
-
-The `isActive` property has been removed. It only worked for `ios` icons previously. If you would like to switch between an outline and solid icon you should set it in the `name`, or `ios`/`md` attribute and then change it when needed.
-
-## Input
-
-The Sass variables were all renamed from having `$text-input` as the prefix to `$input`.
-
-**Old Usage Example:**
-
-```css
-$text-input-highlight-color-valid:       #32db64;
-```
-
-**New Usage Example:**
-
-```css
-$input-highlight-color-valid:       #32db64;
-```
-
-
-## Item
-
-### Markup Changed
-
-Item should now be written as an `<ion-item>` element. Ionic will determine when to render an anchor tag based on the presence of an `href` attribute, and a button tag based on the presence of an `onclick` or `tappable` attribute. Otherwise, it will render a div.
-
-**Old Usage Example:**
-
-```html
-<ion-item>
-  Default Item
-</ion-item>
-
-<button ion-item (click)="doSomething()">
-  Button Item
-</button>
-
-<a ion-item href="#">
-  Anchor Item
-</a>
-```
-
-**New Usage Example:**
-
-```html
-<ion-item>
-  Default Item
-</ion-item>
-
-<ion-item tappable (click)="doSomething()">
-  Button Item
-</ion-item>
-
-<ion-item href="#">
-  Anchor Item
-</ion-item>
-```
-
-### Label Required
-
-Previously an `ion-label` would automatically get added to an `ion-item` if one wasn't provided. Now an `ion-label` should always be added if the component is used to display text.
-
-```html
-<ion-item>
-  <ion-label>Item Label</ion-label>
-</ion-item>
-```
-
-### Attributes Renamed
-
-Previously to position elements inside of an `ion-item` the following attributes were used: `item-left`, `item-right`, (and with the added support of RTL) `item-start`, `item-end`.
-
-These have been renamed to the following:
-
-| Old Property              | New Property   | Property Behavior                                                   |
-|---------------------------|----------------|---------------------------------------------------------------------|
-| `item-left`, `item-start` | `slot="start"` | Positions to the left of the item in LTR, and to the right in RTL.  |
-| `item-right`, `item-end`  | `slot="end"`   | Positions to the right of the item in LTR, and to the left in RTL.  |
-
-
-**Old Usage Example:**
-
-```html
-<ion-item>
-  <div item-left>Left</div>
-  <ion-label>Item Label</ion-label>
-  <div item-right>Right</div>
-</ion-item>
-
-<ion-item>
-  <div item-start>Left on LTR, Right on RTL</div>
-  <ion-label>Item Label</ion-label>
-  <div item-end>Right on LTR, Left on RTL</div>
-</ion-item>
-```
-
-**New Usage Example:**
-
-```html
-<ion-item>
-  <div slot="start">Left on LTR, Right on RTL</div>
-  <ion-label>Item Label</ion-label>
-  <div slot="end">Right on LTR, Left on RTL</div>
-</ion-item>
-```
-
-### Detail Push
-
-The attributes to show/hide the detail arrows on items have been converted to a single property and value. Instead of writing `detail-push` or `detail-none` to show/hide the arrow, it should be written `detail`/`detail="true"` or `detail="false"`.
-
-**Old Usage Example:**
-
-```html
-<button ion-item detail-none>
-  <ion-label>Item Label</ion-label>
-</button>
-
-<ion-item detail-push>
-  <ion-label>Item Label</ion-label>
-</ion-item>
-```
-
-**New Usage Example:**
-
-```html
-<ion-item tappable detail="false">
-  <ion-label>Item Label</ion-label>
-</ion-item>
-
-<ion-item detail>
-  <ion-label>Item Label</ion-label>
-</ion-item>
-```
-
-By default, items that render buttons or anchor tags will show the arrow in `ios` mode.
-
-## Item Divider
-
-### Label Required
-
-Previously an `ion-label` would automatically get added to an `ion-item-divider` if one wasn't provided. Now an `ion-label` should always be added if the component is used to display text.
-
-```html
-<ion-item-divider>
-  <ion-label>Item Divider Label</ion-label>
-</ion-item-divider>
-```
-
-## List Header
-
-### Label Required
-
-Previously an `ion-label` would automatically get added to an `ion-list-header` if one wasn't provided. Now an `ion-label` should always be added if the component is used to display text.
-
-```html
-<ion-list-header>
-  <ion-label>List Header Label</ion-label>
-</ion-list-header>
-```
-
-## Menu Toggle
-
-### Markup Changed
-
-The `menuToggle` attribute should not be added to an element anymore. Elements that should toggle a menu should be wrapped in an `ion-menu-toggle` element.
-
-**Old Usage Example:**
-
-```html
-<button ion-button menuToggle>
-  Toggle Menu
-</button>
-```
-
-**New Usage Example:**
-
-```html
-<ion-menu-toggle>
-  <ion-button>
-    Toggle Menu
-  </ion-button>
-</ion-menu-toggle>
-```
-
-## Item Sliding
-
-### Markup Changed
-
-The option component should not be written as a `button` with an `ion-button` directive anymore. It should be written as an `ion-item-option`. This will render a native button element inside of it.
-
-**Old Usage Example:**
-
-```html
-<ion-item-sliding>
-  <ion-item>
-    Item 1
-  </ion-item>
-  <ion-item-options side="right">
-    <button ion-button expandable>
-      <ion-icon name="star"></ion-icon>
-    </button>
-  </ion-item-options>
-</ion-item-sliding>
-```
-
-**New Usage Example:**
-
-```html
-<ion-item-sliding>
-  <ion-item>
-    <ion-label>Item 1</ion-label>
-  </ion-item>
-  <ion-item-options side="right">
-    <ion-item-option expandable>
-      <ion-icon name="star"></ion-icon>
-    </ion-item-option>
-  </ion-item-options>
-</ion-item-sliding>
-```
-
-### Method Renamed
-
-The `getSlidingPercent` method has been renamed to `getSlidingRatio` since the function is returning a ratio of the open amount of the item compared to the width of the options.
-
-
-## Toolbar
-
-Previously if a `menuToggle` directive was added to an Ionic `button` in a toolbar, it would be positioned outside of the `ion-buttons` element. Since menu toggle is simply a wrapper to a button now, it should be placed inside of the `ion-buttons` element.
-
-**Old Usage Example:**
-
-```html
-<ion-toolbar>
-  <button ion-button menuToggle>
-    <ion-icon name="menu"></ion-icon>
-  </button>
-  <ion-title>Left side menu toggle</ion-title>
-</ion-toolbar>
-```
-
-**New Usage Example:**
-
-```html
-<ion-toolbar>
-  <ion-buttons slot="start">
-    <ion-menu-toggle>
-      <ion-button>
-        <ion-icon slot="icon-only" name="menu"></ion-icon>
-      </ion-button>
-    </ion-menu-toggle>
-  </ion-buttons>
-  <ion-title>Left side menu toggle</ion-title>
-</ion-toolbar>
-```
-
-## Nav
-
-### Method renamed
-
-The `remove` method has been renamed to `removeIndex` to avoid conflicts with HTML and be more descriptive as to what it does.
-
-The `getActiveChildNavs` method has been renamed to `getChildNavs`.
-
-## Option
-
-### Markup Changed
-
-Select's option element should now be written as `<ion-select-option>`. This makes it more obvious that the element should only be used with a Select.
-
-**Old Usage Example:**
-
-```html
-<ion-select>
-  <ion-option>Option 1</ion-option>
-  <ion-option>Option 2</ion-option>
-  <ion-option>Option 3</ion-option>
-</ion-select>
-```
-
-**New Usage Example:**
-
-```html
-<ion-select>
-  <ion-select-option>Option 1</ion-select-option>
-  <ion-select-option>Option 2</ion-select-option>
-  <ion-select-option>Option 3</ion-select-option>
-</ion-select>
-```
-
-### Class Changed
-
-The class has been renamed from `Option` to `SelectOption` to keep it consistent with the element tag name.
-
-## Radio
-
-### Slot Required
-
-Previously radio was positioned inside of an item automatically or by using `item-left`/`item-right`. It is now required to have a `slot` to be positioned properly.
-
-** Old Usage Example **
-
-```html
-<ion-item>
-  <ion-label>Apple</ion-label>
-  <ion-radio value="apple"></ion-radio>
-</ion-item>
-
-<ion-item>
-  <ion-label>Grape, checked, disabled</ion-label>
-  <ion-radio item-left value="grape" checked disabled></ion-radio>
-</ion-item>
-
-<ion-item>
-  <ion-label>Cherry</ion-label>
-  <ion-radio item-right color="danger" value="cherry"></ion-radio>
-</ion-item>
-```
-
-** New Usage Example **
-
-```html
-<ion-item>
-  <ion-label>Apple</ion-label>
-  <ion-radio slot="start" value="apple"></ion-radio>
-</ion-item>
-
-<ion-item>
-  <ion-label>Grape, checked, disabled</ion-label>
-  <ion-radio slot="start" value="grape" checked disabled></ion-radio>
-</ion-item>
-
-<ion-item>
-  <ion-label>Cherry</ion-label>
-  <ion-radio slot="end" color="danger" value="cherry"></ion-radio>
-</ion-item>
-```
-
-### Radio Group
-
-Radio group has been changed to an element. It should now be wrapped around any `<ion-radio>` elements as `<ion-radio-group>`.
-
-** Old Usage Example **
-
-```html
-<ion-list radio-group>
-  <ion-item>
-    <ion-label>Apple</ion-label>
-    <ion-radio value="apple"></ion-radio>
-  </ion-item>
-
-  <ion-item>
-    <ion-label>Grape, checked, disabled</ion-label>
-    <ion-radio value="grape" checked disabled></ion-radio>
-  </ion-item>
-
-  <ion-item>
-    <ion-label>Cherry</ion-label>
-    <ion-radio color="danger" value="cherry"></ion-radio>
-  </ion-item>
-</ion-list>
-```
-
-** New Usage Example **
-
-```html
-<ion-list>
-  <ion-radio-group>
-    <ion-item>
-      <ion-label>Apple</ion-label>
-      <ion-radio slot="start" value="apple"></ion-radio>
-    </ion-item>
-
-    <ion-item>
-      <ion-label>Grape, checked, disabled</ion-label>
-      <ion-radio slot="start" value="grape" checked disabled></ion-radio>
-    </ion-item>
-
-    <ion-item>
-      <ion-label>Cherry</ion-label>
-      <ion-radio slot="start" color="danger" value="cherry"></ion-radio>
-    </ion-item>
-  </ion-radio-group>
-</ion-list>
-```
-
-
-## Range
-
-### Attributes Renamed
-
-Previously to place content inside of a range the following attributes were used: `range-left`, `range-right`, (and with the added support of RTL) `range-start`, `range-end`.
-
-These have been renamed to the following:
-
-| Old Property                | New Property   | Property Behavior                                                     |
-|-----------------------------|----------------|-----------------------------------------------------------------------|
-| `range-left`, `range-start` | `slot="start"` | Positions to the left of the range in LTR, and to the right in RTL.   |
-| `range-right`, `range-end`  | `slot="end"`   | Positions to the right of the range in LTR, and to the left in RTL.   |
-
-
-**Old Usage Example:**
-
-```html
-<ion-range>
-  <ion-icon name="sunny" range-left></ion-icon>
-  <ion-icon name="sunny" range-right></ion-icon>
-</ion-range>
-
-<ion-range>
-  <ion-icon name="sunny" range-start></ion-icon>
-  <ion-icon name="sunny" range-end></ion-icon>
-</ion-range>
-```
-
-**New Usage Example:**
-
-```html
-<ion-range>
-  <ion-icon name="sunny" slot="start"></ion-icon>
-  <ion-icon name="sunny" slot="end"></ion-icon>
-</ion-range>
-```
-
-
-## Segment
-
-The markup hasn't changed for Segments, but now writing `<ion-segment-button>` will render a native button element inside of it.
-
-
-## Select
-
-The `selectOptions` property was renamed to `interfaceOptions` since it directly correlates with the `interface` property.
-
-**Old Usage Example:**
-
-```html
-<ion-select [selectOptions]="customOptions">
-  ...
-</ion-select>
-```
-
-```ts
-this.customOptions = {
-  title: 'Pizza Toppings',
-  subTitle: 'Select your toppings'
-};
-```
-
-**New Usage Example:**
-
-```html
-<ion-select [interfaceOptions]="customOptions">
-  ...
-</ion-select>
-```
-
-```ts
-this.customOptions = {
-  title: 'Pizza Toppings',
-  subTitle: 'Select your toppings'
-};
-```
-
-## Text / Typography
-
-### Markup Changed
-
-Typography should now be written as an `<ion-text>` element. Previously the `ion-text` attribute could be added to any HTML element to set its color. It should now be used as a wrapper around the HTML elements to style.
-
-**Old Usage Example:**
-
-```html
-<h1 ion-text color="secondary">H1: The quick brown fox jumps over the lazy dog</h1>
-
-<h2 ion-text color="primary">H2: The quick brown fox jumps over the lazy dog</h2>
-
-<h3 ion-text color="light">H3: The quick brown fox jumps over the lazy dog</h3>
-
-<p>
-  I saw a werewolf with a Chinese menu in his hand.
-  Walking through the <sub ion-text color="danger">streets</sub> of Soho in the rain.
-  He <i ion-text color="primary">was</i> looking for a place called Lee Ho Fook's.
-  Gonna get a <a ion-text color="secondary">big dish of beef chow mein.</a>
-</p>
-```
-
-**New Usage Example:**
-
-```html
-<ion-text color="secondary">
-  <h1>H1: The quick brown fox jumps over the lazy dog</h1>
-</ion-text>
-
-<ion-text color="primary">
-  <h2>H2: The quick brown fox jumps over the lazy dog</h2>
-</ion-text>
-
-<ion-text color="light">
-  <h3>H3: The quick brown fox jumps over the lazy dog</h3>
-</ion-text>
-
-<p>
-  I saw a werewolf with a Chinese menu in his hand.
-  Walking through the <ion-text color="danger"><sub>streets</sub></ion-text> of Soho in the rain.
-  He <ion-text color="primary"><i>was</i></ion-text> looking for a place called Lee Ho Fook's.
-  Gonna get a <ion-text color="secondary"><a>big dish of beef chow mein.</a></ion-text>
-</p>
-```
-
-
-## Theming
-
-### Including Sass
-
-Previously all `scss` files in the `src` directory were imported. Now each `scss` file should be included for the component via Angular's `styleUrls` metadata. View [Angular's Component Styles](https://angular.io/guide/component-styles) for more information.
-
-This means that any styles wrapped with a page should now be removed since they will automatically be scoped to the component.
-
-**Old Usage Example:**
-
-```scss
-page-schedule {
-  p {
-    color: red;
-  }
-}
-```
-
-**New Usage Example:**
-
-```scss
-p {
-  color: red;
-}
-```
-
-
-### Sass Variables
-
-Sass variables for changing the cordova statusbar have been renamed to app:
-
-**Old Usage Example:**
-
-```css
-$cordova-ios-statusbar-padding:   20px;
-$cordova-md-statusbar-padding:    20px;
-```
-
-**New Usage Example:**
-
-```css
-$app-ios-statusbar-padding:   20px;
-$app-md-statusbar-padding:    20px;
-```
-
-
-## Toolbar
-
-### Attributes Renamed
-
-The attributes to position an `ion-buttons` element inside of a toolbar have been renamed, as well as the behavior attached to the name. We noticed there was some confusion behind the behavior of the `start` and `end` attributes, and with the new support for RTL we wanted to make the behavior of these match RTL. In order to do this we had to rename the old `start`/`end` to something that makes more sense with their behavior.
-
-The names and behavior of each of the properties was previously:
-
-| Old Property | Property Behavior                                                                                            |
-|--------------|--------------------------------------------------------------------------------------------------------------|
-| `start`      | Positions element to the left of the content in `ios` mode, and directly to the right in `md` and `wp` mode. |
-| `end`        | Positions element to the right of the content in `ios` mode, and to the far right in `md` and `wp` mode.     |
-| `left`       | Positions element to the left of all other elements.                                                         |
-| `right`      | Positions element to the right of all other elements.                                                        |
-
-The properties have been renamed to the following:
-
-| Old Property | New Property        | Property Behavior                                                                                                |
-|--------------|---------------------|------------------------------------------------------------------------------------------------------------------|
-| `start`      | `slot="mode-start"` | Positions element to the `left` of the content in `ios` mode, and directly to the `right` in `md` and `wp` mode. |
-| `end`        | `slot="mode-end"`   | Positions element to the `right` of the content in `ios` mode, and to the far right in `md` and `wp` mode.       |
-| `left`       | `slot="start"`      | Positions element to the `left` of all other elements in `LTR`, and to the `right` in `RTL`.                     |
-| `right`      | `slot="end"`        | Positions element to the `right` of all other elements in `LTR`, and to the `left` in `RTL`.                     |

LICENSE

@@ -20,4 +20,4 @@ MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
 NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
 LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
 OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
-WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

README.md

@@ -1,16 +1,17 @@
+[![npm version](https://badge.fury.io/js/ionic-angular.svg)](https://badge.fury.io/js/ionic-angular)
+[![Circle CI](https://circleci.com/gh/ionic-team/ionic.svg?style=shield&circle-token=:circle-token)](https://circleci.com/gh/ionic-team/ionic)
+
 # Ionic
 
 [Ionic](https://ionicframework.com/) is the open-source mobile app development framework that makes it easy to
 build top quality native and progressive web apps with web technologies.
 
-Ionic is based on [Web Components](https://www.webcomponents.org/introduction) and comes with many significant performance, usability, and feature improvements over the past versions.
-
-
-# Packages
-
-- [Core](packages/core/README.md)
-- [Ionic Angular](packages/ionic-angular/README.md)
+Ionic is based on [Angular](https://angular.io/) and comes with many significant performance, usability, and
+feature improvements over the past versions.
 
+See the [Building Apps with Ionic](https://adamdbradley.github.io/building-with-ionic2) slides for a quick
+overview or watch our [Crash Course](https://youtu.be/O2WiI9QrS5s) video for a quick walkthrough on how to get
+started using Ionic.
 
 ### Getting Started
 
@@ -18,7 +19,6 @@ Start a new project by following our quick [Getting Started guide](https://ionic
 We would love to hear from you! If you have any feedback or run into issues using our framework, please file
 an [issue](https://github.com/ionic-team/ionic/issues/new) on this repository.
 
-
 ### Contributing
 
 Thanks for your interest in contributing! Read up on our guidelines for
@@ -26,22 +26,11 @@ Thanks for your interest in contributing! Read up on our guidelines for
 and then look through our issues with a [help wanted](https://github.com/ionic-team/ionic/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22)
 label.
 
-
 ### Examples
 
 The [Ionic Conference App](https://github.com/ionic-team/ionic-conference-app) is a full featured Ionic app.
 It is the perfect starting point for learning and building your own app.
 
-
-### Future Goals
-
-As Ionic components migrate to the web component standard, a goal of ours is to have Ionic components easily work within all of the popular frameworks.
-
-[![npm version](https://badge.fury.io/js/ionic-angular.svg)](https://badge.fury.io/js/ionic-angular)
-[![Circle CI](https://circleci.com/gh/ionic-team/ionic.svg?style=shield&circle-token=:circle-token)](https://circleci.com/gh/ionic-team/ionic)
-[![Open Source Helpers](https://www.codetriage.com/ionic-team/ionic/badges/users.svg)](https://www.codetriage.com/ionic-team/ionic)
-
-
 ### Ionic V1
 
 The source code for Ionic V1 has been moved to [ionic-team/ionic-v1](https://github.com/ionic-team/ionic-v1).

circle.yml

@@ -6,6 +6,7 @@ jobs:
       - image: node:7
     branches:
       ignore:
+        - mono-refactor
         - core
     steps:
       - checkout
@@ -13,7 +14,7 @@ jobs:
          key: ionic-site
       - run:
          name: Prepare ionic-site repo
-         command: ./packages/ionic-angular/scripts/docs/prepare.sh
+         command: ./scripts/docs/prepare.sh
       - save_cache:
          key: ionic-site
          paths:
@@ -41,7 +42,7 @@ jobs:
           name: Update docs
           command: |
             if [ "${CIRCLE_BRANCH}" == "master" ]; then
-              ./packages/ionic-angular/scripts/ci/deploy.sh
+              ./scripts/ci/deploy.sh
             else
               echo "We are on ${CIRCLE_BRANCH} branch, not going to update docs."
             fi

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

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+import { PageOne } from '../pages/page-one/page-one';
+
+@Component({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+export class AppComponent {
+  root = PageOne;
+}

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

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { IonicApp, IonicModule } from '../../../../src';
+
+import { AppComponent } from './app.component';
+import { PageOneModule } from '../pages/page-one/page-one.module';
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule,
+    IonicModule.forRoot(AppComponent),
+    PageOneModule
+  ],
+  bootstrap: [IonicApp]
+})
+export class AppModule {}

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

@@ -0,0 +1,5 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);

demos/src/action-sheet/pages/page-one/page-one.html

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

demos/src/action-sheet/pages/page-one/page-one.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { IonicPageModule } from '../../../../../src';
+
+import { PageOne } from './page-one';
+
+@NgModule({
+  declarations: [
+    PageOne,
+  ],
+  imports: [
+    IonicPageModule.forChild(PageOne),
+  ],
+  entryComponents: [
+    PageOne,
+  ]
+})
+export class PageOneModule {}

demos/src/action-sheet/pages/page-one/page-one.ts

@@ -0,0 +1,57 @@
+import { Component } from '@angular/core';
+import { ActionSheetController, Platform } from '../../../../../src';
+
+
+@Component({
+  templateUrl: 'page-one.html'
+})
+export class PageOne {
+  constructor(public alertCtrl: ActionSheetController, public platform: Platform) { }
+
+  present() {
+    let actionSheet = this.alertCtrl.create({
+      title: 'Albums',
+      buttons: [
+        {
+          text: 'Delete',
+          role: 'destructive',
+          icon: !this.platform.is('ios') ? 'trash' : null,
+          handler: () => {
+            console.log('Delete clicked');
+          }
+        },
+        {
+          text: 'Share',
+          icon: !this.platform.is('ios') ? 'share' : null,
+          handler: () => {
+            console.log('Share clicked');
+          }
+        },
+        {
+          text: 'Play',
+          icon: !this.platform.is('ios') ? 'arrow-dropright-circle' : null,
+          handler: () => {
+            console.log('Play clicked');
+          }
+        },
+        {
+          text: 'Favorite',
+          icon: !this.platform.is('ios') ? 'heart-outline' : null,
+          handler: () => {
+            console.log('Favorite clicked');
+          }
+        },
+        {
+          text: 'Cancel',
+          role: 'cancel', // will always sort to be on the bottom
+          icon: !this.platform.is('ios') ? 'close' : null,
+          handler: () => {
+            console.log('Cancel clicked');
+          }
+        }
+      ]
+    });
+
+    actionSheet.present();
+  }
+}

demos/src/alert/app/app.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+import { PageOne } from '../pages/page-one/page-one';
+
+@Component({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+export class AppComponent {
+  root = PageOne;
+}

demos/src/alert/app/app.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { IonicApp, IonicModule } from '../../../../src';
+
+import { AppComponent } from './app.component';
+import { PageOneModule } from '../pages/page-one/page-one.module';
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule,
+    IonicModule.forRoot(AppComponent),
+    PageOneModule
+  ],
+  bootstrap: [IonicApp]
+})
+export class AppModule {}

demos/src/alert/app/main.ts

@@ -0,0 +1,5 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);

demos/src/alert/pages/page-one/page-one.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/alert/pages/page-one/page-one.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { IonicPageModule } from '../../../../../src';
+
+import { PageOne } from './page-one';
+
+@NgModule({
+  declarations: [
+    PageOne,
+  ],
+  imports: [
+    IonicPageModule.forChild(PageOne),
+  ],
+  entryComponents: [
+    PageOne,
+  ]
+})
+export class PageOneModule {}

demos/src/alert/pages/page-one/page-one.ts

@@ -0,0 +1,209 @@
+import { Component } from '@angular/core';
+import { AlertController } from '../../../../../src';
+
+@Component({
+  templateUrl: 'page-one.html'
+})
+export class PageOne {
+  testRadioOpen = false;
+  testRadioResult: any;
+  testCheckboxOpen = false;
+  testCheckboxResult: any;
+
+  constructor(public alertCtrl: AlertController) {}
+
+  doAlert() {
+    let alert = this.alertCtrl.create({
+      title: 'New Friend!',
+      subTitle: 'Your friend, Obi wan Kenobi, just accepted your friend request!',
+      buttons: ['Ok']
+    });
+
+    alert.present();
+  }
+
+  doConfirm() {
+    let alert = this.alertCtrl.create({
+      title: 'Use this lightsaber?',
+      message: 'Do you agree to use this lightsaber to do good across the intergalactic galaxy?',
+      buttons: [
+        {
+          text: 'Disagree',
+          handler: () => {
+            console.log('Disagree clicked');
+          }
+        },
+        {
+          text: 'Agree',
+          handler: () => {
+            console.log('Agree clicked');
+          }
+        }
+      ]
+    });
+
+    alert.present();
+  }
+
+  doPrompt() {
+    let alert = this.alertCtrl.create({
+      title: 'Login',
+      message: 'Enter a name for this new album you\'re so keen on adding',
+      inputs: [
+        {
+          name: 'title',
+          placeholder: 'Title'
+        },
+      ],
+      buttons: [
+        {
+          text: 'Cancel',
+          handler: () => {
+            console.log('Cancel clicked');
+          }
+        },
+        {
+          text: 'Save',
+          handler: () => {
+            console.log('Saved clicked');
+          }
+        }
+      ]
+    });
+
+    alert.present();
+  }
+
+  doRadio() {
+    let alert = this.alertCtrl.create();
+    alert.setTitle('Lightsaber color');
+
+    alert.addInput({
+      type: 'radio',
+      label: 'Blue',
+      value: 'blue',
+      checked: true
+    });
+
+    alert.addInput({
+      type: 'radio',
+      label: 'Green',
+      value: 'green'
+    });
+
+    alert.addInput({
+      type: 'radio',
+      label: 'Red',
+      value: 'red'
+    });
+
+    alert.addInput({
+      type: 'radio',
+      label: 'Yellow',
+      value: 'yellow'
+    });
+
+    alert.addInput({
+      type: 'radio',
+      label: 'Purple',
+      value: 'purple'
+    });
+
+    alert.addInput({
+      type: 'radio',
+      label: 'White',
+      value: 'white'
+    });
+
+    alert.addInput({
+      type: 'radio',
+      label: 'Black',
+      value: 'black'
+    });
+
+    alert.addButton('Cancel');
+    alert.addButton({
+      text: 'Ok',
+      handler: (data: any) => {
+        console.log('Radio data:', data);
+        this.testRadioOpen = false;
+        this.testRadioResult = data;
+      }
+    });
+
+    alert.present();
+  }
+
+  doCheckbox() {
+    let alert = this.alertCtrl.create();
+    alert.setTitle('Which planets have you visited?');
+
+    alert.addInput({
+        type: 'checkbox',
+        label: 'Alderaan',
+        value: 'value1',
+        checked: true
+    });
+
+    alert.addInput({
+        type: 'checkbox',
+        label: 'Bespin',
+        value: 'value2'
+    });
+
+    alert.addInput({
+        type: 'checkbox',
+        label: 'Coruscant',
+        value: 'value3'
+    });
+
+    alert.addInput({
+        type: 'checkbox',
+        label: 'Endor',
+        value: 'value4'
+    });
+
+    alert.addInput({
+        type: 'checkbox',
+        label: 'Hoth',
+        value: 'value5'
+    });
+
+    alert.addInput({
+        type: 'checkbox',
+        label: 'Jakku',
+        value: 'value6'
+    });
+
+    alert.addInput({
+        type: 'checkbox',
+        label: 'Naboo',
+        value: 'value6'
+    });
+
+    alert.addInput({
+        type: 'checkbox',
+        label: 'Takodana',
+        value: 'value6'
+    });
+
+    alert.addInput({
+        type: 'checkbox',
+        label: 'Tatooine',
+        value: 'value6'
+    });
+
+    alert.addButton('Cancel');
+    alert.addButton({
+      text: 'Okay',
+      handler: (data: any) => {
+          console.log('Checkbox data:', data);
+          this.testCheckboxOpen = false;
+          this.testCheckboxResult = data;
+      }
+    });
+
+    alert.present();
+  }
+
+}

demos/src/button/app/app.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+import { PageOne } from '../pages/page-one/page-one';
+
+@Component({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+export class AppComponent {
+  root = PageOne;
+}

demos/src/button/app/app.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { IonicApp, IonicModule } from '../../../../src';
+
+import { AppComponent } from './app.component';
+import { PageOneModule } from '../pages/page-one/page-one.module';
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule,
+    IonicModule.forRoot(AppComponent),
+    PageOneModule
+  ],
+  bootstrap: [IonicApp]
+})
+export class AppModule {}

demos/src/button/app/main.ts

@@ -0,0 +1,5 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);

demos/src/button/pages/page-one/page-one.html

@@ -0,0 +1,64 @@
+<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>
+
+  <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>
+
+  <h4>Icons</h4>
+
+  <button ion-button icon-start color="dark">
+    <ion-icon name="star"></ion-icon>
+    Left Icon
+  </button>
+
+  <button ion-button icon-end 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/button/pages/page-one/page-one.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { IonicPageModule } from '../../../../../src';
+
+import { PageOne } from './page-one';
+
+@NgModule({
+  declarations: [
+    PageOne,
+  ],
+  imports: [
+    IonicPageModule.forChild(PageOne),
+  ],
+  entryComponents: [
+    PageOne,
+  ]
+})
+export class PageOneModule {}

demos/src/button/pages/page-one/page-one.ts

@@ -0,0 +1,6 @@
+import { Component } from '@angular/core';
+
+@Component({
+  templateUrl: 'page-one.html'
+})
+export class PageOne {}

demos/src/checkbox/app/app.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+import { PageOne } from '../pages/page-one/page-one';
+
+@Component({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+export class AppComponent {
+  root = PageOne;
+}

demos/src/checkbox/app/app.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { IonicApp, IonicModule } from '../../../../src';
+
+import { AppComponent } from './app.component';
+import { PageOneModule } from '../pages/page-one/page-one.module';
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule,
+    IonicModule.forRoot(AppComponent),
+    PageOneModule
+  ],
+  bootstrap: [IonicApp]
+})
+export class AppModule {}

demos/src/checkbox/app/main.ts

@@ -0,0 +1,5 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);

demos/src/checkbox/pages/page-one/page-one.html

@@ -0,0 +1,76 @@
+<ion-header>
+
+  <ion-navbar>
+    <ion-title>Checkbox</ion-title>
+  </ion-navbar>
+
+</ion-header>
+
+
+<ion-content>
+
+  <ion-list>
+
+    <ion-item>
+      <ion-checkbox [(ngModel)]="data.jon"></ion-checkbox>
+      <ion-label>Jon Snow</ion-label>
+    </ion-item>
+
+    <ion-item>
+      <ion-checkbox [(ngModel)]="data.daenerys" color="vibrant"></ion-checkbox>
+      <ion-label>Daenerys Targaryen</ion-label>
+    </ion-item>
+
+    <ion-item>
+      <ion-checkbox [(ngModel)]="data.arya" disabled="true"></ion-checkbox>
+      <ion-label>Arya Stark</ion-label>
+    </ion-item>
+
+    <ion-item>
+      <ion-checkbox [(ngModel)]="data.tyroin" color="secondary"></ion-checkbox>
+      <ion-label>Tyrion Lannister</ion-label>
+    </ion-item>
+
+    <ion-item>
+      <ion-checkbox [(ngModel)]="data.sansa" color="danger"></ion-checkbox>
+      <ion-label>Sansa Stark</ion-label>
+    </ion-item>
+
+    <ion-item>
+      <ion-checkbox [(ngModel)]="data.khal"></ion-checkbox>
+      <ion-label>Khal Drogo</ion-label>
+    </ion-item>
+
+    <ion-item>
+      <ion-checkbox [(ngModel)]="data.cersei" color="dark"></ion-checkbox>
+      <ion-label>Cersei Lannister</ion-label>
+    </ion-item>
+
+    <ion-item>
+      <ion-checkbox [(ngModel)]="data.stannis"></ion-checkbox>
+      <ion-label>Stannis Baratheon</ion-label>
+    </ion-item>
+
+    <ion-item>
+      <ion-checkbox [(ngModel)]="data.petyr" disabled="true"></ion-checkbox>
+      <ion-label>Petyr Baelish</ion-label>
+    </ion-item>
+
+    <ion-item>
+      <ion-checkbox [(ngModel)]="data.hodor" color="dark"></ion-checkbox>
+      <ion-label>Hodor</ion-label>
+    </ion-item>
+
+    <ion-item>
+      <ion-checkbox [(ngModel)]="data.catelyn" color="secondary"></ion-checkbox>
+      <ion-label>Catelyn Stark</ion-label>
+    </ion-item>
+
+    <ion-item>
+      <ion-checkbox [(ngModel)]="data.bronn" color="vibrant"></ion-checkbox>
+      <ion-label>Bronn</ion-label>
+    </ion-item>
+
+  </ion-list>
+
+</ion-content>

demos/src/checkbox/pages/page-one/page-one.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { IonicPageModule } from '../../../../../src';
+
+import { PageOne } from './page-one';
+
+@NgModule({
+  declarations: [
+    PageOne,
+  ],
+  imports: [
+    IonicPageModule.forChild(PageOne),
+  ],
+  entryComponents: [
+    PageOne,
+  ]
+})
+export class PageOneModule {}

demos/src/checkbox/pages/page-one/page-one.ts

@@ -0,0 +1,22 @@
+import { Component } from '@angular/core';
+
+@Component({
+  templateUrl: 'page-one.html'
+})
+export class PageOne {
+
+  data = {
+    jon: true,
+    daenerys: true,
+    arya: false,
+    tyroin: false,
+    sansa: true,
+    khal: false,
+    cersei: true,
+    stannis: true,
+    petyr: false,
+    hodor: true,
+    catelyn: true,
+    bronn: false
+  };
+}

demos/src/chip/app/app.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+import { PageOne } from '../pages/page-one/page-one';
+
+@Component({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+export class AppComponent {
+  root = PageOne;
+}

demos/src/chip/app/app.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { IonicApp, IonicModule } from '../../../../src';
+
+import { AppComponent } from './app.component';
+import { PageOneModule } from '../pages/page-one/page-one.module';
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule,
+    IonicModule.forRoot(AppComponent),
+    PageOneModule
+  ],
+  bootstrap: [IonicApp]
+})
+export class AppModule {}

demos/src/chip/app/main.ts

@@ -0,0 +1,5 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);

demos/src/chip/pages/page-one/page-one.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/chip/pages/page-one/page-one.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { IonicPageModule } from '../../../../../src';
+
+import { PageOne } from './page-one';
+
+@NgModule({
+  declarations: [
+    PageOne,
+  ],
+  imports: [
+    IonicPageModule.forChild(PageOne),
+  ],
+  entryComponents: [
+    PageOne,
+  ]
+})
+export class PageOneModule {}

demos/src/chip/pages/page-one/page-one.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  templateUrl: 'page-one.html'
+})
+export class PageOne {
+  delete(chip: Element) {
+    chip.remove();
+  }
+}

demos/src/config/app/app.component.ts

@@ -0,0 +1,39 @@
+import { Component } from '@angular/core';
+import { Config, Platform } from '../../../../src';
+import { PageOne } from '../pages/page-one/page-one';
+
+@Component({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+export class AppComponent {
+  config: any;
+  root = PageOne;
+  constructor(public _config: Config, public platform: Platform) {
+
+    if (window.localStorage.getItem('configDemo') !== null) {
+      this.config = JSON.parse(window.localStorage.getItem('configDemo'));
+    } else if (platform.is('ios')) {
+      this.config = {
+        'backButtonIcon': 'ios-arrow-back',
+        'iconMode': 'ios',
+        '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',
+        'tabsPlacement': 'bottom'
+      };
+    }
+
+    this._config.set('tabsPlacement', this.config.tabsPlacement);
+    this._config.set('iconMode', this.config.iconMode);
+    this._config.set('backButtonIcon', this.config.backButtonIcon);
+  }
+}

demos/src/config/app/app.module.ts

@@ -0,0 +1,93 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { IonicApp, IonicModule } from '../../../../src';
+
+import { AppComponent } from './app.component';
+import { PageOneModule } from '../pages/page-one/page-one.module';
+import { PageTwoModule } from '../pages/page-two/page-two.module';
+import { PageThreeModule } from '../pages/page-three/page-three.module';
+
+@NgModule({
+  declarations: [
+    AppComponent,
+  ],
+  imports: [
+    BrowserModule,
+    IonicModule.forRoot(AppComponent, CONFIG_DEMO),
+    PageOneModule,
+    PageTwoModule,
+    PageThreeModule
+  ],
+  bootstrap: [IonicApp],
+})
+export class AppModule {}
+
+if (!window.localStorage) {
+  Object.defineProperty(window, 'localStorage', new (function () {
+    var aKeys: any[] = [], oStorage = {};
+    Object.defineProperty(oStorage, 'getItem', {
+      value: function (sKey: number) { return sKey ? this[sKey] : null; },
+      writable: false,
+      configurable: false,
+      enumerable: false
+    });
+    Object.defineProperty(oStorage, 'key', {
+      value: function (nKeyId: number) { return aKeys[nKeyId]; },
+      writable: false,
+      configurable: false,
+      enumerable: false
+    });
+    Object.defineProperty(oStorage, 'setItem', {
+      value: function (sKey: string, sValue: string) {
+        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', {
+      get: function () { return aKeys.length; },
+      configurable: false,
+      enumerable: false
+    });
+    Object.defineProperty(oStorage, 'removeItem', {
+      value: function (sKey: string) {
+        if (!sKey) { return; }
+        document.cookie = encodeURI(sKey) + '=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=';
+      },
+      writable: false,
+      configurable: false,
+      enumerable: false
+    });
+    this.get = function () {
+      var iThisIndx: number;
+      for (var sKey in oStorage) {
+        iThisIndx = aKeys.indexOf(sKey);
+        if (iThisIndx === -1) {
+          (oStorage as any).setItem(sKey, (oStorage as any)[sKey]);
+        } else {
+          aKeys.splice(iThisIndx, 1);
+        }
+        delete (oStorage as any)[sKey];
+      }
+      for (aKeys; aKeys.length > 0; aKeys.splice(0, 1)) { (oStorage as any).removeItem(aKeys[0]); }
+      for (var aCouple: any, iKey: any, nIdx = 0, aCouples = document.cookie.split(/\s*;\s*/); nIdx < aCouples.length; nIdx++) {
+        aCouple = aCouples[nIdx].split(/\s*=\s*/);
+        if (aCouple.length > 1) {
+          (oStorage as any)[iKey = decodeURI(aCouple[0])] = decodeURI(aCouple[1]);
+          aKeys.push(iKey);
+        }
+      }
+      return oStorage;
+    };
+    this.configurable = false;
+    this.enumerable = true;
+  } as any)());
+}
+
+var CONFIG_DEMO: any = null;
+
+if (window.localStorage.getItem('configDemo')) {
+  CONFIG_DEMO = JSON.parse(window.localStorage.getItem('configDemo'));
+}

demos/src/config/app/main.ts

@@ -0,0 +1,5 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);

demos/src/config/pages/page-one/page-one.html

@@ -0,0 +1,5 @@
+<ion-tabs>
+  <ion-tab tabTitle="Music" tabIcon="musical-notes" [root]="tabOne"></ion-tab>
+  <ion-tab tabTitle="Movies" tabIcon="videocam" [root]="tabOne"></ion-tab>
+  <ion-tab tabTitle="Games" tabIcon="game-controller-b" [root]="tabOne"></ion-tab>
+</ion-tabs>

demos/src/config/pages/page-one/page-one.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { IonicPageModule } from '../../../../../src';
+
+import { PageOne } from './page-one';
+
+@NgModule({
+  declarations: [
+    PageOne,
+  ],
+  imports: [
+    IonicPageModule.forChild(PageOne),
+  ],
+  entryComponents: [
+    PageOne,
+  ]
+})
+export class PageOneModule {}

demos/src/config/pages/page-one/page-one.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+import { PageTwo } from '../page-two/page-two';
+
+@Component({
+  templateUrl: 'page-one.html'
+})
+export class PageOne {
+  tabOne = PageTwo;
+}

demos/src/config/pages/page-three/page-three.html

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

demos/src/config/pages/page-three/page-three.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { IonicPageModule } from '../../../../../src';
+
+import { PageThree } from './page-three';
+
+@NgModule({
+  declarations: [
+    PageThree,
+  ],
+  imports: [
+    IonicPageModule.forChild(PageThree),
+  ],
+  entryComponents: [
+    PageThree,
+  ]
+})
+export class PageThreeModule {}

demos/src/config/pages/page-three/page-three.ts

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { NavController } from '../../../../../src';
+
+@Component({
+  templateUrl: 'page-three.html'
+})
+export class PageThree {
+  constructor(public navCtrl: NavController) {}
+
+  pop() {
+    this.navCtrl.pop();
+  }
+}

demos/src/config/pages/page-two/page-two.html

@@ -0,0 +1,83 @@
+<ion-header>
+
+  <ion-navbar>
+    <ion-title>Config</ion-title>
+  </ion-navbar>
+
+</ion-header>
+
+
+<ion-content class="config-demo">
+
+  <ion-list>
+    <ion-item>
+      <ion-label>Back Button Icon</ion-label>
+      <ion-select [(ngModel)]="config.backButtonIcon">
+        <ion-option value="ios-arrow-back">ios-arrow-back</ion-option>
+        <ion-option value="md-arrow-back">md-arrow-back</ion-option>
+        <ion-option value="close">close</ion-option>
+        <ion-option value="heart">heart</ion-option>
+        <ion-option value="globe">globe</ion-option>
+      </ion-select>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>Icon Mode</ion-label>
+      <ion-select [(ngModel)]="config.iconMode">
+        <ion-option value="ios">ios</ion-option>
+        <ion-option value="md">md</ion-option>
+      </ion-select>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>Tab Placement</ion-label>
+      <ion-select [(ngModel)]="config.tabsPlacement">
+        <ion-option value="bottom">bottom</ion-option>
+        <ion-option value="top">top</ion-option>
+      </ion-select>
+    </ion-item>
+
+  </ion-list>
+  <p class="note">Note: the config will not be updated until you click the button below.</p>
+
+  <div padding>
+    <button ion-button block (click)="load()">
+      Update Config
+    </button>
+  </div>
+
+  <p class="note">Any config for your app should be passed as the second argument to <code>IonicModule.forRoot()</code>.</p>
+
+  <!-- this has to be formatted weird for pre -->
+  <pre margin>
+&#64;NgModule(&#123;
+  imports: [
+  BrowserModule,
+    IonicModule.forRoot(MyApp, &#123;
+      backButtonIcon: "{{initialConfig?.backButtonIcon}}"
+      iconMode: "{{initialConfig?.iconMode}}"
+      tabsPlacement: "{{initialConfig?.tabsPlacement}}"
+    &#125;)
+  ]
+&#125;)
+</pre>
+
+  <div padding>
+    <button ion-button block color="secondary" (click)="push()">
+      Go to Another Page
+    </button>
+  </div>
+
+</ion-content>
+
+<style>
+  .config-demo pre {
+    background-color: #f8f8f8;
+  }
+
+  .config-demo .note {
+    color: #444;
+    font-style: italic;
+    margin: 0 16px;
+  }
+</style>

demos/src/config/pages/page-two/page-two.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { IonicPageModule } from '../../../../../src';
+
+import { PageTwo } from './page-two';
+
+@NgModule({
+  declarations: [
+    PageTwo,
+  ],
+  imports: [
+    IonicPageModule.forChild(PageTwo),
+  ],
+  entryComponents: [
+    PageTwo,
+  ]
+})
+export class PageTwoModule {}

demos/src/config/pages/page-two/page-two.ts

@@ -0,0 +1,24 @@
+import { Component } from '@angular/core';
+import { Config, NavController } from '../../../../../src';
+import { PageThree } from '../page-three/page-three';
+
+@Component({
+  templateUrl: 'page-two.html'
+})
+export class PageTwo {
+  config: any;
+  initialConfig: any;
+  constructor(_config: Config,  public navCtrl: NavController) {
+    this.config = _config.settings();
+    this.initialConfig = this.config;
+  }
+
+  load() {
+    window.localStorage.setItem('configDemo', JSON.stringify(this.config));
+    window.location.reload();
+  }
+
+  push() {
+    this.navCtrl.push(PageThree);
+  }
+}

demos/src/config/pages/push-page.html

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

demos/src/datetime/app/app.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+import { PageOne } from '../pages/page-one/page-one';
+
+@Component({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+export class AppComponent {
+  root = PageOne;
+}

demos/src/datetime/app/app.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { IonicApp, IonicModule } from '../../../../src';
+
+import { AppComponent } from './app.component';
+import { PageOneModule } from '../pages/page-one/page-one.module';
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule,
+    IonicModule.forRoot(AppComponent),
+    PageOneModule
+  ],
+  bootstrap: [IonicApp]
+})
+export class AppModule {}

demos/src/datetime/app/main.ts

@@ -0,0 +1,5 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);

demos/src/datetime/pages/page-one/page-one.html

@@ -0,0 +1,75 @@
+<ion-header>
+
+  <ion-navbar>
+    <ion-title>DateTime</ion-title>
+  </ion-navbar>
+
+</ion-header>
+
+
+<ion-content class="outer-content">
+
+  <ion-list>
+    <ion-list-header>Web Release Dates</ion-list-header>
+
+    <ion-item>
+      <ion-label>World Wide Web</ion-label>
+      <ion-datetime displayFormat="YYYY" min="1981" max="2002" [(ngModel)]="wwwReleased"></ion-datetime>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>Netscape</ion-label>
+      <ion-datetime displayFormat="MMMM YY" min="1989" max="2004" [(ngModel)]="netscapeReleased"></ion-datetime>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>Opera</ion-label>
+      <ion-datetime displayFormat="DDD DD.MM.YY" min="1990" max="2000" [dayShortNames]="operaShortDay" [(ngModel)]="operaReleased"></ion-datetime>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>Webkit</ion-label>
+      <ion-datetime displayFormat="D MMM YYYY" min="1990-02" max="2010-10" [(ngModel)]="webkitReleased"></ion-datetime>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>Firefox</ion-label>
+      <ion-datetime displayFormat="MMM DD, YYYY" min="1994-03-14" max="2012-12-09" [(ngModel)]="firefoxReleased"></ion-datetime>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>Chrome</ion-label>
+      <ion-datetime displayFormat="DDDD MMM D, YYYY" min="2005" max="2016" [(ngModel)]="chromeReleased"></ion-datetime>
+    </ion-item>
+  </ion-list>
+
+  <ion-list>
+    <ion-list-header>World Times</ion-list-header>
+
+    <ion-item>
+      <ion-label>Tokyo</ion-label>
+      <ion-datetime displayFormat="hh:mm A" [(ngModel)]="tokyoTime"></ion-datetime>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>Paris</ion-label>
+      <ion-datetime displayFormat="HH:mm" [(ngModel)]="parisTime"></ion-datetime>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>Madison</ion-label>
+      <ion-datetime displayFormat="h:mm a" [(ngModel)]="madisonTime"></ion-datetime>
+    </ion-item>
+
+  </ion-list>
+
+  <ion-list>
+    <ion-list-header>Set Alarm</ion-list-header>
+
+    <ion-item>
+      <ion-label>Alert</ion-label>
+      <ion-datetime displayFormat="mm" minuteValues="0,15,30,45" [(ngModel)]="alertTime"></ion-datetime>
+    </ion-item>
+  </ion-list>
+
+</ion-content>

demos/src/datetime/pages/page-one/page-one.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { IonicPageModule } from '../../../../../src';
+
+import { PageOne } from './page-one';
+
+@NgModule({
+  declarations: [
+    PageOne,
+  ],
+  imports: [
+    IonicPageModule.forChild(PageOne),
+  ],
+  entryComponents: [
+    PageOne,
+  ]
+})
+export class PageOneModule {}

demos/src/datetime/pages/page-one/page-one.ts

@@ -0,0 +1,62 @@
+import { Component } from '@angular/core';
+
+@Component({
+  templateUrl: 'page-one.html'
+})
+export class PageOne {
+  wwwReleased = '1991';
+  netscapeReleased = '1994-12-15T13:47:20.789';
+  operaReleased = '1995-04-15';
+  webkitReleased = '1998-11-04T11:06Z';
+  firefoxReleased = '2002-09-23T15:03:46.789';
+  chromeReleased = '2008-09-02';
+
+  tokyoTime: string;
+  parisTime: string;
+  madisonTime: string;
+  alertTime = '10:15';
+
+  operaShortDay = [
+    's\u00f8n',
+    'man',
+    'tir',
+    'ons',
+    'tor',
+    'fre',
+    'l\u00f8r'
+  ];
+
+  constructor() {
+    this.tokyoTime = this.calculateTime('+9');
+    this.parisTime = this.calculateTime('+1');
+    this.madisonTime = this.calculateTime('-6');
+
+    // If it is Daylight Savings Time
+    if (this.dst(new Date())) {
+      this.parisTime = this.calculateTime('+2');
+      this.madisonTime = this.calculateTime('-5');
+    }
+  }
+
+  calculateTime(offset: any) {
+    // create Date object for current location
+    let d = new Date();
+
+    // create new Date object for different city
+    // using supplied offset
+    let nd = new Date(d.getTime() + (3600000 * offset));
+
+    return nd.toISOString();
+  }
+
+  // Determine if the client uses DST
+  stdTimezoneOffset(today: any) {
+    let jan = new Date(today.getFullYear(), 0, 1);
+    let jul = new Date(today.getFullYear(), 6, 1);
+    return Math.max(jan.getTimezoneOffset(), jul.getTimezoneOffset());
+  }
+
+  dst(today: any) {
+    return today.getTimezoneOffset() < this.stdTimezoneOffset(today);
+  }
+}

demos/src/events/app/app.component.html

@@ -0,0 +1,43 @@
+<ion-menu #menu [content]="content">
+
+  <ion-header>
+    <ion-toolbar color="secondary">
+      <ion-title>Left Menu</ion-title>
+    </ion-toolbar>
+  </ion-header>
+
+  <ion-content>
+
+    <ion-list *ngIf="loggedIn">
+      <ion-list-header>
+        Logged in as <b>Administrator</b>
+      </ion-list-header>
+      <button ion-item menuClose *ngFor="let p of loggedInPages" (click)="openPage(menu, p)">
+        <ion-label color="primary">{{p.title}}</ion-label>
+      </button>
+
+      <button ion-item menuToggle>
+        Close Menu
+      </button>
+
+    </ion-list>
+
+    <ion-list *ngIf="!loggedIn">
+      <ion-list-header>
+        Please Log In
+      </ion-list-header>
+      <button ion-item menuClose *ngFor="let p of loggedOutPages" (click)="openPage(menu, p)">
+        <ion-label color="primary">{{p.title}}</ion-label>
+      </button>
+
+      <button ion-item menuToggle>
+        Close Menu
+      </button>
+
+    </ion-list>
+  </ion-content>
+
+</ion-menu>
+
+
+<ion-nav id="nav" [root]="root" #content swipeBackEnabled="false"></ion-nav>

demos/src/events/app/app.component.ts

@@ -0,0 +1,45 @@
+import { Component, ViewChild } from '@angular/core';
+import { Events, Nav } from '../../../../src';
+
+import { PageOne } from '../pages/page-one/page-one';
+import { PageTwo } from '../pages/page-two/page-two';
+
+@Component({
+  templateUrl: 'app.component.html'
+})
+export class AppComponent {
+
+  @ViewChild(Nav) nav: Nav;
+
+  root = PageOne;
+  loggedIn = false;
+
+  loggedInPages = [
+    { title: 'Logout', component: PageTwo }
+  ];
+
+  loggedOutPages = [
+    { title: 'Login', component: PageOne }
+  ];
+
+  constructor(private events: Events) {
+    this.listenToLoginEvents();
+  }
+
+  openPage(_: any, page: any) {
+    // find the nav component and set what the root page should be
+    // reset the nav to remove previous pages and only have this page
+    // we wouldn't want the back button to show in this scenario
+    this.nav.setRoot(page.component);
+  }
+
+  listenToLoginEvents() {
+    this.events.subscribe('user:login', () => {
+      this.loggedIn = true;
+    });
+
+    this.events.subscribe('user:logout', () => {
+      this.loggedIn = false;
+    });
+  }
+}

demos/src/events/app/app.module.ts

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { IonicApp, IonicModule } from '../../../../src';
+
+import { AppComponent } from './app.component';
+import { PageOneModule } from '../pages/page-one/page-one.module';
+import { PageTwoModule } from '../pages/page-two/page-two.module';
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule,
+    IonicModule.forRoot(AppComponent),
+    PageOneModule,
+    PageTwoModule
+  ],
+  bootstrap: [IonicApp]
+})
+export class AppModule {}

demos/src/events/app/main.ts

@@ -0,0 +1,5 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);

demos/src/events/pages/page-one/page-one.html

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

demos/src/events/pages/page-one/page-one.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { IonicPageModule } from '../../../../../src';
+
+import { PageOne } from './page-one';
+
+@NgModule({
+  declarations: [
+    PageOne,
+  ],
+  imports: [
+    IonicPageModule.forChild(PageOne),
+  ],
+  entryComponents: [
+    PageOne,
+  ]
+})
+export class PageOneModule {}

demos/src/events/pages/page-one/page-one.ts

@@ -0,0 +1,18 @@
+import { Component } from '@angular/core';
+import { Events } from '../../../../../src';
+
+@Component({
+  templateUrl: 'page-one.html'
+})
+export class PageOne {
+  user = {
+    name: 'Administrator',
+    username: 'admin'
+  };
+
+  constructor(private events: Events) {}
+
+  login() {
+    this.events.publish('user:login');
+  }
+}

demos/src/events/pages/page-two/page-two.html

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

demos/src/events/pages/page-two/page-two.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { IonicPageModule } from '../../../../../src';
+
+import { PageTwo } from './page-two';
+
+@NgModule({
+  declarations: [
+    PageTwo,
+  ],
+  imports: [
+    IonicPageModule.forChild(PageTwo),
+  ],
+  entryComponents: [
+    PageTwo,
+  ]
+})
+export class PageTwoModule {}

demos/src/events/pages/page-two/page-two.ts

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { Events } from '../../../../../src';
+
+@Component({
+  templateUrl: 'page-two.html'
+})
+export class PageTwo {
+  constructor(private events: Events) {}
+
+  logout() {
+    this.events.publish('user:logout');
+  }
+}

demos/src/fab/app/app.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+import { PageOne } from '../pages/page-one/page-one';
+
+@Component({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+export class AppComponent {
+  root = PageOne;
+}

demos/src/fab/app/app.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { IonicApp, IonicModule } from '../../../../src';
+
+import { AppComponent } from './app.component';
+import { PageOneModule } from '../pages/page-one/page-one.module';
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule,
+    IonicModule.forRoot(AppComponent),
+    PageOneModule
+  ],
+  bootstrap: [IonicApp]
+})
+export class AppModule {}

demos/src/fab/app/main.ts

@@ -0,0 +1,5 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);

demos/src/fab/pages/page-one/page-one.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/fab/pages/page-one/page-one.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { IonicPageModule } from '../../../../../src';
+
+import { PageOne } from './page-one';
+
+@NgModule({
+  declarations: [
+    PageOne,
+  ],
+  imports: [
+    IonicPageModule.forChild(PageOne),
+  ],
+  entryComponents: [
+    PageOne,
+  ]
+})
+export class PageOneModule {}

demos/src/fab/pages/page-one/page-one.ts

@@ -0,0 +1,22 @@
+import { Component } from '@angular/core';
+import { FabContainer } from '../../../../../src';
+
+@Component({
+  templateUrl: 'page-one.html'
+})
+export class PageOne {
+  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();
+  }
+}

demos/src/hide-when/app/app.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+import { PageOne } from '../pages/page-one/page-one';
+
+@Component({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+export class AppComponent {
+  root = PageOne;
+}

demos/src/hide-when/app/app.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { IonicApp, IonicModule } from '../../../../src';
+
+import { AppComponent } from './app.component';
+import { PageOneModule } from '../pages/page-one/page-one.module';
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule,
+    IonicModule.forRoot(AppComponent),
+    PageOneModule
+  ],
+  bootstrap: [IonicApp]
+})
+export class AppModule {}

demos/src/hide-when/app/main.ts

@@ -0,0 +1,5 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);

demos/src/hide-when/pages/page-one/page-one.html

@@ -0,0 +1,61 @@
+<ion-header>
+
+  <ion-navbar>
+    <ion-title>HideWhen</ion-title>
+  </ion-navbar>
+
+</ion-header>
+
+
+<ion-content class="hide-when-demo">
+
+  <h5 margin>Hide Icon Per Platform</h5>
+  <p margin>In this example we're using the <code>hideWhen</code> directive to decide whether to hide an icon based on the platform.</p>
+
+  <ion-grid>
+    <ion-row>
+      <ion-col text-center>
+        <ion-icon name="logo-apple" hideWhen="android,windows"></ion-icon>
+      </ion-col>
+      <ion-col>
+        <code> &lt;ion-icon name="logo-apple" hideWhen="android,windows"&gt;&lt;/ion-icon&gt; </code>
+      </ion-col>
+    </ion-row>
+    <ion-row>
+      <ion-col text-center>
+        <ion-icon name="logo-android" hideWhen="ios,windows"></ion-icon>
+      </ion-col>
+      <ion-col>
+        <code> &lt;ion-icon name="logo-android" hideWhen="ios,windows"&gt;&lt;/ion-icon&gt; </code>
+      </ion-col>
+    </ion-row>
+    <ion-row>
+      <ion-col text-center>
+        <ion-icon name="logo-windows" hideWhen="ios,android"></ion-icon>
+      </ion-col>
+      <ion-col>
+        <code> &lt;ion-icon name="logo-windows" hideWhen="ios,android"&gt;&lt;/ion-icon&gt; </code>
+      </ion-col>
+    </ion-row>
+  </ion-grid>
+
+</ion-content>
+
+<style>
+  .hide-when-demo ion-col {
+    background: #f8f8f8;
+    border: 1px solid #ddd;
+    margin: 1%;
+    max-width: 48%;
+    flex: 0 0 48%;
+    min-height: 120px;
+  }
+
+  .hide-when-demo code {
+    background: #f8f8f8;
+  }
+
+  .hide-when-demo ion-icon {
+    font-size: 100px;
+  }
+</style>

demos/src/hide-when/pages/page-one/page-one.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { IonicPageModule } from '../../../../../src';
+
+import { PageOne } from './page-one';
+
+@NgModule({
+  declarations: [
+    PageOne,
+  ],
+  imports: [
+    IonicPageModule.forChild(PageOne),
+  ],
+  entryComponents: [
+    PageOne,
+  ]
+})
+export class PageOneModule {}

demos/src/hide-when/pages/page-one/page-one.ts

@@ -0,0 +1,6 @@
+import { Component } from '@angular/core';
+
+@Component({
+  templateUrl: 'page-one.html'
+})
+export class PageOne {}

demos/src/icon/app/app.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+import { PageOne } from '../pages/page-one/page-one';
+
+@Component({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+export class AppComponent {
+  root = PageOne;
+}

demos/src/icon/app/app.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { IonicApp, IonicModule } from '../../../../src';
+
+import { AppComponent } from './app.component';
+import { PageOneModule } from '../pages/page-one/page-one.module';
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule,
+    IonicModule.forRoot(AppComponent),
+    PageOneModule
+  ],
+  bootstrap: [IonicApp]
+})
+export class AppModule {}

demos/src/icon/app/main.ts

@@ -0,0 +1,5 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);

demos/src/icon/pages/page-one/page-one.html

@@ -0,0 +1,77 @@
+<ion-header>
+
+  <ion-navbar>
+    <ion-title>Icon</ion-title>
+  </ion-navbar>
+
+</ion-header>
+
+
+<ion-content text-center class="icon-demo">
+
+  <ion-row>
+    <ion-col><ion-icon name="ionic" color="primary"></ion-icon></ion-col>
+    <ion-col><ion-icon name="logo-angular"></ion-icon></ion-col>
+    <ion-col><ion-icon name="heart" color="danger"></ion-icon></ion-col>
+    <ion-col><ion-icon name="ionitron" color="primary"></ion-icon></ion-col>
+
+    <ion-col><ion-icon name="happy" color="vibrant"></ion-icon></ion-col>
+    <ion-col><ion-icon name="people"></ion-icon></ion-col>
+    <ion-col><ion-icon name="person"></ion-icon></ion-col>
+    <ion-col><ion-icon name="contact"></ion-icon></ion-col>
+
+    <ion-col><ion-icon name="apps"></ion-icon></ion-col>
+    <ion-col><ion-icon name="lock"></ion-icon></ion-col>
+    <ion-col><ion-icon name="key" color="bright"></ion-icon></ion-col>
+    <ion-col><ion-icon name="unlock"></ion-icon></ion-col>
+
+    <ion-col><ion-icon name="map" color="secondary"></ion-icon></ion-col>
+    <ion-col><ion-icon name="navigate"></ion-icon></ion-col>
+    <ion-col><ion-icon name="pin"></ion-icon></ion-col>
+    <ion-col><ion-icon name="locate"></ion-icon></ion-col>
+
+    <ion-col><ion-icon name="mic"></ion-icon></ion-col>
+    <ion-col><ion-icon name="musical-notes" color="vibrant"></ion-icon></ion-col>
+    <ion-col><ion-icon name="volume-up"></ion-icon></ion-col>
+    <ion-col><ion-icon name="microphone"></ion-icon></ion-col>
+
+    <ion-col><ion-icon name="cafe" color="bright"></ion-icon></ion-col>
+    <ion-col><ion-icon name="calculator"></ion-icon></ion-col>
+    <ion-col><ion-icon name="bus"></ion-icon></ion-col>
+    <ion-col><ion-icon name="wine" color="danger"></ion-icon></ion-col>
+
+    <ion-col><ion-icon name="camera"></ion-icon></ion-col>
+    <ion-col><ion-icon name="image" color="secondary"></ion-icon></ion-col>
+    <ion-col><ion-icon name="star" color="bright"></ion-icon></ion-col>
+    <ion-col><ion-icon name="pin"></ion-icon></ion-col>
+
+    <ion-col><ion-icon name="arrow-dropup-circle" color="vibrant"></ion-icon></ion-col>
+    <ion-col><ion-icon name="arrow-back"></ion-icon></ion-col>
+    <ion-col><ion-icon name="arrow-dropdown"></ion-icon></ion-col>
+    <ion-col><ion-icon name="arrow-forward"></ion-icon></ion-col>
+
+    <ion-col><ion-icon name="cloud"></ion-icon></ion-col>
+    <ion-col><ion-icon name="sunny" color="bright"></ion-icon></ion-col>
+    <ion-col><ion-icon name="umbrella"></ion-icon></ion-col>
+    <ion-col><ion-icon name="rainy" color="primary"></ion-icon></ion-col>
+  </ion-row>
+
+</ion-content>
+
+<style>
+  .icon-demo ion-icon {
+    font-size: 50px;
+  }
+
+  .icon-demo ion-row {
+    height: 100%;
+    flex-wrap: wrap;
+  }
+
+  .icon-demo ion-col {
+    flex: 0 0 25%;
+    max-width: 25%;
+    text-align: center;
+    padding: 10px 5px;
+  }
+</style>

demos/src/icon/pages/page-one/page-one.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { IonicPageModule } from '../../../../../src';
+
+import { PageOne } from './page-one';
+
+@NgModule({
+  declarations: [
+    PageOne,
+  ],
+  imports: [
+    IonicPageModule.forChild(PageOne),
+  ],
+  entryComponents: [
+    PageOne,
+  ]
+})
+export class PageOneModule {}

demos/src/icon/pages/page-one/page-one.ts

@@ -0,0 +1,6 @@
+import { Component } from '@angular/core';
+
+@Component({
+  templateUrl: 'page-one.html'
+})
+export class PageOne {}

demos/src/infinite-scroll/app/app.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+import { PageOne } from '../pages/page-one/page-one';
+
+@Component({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+export class AppComponent {
+  root = PageOne;
+}

demos/src/infinite-scroll/app/app.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { IonicApp, IonicModule } from '../../../../src';
+
+import { AppComponent } from './app.component';
+import { PageOneModule } from '../pages/page-one/page-one.module';
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule,
+    IonicModule.forRoot(AppComponent),
+    PageOneModule
+  ],
+  bootstrap: [IonicApp]
+})
+export class AppModule {}

demos/src/infinite-scroll/app/main.ts

@@ -0,0 +1,5 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);

demos/src/infinite-scroll/pages/page-one/page-one.html

@@ -0,0 +1,25 @@
+<ion-header>
+
+  <ion-navbar>
+    <ion-title>Infinite Scroll</ion-title>
+  </ion-navbar>
+
+</ion-header>
+
+
+<ion-content>
+
+  <ion-list>
+    <ion-item *ngFor="let item of items">
+      {{ item }}
+    </ion-item>
+  </ion-list>
+
+  <ion-infinite-scroll (ionInfinite)="doInfinite($event)" threshold="100px">
+    <ion-infinite-scroll-content
+      loadingSpinner="bubbles"
+      loadingText="Loading more data...">
+    </ion-infinite-scroll-content>
+  </ion-infinite-scroll>
+
+</ion-content>

demos/src/infinite-scroll/pages/page-one/page-one.module.ts

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { IonicPageModule } from '../../../../../src';
+
+import { PageOne } from './page-one';
+import { MockProvider } from './provider';
+
+@NgModule({
+  declarations: [
+    PageOne,
+  ],
+  imports: [
+    IonicPageModule.forChild(PageOne),
+  ],
+  entryComponents: [
+    PageOne,
+  ],
+  providers: [
+    MockProvider
+  ]
+})
+export class PageOneModule {}

demos/src/infinite-scroll/pages/page-one/page-one.ts

@@ -0,0 +1,28 @@
+import { Component } from '@angular/core';
+import { MockProvider} from './provider';
+import { InfiniteScroll } from '../../../../../src';
+
+@Component({
+  templateUrl: 'page-one.html'
+})
+export class PageOne {
+  items: string[];
+
+  constructor(private mockProvider: MockProvider) {
+    this.items = mockProvider.getData();
+  }
+
+  doInfinite(infiniteScroll: InfiniteScroll) {
+    this.mockProvider.getAsyncData().then((newData) => {
+      for (var i = 0; i < newData.length; i++) {
+        this.items.push( newData[i] );
+      }
+
+      infiniteScroll.complete();
+
+      if (this.items.length > 90) {
+        infiniteScroll.enable(false);
+      }
+    });
+  }
+}

demos/src/infinite-scroll/pages/page-one/provider.ts

@@ -0,0 +1,58 @@
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class MockProvider {
+
+  getData(): any[] {
+    // return mock data synchronously
+    let data: any[] = [];
+    for (var i = 0; i < 20; i++) {
+      data.push( this._getRandomData() );
+    }
+    return data;
+  }
+
+  getAsyncData(): Promise<any[]> {
+    // async receive mock data
+    return new Promise(resolve => {
+
+      setTimeout(() => {
+        resolve(this.getData());
+      }, 1000);
+
+    });
+  }
+
+  private _getRandomData() {
+    let i = Math.floor( Math.random() * this._data.length );
+    return this._data[i];
+  }
+
+  private _data = [
+    'Fast Times at Ridgemont High',
+    'Peggy Sue Got Married',
+    'Raising Arizona',
+    'Moonstruck',
+    'Fire Birds',
+    'Honeymoon in Vegas',
+    'Amos & Andrew',
+    'It Could Happen to You',
+    'Trapped in Paradise',
+    'Leaving Las Vegas',
+    'The Rock',
+    'Con Air',
+    'Face/Off',
+    'City of Angels',
+    'Gone in Sixty Seconds',
+    'The Family Man',
+    'Windtalkers',
+    'Matchstick Men',
+    'National Treasure',
+    'Ghost Rider',
+    'Grindhouse',
+    'Next',
+    'Kick-Ass',
+    'Drive Angry',
+  ];
+
+}

demos/src/input/app/app.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+import { PageOne } from '../pages/page-one/page-one';
+
+@Component({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+export class AppComponent {
+  root = PageOne;
+}

demos/src/input/app/app.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { IonicApp, IonicModule } from '../../../../src';
+
+import { AppComponent } from './app.component';
+import { PageOneModule } from '../pages/page-one/page-one.module';
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule,
+    IonicModule.forRoot(AppComponent),
+    PageOneModule
+  ],
+  bootstrap: [IonicApp]
+})
+export class AppModule {}

demos/src/input/app/main.ts

@@ -0,0 +1,5 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);

demos/src/input/pages/page-one/page-one.html

@@ -0,0 +1,47 @@
+<ion-header>
+
+  <ion-navbar>
+    <ion-title>Input</ion-title>
+  </ion-navbar>
+
+</ion-header>
+
+
+<ion-content>
+
+  <ion-list>
+    <ion-item>
+      <ion-label color="primary">Inline Label</ion-label>
+      <ion-input placeholder="Text Input"></ion-input>
+    </ion-item>
+
+    <ion-item>
+      <ion-label color="primary" fixed>Fixed Label</ion-label>
+      <ion-input type="tel" placeholder="Tel Input"></ion-input>
+    </ion-item>
+
+    <ion-item>
+      <ion-input type="number" placeholder="Number Input with no label"></ion-input>
+    </ion-item>
+
+    <ion-item>
+      <ion-label color="primary" stacked>Stacked Label</ion-label>
+      <ion-input type="email" placeholder="Email Input"></ion-input>
+    </ion-item>
+
+    <ion-item>
+      <ion-label color="primary" stacked>Stacked Label</ion-label>
+      <ion-input type="password" placeholder="Password Input"></ion-input>
+    </ion-item>
+
+    <ion-item>
+      <ion-label color="primary" floating>Floating Label</ion-label>
+      <ion-input></ion-input>
+    </ion-item>
+
+    <ion-item>
+      <ion-input placeholder="Clear Input" clearInput></ion-input>
+    </ion-item>
+  </ion-list>
+
+</ion-content>

demos/src/input/pages/page-one/page-one.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { IonicPageModule } from '../../../../../src';
+
+import { PageOne } from './page-one';
+
+@NgModule({
+  declarations: [
+    PageOne,
+  ],
+  imports: [
+    IonicPageModule.forChild(PageOne),
+  ],
+  entryComponents: [
+    PageOne,
+  ]
+})
+export class PageOneModule {}

demos/src/input/pages/page-one/page-one.ts

@@ -0,0 +1,6 @@
+import { Component } from '@angular/core';
+
+@Component({
+  templateUrl: 'page-one.html'
+})
+export class PageOne {}