chore(build): rename ionic directory to src and update all references in the build process.

src/components/list/list.ios.scss

@@ -0,0 +1,191 @@
+@import "../../globals.ios";
+@import "./list";
+
+// iOS List
+// --------------------------------------------------
+
+$list-ios-margin-top:                 10px !default;
+$list-ios-margin-right:               0 !default;
+$list-ios-margin-bottom:              32px !default;
+$list-ios-margin-left:                0 !default;
+
+$list-inset-ios-margin-top:           16px !default;
+$list-inset-ios-margin-right:         16px !default;
+$list-inset-ios-margin-bottom:        16px !default;
+$list-inset-ios-margin-left:          16px !default;
+$list-inset-ios-border-radius:        4px !default;
+
+$list-ios-header-padding:             10px $item-ios-padding-right 10px $item-ios-padding-left !default;
+$list-ios-header-font-size:           1.2rem !default;
+$list-ios-header-font-weight:         500 !default;
+$list-ios-header-letter-spacing:      .1rem !default;
+$list-ios-header-color:               #333 !default;
+
+
+//
+// DEFAULT LIST
+//
+
+ion-list-header {
+  position: relative;
+
+  padding: $list-ios-header-padding;
+
+  border-bottom: 1px solid $list-ios-border-color;
+  font-size: $list-ios-header-font-size;
+  font-weight: $list-ios-header-font-weight;
+  letter-spacing: $list-ios-header-letter-spacing;
+  text-transform: uppercase;
+  color: $list-ios-header-color;
+}
+
+ion-list {
+  margin: -1px $list-ios-margin-right $list-ios-margin-bottom $list-ios-margin-left;
+
+  > .item:first-child {
+    border-top: 1px solid $list-ios-border-color;
+  }
+
+  > .item:last-child,
+  > ion-item-sliding:last-child .item {
+    border-bottom: 1px solid $list-ios-border-color;
+  }
+
+  > .item:last-child,
+  > ion-item-sliding:last-child {
+    .item-inner {
+      border-bottom: 0;
+    }
+  }
+
+  .item-inner {
+    border-bottom: 1px solid $list-ios-border-color;
+  }
+
+  // If the item has the no-lines attribute remove the bottom border from:
+  // the item itself (for last-child items)
+  // the item-inner class (if it is not last)
+  .item[no-lines],
+  .item[no-lines] .item-inner, {
+    border-width: 0;
+  }
+
+  ion-item-options {
+    border-bottom: 1px solid $list-ios-border-color;
+  }
+
+  ion-item-options button,
+  ion-item-options [button] {
+    display: inline-flex;
+
+    align-items: center;
+
+    margin: 0;
+
+    height: 100%;
+    min-height: 100%;
+
+    border: 0;
+    border-radius: 0;
+
+    box-sizing: border-box;
+
+    &::before {
+      margin: 0 auto;
+    }
+  }
+}
+
+ion-list + ion-list {
+  margin-top: $list-ios-margin-top + $list-ios-margin-bottom;
+
+  ion-list-header {
+    margin-top: -$list-ios-margin-top;
+    padding-top: 0;
+  }
+}
+
+&.hairlines {
+
+  ion-list-header {
+    border-bottom-width: $hairlines-width;
+  }
+
+  ion-list {
+
+    ion-item-options {
+      border-width: $hairlines-width;
+    }
+
+    .item .item-inner {
+      border-width: $hairlines-width;
+    }
+
+    > .item:first-child {
+      border-top-width: $hairlines-width;
+    }
+
+    > .item:last-child,
+    > ion-item-sliding:last-child .item {
+      border-bottom-width: $hairlines-width;
+    }
+  }
+
+}
+
+
+//
+// INSET LIST
+//
+
+ion-list[inset] {
+  margin: $list-inset-ios-margin-top $list-inset-ios-margin-right $list-inset-ios-margin-bottom $list-inset-ios-margin-left;
+
+  border-radius: $list-inset-ios-border-radius;
+
+  ion-list-header {
+    background-color: $list-ios-background-color;
+  }
+
+  .item {
+    border-bottom: 1px solid $list-ios-border-color;
+
+    .item-inner {
+      border-bottom: 0;
+    }
+  }
+
+  > .item:first-child,
+  > ion-item-sliding:first-child .item {
+    border-top: 0;
+  }
+
+  > .item:last-child,
+  > ion-item-sliding:last-child .item {
+    border-bottom: 0;
+  }
+}
+
+ion-list[inset] + ion-list[inset] {
+  margin-top: 0;
+}
+
+&.hairlines ion-list[inset] {
+  .item {
+    border-width: $hairlines-width;
+  }
+}
+
+
+//
+// NO LINES LIST
+//
+
+ion-list[no-lines],
+&.hairlines ion-list[no-lines] {
+  ion-list-header,
+  .item,
+  .item .item-inner {
+    border-width: 0;
+  }
+}

