Segment runs (incorrectly though)

ionic/components/segment/extensions/ios.scss

@@ -1,32 +1,28 @@
-.platform-ios {
+.segment-ios .ion-segment {
+  > button,
+  > [button] {
+    border-width: 1px;
 
-  .ion-segment {
+    transition: 100ms all linear;
 
-    > button,
+    color: get-color(primary, base);
-    > [button] {
-      border-width: 1px;
 
-      transition: 100ms all linear;
+    min-height: 3.3rem;
+    line-height: 3.3rem;
 
-      color: get-color(primary, base);
+    &.active {
+      background-color: get-color(primary, base);
+      color: white;
+    }
 
-      min-height: 3.3rem;
+    border-style: solid;
-      line-height: 3.3rem;
+    border-color: get-color(primary, base);
 
-      &.active {
+    &:first-of-type {
-        background-color: get-color(primary, base);
+      border-right-width: 0px;
-        color: white;
+    }
-      }
+    &:last-of-type {
-
+      border-left-width: 0px;
-      border-style: solid;
-      border-color: get-color(primary, base);
-
-      &:first-of-type {
-        border-right-width: 0px;
-      }
-      &:last-of-type {
-        border-left-width: 0px;
-      }
     }
   }
 }

ionic/components/segment/segment.js

@@ -4,6 +4,7 @@ import {Component, Directive, onInit} from 'angular2/src/core/annotations_impl/a
 import {Ancestor} from 'angular2/src/core/annotations_impl/visibility';
 import {View} from 'angular2/src/core/annotations_impl/view';
 
+import {NgControl} from 'angular2/forms';
 import {ControlGroup, ControlDirective} from 'angular2/forms'
 import {dom} from 'ionic/util';
 import {IonicComponent} from 'ionic/config/component'
@@ -22,7 +23,7 @@ export class Segment {
   static get config() {
     return {
       selector: 'ion-segment',
-      appInjector: [ControlDirective],
+      appInjector: [ NgControl ],
       properties: [
         'value'
       ],
@@ -34,18 +35,17 @@ export class Segment {
   }
 
   constructor(
+    ngControl: NgControl,
     elementRef: ElementRef,
-    renderer: Renderer,
+    renderer: Renderer
-    cd:ControlDirective
   ) {
-    console.log('ELEMENT REF INJECT', elementRef);
+    console.log('ELEMENT REF INJECT', elementRef, ngControl);
     this.domElement = elementRef.domElement
     //this.config = Segment.config.invoke(this)
     this.elementRef = elementRef;
     this.renderer = renderer;
-    this.controlDirective = cd;
+    this.ngControl = ngControl;
-
+    this.ngControl.valueAccessor = this;
-    cd.valueAccessor = this; //ControlDirective should inject CheckboxControlDirective
 
     this.buttons = [];
   }
@@ -117,14 +117,14 @@ export class Segment {
     'value'
   ],
   host: {
-    '(click)': 'buttonClicked($event)'
+    '(click)': 'buttonClicked($event)',
+    'class.active': 'isActive'
   }
 })
 export class SegmentButton {
   constructor(
     @Ancestor() segment: Segment,
     elementRef: ElementRef,
-    renderer: Renderer
   ) {
     this.domElement = elementRef.domElement
     this.segment = segment;
@@ -133,12 +133,7 @@ export class SegmentButton {
   }
 
   setActive(isActive) {
-    // TODO: No domElement
+    this.isActive = isActive;
-    if(isActive) {
-      this.domElement.classList.add('active');
-    } else {
-      this.domElement.classList.remove('active');
-    }
   }
 
   buttonClicked(event) {

ionic/components/segment/test/basic/main.html

@@ -2,13 +2,13 @@
   <form (^submit)="doSubmit($event)" [control-group]="form">
 
     <ion-segment control="mapStyle">
-      <ion-segment-button value="standard" ion-button>
+      <ion-segment-button value="standard" button>
         Standard
       </ion-segment-button>
-      <ion-segment-button value="hybrid" ion-button>
+      <ion-segment-button value="hybrid" button>
         Hybrid
       </ion-segment-button>
-      <ion-segment-button value="sat" ion-button>
+      <ion-segment-button value="sat" button>
         Satellite
       </ion-segment-button>
       <!--

ionic/config/ionic-view.js

@@ -31,7 +31,8 @@ export class IonicView extends View {
       Icon,
 
       // Form elements
-      //Checkbox, Switch, Label, Input, Segment, SegmentButton,
+      Segment, SegmentButton,
+      //Checkbox, Switch, Label, Input
       //RadioGroup, RadioButton, SearchBar,
 
       // Nav
@@ -42,4 +43,3 @@ export class IonicView extends View {
     super(config);
   }
 }
-