refactor(all): updating to newest stencil apis (#18578)

* chore(): update ionicons

* refactor(all): updating to newest stencil apis

* fix lint issues

* more changes

* moreee

* fix treeshaking

* fix config

* fix checkbox

* fix stuff

* chore(): update ionicons

* fix linting errors

core/src/components/toggle/toggle.tsx

@@ -1,4 +1,4 @@
-import { Component, ComponentInterface, Element, Event, EventEmitter, Listen, Prop, QueueApi, State, Watch, h } from '@stencil/core';
+import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Prop, State, Watch, h } from '@stencil/core';
 
 import { getIonMode } from '../../global/ionic-global';
 import { Color, Gesture, GestureDetail, StyleEventDetail, ToggleChangeEventDetail } from '../../interface';
@@ -26,10 +26,6 @@ export class Toggle implements ComponentInterface {
 
   @Element() el!: HTMLElement;
 
-  @Prop({ context: 'queue' }) queue!: QueueApi;
-
-  @Prop({ context: 'document' }) doc!: Document;
-
   @State() activated = false;
 
   /**
@@ -125,13 +121,6 @@ export class Toggle implements ComponentInterface {
     }
   }
 
-  @Listen('click')
-  onClick() {
-    if (this.lastDrag + 300 < Date.now()) {
-      this.checked = !this.checked;
-    }
-  }
-
   private emitStyle() {
     this.ionStyle.emit({
       'interactive-disabled': this.disabled,
@@ -169,6 +158,12 @@ export class Toggle implements ComponentInterface {
     }
   }
 
+  private onClick = () => {
+    if (this.lastDrag + 300 < Date.now()) {
+      this.checked = !this.checked;
+    }
+  }
+
   private onFocus = () => {
     this.ionFocus.emit();
   }
@@ -177,50 +172,47 @@ export class Toggle implements ComponentInterface {
     this.ionBlur.emit();
   }
 
-  hostData() {
+  render() {
     const { inputId, disabled, checked, activated, color, el } = this;
     const mode = getIonMode(this);
     const labelId = inputId + '-lbl';
     const label = findItemLabel(el);
+    const value = this.getValue();
     if (label) {
       label.id = labelId;
     }
+    renderHiddenInput(true, el, this.name, (checked ? value : ''), disabled);
 
-    return {
-      'role': 'checkbox',
-      'aria-disabled': disabled ? 'true' : null,
-      'aria-checked': `${checked}`,
-      'aria-labelledby': labelId,
-
-      class: {
-        ...createColorClasses(color),
-        [`${mode}`]: true,
-        'in-item': hostContext('ion-item', el),
-        'toggle-activated': activated,
-        'toggle-checked': checked,
-        'toggle-disabled': disabled,
-        'interactive': true
-      }
-    };
-  }
-
-  render() {
-    const value = this.getValue();
-    renderHiddenInput(true, this.el, this.name, (this.checked ? value : ''), this.disabled);
-
-    return [
-      <div class="toggle-icon">
-        <div class="toggle-inner"/>
-      </div>,
-      <button
-        type="button"
-        onFocus={this.onFocus}
-        onBlur={this.onBlur}
-        disabled={this.disabled}
-        ref={el => this.buttonEl = el}
+    return (
+      <Host
+        onClick={this.onClick}
+        role="checkbox"
+        aria-disabled={disabled ? 'true' : null}
+        aria-checked={`${checked}`}
+        aria-labelledby={labelId}
+        class={{
+          ...createColorClasses(color),
+          [mode]: true,
+          'in-item': hostContext('ion-item', el),
+          'toggle-activated': activated,
+          'toggle-checked': checked,
+          'toggle-disabled': disabled,
+          'interactive': true
+        }}
       >
-      </button>
-    ];
+        <div class="toggle-icon">
+          <div class="toggle-inner"/>
+        </div>
+        <button
+          type="button"
+          onFocus={this.onFocus}
+          onBlur={this.onBlur}
+          disabled={disabled}
+          ref={btnEl => this.buttonEl = btnEl}
+        >
+        </button>
+      </Host>
+    );
   }
 }