@ionic/core 8.4.4-dev.11741289071.1e8e1c3f → 8.4.4-dev.11741294920.1c3e822a

package/dist/collection/components/select/select.js

@@ -23,15 +23,10 @@ import { getIonMode } from "../../global/ionic-global";
  * @part icon - The select icon container.
  * @part container - The container for the selected text or placeholder.
  * @part label - The label text describing the select.
- * @part supporting-text - Supporting text displayed beneath the select.
- * @part helper-text - Supporting text displayed beneath the select when the select is valid.
- * @part error-text - Supporting text displayed beneath the select when the select is invalid and touched.
  */
 export class Select {
     constructor() {
         this.inputId = `ion-sel-${selectIds++}`;
-        this.helperTextId = `${this.inputId}-helper-text`;
-        this.errorTextId = `${this.inputId}-error-text`;
         this.inheritedAttributes = {};
         this.onClick = (ev) => {
             const target = ev.target;
@@ -82,8 +77,6 @@ export class Select {
         this.compareWith = undefined;
         this.disabled = false;
         this.fill = undefined;
-        this.errorText = undefined;
-        this.helperText = undefined;
         this.interface = 'alert';
         this.interfaceOptions = {};
         this.justify = undefined;
@@ -98,7 +91,6 @@ export class Select {
         this.expandedIcon = undefined;
         this.shape = undefined;
         this.value = undefined;
-        this.required = false;
     }
     styleChanged() {
         this.emitStyle();
@@ -663,44 +655,8 @@ export class Select {
         return renderedLabel;
     }
     renderListbox() {
-        const { disabled, inputId, isExpanded, required } = this;
-        return (h("button", { disabled: disabled, id: inputId, "aria-label": this.ariaLabel, "aria-haspopup": "dialog", "aria-expanded": `${isExpanded}`, "aria-describedby": this.getHintTextID(), "aria-invalid": this.getHintTextID() === this.errorTextId, "aria-required": `${required}`, onFocus: this.onFocus, onBlur: this.onBlur, ref: (focusEl) => (this.focusEl = focusEl) }));
-    }
-    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;
-    }
-    /**
-     * Renders the helper text or error text values
-     */
-    renderHintText() {
-        const { helperText, errorText, helperTextId, errorTextId } = this;
-        return [
-            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),
-        ];
-    }
-    /**
-     * Responsible for rendering helper text, and error text. This element
-     * should only be rendered if hint text is set.
-     */
-    renderBottomContent() {
-        const { helperText, errorText } = 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: "select-bottom" }, this.renderHintText());
+        const { disabled, inputId, isExpanded } = this;
+        return (h("button", { disabled: disabled, id: inputId, "aria-label": this.ariaLabel, "aria-haspopup": "dialog", "aria-expanded": `${isExpanded}`, onFocus: this.onFocus, onBlur: this.onBlur, ref: (focusEl) => (this.focusEl = focusEl) }));
     }
     render() {
         const { disabled, el, isExpanded, expandedIcon, labelPlacement, justify, placeholder, fill, shape, name, value } = this;
@@ -731,7 +687,7 @@ export class Select {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || isExpanded || hasStartEndSlots));
-        return (h(Host, { key: '6c0141f40087a1793516882641e4473a6a82a0b2', onClick: this.onClick, class: createColorClasses(this.color, {
+        return (h(Host, { key: 'b2dca9ae25d88e4d9fdb55003041a66be5668fcf', onClick: this.onClick, class: createColorClasses(this.color, {
                 [mode]: true,
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', el),
@@ -747,7 +703,7 @@ export class Select {
                 [`select-justify-${justify}`]: justifyEnabled,
                 [`select-shape-${shape}`]: shape !== undefined,
                 [`select-label-placement-${labelPlacement}`]: true,
-            }) }, h("label", { key: 'a0d70c7cfb6c784f200e9b0893ddcbd25b59b167', class: "select-wrapper", id: "select-label" }, this.renderLabelContainer(), h("div", { key: 'd398f85e1c3af2758cf0672ce8eab1ffa1e3e6a8', class: "select-wrapper-inner" }, h("slot", { key: 'b2ba9dbc8b944c04981b5f97975231a4b1c18768', name: "start" }), h("div", { key: '625c1029456701694f521a9b3e2199a8fd6c3331', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), h("slot", { key: '54bee045845d773e11f8952b9278c97082534488', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && h("div", { key: 'cf70509d4140259a41367333ca3815a427f9ad66', class: "select-highlight" })), this.renderBottomContent()));
+            }) }, h("label", { key: 'c22fe9aee8cd448223497ef143e89529fcef8af6', class: "select-wrapper", id: "select-label" }, this.renderLabelContainer(), h("div", { key: '601972df4579f4fa6a9c2c12865593e807decb72', class: "select-wrapper-inner" }, h("slot", { key: '5f7b1261862f74b978b26f026533e3fd1cc666ba', name: "start" }), h("div", { key: '39616da89f4b4b78432f6da85116a7de2ca589e7', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), h("slot", { key: '1d7b3601b73af7c05b3627cfc8e5147ea379bb03', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && h("div", { key: 'b0344f0ac15003e22fee66d3d7ed03a07da7e8b7', class: "select-highlight" }))));
     }
     static get is() { return "ion-select"; }
     static get encapsulation() { return "shadow"; }
@@ -864,40 +820,6 @@ export class Select {
                 "attribute": "fill",
                 "reflect": 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 select 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 select and displayed when no error is detected."
-                },
-                "attribute": "helper-text",
-                "reflect": false
-            },
             "interface": {
                 "type": "string",
                 "mutable": false,
@@ -1147,24 +1069,6 @@ export class Select {
                 },
                 "attribute": "value",
                 "reflect": false
-            },
-            "required": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "If true, screen readers will announce it as a required field. This property\nworks only for accessibility purposes, it will not prevent the form from\nsubmitting if the value is invalid."
-                },
-                "attribute": "required",
-                "reflect": false,
-                "defaultValue": "false"
             }
         };
     }

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

@@ -299,63 +299,6 @@ button {
   --highlight-color: var(--highlight-color-valid);
 }
 
-.select-bottom {
-  /**
-   * The bottom content should take on the start and end
-   * padding so it is always aligned with either the label
-   * or the start of the text select.
-   */
-  -webkit-padding-start: var(--padding-start);
-  padding-inline-start: var(--padding-start);
-  -webkit-padding-end: var(--padding-end);
-  padding-inline-end: var(--padding-end);
-  padding-top: 5px;
-  padding-bottom: 0;
-  display: flex;
-  justify-content: space-between;
-  border-top: var(--border-width) var(--border-style) var(--border-color);
-  font-size: 0.75rem;
-  white-space: normal;
-}
-
-/**
- * If the select has a validity state, the
- * border and label should reflect that as a color.
- * The invalid state should show if the select is
- * invalid and has already been touched.
- * The valid state should show if the select
- * is valid, has already been touched, and
- * is currently focused. Do not show the valid
- * highlight when the select is blurred.
- */
-:host(.has-focus.ion-valid),
-:host(.ion-touched.ion-invalid) {
-  --border-color: var(--highlight-color);
-}
-
-/**
- * Error text should only be shown when .ion-invalid is
- * present on the select. Otherwise the helper text should
- * be shown.
- */
-.select-bottom .error-text {
-  display: none;
-  color: var(--highlight-color-invalid);
-}
-
-.select-bottom .helper-text {
-  display: block;
-  color: var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));
-}
-
-:host(.ion-touched.ion-invalid) .select-bottom .error-text {
-  display: block;
-}
-
-:host(.ion-touched.ion-invalid) .select-bottom .helper-text {
-  display: none;
-}
-
 .label-text-wrapper {
   /**
    * This causes the label to take up
@@ -825,10 +768,6 @@ button {
   --border-color: var(--highlight-color);
 }
 
-/**
- * The bottom content should never have
- * a border with the solid style.
- */
 :host(.select-fill-solid) .select-bottom {
   border-top: none;
 }

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

@@ -373,7 +373,6 @@
   justify-content: space-between;
   border-top: var(--border-width) var(--border-style) var(--border-color);
   font-size: 0.75rem;
-  white-space: normal;
 }
 
 /**
@@ -397,7 +396,7 @@
 
 .textarea-bottom .helper-text {
   display: block;
-  color: var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));
+  color: var(--ion-color-step-550, var(--ion-text-color-step-450, #737373));
 }
 
 :host(.ion-touched.ion-invalid) .textarea-bottom .error-text {
@@ -416,7 +415,7 @@
    */
   -webkit-margin-start: auto;
   margin-inline-start: auto;
-  color: var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));
+  color: var(--ion-color-step-550, var(--ion-text-color-step-450, #737373));
   white-space: nowrap;
   padding-inline-start: 16px;
 }

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

@@ -373,7 +373,6 @@
   justify-content: space-between;
   border-top: var(--border-width) var(--border-style) var(--border-color);
   font-size: 0.75rem;
-  white-space: normal;
 }
 
 /**
@@ -397,7 +396,7 @@
 
 .textarea-bottom .helper-text {
   display: block;
-  color: var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));
+  color: var(--ion-color-step-550, var(--ion-text-color-step-450, #737373));
 }
 
 :host(.ion-touched.ion-invalid) .textarea-bottom .error-text {
@@ -416,7 +415,7 @@
    */
   -webkit-margin-start: auto;
   margin-inline-start: auto;
