@ionic/core 8.7.6-dev.11759493293.13f81b9f → 8.7.6-dev.11759523190.11a976aa

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

@@ -1,8 +1,6 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import checkRegular from "@phosphor-icons/core/assets/regular/check.svg";
-import minusRegular from "@phosphor-icons/core/assets/regular/minus.svg";
 import { Host, h } from "@stencil/core";
 import { renderHiddenInput, inheritAriaAttributes } from "../../utils/helpers";
 import { hapticSelection } from "../../utils/native/haptic";
@@ -11,10 +9,9 @@ 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 { getIonTheme } from "../../global/ionic-global";
+import { getIonMode } from "../../global/ionic-global";
 /**
- * @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.
+ * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  *
  * @slot - The label text to associate with the toggle. Use the "labelPlacement" property to control where the label is placed relative to the toggle.
  *
@@ -126,8 +123,11 @@ export class Toggle {
         this.onBlur = () => {
             this.ionBlur.emit();
         };
-        this.getSwitchLabelIcon = (checked) => {
-            return checked ? this.toggleCheckedIcon : this.toggleUncheckedIcon;
+        this.getSwitchLabelIcon = (mode, checked) => {
+            if (mode === 'md') {
+                return checked ? checkmarkOutline : removeOutline;
+            }
+            return checked ? removeOutline : ellipseOutline;
         };
     }
     disabledChanged() {
@@ -194,68 +194,18 @@ export class Toggle {
             this.focusEl.focus();
         }
     }
-    get toggleDefaultCheckedIcon() {
-        // Determine the theme and map to default icons
-        const theme = getIonTheme(this);
-        const defaultIcons = {
-            ios: removeOutline,
-            ionic: checkRegular,
-            md: checkmarkOutline,
-        };
-        // Get the default icon based on the theme, falling back to 'md' icon if necessary
-        const defaultIcon = defaultIcons[theme] || defaultIcons.md;
-        // Return the default icon
-        return defaultIcon;
-    }
-    /**
-     * Get the icon to use for the checked icon.
-     * Otherwise, 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.
-     * Otherwise, 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 default icons
-        const theme = getIonTheme(this);
-        const defaultIcons = {
-            ios: ellipseOutline,
-            ionic: minusRegular,
-            md: removeOutline,
-        };
-        // Get the default icon based on the theme, falling back to 'md' icon if necessary
-        const defaultIcon = defaultIcons[theme] || defaultIcons.md;
-        // Return the configured toggle unchecked icon or the default icon
-        return config.get('toggleUncheckedIcon', defaultIcon);
-    }
-    renderOnOffSwitchLabels(checked) {
-        const icon = this.getSwitchLabelIcon(checked);
+    renderOnOffSwitchLabels(mode, checked) {
+        const icon = this.getSwitchLabelIcon(mode, 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 theme = getIonTheme(this);
+        const mode = getIonMode(this);
         const { enableOnOffLabels, checked } = this;
         return (h("div", { class: "toggle-icon", part: "track", ref: (el) => (this.toggleTrack = el) }, enableOnOffLabels &&
-            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)))));
+            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)))));
     }
     get hasLabel() {
         return this.el.textContent !== '';
@@ -288,13 +238,12 @@ export class Toggle {
     }
     render() {
         const { activated, alignment, checked, color, disabled, el, errorTextId, hasLabel, inheritedAttributes, inputId, inputLabelId, justify, labelPlacement, name, required, } = this;
-        const theme = getIonTheme(this);
+        const mode = getIonMode(this);
         const value = this.getValue();
         const rtl = isRTL(el) ? 'rtl' : 'ltr';
-        const isIonicTheme = theme === 'ionic';
         renderHiddenInput(true, el, name, checked ? value : '', disabled);
-        return (h(Host, { key: '956aeee2151b8cc8239edeaa935475e3019a7b5f', role: "switch", "aria-checked": `${checked}`, "aria-describedby": this.getHintTextID(), "aria-invalid": this.getHintTextID() === errorTextId, onClick: this.onClick, "aria-labelledby": hasLabel ? inputLabelId : null, "aria-label": inheritedAttributes['aria-label'] || null, "aria-disabled": disabled ? 'true' : null, tabindex: disabled ? undefined : 0, onKeyDown: this.onKeyDown, class: createColorClasses(color, {
-                [theme]: true,
+        return (h(Host, { key: '21037ea2e8326f58c84becadde475f007f931924', role: "switch", "aria-checked": `${checked}`, "aria-describedby": this.getHintTextID(), "aria-invalid": this.getHintTextID() === errorTextId, onClick: this.onClick, "aria-labelledby": hasLabel ? inputLabelId : null, "aria-label": inheritedAttributes['aria-label'] || null, "aria-disabled": disabled ? 'true' : null, tabindex: disabled ? undefined : 0, onKeyDown: this.onKeyDown, class: createColorClasses(color, {
+                [mode]: true,
                 'in-item': hostContext('ion-item', el),
                 'toggle-activated': activated,
                 'toggle-checked': checked,
@@ -303,33 +252,30 @@ export class Toggle {
                 [`toggle-alignment-${alignment}`]: alignment !== undefined,
                 [`toggle-label-placement-${labelPlacement}`]: true,
                 [`toggle-${rtl}`]: true,
-                'ion-activatable': isIonicTheme,
-                'ion-focusable': isIonicTheme,
-            }) }, h("label", { key: '4aa309eac4fe94639f96d08ae9d09a65fedb271f', class: "toggle-wrapper", htmlFor: inputId }, h("input", Object.assign({ key: '4057524d70ca25e0df76d726d85656f16df655ca', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl), required: required }, inheritedAttributes)), h("div", { key: '3b0a476f62f1e183d4b4cbc823c749140ba27d4d', class: {
+            }) }, h("label", { key: '4d153679d118d01286f6633d1c19558a97745ff6', class: "toggle-wrapper", htmlFor: inputId }, h("input", Object.assign({ key: '0dfcd4df15b8d41bec5ff5f8912503afbb7bec53', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl), required: required }, inheritedAttributes)), h("div", { key: 'ffed3a07ba2ab70e5b232e6041bc3b6b34be8331', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !hasLabel,
-            }, part: "label", id: inputLabelId, onClick: this.onDivLabelClick }, h("slot", { key: '75a6ccef569eabf17b3d3fba165d8110960832af' }), this.renderHintText()), h("div", { key: 'e2bc757d81ecc56ac40450586d1bc9f87e0ea726', class: "native-wrapper" }, this.renderToggleControl()))));
+            }, part: "label", id: inputLabelId, onClick: this.onDivLabelClick }, h("slot", { key: 'd88e1e3dcdd8293f6b61f237cd7a0511dcbce300' }), this.renderHintText()), h("div", { key: '0e924225f5f0caf3c88738acb6c557bd8c1b68f6', 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"],
-            "ionic": ["toggle.ionic.scss"]
+            "md": ["toggle.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["toggle.ios.css"],
-            "md": ["toggle.md.css"],
-            "ionic": ["toggle.ionic.css"]
+            "md": ["toggle.md.css"]
         };
     }
     static get properties() {
         return {
             "color": {
                 "type": "string",
+                "attribute": "color",
                 "mutable": false,
                 "complexType": {
                     "original": "Color",
@@ -350,11 +296,11 @@ export class Toggle {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true,
-                "attribute": "color"
+                "reflect": true
             },
             "name": {
                 "type": "string",
+                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -370,11 +316,11 @@ export class Toggle {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "name",
                 "defaultValue": "this.inputId"
             },
             "checked": {
                 "type": "boolean",
+                "attribute": "checked",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -390,11 +336,11 @@ export class Toggle {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "checked",
                 "defaultValue": "false"
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -410,11 +356,11 @@ export class Toggle {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "disabled",
                 "defaultValue": "false"
             },
             "errorText": {
                 "type": "string",
+                "attribute": "error-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -429,11 +375,11 @@ export class Toggle {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
-                "attribute": "error-text"
+                "reflect": false
             },
             "helperText": {
                 "type": "string",
+                "attribute": "helper-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -448,11 +394,11 @@ export class Toggle {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
-                "attribute": "helper-text"
+                "reflect": false
             },
             "value": {
                 "type": "string",
+                "attribute": "value",
                 "mutable": false,
                 "complexType": {
                     "original": "string | null",
@@ -468,11 +414,11 @@ export class Toggle {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "value",
                 "defaultValue": "'on'"
             },
             "enableOnOffLabels": {
                 "type": "boolean",
+                "attribute": "enable-on-off-labels",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean | undefined",
@@ -488,11 +434,11 @@ export class Toggle {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "enable-on-off-labels",
                 "defaultValue": "config.get('toggleOnOffLabels')"
             },
             "labelPlacement": {
                 "type": "string",
+                "attribute": "label-placement",
                 "mutable": false,
                 "complexType": {
                     "original": "'start' | 'end' | 'fixed' | 'stacked'",
@@ -508,11 +454,11 @@ export class Toggle {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "label-placement",
                 "defaultValue": "'start'"
             },
             "justify": {
                 "type": "string",
+                "attribute": "justify",
                 "mutable": false,
                 "complexType": {
                     "original": "'start' | 'end' | 'space-between'",
@@ -527,11 +473,11 @@ export class Toggle {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
-                "attribute": "justify"
+                "reflect": false
             },
             "alignment": {
                 "type": "string",
+                "attribute": "alignment",
                 "mutable": false,
                 "complexType": {
                     "original": "'start' | 'center'",
@@ -546,11 +492,11 @@ export class Toggle {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
-                "attribute": "alignment"
+                "reflect": false
             },
             "required": {
                 "type": "boolean",
+                "attribute": "required",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -566,7 +512,6 @@ export class Toggle {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "required",
                 "defaultValue": "false"
             }
         };