fix(text-area): export readonly prop (#1043)

Fixes #1009

COMPONENT_INDEX.md

@@ -4110,6 +4110,7 @@ None.
 | rows        | <code>let</code> | No       | <code>number</code>                          | <code>4</code>                                   | Specify the number of rows                      |
 | light       | <code>let</code> | No       | <code>boolean</code>                         | <code>false</code>                               | Set to `true` to enable the light variant       |
 | disabled    | <code>let</code> | No       | <code>boolean</code>                         | <code>false</code>                               | Set to `true` to disable the input              |
+| readonly    | <code>let</code> | No       | <code>boolean</code>                         | <code>false</code>                               | Set to `true` to use the read-only variant      |
 | helperText  | <code>let</code> | No       | <code>string</code>                          | <code>""</code>                                  | Specify the helper text                         |
 | labelText   | <code>let</code> | No       | <code>string</code>                          | <code>""</code>                                  | Specify the label text                          |
 | hideLabel   | <code>let</code> | No       | <code>boolean</code>                         | <code>false</code>                               | Set to `true` to visually hide the label text   |

docs/src/COMPONENT_API.json

@@ -11386,6 +11386,17 @@
           "constant": false,
           "reactive": false
         },
+        {
+          "name": "readonly",
+          "kind": "let",
+          "description": "Set to `true` to use the read-only variant",
+          "type": "boolean",
+          "value": "false",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "constant": false,
+          "reactive": false
+        },
         {
           "name": "helperText",
           "kind": "let",

src/TextArea/TextArea.svelte

@@ -17,6 +17,9 @@
   /**  Set to `true` to disable the input */
   export let disabled = false;
 
+  /** Set to `true` to use the read-only variant */
+  export let readonly = false;
+
   /** Specify the helper text */
   export let helperText = "";
 
@@ -87,11 +90,11 @@
       rows="{rows}"
       value="{value ?? ''}"
       placeholder="{placeholder}"
+      readonly="{readonly}"
       class:bx--text-area="{true}"
       class:bx--text-area--light="{light}"
       class:bx--text-area--invalid="{invalid}"
       {...$$restProps}
-      readonly="{$$restProps.readonly === true ? true : undefined}"
       on:change
       on:input
       on:input="{({ target }) => {

types/TextArea/TextArea.svelte.d.ts

@@ -39,6 +39,12 @@ export interface TextAreaProps
    */
   disabled?: boolean;
 
+  /**
+   * Set to `true` to use the read-only variant
+   * @default false
+   */
+  readonly?: boolean;
+
   /**
    * Specify the helper text
    * @default ""