-  color: var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));
+  color: var(--ion-color-step-550, var(--ion-text-color-step-450, #737373));
   white-space: nowrap;
   padding-inline-start: 16px;
 }
@@ -929,10 +928,6 @@
   --border-color: var(--highlight-color);
 }
 
-/**
- * The bottom content should never have
- * a border with the solid style.
- */
 :host(.textarea-fill-solid) .textarea-bottom {
   border-top: none;
 }

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

@@ -71,7 +71,6 @@ export class Toggle {
         this.labelPlacement = 'start';
         this.justify = undefined;
         this.alignment = undefined;
-        this.required = false;
     }
     disabledChanged() {
         if (this.gesture) {
@@ -153,12 +152,12 @@ export class Toggle {
         return this.el.textContent !== '';
     }
     render() {
-        const { activated, color, checked, disabled, el, justify, labelPlacement, inputId, name, alignment, required } = this;
+        const { activated, color, checked, disabled, el, justify, labelPlacement, inputId, name, alignment } = 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: 'ed75573caa6e37011f1453dd7f723fb9bd8a3656', onClick: this.onClick, class: createColorClasses(color, {
+        return (h(Host, { key: 'f52195ec3bc14c024647cb41319c32a4cd330e19', onClick: this.onClick, class: createColorClasses(color, {
                 [mode]: true,
                 'in-item': hostContext('ion-item', el),
                 'toggle-activated': activated,
@@ -168,10 +167,10 @@ export class Toggle {
                 [`toggle-alignment-${alignment}`]: alignment !== undefined,
                 [`toggle-label-placement-${labelPlacement}`]: true,
                 [`toggle-${rtl}`]: true,
-            }) }, 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: {
+            }) }, h("label", { key: 'f8b3a215ad85b2cee611ad63449b584e1640f27f', class: "toggle-wrapper" }, h("input", Object.assign({ key: 'f387b1ea840737a9737917e516834c887be99c09', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl) }, this.inheritedAttributes)), h("div", { key: '936af880db59fe377cd2de9101eb28a1c4fb8914', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !this.hasLabel,
-            }, part: "label" }, h("slot", { key: '9495a4a39889822ee68e0d89dc5a2f863d1feb3c' })), h("div", { key: '55f1eb08c4b705e94fbcf02220bbe1d292f06155', class: "native-wrapper" }, this.renderToggleControl()))));
+            }, part: "label" }, h("slot", { key: '80a6672e2e792c15011a9496dcd75363cdba31c6' })), h("div", { key: '2b2b318b38ab27b194c0dab4cecd77d9d780f2ca', class: "native-wrapper" }, this.renderToggleControl()))));
     }
     static get is() { return "ion-toggle"; }
     static get encapsulation() { return "shadow"; }
