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

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

@@ -16,37 +16,68 @@ import { getIonMode } from "../../global/ionic-global";
  * @part mark - The checkmark or dot used to indicate the checked state.
  */
 export class Radio {
-    inputId = `ion-rb-${radioButtonIds++}`;
-    radioGroup = null;
-    itemFocusObserver;
-    el;
-    /**
-     * If `true`, the radio is selected.
-     */
-    checked = false;
-    /**
-     * The tabindex of the radio button.
-     * @internal
-     */
-    buttonTabindex = -1;
-    /**
-     * 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 user cannot interact with the radio.
-     */
-    disabled = false;
-    /**
-     * the value of the radio.
-     */
-    value;
+    constructor() {
+        this.inputId = `ion-rb-${radioButtonIds++}`;
+        this.radioGroup = null;
+        /**
+         * If `true`, the radio is selected.
+         */
+        this.checked = false;
+        /**
+         * The tabindex of the radio button.
+         * @internal
+         */
+        this.buttonTabindex = -1;
+        /**
+         * The name of the control, which is submitted with the form data.
+         */
+        this.name = this.inputId;
+        /**
+         * If `true`, the user cannot interact with the radio.
+         */
+        this.disabled = false;
+        /**
+         * Where to place the label relative to the radio.
+         * `"start"`: The label will appear to the left of the radio in LTR and to the right in RTL.
+         * `"end"`: The label will appear to the right of the radio 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 radio regardless of the direction. The alignment of the label can be controlled with the `alignment` property.
+         */
+        this.labelPlacement = 'start';
+        this.updateState = () => {
+            if (this.radioGroup) {
+                const { compareWith, value: radioGroupValue } = this.radioGroup;
+                this.checked = isOptionSelected(radioGroupValue, this.value, compareWith);
+            }
+        };
+        this.onClick = () => {
+            const { radioGroup, checked, disabled } = this;
+            if (disabled) {
+                return;
+            }
+            /**
+             * The modern control does not use a native input
+             * inside of the radio host, so we cannot rely on the
+             * ev.preventDefault() behavior above. If the radio
+             * is checked and the parent radio group allows for empty
+             * selection, then we can set the checked state to false.
+             * Otherwise, the checked state should always be set
+             * to true because the checked state cannot be toggled.
+             */
+            if (checked && radioGroup?.allowEmptySelection) {
+                this.checked = false;
+            }
+            else {
+                this.checked = true;
+            }
+        };
+        this.onFocus = () => {
+            this.ionFocus.emit();
+        };
+        this.onBlur = () => {
+            this.ionBlur.emit();
+        };
+    }
     valueChanged() {
         /**
          * The new value of the radio may
@@ -55,40 +86,6 @@ export class Radio {
          */
         this.updateState();
     }
-    /**
-     * Where to place the label relative to the radio.
-     * `"start"`: The label will appear to the left of the radio in LTR and to the right in RTL.
-     * `"end"`: The label will appear to the right of the radio 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 radio regardless of the direction. The alignment of the label can be controlled with the `alignment` property.
-     */
-    labelPlacement = 'start';
-    /**
-     * How to pack the label and radio within a line.
-     * `"start"`: The label and radio will appear on the left in LTR and
-     * on the right in RTL.
-     * `"end"`: The label and radio will appear on the right in LTR and
-     * on the left in RTL.
-     * `"space-between"`: The label and radio will appear on opposite
-     * ends of the line with space between the two elements.
-     * Setting this property will change the radio `display` to `block`.
-     */
-    justify;
-    /**
-     * How to control the alignment of the radio 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 radio `display` to `block`.
-     */
-    alignment;
-    /**
-     * Emitted when the radio button has focus.
-     */
-    ionFocus;
-    /**
-     * Emitted when the radio button loses focus.
-     */
-    ionBlur;
     componentDidLoad() {
         /**
          * The value may be `undefined` if it
@@ -134,39 +131,6 @@ export class Radio {
             this.itemFocusObserver = undefined;
         }
     }
-    updateState = () => {
-        if (this.radioGroup) {
-            const { compareWith, value: radioGroupValue } = this.radioGroup;
-            this.checked = isOptionSelected(radioGroupValue, this.value, compareWith);
-        }
-    };
-    onClick = () => {
-        const { radioGroup, checked, disabled } = this;
-        if (disabled) {
-            return;
-        }
-        /**
-         * The modern control does not use a native input
-         * inside of the radio host, so we cannot rely on the
-         * ev.preventDefault() behavior above. If the radio
-         * is checked and the parent radio group allows for empty
-         * selection, then we can set the checked state to false.
-         * Otherwise, the checked state should always be set
-         * to true because the checked state cannot be toggled.
-         */
-        if (checked && radioGroup?.allowEmptySelection) {
-            this.checked = false;
-        }
-        else {
-            this.checked = true;
-        }
-    };
-    onFocus = () => {
-        this.ionFocus.emit();
-    };
-    onBlur = () => {
-        this.ionBlur.emit();
-    };
     get hasLabel() {
         return this.el.textContent !== '';
     }

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

@@ -6,63 +6,74 @@ import { checkInvalidState } from "../../utils/forms/index";
 import { renderHiddenInput } from "../../utils/helpers";
 import { getIonMode } from "../../global/ionic-global";
 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;
+        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 +86,6 @@ 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);
-        }
-    };
     async connectedCallback() {
         // Get the list header if it exists and set the id
         // this is used to set aria-labelledby
@@ -161,36 +156,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

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;
     }