@ionic/core 8.8.19 → 8.8.20-dev.11787158518.168a2fea

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

@@ -2,7 +2,7 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { Build, Host, forceUpdate, h, writeTask, } from "@stencil/core";
-import { createNotchController, checkInvalidState } from "../../utils/forms/index";
+import { createNotchController, createStartContainerController, 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";
@@ -16,144 +16,189 @@ import { getCounterText } from "../input/input.utils";
  * @slot end - Content to display at the trailing edge of the textarea. (EXPERIMENTAL)
  */
 export class Textarea {
-    constructor() {
-        this.inputId = `ion-textarea-${textareaIds++}`;
-        this.helperTextId = `${this.inputId}-helper-text`;
-        this.errorTextId = `${this.inputId}-error-text`;
-        /**
-         * `true` if the textarea was cleared as a result of the user typing
-         * with `clearOnEdit` enabled.
-         *
-         * Resets when the textarea loses focus.
-         */
-        this.didTextareaClearOnEdit = false;
-        this.inheritedAttributes = {};
-        /**
-         * The `hasFocus` state ensures the focus class is
-         * added regardless of how the element is focused.
-         * The `ion-focused` class only applies when focused
-         * via tabbing, not by clicking.
-         * The `has-focus` logic was added to ensure the class
-         * 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"`.
-         */
-        this.autocapitalize = 'none';
-        /**
-         * Sets the [`autofocus` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) on the native input element.
-         *
-         * This may not be sufficient for the element to be focused on page load. See [managing focus](/docs/developing/managing-focus) for more information.
-         */
-        this.autofocus = false;
-        /**
-         * If `true`, the value will be cleared after focus upon edit.
-         */
-        this.clearOnEdit = false;
-        /**
-         * If `true`, the user cannot interact with the textarea.
-         */
-        this.disabled = false;
-        /**
-         * The name of the control, which is submitted with the form data.
-         */
-        this.name = this.inputId;
-        /**
-         * If `true`, the user cannot modify the value.
-         */
-        this.readonly = false;
-        /**
-         * If `true`, the user must fill in a value before submitting a form.
-         */
-        this.required = false;
-        /**
-         * If `true`, the element will have its spelling and grammar checked.
-         */
-        this.spellcheck = false;
-        /**
-         * If `true`, the textarea container will grow and shrink based
-         * on the contents of the textarea.
-         */
-        this.autoGrow = false;
-        /**
-         * The value of the textarea.
-         */
-        this.value = '';
-        /**
-         * If `true`, a character counter will display the ratio of characters used and the total character limit.
-         * Developers must also set the `maxlength` property for the counter to be calculated correctly.
-         */
-        this.counter = false;
-        /**
-         * Where to place the label relative to the textarea.
-         * `"start"`: The label will appear to the left of the textarea in LTR and to the right in RTL.
-         * `"end"`: The label will appear to the right of the textarea in LTR and to the left in RTL.
-         * `"floating"`: The label will appear smaller and above the textarea when the textarea is focused or it has a value. Otherwise it will appear on top of the textarea.
-         * `"stacked"`: The label will appear smaller and above the textarea regardless even when the textarea is blurred or has no value.
-         * `"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';
-        // `Event` type is used instead of `InputEvent`
-        // since the types from Stencil are not derived
-        // from the element (e.g. textarea and input
-        // should be InputEvent, but all other elements
-        // should be Event).
-        this.onInput = (ev) => {
-            const input = ev.target;
-            if (input) {
-                this.value = input.value || '';
-            }
-            this.emitInputChange(ev);
-        };
-        this.onChange = (ev) => {
-            this.emitValueChange(ev);
-        };
-        this.onFocus = (ev) => {
-            this.hasFocus = true;
-            this.focusedValue = this.value;
-            this.ionFocus.emit(ev);
-        };
-        this.onBlur = (ev) => {
-            this.hasFocus = false;
-            if (this.focusedValue !== this.value) {
-                /**
-                 * Emits the `ionChange` event when the textarea value
-                 * is different than the value when the textarea was focused.
-                 */
-                this.emitValueChange(ev);
-            }
-            this.didTextareaClearOnEdit = false;
-            this.ionBlur.emit(ev);
-        };
-        this.onKeyDown = (ev) => {
-            this.checkClearOnEdit(ev);
-        };
-        /**
-         * Stops propagation when the label is clicked,
-         * otherwise, two clicks will be triggered.
-         */
-        this.onLabelClick = (ev) => {
-            // Only stop propagation if the click was directly on the label
-            // and not on the input or other child elements
-            if (ev.target === ev.currentTarget) {
-                ev.stopPropagation();
-            }
-        };
-    }
+    nativeInput;
+    inputId = `ion-textarea-${textareaIds++}`;
+    helperTextId = `${this.inputId}-helper-text`;
+    errorTextId = `${this.inputId}-error-text`;
+    /**
+     * `true` if the textarea was cleared as a result of the user typing
+     * with `clearOnEdit` enabled.
+     *
+     * Resets when the textarea loses focus.
+     */
+    didTextareaClearOnEdit = false;
+    textareaWrapper;
+    inheritedAttributes = {};
+    originalIonInput;
+    slotMutationController;
+    notchController;
+    notchSpacerEl;
+    startContainerController;
+    startContainerEl;
+    /**
+     * The value of the textarea when the textarea is focused.
+     */
+    focusedValue;
+    el;
+    /**
+     * The `hasFocus` state ensures the focus class is
+     * added regardless of how the element is focused.
+     * The `ion-focused` class only applies when focused
+     * via tabbing, not by clicking.
+     * The `has-focus` logic was added to ensure the class
+     * is applied in both cases.
+     */
+    hasFocus = false;
+    /**
+     * Track validation state for proper aria-live announcements
+     */
+    isInvalid = false;
+    validationObserver;
+    /**
+     * The color to use from your application's color palette.
+     * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
+     * For more information on colors, see [theming](/docs/theming/basics).
+     */
+    color;
+    /**
+     * 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"`.
+     */
+    autocapitalize = 'none';
+    /**
+     * Sets the [`autofocus` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) on the native input element.
+     *
+     * This may not be sufficient for the element to be focused on page load. See [managing focus](/docs/developing/managing-focus) for more information.
+     */
+    autofocus = false;
+    /**
+     * If `true`, the value will be cleared after focus upon edit.
+     */
+    clearOnEdit = false;
+    /**
+     * Set the amount of time, in milliseconds, to wait to trigger the `ionInput` event after each keystroke.
+     */
+    debounce;
     debounceChanged() {
         const { ionInput, debounce, originalIonInput } = this;
         /**
          * If debounce is undefined, we have to manually revert the ionInput emitter in case
          * debounce used to be set to a number. Otherwise, the event would stay debounced.
          */
-        this.ionInput = debounce === undefined ? originalIonInput !== null && originalIonInput !== void 0 ? originalIonInput : ionInput : debounceEvent(ionInput, debounce);
+        this.ionInput = debounce === undefined ? originalIonInput ?? ionInput : debounceEvent(ionInput, debounce);
     }
