From 82cdfbd3365afaaaebc5fe2bf49abb382c3f1dbc Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandy@ionic.io>
Date: Fri, 2 Feb 2018 15:34:57 -0500
Subject: [PATCH] docs(demos): add demo for segment

---
 .../angular/src/app/app-routing.module.ts     |   1 +
 .../app/home-page/home-page.component.html    |   3 +
 .../src/app/segment/segment-page.component.ts | 132 ++++++++++++++++++
 .../src/app/segment/segment-routing.module.ts |  14 ++
 .../angular/src/app/segment/segment.module.ts |  15 ++
 5 files changed, 165 insertions(+)
 create mode 100644 packages/demos/angular/src/app/segment/segment-page.component.ts
 create mode 100644 packages/demos/angular/src/app/segment/segment-routing.module.ts
 create mode 100644 packages/demos/angular/src/app/segment/segment.module.ts

diff --git a/packages/demos/angular/src/app/app-routing.module.ts b/packages/demos/angular/src/app/app-routing.module.ts
index 869d97b94d..2342a89ff5 100644
--- a/packages/demos/angular/src/app/app-routing.module.ts
+++ b/packages/demos/angular/src/app/app-routing.module.ts
@@ -16,6 +16,7 @@ const routes: Routes = [
   { path: 'no-routing-nav', loadChildren: 'app/no-routing-nav/no-routing-nav.module#NoRoutingNavModule' },
   { path: 'modal', loadChildren: 'app/modal/modal.module#ModalModule' },
   { path: 'popover', loadChildren: 'app/popover/popover.module#PopoverModule' },
+  { path: 'segment', loadChildren: 'app/segment/segment.module#SegmentModule' },
   { path: 'virtual-scroll', loadChildren: 'app/virtual-scroll/virtual-scroll.module#VirtualScrollModule' },
 
 ];
diff --git a/packages/demos/angular/src/app/home-page/home-page.component.html b/packages/demos/angular/src/app/home-page/home-page.component.html
index 7c00a7db82..b2232e6617 100644
--- a/packages/demos/angular/src/app/home-page/home-page.component.html
+++ b/packages/demos/angular/src/app/home-page/home-page.component.html
@@ -37,6 +37,9 @@
     <li>
       <a href='popover'>Popover Page</a>
     </li>
+    <li>
+      <a href='segment'>Segment Page</a>
+    </li>
     <li>
       <a href='virtual-scroll'>Virtual Scroll Page</a>
     </li>
