@ionic/core 8.4.4-dev.11741206641.18dd4e91 → 8.4.4-dev.11741289071.1e8e1c3f

package/dist/collection/components/segment-button/segment-button.js

@@ -2,7 +2,7 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { Host, forceUpdate, h } from "@stencil/core";
-import { addEventListener, removeEventListener, inheritAttributes } from "../../utils/helpers";
+import { addEventListener, removeEventListener, inheritAttributes, getNextSiblingOfType } from "../../utils/helpers";
 import { hostContext } from "../../utils/theme";
 import { getIonMode } from "../../global/ionic-global";
 let ids = 0;
@@ -39,7 +39,35 @@ export class SegmentButton {
     valueChanged() {
         this.updateState();
     }
-    connectedCallback() {
+    waitForSegmentContent(ionSegment, contentId) {
+        return new Promise((resolve, reject) => {
+            let timeoutId = undefined;
+            let animationFrameId;
+            const check = () => {
+                if (!ionSegment) {
+                    reject(new Error(`Segment not found when looking for Segment Content`));
+                    return;
+                }
+                const segmentView = getNextSiblingOfType(ionSegment); // Skip the text nodes
+                const segmentContent = segmentView === null || segmentView === void 0 ? void 0 : segmentView.querySelector(`ion-segment-content[id="${contentId}"]`);
+                if (segmentContent && timeoutId) {
+                    clearTimeout(timeoutId); // Clear the timeout if the segmentContent is found
+                    cancelAnimationFrame(animationFrameId);
+                    resolve(segmentContent);
+                }
+                else {
+                    animationFrameId = requestAnimationFrame(check); // Keep checking on the next animation frame
+                }
+            };
+            check();
+            // Set a timeout to reject the promise
+            timeoutId = setTimeout(() => {
+                cancelAnimationFrame(animationFrameId);
+                reject(new Error(`Unable to find Segment Content with id="${contentId} within 1000 ms`));
+            }, 1000);
+        });
+    }
+    async connectedCallback() {
         const segmentEl = (this.segmentEl = this.el.closest('ion-segment'));
         if (segmentEl) {
             this.updateState();
@@ -49,11 +77,14 @@ export class SegmentButton {
         // Return if there is no contentId defined
         if (!this.contentId)
             return;
-        // Attempt to find the Segment Content by its contentId
-        const segmentContent = document.getElementById(this.contentId);
-        // If no associated Segment Content exists, log an error and return
-        if (!segmentContent) {
-            console.error(`Segment Button: Unable to find Segment Content with id="${this.contentId}".`);
+        let segmentContent;
+        try {
+            // Attempt to find the Segment Content by its contentId
+            segmentContent = await this.waitForSegmentContent(segmentEl, this.contentId);
+        }
+        catch (error) {
+            // If no associated Segment Content exists, log an error and return
+            console.error('Segment Button: ', error.message);
             return;
         }
         // Ensure the found element is a valid ION-SEGMENT-CONTENT
@@ -99,7 +130,7 @@ export class SegmentButton {
         const { checked, type, disabled, hasIcon, hasLabel, layout, segmentEl } = this;
         const mode = getIonMode(this);
         const hasSegmentColor = () => (segmentEl === null || segmentEl === void 0 ? void 0 : segmentEl.color) !== undefined;
-        return (h(Host, { key: 'd50a5d5e2f6206e8523598f258d8217d2903f69b', class: {
+        return (h(Host, { key: 'f9da656c8eccb80e4ef30e3fa977f2dbbefbc988', class: {
                 [mode]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
@@ -115,7 +146,7 @@ export class SegmentButton {
                 'ion-activatable': true,
                 'ion-activatable-instant': true,
                 'ion-focusable': true,
-            } }, h("button", Object.assign({ key: 'b4f6f145286ba8ab79669e11035b906daa85ae7e', "aria-selected": checked ? 'true' : 'false', role: "tab", ref: (el) => (this.nativeEl = el), type: type, class: "button-native", part: "native", disabled: disabled }, this.inheritedAttributes), h("span", { key: '67965996c9ffe70553875e00d3da0ae5b2b1d814', class: "button-inner" }, h("slot", { key: '5087988fe45a8fdf388ec44c395d0b745b207806' })), mode === 'md' && h("ion-ripple-effect", { key: 'b24858de0750bbc769b3183fac0077dfe817ba27' })), h("div", { key: '97b4359432acd1c9da0816360cd1df9472e183f7', part: "indicator", class: "segment-button-indicator segment-button-indicator-animated" }, h("div", { key: '0561738ea15b0986f4ed3d8276d5e6f2d13f7e51', part: "indicator-background", class: "segment-button-indicator-background" }))));
+            } }, h("button", Object.assign({ key: '00dbcdbd81cd74abdd39803f6840a6e477cc7b0c', "aria-selected": checked ? 'true' : 'false', role: "tab", ref: (el) => (this.nativeEl = el), type: type, class: "button-native", part: "native", disabled: disabled }, this.inheritedAttributes), h("span", { key: '5200c082a9c4788010c4fc33fe75e2b2ad28364a', class: "button-inner" }, h("slot", { key: 'cf3fce2b5d22436b84cd4367a5885df7d6a2715f' })), mode === 'md' && h("ion-ripple-effect", { key: 'f1a2816465f4c2c06644be07315bff2da77e2342' })), h("div", { key: 'aaf31c0ed39641fca698ee98d0773131f4eea6bd', part: "indicator", class: "segment-button-indicator segment-button-indicator-animated" }, h("div", { key: 'fc556651361b7ac305aaedd25ea4afe3173abd20', part: "indicator-background", class: "segment-button-indicator-background" }))));
     }
     static get is() { return "ion-segment-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -299,6 +299,63 @@ 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
@@ -686,6 +743,8 @@ button {
  * }
  */
 :host {
+  --border-width: 0.55px;
+  --border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, var(--ion-background-color-step-250, #c8c7cc))));
   --highlight-height: 0px;
 }
 

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

@@ -23,10 +23,15 @@ 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;
@@ -77,6 +82,8 @@ 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;
@@ -154,15 +161,8 @@ export class Select {
         }
         this.isExpanded = true;
         const overlay = (this.overlay = await this.createOverlay(event));
-        overlay.onDidDismiss().then(() => {
-            this.overlay = undefined;
-            this.isExpanded = false;
-            this.ionDismiss.emit();
-            this.setFocus();
-        });
-        await overlay.present();
-        // focus selected option for popovers and modals
-        if (this.interface === 'popover' || this.interface === 'modal') {
+        // Add logic to scroll selected item into view before presenting
+        const scrollSelectedIntoView = () => {
             const indexOfSelected = this.childOpts.findIndex((o) => o.value === this.value);
             if (indexOfSelected > -1) {
                 const selectedItem = overlay.querySelector(`.select-interface-option:nth-child(${indexOfSelected + 1})`);
@@ -180,6 +180,7 @@ export class Select {
                      */
                     const interactiveEl = selectedItem.querySelector('ion-radio, ion-checkbox');
                     if (interactiveEl) {
+                        selectedItem.scrollIntoView({ block: 'nearest' });
                         // Needs to be called before `focusVisibleElement` to prevent issue with focus event bubbling
                         // and removing `ion-focused` style
                         interactiveEl.setFocus();
@@ -203,7 +204,40 @@ export class Select {
                     focusVisibleElement(firstEnabledOption.closest('ion-item'));
                 }
             }
+        };
+        // For modals and popovers, we can scroll before they're visible
+        if (this.interface === 'modal') {
+            overlay.addEventListener('ionModalWillPresent', scrollSelectedIntoView, { once: true });
+        }
+        else if (this.interface === 'popover') {
+            overlay.addEventListener('ionPopoverWillPresent', scrollSelectedIntoView, { once: true });
         }
+        else {
+            /**
+             * For alerts and action sheets, we need to wait a frame after willPresent
+             * because these overlays don't have their content in the DOM immediately
+             * when willPresent fires. By waiting a frame, we ensure the content is
+             * rendered and can be properly scrolled into view.
+             */
+            const scrollAfterRender = () => {
+                requestAnimationFrame(() => {
+                    scrollSelectedIntoView();
+                });
+            };
+            if (this.interface === 'alert') {
+                overlay.addEventListener('ionAlertWillPresent', scrollAfterRender, { once: true });
+            }
+            else if (this.interface === 'action-sheet') {
+                overlay.addEventListener('ionActionSheetWillPresent', scrollAfterRender, { once: true });
+            }
+        }
+        overlay.onDidDismiss().then(() => {
+            this.overlay = undefined;
+            this.isExpanded = false;
+            this.ionDismiss.emit();
+            this.setFocus();
+        });
+        await overlay.present();
         return overlay;
     }
     createOverlay(ev) {
@@ -630,7 +664,43 @@ export class Select {
     }
     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-required": `${required}`, onFocus: this.onFocus, onBlur: this.onBlur, ref: (focusEl) => (this.focusEl = focusEl) }));
+        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());
     }
     render() {
         const { disabled, el, isExpanded, expandedIcon, labelPlacement, justify, placeholder, fill, shape, name, value } = this;
@@ -661,7 +731,7 @@ export class Select {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || isExpanded || hasStartEndSlots));
-        return (h(Host, { key: '491cf1b0e3aa31e7c9cfad3e87d83eb54272312a', onClick: this.onClick, class: createColorClasses(this.color, {
+        return (h(Host, { key: '6c0141f40087a1793516882641e4473a6a82a0b2', onClick: this.onClick, class: createColorClasses(this.color, {
                 [mode]: true,
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', el),
@@ -677,7 +747,7 @@ export class Select {
                 [`select-justify-${justify}`]: justifyEnabled,
                 [`select-shape-${shape}`]: shape !== undefined,
                 [`select-label-placement-${labelPlacement}`]: true,
-            }) }, h("label", { key: '07bf3cb57bd1121383d8c746e3ac49da38300082', class: "select-wrapper", id: "select-label" }, this.renderLabelContainer(), h("div", { key: '884facd18342797576bbacc761d18d83c52762e3', class: "select-wrapper-inner" }, h("slot", { key: 'c4f2a2a7a76f52db15f9a0b806017caea443c47a', name: "start" }), h("div", { key: '235cf383f268cc74412722cd31e246cbd4c2abe5', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), h("slot", { key: '1481302e11c494d49dfd80a7aaf743f7e851558f', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && h("div", { key: '8a45ea9280651695c8e5435f266c286f3e3f6a18', class: "select-highlight" }))));
+            }) }, 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()));
     }
     static get is() { return "ion-select"; }
     static get encapsulation() { return "shadow"; }
@@ -794,6 +864,40 @@ 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,

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

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

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

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

@@ -364,3 +364,13 @@ export const shallowEqualStringMap = (map1, map2) => {
     }
     return true;
 };
+export const getNextSiblingOfType = (element) => {
+    let sibling = element.nextSibling;
+    while (sibling) {
+        if (sibling.nodeType === Node.ELEMENT_NODE && sibling !== null) {
+            return sibling;
+        }
+        sibling = sibling.nextSibling;
+    }
+    return null;
+};