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

package/dist/collection/components/radio-group/radio-group.js

@@ -3,66 +3,88 @@
  */
 import { Build, Host, h } from "@stencil/core";
 import { checkInvalidState } from "../../utils/forms/index";
-import { renderHiddenInput } from "../../utils/helpers";
-import { getIonMode } from "../../global/ionic-global";
+import { debounce, renderHiddenInput } from "../../utils/helpers";
+import { hostContext } from "../../utils/theme";
+import { getIonTheme } 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.
+ *
+ * @part supporting-text - Supporting text displayed above the radios.
+ * @part helper-text - Supporting text displayed above the radios when the radio group is valid.
+ * @part error-text - Supporting text displayed above the radios when the radio group is invalid and touched.
+ */
 export class RadioGroup {
-    inputId = `ion-rg-${radioGroupIds++}`;
-    helperTextId = `${this.inputId}-helper-text`;
-    errorTextId = `${this.inputId}-error-text`;
-    labelId = `${this.inputId}-lbl`;
-    label;
-    validationObserver;
-    el;
-    /**
-     * Track validation state for proper aria-live announcements.
-     */
-    isInvalid = false;
-    hintTextId;
-    /**
-     * If `true`, the radios can be deselected.
-     */
-    allowEmptySelection = false;
-    /**
-     * This property allows developers to specify a custom function or property
-     * name for comparing objects when determining the selected option in the
-     * ion-radio-group. When not specified, the default behavior will use strict
-     * equality (===) for comparison.
-     */
-    compareWith;
-    /**
-     * The name of the control, which is submitted with the form data.
-     */
-    name = this.inputId;
-    /**
-     * the value of the radio group.
-     */
-    value;
-    /**
-     * The helper text to display at the top of the radio group.
-     */
-    helperText;
-    /**
-     * The error text to display at the top of the radio group.
-     */
-    errorText;
+    constructor() {
+        this.inputId = `ion-rg-${radioGroupIds++}`;
+        this.helperTextId = `${this.inputId}-helper-text`;
+        this.errorTextId = `${this.inputId}-error-text`;
+        this.labelId = `${this.inputId}-lbl`;
+        /**
+         * Track validation state for proper aria-live announcements.
+         */
+        this.isInvalid = false;
+        /**
+         * If `true`, the radios can be deselected.
+         */
+        this.allowEmptySelection = false;
+        /**
+         * The name of the control, which is submitted with the form data.
+         */
+        this.name = this.inputId;
+        /** Ensures that the tabindex update is debounced and only called once. */
+        this.scheduleTabindexUpdate = debounce(() => this.setRadioTabindex(this.value), 0);
+        this.setRadioTabindex = (value) => {
+            const radios = this.getRadios();
+            // Get the first radio that is not disabled and the checked one
+            const first = radios.find((radio) => !radio.disabled);
+            const checked = radios.find((radio) => radio.value === value && !radio.disabled);
+            if (!first && !checked) {
+                return;
+            }
+            // If an enabled checked radio exists, set it to be the focusable radio
+            // otherwise we default to focus the first radio
+            const focusable = checked || first;
+            for (const radio of radios) {
+                const tabindex = radio === focusable ? 0 : -1;
+                radio.setButtonTabindex(tabindex);
+            }
+        };
+        this.onClick = (ev) => {
+            ev.preventDefault();
+            /**
+             * The Radio Group component mandates that only one radio button
+             * within the group can be selected at any given time. Since `ion-radio`
+             * is a shadow DOM component, it cannot natively perform this behavior
+             * using the `name` attribute.
+             */
+            const selectedRadio = ev.target && ev.target.closest('ion-radio');
+            /**
+             * Our current disabled prop definition causes Stencil to mark it
+             * as optional. While this is not desired, fixing this behavior
+             * in Stencil is a significant breaking change, so this effort is
+             * being de-risked in STENCIL-917. Until then, we compromise
+             * here by checking for falsy `disabled` values instead of strictly
+             * checking `disabled === false`.
+             */
+            if (selectedRadio && !selectedRadio.disabled) {
+                const currentValue = this.value;
+                const newValue = selectedRadio.value;
+                if (newValue !== currentValue) {
+                    this.value = newValue;
+                    this.emitValueChange(ev);
+                }
+                else if (this.allowEmptySelection) {
+                    this.value = undefined;
+                    this.emitValueChange(ev);
+                }
+            }
+        };
+    }
     valueChanged(value) {
         this.setRadioTabindex(value);
         this.ionValueChange.emit({ value });
     }
-    /**
-     * Emitted when the value has changed.
-     *
-     * This event will not emit when programmatically setting the `value` property.
-     */
-    ionChange;
-    /**
-     * Emitted when the `value` property has changed.
-     * This is used to ensure that `ion-radio` can respond
-     * to any value property changes from the group.
-     *
-     * @internal
-     */
-    ionValueChange;
     componentDidLoad() {
         /**
          * There's an issue when assigning a value to the radio group
@@ -75,22 +97,10 @@ export class RadioGroup {
          */
         this.valueChanged(this.value);
     }
-    setRadioTabindex = (value) => {
-        const radios = this.getRadios();
-        // Get the first radio that is not disabled and the checked one
-        const first = radios.find((radio) => !radio.disabled);
-        const checked = radios.find((radio) => radio.value === value && !radio.disabled);
-        if (!first && !checked) {
-            return;
-        }
-        // If an enabled checked radio exists, set it to be the focusable radio
-        // otherwise we default to focus the first radio
-        const focusable = checked || first;
-        for (const radio of radios) {
-            const tabindex = radio === focusable ? 0 : -1;
-            radio.setButtonTabindex(tabindex);
-        }
-    };
+    /** @internal - Recompute which radio has tabindex 0. Call when radios are added/removed. */
+    async updateRadiosTabindex() {
+        this.scheduleTabindexUpdate();
+    }
     async connectedCallback() {
         // Get the list header if it exists and set the id
         // this is used to set aria-labelledby
@@ -161,36 +171,6 @@ export class RadioGroup {
         const { value } = this;
         this.ionChange.emit({ value, event });
     }
-    onClick = (ev) => {
-        ev.preventDefault();
-        /**
-         * The Radio Group component mandates that only one radio button
-         * within the group can be selected at any given time. Since `ion-radio`
-         * is a shadow DOM component, it cannot natively perform this behavior
-         * using the `name` attribute.
-         */
-        const selectedRadio = ev.target && ev.target.closest('ion-radio');
-        /**
-         * Our current disabled prop definition causes Stencil to mark it
-         * as optional. While this is not desired, fixing this behavior
-         * in Stencil is a significant breaking change, so this effort is
-         * being de-risked in STENCIL-917. Until then, we compromise
-         * here by checking for falsy `disabled` values instead of strictly
-         * checking `disabled === false`.
-         */
-        if (selectedRadio && !selectedRadio.disabled) {
-            const currentValue = this.value;
-            const newValue = selectedRadio.value;
-            if (newValue !== currentValue) {
-                this.value = newValue;
-                this.emitValueChange(ev);
-            }
-            else if (this.allowEmptySelection) {
-                this.value = undefined;
-                this.emitValueChange(ev);
-            }
-        }
-    };
     onKeydown(ev) {
         // We don't want the value to automatically change/emit when the radio group is part of a select interface
         // as this will cause the interface to close when navigating through the radio group options
@@ -258,7 +238,7 @@ export class RadioGroup {
     /** @internal */
     async setFocus() {
         const radioToFocus = this.getRadios().find((r) => r.tabIndex !== -1);
-        radioToFocus?.setFocus();
+        radioToFocus === null || radioToFocus === void 0 ? void 0 : radioToFocus.setFocus();
     }
     /**
      * Renders the helper text or error text values
@@ -269,7 +249,7 @@ export class RadioGroup {
         if (!hasHintText) {
             return;
         }
-        return (h("div", { class: "radio-group-top" }, h("div", { id: helperTextId, class: "helper-text", "aria-live": "polite" }, !isInvalid ? helperText : null), h("div", { id: errorTextId, class: "error-text", role: "alert" }, isInvalid ? errorText : null)));
+        return (h("div", { class: "radio-group-top" }, h("div", { id: helperTextId, class: "helper-text", part: "supporting-text helper-text", "aria-live": "polite" }, !isInvalid ? helperText : null), h("div", { id: errorTextId, class: "error-text", part: "supporting-text error-text", role: "alert" }, isInvalid ? errorText : null)));
     }
     getHintTextId() {
         const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;
@@ -283,21 +263,27 @@ export class RadioGroup {
     }
     render() {
         const { label, labelId, el, name, value } = this;
-        const mode = getIonMode(this);
+        const theme = getIonTheme(this);
         renderHiddenInput(true, el, name, value, false);
-        return (h(Host, { key: '8d926a17e800adf0184274215c9689c96a8d6dfd', role: "radiogroup", "aria-labelledby": label ? labelId : null, "aria-describedby": this.hintTextId, "aria-invalid": this.isInvalid ? 'true' : undefined, onClick: this.onClick, class: mode }, this.renderHintText(), h("slot", { key: '2ff891123d5971a581b70d0886d23a074358c2dc' })));
+        return (h(Host, { key: 'd1e359e05c725ec694bafa71fa595ae0d9dd216a', class: {
+                [theme]: true,
+                'in-list': hostContext('ion-list', el),
+            }, role: "radiogroup", "aria-labelledby": label ? labelId : null, "aria-describedby": this.hintTextId, "aria-invalid": this.isInvalid ? 'true' : undefined, "data-roving-focus": true, onClick: this.onClick }, this.renderHintText(), h("slot", { key: 'f1a63c2d99e8d05d6fd6e34363b000a5bf189e48' })));
     }
     static get is() { return "ion-radio-group"; }
+    static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["radio-group.ios.scss"],
-            "md": ["radio-group.md.scss"]
+            "md": ["radio-group.md.scss"],
+            "ionic": ["radio-group.ionic.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["radio-group.ios.css"],
-            "md": ["radio-group.md.css"]
+            "md": ["radio-group.md.css"],
+            "ionic": ["radio-group.ionic.css"]
         };
     }
     static get properties() {
@@ -485,6 +471,26 @@ export class RadioGroup {
     }
     static get methods() {
         return {
+            "updateRadiosTabindex": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": [{
+                            "name": "internal",
+                            "text": "- Recompute which radio has tabindex 0. Call when radios are added/removed."
+                        }]
+                }
+            },
             "setFocus": {
                 "complexType": {
                     "signature": "() => Promise<void>",

package/dist/collection/components/radio-group/radio-group.md.css

@@ -1,3 +1,9 @@
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -53,6 +59,36 @@
  *   }
  * }
  */
+:host {
+  display: block;
+}
+
+/**
+ * Error text should only be shown when .ion-invalid is present
+ * on the radio group. Otherwise the helper text should be shown.
+ */
+.radio-group-top .error-text {
+  display: none;
+}
+
+.radio-group-top .helper-text {
+  display: block;
+}
+
+:host(.ion-touched.ion-invalid) .radio-group-top .error-text {
+  display: block;
+}
+
+:host(.ion-touched.ion-invalid) .radio-group-top .helper-text {
+  display: none;
+}
+
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -108,36 +144,24 @@
  *   }
  * }
  */
-ion-radio-group {
-  vertical-align: top;
-}
-
 .radio-group-top {
   line-height: 1.5;
 }
 
-/**
- * Error text should only be shown when .ion-invalid is present
- * on the radio group. Otherwise the helper text should be shown.
- */
 .radio-group-top .error-text {
-  display: none;
   color: var(--ion-color-danger, #c5000f);
 }
 
 .radio-group-top .helper-text {
-  display: block;
   color: var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));
 }
 
-.ion-touched.ion-invalid .radio-group-top .error-text {
-  display: block;
-}
-
-.ion-touched.ion-invalid .radio-group-top .helper-text {
-  display: none;
-}
-
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -193,7 +217,7 @@ ion-radio-group {
  *   }
  * }
  */
-ion-list .radio-group-top {
+:host(.in-list) .radio-group-top {
   -webkit-padding-start: 16px;
   padding-inline-start: 16px;
   -webkit-padding-end: 16px;

package/dist/collection/components/radio-group/test/fixtures.js

@@ -3,8 +3,6 @@
  */
 import { expect } from "@playwright/test";
 export class RadioFixture {
-    page;
-    radio;
     constructor(page) {
         this.page = page;
     }