@ionic/core 8.7.4-dev.11756220757.185b8cbf → 8.7.4-dev.11756465095.1387c832

package/dist/collection/components/textarea/textarea.js

@@ -6,10 +6,11 @@ import { createNotchController } 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";
-import { getIonMode } from "../../global/ionic-global";
+import { getIonTheme } from "../../global/ionic-global";
 import { getCounterText } from "../input/input.utils";
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
+ * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
  *
  * @slot label - The label text to associate with the textarea. Use the `labelPlacement` property to control where the label is placed relative to the textarea. Use this if you need to render a label with custom HTML. (EXPERIMENTAL)
  * @slot start - Content to display at the leading edge of the textarea. (EXPERIMENTAL)
@@ -37,10 +38,6 @@ export class Textarea {
          * 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"`.
@@ -99,6 +96,12 @@ export class Textarea {
          * `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("...").
          */
         this.labelPlacement = 'start';
+        /**
+         * The size of the textarea. If "large" it will increase the height of the textarea, while
+         * "small" and "medium" provide progressively smaller heights. The default size is "medium".
+         * This property only applies to the `"ionic"` theme.
+         */
+        this.size = 'medium';
         // `Event` type is used instead of `InputEvent`
         // since the types from Stencil are not derived
         // from the element (e.g. textarea and input
@@ -130,19 +133,6 @@ export class Textarea {
             }
             this.didTextareaClearOnEdit = false;
             this.ionBlur.emit(ev);
-            /**
-             * Check validation state after blur to handle framework-managed classes.
-             * Frameworks like Angular update classes asynchronously, often using
-             * requestAnimationFrame or promises. Using setTimeout ensures we check
-             * after all microtasks and animation frames have completed.
-             */
-            setTimeout(() => {
-                const newIsInvalid = this.checkValidationState();
-                if (this.isInvalid !== newIsInvalid) {
-                    this.isInvalid = newIsInvalid;
-                    forceUpdate(this);
-                }
-            }, 100);
         };
         this.onKeyDown = (ev) => {
             this.checkClearOnEdit(ev);
@@ -200,42 +190,10 @@ export class Textarea {
             this.el.click();
         }
     }
-    /**
-     * Checks if the textarea is in an invalid state based on validation classes
-     */
-    checkValidationState() {
-        // Check for both Ionic and Angular validation classes on the element itself
-        // Angular applies ng-touched/ng-invalid directly to the host element with ngModel
-        const hasIonTouched = this.el.classList.contains('ion-touched');
-        const hasIonInvalid = this.el.classList.contains('ion-invalid');
-        const hasNgTouched = this.el.classList.contains('ng-touched');
-        const hasNgInvalid = this.el.classList.contains('ng-invalid');
-        // Return true if we have both touched and invalid states from either framework
-        const isTouched = hasIonTouched || hasNgTouched;
-        const isInvalid = hasIonInvalid || hasNgInvalid;
-        return isTouched && isInvalid;
-    }
     connectedCallback() {
         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 = this.checkValidationState();
-                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 = this.checkValidationState();
         this.debounceChanged();
         if (Build.isBrowser) {
             document.dispatchEvent(new CustomEvent('ionInputDidLoad', {
@@ -257,11 +215,6 @@ export class Textarea {
             this.notchController.destroy();
             this.notchController = undefined;
         }
-        // Clean up validation observer to prevent memory leaks
-        if (this.validationObserver) {
-            this.validationObserver.disconnect();
-            this.validationObserver = undefined;
-        }
     }
     componentWillLoad() {
         this.inheritedAttributes = Object.assign(Object.assign({}, inheritAriaAttributes(this.el)), inheritAttributes(this.el, ['data-form-type', 'title', 'tabindex', 'dir']));
@@ -400,12 +353,29 @@ export class Textarea {
     get hasLabel() {
         return this.label !== undefined || this.labelSlot !== null;
     }
+    getFill() {
+        const theme = getIonTheme(this);
+        const { fill } = this;
+        if (theme === 'ionic' && fill === undefined) {
+            return 'outline';
+        }
+        return fill;
+    }
+    getShape() {
+        const theme = getIonTheme(this);
+        const { shape } = this;
+        // TODO(ROU-11050): Update theme check when shapes are defined for all themes.
+        if (theme === 'ionic' && shape === undefined) {
+            return 'round';
+        }
+        return shape;
+    }
     /**
      * Renders the border container when fill="outline".
      */
     renderLabelContainer() {
-        const mode = getIonMode(this);
-        const hasOutlineFill = mode === 'md' && this.fill === 'outline';
+        const theme = getIonTheme(this);
+        const hasOutlineFill = theme === 'md' && this.fill === 'outline';
         if (hasOutlineFill) {
             /**
              * The outline fill has a special outline
@@ -432,15 +402,15 @@ export class Textarea {
      * Renders the helper text or error text values
      */
     renderHintText() {
-        const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;
+        const { helperText, errorText, helperTextId, errorTextId } = this;
         return [
-            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),
+            h("div", { id: helperTextId, class: "helper-text" }, helperText),
+            h("div", { id: errorTextId, class: "error-text" }, errorText),
         ];
     }
     getHintTextID() {
-        const { isInvalid, helperText, errorText, helperTextId, errorTextId } = this;
-        if (isInvalid && errorText) {
+        const { el, helperText, errorText, helperTextId, errorTextId } = this;
+        if (el.classList.contains('ion-touched') && el.classList.contains('ion-invalid') && errorText) {
             return errorTextId;
         }
         if (helperText) {
@@ -474,11 +444,13 @@ export class Textarea {
         return (h("div", { class: "textarea-bottom" }, this.renderHintText(), this.renderCounter()));
     }
     render() {
-        const { inputId, disabled, fill, shape, labelPlacement, el, hasFocus } = this;
-        const mode = getIonMode(this);
+        const { inputId, disabled, readonly, size, labelPlacement, el, hasFocus } = this;
+        const fill = this.getFill();
+        const theme = getIonTheme(this);
+        const shape = this.getShape();
         const value = this.getValue();
         const inItem = hostContext('ion-item', this.el);
-        const shouldRenderHighlight = mode === 'md' && fill !== 'outline' && !inItem;
+        const shouldRenderHighlight = (theme === 'md' || theme === 'ionic') && fill !== 'outline' && !inItem;
         const hasValue = this.hasValue();
         const hasStartEndSlots = el.querySelector('[slot="start"], [slot="end"]') !== null;
         /**
@@ -499,29 +471,43 @@ export class Textarea {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
-        return (h(Host, { key: 'e7e09574df34c1b51b97b3ed89c2af2747c32308', class: createColorClasses(this.color, {
-                [mode]: true,
+        return (h(Host, { key: 'd5f3701491730d83a13943b1b21c398cf007ba3a', class: createColorClasses(this.color, {
+                [theme]: true,
                 'has-value': hasValue,
                 'has-focus': hasFocus,
                 'label-floating': labelShouldFloat,
                 [`textarea-fill-${fill}`]: fill !== undefined,
                 [`textarea-shape-${shape}`]: shape !== undefined,
+                [`textarea-size-${size}`]: true,
                 [`textarea-label-placement-${labelPlacement}`]: true,
                 'textarea-disabled': disabled,
-            }) }, h("label", { key: '8a8809ea9b9b39241adc38fbb0cdb23048f35eea', class: "textarea-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderLabelContainer(), h("div", { key: '206f75a83d3177c9de4ba22ca5e826406c989de6', class: "textarea-wrapper-inner" }, h("div", { key: '43bca68664d9abe3e397bd27cd4439fa8d4311db', class: "start-slot-wrapper" }, h("slot", { key: 'f1eb97f407bdb000431f736243650f38858046f8', name: "start" })), h("div", { key: '788d344ef9be934a1e83e29216cf23bede42f160', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, h("textarea", Object.assign({ key: '5ef713d4781f7c49e2f66002ae0d9feb69b3bddb', class: "native-textarea", ref: (el) => (this.nativeInput = el), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, minLength: this.minlength, maxLength: this.maxlength, name: this.name, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeyDown, "aria-describedby": this.getHintTextID(), "aria-invalid": this.isInvalid ? 'true' : undefined }, this.inheritedAttributes), value)), h("div", { key: '775d7866f86709904d0a57fc47e9ba94e5b052e9', class: "end-slot-wrapper" }, h("slot", { key: 'cdb98adb014a3bf02579a729c33d8ee18731f692', name: "end" }))), shouldRenderHighlight && h("div", { key: '4c319ec9615a125b3cef774c73f55a23a938d6d9', class: "textarea-highlight" })), this.renderBottomContent()));
+                'textarea-readonly': readonly,
+            }) }, h("label", { key: 'fa515c21315a87e03ffd40c89bc5d58cc61ca917', class: "textarea-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderLabelContainer(), h("div", { key: 'a67ebebdcd2148a1dc3627a52c99b6d14f0e44a4', class: "textarea-wrapper-inner" }, 
+        /**
+         * For the ionic theme, we render the outline container here
+         * instead of higher up, so it can be positioned relative to
+         * the native wrapper instead of the <label> element or the
+         * entire component. This allows the label text to be positioned
+         * above the outline, while staying within the bounds of the
+         * <label> element, ensuring that clicking the label text
+         * focuses the textarea.
+         */
+        theme === 'ionic' && fill === 'outline' && h("div", { key: 'c513caae55fe171802181870460737b727e08465', class: "textarea-outline" }), h("div", { key: '52d26ebe1015a1fc592246f2c956866ed1e1a59a', class: "start-slot-wrapper" }, h("slot", { key: 'a88f9bca0079ed2fb3cee1cfbf29d95482b050fe', name: "start" })), h("div", { key: '4ae0b4639d4652ac9fa977d736e3497bab3fdf1c', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, h("textarea", Object.assign({ key: '770268290d8d1d0f5fc260f9245748770f8c4168', class: "native-textarea", ref: (el) => (this.nativeInput = el), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, minLength: this.minlength, maxLength: this.maxlength, name: this.name, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeyDown, "aria-describedby": this.getHintTextID(), "aria-invalid": this.getHintTextID() === this.errorTextId }, this.inheritedAttributes), value)), h("div", { key: '66c81e64966062f7eb910cb1b9830ecbffbd0a21', class: "end-slot-wrapper" }, h("slot", { key: 'b93c36c85ab329cb7cc437e319e1d29a1fb87e27', name: "end" }))), shouldRenderHighlight && h("div", { key: 'bcd844269e7df4519bf75920ab0779cd52ad10ac', class: "textarea-highlight" })), this.renderBottomContent()));
     }
     static get is() { return "ion-textarea"; }
     static get encapsulation() { return "scoped"; }
     static get originalStyleUrls() {
         return {
             "ios": ["textarea.ios.scss"],
-            "md": ["textarea.md.scss"]
+            "md": ["textarea.md.scss"],
+            "ionic": ["textarea.ionic.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["textarea.ios.css"],
-            "md": ["textarea.md.css"]
+            "md": ["textarea.md.css"],
+            "ionic": ["textarea.ionic.css"]
         };
     }
     static get properties() {
@@ -663,7 +649,7 @@ export class Textarea {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The fill for the item. If `\"solid\"` the item will have a background. If\n`\"outline\"` the item will be transparent with a border. Only available in `md` mode."
+                    "text": "The fill for the item. If `\"solid\"` the item will have a background. If\n`\"outline\"` the item will be transparent with a border. Only available when the theme is `\"md\"`."
                 },
                 "getter": false,
                 "setter": false,
@@ -1061,26 +1047,45 @@ export class Textarea {
                 "attribute": "shape",
                 "mutable": false,
                 "complexType": {
-                    "original": "'round'",
-                    "resolved": "\"round\" | undefined",
+                    "original": "'soft' | 'round' | 'rectangular'",
+                    "resolved": "\"rectangular\" | \"round\" | \"soft\" | undefined",
                     "references": {}
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The shape of the textarea. If \"round\" it will have an increased border radius."
+                    "text": "Set to `\"soft\"` for a textarea with slightly rounded corners,\n`\"round\"` for a textarea with fully rounded corners, or `\"rectangular\"`\nfor a textarea without rounded corners.\n\nDefaults to `\"round\"` for the `ionic` theme, undefined for all other themes."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false
+            },
+            "size": {
+                "type": "string",
+                "attribute": "size",
+                "mutable": false,
+                "complexType": {
+                    "original": "'small' | 'medium' | 'large'",
+                    "resolved": "\"large\" | \"medium\" | \"small\" | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The size of the textarea. If \"large\" it will increase the height of the textarea, while\n\"small\" and \"medium\" provide progressively smaller heights. The default size is \"medium\".\nThis property only applies to the `\"ionic\"` theme."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'medium'"
             }
         };
     }
     static get states() {
         return {
-            "hasFocus": {},
-            "isInvalid": {}
+            "hasFocus": {}
         };
     }
     static get events() {