refactor(toggle): renamed ion-switch to ion-toggle

ionic/components/toggle/test/basic/e2e.ts

@@ -0,0 +1,11 @@
+
+it('should check apple via switch element click', function() {
+  element(by.css('[ng-control=appleCtrl] .toggle-media')).click();
+});
+
+
+it('should enable/check grape via buttons and submit form', function() {
+  element(by.css('.e2eGrapeDisabled')).click();
+  element(by.css('.e2eGrapeChecked')).click();
+  element(by.css('.e2eSubmit')).click();
+});

ionic/components/toggle/test/basic/index.ts

@@ -0,0 +1,45 @@
+import {App} from 'ionic/ionic';
+import {
+  Control,
+  ControlGroup,
+  NgForm,
+  Validators,
+  NgControl,
+  ControlValueAccessor,
+  NgControlName,
+  NgFormModel,
+  FormBuilder
+} from 'angular2/angular2';
+
+@App({
+  templateUrl: 'main.html'
+})
+class E2EApp {
+  constructor() {
+    this.fruitsForm = new ControlGroup({
+      "appleCtrl": new Control(),
+      "bananaCtrl": new Control(true),
+      "cherryCtrl": new Control(false),
+      "grapeCtrl": new Control(true)
+    });
+
+    this.grapeDisabled = true;
+    this.grapeChecked = true;
+
+    this.myModel = true;
+  }
+
+  toggleGrapeChecked() {
+    this.grapeChecked = !this.grapeChecked;
+  }
+
+  toggleGrapeDisabled() {
+    this.grapeDisabled = !this.grapeDisabled;
+  }
+
+  doSubmit(ev) {
+    console.log('Submitting form', this.fruitsForm.value);
+    this.formResults = JSON.stringify(this.fruitsForm.value);
+    ev.preventDefault();
+  }
+}

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

@@ -0,0 +1,59 @@
+
+<ion-toolbar><ion-title>Toggles</ion-title></ion-toolbar>
+
+
+<ion-content>
+
+  <form (submit)="doSubmit($event)" [ng-form-model]="fruitsForm">
+
+    <ion-list>
+
+      <ion-toggle value="apple" checked="true" ng-control="appleCtrl">
+        Apple, value=apple, init checked
+      </ion-toggle>
+
+      <ion-toggle ng-control="bananaCtrl">
+        Banana, init no checked/value attributes
+      </ion-toggle>
+
+      <ion-toggle value="cherry" disabled="true" ng-control="cherryCtrl">
+        Cherry, value=cherry, init disabled
+      </ion-toggle>
+
+      <ion-toggle value="grape" [checked]="grapeChecked" [disabled]="grapeDisabled" ng-control="grapeCtrl">
+        Grape, value=grape, init checked, disabled
+      </ion-toggle>
+
+      <ion-toggle secondary checked="true">
+        Secondary color
+      </ion-toggle>
+
+      <ion-toggle value="apple" checked="true" [(ng-model)]="myModel">
+        I'm an NgModel
+      </ion-toggle>
+
+    </ion-list>
+
+  </form>
+
+  <p aria-hidden="true" class="align-center">
+    <button (click)="toggleGrapeChecked()" outline small class="e2eGrapeChecked">Grape Checked</button>
+    <button (click)="toggleGrapeDisabled()" outline small class="e2eGrapeDisabled">Grape Disabled</button>
+    <button (click)="doSubmit($event)" outline small class="e2eSubmit">Submit</button>
+  </p>
+
+  <p aria-hidden="true" padding>
+    <code>appleCtrl.dirty: {{fruitsForm.controls.appleCtrl.dirty}}</code><br>
+    <code>appleCtrl.value: {{fruitsForm.controls.appleCtrl.value}}</code><br>
+    <code>bananaCtrl.dirty: {{fruitsForm.controls.bananaCtrl.dirty}}</code><br>
+    <code>bananaCtrl.value: {{fruitsForm.controls.bananaCtrl.value}}</code><br>
+    <code>cherry.dirty: {{fruitsForm.controls.cherryCtrl.dirty}}</code><br>
+    <code>cherry.value: {{fruitsForm.controls.cherryCtrl.value}}</code><br>
+    <code>grape.dirty: {{fruitsForm.controls.grapeCtrl.dirty}}</code><br>
+    <code>grape.value: {{fruitsForm.controls.grapeCtrl.value}}</code><br>
+    <code>ngModel.value: {{myModel}}</code><br>
+  </p>
+
+  <pre aria-hidden="true" padding>{{formResults}}</pre>
+
+</ion-content>