@ionic/core 9.0.1-dev.11787177893.1979eb13 → 9.0.1-dev.11787248963.10a00c73

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

@@ -3,21 +3,21 @@
  */
 'use strict';
 
-var index$1 = require('./index-uvry__L4.js');
+var index$1 = require('./index-BrVMoqUk.js');
 var config = require('./config-CjUbvdPW.js');
-var helpers = require('./helpers-YPQybDph.js');
+var helpers = require('./helpers-Dj5o76mq.js');
 var lockController = require('./lock-controller-aDB9wrEf.js');
-var overlays = require('./overlays-KaNVDNqC.js');
-var index$3 = require('./index-B7zJsYWS.js');
+var overlays = require('./overlays-Bg0auTQa.js');
+var index$3 = require('./index-EJLjthTK.js');
 var theme = require('./theme-Bw0rpaNN.js');
-var ionicGlobal = require('./ionic-global-k6hOWWpn.js');
-var animation = require('./animation-C0mOHzej.js');
+var ionicGlobal = require('./ionic-global-DvgIzM2F.js');
+var animation = require('./animation-D-OqR4a4.js');
 var index = require('./index-DkNv4J_i.js');
-var index$2 = require('./index-DwlRtFZe.js');
+var index$2 = require('./index-DRPqwSvU.js');
 require('./dir-zwDPRE5K.js');
-require('./hardware-back-button-fqpYh-kd.js');
-require('./framework-delegate-Dfo5XsGv.js');
-require('./gesture-controller-BDUH7687.js');
+require('./hardware-back-button-JOAEFSzc.js');
+require('./framework-delegate-BZUx4TnE.js');
+require('./gesture-controller-CeJslptU.js');
 
 /**
  * Calculate the CSS top and bottom position of the toast, to be used
@@ -468,127 +468,102 @@ const Toast = class {
         this.willPresentShorthand = index$1.createEvent(this, "willPresent", 7);
         this.willDismissShorthand = index$1.createEvent(this, "willDismiss", 7);
         this.didDismissShorthand = index$1.createEvent(this, "didDismiss", 7);
+        this.delegateController = overlays.createDelegateController(this);
+        this.lockController = lockController.createLockController();
+        this.triggerController = overlays.createTriggerController();
+        this.customHTMLEnabled = index$1.config.get('innerHTMLTemplatesEnabled', config.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 = index$1.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 (overlays.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, overlays.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 = overlays.createDelegateController(this);
-    lockController = lockController.createLockController();
-    triggerController = overlays.createTriggerController();
-    customHTMLEnabled = index$1.config.get('innerHTMLTemplatesEnabled', config.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 index$1.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 = index$1.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
@@ -616,14 +591,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();
@@ -632,53 +599,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() {
         overlays.prepareOverlay(this.el);
         this.triggerChanged();
@@ -876,48 +802,6 @@ const Toast = class {
         }
         return true;
     }
-    dispatchCancelHandler = (ev) => {
-        const role = ev.detail.role;
-        if (overlays.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, overlays.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;
@@ -976,6 +860,7 @@ const Toast = class {
                 'toast-translucent': this.translucent,
             }), onIonToastWillDismiss: this.dispatchCancelHandler }, index$1.h("div", { key: 'd26cc17a59e3d81810e22ee422398f2cc4c7a05c', class: wrapperClass, part: "wrapper" }, index$1.h("div", { key: 'f15e1a97f13defcbf96612df4c7ba45999e6244d', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (index$1.h("ion-icon", { key: '639cacec828f969673071e54dc68284050e9f2fd', class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), index$1.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 index$1.getElement(this); }
     static get watchers() { return {
         "swipeGesture": [{
                 "swipeGestureChanged": 0

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

@@ -3,13 +3,13 @@
  */
 'use strict';
 
-var index = require('./index-uvry__L4.js');
-var helpers = require('./helpers-YPQybDph.js');
+var index = require('./index-BrVMoqUk.js');
+var helpers = require('./helpers-Dj5o76mq.js');
 var dir = require('./dir-zwDPRE5K.js');
-var itemMultipleInputs = require('./item-multiple-inputs-BdYSbfKN.js');
+var itemMultipleInputs = require('./item-multiple-inputs-DG-ZGm6j.js');
 var validity = require('./validity-BpS37YFM.js');
 var haptic = require('./haptic-Ch-X4gRx.js');
-var ionicGlobal = require('./ionic-global-k6hOWWpn.js');
+var ionicGlobal = require('./ionic-global-DvgIzM2F.js');
 var theme = require('./theme-Bw0rpaNN.js');
 var index$1 = require('./index-wOmugbdg.js');
 require('./capacitor-DmA66EwP.js');
@@ -25,109 +25,116 @@ const Toggle = class {
         this.ionChange = index.createEvent(this, "ionChange", 7);
         this.ionFocus = index.createEvent(this, "ionFocus", 7);
         this.ionBlur = index.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 = index.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 Promise.resolve().then(function () { return require('./index-DRPqwSvU.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 = ionicGlobal.isPlatform('ios');
+            if (this.disabled) {
+                return;
+            }
+            ev.preventDefault();
+            if (this.lastDrag + 300 < Date.now()) {
+                this.toggleChecked();
+                enableHaptics && haptic.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 ? index$1.checkmarkOutline : index$1.removeOutline;
+            }
+            return checked ? index$1.removeOutline : index$1.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 index.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 = index.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);
@@ -198,22 +205,6 @@ const Toggle = class {
         this.setupGesture();
         this.didLoad = true;
     }
-    setupGesture = async () => {
-        const { toggleTrack } = this;
-        if (toggleTrack) {
-            this.gesture = (await Promise.resolve().then(function () { return require('./index-DwlRtFZe.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();
@@ -258,49 +249,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 = ionicGlobal.isPlatform('ios');
-        if (this.disabled) {
-            return;
-        }
-        ev.preventDefault();
-        if (this.lastDrag + 300 < Date.now()) {
-            this.toggleChecked();
-            enableHaptics && haptic.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 ? index$1.checkmarkOutline : index$1.removeOutline;
-        }
-        return checked ? index$1.removeOutline : index$1.ellipseOutline;
-    };
     renderOnOffSwitchLabels(mode, checked) {
         const icon = this.getSwitchLabelIcon(mode, checked);
         return (index.h("ion-icon", { class: {
@@ -374,6 +322,7 @@ const Toggle = class {
                 'label-text-wrapper-hidden': !hasLabel,
             }, part: "label", id: inputLabelId, onClick: this.onDivLabelClick }, index.h("slot", { key: '345efb5ce20f8124d1e74877b4943edf82fe2f8e' }), this.renderHintText()), index.h("div", { key: 'fc1a7fb6b65064307fbe0a50178559a52d6aedb7', class: "native-wrapper" }, this.renderToggleControl()))));
     }
+    get el() { return index.getElement(this); }
     static get watchers() { return {
         "disabled": [{
                 "disabledChanged": 0