feat: add inputSearchSelect, add modal on textareaclick, small fixes

src/lib/elements/forms/inputSelectSearch.svelte

@@ -22,7 +22,7 @@
     export let disabled = false;
     export let autofocus = false;
     export let interactiveOutput = false;
-    // Input value
+    export let stretch = true;
     export let search = '';
     // The actual selected value
     export let value: Option['value'];
@@ -82,9 +82,8 @@
         value = option.value;
         search = option.label;
         // It's not working without this line.
-        !$$slots.output && (element.value = search);
+        $$slots.output ? (search = '') : (element.value = search);
         hasFocus = false;
-        search = '';
         dispatch('select', option);
     }
 
@@ -99,7 +98,7 @@
     $: showClearBtn = (hasFocus && search) || value;
 </script>
 
-<li class="u-position-relative form-item u-stretch">
+<li class="u-position-relative form-item" class:u-stretch={stretch}>
     <DropList
         bind:show={hasFocus}
         noStyle

src/lib/elements/forms/inputTextarea.svelte

@@ -3,6 +3,7 @@
     import { FormItem, Helper, Label } from '.';
     import NullCheckbox from './nullCheckbox.svelte';
     import TextCounter from './textCounter.svelte';
+    import { clickOnEnter } from '$lib/helpers/a11y';
 
     export let label: string;
     export let showLabel = true;
@@ -57,7 +58,7 @@
         {label}
     </Label>
 
-    <div class="input-text-wrapper">
+    <div class="input-text-wrapper" on:click on:keydown={clickOnEnter}>
         <textarea
             {id}
             {placeholder}

src/routes/console/project-[project]/auth/templates/+page.svelte

@@ -110,8 +110,9 @@
             Use templates to send and process account management emails. <a
                 href="https://appwrite.io/docs"
                 class="link">
-                Learn more about Email templates
-            </a>. <!-- TODO Docs link -->
+                Learn more about Email templates.
+            </a>
+            <!-- TODO Docs link -->
         </p>
 
         <svelte:fragment slot="aside">

src/routes/console/project-[project]/auth/templates/editMessage.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+    import { Modal } from '$lib/components';
+    import Output from '$lib/components/output.svelte';
+    import { Button, FormList, InputTextarea } from '$lib/elements/forms';
+    import {
+        Table,
+        TableBody,
+        TableCell,
+        TableCellHead,
+        TableCellText,
+        TableHeader,
+        TableRow
+    } from '$lib/elements/table';
+
+    export let show = false;
+    export let message: string;
+    export let data: unknown[];
+
+    let error: string;
+
+    function update() {
+        console.log('test');
+    }
+</script>
+
+<Modal {error} onSubmit={update} size="big" bind:show on:close>
+    <svelte:fragment slot="header">Edit Message</svelte:fragment>
+    <FormList>
+        <InputTextarea
+            bind:value={message}
+            id="message"
+            label="Message"
+            placeholder="Enter your message" />
+    </FormList>
+
+    <Table noMargin noStyles>
+        <TableHeader>
+            <TableCellHead>Variables</TableCellHead>
+            <TableCellHead width={180} />
+        </TableHeader>
+        <TableBody>
+            {#each data?.variables as variable}
+                <TableRow>
+                    <TableCell title="variable">
+                        <Output value={variable.key} hideCopyIcon>
+                            {variable.key}
+                        </Output>
+                    </TableCell>
+                    <TableCellText title="name">
+                        {variable.name}
+                    </TableCellText>
+                </TableRow>
+            {/each}
+        </TableBody>
+    </Table>
+    <svelte:fragment slot="footer">
+        <Button secondary on:click={() => (show = false)}>Cancel</Button>
+        <Button disabled submit>Update</Button>
+    </svelte:fragment>
+</Modal>

src/routes/console/project-[project]/auth/templates/emailInviteTemplate.svelte

@@ -5,7 +5,7 @@
     import Box from '$lib/components/box.svelte';
 
     let locale = 'en-us';
-    export let localeCodes: any[];
+    export let localeCodes: string[];
     export let loadEmailTemplate: (type: string, locale: string) => Promise<void> | void;
     export let saveEmailTemplate: (type: string, data: any) => Promise<void> | void;
 
@@ -28,7 +28,7 @@
 </script>
 
 <Box>
-    <LocaleOptions {localeCodes} on:change={onLocaleChange} bind:value={locale} />
+    <LocaleOptions {localeCodes} on:select={onLocaleChange} bind:value={locale} />
     <EmailTemplate
         senderName={template?.senderName}
         senderEmail={template?.senderEmail}

src/routes/console/project-[project]/auth/templates/emailMagicUrlTemplate.svelte

@@ -5,7 +5,7 @@
     import Box from '$lib/components/box.svelte';
 
     let locale = 'en-us';
-    export let localeCodes: any[];
+    export let localeCodes: string[];
     export let loadEmailTemplate: (type: string, locale: string) => Promise<void> | void;
     export let saveEmailTemplate: (type: string, data: any) => Promise<void> | void;
 
@@ -27,7 +27,7 @@
 </script>
 
 <Box>
-    <LocaleOptions {localeCodes} on:change={onLocaleChange} bind:value={locale} />
+    <LocaleOptions {localeCodes} on:select={onLocaleChange} bind:value={locale} />
     <EmailTemplate
         senderName={template?.senderName}
         senderEmail={template?.senderEmail}

src/routes/console/project-[project]/auth/templates/emailRecoveryTemplate.svelte

@@ -5,7 +5,7 @@
     import Box from '$lib/components/box.svelte';
 
     let locale = 'en-us';
-    export let localeCodes: any[];
+    export let localeCodes: string[];
     export let loadEmailTemplate: (type: string, locale: string) => Promise<void> | void;
     export let saveEmailTemplate: (type: string, data: any) => Promise<void> | void;
 
@@ -28,7 +28,7 @@
 </script>
 
 <Box>
-    <LocaleOptions {localeCodes} on:change={onLocaleChange} bind:value={locale} />
+    <LocaleOptions {localeCodes} on:select={onLocaleChange} bind:value={locale} />
     <EmailTemplate
         senderName={template?.senderName}
         senderEmail={template?.senderEmail}

src/routes/console/project-[project]/auth/templates/emailTemplate.svelte

@@ -7,13 +7,16 @@
         InputText,
         InputTextarea
     } from '$lib/elements/forms';
