windmill-components 1.57.4 → 1.60.0

package/components/AddUser.svelte

@@ -0,0 +1,66 @@
+<script>import { sendUserToast } from '../utils';
+import { createEventDispatcher } from 'svelte';
+import { workspaceStore } from '../stores';
+import { WorkspaceService } from '../gen';
+import { Button, ToggleButton, ToggleButtonGroup } from './common';
+import Tooltip from './Tooltip.svelte';
+const dispatch = createEventDispatcher();
+let email;
+let username;
+function handleKeyUp(event) {
+    const key = event.key;
+    if (key === 'Enter') {
+        event.preventDefault();
+        addUser();
+    }
+}
+async function addUser() {
+    await WorkspaceService.addUser({
+        workspace: $workspaceStore,
+        requestBody: {
+            email,
+            username,
+            is_admin: selected == 'admin',
+            operator: selected == 'operator'
+        }
+    });
+    sendUserToast(`Added ${email}`);
+    dispatch('new');
+}
+let selected = 'author';
+</script>
+
+<div class="flex flex-row">
+	<input type="email" on:keyup={handleKeyUp} placeholder="email" bind:value={email} class="mr-4" />
+	<input
+		type="text"
+		on:keyup={handleKeyUp}
+		placeholder="username"
+		bind:value={username}
+		class="mr-4"
+	/>
+	<ToggleButtonGroup bind:selected>
+		<ToggleButton position="left" value="operator" size="sm"
+			>Operator <Tooltip
+				>An operator can only execute and view scripts/flows/apps from your workspace, and only
+				those that he has visibility on</Tooltip
+			></ToggleButton
+		>
+		<ToggleButton position="center" value="author" size="sm"
+			>Author <Tooltip
+				>An Author can execute and view scripts/flows/apps, but he can also create new ones</Tooltip
+			></ToggleButton
+		>
+		<ToggleButton position="right" value="admin" size="sm">Admin</ToggleButton>
+	</ToggleButtonGroup>
+	<Button
+		variant="contained"
+		color="blue"
+		size="sm"
+		btnClasses="!ml-8"
+		on:click={addUser}
+		disabled={email === undefined}
+	>
+		Add
+	</Button>
+</div>

package/components/AddUser.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        new: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AddUserProps = typeof __propDef.props;
+export type AddUserEvents = typeof __propDef.events;
+export type AddUserSlots = typeof __propDef.slots;
+export default class AddUser extends SvelteComponentTyped<AddUserProps, AddUserEvents, AddUserSlots> {
+}
+export {};

package/components/AppConnect.svelte

