From 66157fc9b87db01af0255c8fb008f135b3484feb Mon Sep 17 00:00:00 2001
From: IshiniAvindya <ishiniavindya2000@gmail.com>
Date: Tue, 26 Dec 2023 21:51:56 +0100
Subject: [PATCH 1/3] TextAreaSlot fixes #46

added start and end slots
---
 src/lib/components/Textarea/Textarea.svelte | 129 +++++++++++++++-----
 src/routes/[[slug]]/docs/Textarea.svelte    |  44 +++++++
 2 files changed, 142 insertions(+), 31 deletions(-)

diff --git a/src/lib/components/Textarea/Textarea.svelte b/src/lib/components/Textarea/Textarea.svelte
index 4765f5f5..f82a931e 100644
--- a/src/lib/components/Textarea/Textarea.svelte
+++ b/src/lib/components/Textarea/Textarea.svelte
@@ -4,35 +4,63 @@
     export let rows : number = 5;
     export let cols : number = 40;
     export let state : "default" | "success" | "warning" | "error" = "default";
+
+    let input: HTMLInputElement;
 </script>
 
-<textarea 
-    bind:value={value}
 
-    on:keyup
-    on:keydown
-    on:keypress
-    on:focus
-    on:blur
-    on:click
-    on:mouseover
-    on:mouseenter
-    on:mouseleave
-    on:change
-    on:input
+<span class="input-wrap state-{state}" 
+    class:block
+    on:click={() => input.focus()}
+    on:keydown={(e) => {
+        if (e.key === 'Enter') {
+            input.blur();
+        }
+    }}
+    role="textbox"
+    tabindex="0"   
+>
 
