feat(demo): include the segments

packages/angular/demo/.angular-cli.json

@@ -20,7 +20,7 @@
       "testTsconfig": "tsconfig.spec.json",
       "prefix": "app",
       "styles": [
-        "styles.css"
+        "styles.scss"
       ],
       "scripts": [],
       "environmentSource": "environments/environment.ts",
@@ -55,7 +55,7 @@
     }
   },
   "defaults": {
-    "styleExt": "css",
+    "styleExt": "scss",
     "component": {}
   }
 }

packages/angular/demo/e2e/group-inputs.e2e-spec.ts

@@ -83,4 +83,21 @@ describe('Group Inputs Page', () => {
       });
     });
   });
+
+  describe('segments', () => {
+    it('should have the proper initial value', () => {
+      page.navigateTo();
+      const el = page.getSegment();
+      expect(el.getAttribute('value')).toEqual('tripe');
+    });
+
+    it('should reflect back the changed value', () => {
+      page.navigateTo();
+      return browser.executeScript('window.scrollTo(0, 500);').then(function() {
+        const btns = page.getSegmentButtons();
+        btns.chicken.click();
+        expect(page.getRadioOutputText()).toEqual('chicken');
+      });
+    });
+  });
 });

packages/angular/demo/e2e/group-inputs.po.ts

@@ -23,6 +23,16 @@ export class GroupInputsPage {
     };
   }
 
+  getSegmentButtons() {
+    return {
+      beef: element(by.id('ion-seg-beef')),
+      tongue: element(by.id('ion-seg-tongue')),
+      brains: element(by.id('ion-seg-brains')),
+      tripe: element(by.id('ion-seg-tripe')),
+      chicken: element(by.id('ion-seg-chicken'))
+    };
+  }
+
   getUngroupedRadioButtons() {
     return {
       beef: element(by.id('ion-beef')),
@@ -33,6 +43,10 @@ export class GroupInputsPage {
     };
   }
 
+  getSegment() {
+    return element(by.id('segment'));
+  }
+
   getRadioOutputText() {
     return element(by.id('radioOutput')).getText();
   }

packages/angular/demo/package-lock.json

@@ -198,9 +198,9 @@
       "integrity": "sha512-XF1MuyjKEwWjLyl0VBeAbMkXsPgqbRxRhtzHLgG7DPm7XdvtaZEOiMlTLOt8BTrd+/oOyB/XYF/9ltE6ZxdwEg=="
     },
     "@ionic/core": {
-      "version": "0.0.2-25",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-0.0.2-25.tgz",
-      "integrity": "sha512-LDbeBZp1sW3caHgpX0M8vLf0e7+6K5b/refJpO8Gjhxasc+b5h0IckooFGyxwXLgFbLDRKtb/gssXkCOM1/rSg=="
+      "version": "0.0.2-26",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-0.0.2-26.tgz",
+      "integrity": "sha512-RAxaPiutX0Ct5XhzLClr0TtGmlSFVbSzkrHLKLsxhZQbGYe532uIww9EUMqHjq+1Zn7rOGXjIkyzDohS46Mflg=="
     },
     "@ngtools/json-schema": {
       "version": "1.1.0",

packages/angular/demo/src/app/basic-inputs-page/basic-inputs-page.component.ts

@@ -3,7 +3,7 @@ import { Component, OnInit, ViewEncapsulation } from '@angular/core';
 @Component({
   selector: 'app-basic-inputs-page',
   templateUrl: './basic-inputs-page.component.html',
-  styleUrls: ['./basic-inputs-page.component.css'],
+  styleUrls: ['./basic-inputs-page.component.scss'],
   encapsulation: ViewEncapsulation.None
 })
 export class BasicInputsPageComponent implements OnInit {

packages/angular/demo/src/app/group-inputs-page/group-inputs-page.component.html

@@ -98,5 +98,23 @@
     <ion-col></ion-col>
   </ion-row>
 
+  <ion-row>
+    <ion-col>
+      <h2>Ionic Segment</h2>
+    </ion-col>
+  </ion-row>
+  <ion-row>
+    <ion-col>
+      <ion-segment id="segment" color="primary" [(ngModel)]="radioValue">
+        <ion-segment-button value="beef" id="ion-seg-beef">Carne Asada</ion-segment-button>
+        <ion-segment-button value="tongue" id="ion-seg-tongue">Lengua</ion-segment-button>
+        <ion-segment-button value="brains" id="ion-seg-brains">Sesos</ion-segment-button>
+        <ion-segment-button value="tripe" id="ion-seg-tripe">Tripa</ion-segment-button>
+        <ion-segment-button value="chicken" id="ion-seg-chicken">Pollo</ion-segment-button>
+      </ion-segment>
+    </ion-col>
+    <ion-col></ion-col>
+  </ion-row>
+
 </ion-grid>
 <a href='home'>Home</a>

packages/angular/demo/src/app/group-inputs-page/group-inputs-page.component.ts

@@ -3,7 +3,7 @@ import { Component, OnInit, ViewEncapsulation } from '@angular/core';
 @Component({
   selector: 'app-group-inputs-page',
   templateUrl: './group-inputs-page.component.html',
-  styleUrls: ['./group-inputs-page.component.css'],
+  styleUrls: ['./group-inputs-page.component.scss'],
   encapsulation: ViewEncapsulation.None
 })
 export class GroupInputsPageComponent implements OnInit {

packages/angular/demo/src/app/home-page/home-page.component.ts

@@ -3,7 +3,7 @@ import { Component, OnInit, ViewEncapsulation } from '@angular/core';
 @Component({
   selector: 'app-home-page',
   templateUrl: './home-page.component.html',
-  styleUrls: ['./home-page.component.css'],
+  styleUrls: ['./home-page.component.scss'],
   encapsulation: ViewEncapsulation.None
 })
 export class HomePageComponent implements OnInit {

packages/angular/demo/src/app/shared/ion-select-value-accessor/ion-select-value-accessor.directive.ts

@@ -6,7 +6,7 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 // https://github.com/angular/angular/blob/5.0.2/packages/forms/src/directives/select_control_value_accessor.ts#L28-L158
 @Directive({
   /* tslint:disable-next-line:directive-selector */
-  selector: 'ion-select, ion-radio-group',
+  selector: 'ion-select, ion-radio-group, ion-segment',
   providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: IonSelectValueAccessorDirective, multi: true }]
 })
 export class IonSelectValueAccessorDirective implements ControlValueAccessor {

packages/angular/demo/src/styles.scss

@@ -1 +1,3 @@
 /* You can add global styles to this file, and also import other style files */
+
+// @import '~@ionic/core/src/themes/ionic.build.default';