+    /**
+     * If `true`, the user cannot interact with the textarea.
+     */
+    disabled = false;
+    /**
+     * The fill for the item. If `"solid"` the item will have a background. If
+     * `"outline"` the item will be transparent with a border. Only available in `md` mode.
+     */
+    fill;
+    /**
+     * A hint to the browser for which keyboard to display.
+     * Possible values: `"none"`, `"text"`, `"tel"`, `"url"`,
+     * `"email"`, `"numeric"`, `"decimal"`, and `"search"`.
+     */
+    inputmode;
+    /**
+     * A hint to the browser for which enter key to display.
+     * Possible values: `"enter"`, `"done"`, `"go"`, `"next"`,
+     * `"previous"`, `"search"`, and `"send"`.
+     */
+    enterkeyhint;
+    /**
+     * This attribute specifies the maximum number of characters that the user can enter.
+     */
+    maxlength;
+    /**
+     * This attribute specifies the minimum number of characters that the user can enter.
+     */
+    minlength;
+    /**
+     * The name of the control, which is submitted with the form data.
+     */
+    name = this.inputId;
+    /**
+     * Instructional text that shows before the input has a value.
+     */
+    placeholder;
+    /**
+     * If `true`, the user cannot modify the value.
+     */
+    readonly = false;
+    /**
+     * If `true`, the user must fill in a value before submitting a form.
+     */
+    required = false;
+    /**
+     * If `true`, the element will have its spelling and grammar checked.
+     */
+    spellcheck = false;
+    /**
+     * The visible width of the text control, in average character widths. If it is specified, it must be a positive integer.
+     */
+    cols;
+    /**
+     * The number of visible text lines for the control.
+     */
+    rows;
+    /**
+     * Indicates how the control wraps text.
+     */
+    wrap;
+    /**
+     * If `true`, the textarea container will grow and shrink based
+     * on the contents of the textarea.
+     */
+    autoGrow = false;
+    /**
+     * The value of the textarea.
+     */
+    value = '';
+    /**
+     * If `true`, a character counter will display the ratio of characters used and the total character limit.
+     * Developers must also set the `maxlength` property for the counter to be calculated correctly.
+     */
+    counter = false;
+    /**
+     * A callback used to format the counter text.
+     * By default the counter text is set to "itemLength / maxLength".
+     *
+     * See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this
+     * if you need to access `this` from within the callback.
+     */
+    counterFormatter;
+    /**
+     * Text that is placed under the textarea and displayed when an error is detected.
+     */
+    errorText;
+    /**
+     * Text that is placed under the textarea and displayed when no error is detected.
+     */
+    helperText;
+    /**
+     * The visible label associated with the textarea.
+     *
+     * Use this if you need to render a plaintext label.
+     *
+     * The `label` property will take priority over the `label` slot if both are used.
+     */
+    label;
+    /**
+     * Where to place the label relative to the textarea.
+     * `"start"`: The label will appear to the left of the textarea in LTR and to the right in RTL.
+     * `"end"`: The label will appear to the right of the textarea in LTR and to the left in RTL.
+     * `"floating"`: The label will appear smaller and above the textarea when the textarea is focused or it has a value. Otherwise it will appear on top of the textarea.
+     * `"stacked"`: The label will appear smaller and above the textarea regardless even when the textarea is blurred or has no value.
+     * `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("...").
+     */
+    labelPlacement = 'start';
+    /**
+     * The shape of the textarea. If "round" it will have an increased border radius.
+     */
+    shape;
     /**
      * Update the native input element when the value changes
      */
