@ionic/core 8.8.20-dev.11787158518.168a2fea → 8.8.20-dev.11789504012.1a675914

package/dist/collection/components/toggle/toggle.js

@@ -10,9 +10,10 @@ import { isRTL } from "../../utils/rtl/index";
 import { createColorClasses, hostContext } from "../../utils/theme";
 import { checkmarkOutline, removeOutline, ellipseOutline } from "ionicons/icons";
 import { config } from "../../global/config";
-import { getIonMode } from "../../global/ionic-global";
+import { getIonTheme } from "../../global/ionic-global";
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
+ * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
  *
  * @slot - The label text to associate with the toggle. Use the "labelPlacement" property to control where the label is placed relative to the toggle.
  *
@@ -24,108 +25,114 @@ import { getIonMode } from "../../global/ionic-global";
  * @part error-text - Supporting text displayed beneath the toggle label when the toggle is invalid and touched.
  */
 export class Toggle {
-    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;
-    el;
-    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;
+    constructor() {
+        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('../../utils/gesture')).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 = (checked) => {
+            return checked ? this.toggleCheckedIcon : this.toggleUncheckedIcon;
+        };
+    }
     disabledChanged() {
         if (this.gesture) {
             this.gesture.enable(!this.disabled);
@@ -196,22 +203,6 @@ export class Toggle {
         this.setupGesture();
         this.didLoad = true;
     }
-    setupGesture = async () => {
-        const { toggleTrack } = this;
-        if (toggleTrack) {
-            this.gesture = (await import('../../utils/gesture')).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();
@@ -228,9 +219,7 @@ export class Toggle {
         }
     }
     componentWillLoad() {
-        this.inheritedAttributes = {
-            ...inheritAriaAttributes(this.el),
-        };
+        this.inheritedAttributes = Object.assign({}, inheritAriaAttributes(this.el));
         this.hintTextId = this.getHintTextId();
     }
     onStart() {
@@ -256,61 +245,57 @@ export class Toggle {
     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.
+     * Get the default icon to use for the checked icon based on the theme.
      */
-    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);
+    get toggleDefaultCheckedIcon() {
+        // Determine the theme and map to the default icon
+        const theme = getIonTheme(this);
+        return theme === 'ios' ? removeOutline : checkmarkOutline;
+    }
+    /**
+     * Get the icon to use for the checked icon.
+     * Use the icon set in the config.
+     * If no icon is set in the config, use the default icon.
+     */
+    get toggleCheckedIcon() {
+        return config.get('toggleCheckedIcon', this.toggleDefaultCheckedIcon);
+    }
+    /**
+     * Get the icon to use for the unchecked icon.
+     * Use the icon set in the config.
+     * If no icon is set in the config, use the default icon.
+     */
+    get toggleUncheckedIcon() {
+        // Determine the theme and map to the default icon
+        const theme = getIonTheme(this);
+        const defaultIcon = theme === 'ios' ? ellipseOutline : removeOutline;
+        // Return the configured toggle unchecked icon or the default icon
+        return config.get('toggleUncheckedIcon', defaultIcon);
+    }
+    renderOnOffSwitchLabels(checked) {
+        const icon = this.getSwitchLabelIcon(checked);
         return (h("ion-icon", { class: {
                 'toggle-switch-icon': true,
                 'toggle-switch-icon-checked': checked,
+                /**
+                 * The default checked icon is being modified with
+                 * styling that causes it to rotate by 90 degrees
+                 * when the theme is `ios`.
+                 *
+                 * To prevent any rotation on a custom icon that is
+                 * set through the config, we need to apply a class
+                 * that handles the styling only when the default
+                 * checked icon is being used.
+                 */
+                'toggle-switch-icon-checked-default': checked && icon === this.toggleDefaultCheckedIcon,
             }, icon: icon, "aria-hidden": "true" }));
     }
     renderToggleControl() {
-        const mode = getIonMode(this);
+        const theme = getIonTheme(this);
         const { enableOnOffLabels, checked } = this;
         return (h("div", { class: "toggle-icon", part: "track", ref: (el) => (this.toggleTrack = el) }, enableOnOffLabels &&
-            mode === 'ios' && [this.renderOnOffSwitchLabels(mode, true), this.renderOnOffSwitchLabels(mode, false)], h("div", { class: "toggle-icon-wrapper" }, h("div", { class: "toggle-inner", part: "handle" }, enableOnOffLabels && mode === 'md' && this.renderOnOffSwitchLabels(mode, checked)))));
+            theme === 'ios' && [this.renderOnOffSwitchLabels(true), this.renderOnOffSwitchLabels(false)], h("div", { class: "toggle-icon-wrapper" }, h("div", { class: "toggle-inner", part: "handle" }, enableOnOffLabels && (theme === 'md' || theme === 'ionic') && this.renderOnOffSwitchLabels(checked)))));
     }
     get hasLabel() {
         return this.el.textContent !== '';
@@ -343,9 +328,10 @@ export class Toggle {
     }
     render() {
         const { activated, alignment, checked, color, disabled, el, hasLabel, inheritedAttributes, inputId, inputLabelId, justify, labelPlacement, name, required, } = this;
-        const mode = getIonMode(this);
+        const theme = getIonTheme(this);
         const value = this.getValue();
         const rtl = isRTL(el) ? 'rtl' : 'ltr';
+        const isIonicTheme = theme === 'ionic';
         const inItem = hostContext('ion-item', el);
         const inMultipleInputsItem = hostContext('ion-item.item-multiple-inputs', el);
         // A clickable item is a second tab stop painting the same row indicator, which
@@ -353,8 +339,8 @@ export class Toggle {
         // The attributes are matched too because the class needs the item to render.
         const inClickableItem = hostContext('ion-item.ion-activatable, ion-item[button], ion-item[href]', el);
         renderHiddenInput(true, el, name, checked ? value : '', disabled);
-        return (h(Host, { key: '148d15040257b05b3769da5a2439d051e357cbba', role: "switch", "aria-checked": `${checked}`, "aria-describedby": this.hintTextId, "aria-invalid": this.isInvalid ? 'true' : undefined, onClick: this.onClick, "aria-labelledby": hasLabel ? inputLabelId : null, "aria-label": inheritedAttributes['aria-label'] || null, "aria-disabled": disabled ? 'true' : null, "aria-required": required ? 'true' : undefined, tabindex: disabled ? undefined : 0, onKeyDown: this.onKeyDown, onFocus: this.onFocus, onBlur: this.onBlur, class: createColorClasses(color, {
-                [mode]: true,
+        return (h(Host, { key: 'eed0ae9f024ad9e4160b73465cad2723470c5d33', role: "switch", "aria-checked": `${checked}`, "aria-describedby": this.hintTextId, "aria-invalid": this.isInvalid ? 'true' : undefined, onClick: this.onClick, "aria-labelledby": hasLabel ? inputLabelId : null, "aria-label": inheritedAttributes['aria-label'] || null, "aria-disabled": disabled ? 'true' : null, "aria-required": required ? 'true' : undefined, tabindex: disabled ? undefined : 0, onKeyDown: this.onKeyDown, onFocus: this.onFocus, onBlur: this.onBlur, class: createColorClasses(color, {
+                [theme]: true,
                 'in-item': inItem,
                 // `ion-focusable` has to stay on because it is what makes the item focusable.
                 // When the item draws the row indicator, CSS suppresses ours instead.
@@ -367,23 +353,26 @@ export class Toggle {
                 [`toggle-alignment-${alignment}`]: alignment !== undefined,
                 [`toggle-label-placement-${labelPlacement}`]: true,
                 [`toggle-${rtl}`]: true,
-            }) }, h("label", { key: '0dbc40adc87e2ab4bdcd9a9fef43393484174c18', class: "toggle-wrapper", htmlFor: inputId }, h("input", { key: '92dee565687fc9a883f97091ead1bbb51df43779', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, required: required, ...inheritedAttributes }), h("div", { key: 'f057bc57714b26e84226ee931e09212b86dba69f', class: {
+                'ion-activatable': isIonicTheme,
+            }) }, h("label", { key: '63c4c5d2770b547e14daf482e9eea1ad5b27a88a', class: "toggle-wrapper", htmlFor: inputId }, h("input", Object.assign({ key: '15b5cf7825f1f2511e07c9d2af5681abc83731f1', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, required: required }, inheritedAttributes)), h("div", { key: 'f579e6cfcd7ef68b6c213a3435e5ff14687e9678', class: {
                 'label-text-wrapper': true,
                 '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()))));
+            }, part: "label", id: inputLabelId, onClick: this.onDivLabelClick }, h("slot", { key: 'e47cef085d9486c529f932df0ec5ae0620075ebc' }), this.renderHintText()), h("div", { key: '6c9b697a652d2f0329fc02f84ee81898c8ee39d3', class: "native-wrapper" }, this.renderToggleControl()))));
     }
     static get is() { return "ion-toggle"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["toggle.ios.scss"],
-            "md": ["toggle.md.scss"]
+            "md": ["toggle.md.scss"],
+            "ionic": ["toggle.ionic.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["toggle.ios.css"],
-            "md": ["toggle.md.css"]
+            "md": ["toggle.md.css"],
+            "ionic": ["toggle.ionic.css"]
         };
     }
     static get properties() {