@ionic/core 9.0.0 → 9.0.1-dev.11787248963.10a00c73

package/dist/esm/ion-textarea.entry.js

@@ -1,13 +1,13 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { r as registerInstance, c as createEvent, g as getElement, i as forceUpdate, w as writeTask, h, d as Host } from './index-ChhhtsGZ.js';
-import { c as createSlotMutationController, a as createNotchController, b as createStartContainerController } from './slot-mutation-controller-DiE_C9un.js';
+import { r as registerInstance, c as createEvent, i as forceUpdate, w as writeTask, h, d as Host, g as getElement } from './index-CKYcsw8f.js';
+import { c as createSlotMutationController, a as createNotchController, b as createStartContainerController } from './slot-mutation-controller-rS_T3FDR.js';
 import { c as checkInvalidState } from './validity-DJztqcrH.js';
-import { d as debounceEvent, b as inheritAttributes, i as inheritAriaAttributes, c as componentOnReady } from './helpers-CAGf8Wgp.js';
+import { d as debounceEvent, b as inheritAttributes, i as inheritAriaAttributes, c as componentOnReady } from './helpers-BIgoInJU.js';
 import { h as hostContext, c as createColorClasses } from './theme-byZM6qHV.js';
-import { b as getIonMode } from './ionic-global-BVB7BrLT.js';
-import { g as getCounterText } from './input.utils-B1ValN_N.js';
+import { b as getIonMode } from './ionic-global-lrowsHfi.js';
+import { g as getCounterText } from './input.utils-BxyH9l1w.js';
 import './index-ZjP4CjeZ.js';
 import './dir-Dojwmvde.js';
 
@@ -22,70 +22,140 @@ const Textarea = class {
         this.ionInput = createEvent(this, "ionInput", 7);
         this.ionBlur = createEvent(this, "ionBlur", 7);
         this.ionFocus = createEvent(this, "ionFocus", 7);
+        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 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) => {
+            const target = ev.target;
+            const slotted = target.closest('[slot="start"], [slot="end"]');
+            if (slotted === null || slotted === this.el || !this.el.contains(slotted)) {
+                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;
-    get el() { return getElement(this); }
-    /**
-     * 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;
         /**
@@ -94,118 +164,6 @@ const Textarea = class {
          */
         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
      */
@@ -231,31 +189,6 @@ const Textarea = class {
         };
         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.
@@ -442,41 +375,6 @@ const Textarea = class {
     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: {
@@ -500,22 +398,6 @@ const Textarea = class {
     get hasLabel() {
         return this.label !== undefined || this.labelSlot !== null;
     }
-    /**
-     * 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.
-     */
-    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();
-        }
-    };
     /**
      * Renders the outline border with a notch for the label.
      */
@@ -595,6 +477,7 @@ const Textarea = class {
                 'textarea-disabled': disabled,
             }) }, 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()));
     }
+    get el() { return getElement(this); }
     static get watchers() { return {
         "debounce": [{
                 "debounceChanged": 0