voyager-ionic-core 8.7.2 → 8.7.9

package/dist/collection/components/input/input.js

@@ -2,7 +2,7 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { Build, Host, forceUpdate, h, } from "@stencil/core";
-import { createNotchController } from "../../utils/forms/index";
+import { createNotchController, checkInvalidState } from "../../utils/forms/index";
 import { inheritAriaAttributes, debounceEvent, inheritAttributes, componentOnReady } from "../../utils/helpers";
 import { createSlotMutationController } from "../../utils/slot-mutation-controller";
 import { createColorClasses, hostContext } from "../../utils/theme";
@@ -39,6 +39,10 @@ export class Input {
          * is applied in both cases.
          */
         this.hasFocus = false;
+        /**
+         * Track validation state for proper aria-live announcements
+         */
+        this.isInvalid = false;
         /**
          * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.
          * Available options: `"off"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`.
@@ -227,6 +231,23 @@ export class Input {
         const { el } = this;
         this.slotMutationController = createSlotMutationController(el, ['label', 'start', 'end'], () => forceUpdate(this));
         this.notchController = createNotchController(el, () => this.notchSpacerEl, () => this.labelSlot);
+        // Watch for class changes to update validation state
+        if (Build.isBrowser && typeof MutationObserver !== 'undefined') {
+            this.validationObserver = new MutationObserver(() => {
+                const newIsInvalid = checkInvalidState(el);
+                if (this.isInvalid !== newIsInvalid) {
+                    this.isInvalid = newIsInvalid;
+                    // Force a re-render to update aria-describedby immediately
+                    forceUpdate(this);
+                }
+            });
+            this.validationObserver.observe(el, {
+                attributes: true,
+                attributeFilter: ['class'],
+            });
+        }
+        // Always set initial state
+        this.isInvalid = checkInvalidState(el);
         this.debounceChanged();
         if (Build.isBrowser) {
             document.dispatchEvent(new CustomEvent('ionInputDidLoad', {
@@ -263,6 +284,11 @@ export class Input {
             this.notchController.destroy();
             this.notchController = undefined;
         }
+        // Clean up validation observer to prevent memory leaks
+        if (this.validationObserver) {
+            this.validationObserver.disconnect();
+            this.validationObserver = undefined;
+        }
     }
     /**
      * Sets focus on the native `input` in `ion-input`. Use this method instead of the global
@@ -364,15 +390,15 @@ export class Input {
      * Renders the helper text or error text values
      */
     renderHintText() {
-        const { helperText, errorText, helperTextId, errorTextId } = this;
+        const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;
         return [
-            h("div", { id: helperTextId, class: "helper-text" }, helperText),
-            h("div", { id: errorTextId, class: "error-text" }, errorText),
+            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 { el, helperText, errorText, helperTextId, errorTextId } = this;
-        if (el.classList.contains('ion-touched') && el.classList.contains('ion-invalid') && errorText) {
+        const { isInvalid, helperText, errorText, helperTextId, errorTextId } = this;
+        if (isInvalid && errorText) {
             return errorTextId;
         }
         if (helperText) {
@@ -485,7 +511,7 @@ export class Input {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
-        return (h(Host, { key: '41b2526627e7d2773a80f011b123284203a71ca0', class: createColorClasses(this.color, {
+        return (h(Host, { key: '97b5308021064d9e7434ef2d3d96f27045c1b0c4', class: createColorClasses(this.color, {
                 [mode]: true,
                 'has-value': hasValue,
                 'has-focus': hasFocus,
@@ -496,14 +522,14 @@ export class Input {
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', this.el),
                 'input-disabled': disabled,
-            }) }, h("label", { key: '9ab078363e32528102b441ad1791d83f86fdcbdc', class: "input-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderLabelContainer(), h("div", { key: 'e34b594980ec62e4c618e827fadf7669a39ad0d8', class: "native-wrapper", onClick: this.onLabelClick }, h("slot", { key: '12dc04ead5502e9e5736240e918bf9331bf7b5d9', name: "start" }), h("input", Object.assign({ key: 'df356eb4ced23109b2c0242f36dc043aba8782d6', class: "native-input", ref: (input) => (this.nativeInput = input), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, type: this.type, value: value, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd, "aria-describedby": this.getHintTextID(), "aria-invalid": this.getHintTextID() === this.errorTextId }, this.inheritedAttributes)), this.clearInput && !readonly && !disabled && (h("button", { key: 'f79f68cabcd4ea99419331174a377827db0c0741', "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
+            }) }, h("label", { key: '353f68726ce180299bd9adc81e5ff7d26a48f54f', class: "input-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderLabelContainer(), h("div", { key: '2034b4bad04fc157f3298a1805819216b6f439d0', class: "native-wrapper", onClick: this.onLabelClick }, h("slot", { key: '96bb5e30176b2bd76dfb75bfbf6c1c3d4403f4bb', name: "start" }), h("input", Object.assign({ key: '1a1d75b0e414a95c89d5a760757c33548d234aca', class: "native-input", ref: (input) => (this.nativeInput = input), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, type: this.type, value: value, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd, "aria-describedby": this.getHintTextID(), "aria-invalid": this.isInvalid ? 'true' : undefined }, this.inheritedAttributes)), this.clearInput && !readonly && !disabled && (h("button", { key: '95f3df17b7691d9a2e7dcd4a51f16a94aa3ca36f', "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
                 /**
                  * This prevents mobile browsers from
                  * blurring the input when the clear
                  * button is activated.
                  */
                 ev.preventDefault();
-            }, onClick: this.clearTextInput }, h("ion-icon", { key: '237ec07ec2e10f08818a332bb596578c2c49f770', "aria-hidden": "true", icon: clearIconData }))), h("slot", { key: '1f0a3624aa3e8dc3c307a6762230ab698768a5e5', name: "end" })), shouldRenderHighlight && h("div", { key: '8a8cbb82695a722a0010b53dd0b1f1f97534a20b', class: "input-highlight" })), this.renderBottomContent()));
+            }, onClick: this.clearTextInput }, h("ion-icon", { key: '16b0af75eed50c8115fb5597f73b5fbf71c2530e', "aria-hidden": "true", icon: clearIconData }))), h("slot", { key: 'c48da0f8ddb3764ac43efa705bb4a6bb2d9cc2fd', name: "end" })), shouldRenderHighlight && h("div", { key: 'f15238481fc20de56ca7ecb6e350b3c024cc755e', class: "input-highlight" })), this.renderBottomContent()));
     }
     static get is() { return "ion-input"; }
     static get encapsulation() { return "scoped"; }