src/components/list/list.md.scss

@@ -0,0 +1,151 @@
+@import "../../globals.md";
+@import "./list";
+
+// Material Design List
+// --------------------------------------------------
+
+$list-md-margin-top:             16px !default;
+$list-md-margin-right:           0 !default;
+$list-md-margin-bottom:          16px !default;
+$list-md-margin-left:            0 !default;
+
+$list-inset-md-margin-top:       16px !default;
+$list-inset-md-margin-right:     16px !default;
+$list-inset-md-margin-bottom:    16px !default;
+$list-inset-md-margin-left:      16px !default;
+$list-inset-md-border-radius:    2px !default;
+
+$list-md-header-padding:         16px $item-md-padding-right 16px $item-md-padding-left !default;
+$list-md-header-font-size:       1.4rem !default;
+$list-md-header-color:           #858585 !default;
+
+
+//
+// DEFAULT LIST
+//
+
+ion-list-header,
+ion-item-divider {
+  margin-left: 0;
+  padding: $list-md-header-padding;
+
+  border-bottom: 1px solid $list-md-border-color;
+  font-size: $list-md-header-font-size;
+  color: $list-md-header-color;
+}
+
+ion-list {
+  margin: 0 $list-md-margin-right $list-md-margin-bottom $list-md-margin-left;
+
+  .item-inner {
+    border-bottom: 1px solid $list-md-border-color;
+  }
+
+  > .item:first-child,
+  > ion-item-sliding:first-child .item {
+    border-top: 1px solid $list-md-border-color;
+  }
+
+  > .item:last-child,
+  > ion-item-sliding:last-child .item {
+    border-bottom: 1px solid $list-md-border-color;
+  }
+
+  > .item:last-child,
+  > ion-item-sliding:last-child {
+    ion-label,
+    .item-inner {
+      border-bottom: 0;
+    }
+  }
+
+  > ion-input:last-child::after {
+    left: 0;
+  }
+
+  ion-item-options button,
+  ion-item-options [button] {
+    display: inline-flex;
+
+    align-items: center;
+
+    margin: 1px 0;
+
+    height: calc(100% - 2px);
+
+    border: 0;
+    border-radius: 0;
+    box-shadow: none;
+
+    box-sizing: border-box;
+
+    &::before {
+      margin: 0 auto;
+    }
+  }
+
+  // If the item has the no-lines attribute remove the bottom border from:
+  // the item itself (for last-child items)
+  // the item-inner class (if it is not last)
+  .item[no-lines],
+  .item[no-lines] .item-inner {
+    border-width: 0;
+  }
+
+  + ion-list {
+    margin-top: $list-md-margin-top + $list-md-margin-bottom;
+
+    ion-list-header {
+      margin-top: -$list-md-margin-top;
+      padding-top: 0;
+    }
+  }
+}
+
+
+//
+// INSET LIST
+//
+
+ion-list[inset] {
+  margin: $list-inset-md-margin-top $list-inset-md-margin-right $list-inset-md-margin-bottom $list-inset-md-margin-left;
+
+  border-radius: $list-inset-md-border-radius;
+
+  .item:first-child {
+    border-top-width: 0;
+    border-top-left-radius: $list-inset-md-border-radius;
+    border-top-right-radius: $list-inset-md-border-radius;
+  }
+
+  .item:last-child {
+    border-bottom-width: 0;
+    border-bottom-left-radius: $list-inset-md-border-radius;
+    border-bottom-right-radius: $list-inset-md-border-radius;
+  }
+
+  .item-input {
+    padding-right: 0;
+    padding-left: 0;
+  }
+
+  + ion-list[inset] {
+    margin-top: 0;
+  }
+
+  ion-list-header {
+    background-color: $list-md-background-color;
+  }
+}
+
+
+//
+// NO LINES LIST
+//
+
+ion-list[no-lines] {
+  .item,
+  .item .item-inner {
+    border-width: 0;
+  }
+}