-    {rows}
-    {cols}
+    {#if $$slots.start}
+        <span class="slot start" 
+            
+        >
+            <slot name="start" />
+        </span>
+    {/if}
 
-    {...$$restProps}
+    <textarea 
+        bind:value={value}
+        bind:this={input}
 
-    class:block
-    class="state-{state}"
+        on:keyup
+        on:keydown
+        on:keypress
+        on:focus
+        on:blur
+        on:click
+        on:mouseover
+        on:mouseenter
+        on:mouseleave
+        on:change
+        on:input
+
+        {rows}
+        {cols}
+
+        {...$$restProps}
     
-></textarea>
+    ></textarea>
+
+    {#if $$slots.end}
+        <span class="slot end">
+            <slot name="end" />
+        </span>
+    {/if}
+</span>
 
 <style lang="scss">
-    textarea {
+    .input-wrap {
         padding: 10px 15px;
         background-color: var(--input);
         transition: .2s box-shadow;
@@ -42,39 +70,78 @@
         border: none;
         transition: .2s box-shadow;
         max-width: 100%;
+        color: inherit;
+
+        display: inline-flex;
+        resize: vertical;
+        overflow: auto;
+        align-items: flex-start;
+        justify-content: center;
+
+        &:focus-within {
+            outline: 0;
+            box-shadow: 0 0 0 var(--local-shadow-size) var(--accent-light);
+        }
 
         --local-shadow-size: 2px;
     }
-    textarea:focus {
-        box-shadow:  0 0 0 var(--local-shadow-size) var(--accent-light);
-    }
-    textarea.block {
+    
+    .input-wrap.block {
         display: block;
         width: 100%;
         resize: vertical;
     }
 
-    textarea:focus-visible {
+    .input-wrap:focus-visible {
         outline: 0;
     }
 
-    textarea.state-error {
+    .input-wrap.state-error {
         box-shadow: 0 0 0 var(--local-shadow-size) var(--red-light);
-        &:focus {
+        &:focus-within {
             box-shadow: 0 0 0 calc(var(--local-shadow-size) + 1px) var(--red-light);
         }
     }
-    textarea.state-success {
+    .input-wrap.state-success {
         box-shadow: 0 0 0 2px var(--green-light);
-        &:focus {
+        &:focus-within {
             box-shadow: 0 0 0 calc(var(--local-shadow-size) + 1px) var(--green-light);
         }
     }
-    textarea.state-warning {
+    .input-wrap.state-warning {
         box-shadow: 0 0 0 2px var(--orange-light);
-        &:focus {
+        &:focus-within {
             box-shadow: 0 0 0 calc(var(--local-shadow-size) + 1px) var(--orange-light);
         }
     }
 
+
+    .input-wrap .slot {
+        padding: 0 10px;
+    }
+
+    .input-wrap .slot.start {
+        margin-right: 10px;
+        
+    }
+
+    .input-wrap .slot.end {
+        margin-left: 10px;
+    }
+
+    .input-wrap textarea {
+        flex: 1;
+        width: 100%;
+        border: none;
+        font-family: inherit;
+        font-size: inherit;
+        background: transparent;
+        padding: 0;
+        margin: 0;
+        &:focus {
+            outline: none;
+        }
+        resize: none;
+    }
+
 </style>
\ No newline at end of file
diff --git a/src/routes/[[slug]]/docs/Textarea.svelte b/src/routes/[[slug]]/docs/Textarea.svelte
index 1bf8fb2b..f9d1d8d5 100644
--- a/src/routes/[[slug]]/docs/Textarea.svelte
+++ b/src/routes/[[slug]]/docs/Textarea.svelte
@@ -4,6 +4,8 @@
 	import CodeBlock from '../../../lib/components/CodeBlock/CodeBlock.svelte';
     import Table from "$lib/components/Table/Table.svelte";
     import TableRow from "$lib/components/Table/TableRow.svelte";
+    import { IconPen } from '@hyvor/icons';
+    import Loader from './../../../lib/components/Loader/Loader.svelte';
 
     let val1 = "";
 </script>
@@ -68,6 +70,31 @@
     All other properties are passed through to the native <code>{"<textarea>"}</code> element.
 </p>
 
+<h2 id="slots">Slots</h2>
+
+<Table columns="2fr 3fr">
+
+    <TableRow head>
+        <div>Name</div>
+        <div>Description</div>
+    </TableRow>
+
+    <TableRow>
+        <div><code>start</code></div>
+        <div>
+            Content to be displayed at the start of the input.
+        </div>
+    </TableRow>
+    
+    <TableRow>
+        <div><code>end</code></div>
+        <div>
+            Content to be displayed at the end of the input.
+        </div>
+    </TableRow>
+
+</Table>
+
 <h2 id="examples">Examples</h2>
 
 <h3 id="basic">Basic</h3>
@@ -109,4 +136,21 @@
 
 <CodeResult>
     <Textarea placeholder="Custom cols/rows" cols={20} rows={6} />
+</CodeResult>
+
+
+<h3 id="slots">Slots</h3>
+
+<CodeBlock code={`
+    <Textarea placeholder="Write a post">
+        <IconPen slot="start" color="var(--text-light)" />
+        <Loader slot="end" size="small" colorTrack="var(--accent-light)"/>
+    </Textarea>
+`} />
+
+<CodeResult>
+    <Textarea placeholder="Write a post">
+        <IconPen slot="start" color="var(--text-light)" />
+        <Loader slot="end" size="small" colorTrack="var(--accent-light)"/>
+    </Textarea>
 </CodeResult>
\ No newline at end of file

From 4cff4f0e8814a3be79ffc7b9900f9a47478a0974 Mon Sep 17 00:00:00 2001
From: IshiniAvindya <ishiniavindya2000@gmail.com>
Date: Tue, 26 Dec 2023 21:56:27 +0100
Subject: [PATCH 2/3] Update - after fixes #55

---
 src/lib/components/Textarea/Textarea.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/Textarea/Textarea.svelte b/src/lib/components/Textarea/Textarea.svelte
index f82a931e..23785bb1 100644
--- a/src/lib/components/Textarea/Textarea.svelte
+++ b/src/lib/components/Textarea/Textarea.svelte
@@ -31,7 +31,7 @@
 
     <textarea 
         bind:value={value}
-        bind:this={input}
+        
 
         on:keyup
         on:keydown

From 7880ab4965db844eb5e4670bbac842aea1b1b3c8 Mon Sep 17 00:00:00 2001
From: IshiniAvindya <ishiniavindya2000@gmail.com>
Date: Tue, 26 Dec 2023 21:59:26 +0100
Subject: [PATCH 3/3] update

---
 src/lib/components/Textarea/Textarea.svelte | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/lib/components/Textarea/Textarea.svelte b/src/lib/components/Textarea/Textarea.svelte
index 23785bb1..4669c847 100644
--- a/src/lib/components/Textarea/Textarea.svelte
+++ b/src/lib/components/Textarea/Textarea.svelte
@@ -5,7 +5,7 @@
     export let cols : number = 40;
     export let state : "default" | "success" | "warning" | "error" = "default";
 
-    let input: HTMLInputElement;
+    let input: HTMLTextAreaElement;
 </script>
 
 
@@ -31,6 +31,7 @@
 
     <textarea 
         bind:value={value}
+        bind:this={input}
         
 
         on:keyup