From 182ef15363addf71104540441c439d5420e2530f Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@gmail.com>
Date: Mon, 22 May 2017 16:29:26 -0400
Subject: [PATCH] fix(toggle): use slot attr instead of item, add correct
 classes

---
 .../pages/page-one/page-one.html                 |  4 ++--
 .../pages/page-two/page-two.html                 |  2 +-
 src/components/item/item.ts                      |  4 ++--
 .../test/inputs/pages/root-page/root-page.html   |  2 +-
 src/components/toggle/toggle.scss                |  3 +++
 src/components/toggle/toggle.ts                  | 16 ++++++++--------
 .../test/media/pages/root-page/root-page.html    |  2 +-
 7 files changed, 18 insertions(+), 15 deletions(-)

diff --git a/src/components/app/test/gesture-collision/pages/page-one/page-one.html b/src/components/app/test/gesture-collision/pages/page-one/page-one.html
index 73fce4d3f6..030f7cd627 100644
--- a/src/components/app/test/gesture-collision/pages/page-one/page-one.html
+++ b/src/components/app/test/gesture-collision/pages/page-one/page-one.html
@@ -24,7 +24,7 @@
 
       <ion-item>
         <ion-label>Apple</ion-label>
-        <ion-toggle item-start></ion-toggle>
+        <ion-toggle slot="start"></ion-toggle>
       </ion-item>
 
       <ion-item>
@@ -106,7 +106,7 @@
 
       <ion-item>
         <ion-label>Apple</ion-label>
-        <ion-toggle item-start></ion-toggle>
+        <ion-toggle slot="start"></ion-toggle>
       </ion-item>
 
       <ion-item>
diff --git a/src/components/app/test/gesture-collision/pages/page-two/page-two.html b/src/components/app/test/gesture-collision/pages/page-two/page-two.html
index f8c569efe1..ec19aa417f 100644
--- a/src/components/app/test/gesture-collision/pages/page-two/page-two.html
+++ b/src/components/app/test/gesture-collision/pages/page-two/page-two.html
@@ -76,7 +76,7 @@
 
     <ion-item>
       <ion-label>Apple</ion-label>
-      <ion-toggle item-start></ion-toggle>
+      <ion-toggle slot="start"></ion-toggle>
     </ion-item>
 
     <ion-item>
diff --git a/src/components/item/item.ts b/src/components/item/item.ts
index 8f5bb71063..eae0df57e7 100644
--- a/src/components/item/item.ts
+++ b/src/components/item/item.ts
@@ -274,7 +274,7 @@ import { ItemReorder } from './item-reorder';
 @Component({
   selector: 'ion-list-header,ion-item,[ion-item],ion-item-divider',
   template:
-    '<ng-content select="[item-start],[item-left],ion-checkbox:not([item-end]):not([item-right])"></ng-content>' +
+    '<ng-content select="[slot=\'start\'],[item-start],[item-left],ion-checkbox:not([slot=\'end\']):not([item-end]):not([item-right])"></ng-content>' +
     '<div class="item-inner">' +
       '<div class="input-wrapper">' +
         '<ng-content select="ion-label"></ng-content>' +
@@ -283,7 +283,7 @@ import { ItemReorder } from './item-reorder';
         '</ion-label>' +
         '<ng-content select="ion-select,ion-input,ion-textarea,ion-datetime,ion-range,[item-content]"></ng-content>' +
       '</div>' +
-      '<ng-content select="[item-end],[item-right],ion-radio,ion-toggle"></ng-content>' +
+      '<ng-content select="[slot=\'end\'],[item-end],[item-right],ion-radio,ion-toggle"></ng-content>' +
       '<ion-reorder *ngIf="_hasReorder"></ion-reorder>' +
     '</div>' +
     '<div class="button-effect"></div>',
diff --git a/src/components/item/test/inputs/pages/root-page/root-page.html b/src/components/item/test/inputs/pages/root-page/root-page.html
index 43a42fe15b..ffeb611df2 100644
--- a/src/components/item/test/inputs/pages/root-page/root-page.html
+++ b/src/components/item/test/inputs/pages/root-page/root-page.html
@@ -58,7 +58,7 @@
 
     <ion-item>
       <ion-label>Toggle (left)</ion-label>
-      <ion-toggle [(ngModel)]="toggle" item-start [disabled]='disabled'></ion-toggle>
+      <ion-toggle [(ngModel)]="toggle" slot="start" [disabled]='disabled'></ion-toggle>
     </ion-item>
 
     <ion-item>
diff --git a/src/components/toggle/toggle.scss b/src/components/toggle/toggle.scss
index 3b94397a15..273b435d1c 100644
--- a/src/components/toggle/toggle.scss
+++ b/src/components/toggle/toggle.scss
@@ -17,6 +17,9 @@ ion-toggle.upgraded {
 ion-toggle ion-gesture {
   display: block;
   visibility: inherit;
+
+  width: 100%;
+  height: 100%;
 }
 
 .toggle-cover {
diff --git a/src/components/toggle/toggle.ts b/src/components/toggle/toggle.ts
index ced713d26d..91d3b1697d 100644
--- a/src/components/toggle/toggle.ts
+++ b/src/components/toggle/toggle.ts
@@ -105,13 +105,13 @@ export class Toggle implements BooleanInputComponent {
 
 
   render() {
-    return h(this,
-      h('ion-gesture', Ionic.theme(this, 'toggle', {
-        class: {
-          'toggle-activated': this.activated,
-          'toggle-checked': this.checked,
-          'toggle-disabled': this.disabled,
-        },
+    return h(this, Ionic.theme(this, 'toggle', {
+      class: {
+        'toggle-activated': this.activated,
+        'toggle-checked': this.checked,
+        'toggle-disabled': this.disabled,
+      },
+    }), h('ion-gesture', {
         props: {
           'canStart': this.canStart.bind(this),
           'onStart': this.onDragStart.bind(this),
@@ -125,7 +125,7 @@ export class Toggle implements BooleanInputComponent {
           'threshold': 20,
           'attachTo': 'parent'
         }
-      }),
+    },
         [
           h('div.toggle-icon',
             h('div.toggle-inner')
diff --git a/src/components/virtual-scroll/test/media/pages/root-page/root-page.html b/src/components/virtual-scroll/test/media/pages/root-page/root-page.html
index 292b34f3f4..b4682c96b7 100644
--- a/src/components/virtual-scroll/test/media/pages/root-page/root-page.html
+++ b/src/components/virtual-scroll/test/media/pages/root-page/root-page.html
@@ -15,7 +15,7 @@
     <ion-item *virtualItem="let item" [ngClass]="item.class">
       <ion-label>{{item.type}}-{{item.value}}</ion-label>
       <ion-checkbox *ngIf="item.type === 'checkbox'" item-start></ion-checkbox>
-      <ion-toggle *ngIf="item.type === 'toggle'" item-start></ion-toggle>
+      <ion-toggle *ngIf="item.type === 'toggle'" slot="start"></ion-toggle>
       <ion-radio *ngIf="item.type === 'radio'" item-start></ion-radio>
       <ion-range *ngIf="item.type === 'range'"></ion-range>
     </ion-item>