@ionic/core 8.8.19 → 8.8.20-dev.11787158518.168a2fea

package/dist/collection/components/progress-bar/progress-bar.js

@@ -15,35 +15,39 @@ import { getIonMode } from "../../global/ionic-global";
  * width of the `buffer` value.
  */
 export class ProgressBar {
-    constructor() {
-        /**
-         * The state of the progress bar, based on if the time the process takes is known or not.
-         * Default options are: `"determinate"` (no animation), `"indeterminate"` (animate from left to right).
-         */
-        this.type = 'determinate';
-        /**
-         * If true, reverse the progress bar direction.
-         */
-        this.reversed = false;
-        /**
-         * The value determines how much of the active bar should display when the
-         * `type` is `"determinate"`.
-         * The value should be between [0, 1].
-         */
-        this.value = 0;
-        /**
-         * If the buffer and value are smaller than 1, the buffer circles will show.
-         * The buffer should be between [0, 1].
-         */
-        this.buffer = 1;
-    }
+    /**
+     * The state of the progress bar, based on if the time the process takes is known or not.
+     * Default options are: `"determinate"` (no animation), `"indeterminate"` (animate from left to right).
+     */
+    type = 'determinate';
+    /**
+     * If true, reverse the progress bar direction.
+     */
+    reversed = false;
+    /**
+     * The value determines how much of the active bar should display when the
+     * `type` is `"determinate"`.
+     * The value should be between [0, 1].
+     */
+    value = 0;
+    /**
+     * If the buffer and value are smaller than 1, the buffer circles will show.
+     * The buffer should be between [0, 1].
+     */
+    buffer = 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;
     render() {
         const { color, type, reversed, value, buffer } = this;
         const paused = config.getBoolean('_testing');
         const mode = getIonMode(this);
         // If the progress is displayed as a solid bar.
         const progressSolid = buffer === 1;
-        return (h(Host, { key: 'c859e48f3d24a458239e36d925e5dc003ed07c6b', role: "progressbar", "aria-valuenow": type === 'determinate' ? value : null, "aria-valuemin": "0", "aria-valuemax": "1", class: createColorClasses(color, {
+        return (h(Host, { key: 'd53d39a3e2c0198164a9face62d3775f357b6914', role: "progressbar", "aria-valuenow": type === 'determinate' ? value : null, "aria-valuemin": "0", "aria-valuemax": "1", class: createColorClasses(color, {
                 [mode]: true,
                 [`progress-bar-${type}`]: true,
                 'progress-paused': paused,

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

@@ -16,68 +16,37 @@ import { getIonMode } from "../../global/ionic-global";
  * @part mark - The checkmark or dot used to indicate the checked state.
  */
 export class Radio {
-    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 === null || radioGroup === void 0 ? void 0 : radioGroup.allowEmptySelection)) {
-                this.checked = false;
-            }
-            else {
-                this.checked = true;
-            }
-        };
-        this.onFocus = () => {
-            this.ionFocus.emit();
-        };
-        this.onBlur = () => {
-            this.ionBlur.emit();
-        };
-    }
+    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;
     valueChanged() {
         /**
          * The new value of the radio may
@@ -86,6 +55,40 @@ 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
@@ -131,6 +134,39 @@ 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 !== '';
     }
@@ -142,7 +178,7 @@ export class Radio {
         const mode = getIonMode(this);
         const inItem = hostContext('ion-item', el);
         const inMultipleInputsItem = hostContext('ion-item.item-multiple-inputs', el);
-        return (h(Host, { key: '8622be22eb4f0bab791b479c813c490e21fd9ad8', onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses(color, {
+        return (h(Host, { key: 'ad7ac0bdc4d3216ecc19402e5b8d6f9e4d09334b', onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses(color, {
                 [mode]: true,
                 'in-item': inItem,
                 'radio-checked': checked,
@@ -155,10 +191,10 @@ export class Radio {
                 // styling stays suppressed either way.
                 'ion-activatable': !inItem,
                 'ion-focusable': !inItem || inMultipleInputsItem,
-            }), role: "radio", "aria-checked": checked ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, tabindex: buttonTabindex }, h("label", { key: 'fb358e14faf37142ccad169adb729f3129371406', class: "radio-wrapper" }, h("div", { key: '844ab615aadf6eef46368ad060afaca9c4222cc1', class: {
+            }), role: "radio", "aria-checked": checked ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, tabindex: buttonTabindex }, h("label", { key: '59c09125633120e2000447b8a3bc24c54490aa85', class: "radio-wrapper" }, h("div", { key: '1a98f3e0027deeac52647ba37aa9a99be0231966', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !hasLabel,
-            }, part: "label" }, h("slot", { key: 'a57e53d65afda0f2082071c911343a0eb02a00a6' })), h("div", { key: '206ff11e9c2c1946a389f96a3e642335e9c3add6', class: "native-wrapper" }, this.renderRadioControl()))));
+            }, part: "label" }, h("slot", { key: '6a48e76ac8793d2aacebd3a8f193e3537272e5c2' })), h("div", { key: '68e4350bac8dad29c6b7a180560de2bb4dfc8c41', class: "native-wrapper" }, this.renderRadioControl()))));
     }
     static get is() { return "ion-radio"; }
     static get encapsulation() { return "shadow"; }
@@ -258,7 +294,7 @@ export class Radio {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "value"
             },
             "labelPlacement": {

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

@@ -6,74 +6,63 @@ import { checkInvalidState } from "../../utils/forms/index";
 import { renderHiddenInput } from "../../utils/helpers";
 import { getIonMode } from "../../global/ionic-global";
 export class RadioGroup {
-    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);
-                }
-            }
-        };
-    }
+    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;
     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
@@ -86,6 +75,22 @@ 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
@@ -156,6 +161,36 @@ 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
@@ -223,7 +258,7 @@ export class RadioGroup {
     /** @internal */
     async setFocus() {
         const radioToFocus = this.getRadios().find((r) => r.tabIndex !== -1);
-        radioToFocus === null || radioToFocus === void 0 ? void 0 : radioToFocus.setFocus();
+        radioToFocus?.setFocus();
     }
     /**
      * Renders the helper text or error text values
@@ -250,7 +285,7 @@ export class RadioGroup {
         const { label, labelId, el, name, value } = this;
         const mode = getIonMode(this);
         renderHiddenInput(true, el, name, value, false);
-        return (h(Host, { key: '377e4aa3a656cc84b742f9d7a7d4be65d20c69f5', 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: 'c3187a2497773b4f15cea3b413b036502bcec8c0' })));
+        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' })));
     }
     static get is() { return "ion-radio-group"; }
     static get originalStyleUrls() {

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

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