@ionic/core 8.7.6-dev.11759524961.1cff6814 → 8.7.6-dev.11759752152.17f114d8

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)
@@ -99,6 +100,12 @@ export class Textarea {
          * `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("...").
          */
         this.labelPlacement = 'start';
+        /**
+         * The size of the textarea. If "large" it will increase the height of the textarea, while
+         * "small" and "medium" provide progressively smaller heights. The default size is "medium".
+         * This property only applies to the `"ionic"` theme.
+         */
+        this.size = 'medium';
         // `Event` type is used instead of `InputEvent`
         // since the types from Stencil are not derived
         // from the element (e.g. textarea and input
@@ -380,12 +387,29 @@ export class Textarea {
     get hasLabel() {
         return this.label !== undefined || this.labelSlot !== null;
     }
+    getFill() {
+        const theme = getIonTheme(this);
+        const { fill } = this;
+        if (theme === 'ionic' && fill === undefined) {
+            return 'outline';
+        }
+        return fill;
+    }
+    getShape() {
+        const theme = getIonTheme(this);
+        const { shape } = this;
+        // TODO(ROU-11050): Update theme check when shapes are defined for all themes.
+        if (theme === 'ionic' && shape === undefined) {
+            return 'round';
+        }
+        return shape;
+    }
     /**
      * Renders the border container when fill="outline".
      */
     renderLabelContainer() {
-        const mode = getIonMode(this);
-        const hasOutlineFill = mode === 'md' && this.fill === 'outline';
+        const theme = getIonTheme(this);
+        const hasOutlineFill = theme === 'md' && this.fill === 'outline';
         if (hasOutlineFill) {
             /**
              * The outline fill has a special outline
@@ -454,11 +478,13 @@ export class Textarea {
         return (h("div", { class: "textarea-bottom" }, this.renderHintText(), this.renderCounter()));
     }
     render() {
-        const { inputId, disabled, fill, shape, labelPlacement, el, hasFocus } = this;
-        const mode = getIonMode(this);
+        const { inputId, disabled, readonly, size, labelPlacement, el, hasFocus } = this;
+        const fill = this.getFill();
+        const theme = getIonTheme(this);
+        const shape = this.getShape();
         const value = this.getValue();
         const inItem = hostContext('ion-item', this.el);
-        const shouldRenderHighlight = mode === 'md' && fill !== 'outline' && !inItem;
+        const shouldRenderHighlight = theme === 'md' && fill !== 'outline' && !inItem;
         const hasValue = this.hasValue();
         const hasStartEndSlots = el.querySelector('[slot="start"], [slot="end"]') !== null;
         /**
@@ -479,29 +505,43 @@ export class Textarea {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
-        return (h(Host, { key: '26b46666a92b3f652775bb1c46661f9a30392104', class: createColorClasses(this.color, {
-                [mode]: true,
+        return (h(Host, { key: '48e2eabbe846a187efc692742db695556d938aeb', 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: '2649da816216959ebe1f34cafd9dedbac20ec3c2', class: "textarea-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderLabelContainer(), h("div", { key: 'dca98593efece1b044dbcda045fa70882d715cb2', class: "textarea-wrapper-inner" }, h("div", { key: '2019daf87fddca5ec0b2e336f0376fd9642bae1b', class: "start-slot-wrapper" }, h("slot", { key: '36c423c394a71d08261705b9d6729e756bf65924', name: "start" })), h("div", { key: '0c3ea34105c7eddfa4094371c5d288c50ed10db3', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, h("textarea", Object.assign({ key: 'ce173b83b16aff43d293fa1edef9b66c6676227b', 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: '756e343cfd208bb5ad9ecf08d77cbb0a9606dc7b', class: "end-slot-wrapper" }, h("slot", { key: '0eb596814a037fa4634ff8c5bac0045540edfe21', name: "end" }))), shouldRenderHighlight && h("div", { key: 'df62f896eb6e0e2d1217aa487c198eb82a52bcb8', class: "textarea-highlight" })), this.renderBottomContent()));
+                'textarea-readonly': readonly,
+            }) }, h("label", { key: '3e75d1c9688734ced8ed2d093f0f923667e1db6c', class: "textarea-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderLabelContainer(), h("div", { key: '869a040e9a1cb065f852e1eb0cf96ead4a8313eb', 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: '4d72e9fe76d2b79f1063b293a39f2c04ff490493', class: "textarea-outline" }), h("div", { key: '209f3fb1fc340614c3ad2303604f0445c15838cb', class: "start-slot-wrapper" }, h("slot", { key: '2011ab81e259dbfd3ed731de713d1a9c367ceff9', name: "start" })), h("div", { key: '6c23f82042cbcfdd9b3995968bc8ed741191ef29', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, h("textarea", Object.assign({ key: '1f3ecfcaa9b9e2d83497adbe6c7f0a4ddc8a5cae', 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: '8e0aa4eb359d28f13d3a6df29e76ca439246df01', class: "end-slot-wrapper" }, h("slot", { key: '78bc82fa44eab07e9a596009bc72ced8aebe52a3', name: "end" }))), shouldRenderHighlight && h("div", { key: 'a85b1339432d4e0107b840d746b7bf4f37964df7', 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() {
@@ -643,7 +683,7 @@ export class Textarea {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The fill for the item. If `\"solid\"` the item will have a background. If\n`\"outline\"` the item will be transparent with a border. Only available in `md` mode."
+                    "text": "The fill for the item. If `\"solid\"` the item will have a background. If\n`\"outline\"` the item will be transparent with a border. Only available when the theme is `\"md\"`."
                 },
                 "getter": false,
                 "setter": false,
@@ -1041,19 +1081,39 @@ export class Textarea {
                 "attribute": "shape",
                 "mutable": false,
                 "complexType": {
-                    "original": "'round'",
-                    "resolved": "\"round\" | undefined",
+                    "original": "'soft' | 'round' | 'rectangular'",
+                    "resolved": "\"rectangular\" | \"round\" | \"soft\" | undefined",
                     "references": {}
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The shape of the textarea. If \"round\" it will have an increased border radius."
+                    "text": "Set to `\"soft\"` for a textarea with slightly rounded corners,\n`\"round\"` for a textarea with fully rounded corners, or `\"rectangular\"`\nfor a textarea without rounded corners.\n\nDefaults to `\"round\"` for the `ionic` theme, undefined for all other themes."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false
+            },
+            "size": {
+                "type": "string",
+                "attribute": "size",
+                "mutable": false,
+                "complexType": {
+                    "original": "'small' | 'medium' | 'large'",
+                    "resolved": "\"large\" | \"medium\" | \"small\" | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The size of the textarea. If \"large\" it will increase the height of the textarea, while\n\"small\" and \"medium\" provide progressively smaller heights. The default size is \"medium\".\nThis property only applies to the `\"ionic\"` theme."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'medium'"
             }
         };
     }