@@ -173,9 +218,37 @@ export class Textarea {
      * to the inner `<textarea>` element.
      */
     onDirChanged(newValue) {
-        this.inheritedAttributes = Object.assign(Object.assign({}, this.inheritedAttributes), { dir: newValue });
+        this.inheritedAttributes = {
+            ...this.inheritedAttributes,
+            dir: newValue,
+        };
         forceUpdate(this);
     }
+    /**
+     * The `ionChange` event is fired when the user modifies the textarea's value.
+     * Unlike the `ionInput` event, the `ionChange` event is fired when
+     * the element loses focus after its value has been modified.
+     *
+     * This event will not emit when programmatically setting the `value` property.
+     */
+    ionChange;
+    /**
+     * The `ionInput` event is fired each time the user modifies the textarea's value.
+     * Unlike the `ionChange` event, the `ionInput` event is fired for each alteration
+     * to the textarea's value. This typically happens for each keystroke as the user types.
+     *
+     * When `clearOnEdit` is enabled, the `ionInput` event will be fired when
+     * the user clears the textarea by performing a keydown event.
+     */
+    ionInput;
+    /**
+     * Emitted when the input loses focus.
+     */
+    ionBlur;
+    /**
+     * Emitted when the input has focus.
+     */
+    ionFocus;
     /**
      * This prevents the native input from emitting the click event.
      * Instead, the click event from the ion-textarea is emitted.
@@ -189,8 +262,15 @@ export class Textarea {
     }
     connectedCallback() {
         const { el } = this;
-        this.slotMutationController = createSlotMutationController(el, ['label', 'start', 'end'], () => forceUpdate(this));
+        this.slotMutationController = createSlotMutationController(el, ['label', 'start', 'end'], () => {
+            this.startContainerController?.calculateStartContainerWidth();
+            forceUpdate(this);
+        });
         this.notchController = createNotchController(el, () => this.notchSpacerEl, () => this.labelSlot);
+        this.startContainerController = createStartContainerController(el, () => this.startContainerEl, () => {
+            return Build.isBrowser && getIonMode(this) === 'md' && this.fill === 'outline';
+        });
+        this.startContainerController.calculateStartContainerWidth();
         // Watch for class changes to update validation state
         if (Build.isBrowser && typeof MutationObserver !== 'undefined') {
             this.validationObserver = new MutationObserver(() => {
@@ -229,6 +309,10 @@ export class Textarea {
             this.notchController.destroy();
             this.notchController = undefined;
         }
+        if (this.startContainerController) {
+            this.startContainerController.destroy();
+            this.startContainerController = undefined;
+        }
         // Clean up validation observer to prevent memory leaks
         if (this.validationObserver) {
             this.validationObserver.disconnect();
@@ -236,15 +320,18 @@ export class Textarea {
         }
     }
     componentWillLoad() {
-        this.inheritedAttributes = Object.assign(Object.assign({}, inheritAriaAttributes(this.el)), inheritAttributes(this.el, ['data-form-type', 'title', 'tabindex', 'dir']));
+        this.inheritedAttributes = {
+            ...inheritAriaAttributes(this.el),
+            ...inheritAttributes(this.el, ['data-form-type', 'title', 'tabindex', 'dir']),
+        };
     }
     componentDidLoad() {
         this.originalIonInput = this.ionInput;
         this.runAutoGrow();
     }
     componentDidRender() {
-        var _a;
-        (_a = this.notchController) === null || _a === void 0 ? void 0 : _a.calculateNotchWidth();
+        this.notchController?.calculateNotchWidth();
+        this.startContainerController?.calculateStartContainerWidth();
     }
     /**
      * Sets focus on the native `textarea` in `ion-textarea`. Use this method instead of the global
@@ -294,11 +381,10 @@ export class Textarea {
     runAutoGrow() {
         if (this.nativeInput && this.autoGrow) {
             writeTask(() => {
-                var _a;
                 if (this.textareaWrapper) {
                     // Replicated value is an attribute to be used in the stylesheet
                     // to set the inner contents of a pseudo element.
-                    this.textareaWrapper.dataset.replicatedValue = (_a = this.value) !== null && _a !== void 0 ? _a : '';
+                    this.textareaWrapper.dataset.replicatedValue = this.value ?? '';
                 }
             });
         }
@@ -349,6 +435,41 @@ export class Textarea {
     getValue() {
         return this.value || '';
     }
+    // `Event` type is used instead of `InputEvent`
+    // since the types from Stencil are not derived
+    // from the element (e.g. textarea and input
+    // should be InputEvent, but all other elements
+    // should be Event).
+    onInput = (ev) => {
+        const input = ev.target;
+        if (input) {
+            this.value = input.value || '';
+        }
+        this.emitInputChange(ev);
+    };
+    onChange = (ev) => {
+        this.emitValueChange(ev);
+    };
+    onFocus = (ev) => {
+        this.hasFocus = true;
+        this.focusedValue = this.value;
+        this.ionFocus.emit(ev);
+    };
+    onBlur = (ev) => {
+        this.hasFocus = false;
+        if (this.focusedValue !== this.value) {
+            /**
+             * Emits the `ionChange` event when the textarea value
+             * is different than the value when the textarea was focused.
+             */
+            this.emitValueChange(ev);
+        }
+        this.didTextareaClearOnEdit = false;
+        this.ionBlur.emit(ev);
+    };
+    onKeyDown = (ev) => {
+        this.checkClearOnEdit(ev);
+    };
     renderLabel() {
         const { label } = this;
         return (h("div", { class: {
@@ -373,32 +494,29 @@ export class Textarea {
         return this.label !== undefined || this.labelSlot !== null;
     }
     /**
-     * Renders the border container when fill="outline".
+     * 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.
      */
-    renderLabelContainer() {
-        const mode = getIonMode(this);
-        const hasOutlineFill = mode === 'md' && this.fill === 'outline';
-        if (hasOutlineFill) {
-            /**
-             * The outline fill has a special outline
-             * that appears around the textarea and the label.
-             * Certain stacked and floating label placements cause the
-             * label to translate up and create a "cut out"
-             * inside of that border by using the notch-spacer element.
-             */
-            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" })),
-                this.renderLabel(),
-            ];
+    onLabelClick = (ev) => {
+        const target = ev.target;
+        const slotted = target.closest('[slot="start"], [slot="end"]');
+        if (slotted === null || slotted === this.el || !this.el.contains(slotted)) {
+            ev.stopPropagation();
         }
-        /**
-         * If not using the outline style,
-         * we can render just the label.
-         */
-        return this.renderLabel();
+    };
+    /**
+     * Renders the outline border with a notch for the label.
+     */
+    renderOutlineContainer() {
+        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" })));
     }
     /**
      * Renders the helper text or error text values
@@ -446,32 +564,20 @@ export class Textarea {
         return (h("div", { class: "textarea-bottom" }, this.renderHintText(), this.renderCounter()));
     }
     render() {
-        const { inputId, disabled, fill, shape, labelPlacement, el, hasFocus } = this;
+        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 = mode === 'md' && fill !== 'outline' && !inItem;
         const hasValue = this.hasValue();
-        const hasStartEndSlots = el.querySelector('[slot="start"], [slot="end"]') !== null;
+        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, is focused, or has anything in either
-         * the start or end slot.
-         *
-         * If there is content in the start slot, the label would overlap
-         * it if not forced to float. This is also applied to the end slot
-         * because with the default or solid fills, the textarea is not
-         * vertically centered in the container, but the label is. This
-         * causes the slots and label to appear vertically offset from each
-         * other when the label isn't floating above the input. This doesn't
-         * apply to the outline fill, but this was not accounted for to keep
-         * things consistent.
-         *
-         * TODO(FW-5592): Remove hasStartEndSlots condition
+         * the textarea has a value or is focused.
          */
-        const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
-        return (h(Host, { key: '4257e84acd46f43390fa2413d0b8f40e16a37499', class: createColorClasses(this.color, {
+        const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus));
+        return (h(Host, { key: '78da9c96e6a29f19b237f268dd8bfd044afe27b6', class: createColorClasses(this.color, {
                 [mode]: true,
                 'has-value': hasValue,
                 'has-focus': hasFocus,
@@ -480,7 +586,7 @@ export class Textarea {
                 [`textarea-shape-${shape}`]: shape !== undefined,
                 [`textarea-label-placement-${labelPlacement}`]: true,
                 'textarea-disabled': disabled,
-            }) }, h("label", { key: '003da35bad92ab36777b7ae40855541bf900c64a', class: "textarea-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderLabelContainer(), h("div", { key: '3cae2d19f96ba2b18a2d64298fdcc4b64ad34ac7', class: "textarea-wrapper-inner" }, h("div", { key: 'e26cb06763d551f7f83b6ea80349871aab18a016', class: "start-slot-wrapper" }, h("slot", { key: '135ba6db893eaca5f2a785fe61e24f33f56f3765', name: "start" })), h("div", { key: '951eabdd01c5e370790cec8578268361dcc8abdc', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, h("textarea", Object.assign({ key: '13d78f1a934b9f8d85cd9ed386dabc786f953f1d', 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: '699038558019470bccb4853fa65e7aeb069e0baa', class: "end-slot-wrapper" }, h("slot", { key: '19d8c212d7c718aeb6924e10bf8e48cad01314ea', name: "end" }))), shouldRenderHighlight && h("div", { key: '910a9437437ce7cab21e37a1cb4a6b309afda58f', class: "textarea-highlight" })), this.renderBottomContent()));
+            }) }, h("label", { key: 'c5ea3f26e01e66b857d3a1c88dbafbf2dbb81fdb', class: "textarea-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, hasOutlineFill && this.renderOutlineContainer(), h("div", { key: '5a9d0efc8c13d9bd4ec4ceadf1bdb84205c47b3d', class: "textarea-start", ref: (el) => (this.startContainerEl = el) }, h("slot", { key: 'da08262e33f3a5b454847297338a74f07c5b60c9', name: "start" })), h("div", { key: '6461dc7381929eb83679ec07563b7bdf8bfc3f9f', class: "textarea-control" }, this.renderLabel(), h("div", { key: '8f7902a9e6040384d25d0e2061c04f6b49acf187', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, h("textarea", { key: '2149d8b2c23a164c536327c98d7a632e1e85428a', 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: '84f5f42add89875c3f0cce734b512a9e7be81e03', class: "textarea-end" }, h("slot", { key: 'ea654d78013a00b8af33deb89d42c2b7f6c9cb99', name: "end" })), shouldRenderHighlight && h("div", { key: 'b72195d2606816b3b71e65214d78cef1740f4804', class: "textarea-highlight" })), this.renderBottomContent()));
     }
     static get is() { return "ion-textarea"; }
     static get encapsulation() { return "scoped"; }