@ionic/core 9.0.0 → 9.0.1-dev.11787248963.10a00c73

package/dist/esm/ion-toast.entry.js

@@ -1,21 +1,21 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { f as printIonWarning, r as registerInstance, c as createEvent, e as config, g as getElement, j as printIonError, h, d as Host } from './index-ChhhtsGZ.js';
+import { f as printIonWarning, r as registerInstance, c as createEvent, e as config, j as printIonError, h, d as Host, g as getElement } from './index-CKYcsw8f.js';
 import { E as ENABLE_HTML_CONTENT_DEFAULT } from './config-DWCzVL3Y.js';
-import { g as getElementRoot, r as raf } from './helpers-CAGf8Wgp.js';
+import { g as getElementRoot, r as raf } from './helpers-BIgoInJU.js';
 import { c as createLockController } from './lock-controller-B-hirT0v.js';
-import { O as OVERLAY_GESTURE_PRIORITY, c as createDelegateController, d as createTriggerController, h as prepareOverlay, k as setOverlayId, e as present, f as dismiss, g as eventMethod, i as isCancel, s as safeCall, G as GESTURE } from './overlays-CPmIs9Ls.js';
-import { s as sanitizeDOMString } from './index-CKM1DdGm.js';
+import { O as OVERLAY_GESTURE_PRIORITY, c as createDelegateController, d as createTriggerController, i as isCancel, h as prepareOverlay, k as setOverlayId, e as present, f as dismiss, g as eventMethod, s as safeCall, G as GESTURE } from './overlays-BpnIFlXI.js';
+import { s as sanitizeDOMString } from './index-elneMH8y.js';
 import { c as createColorClasses, g as getClassMap } from './theme-byZM6qHV.js';
-import { b as getIonMode } from './ionic-global-BVB7BrLT.js';
-import { c as createAnimation } from './animation-CGFdmGk9.js';
+import { b as getIonMode } from './ionic-global-lrowsHfi.js';
+import { c as createAnimation } from './animation-TxGPYeDn.js';
 import { w as win } from './index-ZjP4CjeZ.js';
-import { createGesture } from './index-DcPaH5uL.js';
+import { createGesture } from './index-BmLuEdV7.js';
 import './dir-Dojwmvde.js';
-import './hardware-back-button-gLJHMX_F.js';
-import './framework-delegate-BHTU2Ip9.js';
-import './gesture-controller-TXPDHL13.js';
+import './hardware-back-button-D8W4L0JP.js';
+import './framework-delegate-DaLWnISz.js';
+import './gesture-controller-B_gJaBk0.js';
 
 /**
  * Calculate the CSS top and bottom position of the toast, to be used
@@ -466,127 +466,102 @@ const Toast = class {
         this.willPresentShorthand = createEvent(this, "willPresent", 7);
         this.willDismissShorthand = createEvent(this, "willDismiss", 7);
         this.didDismissShorthand = createEvent(this, "didDismiss", 7);
+        this.delegateController = createDelegateController(this);
+        this.lockController = createLockController();
+        this.triggerController = createTriggerController();
+        this.customHTMLEnabled = config.get('innerHTMLTemplatesEnabled', ENABLE_HTML_CONTENT_DEFAULT);
+        this.presented = false;
+        /**
+         * When `true`, content inside of .toast-content
+         * will have aria-hidden elements removed causing
+         * screen readers to announce the remaining content.
+         */
+        this.revealContentToScreenReader = false;
+        /** @internal */
+        this.hasController = false;
+        /**
+         * How many milliseconds to wait before hiding the toast. By default, it will show
+         * until `dismiss()` is called.
+         */
+        this.duration = config.getNumber('toastDuration', 0);
+        /**
+         * Defines how the message and buttons are laid out in the toast.
+         * 'baseline': The message and the buttons will appear on the same line.
+         * Message text may wrap within the message container.
+         * 'stacked': The buttons containers and message will stack on top
+         * of each other. Use this if you have long text in your buttons.
+         */
+        this.layout = 'baseline';
+        /**
+         * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
+         */
+        this.keyboardClose = false;
+        /**
+         * The starting position of the toast on the screen. Can be tweaked further
+         * using the `positionAnchor` property.
+         */
+        this.position = 'bottom';
+        /**
+         * If `true`, the toast will be translucent.
+         * Only applies when the mode is `"ios"` and the device supports
+         * [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
+         */
+        this.translucent = false;
+        /**
+         * If `true`, the toast will animate.
+         */
+        this.animated = true;
+        /**
+         * If `true`, the toast will open. If `false`, the toast will close.
+         * Use this if you need finer grained control over presentation, otherwise
+         * just use the toastController or the `trigger` property.
+         * Note: `isOpen` will not automatically be set back to `false` when
+         * the toast dismisses. You will need to do that in your code.
+         */
+        this.isOpen = false;
+        this.dispatchCancelHandler = (ev) => {
+            const role = ev.detail.role;
+            if (isCancel(role)) {
+                const cancelButton = this.getButtons().find((b) => b.role === 'cancel');
+                this.callButtonHandler(cancelButton);
+            }
+        };
+        /**
+         * Create a new swipe gesture so Toast
+         * can be swiped to dismiss.
+         */
+        this.createSwipeGesture = (toastPosition) => {
+            const gesture = (this.gesture = createSwipeToDismissGesture(this.el, toastPosition, () => {
+                /**
+                 * If the gesture completed then
+                 * we should dismiss the toast.
+                 */
+                this.dismiss(undefined, GESTURE);
+            }));
+            gesture.enable(true);
+        };
+        /**
+         * Destroy an existing swipe gesture
+         * so Toast can no longer be swiped to dismiss.
+         */
+        this.destroySwipeGesture = () => {
+            const { gesture } = this;
+            if (gesture === undefined) {
+                return;
+            }
+            gesture.destroy();
+            this.gesture = undefined;
+        };
+        /**
+         * Returns `true` if swipeGesture
+         * is configured to a value that enables the swipe behavior.
+         * Returns `false` otherwise.
+         */
+        this.prefersSwipeGesture = () => {
+            const { swipeGesture } = this;
+            return swipeGesture === 'vertical';
+        };
     }