@@ -353,24 +352,6 @@ export class Toggle {
                 },
                 "attribute": "alignment",
                 "reflect": false
-            },
-            "required": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "If true, screen readers will announce it as a required field. This property\nworks only for accessibility purposes, it will not prevent the form from\nsubmitting if the value is invalid."
-                },
-                "attribute": "required",
-                "reflect": false,
-                "defaultValue": "false"
             }
         };
     }

package/dist/collection/components/toolbar/toolbar.js

@@ -12,10 +12,6 @@ import { getIonMode } from "../../global/ionic-global";
  * @slot secondary - Content is placed to the left of the toolbar text in `ios` mode, and directly to the right in `md` mode.
  * @slot primary - Content is placed to the right of the toolbar text in `ios` mode, and to the far right in `md` mode.
  * @slot end - Content is placed to the right of the toolbar text in LTR, and to the left in RTL.
- *
- * @part background - The background of the toolbar, covering the entire area behind the toolbar content.
- * @part container - The container that wraps all toolbar content, including the default slot and named slot content.
- * @part content - The container for the default slot, wrapping content provided without a named slot.
  */
 export class Toolbar {
     constructor() {
@@ -66,10 +62,10 @@ export class Toolbar {
         this.childrenStyles.forEach((value) => {
             Object.assign(childStyles, value);
         });
-        return (h(Host, { key: '4fdc9ae82a93237cc28ceb95b0ebd8069b62839d', class: Object.assign(Object.assign({}, childStyles), createColorClasses(this.color, {
+        return (h(Host, { key: '462538a5ecd01baf3cde116c9f029aeda26c81be', class: Object.assign(Object.assign({}, childStyles), createColorClasses(this.color, {
                 [mode]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
-            })) }, h("div", { key: '443a216362bbbf1c149ed12140d52b0f0ea2d664', class: "toolbar-background", part: "background" }), h("div", { key: '1df87f4027d605e42757a13d4828df45b90a4fdc', class: "toolbar-container", part: "container" }, h("slot", { key: 'f66f34972be8e3f4915b9c6f5808600dbaedb1ea', name: "start" }), h("slot", { key: '14f38b0975e956f404c4eb3ee56f2055c6615276', name: "secondary" }), h("div", { key: '75ba5953a25c7544793484d2b245792cb0a5af75', class: "toolbar-content", part: "content" }, h("slot", { key: '149dfa58ff7106f318fecb4134e7c69edf8bc231' })), h("slot", { key: '807ab9ad21d7f1d9d427a4086460bcb9e5e8c019', name: "primary" }), h("slot", { key: 'bd2f9da95d2fa8e74dc6e0666587ceecbba99d9f', name: "end" }))));
+            })) }, h("div", { key: 'c0b4415d3b2472de643a9be7cb3b13b3b628621b', class: "toolbar-background" }), h("div", { key: '0ccb8a2dbeaa28d8f9bed87629c0c097446690c2', class: "toolbar-container" }, h("slot", { key: '3e726dac359e923df21d80301651f16063a3de20', name: "start" }), h("slot", { key: 'cd799330b56a7f8833bc61bb2807aafb21846f71', name: "secondary" }), h("div", { key: '395282e6ac8c53576922dcdb5f08c25d34638c86', class: "toolbar-content" }, h("slot", { key: 'a437c60e4ba5aae65e55169ae82a6f379868ec1d' })), h("slot", { key: '711af9b9d321a7b31ede924c9bdcad767aa9a1ca', name: "primary" }), h("slot", { key: 'ecc02edeaf80a837890bcb08d5096df1e22a0b9a', name: "end" }))));
     }
     static get is() { return "ion-toolbar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/utils/floating-point/index.js

@@ -1,7 +1,10 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
+import { isSafeNumber } from "../helpers";
 export function getDecimalPlaces(n) {
+    if (!isSafeNumber(n))
+        return 0;
     if (n % 1 === 0)
         return 0;
     return n.toString().split('.')[1].length;
@@ -39,6 +42,8 @@ export function getDecimalPlaces(n) {
  * be used as a reference for the desired specificity.
  */
 export function roundToMaxDecimalPlaces(n, ...references) {
+    if (!isSafeNumber(n))
+        return 0;
     const maxPlaces = Math.max(...references.map((r) => getDecimalPlaces(r)));
     return Number(n.toFixed(maxPlaces));
 }

package/dist/collection/utils/helpers.js

@@ -374,3 +374,9 @@ export const getNextSiblingOfType = (element) => {
     }
     return null;
 };
+/**
+ * Checks input for usable number. Not NaN and not Infinite.
+ */
+export const isSafeNumber = (input) => {
+    return typeof input === 'number' && !isNaN(input) && isFinite(input);
+};

package/dist/collection/utils/logging/index.js

@@ -1,7 +1,6 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { config } from "../../global/config";
 /**
  * Logs a warning to the console with an Ionic prefix
  * to indicate the library that is warning the developer.
@@ -9,12 +8,9 @@ import { config } from "../../global/config";
  * @param message - The string message to be logged to the console.
  */
 export const printIonWarning = (message, ...params) => {
-    const logLevel = config.get('logLevel', "WARN" /* LogLevel.WARN */);
-    if (["WARN" /* LogLevel.WARN */].includes(logLevel)) {
-        return console.warn(`[Ionic Warning]: ${message}`, ...params);
-    }
+    return console.warn(`[Ionic Warning]: ${message}`, ...params);
 };
-/**
+/*
  * Logs an error to the console with an Ionic prefix
  * to indicate the library that is warning the developer.
  *
@@ -22,10 +18,7 @@ export const printIonWarning = (message, ...params) => {
  * @param params - Additional arguments to supply to the console.error.
  */
 export const printIonError = (message, ...params) => {
-    const logLevel = config.get('logLevel', "ERROR" /* LogLevel.ERROR */);
-    if (["ERROR" /* LogLevel.ERROR */, "WARN" /* LogLevel.WARN */].includes(logLevel)) {
-        return console.error(`[Ionic Error]: ${message}`, ...params);
-    }
+    return console.error(`[Ionic Error]: ${message}`, ...params);
 };
 /**
  * Prints an error informing developers that an implementation requires an element to be used

package/dist/collection/utils/platform.js

@@ -67,7 +67,8 @@ const isHybrid = (win) => isCordova(win) || isCapacitorNative(win);
 const isCordova = (win) => !!(win['cordova'] || win['phonegap'] || win['PhoneGap']);
 const isCapacitorNative = (win) => {
     const capacitor = win['Capacitor'];
-    return !!(capacitor === null || capacitor === void 0 ? void 0 : capacitor.isNative);
+    // TODO(ROU-11693): Remove when we no longer support Capacitor 2, which does not have isNativePlatform
+    return !!((capacitor === null || capacitor === void 0 ? void 0 : capacitor.isNative) || ((capacitor === null || capacitor === void 0 ? void 0 : capacitor.isNativePlatform) && !!capacitor.isNativePlatform()));
 };
 const isElectron = (win) => testUserAgent(win, /electron/i);
 const isPWA = (win) => { var _a; return !!(((_a = win.matchMedia) === null || _a === void 0 ? void 0 : _a.call(win, '(display-mode: standalone)').matches) || win.navigator.standalone); };

package/dist/collection/utils/test/platform.utils.js

@@ -28,7 +28,7 @@ export const PlatformConfiguration = {
     },
     Capacitor: {
         Capacitor: {
-            isNative: true,
+            isNativePlatform: () => true,
         },
     },
     PWA: {