From c792ab69ae0401a7426527c57823c4fc0dd9d94a Mon Sep 17 00:00:00 2001
From: Manuel Mtz-Almeida <manu.valladolid@gmail.com>
Date: Thu, 6 Apr 2017 23:55:03 +0200
Subject: [PATCH] refactor(toggle): checked/activated classes are applied to
 the host

---
 .../test/basic/pages/root-page/root-page.html |  3 +++
 src/components/toggle/toggle.ios.scss         | 14 ++++++-------
 src/components/toggle/toggle.md.scss          | 20 ++++++++++++++-----
 src/components/toggle/toggle.ts               | 15 +++++++-------
 src/components/toggle/toggle.wp.scss          |  8 ++++----
 src/tap-click/tap-click.ts                    |  2 +-
 6 files changed, 37 insertions(+), 25 deletions(-)

diff --git a/src/components/toggle/test/basic/pages/root-page/root-page.html b/src/components/toggle/test/basic/pages/root-page/root-page.html
index 8da29221b6..a64f031d63 100644
--- a/src/components/toggle/test/basic/pages/root-page/root-page.html
+++ b/src/components/toggle/test/basic/pages/root-page/root-page.html
@@ -60,6 +60,9 @@
 
     </ion-list>
 
+    <p padding>
+      <ion-toggle></ion-toggle>
+    </p>
   </form>
 
   <p aria-hidden="true" text-center>