@@ -523,7 +549,6 @@ export class Input {
         return {
             "color": {
                 "type": "string",
-                "attribute": "color",
                 "mutable": false,
                 "complexType": {
                     "original": "Color",
@@ -544,11 +569,11 @@ export class Input {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "color"
             },
             "autocapitalize": {
                 "type": "string",
-                "attribute": "autocapitalize",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -564,11 +589,11 @@ export class Input {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "autocapitalize",
                 "defaultValue": "'off'"
             },
             "autocomplete": {
                 "type": "string",
-                "attribute": "autocomplete",
                 "mutable": false,
                 "complexType": {
                     "original": "AutocompleteTypes",
@@ -590,11 +615,11 @@ export class Input {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "autocomplete",
                 "defaultValue": "'off'"
             },
             "autocorrect": {
                 "type": "string",
-                "attribute": "autocorrect",
                 "mutable": false,
                 "complexType": {
                     "original": "'on' | 'off'",
@@ -610,11 +635,11 @@ export class Input {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "autocorrect",
                 "defaultValue": "'off'"
             },
             "autofocus": {
                 "type": "boolean",
-                "attribute": "autofocus",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -630,11 +655,11 @@ export class Input {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "autofocus",
                 "defaultValue": "false"
             },
             "clearInput": {
                 "type": "boolean",
-                "attribute": "clear-input",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -650,11 +675,11 @@ export class Input {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "clear-input",
                 "defaultValue": "false"
             },
             "clearInputIcon": {
                 "type": "string",
-                "attribute": "clear-input-icon",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -669,11 +694,11 @@ export class Input {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "clear-input-icon"
             },
             "clearOnEdit": {
                 "type": "boolean",
-                "attribute": "clear-on-edit",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -688,11 +713,11 @@ export class Input {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "clear-on-edit"
             },
             "counter": {
                 "type": "boolean",
-                "attribute": "counter",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -708,11 +733,11 @@ export class Input {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "counter",
                 "defaultValue": "false"
             },
             "counterFormatter": {
                 "type": "unknown",
-                "attribute": "counter-formatter",
                 "mutable": false,
                 "complexType": {
                     "original": "(inputLength: number, maxLength: number) => string",
@@ -730,7 +755,6 @@ export class Input {
             },
             "debounce": {
                 "type": "number",
-                "attribute": "debounce",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -745,11 +769,11 @@ export class Input {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "debounce"
             },
             "disabled": {
                 "type": "boolean",
-                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -765,11 +789,11 @@ export class Input {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "disabled",
                 "defaultValue": "false"
             },
             "enterkeyhint": {
                 "type": "string",
-                "attribute": "enterkeyhint",
                 "mutable": false,
                 "complexType": {
                     "original": "'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'",
@@ -784,11 +808,11 @@ export class Input {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "enterkeyhint"
             },
             "errorText": {
                 "type": "string",
-                "attribute": "error-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -803,11 +827,11 @@ export class Input {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "error-text"
             },
             "fill": {
                 "type": "string",
-                "attribute": "fill",
                 "mutable": false,
                 "complexType": {
                     "original": "'outline' | 'solid'",
@@ -822,11 +846,11 @@ export class Input {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "fill"
             },
             "inputmode": {
                 "type": "string",
-                "attribute": "inputmode",
                 "mutable": false,
                 "complexType": {
                     "original": "'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search'",
@@ -841,11 +865,11 @@ export class Input {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "inputmode"
             },
             "helperText": {
                 "type": "string",
-                "attribute": "helper-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -860,11 +884,11 @@ export class Input {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "helper-text"
             },
             "label": {
                 "type": "string",
-                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -879,11 +903,11 @@ export class Input {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "label"
             },
             "labelPlacement": {
                 "type": "string",
-                "attribute": "label-placement",
                 "mutable": false,
                 "complexType": {
                     "original": "'start' | 'end' | 'floating' | 'stacked' | 'fixed'",
@@ -899,11 +923,11 @@ export class Input {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "label-placement",
                 "defaultValue": "'start'"
             },
             "max": {
                 "type": "any",
-                "attribute": "max",
                 "mutable": false,
                 "complexType": {
                     "original": "string | number",
@@ -918,11 +942,11 @@ export class Input {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "max"
             },
             "maxlength": {
                 "type": "number",
-                "attribute": "maxlength",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -937,11 +961,11 @@ export class Input {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "maxlength"
             },
             "min": {
                 "type": "any",
-                "attribute": "min",
                 "mutable": false,
                 "complexType": {
                     "original": "string | number",
@@ -956,11 +980,11 @@ export class Input {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "min"
             },
             "minlength": {
                 "type": "number",
-                "attribute": "minlength",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -975,11 +999,11 @@ export class Input {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "minlength"
             },
             "multiple": {
                 "type": "boolean",
-                "attribute": "multiple",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -994,11 +1018,11 @@ export class Input {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "multiple"
             },
             "name": {
                 "type": "string",
-                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -1014,11 +1038,11 @@ export class Input {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "name",
                 "defaultValue": "this.inputId"
             },
             "pattern": {
                 "type": "string",
-                "attribute": "pattern",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -1033,11 +1057,11 @@ export class Input {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "pattern"
             },
             "placeholder": {
                 "type": "string",
-                "attribute": "placeholder",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -1052,11 +1076,11 @@ export class Input {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "placeholder"
             },
             "readonly": {
                 "type": "boolean",
-                "attribute": "readonly",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -1072,11 +1096,11 @@ export class Input {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "readonly",
                 "defaultValue": "false"
             },
             "required": {
                 "type": "boolean",
-                "attribute": "required",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -1092,11 +1116,11 @@ export class Input {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "required",
                 "defaultValue": "false"
             },
             "shape": {
                 "type": "string",
-                "attribute": "shape",
                 "mutable": false,
                 "complexType": {
                     "original": "'round'",
@@ -1111,11 +1135,11 @@ export class Input {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "shape"
             },
             "spellcheck": {
                 "type": "boolean",
-                "attribute": "spellcheck",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -1131,11 +1155,11 @@ export class Input {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "spellcheck",
                 "defaultValue": "false"
             },
             "step": {
                 "type": "string",
-                "attribute": "step",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -1150,11 +1174,11 @@ export class Input {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "step"
             },
             "type": {
                 "type": "string",
-                "attribute": "type",
                 "mutable": false,
                 "complexType": {
                     "original": "TextFieldTypes",
@@ -1176,11 +1200,11 @@ export class Input {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "type",
                 "defaultValue": "'text'"
             },
             "value": {
                 "type": "any",
-                "attribute": "value",
                 "mutable": true,
                 "complexType": {
                     "original": "string | number | null",
@@ -1196,13 +1220,15 @@ export class Input {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "value",
                 "defaultValue": "''"
             }
         };
     }
     static get states() {
         return {
-            "hasFocus": {}
+            "hasFocus": {},
+            "isInvalid": {}
         };
     }
     static get events() {