@ionic/core 9.0.11-dev.11793890855.1bf6a6e5 → 9.0.11-dev.11793906456.1ea7a0a7

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

@@ -2,32 +2,18 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { Build, Host, forceUpdate, h, writeTask, } from "@stencil/core";
-import { createClickController, getSlottedClickContent, createNotchController, createStartEndContainerController, checkInvalidState, reportValidityToElementInternals, } from "../../utils/forms/index";
+import { createClickController, createNotchController, createStartEndContainerController, 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";
-import { getIonTheme } from "../../global/ionic-global";
+import { getIonMode } from "../../global/ionic-global";
 import { getCounterText } from "../input/input.utils";
 /**
- * @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.
+ * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  *
  * @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)
  * @slot end - Content to display at the trailing edge of the textarea. (EXPERIMENTAL)
- *
- * @part wrapper - The clickable label element that wraps the entire form field (label text, slots, and native textarea).
- * @part container - The inner wrapper element that directly contains the native textarea element.
- * @part label - The label text describing the textarea.
- * @part native - The native textarea element.
- * @part supporting-text - Supporting text displayed beneath the textarea label.
- * @part helper-text - Supporting text displayed beneath the textarea label when the textarea is valid.
- * @part error-text - Supporting text displayed beneath the textarea label when the textarea is invalid and touched.
- * @part counter - The character counter displayed when the counter property is set.
- * @part bottom - The container element for helper text, error text, and counter.
- * @part start - The wrapper element for the content in the start slot.
- * @part control - The wrapper element containing the label and the native textarea. The `"ionic"` theme flattens this wrapper, so it cannot be given a box of its own there.
- * @part end - The wrapper element for the content in the end slot.
  */
 export class Textarea {
     constructor() {
@@ -113,12 +99,6 @@ 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
@@ -135,17 +115,11 @@ export class Textarea {
             this.emitValueChange(ev);
         };
         this.onFocus = (ev) => {
-            if (this.clickController?.rejectFocus(ev)) {
-                return;
-            }
             this.hasFocus = true;
             this.focusedValue = this.value;
             this.ionFocus.emit(ev);
         };
         this.onBlur = (ev) => {
-            if (!this.hasFocus) {
-                return;
-            }
             this.hasFocus = false;
             if (this.focusedValue !== this.value) {
                 /**
@@ -160,15 +134,19 @@ export class Textarea {
         this.onKeyDown = (ev) => {
             this.checkClearOnEdit(ev);
         };
-        this.onLabelMouseDown = (ev) => {
-            this.clickController?.handleMouseDown(ev);
-        };
         /**
-         * Stops clicks on the label text and wrapper padding, since the click the
-         * label forwards to the textarea already represents them.
+         * Stops propagation for clicks on the textarea's own content (label text,
+         * textarea field) to prevent double-click events. Allows clicks on slotted
+         * content to propagate so event delegation works for parent handlers.
+         *
+         * Only slots belonging directly to this textarea should be considered.
+         * The textarea itself may have a slot attribute when placed in an item
+         * or toolbar, which does not make its content slotted content.
          */
         this.onLabelClick = (ev) => {
-            if (ev.target !== this.nativeInput && getSlottedClickContent(ev, this.el) === null) {
+            const target = ev.target;
+            const slotted = target.closest('[slot="start"], [slot="end"]');
+            if (slotted === null || slotted === this.el || !this.el.contains(slotted)) {
                 ev.stopPropagation();
             }
         };
@@ -181,12 +159,6 @@ export class Textarea {
          */
         this.ionInput = debounce === undefined ? originalIonInput ?? ionInput : debounceEvent(ionInput, debounce);
     }
-    /**
-     * Update element internals when disabled prop changes
-     */
-    disabledChanged() {
-        this.updateElementInternals();
-    }
     /**
      * Update the native input element when the value changes
      */
@@ -196,22 +168,8 @@ export class Textarea {
         if (nativeInput && nativeInput.value !== value) {
             nativeInput.value = value;
         }
-        this.updateElementInternals();
         this.runAutoGrow();
     }
-    /**
-     * Update native input and element internals when required prop changes
-     */
-    requiredChanged() {
-        // Explicitly update the native element's required attribute to ensure
-        // browser validation works correctly when required changes dynamically.
-        // While the template binding should handle this, we need to update it
-        // synchronously for the browser's validation to recognize the change.
-        if (this.nativeInput) {
-            this.nativeInput.required = this.required;
-        }
-        this.updateElementInternals();
-    }
     /**
      * dir is a globally enumerated attribute.
      * As a result, creating these as properties
@@ -226,6 +184,13 @@ export class Textarea {
         };
         forceUpdate(this);
     }
+    /**
+     * This prevents the native input from emitting the click event.
+     * Instead, the click event from the ion-textarea is emitted.
+     */
+    onClickCapture(ev) {
+        this.clickController?.handleClickCapture(ev);
+    }
     connectedCallback() {
         const { el } = this;
         this.slotMutationController = createSlotMutationController(el, ['label', 'start', 'end'], () => {
@@ -234,7 +199,7 @@ export class Textarea {
         });
         this.notchController = createNotchController(el, () => this.notchSpacerEl, () => this.labelSlot);
         this.startEndContainerController = createStartEndContainerController(el, () => this.startContainerEl, () => this.endContainerEl, () => {
-            return Build.isBrowser && getIonTheme(this) === 'md' && this.fill === 'outline';
+            return Build.isBrowser && getIonMode(this) === 'md' && this.fill === 'outline';
         });
         this.startEndContainerController.calculateContainerWidths();
         this.clickController = createClickController(el, () => this.nativeInput);
@@ -263,10 +228,6 @@ export class Textarea {
         }
     }
     disconnectedCallback() {
-        if (this.clickController) {
-            this.clickController.destroy();
-            this.clickController = undefined;
-        }
         if (Build.isBrowser) {
             document.dispatchEvent(new CustomEvent('ionInputDidUnload', {
                 detail: this.el,
@@ -298,14 +259,7 @@ export class Textarea {
     }
     componentDidLoad() {
         this.originalIonInput = this.ionInput;
-        this.updateElementInternals();
         this.runAutoGrow();
-        // Override focus() to delegate to the native textarea.
-        // This is needed for Safari and Firefox which don't properly
-        // delegate focus when calling focus() directly on the host.
-        this.el.focus = () => {
-            this.setFocus();
-        };
     }
     componentDidRender() {
         this.notchController?.calculateNotchWidth();
@@ -318,8 +272,6 @@ export class Textarea {
      * See [managing focus](/docs/developing/managing-focus) for more information.
      */
     async setFocus() {
-        // An explicit focus request is never the focus a gesture delegated here.
-        this.clickController?.cancelFocusRejection();
         if (this.nativeInput) {
             this.nativeInput.focus();
         }
@@ -415,43 +367,12 @@ export class Textarea {
     getValue() {
         return this.value || '';
     }
-    /**
-     * Called when the form state is restored.
-     * Restores the component's value.
-     */
-    formStateRestoreCallback(value) {
-        this.value = value;
-    }
-    /**
-     * Called when the form is reset.
-     * Resets the component's value.
-     */
-    formResetCallback() {
-        this.value = '';
-    }
-    /**
-     * Updates the form value and reports validity state to the browser via
-     * ElementInternals. This should be called when the component loads, when
-     * the required prop changes, when the disabled prop changes, and when the value
-     * changes to ensure the form value stays in sync and validation state is updated.
-     */
-    updateElementInternals() {
-        // Disabled form controls should not be included in form data
-        // Pass null to setFormValue when disabled to exclude it from form submission
-        const value = this.disabled ? null : this.getValue();
-        // ElementInternals may not be fully available in test environments
-        // so we need to check if the method exists before calling it
-        if (typeof this.internals.setFormValue === 'function') {
-            this.internals.setFormValue(value);
-        }
-        reportValidityToElementInternals(this.nativeInput, this.internals);
-    }
     renderLabel() {
         const { label } = this;
         return (h("div", { class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !this.hasLabel,
-            }, part: "label" }, label === undefined ? h("slot", { name: "label" }) : h("div", { class: "label-text" }, label)));
+            } }, label === undefined ? h("slot", { name: "label" }) : h("div", { class: "label-text" }, label)));
     }
     /**
      * Gets any content passed into the `label` slot,
@@ -469,72 +390,23 @@ 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;
-    }
-    /**
-     * Drops the duplicate click the label forwards to the textarea after a click
-     * on slotted content.
-     */
-    onClickCapture(ev) {
-        this.clickController?.handleClickCapture(ev);
-    }
     /**
      * Renders the outline border with a notch for the label.
      */
     renderOutlineContainer() {
-        return (h("div", { key: "outline", class: "textarea-outline-container" }, h("div", { class: "textarea-outline-start" }), h("div", { class: {
+        return (h("div", { class: "textarea-outline-container" }, h("div", { class: "textarea-outline-start" }), h("div", { class: {
                 'textarea-outline-notch': true,
                 'textarea-outline-notch-hidden': !this.hasLabel,
             } }, h("div", { class: "notch-spacer", "aria-hidden": "true", ref: (el) => (this.notchSpacerEl = el) }, this.label)), h("div", { class: "textarea-outline-end" })));
     }
-    renderNativeTextarea() {
-        const { inputId, disabled } = this;
-        return (h("textarea", { class: "native-textarea", part: "native", 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 }, this.getValue()));
-    }
-    renderStartContainer() {
-        return (h("div", { key: "start", class: "textarea-start", part: "start", ref: (el) => (this.startContainerEl = el) }, h("slot", { name: "start" })));
-    }
-    renderEndContainer() {
-        return (h("div", { key: "end", class: "textarea-end", part: "end", ref: (el) => (this.endContainerEl = el) }, h("slot", { name: "end" })));
-    }
-    /**
-     * Every theme renders the same label and control structure, aside from the md
-     * outline container below. The label is nested alongside the textarea so the
-     * ios and md floating label can escape the control and clear the start and
-     * end slots. The ionic theme lifts it outside the field with grid instead.
-     */
-    renderField() {
-        const hasOutlineFill = getIonTheme(this) === 'md' && this.getFill() === 'outline';
-        return [
-            hasOutlineFill && this.renderOutlineContainer(),
-            this.renderStartContainer(),
-            h("div", { key: "control", class: "textarea-control", part: "control" }, this.renderLabel(), h("div", { class: "native-wrapper", ref: (el) => (this.textareaWrapper = el), part: "container" }, this.renderNativeTextarea())),
-            this.renderEndContainer(),
-        ];
-    }
     /**
      * Renders the helper text or error text values
      */
     renderHintText() {
         const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;
         return [
-            h("div", { id: helperTextId, class: "helper-text", part: "supporting-text helper-text", "aria-live": "polite" }, !isInvalid ? helperText : null),
-            h("div", { id: errorTextId, class: "error-text", part: "supporting-text error-text", role: "alert" }, isInvalid ? errorText : null),
+            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() {
@@ -552,7 +424,7 @@ export class Textarea {
         if (counter !== true || maxlength === undefined) {
             return;
         }
-        return (h("div", { class: "counter", part: "counter" }, getCounterText(value, maxlength, counterFormatter)));
+        return h("div", { class: "counter" }, getCounterText(value, maxlength, counterFormatter));
     }
     /**
      * Responsible for rendering helper text,
@@ -570,52 +442,45 @@ export class Textarea {
         if (!hasHintText && !hasCounter) {
             return;
         }
-        return (h("div", { class: "textarea-bottom", part: "bottom" }, this.renderHintText(), this.renderCounter()));
+        return (h("div", { class: "textarea-bottom" }, this.renderHintText(), this.renderCounter()));
     }
     render() {
-        const { inputId, disabled, readonly, size, labelPlacement, hasFocus } = this;
-        const theme = getIonTheme(this);
-        const fill = this.getFill();
-        const shape = this.getShape();
+        const { inputId, disabled, fill, shape, labelPlacement, hasFocus } = this;
+        const mode = getIonMode(this);
+        const value = this.getValue();
         const inItem = hostContext('ion-item', this.el);
-        const shouldRenderHighlight = theme === 'md' && fill !== 'outline' && !inItem;
+        const shouldRenderHighlight = mode === 'md' && fill !== 'outline' && !inItem;
         const hasValue = this.hasValue();
+        const hasOutlineFill = mode === 'md' && fill === 'outline';
         /**
          * If the label is stacked, it should always sit above the textarea.
          * For floating labels, the label should move above the textarea if
          * the textarea has a value or is focused.
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus));
-        return (h(Host, { key: 'f3589a5b397808eccec65a8153e972c7af426399', class: createColorClasses(this.color, {
-                [theme]: true,
+        return (h(Host, { key: '59f577d7b82036d5e12d7b4e7d5f0339af1d185a', class: createColorClasses(this.color, {
+                [mode]: 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,
-                'in-item': inItem,
                 'textarea-disabled': disabled,
-                'textarea-readonly': readonly,
-            }) }, h("label", { key: '385d18488cc175100c750a3159e3b63d47b26e37', class: "textarea-wrapper", htmlFor: inputId, onMouseDown: this.onLabelMouseDown, onClick: this.onLabelClick, part: "wrapper" }, this.renderField(), shouldRenderHighlight && h("div", { key: 'd2e9588a5c6f6b5123acce27c33c0bb9d7b210ac', class: "textarea-highlight" })), this.renderBottomContent()));
+            }) }, h("label", { key: '4684c4e760f0272d377809fcb28ed6fcad48b542', class: "textarea-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, hasOutlineFill && this.renderOutlineContainer(), h("div", { key: 'a3dd0e7b9494fce1ee33d011138600e8b697b227', class: "textarea-start", ref: (el) => (this.startContainerEl = el) }, h("slot", { key: '8f0a36f2373c859039b1437a0fdf8e7bef278272', name: "start" })), h("div", { key: '2cb3def25a6447aefb656e5fd89716be280055f1', class: "textarea-control" }, this.renderLabel(), h("div", { key: '613caadf5331ff4d9b52e1d2b22a7da36b248e76', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, h("textarea", { key: '3015a96367fa845f068118c5ae2484c4c8f30931', 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: 'f97f361e9339125407b0ef5f53d8c55021f1f824', class: "textarea-end", ref: (el) => (this.endContainerEl = el) }, h("slot", { key: '032bd68ec3603f8cf598225714e02447712a283a', name: "end" })), shouldRenderHighlight && h("div", { key: '8e27cee63918d2f40a46c442a3bb2802be4cf3e4', class: "textarea-highlight" })), this.renderBottomContent()));
     }
     static get is() { return "ion-textarea"; }
-    static get encapsulation() { return "shadow"; }
-    static get delegatesFocus() { return true; }
-    static get formAssociated() { return true; }
+    static get encapsulation() { return "scoped"; }
     static get originalStyleUrls() {
         return {
             "ios": ["textarea.ios.scss"],
-            "md": ["textarea.md.scss"],
-            "ionic": ["textarea.ionic.scss"]
+            "md": ["textarea.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["textarea.ios.css"],
-            "md": ["textarea.md.css"],
-            "ionic": ["textarea.ionic.css"]
+            "md": ["textarea.md.css"]
         };
     }
     static get properties() {
@@ -757,7 +622,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 when the theme is `\"md\"`."
+                    "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."
                 },
                 "getter": false,
                 "setter": false,
@@ -915,7 +780,7 @@ export class Textarea {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true,
+                "reflect": false,
                 "attribute": "required",
                 "defaultValue": "false"
             },
@@ -1154,40 +1019,20 @@ export class Textarea {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'soft' | 'round' | 'rectangular'",
-                    "resolved": "\"rectangular\" | \"round\" | \"soft\" | undefined",
+                    "original": "'round'",
+                    "resolved": "\"round\" | undefined",
                     "references": {}
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "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."
+                    "text": "The shape of the textarea. If \"round\" it will have an increased border radius."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "attribute": "shape"
-            },
-            "size": {
-                "type": "string",
-                "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,
-                "attribute": "size",
-                "defaultValue": "'medium'"
             }
         };
     }
@@ -1331,15 +1176,9 @@ export class Textarea {
         return [{
                 "propName": "debounce",
                 "methodName": "debounceChanged"
-            }, {
-                "propName": "disabled",
-                "methodName": "disabledChanged"
             }, {
                 "propName": "value",
                 "methodName": "valueChanged"
-            }, {
-                "propName": "required",
-                "methodName": "requiredChanged"
             }, {
                 "propName": "dir",
                 "methodName": "onDirChanged"
@@ -1354,6 +1193,5 @@ export class Textarea {
                 "passive": false
             }];
     }
-    static get attachInternalsMemberName() { return "internals"; }
 }
 let textareaIds = 0;