@ionic/core 8.4.2-dev.11736265112.120bf7af → 8.4.2-dev.11736507189.18234064

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)
@@ -92,6 +93,7 @@ export class Textarea {
         this.label = undefined;
         this.labelPlacement = 'start';
         this.shape = undefined;
+        this.size = 'medium';
     }
     debounceChanged() {
         const { ionInput, debounce, originalIonInput } = this;
@@ -275,12 +277,21 @@ export class Textarea {
     get hasLabel() {
         return this.label !== undefined || this.labelSlot !== null;
     }
+    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
@@ -349,11 +360,12 @@ 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, fill, size, labelPlacement, el, hasFocus } = this;
+        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;
         /**
@@ -374,29 +386,42 @@ export class Textarea {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
-        return (h(Host, { key: 'd6e25c83d8eab8cb1a5b6ab411c9a13847f69f8d', class: createColorClasses(this.color, {
-                [mode]: true,
+        return (h(Host, { key: 'f55d0923fb64f3feebb6f010737e108cedc4913b', 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: 'f840a5be2b776a4b9c18c6da24e0b7d3d4838fee', class: "textarea-wrapper", htmlFor: inputId }, this.renderLabelContainer(), h("div", { key: '979461fc0d4684926d79d75759c63c6867b7622b', class: "textarea-wrapper-inner" }, h("div", { key: '88f0d5d4bac29597cc2588e5b2ed72fb4fbe153d', class: "start-slot-wrapper" }, h("slot", { key: '21dcca0e59c1260e3d0d1e126c1c590de15c4bad', name: "start" })), h("div", { key: '3c48a4bb3d763a389d3429123e7c110064b9b8d4', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, h("textarea", Object.assign({ key: '1550599ad15b3f215c104c014e90711f073ace8b', 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: '4f01ab4d2994a6de6f49eb9ed2e310d00daf21b2', class: "end-slot-wrapper" }, h("slot", { key: '501e288b6807e039972bb4f0b63906114255518a', name: "end" }))), shouldRenderHighlight && h("div", { key: 'd3008eed34494aa9f8e98a28eac3b465dc4c2bd0', class: "textarea-highlight" })), this.renderBottomContent()));
+            }) }, h("label", { key: '5fb429dda149a3159569073f64d14080a65d9e5b', class: "textarea-wrapper", htmlFor: inputId }, this.renderLabelContainer(), h("div", { key: '39d416409413dd02bae0657e634ceba31d60cf04', 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: 'b92842623b9e616c11547bc114336fb8142a1f4f', class: "textarea-outline" }), h("div", { key: '626e89db3206abaf7d99565d54b53ffd6ca550d2', class: "start-slot-wrapper" }, h("slot", { key: '6a5e9ea830e9b16b581ba2b64c08493a5f0b539e', name: "start" })), h("div", { key: '429d01b9dff97e7d6a39aaa0e6bf827ba74f4c66', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, h("textarea", Object.assign({ key: '52997c9aa99fb8dd615f171946e84ebbd183e241', 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: '3fbf46dd617f5da8b05d56b13b3a9b837c9f154b', class: "end-slot-wrapper" }, h("slot", { key: 'b3970701afbac89216442616cd46f0f9e35c638e', name: "end" }))), shouldRenderHighlight && h("div", { key: '1ab15048762b7231dc6158e1f7e347bf68988433', 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() {
@@ -421,8 +446,6 @@ export class Textarea {
                     "tags": [],
                     "text": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics)."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "color",
                 "reflect": true
             },
@@ -440,8 +463,6 @@ export class Textarea {
                     "tags": [],
                     "text": "Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.\nAvailable options: `\"off\"`, `\"none\"`, `\"on\"`, `\"sentences\"`, `\"words\"`, `\"characters\"`."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "autocapitalize",
                 "reflect": false,
                 "defaultValue": "'none'"
@@ -460,8 +481,6 @@ export class Textarea {
                     "tags": [],
                     "text": "Sets the [`autofocus` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) on the native input element.\n\nThis may not be sufficient for the element to be focused on page load. See [managing focus](/docs/developing/managing-focus) for more information."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "autofocus",
                 "reflect": false,
                 "defaultValue": "false"
@@ -480,8 +499,6 @@ export class Textarea {
                     "tags": [],
                     "text": "If `true`, the value will be cleared after focus upon edit."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "clear-on-edit",
                 "reflect": false,
                 "defaultValue": "false"
@@ -500,8 +517,6 @@ export class Textarea {
                     "tags": [],
                     "text": "Set the amount of time, in milliseconds, to wait to trigger the `ionInput` event after each keystroke."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "debounce",
                 "reflect": false
             },
@@ -519,8 +534,6 @@ export class Textarea {
                     "tags": [],
                     "text": "If `true`, the user cannot interact with the textarea."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
@@ -537,10 +550,8 @@ 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,
                 "attribute": "fill",
                 "reflect": false
             },
@@ -558,8 +569,6 @@ export class Textarea {
                     "tags": [],
                     "text": "A hint to the browser for which keyboard to display.\nPossible values: `\"none\"`, `\"text\"`, `\"tel\"`, `\"url\"`,\n`\"email\"`, `\"numeric\"`, `\"decimal\"`, and `\"search\"`."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "inputmode",
                 "reflect": false
             },
@@ -577,8 +586,6 @@ export class Textarea {
                     "tags": [],
                     "text": "A hint to the browser for which enter key to display.\nPossible values: `\"enter\"`, `\"done\"`, `\"go\"`, `\"next\"`,\n`\"previous\"`, `\"search\"`, and `\"send\"`."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "enterkeyhint",
                 "reflect": false
             },
@@ -596,8 +603,6 @@ export class Textarea {
                     "tags": [],
                     "text": "This attribute specifies the maximum number of characters that the user can enter."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "maxlength",
                 "reflect": false
             },
@@ -615,8 +620,6 @@ export class Textarea {
                     "tags": [],
                     "text": "This attribute specifies the minimum number of characters that the user can enter."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "minlength",
                 "reflect": false
             },
@@ -634,8 +637,6 @@ export class Textarea {
                     "tags": [],
                     "text": "The name of the control, which is submitted with the form data."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "name",
                 "reflect": false,
                 "defaultValue": "this.inputId"
@@ -654,8 +655,6 @@ export class Textarea {
                     "tags": [],
                     "text": "Instructional text that shows before the input has a value."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "placeholder",
                 "reflect": false
             },
@@ -673,8 +672,6 @@ export class Textarea {
                     "tags": [],
                     "text": "If `true`, the user cannot modify the value."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "readonly",
                 "reflect": false,
                 "defaultValue": "false"
@@ -693,8 +690,6 @@ export class Textarea {
                     "tags": [],
                     "text": "If `true`, the user must fill in a value before submitting a form."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "required",
                 "reflect": false,
                 "defaultValue": "false"
@@ -713,8 +708,6 @@ export class Textarea {
                     "tags": [],
                     "text": "If `true`, the element will have its spelling and grammar checked."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "spellcheck",
                 "reflect": false,
                 "defaultValue": "false"
@@ -733,8 +726,6 @@ export class Textarea {
                     "tags": [],
                     "text": "The visible width of the text control, in average character widths. If it is specified, it must be a positive integer."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "cols",
                 "reflect": true
             },
@@ -752,8 +743,6 @@ export class Textarea {
                     "tags": [],
                     "text": "The number of visible text lines for the control."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "rows",
                 "reflect": false
             },
@@ -771,8 +760,6 @@ export class Textarea {
                     "tags": [],
                     "text": "Indicates how the control wraps text."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "wrap",
                 "reflect": false
             },
@@ -790,8 +777,6 @@ export class Textarea {
                     "tags": [],
                     "text": "If `true`, the textarea container will grow and shrink based\non the contents of the textarea."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "auto-grow",
                 "reflect": true,
                 "defaultValue": "false"
@@ -810,8 +795,6 @@ export class Textarea {
                     "tags": [],
                     "text": "The value of the textarea."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "value",
                 "reflect": false,
                 "defaultValue": "''"
@@ -830,8 +813,6 @@ export class Textarea {
                     "tags": [],
                     "text": "If `true`, a character counter will display the ratio of characters used and the total character limit.\nDevelopers must also set the `maxlength` property for the counter to be calculated correctly."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "counter",
                 "reflect": false,
                 "defaultValue": "false"
@@ -849,9 +830,7 @@ export class Textarea {
                 "docs": {
                     "tags": [],
                     "text": "A callback used to format the counter text.\nBy default the counter text is set to \"itemLength / maxLength\".\n\nSee https://ionicframework.com/docs/troubleshooting/runtime#accessing-this\nif you need to access `this` from within the callback."
-                },
-                "getter": false,
-                "setter": false
+                }
             },
             "errorText": {
                 "type": "string",
@@ -867,8 +846,6 @@ export class Textarea {
                     "tags": [],
                     "text": "Text that is placed under the textarea and displayed when an error is detected."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "error-text",
                 "reflect": false
             },
@@ -886,8 +863,6 @@ export class Textarea {
                     "tags": [],
                     "text": "Text that is placed under the textarea and displayed when no error is detected."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "helper-text",
                 "reflect": false
             },
@@ -905,8 +880,6 @@ export class Textarea {
                     "tags": [],
                     "text": "The visible label associated with the textarea.\n\nUse this if you need to render a plaintext label.\n\nThe `label` property will take priority over the `label` slot if both are used."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "label",
                 "reflect": false
             },
@@ -924,8 +897,6 @@ export class Textarea {
                     "tags": [],
                     "text": "Where to place the label relative to the textarea.\n`\"start\"`: The label will appear to the left of the textarea in LTR and to the right in RTL.\n`\"end\"`: The label will appear to the right of the textarea in LTR and to the left in RTL.\n`\"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.\n`\"stacked\"`: The label will appear smaller and above the textarea regardless even when the textarea is blurred or has no value.\n`\"fixed\"`: The label has the same behavior as `\"start\"` except it also has a fixed width. Long text will be truncated with ellipses (\"...\")."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "label-placement",
                 "reflect": false,
                 "defaultValue": "'start'"
@@ -934,20 +905,36 @@ export class Textarea {
                 "type": "string",
                 "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,
                 "attribute": "shape",
                 "reflect": false
+            },
+            "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."
+                },
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "'medium'"
             }
         };
     }