@ionic/core 8.8.19-dev.11787007863.1976a30e → 8.8.19-dev.11787083540.1511caf2

package/dist/collection/components/popover/utils.js

@@ -314,9 +314,10 @@ const focusItem = (item) => {
 export const isTriggerElement = (el) => el.hasAttribute('data-ion-popover-trigger');
 export const configureKeyboardInteraction = (popoverEl) => {
     const callback = async (ev) => {
+        var _a;
         const activeElement = document.activeElement;
         let items = [];
-        const targetTagName = ev.target?.tagName;
+        const targetTagName = (_a = ev.target) === null || _a === void 0 ? void 0 : _a.tagName;
         /**
          * Only handle custom keyboard interactions for the host popover element
          * and children ion-item elements.
@@ -337,7 +338,7 @@ export const configureKeyboardInteraction = (popoverEl) => {
             items = Array.from(popoverEl.querySelectorAll('ion-item:not(ion-popover ion-popover *):not([disabled])'));
             /* eslint-disable-next-line */
         }
-        catch { }
+        catch (_b) { }
         switch (ev.key) {
             /**
              * If we are in a child popover
@@ -420,6 +421,7 @@ export const configureKeyboardInteraction = (popoverEl) => {
  * and viewport dimensions.
  */
 export const getPopoverPosition = (isRTL, contentWidth, contentHeight, arrowWidth, arrowHeight, reference, side, align, defaultPosition, triggerEl, event) => {
+    var _a;
     let referenceCoordinates = {
         top: 0,
         left: 0,
@@ -464,8 +466,8 @@ export const getPopoverPosition = (isRTL, contentWidth, contentHeight, arrowWidt
              * as a whole.
              */
             const actualTriggerEl = (triggerEl ||
-                customEv?.detail?.ionShadowTarget ||
-                customEv?.target);
+                ((_a = customEv === null || customEv === void 0 ? void 0 : customEv.detail) === null || _a === void 0 ? void 0 : _a.ionShadowTarget) ||
+                (customEv === null || customEv === void 0 ? void 0 : customEv.target));
             if (!actualTriggerEl) {
                 return defaultPosition;
             }

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

@@ -15,39 +15,35 @@ import { getIonMode } from "../../global/ionic-global";
  * width of the `buffer` value.
  */
 export class ProgressBar {
-    /**
-     * 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;
+    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;
+    }
     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: 'd53d39a3e2c0198164a9face62d3775f357b6914', role: "progressbar", "aria-valuenow": type === 'determinate' ? value : null, "aria-valuemin": "0", "aria-valuemax": "1", class: createColorClasses(color, {
+        return (h(Host, { key: 'c859e48f3d24a458239e36d925e5dc003ed07c6b', 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,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 === 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();
+        };
+    }
     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 !== '';
     }
@@ -178,7 +142,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: 'ad7ac0bdc4d3216ecc19402e5b8d6f9e4d09334b', onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses(color, {
+        return (h(Host, { key: '8622be22eb4f0bab791b479c813c490e21fd9ad8', onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses(color, {
                 [mode]: true,
                 'in-item': inItem,
                 'radio-checked': checked,
@@ -191,10 +155,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: '59c09125633120e2000447b8a3bc24c54490aa85', class: "radio-wrapper" }, h("div", { key: '1a98f3e0027deeac52647ba37aa9a99be0231966', class: {
+            }), 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: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !hasLabel,
-            }, part: "label" }, h("slot", { key: '6a48e76ac8793d2aacebd3a8f193e3537272e5c2' })), h("div", { key: '68e4350bac8dad29c6b7a180560de2bb4dfc8c41', class: "native-wrapper" }, this.renderRadioControl()))));
+            }, part: "label" }, h("slot", { key: 'a57e53d65afda0f2082071c911343a0eb02a00a6' })), h("div", { key: '206ff11e9c2c1946a389f96a3e642335e9c3add6', class: "native-wrapper" }, this.renderRadioControl()))));
     }
     static get is() { return "ion-radio"; }
     static get encapsulation() { return "shadow"; }
@@ -294,7 +258,7 @@ export class Radio {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true,
+                "reflect": false,
                 "attribute": "value"
             },
             "labelPlacement": {

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
@@ -258,7 +223,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
@@ -285,7 +250,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: '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: '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' })));
     }
     static get is() { return "ion-radio-group"; }
     static get originalStyleUrls() {

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