chore(toggle): update core toggle

src/components/toggle/toggle.ios.scss

@@ -50,12 +50,35 @@ $toggle-ios-transition-duration:       300ms !default;
 /// @prop - Opacity of the disabled toggle
 $toggle-ios-disabled-opacity:          .3 !default;
 
-/// @prop - Padding of the toggle positioned on the left in an item
+// deprecated
-$toggle-ios-item-left-padding:         6px 16px 5px 0 !default;
+$toggle-ios-item-left-padding:         null !default;
 
-/// @prop - Padding of the toggle positioned on the right in an item
+/// @prop - Padding top of the toggle positioned on the start in an item
-$toggle-ios-item-right-padding:        6px ($item-ios-padding-right / 2) 5px ($item-ios-padding-left) !default;
+$toggle-ios-item-start-padding-top:    6px !default;
 
+/// @prop - Padding end of the toggle positioned on the start in an item
+$toggle-ios-item-start-padding-end:    16px !default;
+
+/// @prop - Padding bottom of the toggle positioned on the start in an item
+$toggle-ios-item-start-padding-bottom: 5px !default;
+
+/// @prop - Padding start of the toggle positioned on the start in an item
+$toggle-ios-item-start-padding-start:  0 !default;
+
+// deprecated
+$toggle-ios-item-right-padding:        null !default;
+
+/// @prop - Padding top of the toggle positioned on the end in an item
+$toggle-ios-item-end-padding-top:      6px !default;
+
+/// @prop - Padding end of the toggle positioned on the end in an item
+$toggle-ios-item-end-padding-end:      ($item-ios-padding-end / 2) !default;
+
+/// @prop - Padding bottom of the toggle positioned on the end in an item
+$toggle-ios-item-end-padding-bottom:   5px !default;
+
+/// @prop - Padding start of the toggle positioned on the end in an item
+$toggle-ios-item-end-padding-start:    $item-ios-padding-start !default;
 
 // iOS Toggle
 // -----------------------------------------
