@ionic/core 8.4.4-dev.11741298262.12200f27 → 8.4.4-dev.11741357957.1558bd4c

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

@@ -175,32 +175,39 @@ input {
   align-items: center;
 }
 
-:host(.radio-justify-space-between) .radio-wrapper {
+.radio-bottom {
+  padding-top: 4px;
+  display: flex;
   justify-content: space-between;
+  font-size: 0.75rem;
+  white-space: normal;
 }
 
-:host(.radio-justify-start) .radio-wrapper {
-  justify-content: start;
+:host(.radio-label-placement-stacked) .radio-bottom {
+  font-size: 1rem;
 }
 
-:host(.radio-justify-end) .radio-wrapper {
-  justify-content: end;
+/**
+ * Error text should only be shown when .ion-invalid is
+ * present on the radio. Otherwise the helper text should
+ * be shown.
+ */
+.radio-bottom .error-text {
+  display: none;
+  color: var(--ion-color-danger, #c5000f);
 }
 
-:host(.radio-alignment-start) .radio-wrapper {
-  align-items: start;
+.radio-bottom .helper-text {
+  display: block;
+  color: var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));
 }
 
-:host(.radio-alignment-center) .radio-wrapper {
-  align-items: center;
+:host(.ion-touched.ion-invalid) .radio-bottom .error-text {
+  display: block;
 }
 
-:host(.radio-justify-space-between),
-:host(.radio-justify-start),
-:host(.radio-justify-end),
-:host(.radio-alignment-start),
-:host(.radio-alignment-center) {
-  display: block;
+:host(.ion-touched.ion-invalid) .radio-bottom .helper-text {
+  display: none;
 }
 
 /**
@@ -229,6 +236,7 @@ input {
  */
 :host(.radio-label-placement-end) .radio-wrapper {
   flex-direction: row-reverse;
+  justify-content: start;
 }
 
 /**
@@ -270,6 +278,7 @@ input {
  */
 :host(.radio-label-placement-stacked) .radio-wrapper {
   flex-direction: column;
+  text-align: center;
 }
 
 :host(.radio-label-placement-stacked) .label-text-wrapper {
@@ -315,6 +324,34 @@ input {
   }
 }
 
+:host(.radio-justify-space-between) .radio-wrapper {
+  justify-content: space-between;
+}
+
+:host(.radio-justify-start) .radio-wrapper {
+  justify-content: start;
+}
+
+:host(.radio-justify-end) .radio-wrapper {
+  justify-content: end;
+}
+
+:host(.radio-alignment-start) .radio-wrapper {
+  align-items: start;
+}
+
+:host(.radio-alignment-center) .radio-wrapper {
+  align-items: center;
+}
+
+:host(.radio-justify-space-between),
+:host(.radio-justify-start),
+:host(.radio-justify-end),
+:host(.radio-alignment-start),
+:host(.radio-alignment-center) {
+  display: block;
+}
+
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use

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

@@ -14,10 +14,15 @@ import { getIonMode } from "../../global/ionic-global";
  * @part container - The container for the radio mark.
  * @part label - The label text describing the radio.
  * @part mark - The checkmark or dot used to indicate the checked state.
+ * @part supporting-text - Supporting text displayed beneath the radio label.
+ * @part helper-text - Supporting text displayed beneath the radio label when the radio is valid.
+ * @part error-text - Supporting text displayed beneath the radio label when the radio is invalid and touched.
  */
 export class Radio {
     constructor() {
         this.inputId = `ion-rb-${radioButtonIds++}`;
+        this.helperTextId = `${this.inputId}-helper-text`;
+        this.errorTextId = `${this.inputId}-error-text`;
         this.radioGroup = null;
         this.updateState = () => {
             if (this.radioGroup) {
@@ -57,6 +62,8 @@ export class Radio {
         this.color = undefined;
         this.name = this.inputId;
         this.disabled = false;
+        this.errorText = undefined;
+        this.helperText = undefined;
         this.value = undefined;
         this.labelPlacement = 'start';
         this.justify = undefined;
@@ -116,11 +123,37 @@ export class Radio {
     renderRadioControl() {
         return (h("div", { class: "radio-icon", part: "container" }, h("div", { class: "radio-inner", part: "mark" }), h("div", { class: "radio-ripple" })));
     }
+    getHintTextID() {
+        const { el, helperText, errorText, helperTextId, errorTextId } = this;
+        if (el.classList.contains('ion-touched') && el.classList.contains('ion-invalid') && errorText) {
+            return errorTextId;
+        }
+        if (helperText) {
+            return helperTextId;
+        }
+        return undefined;
+    }
+    /**
+     * Responsible for rendering helper text and error text.
+     * This element should only be rendered if hint text is set.
+     */
+    renderHintText() {
+        const { helperText, errorText, helperTextId, errorTextId } = this;
+        /**
+         * undefined and empty string values should
+         * be treated as not having helper/error text.
+         */
+        const hasHintText = !!helperText || !!errorText;
+        if (!hasHintText) {
+            return;
+        }
+        return (h("div", { class: "radio-bottom" }, h("div", { id: helperTextId, class: "helper-text", part: "supporting-text helper-text" }, helperText), h("div", { id: errorTextId, class: "error-text", part: "supporting-text error-text" }, errorText)));
+    }
     render() {
         const { checked, disabled, color, el, justify, labelPlacement, hasLabel, buttonTabindex, alignment } = this;
         const mode = getIonMode(this);
         const inItem = hostContext('ion-item', el);
-        return (h(Host, { key: '5a0adab55ad009305de4856fa1b9f93f2279a734', onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses(color, {
+        return (h(Host, { key: '4f01024a74c1846438372c40519df1044f5b12b9', onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses(color, {
                 [mode]: true,
                 'in-item': inItem,
                 'radio-checked': checked,
@@ -131,10 +164,10 @@ export class Radio {
                 // Focus and active styling should not apply when the radio is in an item
                 'ion-activatable': !inItem,
                 'ion-focusable': !inItem,
-            }), role: "radio", "aria-checked": checked ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, tabindex: buttonTabindex }, h("label", { key: 'f5673a798e6d87868339f046445f707e1d93b7b6', class: "radio-wrapper" }, h("div", { key: 'e9190c06f75a171cab63e3f74ccf771c3ed87005', class: {
+            }), role: "radio", "aria-checked": checked ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, "aria-describedby": this.getHintTextID(), "aria-invalid": this.getHintTextID() === this.errorTextId, tabindex: buttonTabindex }, h("label", { key: '59dc0343534e626692f3b71b32204c1b2b25d40a', class: "radio-wrapper" }, h("div", { key: '26d7d3faf1b02bb138fb2c46f83e824962b6b92e', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !hasLabel,
-            }, part: "label" }, h("slot", { key: '6cedf4e7b3bd03e4a635727dd7b6094bab64af64' })), h("div", { key: '26dd48d9d2848b7f100b732abdc4a3171adde483', class: "native-wrapper" }, this.renderRadioControl()))));
+            }, part: "label" }, h("slot", { key: '9c3d8bb0c5cd3ce94d1e661d89587cf67c522bc0' }), this.renderHintText()), h("div", { key: '3183f79e2977ee001e69c23f73073555744281d8', class: "native-wrapper" }, this.renderRadioControl()))));
     }
     static get is() { return "ion-radio"; }
     static get encapsulation() { return "shadow"; }
@@ -211,6 +244,40 @@ export class Radio {
                 "reflect": false,
                 "defaultValue": "false"
             },
+            "errorText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Text that is placed under the radio label and displayed when an error is detected."
+                },
+                "attribute": "error-text",
+                "reflect": false
+            },
+            "helperText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Text that is placed under the radio label and displayed when no error is detected."
+                },
+                "attribute": "helper-text",
+                "reflect": false
+            },
             "value": {
                 "type": "any",
                 "mutable": false,

package/dist/collection/components/radio/radio.md.css

@@ -175,32 +175,39 @@ input {
   align-items: center;
 }
 
-:host(.radio-justify-space-between) .radio-wrapper {
+.radio-bottom {
+  padding-top: 4px;
+  display: flex;
   justify-content: space-between;
+  font-size: 0.75rem;
+  white-space: normal;
 }
 
-:host(.radio-justify-start) .radio-wrapper {
-  justify-content: start;
+:host(.radio-label-placement-stacked) .radio-bottom {
+  font-size: 1rem;
 }
 
-:host(.radio-justify-end) .radio-wrapper {
-  justify-content: end;
+/**
+ * Error text should only be shown when .ion-invalid is
+ * present on the radio. Otherwise the helper text should
+ * be shown.
+ */
+.radio-bottom .error-text {
+  display: none;
+  color: var(--ion-color-danger, #c5000f);
 }
 
-:host(.radio-alignment-start) .radio-wrapper {
-  align-items: start;
+.radio-bottom .helper-text {
+  display: block;
+  color: var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));
 }
 
-:host(.radio-alignment-center) .radio-wrapper {
-  align-items: center;
+:host(.ion-touched.ion-invalid) .radio-bottom .error-text {
+  display: block;
 }
 
-:host(.radio-justify-space-between),
-:host(.radio-justify-start),
-:host(.radio-justify-end),
-:host(.radio-alignment-start),
-:host(.radio-alignment-center) {
-  display: block;
+:host(.ion-touched.ion-invalid) .radio-bottom .helper-text {
+  display: none;
 }
 
 /**
@@ -229,6 +236,7 @@ input {
  */
 :host(.radio-label-placement-end) .radio-wrapper {
   flex-direction: row-reverse;
+  justify-content: start;
 }
 
 /**
@@ -270,6 +278,7 @@ input {
  */
 :host(.radio-label-placement-stacked) .radio-wrapper {
   flex-direction: column;
+  text-align: center;
 }
 
 :host(.radio-label-placement-stacked) .label-text-wrapper {
@@ -315,6 +324,34 @@ input {
   }
 }
 
+:host(.radio-justify-space-between) .radio-wrapper {
+  justify-content: space-between;
+}
+
+:host(.radio-justify-start) .radio-wrapper {
+  justify-content: start;
+}
+
+:host(.radio-justify-end) .radio-wrapper {
+  justify-content: end;
+}
+
+:host(.radio-alignment-start) .radio-wrapper {
+  align-items: start;
+}
+
+:host(.radio-alignment-center) .radio-wrapper {
+  align-items: center;
+}
+
+:host(.radio-justify-space-between),
+:host(.radio-justify-start),
+:host(.radio-justify-end),
+:host(.radio-alignment-start),
+:host(.radio-alignment-center) {
+  display: block;
+}
+
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use

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

@@ -171,39 +171,32 @@ input {
   align-items: center;
 }
 
-.toggle-bottom {
-  padding-top: 4px;
-  display: flex;
+:host(.toggle-justify-space-between) .toggle-wrapper {
   justify-content: space-between;
-  font-size: 0.75rem;
-  white-space: normal;
 }
 
-:host(.toggle-label-placement-stacked) .toggle-bottom {
-  font-size: 1rem;
+:host(.toggle-justify-start) .toggle-wrapper {
+  justify-content: start;
 }
 
-/**
- * Error text should only be shown when .ion-invalid is
- * present on the checkbox. Otherwise the helper text should
- * be shown.
- */
-.toggle-bottom .error-text {
-  display: none;
-  color: var(--ion-color-danger, #c5000f);
+:host(.toggle-justify-end) .toggle-wrapper {
+  justify-content: end;
 }
 
-.toggle-bottom .helper-text {
-  display: block;
-  color: var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));
+:host(.toggle-alignment-start) .toggle-wrapper {
+  align-items: start;
 }
 
-:host(.ion-touched.ion-invalid) .toggle-bottom .error-text {
-  display: block;
+:host(.toggle-alignment-center) .toggle-wrapper {
+  align-items: center;
 }
 
-:host(.ion-touched.ion-invalid) .toggle-bottom .helper-text {
-  display: none;
+:host(.toggle-justify-space-between),
+:host(.toggle-justify-start),
+:host(.toggle-justify-end),
+:host(.toggle-alignment-start),
+:host(.toggle-alignment-center) {
+  display: block;
 }
 
 /**
@@ -232,7 +225,6 @@ input {
  */
 :host(.toggle-label-placement-end) .toggle-wrapper {
   flex-direction: row-reverse;
-  justify-content: start;
 }
 
 /**
@@ -275,7 +267,6 @@ input {
  */
 :host(.toggle-label-placement-stacked) .toggle-wrapper {
   flex-direction: column;
-  text-align: center;
 }
 
 :host(.toggle-label-placement-stacked) .label-text-wrapper {
@@ -321,34 +312,6 @@ input {
   }
 }
 
-:host(.toggle-justify-space-between) .toggle-wrapper {
-  justify-content: space-between;
-}
-
-:host(.toggle-justify-start) .toggle-wrapper {
-  justify-content: start;
-}
-
-:host(.toggle-justify-end) .toggle-wrapper {
-  justify-content: end;
-}
-
-:host(.toggle-alignment-start) .toggle-wrapper {
-  align-items: start;
-}
-
-:host(.toggle-alignment-center) .toggle-wrapper {
-  align-items: center;
-}
-
-:host(.toggle-justify-space-between),
-:host(.toggle-justify-start),
-:host(.toggle-justify-end),
-:host(.toggle-alignment-start),
-:host(.toggle-alignment-center) {
-  display: block;
-}
-
 .toggle-icon-wrapper {
   display: flex;
   position: relative;

package/dist/collection/components/toggle/toggle.js

@@ -17,15 +17,10 @@ import { getIonMode } from "../../global/ionic-global";
  * @part track - The background track of the toggle.
  * @part handle - The toggle handle, or knob, used to change the checked state.
  * @part label - The label text describing the toggle.
- * @part supporting-text - Supporting text displayed beneath the toggle label.
- * @part helper-text - Supporting text displayed beneath the toggle label when the toggle is valid.
- * @part error-text - Supporting text displayed beneath the toggle label when the toggle is invalid and touched.
  */
 export class Toggle {
     constructor() {
         this.inputId = `ion-tg-${toggleIds++}`;
-        this.helperTextId = `${this.inputId}-helper-text`;
-        this.errorTextId = `${this.inputId}-error-text`;
         this.lastDrag = 0;
         this.inheritedAttributes = {};
         this.didLoad = false;
@@ -71,8 +66,6 @@ export class Toggle {
         this.name = this.inputId;
         this.checked = false;
         this.disabled = false;
-        this.errorText = undefined;
-        this.helperText = undefined;
         this.value = 'on';
         this.enableOnOffLabels = config.get('toggleOnOffLabels');
         this.labelPlacement = 'start';
@@ -159,39 +152,13 @@ export class Toggle {
     get hasLabel() {
         return this.el.textContent !== '';
     }
-    getHintTextID() {
-        const { el, helperText, errorText, helperTextId, errorTextId } = this;
-        if (el.classList.contains('ion-touched') && el.classList.contains('ion-invalid') && errorText) {
-            return errorTextId;
-        }
-        if (helperText) {
-            return helperTextId;
-        }
-        return undefined;
-    }
-    /**
-     * Responsible for rendering helper text and error text.
-     * This element should only be rendered if hint text is set.
-     */
-    renderHintText() {
-        const { helperText, errorText, helperTextId, errorTextId } = this;
-        /**
-         * undefined and empty string values should
-         * be treated as not having helper/error text.
-         */
-        const hasHintText = !!helperText || !!errorText;
-        if (!hasHintText) {
-            return;
-        }
-        return (h("div", { class: "toggle-bottom" }, h("div", { id: helperTextId, class: "helper-text", part: "supporting-text helper-text" }, helperText), h("div", { id: errorTextId, class: "error-text", part: "supporting-text error-text" }, errorText)));
-    }
     render() {
         const { activated, color, checked, disabled, el, justify, labelPlacement, inputId, name, alignment, required } = this;
         const mode = getIonMode(this);
         const value = this.getValue();
         const rtl = isRTL(el) ? 'rtl' : 'ltr';
         renderHiddenInput(true, el, name, checked ? value : '', disabled);
-        return (h(Host, { key: '6a03757dc962cda1c8f986e84d8545875de8e5fa', "aria-describedby": this.getHintTextID(), "aria-invalid": this.getHintTextID() === this.errorTextId, onClick: this.onClick, class: createColorClasses(color, {
+        return (h(Host, { key: 'ed75573caa6e37011f1453dd7f723fb9bd8a3656', onClick: this.onClick, class: createColorClasses(color, {
                 [mode]: true,
                 'in-item': hostContext('ion-item', el),
                 'toggle-activated': activated,
@@ -201,10 +168,10 @@ export class Toggle {
                 [`toggle-alignment-${alignment}`]: alignment !== undefined,
                 [`toggle-label-placement-${labelPlacement}`]: true,
                 [`toggle-${rtl}`]: true,
-            }) }, h("label", { key: '842e00a34befece9ea84a9e28dd62d49104de681', class: "toggle-wrapper" }, h("input", Object.assign({ key: 'eb889c180b3f6efab26f31669aa6adc23d866eb1', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl), required: required }, this.inheritedAttributes)), h("div", { key: 'fe57b4a97a0ddabf99995f1def5cd432b7ea591d', class: {
+            }) }, h("label", { key: '484860e2a33f4d123904edb96159f0e1972d3add', class: "toggle-wrapper" }, h("input", Object.assign({ key: '360b53080aacfd99a9ff60ffb5219816bd4163ee', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl), required: required }, this.inheritedAttributes)), h("div", { key: 'f7239fa668fe11257239ea30cf0198e4f3274f6b', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !this.hasLabel,
-            }, part: "label" }, h("slot", { key: '4ae52733af284130dfb2e2c3b476e0516e0be147' }), this.renderHintText()), h("div", { key: 'ffee5416e2ab4b8d286d2790490255bb45346ce0', class: "native-wrapper" }, this.renderToggleControl()))));
+            }, part: "label" }, h("slot", { key: '9495a4a39889822ee68e0d89dc5a2f863d1feb3c' })), h("div", { key: '55f1eb08c4b705e94fbcf02220bbe1d292f06155', class: "native-wrapper" }, this.renderToggleControl()))));
     }
     static get is() { return "ion-toggle"; }
     static get encapsulation() { return "shadow"; }
@@ -299,40 +266,6 @@ export class Toggle {
                 "reflect": false,
                 "defaultValue": "false"
             },
-            "errorText": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Text that is placed under the toggle label and displayed when an error is detected."
-                },
-                "attribute": "error-text",
-                "reflect": false
-            },
-            "helperText": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Text that is placed under the toggle label and displayed when no error is detected."
-                },
-                "attribute": "helper-text",
-                "reflect": false
-            },
             "value": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/components/toggle/toggle.md.css

@@ -171,39 +171,32 @@ input {
   align-items: center;
 }
 
-.toggle-bottom {
-  padding-top: 4px;
-  display: flex;
+:host(.toggle-justify-space-between) .toggle-wrapper {
   justify-content: space-between;
-  font-size: 0.75rem;
-  white-space: normal;
 }
 
-:host(.toggle-label-placement-stacked) .toggle-bottom {
-  font-size: 1rem;
+:host(.toggle-justify-start) .toggle-wrapper {
+  justify-content: start;
 }
 
-/**
- * Error text should only be shown when .ion-invalid is
- * present on the checkbox. Otherwise the helper text should
- * be shown.
- */
-.toggle-bottom .error-text {
-  display: none;
-  color: var(--ion-color-danger, #c5000f);
+:host(.toggle-justify-end) .toggle-wrapper {
+  justify-content: end;
 }
 
-.toggle-bottom .helper-text {
-  display: block;
-  color: var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));
+:host(.toggle-alignment-start) .toggle-wrapper {
+  align-items: start;
 }
 
-:host(.ion-touched.ion-invalid) .toggle-bottom .error-text {
-  display: block;
+:host(.toggle-alignment-center) .toggle-wrapper {
+  align-items: center;
 }
 
-:host(.ion-touched.ion-invalid) .toggle-bottom .helper-text {
-  display: none;
+:host(.toggle-justify-space-between),
+:host(.toggle-justify-start),
+:host(.toggle-justify-end),
+:host(.toggle-alignment-start),
+:host(.toggle-alignment-center) {
+  display: block;
 }
 
 /**
@@ -232,7 +225,6 @@ input {
  */
 :host(.toggle-label-placement-end) .toggle-wrapper {
   flex-direction: row-reverse;
-  justify-content: start;
 }
 
 /**
@@ -275,7 +267,6 @@ input {
  */
 :host(.toggle-label-placement-stacked) .toggle-wrapper {
   flex-direction: column;
-  text-align: center;
 }
 
 :host(.toggle-label-placement-stacked) .label-text-wrapper {
@@ -321,34 +312,6 @@ input {
   }
 }
 
-:host(.toggle-justify-space-between) .toggle-wrapper {
-  justify-content: space-between;
-}
-
-:host(.toggle-justify-start) .toggle-wrapper {
-  justify-content: start;
-}
-
-:host(.toggle-justify-end) .toggle-wrapper {
-  justify-content: end;
-}
-
-:host(.toggle-alignment-start) .toggle-wrapper {
-  align-items: start;
-}
-
-:host(.toggle-alignment-center) .toggle-wrapper {
-  align-items: center;
-}
-
-:host(.toggle-justify-space-between),
-:host(.toggle-justify-start),
-:host(.toggle-justify-end),
-:host(.toggle-alignment-start),
-:host(.toggle-alignment-center) {
-  display: block;
-}
-
 .toggle-icon-wrapper {
   display: flex;
   position: relative;