chore(): fix conflicts

# Conflicts:
#	src/config/bootstrap.ts

demos/range/index.ts

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

demos/range/main.html

@@ -0,0 +1,60 @@
+<ion-toolbar>
+  <ion-title>Range</ion-title>
+</ion-toolbar>
+
+<ion-content class="outer-content">
+  <ion-list>
+    <ion-list-header>
+      Brightness
+      <ion-badge item-right>{{brightness}}</ion-badge>
+    </ion-list-header>
+    <ion-item>
+      <ion-icon item-left small name="sunny"></ion-icon>
+      <ion-range [(ngModel)]="brightness"></ion-range>
+      <ion-icon item-right name="sunny"></ion-icon>
+    </ion-item>
+  </ion-list>
+
+  <ion-list>
+    <ion-list-header>
+      Saturation
+      <ion-badge item-right secondary>{{saturation}}</ion-badge>
+    </ion-list-header>
+    <ion-item>
+      <ion-note item-left>-200</ion-note>
+      <ion-range min="-200" max="200" pin="true" [(ngModel)]="saturation" secondary></ion-range>
+      <ion-note item-right>200</ion-note>
+    </ion-item>
+  </ion-list>
+
+  <ion-list>
+    <ion-list-header>
+      Warmth
+      <ion-badge item-right danger>{{warmth}}</ion-badge>
+    </ion-list-header>
+    <ion-item>
+      <ion-icon item-left small danger name="thermometer"></ion-icon>
+      <ion-range min="1000" max="2000" step="100" snaps="true" [(ngModel)]="warmth" danger></ion-range>
+      <ion-icon item-right danger name="thermometer"></ion-icon>
+    </ion-item>
+  </ion-list>
+
+  <ion-list>
+    <ion-list-header>
+      Structure
+      <ion-badge item-right dark>{{structure.lower}}</ion-badge>
+      <ion-badge item-right dark>{{structure.upper}}</ion-badge>
+    </ion-list-header>
+    <ion-item>
+      <ion-note item-left>0</ion-note>
+      <ion-range dualKnobs="true" pin="true" [(ngModel)]="structure" (ionChange)="onChange($event)" dark></ion-range>
+      <ion-note item-right>100</ion-note>
+    </ion-item>
+  </ion-list>
+</ion-content>
+
+<style>
+  ion-list + ion-list {
+    margin-top: 0;
+  }
+</style>

src/components.ios.scss

@@ -25,6 +25,7 @@
   "components/picker/picker.ios",
   "components/popover/popover.ios",
   "components/radio/radio.ios",
+  "components/range/range.ios",
   "components/searchbar/searchbar.ios",
   "components/segment/segment.ios",
   "components/select/select.ios",

src/components.md.scss

@@ -24,6 +24,7 @@
   "components/picker/picker.md",
   "components/popover/popover.md",
   "components/radio/radio.md",
+  "components/range/range.md",
   "components/searchbar/searchbar.md",
   "components/segment/segment.md",
   "components/select/select.md",

src/components.ts

@@ -34,6 +34,7 @@ export * from './components/picker/picker';
 export * from './components/popover/popover';
 export * from './components/radio/radio-button';
 export * from './components/radio/radio-group';
+export * from './components/range/range';
 export * from './components/refresher/refresher';
 export * from './components/refresher/refresher-content';
 export * from './components/scroll/scroll';

src/components.wp.scss

@@ -24,6 +24,7 @@
   "components/picker/picker.wp",
   "components/popover/popover.wp",
   "components/radio/radio.wp",
+  "components/range/range.wp",
   "components/searchbar/searchbar.wp",
   "components/segment/segment.wp",
   "components/select/select.wp",

src/components/item/item.ts

@@ -48,7 +48,7 @@ import {Label} from '../label/label';
         '<ion-label *ngIf="_viewLabel">' +
           '<ng-content></ng-content>' +
         '</ion-label>' +
-        '<ng-content select="ion-select,ion-input,ion-textarea,ion-datetime"></ng-content>' +
+        '<ng-content select="ion-select,ion-input,ion-textarea,ion-datetime,ion-range"></ng-content>' +
       '</div>' +
       '<ng-content select="[item-right],ion-radio,ion-toggle"></ng-content>' +
     '</div>' +

src/components/range/range.ios.scss