@@ -1,30 +1,30 @@
 <script context="module">"use strict";
 const apiTokenApps = {
     airtable: {
-        img: 'airtable_connect.png',
+        img: '/airtable_connect.png',
         instructions: ['Click on the top-right avatar', 'Click on Account', 'Find "Api"']
     },
     discord_webhook: {
-        img: 'discord_webhook.png',
+        img: '/discord_webhook.png',
         instructions: ['Click on Server Settings', 'Click on Integration', 'Find "Webhooks"'],
         key: 'webhook_url'
     },
     toggl: {
-        img: 'toggl_connect.png',
+        img: '/toggl_connect.png',
         instructions: [
             'Go to <a href="https://track.toggl.com/profile" target="_blank" rel=”noopener noreferrer”>https://track.toggl.com/profile</a>',
             'Find "API Token"'
         ]
     },
     mailchimp: {
-        img: 'mailchimp_connect.png',
+        img: '/mailchimp_connect.png',
         instructions: [
             'Go to <a href="https://admin.mailchimp.com/account/api" target="_blank" rel=”noopener noreferrer”>https://admin.mailchimp.com/account/api</a>',
             'Find "Your API Keys"'
         ]
     },
     sendgrid: {
-        img: 'sendgrid_connect.png',
+        img: '/sendgrid_connect.png',
         instructions: [
             'Go to <a href="https://app.sendgrid.com/settings/api_keys" target="_blank" rel=”noopener noreferrer”>https://app.sendgrid.com/settings/api_keys</a>',
             'Create an API key',
@@ -134,6 +134,7 @@ async function next() {
         }
         else {
             window.open(url.toString(), '_blank');
+            drawer.closeDrawer();
         }
     }
     else {

package/components/ArgInput.svelte

@@ -1,6 +1,6 @@
 <script>import { faChevronDown, faChevronUp, faDollarSign, faMinus, faPlus } from '@fortawesome/free-solid-svg-icons';
 import { setInputCat as computeInputCat } from '../utils';
-import { Button } from './common';
+import { Badge, Button } from './common';
 import { createEventDispatcher } from 'svelte';
 import Icon from 'svelte-awesome';
 import FieldHeader from './FieldHeader.svelte';
@@ -13,6 +13,8 @@ import SimpleEditor from './SimpleEditor.svelte';
 import autosize from 'svelte-autosize';
 import Toggle from './Toggle.svelte';
 import Password from './Password.svelte';
+import NumberTypeNarrowing from './NumberTypeNarrowing.svelte';
+import Range from './Range.svelte';
 export let label = '';
 export let value;
 export let defaultValue = undefined;
@@ -37,6 +39,7 @@ export let pickForField = undefined;
 export let variableEditor = undefined;
 export let itemPicker = undefined;
 export let noMargin = false;
+export let extra = {};
 let seeEditable = enum_ != undefined || pattern != undefined;
 const dispatch = createEventDispatcher();
 $: maxHeight = maxRows ? `${1 + maxRows * 1.2}em` : `auto`;
@@ -116,20 +119,24 @@ function testRegex(pattern, value) {
 $: {
     if (value == undefined || value == null) {
         value = defaultValue;
-        if (defaultValue === undefined || defaultValue === null)
+        if (defaultValue === undefined || defaultValue === null) {
             if (inputCat === 'string') {
                 value = '';
             }
             else if (inputCat == 'enum') {
                 value = enum_?.[0];
             }
+            else if (inputCat == 'boolean') {
+                value = false;
+            }
+        }
     }
 }
 export let inputCat = 'string';
 $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncoding);
 </script>
 
-<div class="flex flex-col w-full">
+<div class="flex flex-col w-full min-w-[250px]">
 	<div>
 		{#if displayHeader}
 			<FieldHeader {label} {required} {type} {contentEncoding} {format} {itemsType} />
@@ -159,6 +166,8 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 							/>
 							{#if type == 'string' && format != 'date-time'}
 								<StringTypeNarrowing bind:format bind:pattern bind:enum_ bind:contentEncoding />
+							{:else if type == 'number'}
+								<NumberTypeNarrowing bind:min={extra['min']} bind:max={extra['max']} />
 							{:else if type == 'object'}
 								<ObjectTypeNarrowing bind:format />
 							{:else if type == 'array'}
@@ -186,20 +195,40 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 
 		<div class="flex space-x-1">
 			{#if inputCat == 'number'}
-				<input
-					{autofocus}
-					on:focus
-					{disabled}
-					type="number"
-					class={valid
-						? ''
-						: 'border border-red-700 border-opacity-30 focus:border-red-700 focus:border-opacity-30 bg-red-100'}
-					placeholder={defaultValue ?? ''}
-					bind:value
-					on:input={() => dispatch('input', { value, isRaw: true })}
-				/>
+				{#if extra['min'] != undefined && extra['max'] != undefined}
+					<div class="flex w-full gap-1">
+						<span>{extra['min']}</span>
+						<div class="grow">
+							<Range bind:value min={extra['min']} max={extra['max']} />
+						</div>
+						<span>{extra['max']}</span>
+						<span class="mx-2"><Badge large color="blue">{value}</Badge></span>
+					</div>
+				{:else}
+					<input
+						{autofocus}
+						on:focus={(e) => {
+							window.dispatchEvent(new Event('pointerup'))
+							dispatch('focus')
+						}}
+						{disabled}
+						type="number"
+						class={valid
+							? ''
+							: 'border border-red-700 border-opacity-30 focus:border-red-700 focus:border-opacity-30 bg-red-100'}
+						placeholder={defaultValue ?? ''}
+						bind:value
+						min={extra['min']}
+						max={extra['max']}
+						on:input={() => dispatch('input', { value, isRaw: true })}
+					/>
+				{/if}
 			{:else if inputCat == 'boolean'}
 				<Toggle
+					on:pointerdown={(e) => {
+						e?.stopPropagation()
+						window.dispatchEvent(new Event('pointerup'))
+					}}
 					{disabled}
 					class={valid
 						? ''
@@ -277,7 +306,10 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 				{:else}
 					<textarea
 						bind:this={el}
-						on:focus
+						on:focus={(e) => {
+							window.dispatchEvent(new Event('pointerup'))
+							dispatch('focus')
+						}}
 						{autofocus}
 						{disabled}
 						use:autosize
@@ -293,7 +325,15 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 					/>
 				{/if}
 			{:else if inputCat == 'enum'}
-				<select {disabled} class="px-6" bind:value>
+				<select
+					on:focus={(e) => {
+						window.dispatchEvent(new Event('pointerup'))
+						dispatch('focus')
+					}}
+					{disabled}
+					class="px-6"
+					bind:value
+				>
 					{#each enum_ ?? [] as e}
 						<option>{e}</option>
 					{/each}
@@ -303,7 +343,10 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 			{:else if inputCat == 'sql' || inputCat == 'yaml'}
 				<div class="border my-1 mb-4 w-full border-gray-400">
 					<SimpleEditor
-						on:focus={() => dispatch('focus')}
+						on:focus={(e) => {
+							window.dispatchEvent(new Event('pointerup'))
+							dispatch('focus')
+						}}
 						on:blur={() => dispatch('blur')}
 						bind:this={editor}
 						lang={inputCat}
@@ -339,7 +382,10 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 								{autofocus}
 								rows="1"
 								bind:this={el}
-								on:focus={() => dispatch('focus')}
+								on:focus={(e) => {
+									window.dispatchEvent(new Event('pointerup'))
+									dispatch('focus')
+								}}
 								on:blur={() => dispatch('blur')}
 								use:autosize
 								type="text"
@@ -355,16 +401,13 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 							/>
 							{#if itemPicker}
 								<div class="ml-1 relative">
-									<Button
-										{disabled}
-										variant="border"
-										color="blue"
-										size="sm"
-										btnClasses="min-w-min min-h-[34px] items-center leading-4 py-0"
+									<!-- svelte-ignore a11y-click-events-have-key-events -->
+									<div
+										class="min-w-min min-h-[34px] items-center leading-4 px-3 text-blue-500 cursor-pointer border border-blue-500 rounded center-center"
 										on:click={() => {
 											pickForField = label
 											itemPicker?.openDrawer?.()
-										}}><Icon data={faDollarSign} /></Button
+										}}><Icon data={faDollarSign} /></div
 									>
 								</div>
 							{/if}

package/components/ArgInput.svelte.d.ts

@@ -35,6 +35,7 @@ declare const __propDef: {
         variableEditor?: VariableEditor | undefined;
         itemPicker?: ItemPicker | undefined;
         noMargin?: boolean | undefined;
+        extra?: Record<string, any> | undefined;
         editor?: SimpleEditor | undefined;
         evalValueToRaw?: (() => void) | undefined;
         focus?: (() => void) | undefined;

package/components/Dropdown.svelte

@@ -2,6 +2,7 @@
 import Icon from 'svelte-awesome';
 import { MoreHorizontal } from 'lucide-svelte';
 import { Button, Menu } from './common';
+import { goto } from '$app/navigation';
 export let dropdownItems;
 export let name = undefined;
 export let placement = 'bottom-start';
@@ -52,7 +53,7 @@ const dispatch = createEventDispatcher();
 			{:else if item.href && !item.disabled}
 				<a
 					href={item.href}
-					on:click|stopPropagation
+					on:click|stopPropagation|preventDefault={() => goto(item.href ?? '')}
 					class="block w-full px-4 font-semibold text-left  py-2 text-sm text-gray-700 hover:drop-shadow-sm hover:bg-gray-50 hover:bg-opacity-30
 					{item.disabled ? 'bg-gray-200' : ''}"
 					role="menuitem"

package/components/EditorBar.svelte

@@ -3,7 +3,7 @@
 
 <script>import { ResourceService, VariableService } from '../gen';
 import { getScriptByPath, sendUserToast } from '../utils';
-import { faBroom, faCube, faDollarSign, faEye, faRotate, faRotateLeft } from '@fortawesome/free-solid-svg-icons';
+import { faBroom, faCube, faDollarSign, faEye, faPlus, faRotate, faRotateLeft } from '@fortawesome/free-solid-svg-icons';
 import { workspaceStore } from '../stores';
 import ItemPicker from './ItemPicker.svelte';
 import ResourceEditor from './ResourceEditor.svelte';
@@ -142,11 +142,12 @@ async function onScriptPick(e) {
 			variant="border"
 			color="blue"
 			size="sm"
+			startIcon={{ icon: faPlus }}
 			on:click={() => {
 				variableEditor.initNew()
 			}}
 		>
-			Create a new variable
+			New variable
 		</Button>
 	</div>
 </ItemPicker>

package/components/FlowStatusViewer.svelte

@@ -6,7 +6,7 @@ import Icon from 'svelte-awesome';
 import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons';
 import { createEventDispatcher } from 'svelte';
 import { onDestroy } from 'svelte';
-import { Button, Tab } from './common';
+import { Badge, Button, Tab } from './common';
 import DisplayResult from './DisplayResult.svelte';
 import Tabs from './common/tabs/Tabs.svelte';
 import { FlowGraph } from './graph';
@@ -15,6 +15,7 @@ import { displayDate, isOwner, pluralize, truncateRev } from '../utils';
 import JobArgs from './JobArgs.svelte';
 import Tooltip from './Tooltip.svelte';
 import SimpleEditor from './SimpleEditor.svelte';
+import { Loader2 } from 'lucide-svelte';
 const dispatch = createEventDispatcher();
 export let jobId;
 export let flowState = undefined;
@@ -144,9 +145,9 @@ let payload = '"a test payload in json"';
 					<div class="w-full h-full">
 						<FlowJobResult result={job.result} logs={job.logs ?? ''} />
 					</div>
-				{:else if job.flow_status?.modules?.[job?.flow_status?.step].type === FlowStatusModule.type.WAITING_FOR_EVENTS}
+				{:else if job.flow_status?.modules?.[job?.flow_status?.step]?.type === FlowStatusModule.type.WAITING_FOR_EVENTS}
 					<div class="w-full h-full mt-2 text-sm text-gray-600">
-						<p>Waiting for approval from the previous step</p>
+						<p>Waiting to be resumed</p>
 						<div>
 							{#if is_owner}
 								<div class="flex flex-row gap-2 mt-2">
@@ -175,7 +176,8 @@ let payload = '"a test payload in json"';
 									>
 								</div>
 							{:else}
-								You cannot resume the job without the resume id since you are not an owner of {job.script_path}
+								You cannot resume the flow yourself without receiving the resume secret since you
+								are not an owner of {job.script_path}
 							{/if}
 						</div>
 					</div>
@@ -183,6 +185,24 @@ let payload = '"a test payload in json"';
 					<div class="text-xs p-4 bg-gray-50 overflow-auto max-h-80 border">
 						<pre class="w-full">{job.logs}</pre>
 					</div>
+				{:else if innerModules?.length > 0}
+					<div class="flex flex-col gap-1">
+						{#each innerModules as mod, i (mod.id)}
+							{#if mod.type == FlowStatusModule.type.IN_PROGRESS}
+								<div
+									><span class="inline-flex gap-1"
+										><Badge color="indigo">{mod.id}</Badge>
+										{#if job.raw_flow?.modules[i]?.summary}
+											<span class="font-medium text-gray-900">
+												{job.raw_flow?.modules[i]?.summary ?? ''}
+											</span>
+										{/if}
+										<Loader2 class="animate-spin" /></span
+									></div
+								>
+							{/if}
+						{/each}
+					</div>
 				{/if}
 			</div>
 		{/if}

package/components/IconedResourceType.svelte

@@ -5,19 +5,19 @@ export let after = false;
 export let height = '24px';
 export let width = '24px';
 export let center = false;
-$: name_prefix = name.split('_')[0];
+$: iconComponent = APP_TO_ICON_COMPONENT[name] || APP_TO_ICON_COMPONENT[name.split('_')[0]];
 </script>
 
 <div class="truncate flex flex-row gap-2 {center ? 'justify-center items-center' : ''}  -pl-2">
 	{#if !silent && !after}
 		{name}
 	{/if}
-	{#if APP_TO_ICON_COMPONENT[name_prefix]}
+	{#if iconComponent}
 		<span class="text-gray-700 grayscale">
-			<svelte:component this={APP_TO_ICON_COMPONENT[name_prefix]} {height} {width} />
+			<svelte:component this={iconComponent} {height} {width} />
 		</span>
 	{:else}
-		<span style="width: {width}" class="bg-gray-100 rounded-full" />
+		<span style="width: {width}; height: {height}" class="bg-gray-100 rounded-full" />
 	{/if}
 	{#if !silent && after}
 		{name}

package/components/InviteUser.svelte

@@ -6,7 +6,6 @@ import { Button, ToggleButton, ToggleButtonGroup } from './common';
 import Tooltip from './Tooltip.svelte';
 const dispatch = createEventDispatcher();
 let email;
-let is_admin = false;
 function handleKeyUp(event) {
     const key = event.key;
     if (key === 'Enter') {

package/components/ItemPicker.svelte

@@ -42,12 +42,12 @@ let drawer;
 />
 
 <Drawer bind:this={drawer} size="600px">
-	<DrawerContent title="Search a {itemName}" on:close={drawer.closeDrawer}>
-		<div class="w-full">
+	<DrawerContent overflow_y={false} title="Search {itemName}s" on:close={drawer.closeDrawer}>
+		<div class="w-full h-full flex flex-col">
 			<div class="w-12/12 pb-4">
 				<input
 					type="text"
-					placeholder="Search {itemName}"
+					placeholder="Search {itemName}s"
 					bind:value={filter}
 					class="search-item"
 				/>
@@ -61,10 +61,10 @@ let drawer;
 					{@html noItemMessage}
 				</div>
 			{:else if filteredItems?.length}
-				<div class="border rounded-md divide-y divide-gray-200 w-full">
+				<div class="border rounded-md divide-y divide-gray-200 w-full overflow-auto pb-12 grow">
 					{#each filteredItems as obj}
 						<div
-							class="hover:bg-gray-50 w-full inline-flex items-center p-4 gap-4 first-of-type:!border-t-0 
+							class="hover:bg-gray-50 w-full flex items-center p-4 gap-4 first-of-type:!border-t-0 
 						first-of-type:rounded-t-md last-of-type:rounded-b-md"
 						>
 							<div class="inline-flex items-center grow">

package/components/ModulePreview.svelte

@@ -35,7 +35,6 @@ export async function runTest(args) {
     else {
         throw Error('not testable module type');
     }
-    sendUserToast(`started test ${truncateRev(jobId ?? '', 10)}`);
 }
 function jobDone() {
     if (testJob && !testJob.canceled && testJob.type == 'CompletedJob' && `result` in testJob) {
@@ -61,6 +60,7 @@ function jobDone() {
 		{/if}
 
 		<RunForm
+			loading={testIsLoading}
 			runnable={{ summary: mod.summary ?? '', schema, description: '' }}
 			runAction={(_, args) => runTest(args)}
 			schedulable={false}

package/components/MoveDrawer.svelte

@@ -35,7 +35,8 @@ async function updatePath() {
                 path: path ?? '',
                 summary: summary ?? '',
                 description: flow.description,
-                value: flow.value
+                value: flow.value,
+                schema: flow.schema
             }
         });
     }
@@ -85,7 +86,6 @@ async function updatePath() {
 			type="text"
 			bind:value={summary}
 			placeholder="A short summary displayed when it is listed"
-			rows="1"
 			disabled={!own}
 		/>
 

package/components/NumberTypeNarrowing.svelte

@@ -0,0 +1,19 @@
+<script>import Toggle from './Toggle.svelte';
+export let min;
+export let max;
+let minChecked = min != undefined;
+let maxChecked = max != undefined;
+</script>
+
+<div class="my-2" />
+
+<div class="flex flex-col gap-2">
+	<div class="flex gap-2">
+		<Toggle bind:checked={minChecked} options={{ right: 'min' }} />
+		<input type="number" bind:value={min} disabled={!minChecked} />
+	</div>
+	<div class="flex gap-2">
+		<Toggle bind:checked={maxChecked} options={{ right: 'max' }} />
+		<input type="number" bind:value={max} disabled={!maxChecked} />
+	</div>
+</div>

package/components/NumberTypeNarrowing.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        min: number | undefined;
+        max: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type NumberTypeNarrowingProps = typeof __propDef.props;
+export type NumberTypeNarrowingEvents = typeof __propDef.events;
+export type NumberTypeNarrowingSlots = typeof __propDef.slots;
+export default class NumberTypeNarrowing extends SvelteComponentTyped<NumberTypeNarrowingProps, NumberTypeNarrowingEvents, NumberTypeNarrowingSlots> {
+}
+export {};

package/components/Path.svelte

@@ -60,12 +60,14 @@ export async function reset() {
 }
 async function loadFolders() {
     let initialFolders = [];
+    let initialFolder = '';
     if (initialPath?.split('/')?.[0] == 'f') {
-        initialFolders.push(initialPath?.split('/')?.[1]);
+        initialFolder = initialPath?.split('/')?.[1];
+        initialFolders.push(initialFolder);
     }
-    folders = initialFolders.concat(await FolderService.listFolderNames({
+    folders = initialFolders.concat((await FolderService.listFolderNames({
         workspace: $workspaceStore
-    }));
+    })).filter((x) => x != initialFolder));
 }
 async function loadGroups() {
     let initialGroups = [];

package/components/Popover.svelte

@@ -4,6 +4,7 @@ const ALIGN = ['start', 'end'];
 export let placement = 'auto';
 export let notClickable = false;
 export let popupClass = '';
+export let disapperTimoout = 100;
 const [popperRef, popperContent] = createPopperActions({ placement });
 const betterPreventOverflow = (options) => ({
     name: 'preventOverflow',
@@ -32,20 +33,30 @@ function open() {
     showTooltip = true;
 }
 function close() {
-    timeout = setTimeout(() => (showTooltip = false), 100);
+    timeout = setTimeout(() => (showTooltip = false), disapperTimoout);
 }
 </script>
 
-<button
-	class:cursor-default={notClickable}
-	use:popperRef
-	on:mouseenter={open}
-	on:mouseleave={close}
-	on:click
-	class={$$props.class}
->
-	<slot />
-</button>
+{#if notClickable}
+	<span
+		use:popperRef
+		on:mouseenter={open}
+		on:mouseleave={close}
+		class={$$props.class}
+	>
+		<slot />
+	</span>
+{:else}
+	<button
+		use:popperRef
+		on:mouseenter={open}
+		on:mouseleave={close}
+		on:click
+		class={$$props.class}
+	>
+		<slot />
+	</button>
+{/if}
 {#if showTooltip}
 	<div
 		use:popperContent={extraOpts}

package/components/Popover.svelte.d.ts

@@ -5,6 +5,7 @@ declare const __propDef: {
         placement?: "left" | "right" | "auto" | "top" | "bottom" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "auto-start" | "auto-end" | "right-start" | "right-end" | "left-start" | "left-end" | undefined;
         notClickable?: boolean | undefined;
         popupClass?: string | undefined;
+        disapperTimoout?: number | undefined;
     };
     events: {
         click: MouseEvent;