diff --git a/src/components/toggle/toggle.ios.scss b/src/components/toggle/toggle.ios.scss
index 16d3bf7d37..8c632a6db1 100644
--- a/src/components/toggle/toggle.ios.scss
+++ b/src/components/toggle/toggle.ios.scss
@@ -123,7 +123,7 @@ $toggle-ios-item-right-padding:        6px ($item-ios-padding-right / 2) 5px ($i
 // iOS Toggle Background Track: Checked
 // -----------------------------------------
 
-.toggle-ios .toggle-checked {
+.toggle-ios.toggle-checked .toggle-icon {
   background-color: $toggle-ios-background-color-on;
 }
 
@@ -131,8 +131,8 @@ $toggle-ios-item-right-padding:        6px ($item-ios-padding-right / 2) 5px ($i
 // iOS Toggle Background Oval: Activated or Checked
 // -----------------------------------------
 
-.toggle-ios .toggle-activated::before,
-.toggle-ios .toggle-checked::before {
+.toggle-ios.toggle-activated .toggle-icon::before,
+.toggle-ios.toggle-checked .toggle-icon::before {
   transform: scale3d(0, 0, 0);
 }
 
@@ -140,7 +140,7 @@ $toggle-ios-item-right-padding:        6px ($item-ios-padding-right / 2) 5px ($i
 // iOS Toggle Inner Knob: Checked
 // -----------------------------------------
 
-.toggle-ios .toggle-checked .toggle-inner {
+.toggle-ios.toggle-checked .toggle-inner {
   transform: translate3d($toggle-ios-width - $toggle-ios-handle-width - ($toggle-ios-border-width * 2), 0, 0);
 
 }
@@ -148,7 +148,7 @@ $toggle-ios-item-right-padding:        6px ($item-ios-padding-right / 2) 5px ($i
 // iOS Toggle Background Oval: Activated and Checked
 // -----------------------------------------
 
-.toggle-ios .toggle-activated.toggle-checked::before {
+.toggle-ios.toggle-activated.toggle-checked .toggle-inner::before {
   transform: scale3d(0, 0, 0);
 }
 
@@ -156,7 +156,7 @@ $toggle-ios-item-right-padding:        6px ($item-ios-padding-right / 2) 5px ($i
 // iOS Toggle Inner Knob: Activated and Unchecked
 // -----------------------------------------
 
-.toggle-ios .toggle-activated .toggle-inner {
+.toggle-ios.toggle-activated .toggle-inner {
   width: $toggle-ios-handle-width + 6;
 }
 
@@ -164,7 +164,7 @@ $toggle-ios-item-right-padding:        6px ($item-ios-padding-right / 2) 5px ($i
 // iOS Toggle Inner Knob: Activated and Checked
 // -----------------------------------------
 
-.toggle-ios .toggle-activated.toggle-checked .toggle-inner {
+.toggle-ios.toggle-activated.toggle-checked .toggle-inner {
   // when pressing down on the toggle and IS checked
   // make the knob wider and move it left a bit
   left: $toggle-ios-border-width - 6;
diff --git a/src/components/toggle/toggle.md.scss b/src/components/toggle/toggle.md.scss
index 296ff1d7af..2ee71ea077 100644
--- a/src/components/toggle/toggle.md.scss
+++ b/src/components/toggle/toggle.md.scss
@@ -45,6 +45,9 @@ $toggle-md-transition-duration:          300ms !default;
 /// @prop - Opacity of the disabled toggle
 $toggle-md-disabled-opacity:             .3 !default;
 
+/// @prop - Padding of standalone toggle
+$toggle-md-padding:                      12px !default;
+
 /// @prop - Padding of the toggle positioned on the left in an item
 $toggle-md-item-left-padding:            12px 18px 12px 2px !default;
 
@@ -57,6 +60,13 @@ $toggle-md-item-right-padding:           12px ($item-md-padding-right / 2) 12px
 
 .toggle-md {
   position: relative;
+
+  width: $toggle-md-track-width;
+  height: $toggle-md-track-height;
+
+  padding: $toggle-md-padding;
+
+  box-sizing: content-box;
 }
 
 
@@ -67,8 +77,8 @@ $toggle-md-item-right-padding:           12px ($item-md-padding-right / 2) 12px
   position: relative;
   display: block;
 
-  width: $toggle-md-track-width;
-  height: $toggle-md-track-height;
+  width: 100%;
+  height: 100%;
 
   border-radius: $toggle-md-track-height;
   background-color: $toggle-md-track-background-color-off;
@@ -111,7 +121,7 @@ $toggle-md-item-right-padding:           12px ($item-md-padding-right / 2) 12px
 // Material Design Toggle Inner Knob: Checked
 // -----------------------------------------
 
-.toggle-md .toggle-checked .toggle-inner {
+.toggle-md.toggle-checked .toggle-inner {
   background-color: $toggle-md-handle-background-color-on;
   transform: translate3d($toggle-md-track-width - $toggle-md-handle-width, 0, 0);
 }
@@ -156,11 +166,11 @@ $toggle-md-item-right-padding:           12px ($item-md-padding-right / 2) 12px
 
 @mixin toggle-theme-md($color-name, $color-base) {
 
-  .toggle-md-#{$color-name} .toggle-checked {
+  .toggle-md-#{$color-name}.toggle-checked .toggle-icon {
     background-color: lighten($color-base, 25%);
   }
 
-  .toggle-md-#{$color-name} .toggle-checked .toggle-inner {
+  .toggle-md-#{$color-name}.toggle-checked .toggle-inner {
     background-color: $color-base;
   }
 
diff --git a/src/components/toggle/toggle.ts b/src/components/toggle/toggle.ts
index 72f77ce40d..44a7b10ab3 100644
--- a/src/components/toggle/toggle.ts
+++ b/src/components/toggle/toggle.ts
@@ -60,7 +60,7 @@ export const TOGGLE_VALUE_ACCESSOR: any = {
 @Component({
   selector: 'ion-toggle',
   template:
-    '<div class="toggle-icon" [class.toggle-checked]="_value" [class.toggle-activated]="_activated">' +
+    '<div class="toggle-icon">' +
       '<div class="toggle-inner"></div>' +
     '</div>' +
     '<button role="checkbox" ' +
@@ -73,7 +73,9 @@ export const TOGGLE_VALUE_ACCESSOR: any = {
             'class="item-cover" disable-activated>' +
     '</button>',
   host: {
-    '[class.toggle-disabled]': '_disabled'
+    '[class.toggle-disabled]': '_disabled',
+    '[class.toggle-checked]': '_value',
+    '[class.toggle-activated]': '_activated',
   },
   providers: [TOGGLE_VALUE_ACCESSOR],
   encapsulation: ViewEncapsulation.None,
@@ -124,16 +126,13 @@ export class Toggle extends BaseInput<boolean> implements IonicTapInput, AfterVi
   /**
    * @hidden
    */
-  _inputNormalize(val: any): boolean {
-    return isTrueProperty(val);
-  }
+  _inputCheckHasValue() {}
 
   /**
    * @hidden
    */
-  _inputUpdated() {
-    this._item && this._item.setElementClass('item-toggle-checked', this.value);
-    this._cd.detectChanges();
+  _inputNormalize(val: any): boolean {
+    return isTrueProperty(val);
   }
 
   /**
diff --git a/src/components/toggle/toggle.wp.scss b/src/components/toggle/toggle.wp.scss
index fc0aed8bb7..996eaa3784 100644
--- a/src/components/toggle/toggle.wp.scss
+++ b/src/components/toggle/toggle.wp.scss
@@ -115,7 +115,7 @@ $toggle-wp-item-right-padding:           12px ($item-wp-padding-right / 2) 12px
 // Windows Toggle Background Track: Checked
 // -----------------------------------------
 
-.toggle-wp .toggle-checked {
+.toggle-wp.toggle-checked .toggle-icon {
   border-color: $toggle-wp-track-background-color-on;
   background-color: $toggle-wp-track-background-color-on;
 }
@@ -124,7 +124,7 @@ $toggle-wp-item-right-padding:           12px ($item-wp-padding-right / 2) 12px
 // Windows Toggle Inner Knob: Checked
 // -----------------------------------------
 
-.toggle-wp .toggle-checked .toggle-inner {
+.toggle-wp.toggle-checked .toggle-inner {
   background-color: $toggle-wp-handle-background-color-on;
   // transform: translate3d(23px, 0, 0);
   transform: translate3d($toggle-wp-track-width - $toggle-wp-handle-width - ($toggle-wp-track-border-width * 2) - ($toggle-wp-handle-left * 2), 0, 0);
@@ -170,12 +170,12 @@ $toggle-wp-item-right-padding:           12px ($item-wp-padding-right / 2) 12px
 
 @mixin toggle-theme-wp($color-name, $color-base, $color-contrast) {
 
-  .toggle-wp-#{$color-name} .toggle-checked {
+  .toggle-wp-#{$color-name}.toggle-checked .toggle-icon {
     border-color: $color-base;
     background-color: $color-base;
   }
 
-  .toggle-wp-#{$color-name} .toggle-checked .toggle-inner {
+  .toggle-wp-#{$color-name}.toggle-checked .toggle-inner {
     background-color: $color-contrast;
   }
 }
diff --git a/src/tap-click/tap-click.ts b/src/tap-click/tap-click.ts
index 9f8f7c3f8b..aedb56793a 100644
--- a/src/tap-click/tap-click.ts
+++ b/src/tap-click/tap-click.ts
@@ -18,7 +18,7 @@ import { UIEventManager } from '../gestures/ui-event-manager';
  */
 @Injectable()
 export class TapClick {
-  
+
   private disableClick: number = 0;
   private usePolyfill: boolean;
   private activator: ActivatorBase;