@ionic/core 8.8.19-dev.11786610762.137bbb21 → 8.8.19-dev.11786735826.1fad7c0a

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

@@ -3,88 +3,66 @@
  */
 import { Build, Host, h } from "@stencil/core";
 import { checkInvalidState } from "../../utils/forms/index";
-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.
- */
+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;
-        /** 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);
-                }
-            }
-        };
-    }
+    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
@@ -97,10 +75,22 @@ export class RadioGroup {
          */
         this.valueChanged(this.value);
     }
-    /** @internal - Recompute which radio has tabindex 0. Call when radios are added/removed. */
-    async updateRadiosTabindex() {
-        this.scheduleTabindexUpdate();
-    }
+    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
@@ -171,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
@@ -238,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
@@ -249,7 +269,7 @@ export class RadioGroup {
         if (!hasHintText) {
             return;
         }
-        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)));
+        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)));
     }
     getHintTextId() {
         const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;
@@ -263,27 +283,21 @@ export class RadioGroup {
     }
     render() {
         const { label, labelId, el, name, value } = this;
-        const theme = getIonTheme(this);
+        const mode = getIonMode(this);
         renderHiddenInput(true, el, name, value, false);
-        return (h(Host, { key: '01aa69d37d97ff7395b5bbeabdc62d1ce535285c', 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: 'd2f5c174a88636020b8911cb6748b42f8b5d9fbe' })));
+        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 encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["radio-group.ios.scss"],
-            "md": ["radio-group.md.scss"],
-            "ionic": ["radio-group.ionic.scss"]
+            "md": ["radio-group.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["radio-group.ios.css"],
-            "md": ["radio-group.md.css"],
-            "ionic": ["radio-group.ionic.css"]
+            "md": ["radio-group.md.css"]
         };
     }
     static get properties() {
@@ -471,26 +485,6 @@ 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,9 +1,3 @@
-/**
- * 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
@@ -59,36 +53,6 @@
  *   }
  * }
  */
-: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
@@ -144,24 +108,36 @@
  *   }
  * }
  */
+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));
 }
 
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
+.ion-touched.ion-invalid .radio-group-top .error-text {
+  display: block;
+}
+
+.ion-touched.ion-invalid .radio-group-top .helper-text {
+  display: none;
+}
+
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -217,7 +193,7 @@
  *   }
  * }
  */
