refactor(toggle) form usage and declarative set (#13914)

* chore(toggle) use debounce helper

* refactor(toggle) set attributes declaratively

* fix(toggle) set name instead of value, default value to on

packages/core/src/components/toggle/toggle.tsx

@@ -2,6 +2,7 @@ import { BlurEvent, CheckboxInput, CheckedInputChangeEvent, FocusEvent, StyleEve
 import { Component, Event, EventEmitter, Prop, State, Watch } from '@stencil/core';
 import { GestureDetail } from '../../index';
 import { hapticSelection } from '../../utils/haptic';
+import { debounce } from '../../utils/helpers';
 
 
 @Component({
@@ -20,7 +21,6 @@ export class Toggle implements CheckboxInput {
   private inputId: string;
   private nativeInput: HTMLInputElement;
   private pivotX: number;
-  private styleTmr: any;
 
 
   @State() activated = false;
@@ -44,7 +44,7 @@ export class Toggle implements CheckboxInput {
   /**
    * The name of the control, which is submitted with the form data.
    */
-  @Prop() name: string;
+  @Prop({ mutable: true }) name: string;
 
   /**
    * @input {boolean} If true, the toggle is selected. Defaults to `false`.
@@ -59,7 +59,7 @@ export class Toggle implements CheckboxInput {
   /**
    * @input {string} the value of the toggle.
    */
-  @Prop({ mutable: true }) value: string;
+  @Prop() value = 'on';
 
   /**
    * @output {Event} Emitted when the value property has changed.
@@ -97,15 +97,15 @@ export class Toggle implements CheckboxInput {
   }
 
   componentWillLoad() {
-    this.inputId = 'ion-tg-' + (toggleIds++);
-    if (this.value === undefined) {
-      this.value = this.inputId;
+    this.ionStyle.emit = debounce(this.ionStyle.emit.bind(this.ionStyle));
+    this.inputId = `ion-tg-${toggleIds++}`;
+    if (this.name === undefined) {
+      this.name = this.inputId;
     }
     this.emitStyle();
   }
 
   componentDidLoad() {
-    this.nativeInput.checked = this.checked;
     this.didLoad = true;
 
     const parentItem = this.nativeInput.closest('ion-item');
@@ -120,10 +120,6 @@ export class Toggle implements CheckboxInput {
 
   @Watch('checked')
   checkedChanged(isChecked: boolean) {
-    if (this.nativeInput.checked !== isChecked) {
-      // keep the checked value and native input `nync
-      this.nativeInput.checked = isChecked;
-    }
     if (this.didLoad) {
       this.ionChange.emit({
         checked: isChecked,
@@ -134,20 +130,11 @@ export class Toggle implements CheckboxInput {
   }
 
   @Watch('disabled')
-  disabledChanged(isDisabled: boolean) {
-    this.nativeInput.disabled = isDisabled;
-    this.emitStyle();
-  }
-
   emitStyle() {
-    clearTimeout(this.styleTmr);
-
-    this.styleTmr = setTimeout(() => {
-      this.ionStyle.emit({
-        'toggle-disabled': this.disabled,
-        'toggle-checked': this.checked,
-        'toggle-activated': this.activated
-      });
+    this.ionStyle.emit({
+      'toggle-disabled': this.disabled,
+      'toggle-checked': this.checked,
+      'toggle-activated': this.activated
     });
   }
 
@@ -219,6 +206,7 @@ export class Toggle implements CheckboxInput {
         onFocus={this.onFocus.bind(this)}
         onBlur={this.onBlur.bind(this)}
         onKeyUp={this.onKeyUp.bind(this)}
+        checked={this.checked}
         id={this.inputId}
         name={this.name}
         value={this.value}