@@ -0,0 +1,187 @@
+@import "../../globals.ios";
+
+// iOS Range
+// --------------------------------------------------
+
+$range-ios-padding-vertical:                  8px !default;
+$range-ios-padding-horizontal:                16px !default;
+
+$range-ios-slider-height:                     42px !default;
+
+$range-ios-hit-width:                         42px !default;
+$range-ios-hit-height:                        $range-ios-slider-height !default;
+
+$range-ios-bar-height:                        1px !default;
+$range-ios-bar-background-color:              #bdbdbd !default;
+$range-ios-bar-active-background-color:       color($colors-ios, primary) !default;
+
+$range-ios-knob-width:                        28px !default;
+$range-ios-knob-height:                       $range-ios-knob-width !default;
+$range-ios-knob-box-shadow:                   0 3px 1px rgba(0, 0, 0, .1), 0 4px 8px rgba(0, 0, 0, .13), 0 0 0 1px rgba(0, 0, 0, .02) !default;
+$range-ios-knob-border-radius:                50% !default;
+$range-ios-knob-background-color:             #fff !default;
+
+$range-ios-tick-width:                        $range-ios-bar-height !default;
+$range-ios-tick-height:                       8px !default;
+$range-ios-tick-border-radius:                0 !default;
+$range-ios-tick-background-color:             $range-ios-bar-background-color !default;
+$range-ios-tick-active-background-color:      $range-ios-bar-active-background-color !default;
+
+$range-ios-pin-background-color:              transparent !default;
+$range-ios-pin-color:                         $text-ios-color !default;
+$range-ios-pin-font-size:                     12px !default;
+$range-ios-pin-padding:                       8px !default;
+
+.item-range .item-inner {
+  overflow: visible;
+}
+
+.item-range .input-wrapper {
+  overflow: visible;
+
+  flex-direction: column;
+}
+
+.item-range ion-range {
+  width: 100%;
+}
+
+ion-range {
+  position: relative;
+  display: block;
+
+  padding: $range-ios-padding-vertical $range-ios-padding-horizontal;
+}
+
+.range-has-pin {
+  padding-top: $range-ios-padding-vertical + $range-ios-pin-font-size;
+}
+
+.range-slider {
+  position: relative;
+
+  height: $range-ios-slider-height;
+
+  cursor: pointer;
+}
+
+.range-bar {
+  position: absolute;
+  top: ($range-ios-slider-height / 2);
+  left: 0;
+
+  width: 100%;
+  height: $range-ios-bar-height;
+
+  background: $range-ios-bar-background-color;
+
+  pointer-events: none;
+}
+
+.range-pressed .range-bar-active {
+  will-change: left, right;
+}
+
+.range-pressed .range-knob-handle {
+  will-change: left;
+}
+
+.range-bar-active {
+  bottom: 0;
+
+  width: auto;
+
+  background: $range-ios-bar-active-background-color;
+}
+
+.range-knob-handle {
+  position: absolute;
+  top: ($range-ios-slider-height / 2);
+  left: 0%;
+
+  margin-top: -($range-ios-hit-height / 2);
+  margin-left: -($range-ios-hit-width / 2);
+
+  width: $range-ios-hit-width;
+  height: $range-ios-hit-height;
+
+  text-align: center;
+}
+
+.range-knob {
+  position: absolute;
+  top: ($range-ios-hit-height / 2) - ($range-ios-knob-height / 2) + ($range-ios-bar-height / 2) - .5px;
+  left: ($range-ios-hit-width / 2) - ($range-ios-knob-width / 2);
+
+  width: $range-ios-knob-width;
+  height: $range-ios-knob-height;
+
+  border-radius: $range-ios-knob-border-radius;
+
+  background: $range-ios-knob-background-color;
+
+  box-shadow: $range-ios-knob-box-shadow;
+
+  pointer-events: none;
+}
+
+.range-tick {
+  position: absolute;
+  top: ($range-ios-hit-height / 2) - ($range-ios-tick-height / 2) + ($range-ios-bar-height / 2);
+
+  margin-left: ($range-ios-tick-width / 2) * -1;
+
+  width: $range-ios-tick-width;
+  height: $range-ios-tick-height;
+
+  border-radius: $range-ios-tick-border-radius;
+
+  background: $range-ios-tick-background-color;
+
+  pointer-events: none;
+}
+
+.range-tick-active {
+  background: $range-ios-tick-active-background-color;
+}
+
+.range-pin {
+  position: relative;
+  top: -20px;
+  display: inline-block;
+
+  padding: $range-ios-pin-padding;
+
+  min-width: 28px;
+
+  border-radius: 50px;
+
+  font-size: $range-ios-pin-font-size;
+
+  text-align: center;
+
+  color: $range-ios-pin-color;
+
+  background: $range-ios-pin-background-color;
+
+  transform: translate3d(0, 28px, 0) scale(.01);
+  transition: transform 120ms ease;
+}
+
+.range-knob-pressed .range-pin {
+  transform: translate3d(0, 0, 0) scale(1);
+}
+
+// Generate iOS Range Colors
+// --------------------------------------------------
+
+@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
+
+  ion-range[#{$color-name}] {
+    .range-bar-active,
+    .range-tick-active {
+      background: $color-base;
+    }
+  }
+
+}