diff --git a/packages/demos/angular/src/app/segment/segment-page.component.ts b/packages/demos/angular/src/app/segment/segment-page.component.ts
new file mode 100644
index 0000000000..21496c45e1
--- /dev/null
+++ b/packages/demos/angular/src/app/segment/segment-page.component.ts
@@ -0,0 +1,132 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-segment-page',
+  template: `
+  <ion-app>
+    <ion-page class="show-page">
+      <ion-header>
+        <ion-toolbar>
+          <ion-segment id="segment" [(ngModel)]="relationship" (ionChange)="onSegmentChanged($event)">
+            <ion-segment-button value="friends" (ionSelect)="onSegmentSelected($event)" class="e2eSegmentFriends">
+              Friends
+            </ion-segment-button>
+            <ion-segment-button value="enemies" (ionSelect)="onSegmentSelected($event)">
+              Enemies
+            </ion-segment-button>
+          </ion-segment>
+        </ion-toolbar>
+        <ion-toolbar>
+          <ion-buttons slot="mode-end">
+            <ion-button>
+              <ion-icon slot="icon-only" name="search"></ion-icon>
+            </ion-button>
+          </ion-buttons>
+          <ion-segment [(ngModel)]="icons" color="secondary">
+            <ion-segment-button value="camera">
+              <ion-icon name="camera"></ion-icon>
+            </ion-segment-button>
+            <ion-segment-button value="bookmark">
+              <ion-icon name="bookmark"></ion-icon>
+            </ion-segment-button>
+          </ion-segment>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content padding>
+        <h4>Model style: NgModel</h4>
+        <ion-segment [(ngModel)]="modelStyle" color="dark" [disabled]="isDisabledS">
+          <ion-segment-button value="A">
+            Model A
+          </ion-segment-button>
+          <ion-segment-button value="B">
+            Model B
+          </ion-segment-button>
+          <ion-segment-button value="C" class="e2eSegmentModelC">
+            Model C
+          </ion-segment-button>
+          <ion-segment-button value="D" [disabled]="isDisabledB">
+            Model D
+          </ion-segment-button>
+        </ion-segment>
+        <p>Model Style: <b>Model {{ modelStyle }}</b></p>
+        <ion-segment [(ngModel)]="icons">
+          <ion-segment-button value="camera">
+            <ion-icon name="camera"></ion-icon>
+          </ion-segment-button>
+          <ion-segment-button value="bookmark">
+            <ion-icon name="bookmark"></ion-icon>
+          </ion-segment-button>
+        </ion-segment>
+        <ion-button color="dark" (click)="toggleBDisabled()">Toggle Button Disabled</ion-button>
+        <ion-button color="dark" (click)="toggleSDisabled()">Toggle Segment Disabled</ion-button>
+      </ion-content>
+
+      <ion-footer>
+        <ion-toolbar color="primary">
+          <ion-segment [(ngModel)]="appType" color="light">
+            <ion-segment-button value="paid">
+              Primary
+            </ion-segment-button>
+            <ion-segment-button value="free">
+              Toolbar
+            </ion-segment-button>
+            <ion-segment-button value="top" class="e2eSegmentTopGrossing">
+              Light Segment
+            </ion-segment-button>
+          </ion-segment>
+        </ion-toolbar>
+        <ion-toolbar>
+          <ion-segment [(ngModel)]="appType" color="danger">
+            <ion-segment-button value="paid">
+              Default
+            </ion-segment-button>
+            <ion-segment-button value="free">
+              Toolbar
+            </ion-segment-button>
+            <ion-segment-button value="top">
+              Danger Segment
+            </ion-segment-button>
+          </ion-segment>
+        </ion-toolbar>
+        <ion-toolbar>
+          <ion-segment [(ngModel)]="appType" color="dark" [disabled]="isDisabledS">
+            <ion-segment-button value="paid">
+              Default
+            </ion-segment-button>
+            <ion-segment-button value="free">
+              Toolbar
+            </ion-segment-button>
+            <ion-segment-button value="top">
+              Dark Segment
+            </ion-segment-button>
+          </ion-segment>
+        </ion-toolbar>
+      </ion-footer>
+  </ion-page>
+</ion-app>
+  `
+})
+export class SegmentPageComponent {
+  relationship: string = 'friends';
+  modelStyle: string = 'B';
+  appType: string = 'free';
+  icons: string = 'camera';
+  isDisabledB: boolean = true;
+  isDisabledS: boolean = false;
+
+  toggleBDisabled() {
+    this.isDisabledB = !this.isDisabledB;
+  }
+
+  toggleSDisabled() {
+    this.isDisabledS = !this.isDisabledS;
+  }
+
+  onSegmentChanged(segmentButton: any) {
+    console.log('Segment changed to', segmentButton.currentTarget.value);
+  }
+
+  onSegmentSelected(segmentButton: any) {
+    console.log('Segment selected', segmentButton.currentTarget.value);
+  }
+}
diff --git a/packages/demos/angular/src/app/segment/segment-routing.module.ts b/packages/demos/angular/src/app/segment/segment-routing.module.ts
new file mode 100644
index 0000000000..c6fbc36f39
--- /dev/null
+++ b/packages/demos/angular/src/app/segment/segment-routing.module.ts
@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { SegmentPageComponent } from './segment-page.component';
+
+const routes: Routes = [
+  { path: '', component: SegmentPageComponent }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class SegmentRoutingModule { }
diff --git a/packages/demos/angular/src/app/segment/segment.module.ts b/packages/demos/angular/src/app/segment/segment.module.ts
new file mode 100644
index 0000000000..05a48a9a73
--- /dev/null
+++ b/packages/demos/angular/src/app/segment/segment.module.ts
@@ -0,0 +1,15 @@
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { SegmentPageComponent } from './segment-page.component';
+import { SegmentRoutingModule } from './segment-routing.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    SegmentRoutingModule
+  ],
+  declarations: [SegmentPageComponent],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class SegmentModule { }