+    import EditMessage from './editMessage.svelte';
     export let onSubmit: (data: any) => Promise<void> | void;
 
     export let senderName: string;
     export let senderEmail: string;
     export let message: string;
     export let subject: string;
 
+    let showEdit = false;
+
     function submit() {
         if (onSubmit) {
             onSubmit({ senderName, senderEmail, message, subject });
@@ -28,10 +31,22 @@
             label="Sender Name"
             bind:value={senderName}
             placeholder={'{{project}}'} />
-        <InputEmail bind:value={senderEmail} id="senderEmail" label="Sender Email" placeholder="" />
+        <InputEmail
+            bind:value={senderEmail}
+            id="senderEmail"
+            label="Sender Email"
+            placeholder="Enter sender email" />
         <InputEmail id="replyTo" label="Reply to" placeholder="DoNotReply" />
-        <InputText bind:value={subject} id="subject" label="Subject" />
-        <InputTextarea bind:value={message} id="message" label="Message" />
+        <InputText bind:value={subject} id="subject" label="Subject" placeholder="Enter subject" />
+        <InputTextarea
+            bind:value={message}
+            id="message"
+            label="Message"
+            placeholder="Enter your message"
+            readonly
+            on:click={() => (showEdit = true)} />
         <Button submit>Update</Button>
     </FormList>
 </Form>
+
+<EditMessage {message} bind:show={showEdit} />

src/routes/console/project-[project]/auth/templates/emailVerificationTemplate.svelte

@@ -2,10 +2,9 @@
     import { afterUpdate } from 'svelte';
     import EmailTemplate from './emailTemplate.svelte';
     import LocaleOptions from './localeOptions.svelte';
-    import Box from '$lib/components/box.svelte';
 
     let locale = 'en-us';
-    export let localeCodes: any[];
+    export let localeCodes: string[];
     export let loadEmailTemplate: (type: string, locale: string) => Promise<void> | void;
     export let saveEmailTemplate: (type: string, data: any) => Promise<void> | void;
 
@@ -27,12 +26,12 @@
     }
 </script>
 
-<Box>
-    <LocaleOptions {localeCodes} on:change={onLocaleChange} bind:value={locale} />
+<div class="box">
+    <LocaleOptions {localeCodes} on:select={onLocaleChange} bind:value={locale} />
     <EmailTemplate
         senderName={template?.senderName}
         senderEmail={template?.senderEmail}
         subject={template?.subject}
         message={template?.message}
         onSubmit={(data) => saveEmailTemplate('verification', { ...data, locale })} />
-</Box>
+</div>

src/routes/console/project-[project]/auth/templates/localeOptions.svelte

@@ -1,17 +1,34 @@
 <script lang="ts">
-    import InputSelect from '$lib/elements/forms/inputSelect.svelte';
-    export let localeCodes: any[];
+    import { InputSelectSearch } from '$lib/elements/forms';
+
+    export let localeCodes: string[] = ['en', 'en-US', 'en-GB'];
     export let value: string;
-</script>
 
-<InputSelect
-    on:change
-    label="Language"
-    id="language"
-    bind:value
-    options={[
-        ...localeCodes.map((code) => ({
-            label: code.name,
-            value: code.code
+    let search: string;
+
+    $: options = localeCodes
+        .map((code) => ({
+            label: code,
+            value: code
         }))
-    ]} />
+        .filter((option) => option.label.toLowerCase().startsWith(search?.toLowerCase()));
+</script>
+
+<div class="u-flex u-main-space-between">
+    <div>
+        <span class="icon-translate" />
+        <span class="text">{value}</span>
+    </div>
+    <InputSelectSearch
+        on:select
+        label="Language"
+        id="language"
+        placeholder="Select a language"
+        name="locale"
+        bind:value
+        bind:search
+        stretch={false}
+        showLabel={false}
+        interactiveOutput
+        {options} />
+</div>