-:host(.in-list) .radio-group-top {
+ion-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,6 +3,8 @@
  */
 import { expect } from "@playwright/test";
 export class RadioFixture {
+    page;
+    radio;
     constructor(page) {
         this.page = page;
     }

package/dist/collection/components/range/range.ios.css

@@ -1,3 +1,36 @@
+/**
+ * Convert a font size to a dynamic font size.
+ * Fonts that participate in Dynamic Type should use
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
 /**
  * A heuristic that applies CSS to tablet
  * viewports.
@@ -34,11 +67,14 @@
    * @prop --pin-background: Background of the range pin (only available in MD mode)
    * @prop --pin-color: Color of the range pin (only available in MD mode)
    */
+  --knob-handle-size: calc(var(--knob-size) * 2);
   display: flex;
   position: relative;
   flex: 3;
   align-items: center;
+  font-family: var(--ion-font-family, inherit);
   user-select: none;
+  z-index: 2;
 }
 
 :host(.range-disabled) {
@@ -49,6 +85,10 @@
   flex: initial;
 }
 
+::slotted(ion-icon[slot]) {
+  font-size: 24px;
+}
+
 .range-slider {
   position: relative;
   flex: 1;
@@ -65,8 +105,8 @@
 
 .range-pin {
   position: absolute;
-  background: current-color(base);
-  color: current-color(contrast);
+  background: var(--ion-color-base);
+  color: var(--ion-color-contrast);
   text-align: center;
   box-sizing: border-box;
 }
@@ -215,6 +255,7 @@
    * only the label would show and users
    * would not be able to see the range.
    */
+  max-width: 200px;
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
@@ -243,121 +284,6 @@
   flex-direction: row;
 }
 
-/**
- * Label is on the right of the range in LTR and
- * on the left in RTL.
- */
-:host(.range-label-placement-end) .range-wrapper {
-  flex-direction: row-reverse;
-}
-
-/**
- * Label is on the left of the range in LTR and
- * on the right in RTL. Label also has a fixed width.
- */
-:host(.range-label-placement-fixed) .label-text-wrapper {
-  flex: 0 0 100px;
-  width: 100px;
-  min-width: 100px;
-  max-width: 200px;
-}
-
-/**
- * Label is on top of the range.
- */
-:host(.range-label-placement-stacked) .range-wrapper {
-  flex-direction: column;
-  align-items: stretch;
-}
-
-:host(.range-label-placement-stacked) .label-text-wrapper {
-  transform-origin: left top;
-}
-:host-context([dir=rtl]):host(.range-label-placement-stacked) .label-text-wrapper, :host-context([dir=rtl]).range-label-placement-stacked .label-text-wrapper {
-  transform-origin: right top;
-}
-
-@supports selector(:dir(rtl)) {
-  :host(.range-label-placement-stacked:dir(rtl)) .label-text-wrapper {
-    transform-origin: right top;
-  }
-}
-
-/**
- * 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
- * dynamic font sizes.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param unit (optional) - The unit to convert to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * a maximum font size.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * a minimum font size.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * maximum and minimum font sizes.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
- * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * A heuristic that applies CSS to tablet
- * viewports.
- *
- * Usage:
- * @include tablet-viewport() {
- *   :host {
- *     background-color: green;
- *   }
- * }
- */
-/**
- * A heuristic that applies CSS to mobile
- * viewports (i.e. phones, not tablets).
- *
- * Usage:
- * @include mobile-viewport() {
- *   :host {
- *     background-color: blue;
- *   }
- * }
- */
-:host {
-  --knob-handle-size: calc(var(--knob-size) * 2);
-  font-family: var(--ion-font-family, inherit);
-  z-index: 2;
-}
-
-::slotted(ion-icon[slot]) {
-  font-size: 24px;
-}
-
-::slotted([slot=label]) {
-  max-width: 200px;
-}
-
 :host(.range-label-placement-start) .label-text-wrapper {
   /**
    * The margin between the label and
@@ -372,12 +298,20 @@
   margin-bottom: 0;
 }
 
+/**
+ * Label is on the right of the range in LTR and
+ * on the left in RTL.
+ */
+:host(.range-label-placement-end) .range-wrapper {
+  flex-direction: row-reverse;
+}
+
+/**
+ * The margin between the label and
+ * the range should be on the start
+ * when the label sits at the end.
+ */
 :host(.range-label-placement-end) .label-text-wrapper {
-  /**
-   * The margin between the label and
-   * the range should be on the start
-   * when the label sits at the end.
-   */
   -webkit-margin-start: 16px;
   margin-inline-start: 16px;
   -webkit-margin-end: 0;
@@ -400,7 +334,27 @@
   margin-bottom: 0;
 }
 
+/**
+ * Label is on the left of the range in LTR and
+ * on the right in RTL. Label also has a fixed width.
+ */
+:host(.range-label-placement-fixed) .label-text-wrapper {
+  flex: 0 0 100px;
+  width: 100px;
+  min-width: 100px;
+  max-width: 200px;
+}
+
+/**
+ * Label is on top of the range.
+ */
+:host(.range-label-placement-stacked) .range-wrapper {
+  flex-direction: column;
+  align-items: stretch;
+}
+
 :host(.range-label-placement-stacked) .label-text-wrapper {
+  transform-origin: left top;
   transform: scale(0.75);
   /**
   * The margin between the label and
@@ -416,6 +370,15 @@
    */
   max-width: calc(100% / 0.75);
 }
+:host-context([dir=rtl]):host(.range-label-placement-stacked) .label-text-wrapper, :host-context([dir=rtl]).range-label-placement-stacked .label-text-wrapper {
+  transform-origin: right top;
+}
+
+@supports selector(:dir(rtl)) {
+  :host(.range-label-placement-stacked:dir(rtl)) .label-text-wrapper {
+    transform-origin: right top;
+  }
+}
 
 :host(.in-item.range-label-placement-stacked) .label-text-wrapper {
   margin-top: 10px;
@@ -426,12 +389,6 @@
   margin-bottom: 0px;
 }
 
-/**
- * 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