src/components/list/list.scss

@@ -0,0 +1,27 @@
+@import "../../globals.core";
+
+// List
+// --------------------------------------------------
+
+ion-list-header {
+  display: block;
+  overflow: hidden;
+
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+ion-list {
+  display: block;
+
+  margin: 0;
+  padding: 0;
+
+  list-style-type: none;
+}
+
+ion-list[inset] {
+  overflow: hidden;
+
+  transform: translateZ(0);
+}

src/components/list/list.ts

@@ -0,0 +1,131 @@
+import {Directive, ElementRef, Renderer, Attribute, NgZone} from '@angular/core';
+
+import {Ion} from '../ion';
+import {ItemSlidingGesture} from '../item/item-sliding-gesture';
+
+/**
+ * The List is a widely used interface element in almost any mobile app,
+ * and can include content ranging from basic text all the way to
+ * buttons, toggles, icons, and thumbnails.
+ *
+ * Both the list, which contains items, and the list items themselves
+ * can be any HTML element.
+ *
+ * Using the List and Item components make it easy to support various
+ * interaction modes such as swipe to edit, drag to reorder, and
+ * removing items.
+ *
+ * @demo /docs/v2/demos/list/
+ * @see {@link /docs/v2/components#lists List Component Docs}
+ *
+ */
+@Directive({
+  selector: 'ion-list'
+})
+export class List extends Ion {
+  private _enableSliding: boolean = false;
+
+  /**
+   * @private
+   */
+  ele: HTMLElement;
+
+  /**
+   * @private
+   */
+  slidingGesture: ItemSlidingGesture;
+
+  constructor(elementRef: ElementRef, private _zone: NgZone) {
+    super(elementRef);
+    this.ele = elementRef.nativeElement;
+  }
+
+  /**
+   * @private
+   */
+  ngOnDestroy() {
+    this.slidingGesture && this.slidingGesture.destroy();
+    this.ele = this.slidingGesture = null;
+  }
+
+  /**
+   * Enable sliding items if your page has them
+   *
+   * ```ts
+   * import {Page, List} from 'ionic-angular';
+   * import {ViewChild} from '@angular/core';
+   * @Page...
+   * export class MyClass {
+   *    @ViewChild(List) list: List;
+   *    constructor(){}
+   *    stopSliding(){
+   *      this.list.enableSlidingItems(false);
+   *    }
+   * }
+   * ```
+   * @param {boolean} shouldEnable whether the item-sliding should be enabled or not
+   */
+  enableSlidingItems(shouldEnable: boolean) {
+    if (this._enableSliding !== shouldEnable) {
+      this._enableSliding = shouldEnable;
+
+      if (shouldEnable) {
+        console.debug('enableSlidingItems');
+        this._zone.runOutsideAngular(() => {
+          setTimeout(() => {
+            this.slidingGesture = new ItemSlidingGesture(this, this.ele);
+          });
+        });
+
+      } else {
+        this.slidingGesture && this.slidingGesture.unlisten();
+      }
+    }
+  }
+
+  /**
+   * Enable sliding items if your page has
+   *
+   * ```ts
+   * import {Page, List} from 'ionic-angular';
+   * import {ViewChild} from '@angular/core';
+   * @Page...
+   * export class MyClass {
+   *    @ViewChild(List) list: List;
+   *    constructor(){}
+   *    closeItems(){
+   *      this.list.closeSlidingItems();
+   *    }
+   * }
+   * ```
+   */
+  closeSlidingItems() {
+    this.slidingGesture && this.slidingGesture.closeOpened();
+  }
+
+}
+
+
+/**
+ * @private
+ */
+@Directive({
+  selector: 'ion-list-header'
+})
+export class ListHeader {
+  private _id: string;
+
+  constructor(private _renderer: Renderer, private _elementRef: ElementRef, @Attribute('id') id: string) {
+    this._id = id;
+  }
+
+  public get id(): string {
+    return this._id;
+  }
+
+  public set id(val: string) {
+    this._id = val;
+    this._renderer.setElementAttribute(this._elementRef.nativeElement, 'id', val);
+  }
+
+}

src/components/list/list.wp.scss

@@ -0,0 +1,151 @@
+@import "../../globals.wp";
+@import "./list";
+
+// Windows List
+// --------------------------------------------------
+
+$list-wp-margin-top:             16px !default;
+$list-wp-margin-right:           0 !default;
+$list-wp-margin-bottom:          16px !default;
+$list-wp-margin-left:            0 !default;
+
+$list-inset-wp-margin-top:       16px !default;
+$list-inset-wp-margin-right:     16px !default;
+$list-inset-wp-margin-bottom:    16px !default;
+$list-inset-wp-margin-left:      16px !default;
+$list-inset-wp-border-radius:    2px !default;
+
+$list-wp-header-padding:         16px $item-wp-padding-right 16px $item-wp-padding-left !default;
+$list-wp-header-font-size:       2rem !default;
+$list-wp-header-color:           $list-wp-text-color !default;
+
+
+//
+// DEFAULT LIST
+//
+
+ion-list-header,
+ion-item-divider {
+  margin-left: 0;
+  padding: $list-wp-header-padding;
+
+  border-bottom: 1px solid $list-wp-border-color;
+  font-size: $list-wp-header-font-size;
+  color: $list-wp-header-color;
+}
+
+ion-list {
+  margin: 0 $list-wp-margin-right $list-wp-margin-bottom $list-wp-margin-left;
+
+  .item-inner {
+    border-bottom: 1px solid $list-wp-border-color;
+  }
+
+  > .item:first-child,
+  > ion-item-sliding:first-child .item {
+    border-top: 1px solid $list-wp-border-color;
+  }
+
+  > .item:last-child,
+  > ion-item-sliding:last-child .item {
+    border-bottom: 1px solid $list-wp-border-color;
+  }
+
+  > .item:last-child,
+  > ion-item-sliding:last-child {
+    ion-label,
+    .item-inner {
+      border-bottom: 0;
+    }
+  }
+
+  > ion-input:last-child::after {
+    left: 0;
+  }
+
+  ion-item-options button,
+  ion-item-options [button] {
+    display: inline-flex;
+
+    align-items: center;
+
+    margin: 1px 0;
+
+    height: calc(100% - 2px);
+
+    border: 0;
+    border-radius: 0;
+    box-shadow: none;
+
+    box-sizing: border-box;
+
+    &::before {
+      margin: 0 auto;
+    }
+  }
+
+  // If the item has the no-lines attribute remove the bottom border from:
+  // the item itself (for last-child items)
+  // the item-inner class (if it is not last)
+  .item[no-lines],
+  .item[no-lines] .item-inner {
+    border-width: 0;
+  }
+
+  + ion-list {
+    margin-top: $list-wp-margin-top + $list-wp-margin-bottom;
+
+    ion-list-header {
+      margin-top: -$list-wp-margin-top;
+      padding-top: 0;
+    }
+  }
+}
+
+
+//
+// INSET LIST
+//
+
+ion-list[inset] {
+  margin: $list-inset-wp-margin-top $list-inset-wp-margin-right $list-inset-wp-margin-bottom $list-inset-wp-margin-left;
+
+  border-radius: $list-inset-wp-border-radius;
+
+  .item:first-child {
+    border-top-width: 0;
+    border-top-left-radius: $list-inset-wp-border-radius;
+    border-top-right-radius: $list-inset-wp-border-radius;
+  }
+
+  .item:last-child {
+    border-bottom-width: 0;
+    border-bottom-left-radius: $list-inset-wp-border-radius;
+    border-bottom-right-radius: $list-inset-wp-border-radius;
+  }
+
+  .item-input {
+    padding-right: 0;
+    padding-left: 0;
+  }
+
+  + ion-list[inset] {
+    margin-top: 0;
+  }
+
+  ion-list-header {
+    background-color: $list-wp-background-color;
+  }
+}
+
+
+//
+// NO LINES LIST
+//
+
+ion-list[no-lines] {
+  .item,
+  .item .item-inner {
+    border-width: 0;
+  }
+}

src/components/list/test/headers/e2e.ts

@@ -0,0 +1 @@
+

src/components/list/test/headers/index.ts

@@ -0,0 +1,7 @@
+import {App} from '../../../../../ionic';
+
+
+@App({
+  templateUrl: 'main.html'
+})
+class E2EApp {}

src/components/list/test/headers/main.html

@@ -0,0 +1,106 @@
+<ion-toolbar><ion-title>List Headers</ion-title></ion-toolbar>
+
+<ion-content class="outer-content">
+
+  <ion-list>
+
+    <ion-list-header>
+      List Header
+    </ion-list-header>
+
+    <ion-item>
+      <ion-icon name="wifi" item-left></ion-icon>
+      <ion-label>Wifi</ion-label>
+      <ion-toggle></ion-toggle>
+    </ion-item>
+
+    <ion-item>
+      <ion-icon name="heart" item-left></ion-icon>
+      Affection
+      <ion-note item-right>
+        Very Little
+      </ion-note>
+    </ion-item>
+
+    <ion-item>
+      <ion-icon name="home" item-left></ion-icon>
+      Home
+      <ion-note item-right>
+        Where the heart is
+      </ion-note>
+    </ion-item>
+
+  </ion-list>
+
+
+  <ion-list>
+
+    <ion-list-header>
+      List Header
+    </ion-list-header>
+
+    <ion-item>
+      <ion-icon name="color-wand" item-left></ion-icon>
+      <ion-label>Magic</ion-label>
+      <ion-toggle checked="true"></ion-toggle>
+    </ion-item>
+
+    <ion-item>
+      <ion-icon name="star" item-left></ion-icon>
+      Star status
+      <ion-note item-right>
+        Super
+      </ion-note>
+    </ion-item>
+
+  </ion-list>
+
+
+  <ion-list>
+
+    <ion-list-header>
+      List Header with text that is too long to fit inside the list header
+    </ion-list-header>
+
+    <ion-item>
+      <ion-icon name="pizza" item-left></ion-icon>
+      Pizza
+      <ion-note item-right>
+        Always
+      </ion-note>
+    </ion-item>
+
+    <ion-item>
+      <ion-icon name="beer" item-left></ion-icon>
+      Beer
+      <ion-note item-right>
+        Yes Plz
+      </ion-note>
+    </ion-item>
+
+    <ion-item>
+      <ion-icon name="wine" item-left></ion-icon>
+      Wine
+      <ion-note item-right>
+        All the time
+      </ion-note>
+    </ion-item>
+
+  </ion-list>
+
+
+  <ion-list>
+
+    <ion-item>
+      <ion-icon name="chatboxes" item-left></ion-icon>
+      New List, no header, Item 1
+    </ion-item>
+
+    <ion-item>
+      <ion-icon name="chatboxes" item-left></ion-icon>
+      New List, no header, Item 2
+    </ion-item>
+
+  </ion-list>
+
+</ion-content>

src/components/list/test/inset/e2e.ts

@@ -0,0 +1 @@
+

src/components/list/test/inset/index.ts

@@ -0,0 +1,7 @@
+import {App} from '../../../../../ionic';
+
+
+@App({
+  templateUrl: 'main.html'
+})
+class E2EApp {}

src/components/list/test/inset/main.html

@@ -0,0 +1,77 @@
+
+<ion-toolbar><ion-title>Inset List</ion-title></ion-toolbar>
+
+
+<ion-content class="outer-content">
+
+  <ion-list inset>
+
+    <ion-list-header>
+      Inset List Header
+    </ion-list-header>
+
+    <a ion-item href="#">
+      <ion-icon name="alarm" item-left></ion-icon>
+      List Link Item 1
+    </a>
+
+    <a ion-item href="#">
+      <ion-icon name="analytics" item-left></ion-icon>
+      List Link Item 2
+    </a>
+
+    <ion-item>
+      <ion-label>Toggle</ion-label>
+      <ion-toggle checked="true"></ion-toggle>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>Checkbox</ion-label>
+      <ion-checkbox checked="true"></ion-checkbox>
+    </ion-item>
+
+    <button ion-item>
+      <ion-icon name="boat" item-left></ion-icon>
+      List Button Item 1
+    </button>
+
+    <button ion-item>
+      <ion-icon name="book" item-left></ion-icon>
+      List Button Item 2
+    </button>
+
+  </ion-list>
+
+
+  <ion-list inset>
+
+    <ion-item>
+      Inset List, No Header
+      <button outline item-right>View</button>
+    </ion-item>
+
+    <ion-item>
+      List Item 1
+    </ion-item>
+
+    <ion-item>
+      List Item 2
+    </ion-item>
+
+    <ion-item text-wrap>
+      This is a multiline content within a list that should
+      take up multiple lines and stuff.
+    </ion-item>
+
+  </ion-list>
+
+
+  <ion-list inset>
+
+    <ion-item>
+      Inset List, no header, no items
+    </ion-item>
+
+  </ion-list>
+
+</ion-content>

src/components/list/test/no-lines/index.ts

@@ -0,0 +1,7 @@
+import {App} from '../../../../../ionic';
+
+
+@App({
+  templateUrl: 'main.html'
+})
+class E2EApp {}

src/components/list/test/no-lines/main.html

@@ -0,0 +1,157 @@
+<ion-toolbar><ion-title>List No Lines</ion-title></ion-toolbar>
+
+<ion-content class="outer-content">
+  <ion-list no-lines>
+    <ion-list-header>
+      List With No Lines
+    </ion-list-header>
+
+    <ion-item>
+      <ion-icon name="wifi" item-left></ion-icon>
+      <ion-label>Wifi</ion-label>
+      <ion-toggle></ion-toggle>
+    </ion-item>
+
+    <ion-item>
+      <ion-icon name="heart" item-left></ion-icon>
+      Affection
+      <ion-note item-right>
+        Very Little
+      </ion-note>
+    </ion-item>
+
+    <ion-item>
+      <ion-icon name="home" item-left></ion-icon>
+      Home
+      <ion-note item-right>
+        Where the heart is
+      </ion-note>
+    </ion-item>
+  </ion-list>
+
+  <ion-list no-lines>
+    <ion-list-header>
+      List With Checkboxes No Lines
+    </ion-list-header>
+
+    <ion-item>
+      <ion-checkbox item-left></ion-checkbox>
+      <ion-avatar item-left>
+        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
+      </ion-avatar>
+      <ion-label>Wifi</ion-label>
+    </ion-item>
+
+    <ion-item>
+      <ion-checkbox item-left></ion-checkbox>
+      <ion-avatar item-left>
+        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
+      </ion-avatar>
+      <ion-label>Affection</ion-label>
+    </ion-item>
+
+    <ion-item>
+      <ion-checkbox item-left></ion-checkbox>
+      <ion-avatar item-left>
+        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
+      </ion-avatar>
+      <ion-label>Home</ion-label>
+    </ion-item>
+  </ion-list>
+
+  <ion-list>
+    <ion-list-header>
+      List With No Lines First Item
+    </ion-list-header>
+
+    <ion-item no-lines>
+      <ion-icon name="pizza" item-left></ion-icon>
+      Pizza
+      <ion-note item-right>
+        Always
+      </ion-note>
+    </ion-item>
+
+    <ion-item>
+      <ion-icon name="beer" item-left></ion-icon>
+      Beer
+      <ion-note item-right>
+        Yes Plz
+      </ion-note>
+    </ion-item>
+
+    <ion-item>
+      <ion-icon name="wine" item-left></ion-icon>
+      Wine
+      <ion-note item-right>
+        All the time
+      </ion-note>
+    </ion-item>
+  </ion-list>
+
+  <ion-list>
+    <ion-list-header>
+      List With No Lines Middle Item
+    </ion-list-header>
+
+    <ion-item>
+      <ion-icon name="pizza" item-left></ion-icon>
+      Pizza
+      <ion-note item-right>
+        Always
+      </ion-note>
+    </ion-item>
+
+    <ion-item no-lines>
+      <ion-icon name="beer" item-left></ion-icon>
+      Beer
+      <ion-note item-right>
+        Yes Plz
+      </ion-note>
+    </ion-item>
+
+    <ion-item>
+      <ion-icon name="wine" item-left></ion-icon>
+      Wine
+      <ion-note item-right>
+        All the time
+      </ion-note>
+    </ion-item>
+  </ion-list>
+
+  <ion-list>
+    <ion-list-header>
+      List With No Lines Last Item
+    </ion-list-header>
+
+    <ion-item>
+      <ion-icon name="pizza" item-left></ion-icon>
+      Pizza
+      <ion-note item-right>
+        Always
+      </ion-note>
+    </ion-item>
+
+    <ion-item>
+      <ion-icon name="beer" item-left></ion-icon>
+      Beer
+      <ion-note item-right>
+        Yes Plz
+      </ion-note>
+    </ion-item>
+
+    <ion-item no-lines>
+      <ion-icon name="wine" item-left></ion-icon>
+      Wine
+      <ion-note item-right>
+        All the time
+      </ion-note>
+    </ion-item>
+  </ion-list>
+</ion-content>
+
+<style>
+  img {
+    height: 100px;
+  }
+</style>

src/components/list/test/repeat-headers/index.ts

@@ -0,0 +1,15 @@
+import {App} from '../../../../../ionic';
+
+
+@App({
+  templateUrl: 'main.html'
+})
+class E2EApp {
+  constructor() {
+    this.people = [
+      {"name": "Adam Bradley", "components": [ "all the things"]},
+      {"name": "Max Lynch", "components": [ "checkbox", "content", "form"]},
+      {"name": "Tim Lancina", "components": [ "tabs"]}
+    ];
+  }
+}

src/components/list/test/repeat-headers/main.html

@@ -0,0 +1,16 @@
+<ion-toolbar><ion-title>List Headers Borders</ion-title></ion-toolbar>
+
+<ion-content class="outer-content">
+  
+  <ion-list class="outer-content" *ngFor="let person of people">
+    <ion-list-header>
+      {{person.name}}
+    </ion-list-header>
+    <ion-item *ngFor="let component of person.components">
+      {{component}}
+      <div item-right>
+        <ion-icon name="pin"></ion-icon>
+      </div>
+    </ion-item>
+  </ion-list>
+</ion-content>

src/components/list/test/sticky/index.ts

@@ -0,0 +1,26 @@
+import {App} from '../../../../../ionic';
+
+
+@App({
+  templateUrl: 'main.html'
+})
+class E2EApp {
+  constructor() {
+    this.groups = [];
+
+    var letters = "abcdefghijklmnopqrstuvwxyz".split('');
+
+    for(let i = 0; i < letters.length; i++) {
+      let group = [];
+      for(let j = 0; j < 10; j++) {
+        group.push({
+          title: letters[i] + j
+        });
+      }
+      this.groups.push({
+        title: letters[i].toUpperCase(),
+        items: group
+      });
+    }
+  }
+}

src/components/list/test/sticky/main.html

@@ -0,0 +1,10 @@
+<ion-content>
+  <ion-list>
+    <ion-item-group *ngFor="let group of groups">
+      <ion-item-divider sticky>{{group.title}}</ion-item-divider>
+      <ion-item *ngFor="let item of group.items">
+        {{item.title}}
+      </ion-item>
+    </ion-item-group>
+  </ion-list>
+</ion-content>