perf(gesture): lazy loaded dynamic ES module

core/src/components/toggle/test/toggle.spec.ts

@@ -1,4 +1,4 @@
-import { TestWindow, spyOnEvent } from '@stencil/core/testing';
+import { TestWindow, spyOnEvent } from '@stencil/core/dist/testing';
 
 import { Toggle } from '../toggle';
 

core/src/components/toggle/toggle.scss

@@ -26,15 +26,6 @@
   outline: none;
 }
 
-ion-gesture {
-  display: block;
-
-  width: 100%;
-  height: 100%;
-
-  visibility: inherit;
-}
-
 input {
   @include input-cover();
 

core/src/components/toggle/toggle.tsx

@@ -1,6 +1,6 @@
-import { Component, Element, Event, EventEmitter, Prop, State, Watch } from '@stencil/core';
+import { Component, Element, Event, EventEmitter, Prop, QueueApi, State, Watch } from '@stencil/core';
 
-import { CheckboxInput, CheckedInputChangeEvent, Color, GestureDetail, Mode, StyleEvent } from '../../interface';
+import { CheckboxInput, CheckedInputChangeEvent, Color, Gesture, GestureDetail, Mode, StyleEvent } from '../../interface';
 import { hapticSelection } from '../../utils/haptic';
 import { deferEvent, renderHiddenInput } from '../../utils/helpers';
 import { createColorClasses, hostContext } from '../../utils/theme';
@@ -18,9 +18,12 @@ export class Toggle implements CheckboxInput {
   private inputId = `ion-tg-${toggleIds++}`;
   private nativeInput!: HTMLInputElement;
   private pivotX = 0;
+  private gesture?: Gesture;
 
   @Element() el!: HTMLElement;
 
+  @Prop({ context: 'queue' }) queue!: QueueApi;
+
   @State() activated = false;
   @State() keyFocus = false;
 
@@ -86,18 +89,20 @@ export class Toggle implements CheckboxInput {
   }
 
   @Watch('disabled')
-  emitStyle() {
+  disabledChanged() {
     this.ionStyle.emit({
       'interactive-disabled': this.disabled,
     });
+    if (this.gesture) {
+      this.gesture.disabled = this.disabled;
+    }
   }
 
   componentWillLoad() {
     this.ionStyle = deferEvent(this.ionStyle);
-    this.emitStyle();
   }
 
-  componentDidLoad() {
+  async componentDidLoad() {
     const parentItem = this.nativeInput.closest('ion-item');
     if (parentItem) {
       const itemLabel = parentItem.querySelector('ion-label');
@@ -106,6 +111,18 @@ export class Toggle implements CheckboxInput {
         this.nativeInput.setAttribute('aria-labelledby', itemLabel.id);
       }
     }
+
+    this.gesture = (await import('../../utils/gesture/gesture')).create({
+      el: this.el,
+      queue: this.queue,
+      gestureName: 'toggle',
+      gesturePriority: 30,
+      threshold: 0,
+      onStart: this.onDragStart.bind(this),
+      onMove: this.onDragMove.bind(this),
+      onEnd: this.onDragEnd.bind(this),
+    });
+    this.disabledChanged();
   }
 
   private onDragStart(detail: GestureDetail) {
@@ -172,22 +189,9 @@ export class Toggle implements CheckboxInput {
     renderHiddenInput(this.el, this.name, this.value, this.disabled);
 
     return [
-      <ion-gesture
-        onStart={this.onDragStart.bind(this)}
-        onMove={this.onDragMove.bind(this)}
-        onEnd={this.onDragEnd.bind(this)}
-        gestureName="toggle"
-        passive={false}
-        gesturePriority={30}
-        direction="x"
-        threshold={0}
-        attachTo="parent"
-        disabled={this.disabled}
-        tabIndex={-1}>
-        <div class="toggle-icon">
-          <div class="toggle-inner"/>
-        </div>
-      </ion-gesture>,
+      <div class="toggle-icon">
+        <div class="toggle-inner"/>
+      </div>,
       <input
         type="checkbox"
         onChange={this.onChange.bind(this)}