-    delegateController = createDelegateController(this);
-    lockController = createLockController();
-    triggerController = createTriggerController();
-    customHTMLEnabled = config.get('innerHTMLTemplatesEnabled', ENABLE_HTML_CONTENT_DEFAULT);
-    durationTimeout;
-    gesture;
-    /**
-     * Holds the position of the toast calculated in the present
-     * animation, to be passed along to the dismiss animation so
-     * we don't have to calculate the position twice.
-     */
-    lastPresentedPosition;
-    presented = false;
-    /**
-     * When `true`, content inside of .toast-content
-     * will have aria-hidden elements removed causing
-     * screen readers to announce the remaining content.
-     */
-    revealContentToScreenReader = false;
-    get el() { return getElement(this); }
-    /**
-     * @internal
-     */
-    overlayIndex;
-    /** @internal */
-    delegate;
-    /** @internal */
-    hasController = false;
-    /**
-     * The color to use from your application's color palette.
-     * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
-     * For more information on colors, see [theming](/docs/theming/basics).
-     */
-    color;
-    /**
-     * Animation to use when the toast is presented.
-     */
-    enterAnimation;
-    /**
-     * Animation to use when the toast is dismissed.
-     */
-    leaveAnimation;
-    /**
-     * Additional classes to apply for custom CSS. If multiple classes are
-     * provided they should be separated by spaces.
-     */
-    cssClass;
-    /**
-     * How many milliseconds to wait before hiding the toast. By default, it will show
-     * until `dismiss()` is called.
-     */
-    duration = config.getNumber('toastDuration', 0);
-    /**
-     * Header to be shown in the toast.
-     */
-    header;
-    /**
-     * Defines how the message and buttons are laid out in the toast.
-     * 'baseline': The message and the buttons will appear on the same line.
-     * Message text may wrap within the message container.
-     * 'stacked': The buttons containers and message will stack on top
-     * of each other. Use this if you have long text in your buttons.
-     */
-    layout = 'baseline';
-    /**
-     * Message to be shown in the toast.
-     * This property accepts custom HTML as a string.
-     * Content is parsed as plaintext by default.
-     * `innerHTMLTemplatesEnabled` must be set to `true` in the Ionic config
-     * before custom HTML can be used.
-     */
-    message;
-    /**
-     * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
-     */
-    keyboardClose = false;
-    /**
-     * The starting position of the toast on the screen. Can be tweaked further
-     * using the `positionAnchor` property.
-     */
-    position = 'bottom';
-    /**
-     * The element to anchor the toast's position to. Can be set as a direct reference
-     * or the ID of the element. With `position="bottom"`, the toast will sit above the
-     * chosen element. With `position="top"`, the toast will sit below the chosen element.
-     * With `position="middle"`, the value of `positionAnchor` is ignored.
-     */
-    positionAnchor;
-    /**
-     * An array of buttons for the toast.
-     */
-    buttons;
-    /**
-     * If `true`, the toast will be translucent.
-     * Only applies when the mode is `"ios"` and the device supports
-     * [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
-     */
-    translucent = false;
-    /**
-     * If `true`, the toast will animate.
-     */
-    animated = true;
-    /**
-     * The name of the icon to display, or the path to a valid SVG file. See `ion-icon`.
-     * https://ionic.io/ionicons
-     */
-    icon;
-    /**
-     * Additional attributes to pass to the toast.
-     */
-    htmlAttributes;
-    /**
-     * If set to 'vertical', the Toast can be dismissed with
-     * a swipe gesture. The swipe direction is determined by
-     * the value of the `position` property:
-     * `top`: The Toast can be swiped up to dismiss.
-     * `bottom`: The Toast can be swiped down to dismiss.
-     * `middle`: The Toast can be swiped up or down to dismiss.
-     */
-    swipeGesture;
     swipeGestureChanged() {
         /**
          * If the Toast is presented, then we need to destroy
@@ -614,14 +589,6 @@ const Toast = class {
             this.createSwipeGesture(this.lastPresentedPosition);
         }
     }
-    /**
-     * If `true`, the toast will open. If `false`, the toast will close.
-     * Use this if you need finer grained control over presentation, otherwise
-     * just use the toastController or the `trigger` property.
-     * Note: `isOpen` will not automatically be set back to `false` when
-     * the toast dismisses. You will need to do that in your code.
-     */
-    isOpen = false;
     onIsOpenChange(newValue, oldValue) {
         if (newValue === true && oldValue === false) {
             this.present();
@@ -630,53 +597,12 @@ const Toast = class {
             this.dismiss();
         }
     }
-    /**
-     * An ID corresponding to the trigger element that
-     * causes the toast to open when clicked.
-     */
-    trigger;
     triggerChanged() {
         const { trigger, el, triggerController } = this;
         if (trigger) {
             triggerController.addClickListener(el, trigger);
         }
     }
-    /**
-     * Emitted after the toast has presented.
-     */
-    didPresent;
-    /**
-     * Emitted before the toast has presented.
-     */
-    willPresent;
-    /**
-     * Emitted before the toast has dismissed.
-     */
-    willDismiss;
-    /**
-     * Emitted after the toast has dismissed.
-     */
-    didDismiss;
-    /**
-     * Emitted after the toast has presented.
-     * Shorthand for ionToastWillDismiss.
-     */
-    didPresentShorthand;
-    /**
-     * Emitted before the toast has presented.
-     * Shorthand for ionToastWillPresent.
-     */
-    willPresentShorthand;
-    /**
-     * Emitted before the toast has dismissed.
-     * Shorthand for ionToastWillDismiss.
-     */
-    willDismissShorthand;
-    /**
-     * Emitted after the toast has dismissed.
-     * Shorthand for ionToastDidDismiss.
-     */
-    didDismissShorthand;
     connectedCallback() {
         prepareOverlay(this.el);
         this.triggerChanged();
@@ -874,48 +800,6 @@ const Toast = class {
         }
         return true;
     }
-    dispatchCancelHandler = (ev) => {
-        const role = ev.detail.role;
-        if (isCancel(role)) {
-            const cancelButton = this.getButtons().find((b) => b.role === 'cancel');
-            this.callButtonHandler(cancelButton);
-        }
-    };
-    /**
-     * Create a new swipe gesture so Toast
-     * can be swiped to dismiss.
-     */
-    createSwipeGesture = (toastPosition) => {
-        const gesture = (this.gesture = createSwipeToDismissGesture(this.el, toastPosition, () => {
-            /**
-             * If the gesture completed then
-             * we should dismiss the toast.
-             */
-            this.dismiss(undefined, GESTURE);
-        }));
-        gesture.enable(true);
-    };
-    /**
-     * Destroy an existing swipe gesture
-     * so Toast can no longer be swiped to dismiss.
-     */
-    destroySwipeGesture = () => {
-        const { gesture } = this;
-        if (gesture === undefined) {
-            return;
-        }
-        gesture.destroy();
-        this.gesture = undefined;
-    };
-    /**
-     * Returns `true` if swipeGesture
-     * is configured to a value that enables the swipe behavior.
-     * Returns `false` otherwise.
-     */
-    prefersSwipeGesture = () => {
-        const { swipeGesture } = this;
-        return swipeGesture === 'vertical';
-    };
     renderButtons(buttons, side) {
         if (buttons.length === 0) {
             return;
@@ -974,6 +858,7 @@ const Toast = class {
                 'toast-translucent': this.translucent,
             }), onIonToastWillDismiss: this.dispatchCancelHandler }, h("div", { key: 'd26cc17a59e3d81810e22ee422398f2cc4c7a05c', class: wrapperClass, part: "wrapper" }, h("div", { key: 'f15e1a97f13defcbf96612df4c7ba45999e6244d', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (h("ion-icon", { key: '639cacec828f969673071e54dc68284050e9f2fd', class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), h("div", { key: 'a07e68cf68e4c507e4515de1a4b43dd8fb3541d3', class: "toast-content", part: "content", role: "status", "aria-atomic": "true", "aria-live": "polite" }, !revealContentToScreenReader && header !== undefined && this.renderHeader('oldHeader', 'true'), !revealContentToScreenReader && message !== undefined && this.renderToastMessage('oldMessage', 'true'), revealContentToScreenReader && header !== undefined && this.renderHeader('header'), revealContentToScreenReader && message !== undefined && this.renderToastMessage('header')), this.renderButtons(endButtons, 'end')))));
     }
+    get el() { return getElement(this); }
     static get watchers() { return {
         "swipeGesture": [{
                 "swipeGestureChanged": 0

package/dist/esm/ion-toggle.entry.js

@@ -1,13 +1,13 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { r as registerInstance, c as createEvent, g as getElement, e as config, h, d as Host, i as forceUpdate } from './index-ChhhtsGZ.js';
-import { i as inheritAriaAttributes, a as renderHiddenInput } from './helpers-CAGf8Wgp.js';
+import { r as registerInstance, c as createEvent, e as config, h, d as Host, g as getElement, i as forceUpdate } from './index-CKYcsw8f.js';
+import { i as inheritAriaAttributes, a as renderHiddenInput } from './helpers-BIgoInJU.js';
 import { i as isRTL } from './dir-Dojwmvde.js';
-import { c as createItemMultipleInputsObserver } from './item-multiple-inputs-rU8VaNNg.js';
+import { c as createItemMultipleInputsObserver } from './item-multiple-inputs-D_N3fDkD.js';
 import { c as checkInvalidState } from './validity-DJztqcrH.js';
 import { c as hapticSelection } from './haptic-Cq4UAeka.js';
-import { a as isPlatform, b as getIonMode } from './ionic-global-BVB7BrLT.js';
+import { a as isPlatform, b as getIonMode } from './ionic-global-lrowsHfi.js';
 import { h as hostContext, c as createColorClasses } from './theme-byZM6qHV.js';
 import { j as checkmarkOutline, r as removeOutline, k as ellipseOutline } from './index-BvabGprD.js';
 import './capacitor-CFERIeaU.js';
@@ -23,109 +23,116 @@ const Toggle = class {
         this.ionChange = createEvent(this, "ionChange", 7);
         this.ionFocus = createEvent(this, "ionFocus", 7);
         this.ionBlur = createEvent(this, "ionBlur", 7);
+        this.inputId = `ion-tg-${toggleIds++}`;
+        this.inputLabelId = `${this.inputId}-lbl`;
+        this.helperTextId = `${this.inputId}-helper-text`;
+        this.errorTextId = `${this.inputId}-error-text`;
+        this.lastDrag = 0;
+        this.inheritedAttributes = {};
+        this.didLoad = false;
+        this.activated = false;
+        /**
+         * Track validation state for proper aria-live announcements.
+         */
+        this.isInvalid = false;
+        /**
+         * The name of the control, which is submitted with the form data.
+         */
+        this.name = this.inputId;
+        /**
+         * If `true`, the toggle is selected.
+         */
+        this.checked = false;
+        /**
+         * If `true`, the user cannot interact with the toggle.
+         */
+        this.disabled = false;
+        /**
+         * The value of the toggle does not mean if it's checked or not, use the `checked`
+         * property for that.
+         *
+         * The value of a toggle is analogous to the value of a `<input type="checkbox">`,
+         * it's only used when the toggle participates in a native `<form>`.
+         */
+        this.value = 'on';
+        /**
+         * Enables the on/off accessibility switch labels within the toggle.
+         */
+        this.enableOnOffLabels = config.get('toggleOnOffLabels');
+        /**
+         * Where to place the label relative to the input.
+         * `"start"`: The label will appear to the left of the toggle in LTR and to the right in RTL.
+         * `"end"`: The label will appear to the right of the toggle in LTR and to the left in RTL.
+         * `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("...").
+         * `"stacked"`: The label will appear above the toggle regardless of the direction. The alignment of the label can be controlled with the `alignment` property.
+         */
+        this.labelPlacement = 'start';
+        /**
+         * If true, screen readers will announce it as a required field. This property
+         * works only for accessibility purposes, it will not prevent the form from
+         * submitting if the value is invalid.
+         */
+        this.required = false;
+        this.setupGesture = async () => {
+            const { toggleTrack } = this;
+            if (toggleTrack) {
+                this.gesture = (await import('./index-BmLuEdV7.js')).createGesture({
+                    el: toggleTrack,
+                    gestureName: 'toggle',
+                    gesturePriority: 100,
+                    threshold: 5,
+                    passive: false,
+                    onStart: () => this.onStart(),
+                    onMove: (ev) => this.onMove(ev),
+                    onEnd: (ev) => this.onEnd(ev),
+                });
+                this.disabledChanged();
+            }
+        };
+        this.onKeyDown = (ev) => {
+            if (ev.key === ' ') {
+                ev.preventDefault();
+                if (!this.disabled) {
+                    this.toggleChecked();
+                }
+            }
+        };
+        this.onClick = (ev) => {
+            /**
+             * The haptics for the toggle on tap is
+             * an iOS-only feature. As such, it should
+             * only trigger on iOS.
+             */
+            const enableHaptics = isPlatform('ios');
+            if (this.disabled) {
+                return;
+            }
+            ev.preventDefault();
+            if (this.lastDrag + 300 < Date.now()) {
+                this.toggleChecked();
+                enableHaptics && hapticSelection();
+            }
+        };
+        /**
+         * Stops propagation when the display label is clicked,
+         * otherwise, two clicks will be triggered.
+         */
+        this.onDivLabelClick = (ev) => {
+            ev.stopPropagation();
+        };
+        this.onFocus = () => {
+            this.ionFocus.emit();
+        };
+        this.onBlur = () => {
+            this.ionBlur.emit();
+        };
+        this.getSwitchLabelIcon = (mode, checked) => {
+            if (mode === 'md') {
+                return checked ? checkmarkOutline : removeOutline;
+            }
+            return checked ? removeOutline : ellipseOutline;
+        };
     }
-    inputId = `ion-tg-${toggleIds++}`;
-    inputLabelId = `${this.inputId}-lbl`;
-    helperTextId = `${this.inputId}-helper-text`;
-    errorTextId = `${this.inputId}-error-text`;
-    gesture;
-    lastDrag = 0;
-    inheritedAttributes = {};
-    toggleTrack;
-    didLoad = false;
-    validationObserver;
-    itemFocusObserver;
-    get el() { return getElement(this); }
-    activated = false;
-    /**
-     * Track validation state for proper aria-live announcements.
-     */
-    isInvalid = false;
-    hintTextId;
-    /**
-     * The color to use from your application's color palette.
-     * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
-     * For more information on colors, see [theming](/docs/theming/basics).
-     */
-    color;
-    /**
-     * The name of the control, which is submitted with the form data.
-     */
-    name = this.inputId;
-    /**
-     * If `true`, the toggle is selected.
-     */
-    checked = false;
-    /**
-     * If `true`, the user cannot interact with the toggle.
-     */
-    disabled = false;
-    /**
-     * Text that is placed under the toggle label and displayed when an error is detected.
-     */
-    errorText;
-    /**
-     * Text that is placed under the toggle label and displayed when no error is detected.
-     */
-    helperText;
-    /**
-     * The value of the toggle does not mean if it's checked or not, use the `checked`
-     * property for that.
-     *
-     * The value of a toggle is analogous to the value of a `<input type="checkbox">`,
-     * it's only used when the toggle participates in a native `<form>`.
-     */
-    value = 'on';
-    /**
-     * Enables the on/off accessibility switch labels within the toggle.
-     */
-    enableOnOffLabels = config.get('toggleOnOffLabels');
-    /**
-     * Where to place the label relative to the input.
-     * `"start"`: The label will appear to the left of the toggle in LTR and to the right in RTL.
-     * `"end"`: The label will appear to the right of the toggle in LTR and to the left in RTL.
-     * `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("...").
-     * `"stacked"`: The label will appear above the toggle regardless of the direction. The alignment of the label can be controlled with the `alignment` property.
-     */
-    labelPlacement = 'start';
-    /**
-     * How to pack the label and toggle within a line.
-     * `"start"`: The label and toggle will appear on the left in LTR and
-     * on the right in RTL.
-     * `"end"`: The label and toggle will appear on the right in LTR and
-     * on the left in RTL.
-     * `"space-between"`: The label and toggle will appear on opposite
-     * ends of the line with space between the two elements.
-     * Setting this property will change the toggle `display` to `block`.
-     */
-    justify;
-    /**
-     * How to control the alignment of the toggle and label on the cross axis.
-     * `"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL.
-     * `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL.
-     * Setting this property will change the toggle `display` to `block`.
-     */
-    alignment;
-    /**
-     * If true, screen readers will announce it as a required field. This property
-     * works only for accessibility purposes, it will not prevent the form from
-     * submitting if the value is invalid.
-     */
-    required = false;
-    /**
-     * Emitted when the user switches the toggle on or off.
-     *
-     * This event will not emit when programmatically setting the `checked` property.
-     */
-    ionChange;
-    /**
-     * Emitted when the toggle has focus.
-     */
-    ionFocus;
-    /**
-     * Emitted when the toggle loses focus.
-     */
-    ionBlur;
     disabledChanged() {
         if (this.gesture) {
             this.gesture.enable(!this.disabled);
@@ -196,22 +203,6 @@ const Toggle = class {
         this.setupGesture();
         this.didLoad = true;
     }
-    setupGesture = async () => {
-        const { toggleTrack } = this;
-        if (toggleTrack) {
-            this.gesture = (await import('./index-DcPaH5uL.js')).createGesture({
-                el: toggleTrack,
-                gestureName: 'toggle',
-                gesturePriority: 100,
-                threshold: 5,
-                passive: false,
-                onStart: () => this.onStart(),
-                onMove: (ev) => this.onMove(ev),
-                onEnd: (ev) => this.onEnd(ev),
-            });
-            this.disabledChanged();
-        }
-    };
     disconnectedCallback() {
         if (this.gesture) {
             this.gesture.destroy();
@@ -256,49 +247,6 @@ const Toggle = class {
     setFocus() {
         this.el.focus();
     }
-    onKeyDown = (ev) => {
-        if (ev.key === ' ') {
-            ev.preventDefault();
-            if (!this.disabled) {
-                this.toggleChecked();
-            }
-        }
-    };
-    onClick = (ev) => {
-        /**
-         * The haptics for the toggle on tap is
-         * an iOS-only feature. As such, it should
-         * only trigger on iOS.
-         */
-        const enableHaptics = isPlatform('ios');
-        if (this.disabled) {
-            return;
-        }
-        ev.preventDefault();
-        if (this.lastDrag + 300 < Date.now()) {
-            this.toggleChecked();
-            enableHaptics && hapticSelection();
-        }
-    };
-    /**
-     * Stops propagation when the display label is clicked,
-     * otherwise, two clicks will be triggered.
-     */
-    onDivLabelClick = (ev) => {
-        ev.stopPropagation();
-    };
-    onFocus = () => {
-        this.ionFocus.emit();
-    };
-    onBlur = () => {
-        this.ionBlur.emit();
-    };
-    getSwitchLabelIcon = (mode, checked) => {
-        if (mode === 'md') {
-            return checked ? checkmarkOutline : removeOutline;
-        }
-        return checked ? removeOutline : ellipseOutline;
-    };
     renderOnOffSwitchLabels(mode, checked) {
         const icon = this.getSwitchLabelIcon(mode, checked);
         return (h("ion-icon", { class: {
@@ -372,6 +320,7 @@ const Toggle = class {
                 'label-text-wrapper-hidden': !hasLabel,
             }, part: "label", id: inputLabelId, onClick: this.onDivLabelClick }, h("slot", { key: '345efb5ce20f8124d1e74877b4943edf82fe2f8e' }), this.renderHintText()), h("div", { key: 'fc1a7fb6b65064307fbe0a50178559a52d6aedb7', class: "native-wrapper" }, this.renderToggleControl()))));
     }
+    get el() { return getElement(this); }
     static get watchers() { return {
         "disabled": [{
                 "disabledChanged": 0