@@ -76,14 +99,14 @@ $toggle-ios-item-right-padding:        6px ($item-ios-padding-right / 2) 5px ($i
 // -----------------------------------------
 
 .toggle-ios .toggle-icon {
+  @include border-radius($toggle-ios-border-radius);
+
   position: relative;
   display: block;
 
   width: 100%;
   height: 100%;
 
-  border-radius: $toggle-ios-border-radius;
-
   background-color: $toggle-ios-border-color-off;
   transition: background-color $toggle-ios-transition-duration;
 
@@ -95,13 +118,11 @@ $toggle-ios-item-right-padding:        6px ($item-ios-padding-right / 2) 5px ($i
 // -----------------------------------------
 
 .toggle-ios .toggle-icon::before {
-  position: absolute;
+  @include position($toggle-ios-border-width, $toggle-ios-border-width, $toggle-ios-border-width, $toggle-ios-border-width);
-  top: $toggle-ios-border-width;
+  @include border-radius($toggle-ios-border-radius);
-  right: $toggle-ios-border-width;
+
-  bottom: $toggle-ios-border-width;
+  position: absolute;
-  left: $toggle-ios-border-width;
 
-  border-radius: $toggle-ios-border-radius;
   background-color: $toggle-ios-background-color-off;
 
   content: "";
@@ -114,14 +135,14 @@ $toggle-ios-item-right-padding:        6px ($item-ios-padding-right / 2) 5px ($i
 // -----------------------------------------
 
 .toggle-ios .toggle-inner {
+  @include position($toggle-ios-border-width, null, null, $toggle-ios-border-width);
+  @include border-radius($toggle-ios-handle-border-radius);
+
   position: absolute;
-  top: $toggle-ios-border-width;
-  left: $toggle-ios-border-width;
 
   width: $toggle-ios-handle-width;
   height: $toggle-ios-handle-height;
 
-  border-radius: $toggle-ios-handle-border-radius;
   background-color: $toggle-ios-handle-background-color;
   box-shadow: $toggle-ios-handle-box-shadow;
 
@@ -157,6 +178,7 @@ $toggle-ios-item-right-padding:        6px ($item-ios-padding-right / 2) 5px ($i
 
 }
 
+
 // iOS Toggle Background Oval: Activated and Checked
 // -----------------------------------------
 
@@ -179,7 +201,7 @@ $toggle-ios-item-right-padding:        6px ($item-ios-padding-right / 2) 5px ($i
 .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;
+  @include position-horizontal($toggle-ios-border-width - 6, null);
 }
 
 
@@ -198,8 +220,11 @@ $toggle-ios-item-right-padding:        6px ($item-ios-padding-right / 2) 5px ($i
 // -----------------------------------------
 
 .item-ios .toggle-ios {
-  margin: $toggle-ios-media-margin;
+  @include margin($toggle-ios-media-margin);
-  padding: $toggle-ios-item-right-padding;
+
+  @include deprecated-variable(padding, $toggle-ios-item-right-padding) {
+    @include padding($toggle-ios-item-end-padding-top, $toggle-ios-item-end-padding-end, $toggle-ios-item-end-padding-bottom, $toggle-ios-item-end-padding-start);
+  }
 }
 
 .item-ios .toggle-ios[slot="start"] {

src/components/toggle/toggle.md.scss

@@ -38,8 +38,20 @@ $toggle-md-handle-background-color-off:  $background-md-color !default;
 /// @prop - Background color of the checked toggle handle
 $toggle-md-handle-background-color-on:   $toggle-md-active-color !default;
 
-/// @prop - Margin of the toggle
+// deprecated
-$toggle-md-media-margin:                 0 !default;
+$toggle-md-media-margin:                 null !default;
+
+/// @prop - Margin top of the toggle
+$toggle-md-media-margin-top:             0 !default;
+
+/// @prop - Margin end of the toggle
+$toggle-md-media-margin-end:             $toggle-md-media-margin-top !default;
+
+/// @prop - Margin bottom of the toggle
+$toggle-md-media-margin-bottom:          $toggle-md-media-margin-top !default;
+
+/// @prop - Margin start of the toggle
+$toggle-md-media-margin-start:           $toggle-md-media-margin-end !default;
 
 /// @prop - Transition duration of the toggle icon
 $toggle-md-transition-duration:          300ms !default;
@@ -47,15 +59,50 @@ $toggle-md-transition-duration:          300ms !default;
 /// @prop - Opacity of the disabled toggle
 $toggle-md-disabled-opacity:             .3 !default;
 
-/// @prop - Padding of standalone toggle
+// deprecated
-$toggle-md-padding:                      12px !default;
+$toggle-md-padding:                      null !default;
 
-/// @prop - Padding of the toggle positioned on the left in an item
+/// @prop - Padding top of standalone toggle
-$toggle-md-item-left-padding:            12px 18px 12px 2px !default;
+$toggle-md-padding-top:                  12px !default;
 
-/// @prop - Padding of the toggle positioned on the right in an item
+/// @prop - Padding end of standalone toggle
-$toggle-md-item-right-padding:           12px ($item-md-padding-right / 2) 12px $item-md-padding-left !default;
+$toggle-md-padding-end:                  $toggle-md-padding-top !default;
 
+/// @prop - Padding bottom of standalone toggle
+$toggle-md-padding-bottom:               $toggle-md-padding-top !default;
+
+/// @prop - Padding start of standalone toggle
+$toggle-md-padding-start:                $toggle-md-padding-end !default;
+
+// deprecated
+$toggle-md-item-left-padding:            null !default;
+
+/// @prop - Padding top of the toggle positioned on the start in an item
+$toggle-md-item-start-padding-top:       12px !default;
+
+/// @prop - Padding end of the toggle positioned on the start in an item
+$toggle-md-item-start-padding-end:       18px !default;
+
+/// @prop - Padding bottom of the toggle positioned on the start in an item
+$toggle-md-item-start-padding-bottom:    12px !default;
+
+/// @prop - Padding start the toggle positioned on the start in an item
+$toggle-md-item-start-padding-start:     2px !default;
+
+// deprecated
+$toggle-md-item-right-padding:           null !default;
+
+/// @prop - Padding top of the toggle positioned on the end in an item
+$toggle-md-item-end-padding-top:         12px !default;
+
+/// @prop - Padding end of the toggle positioned on the end in an item
+$toggle-md-item-end-padding-end:         ($item-md-padding-end / 2) !default;
+
+/// @prop - Padding bottom of the toggle positioned on the end in an item
+$toggle-md-item-end-padding-bottom:      12px !default;
+
+/// @prop - Padding start of the toggle positioned on the end in an item
+$toggle-md-item-end-padding-start:       $item-md-padding-start !default;
 
 // Material Design Toggle
 // -----------------------------------------
@@ -63,14 +110,16 @@ $toggle-md-item-right-padding:           12px ($item-md-padding-right / 2) 12px
 .toggle-md {
   position: relative;
 
-  padding: $toggle-md-padding;
-
   width: $toggle-md-track-width;
   height: $toggle-md-track-height;
 
   box-sizing: content-box;
 
   contain: strict;
+
+  @include deprecated-variable(padding, $toggle-md-padding) {
+    @include padding($toggle-md-padding-top, $toggle-md-padding-end, $toggle-md-padding-bottom, $toggle-md-padding-start);
+  }
 }
 
 
@@ -78,13 +127,14 @@ $toggle-md-item-right-padding:           12px ($item-md-padding-right / 2) 12px
 // -----------------------------------------
 
 .toggle-md .toggle-icon {
+  @include border-radius($toggle-md-track-height);
+
   position: relative;
   display: block;
 
   width: 100%;
   height: 100%;
 
-  border-radius: $toggle-md-track-height;
   background-color: $toggle-md-track-background-color-off;
 
   transition: background-color $toggle-md-transition-duration;
@@ -97,14 +147,14 @@ $toggle-md-item-right-padding:           12px ($item-md-padding-right / 2) 12px
 // -----------------------------------------
 
 .toggle-md .toggle-inner {
+  @include position(($toggle-md-handle-height - $toggle-md-track-height) / -2, null, null, 0);
+  @include border-radius($toggle-md-handle-border-radius);
+
   position: absolute;
-  top: ($toggle-md-handle-height - $toggle-md-track-height) / -2;
-  left: 0;
 
   width: $toggle-md-handle-width;
   height: $toggle-md-handle-height;
 
-  border-radius: $toggle-md-handle-border-radius;
   background-color: $toggle-md-handle-background-color-off;
 
   box-shadow: $toggle-md-handle-box-shadow;
@@ -154,18 +204,25 @@ $toggle-md-item-right-padding:           12px ($item-md-padding-right / 2) 12px
 // -----------------------------------------
 
 .item-md .toggle-md {
-  margin: $toggle-md-media-margin;
-  padding: $toggle-md-item-right-padding;
-
   cursor: pointer;
+
+  @include deprecated-variable(margin, $toggle-md-media-margin) {
+    @include margin($toggle-md-media-margin-top, $toggle-md-media-margin-end, $toggle-md-media-margin-bottom, $toggle-md-media-margin-start);
+  }
+
+  @include deprecated-variable(padding, $toggle-md-item-right-padding) {
+    @include padding($toggle-md-item-end-padding-top, $toggle-md-item-end-padding-end, $toggle-md-item-end-padding-bottom, $toggle-md-item-end-padding-start);
+  }
 }
 
 .item-md .toggle-md[slot="start"] {
-  padding: $toggle-md-item-left-padding;
+  @include deprecated-variable(padding, $toggle-md-item-left-padding) {
+    @include padding($toggle-md-item-start-padding-top, $toggle-md-item-start-padding-end, $toggle-md-item-start-padding-bottom, $toggle-md-item-start-padding-start);
+  }
 }
 
 .item-md.item-toggle ion-label {
-  margin-left: 0;
+  @include margin-horizontal(0, null);
 }
 
 

src/components/toggle/toggle.scss

@@ -10,7 +10,7 @@ ion-toggle {
   contain: content;
 }
 
-ion-toggle.upgraded {
+ion-toggle.hydrated {
   visibility: inherit;
 }
 

src/components/toggle/toggle.ts

@@ -12,22 +12,46 @@ import { Component, h, Ionic, Listen, Prop, Watch } from '../index';
   shadow: false
 })
 export class Toggle implements BooleanInputComponent {
-  activated: boolean;
+  activated: boolean = false;
-  hasFocus: boolean;
+  hasFocus: boolean = false;
   id: string;
   labelId: string;
   startX: number;
+  styleTmr: any;
 
-  @Prop() checked: boolean;
+  @Prop() checked: boolean = false;
-  @Prop() disabled: boolean;
+  @Prop() disabled: boolean = false;
   @Prop() value: string;
 
+  ionViewDidLoad() {
+    this.emitStyle();
+  }
 
   @Watch('checked')
   changed(val: boolean) {
     Ionic.emit(this, 'ionChange', { detail: { checked: val } });
+    this.emitStyle();
   }
 
+  @Watch('disabled')
+  disableChanged() {
+    this.emitStyle();
+  }
+
+  private emitStyle() {
+    clearTimeout(this.styleTmr);
+
+    this.styleTmr = setTimeout(() => {
+      Ionic.emit(this, 'ionStyle', {
+        detail: {
+          'toggle-disabled': this.disabled,
+          'toggle-checked': this.checked,
+          'toggle-activated': this.activated,
+          'toggle-focus': this.hasFocus
+        }
+      });
+    });
+  }
 
   private canStart() {
     return !this.disabled;
@@ -92,6 +116,7 @@ export class Toggle implements BooleanInputComponent {
     if (!this.hasFocus) {
       this.hasFocus = true;
       Ionic.emit(this, 'ionFocus');
+      this.emitStyle();
     }
   }
 
@@ -100,6 +125,7 @@ export class Toggle implements BooleanInputComponent {
     if (this.hasFocus) {
       this.hasFocus = false;
       Ionic.emit(this, 'ionBlur');
+      this.emitStyle();
     }
   }
 

src/components/toggle/toggle.wp.scss

@@ -62,12 +62,35 @@ $toggle-wp-transition-duration:          300ms !default;
 /// @prop - Opacity of the disabled toggle
 $toggle-wp-disabled-opacity:             .3 !default;
 
-/// @prop - Padding of the toggle positioned on the left in an item
+// deprecated
-$toggle-wp-item-left-padding:            12px 18px 12px 2px !default;
+$toggle-wp-item-left-padding:            null !default;
 
-/// @prop - Padding of the toggle positioned on the right in an item
+/// @prop - Padding top of the toggle positioned on the start in an item
-$toggle-wp-item-right-padding:           12px ($item-wp-padding-right / 2) 12px $item-wp-padding-left !default;
+$toggle-wp-item-start-padding-top:       12px !default;
 
+/// @prop - Padding end of the toggle positioned on the start in an item
+$toggle-wp-item-start-padding-end:       18px !default;
+
+/// @prop - Padding bottom of the toggle positioned on the start in an item
+$toggle-wp-item-start-padding-bottom:    12px !default;
+
+/// @prop - Padding start the toggle positioned on the start in an item
+$toggle-wp-item-start-padding-start:     2px !default;
+
+// deprecated
+$toggle-wp-item-right-padding:           null !default;
+
+/// @prop - Padding top of the toggle positioned on the end in an item
+$toggle-wp-item-end-padding-top:         12px !default;
+
+/// @prop - Padding end of the toggle positioned on the end in an item
+$toggle-wp-item-end-padding-end:         ($item-wp-padding-end / 2) !default;
+
+/// @prop - Padding bottom of the toggle positioned on the end in an item
+$toggle-wp-item-end-padding-bottom:      12px !default;
+
+/// @prop - Padding start of the toggle positioned on the end in an item
+$toggle-wp-item-end-padding-start:       $item-wp-padding-start !default;
 
 // Windows Toggle
 // -----------------------------------------
@@ -88,6 +111,8 @@ $toggle-wp-item-right-padding:           12px ($item-wp-padding-right / 2) 12px
 // -----------------------------------------
 
 .toggle-wp .toggle-icon {
+  @include border-radius($toggle-wp-track-height);
+
   position: relative;
   display: block;
 
@@ -95,7 +120,6 @@ $toggle-wp-item-right-padding:           12px ($item-wp-padding-right / 2) 12px
   height: 100%;
 
   border: $toggle-wp-track-border-width solid $toggle-wp-track-border-color-off;
-  border-radius: $toggle-wp-track-height;
   background-color: $toggle-wp-track-background-color-off;
 
   pointer-events: none;
@@ -108,14 +132,14 @@ $toggle-wp-item-right-padding:           12px ($item-wp-padding-right / 2) 12px
 // -----------------------------------------
 
 .toggle-wp .toggle-inner {
+  @include position($toggle-wp-handle-top, null, null, $toggle-wp-handle-left);
+  @include border-radius($toggle-wp-handle-border-radius);
+
   position: absolute;
-  top: $toggle-wp-handle-top;
-  left: $toggle-wp-handle-left;
 
   width: $toggle-wp-handle-width;
   height: $toggle-wp-handle-height;
 
-  border-radius: $toggle-wp-handle-border-radius;
   background-color: $toggle-wp-handle-background-color-off;
 
   transition-duration: $toggle-wp-transition-duration;
@@ -162,18 +186,23 @@ $toggle-wp-item-right-padding:           12px ($item-wp-padding-right / 2) 12px
 // -----------------------------------------
 
 .item-wp .toggle-wp {
-  margin: $toggle-wp-media-margin;
+  @include margin($toggle-wp-media-margin);
-  padding: $toggle-wp-item-right-padding;
 
   cursor: pointer;
+
+  @include deprecated-variable(padding, $toggle-wp-item-right-padding) {
+    @include padding($toggle-wp-item-end-padding-top, $toggle-wp-item-end-padding-end, $toggle-wp-item-end-padding-bottom, $toggle-wp-item-end-padding-start);
+  }
 }
 
 .item-wp .toggle-wp[slot="start"] {
-  padding: $toggle-wp-item-left-padding;
+  @include deprecated-variable(padding, $toggle-wp-item-left-padding) {
+    @include padding($toggle-wp-item-start-padding-top, $toggle-wp-item-start-padding-end, $toggle-wp-item-start-padding-bottom, $toggle-wp-item-start-padding-start);
+  }
 }
 
 .item-wp.item-toggle ion-label {
-  margin-left: 0;
+  @include margin-horizontal(0, null);
 }