2 files changed, 53 insertions, 0 deletions
diff --git a/apps/web-shared/src/components/form/index.ts b/apps/web-shared/src/components/form/index.ts
new file mode 100644
index 0000000..08769bd
--- /dev/null
+++ b/apps/web-shared/src/components/form/index.ts
@@ -0,0 +1,5 @@
+import Textarea from "./textarea.svelte";
+
+export {
+    Textarea
+};
diff --git a/apps/web-shared/src/components/form/textarea.svelte b/apps/web-shared/src/components/form/textarea.svelte
new file mode 100644
index 0000000..b313d2e
--- /dev/null
+++ b/apps/web-shared/src/components/form/textarea.svelte
@@ -0,0 +1,48 @@
+<script lang="ts">
+    export let id;
+    export let disabled = false;
+    export let loading = false;
+    export let rows = 2;
+    export let cols = 0;
+    export let name;
+    export let placeholder;
+    export let value;
+    export let label;
+    export let errorText;
+
+    $: shared_props = {
+        rows: rows || null,
+        cols: cols || null,
+        name: name || null,
+        id: id || null,
+        disabled: disabled || null,
+        class: [`form-control ${loading ? "c-disabled loading" : ""}`, $$restProps.class ?? ""].filter(Boolean).join(" "),
+    };
+
+    let textarea;
+    let scrollHeight = 0;
+
+    $:if (textarea) {
+        scrollHeight = textarea.scrollHeight;
+    }
+
+    function on_input(event) {
+        event.target.style.height = "auto";
+        event.target.style.height = (this.scrollHeight) + "px";
+    }
+</script>
+
+{#if label}
+    <label for="{id}"
+           class="form-label margin-bottom-xxs">{label}</label>
+{/if}
+<textarea {...shared_props}
+          {placeholder}
+          style="overflow-y:hidden;min-height:calc(1.5em + .75rem + 2px);{scrollHeight ? 'height:{scrollHeight}px' : ''};"
+          bind:value={value}
+          bind:this={textarea}
+          on:input={on_input}
+></textarea>
+{#if errorText}
+    <small class="color-error">{errorText}</small>
+{/if}