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

package/dist/esm/ion-radio_2.entry.js

@@ -1,12 +1,12 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { r as registerInstance, c as createEvent, g as getElement, h, d as Host, i as forceUpdate } from './index-ChhhtsGZ.js';
-import { f as addEventListener, m as removeEventListener, a as renderHiddenInput } from './helpers-CAGf8Wgp.js';
+import { r as registerInstance, c as createEvent, h, d as Host, g as getElement, i as forceUpdate } from './index-CKYcsw8f.js';
+import { f as addEventListener, m as removeEventListener, a as renderHiddenInput } from './helpers-BIgoInJU.js';
 import { i as isOptionSelected } from './compare-with-utils-sObYyvOy.js';
-import { c as createItemMultipleInputsObserver } from './item-multiple-inputs-rU8VaNNg.js';
+import { c as createItemMultipleInputsObserver } from './item-multiple-inputs-D_N3fDkD.js';
 import { h as hostContext, c as createColorClasses } from './theme-byZM6qHV.js';
-import { b as getIonMode } from './ionic-global-BVB7BrLT.js';
+import { b as getIonMode } from './ionic-global-lrowsHfi.js';
 import { c as checkInvalidState } from './validity-DJztqcrH.js';
 import './dir-Dojwmvde.js';
 
@@ -19,38 +19,67 @@ const Radio = class {
         registerInstance(this, hostRef);
         this.ionFocus = createEvent(this, "ionFocus", 7);
         this.ionBlur = createEvent(this, "ionBlur", 7);
+        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();
+        };
     }
-    inputId = `ion-rb-${radioButtonIds++}`;
-    radioGroup = null;
-    itemFocusObserver;
-    get el() { return getElement(this); }
-    /**
-     * 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
@@ -59,40 +88,6 @@ const Radio = class {
          */
         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
@@ -138,39 +133,6 @@ const Radio = class {
             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 !== '';
     }
@@ -200,6 +162,7 @@ const Radio = class {
                 'label-text-wrapper-hidden': !hasLabel,
             }, part: "label" }, h("slot", { key: '6a48e76ac8793d2aacebd3a8f193e3537272e5c2' })), h("div", { key: '68e4350bac8dad29c6b7a180560de2bb4dfc8c41', class: "native-wrapper" }, this.renderRadioControl()))));
     }
+    get el() { return getElement(this); }
     static get watchers() { return {
         "value": [{
                 "valueChanged": 0
@@ -221,64 +184,73 @@ const RadioGroup = class {
         registerInstance(this, hostRef);
         this.ionChange = createEvent(this, "ionChange", 7);
         this.ionValueChange = createEvent(this, "ionValueChange", 7);
+        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;
-    get el() { return getElement(this); }
-    /**
-     * 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
@@ -291,22 +263,6 @@ const RadioGroup = class {
          */
         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
@@ -377,36 +333,6 @@ const RadioGroup = class {
         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
@@ -503,6 +429,7 @@ const RadioGroup = class {
         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' })));
     }
+    get el() { return getElement(this); }
     static get watchers() { return {
         "value": [{
                 "valueChanged": 0