windmill-components 1.352.9 → 1.362.0

package/package/components/flows/FlowHistory.svelte

@@ -0,0 +1,208 @@
+<script>import { Pane, Splitpanes } from 'svelte-splitpanes';
+import PanelSection from '../apps/editor/settingsPanel/common/PanelSection.svelte';
+import { classNames, displayDate, emptyString, sendUserToast } from '../../utils';
+import { FlowService } from '../../gen';
+import { workspaceStore } from '../../stores';
+import { Skeleton } from '../common';
+import FlowViewer from '../FlowViewer.svelte';
+import Drawer from '../common/drawer/Drawer.svelte';
+import DrawerContent from '../common/drawer/DrawerContent.svelte';
+import Button from '../common/button/Button.svelte';
+import { ArrowRight, Pencil, X } from 'lucide-svelte';
+import { createEventDispatcher } from 'svelte';
+import { goto } from '$app/navigation';
+export let path;
+let drawer;
+let loading = false;
+let versions = [];
+let selectedVersion = undefined;
+let selected = undefined;
+let deploymentMsgUpdateMode = false;
+let deploymentMsgUpdate = undefined;
+export function open() {
+    loadVersions();
+    drawer.openDrawer();
+}
+async function loadFlow(version) {
+    selected = await FlowService.getFlowVersion({
+        workspace: $workspaceStore,
+        version,
+        path
+    });
+}
+async function loadVersions() {
+    loading = true;
+    versions = await FlowService.getFlowHistory({
+        workspace: $workspaceStore,
+        path: path
+    });
+    loading = false;
+}
+async function updateDeploymentMsg(version) {
+    if (selectedVersion === undefined ||
+        version === undefined ||
+        emptyString(deploymentMsgUpdate)) {
+        return;
+    }
+    await FlowService.updateFlowHistory({
+        workspace: $workspaceStore,
+        version,
+        path,
+        requestBody: {
+            deployment_msg: deploymentMsgUpdate
+        }
+    });
+    selectedVersion.deployment_msg = deploymentMsgUpdate;
+    deploymentMsgUpdateMode = false;
+    loadVersions();
+}
+const dispatch = createEventDispatcher();
+async function restoreVersion(flow) {
+    if (!flow)
+        return;
+    await FlowService.updateFlow({
+        workspace: $workspaceStore,
+        requestBody: {
+            ...flow,
+            path
+        },
+        path
+    });
+    dispatch('historyRestore');
+    drawer?.closeDrawer();
+    sendUserToast('Flow restored from previous deployment');
+}
+$: selectedVersion !== undefined && loadFlow(selectedVersion.id);
+</script>
+
+<Drawer bind:this={drawer} size="1200px">
+	<DrawerContent
+		on:close={() => {
+			drawer?.closeDrawer()
+		}}
+	>
+		<Splitpanes class="!overflow-visible">
+			<Pane size={20}>
+				<PanelSection title="Past Deployments">
+					<div class="flex flex-col gap-2 w-full">
+						{#if !loading}
+							{#if versions.length > 0}
+								<div class="flex gap-2 flex-col">
+									{#each versions ?? [] as version}
+										<!-- svelte-ignore a11y-click-events-have-key-events -->
+										<div
+											class={classNames(
+												'border flex gap-1 truncate justify-between flex-row w-full items-center p-2 rounded-md cursor-pointer hover:bg-blue-50 hover:text-blue-400',
+												selectedVersion?.id == version.id ? 'bg-blue-100 text-blue-600' : ''
+											)}
+											role="button"
+											tabindex="0"
+											on:click={() => {
+												selectedVersion = version
+											}}
+										>
+											<span class="text-xs truncate">
+												{#if emptyString(version.deployment_msg)}Version {version.id}{:else}{version.deployment_msg}{/if}
+											</span>
+										</div>
+									{/each}
+								</div>
+							{:else}
+								<div class="text-sm text-tertiary">No items</div>
+							{/if}
+						{:else}
+							<Skeleton layout={[[40], [40], [40], [40], [40]]} />
+						{/if}
+					</div>
+				</PanelSection>
+			</Pane>
+			<Pane size={80}>
+				<div class="h-full w-full overflow-auto">
+					{#if selectedVersion}
+						{#if selected}
+							<div class="px-2 flex flex-col gap-2">
+								<span class="flex flex-row text-sm p-1 text-tertiary">
+									{#if deploymentMsgUpdateMode}
+										<div class="flex w-full">
+											<input
+												type="text"
+												bind:value={deploymentMsgUpdate}
+												class="!w-auto grow"
+												on:click|stopPropagation={() => {}}
+												on:keydown|stopPropagation
+												on:keypress|stopPropagation={({ key }) => {
+													if (key === 'Enter') updateDeploymentMsg(selectedVersion?.id)
+												}}
+											/>
+											<Button
+												size="xs"
+												color="blue"
+												buttonType="button"
+												btnClasses="!p-1 !w-[34px] !ml-1"
+												aria-label="Save Deployment Message"
+												on:click={() => {
+													updateDeploymentMsg(selectedVersion?.id)
+												}}
+											>
+												<ArrowRight size={14} />
+											</Button>
+											<Button
+												size="xs"
+												color="light"
+												buttonType="button"
+												btnClasses="!p-1 !w-[34px] !ml-1"
+												aria-label="Abort"
+												on:click={() => {
+													deploymentMsgUpdateMode = false
+													deploymentMsgUpdate = undefined
+												}}
+											>
+												<X size={14} />
+											</Button>
+										</div>
+									{:else}
+										{#if selectedVersion.deployment_msg}
+											{selectedVersion.deployment_msg}
+										{:else}
+											Deployed {displayDate(selected.edited_at)} by {selected.edited_by}
+										{/if}
+										<button
+											on:click={() => {
+												deploymentMsgUpdate = selectedVersion?.deployment_msg
+												deploymentMsgUpdateMode = true
+											}}
+											title="Update commit message"
+											class="flex items-center px-1 rounded-sm hover:text-primary text-secondary h-5"
+											aria-label="Update commit message"
+										>
+											<Pencil size={14} />
+										</button>
+									{/if}
+								</span>
+								<div class="flex p-1 gap-2">
+									<Button
+										size="xs"
+										on:click={() =>
+											goto(`/flows/add?template_id=${selectedVersion?.id}&template=${path}`)}
+									>
+										Restore as fork
+									</Button>
+									<Button size="xs" on:click={() => restoreVersion(selected)}
+										>Redeploy with that version
+									</Button>
+								</div>
+								<FlowViewer flow={selected} />
+							</div>
+						{:else}
+							<Skeleton layout={[[40]]} />
+						{/if}
+					{:else}
+						<div class="text-sm p-2 text-tertiary"
+							>Select a deployment version to see its details</div
+						>
+					{/if}
+				</div>
+			</Pane>
+		</Splitpanes>
+	</DrawerContent>
+</Drawer>

package/package/components/flows/FlowHistory.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        path: string;
+        open?: (() => void) | undefined;
+    };
+    events: {
+        keydown: KeyboardEvent;
+        historyRestore: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type FlowHistoryProps = typeof __propDef.props;
+export type FlowHistoryEvents = typeof __propDef.events;
+export type FlowHistorySlots = typeof __propDef.slots;
+export default class FlowHistory extends SvelteComponent<FlowHistoryProps, FlowHistoryEvents, FlowHistorySlots> {
+    get open(): () => void;
+}
+export {};

package/package/components/flows/content/FlowBranchesAllWrapper.svelte

@@ -39,7 +39,6 @@ let selected = 'early-stop';
 						<h3 class="mb-4"
 							>{value.branches.length} branch{value.branches.length > 1 ? 'es' : ''}</h3
 						>
-						<p>Add branches and steps directly on the graph.</p>
 						<div class="flex flex-col gap-y-4 py-2 w-full">
 							{#each value.branches as branch, i}
 								<div class="flex flex-row gap-x-4 w-full items-center">
@@ -58,6 +57,7 @@ let selected = 'early-stop';
 								</div>
 							{/each}
 						</div>
+						<p class="text-sm">Add branches and steps directly on the graph.</p>
 						<div class="mt-6 mb-2 text-sm font-bold">Run in parallel</div>
 						<Toggle
 							bind:checked={value.parallel}

package/package/components/flows/content/FlowBranchesOneWrapper.svelte

@@ -41,7 +41,6 @@ let selected = 'early-stop';
 						<h3 class="my-4">
 							{value.branches.length + 1} branch{value.branches.length + 1 > 1 ? 'es' : ''}
 						</h3>
-						<p>Add branches and steps directly on the graph.</p>
 						<div class="py-2">
 							<div class="flex flex-row gap-2 text-sm p-2">
 								<Badge large={true} color="blue">Default branch</Badge>
@@ -77,6 +76,7 @@ let selected = 'early-stop';
 								</div>
 							{/each}
 						</div>
+						<p class="text-sm">Add branches and steps directly on the graph.</p>
 					</div>
 				</Pane>
 				{#if flowModule}

package/package/components/flows/content/FlowEditorPanel.svelte

@@ -23,7 +23,7 @@ onMount(() => {
         if (!module) {
             return;
         }
-        if (!$flowStateStore) {
+        if (!$flowInputsStore) {
             $flowInputsStore = {};
         }
         $flowInputsStore[module?.id] = {

package/package/components/flows/content/FlowLoop.svelte

@@ -7,7 +7,7 @@ import PropPickerWrapper from '../propPicker/PropPickerWrapper.svelte';
 import FlowModuleEarlyStop from './FlowModuleEarlyStop.svelte';
 import FlowModuleSuspend from './FlowModuleSuspend.svelte';
 // import FlowRetries from './FlowRetries.svelte'
-import { Button, Drawer, Tab, TabContent, Tabs, Alert } from '../../common';
+import { Button, Drawer, Tab, TabContent, Tabs } from '../../common';
 import { Pane, Splitpanes } from 'svelte-splitpanes';
 import { getStepPropPicker } from '../previousResults';
 import { enterpriseLicense } from '../../../stores';
@@ -50,24 +50,29 @@ $: previewIterationArgs = $flowStateStore[mod.id]?.previewArgs ?? {};
 <div class="h-full flex flex-col">
 	<FlowCard {noEditor} title="For loop">
 		<div slot="header" class="grow">
-			<input bind:value={mod.summary} placeholder={'Summary'} />
-		</div>
-
-		<Splitpanes horizontal class="!max-h-[calc(100%-48px)]">
-			<Pane size={60} minSize={20} class="p-4">
-				{#if !noEditor}
-					<Alert
-						type="info"
-						title="For loops"
-						documentationLink="https://www.windmill.dev/docs/flows/flow_loops"
-						class="mb-4"
-						size="xs"
-					>
+			<div class="my-2 flex flex-row gap-2 items-center">
+				<div>
+					<Tooltip documentationLink="https://www.windmill.dev/docs/flows/flow_loops">
 						Add steps inside the loop and specify an iterator expression that defines the sequence
 						over which your subsequent steps will iterate.
-					</Alert>
-				{/if}
+					</Tooltip>
+				</div>
+				<div class="grow">
+					<input bind:value={mod.summary} placeholder={'Summary'} />
+				</div>
+				<div class="justify-end">
+					<Button
+						on:click={() => (previewOpen = true)}
+						startIcon={{ icon: Play }}
+						color="dark"
+						size="sm">Test an iteration</Button
+					>
+				</div>
+			</div>
+		</div>
 
+		<Splitpanes horizontal class="!max-h-[calc(100%-30px)]">
+			<Pane size={60} minSize={20} class="p-4">
 				{#if mod.value.type === 'forloopflow'}
 					<div class="flex flex-row gap-8 mt-2 mb-6">
 						<div>
@@ -108,12 +113,12 @@ $: previewIterationArgs = $flowStateStore[mod.id]?.previewArgs ?? {};
 							/>
 						</div>
 					</div>
-
 					<div class="my-2 flex flex-row gap-2 items-center">
 						<div class="text-sm font-bold whitespace-nowrap">
 							Iterator expression
 							<Tooltip documentationLink="https://www.windmill.dev/docs/flows/flow_loops">
-								List to iterate over.
+								The JavaScript expression that will be evaluated to get the list of items to iterate
+								over. Example : ["banana", "apple", flow_input.my_fruit].
 							</Tooltip>
 						</div>
 						{#if enableAi}
@@ -137,14 +142,6 @@ $: previewIterationArgs = $flowStateStore[mod.id]?.previewArgs ?? {};
 								pickableProperties={stepPropPicker.pickableProperties}
 							/>
 						{/if}
-						<div class="flex w-full justify-end">
-							<Button
-								on:click={() => (previewOpen = true)}
-								startIcon={{ icon: Play }}
-								color="dark"
-								size="sm">Test an iteration</Button
-							>
-						</div>
 					</div>
 
 					{#if mod.value.iterator.type == 'javascript'}

package/package/components/flows/content/FlowModuleComponent.svelte

@@ -17,7 +17,7 @@ import FlowModuleSuspend from './FlowModuleSuspend.svelte';
 import FlowModuleCache from './FlowModuleCache.svelte';
 import FlowModuleDeleteAfterUse from './FlowModuleDeleteAfterUse.svelte';
 import FlowRetries from './FlowRetries.svelte';
-import { getStepPropPicker } from '../previousResults';
+import { getFailureStepPropPicker, getStepPropPicker } from '../previousResults';
 import { deepEqual } from 'fast-equals';
 import Section from '../../Section.svelte';
 import Button from '../../common/button/Button.svelte';
@@ -25,7 +25,6 @@ import Alert from '../../common/alert/Alert.svelte';
 import FlowModuleSleep from './FlowModuleSleep.svelte';
 import FlowPathViewer from './FlowPathViewer.svelte';
 import InputTransformSchemaForm from '../../InputTransformSchemaForm.svelte';
-import { schemaToObject } from '../../../schema';
 import FlowModuleMock from './FlowModuleMock.svelte';
 import Tooltip from '../../Tooltip.svelte';
 import { SecondsInput } from '../../common';
@@ -80,22 +79,7 @@ function setCopilotModuleEditor() {
 }
 $: editor !== undefined && setCopilotModuleEditor();
 $: stepPropPicker = failureModule
-    ? {
-        pickableProperties: {
-            flow_input: schemaToObject($flowStore.schema, $previewArgs),
-            priorIds: {},
-            previousId: undefined,
-            hasResume: false
-        },
-        extraLib: `
-				declare const error: {
-					message: string
-					name: string
-					stack: string
-				}
-				
-				`
-    }
+    ? getFailureStepPropPicker($flowStateStore, $flowStore, $previewArgs)
     : getStepPropPicker($flowStateStore, parentModule, previousModule, flowModule.id, $flowStore, $previewArgs, false);
 function onKeyDown(event) {
     if ((event.ctrlKey || event.metaKey) && event.key == 'Enter') {

package/package/components/flows/content/FlowModuleEarlyStop.svelte

@@ -5,9 +5,11 @@ import Tooltip from '../../Tooltip.svelte';
 import { getContext } from 'svelte';
 import { NEVER_TESTED_THIS_FAR } from '../models';
 import Section from '../../Section.svelte';
-const { flowStateStore } = getContext('FlowEditorContext');
+import { getStepPropPicker } from '../previousResults';
+const { flowStateStore, flowStore, previewArgs } = getContext('FlowEditorContext');
 export let flowModule;
 let editor = undefined;
+$: stepPropPicker = getStepPropPicker($flowStateStore, undefined, undefined, flowModule.id, $flowStore, $previewArgs, false);
 $: isStopAfterIfEnabled = Boolean(flowModule.stop_after_if);
 $: result = $flowStateStore[flowModule.id]?.previewResult ?? NEVER_TESTED_THIS_FAR;
 </script>
@@ -45,16 +47,19 @@ $: result = $flowStateStore[flowModule.id]?.previewResult ?? NEVER_TESTED_THIS_F
 		>
 			{#if flowModule.stop_after_if}
 				<Toggle
+					size="xs"
 					bind:checked={flowModule.stop_after_if.skip_if_stopped}
 					options={{
 						right: 'Label flow as "skipped" if stopped'
 					}}
 				/>
-				<span class="text-xs font-bold">Stop condition expression</span>
+				<span class="mt-2 text-xs font-bold">Stop condition expression</span>
 				<div class="border w-full">
 					<PropPickerWrapper
-						{result}
+						notSelectable
+						flow_input={stepPropPicker.pickableProperties.flow_input}
 						pickableProperties={undefined}
+						{result}
 						on:select={({ detail }) => {
 							editor?.insertAtCursor(detail)
 							editor?.focus()
@@ -72,10 +77,11 @@ $: result = $flowStateStore[flowModule.id]?.previewResult ?? NEVER_TESTED_THIS_F
 			{:else}
 				<Toggle
 					disabled
+					size="xs"
 					options={{
 						right: 'Label flow as "skipped" if stopped'
 					}}
-				/> <span class="text-xs font-bold">Stop condition expression</span>
+				/> <span class="mt-2 text-xs font-bold">Stop condition expression</span>
 				<textarea disabled rows="3" class="min-h-[80px]" />
 			{/if}
 		</div>

package/package/components/flows/content/FlowModuleHeader.svelte

@@ -43,7 +43,7 @@ $: moduleRetry = module.retry?.constant || module.retry?.exponential;
 		{#if module.cache_ttl != undefined}
 			<Popover
 				placement="bottom"
-				class="center-center rounded p-2 'bg-blue-100 text-blue-800 border border-blue-300 hover:bg-blue-200 dark:bg-frost-700 dark:text-frost-100 dark:border-frost-600"
+				class="center-center rounded p-2 bg-blue-100 text-blue-800 border border-blue-300 hover:bg-blue-200 dark:bg-frost-700 dark:text-frost-100 dark:border-frost-600"
 				on:click={() => dispatch('toggleCache')}
 			>
 				<Database size={14} />
@@ -73,8 +73,7 @@ $: moduleRetry = module.retry?.constant || module.retry?.exponential;
 		{#if module.sleep}
 			<Popover
 				placement="bottom"
-				class="center-center rounded p-2bg-blue-100 text-blue-800 border border-blue-300 hover:bg-blue-200
-				dark:bg-frost-700 dark:text-frost-100 dark:border-frost-600"
+				class="center-center rounded p-2 bg-blue-100 text-blue-800 border border-blue-300 hover:bg-blue-200 dark:bg-frost-700 dark:text-frost-100 dark:border-frost-600"
 				on:click={() => dispatch('toggleSleep')}
 			>
 				<Bed size={14} />
@@ -84,7 +83,7 @@ $: moduleRetry = module.retry?.constant || module.retry?.exponential;
 		{#if module.mock?.enabled}
 			<Popover
 				placement="bottom"
-				class="center-center rounded p-2 bg-blue-100  text-blue-800 border border-blue-300 hover:bg-blue-200"
+				class="center-center rounded p-2 bg-blue-100 text-blue-800 border border-blue-300 hover:bg-blue-200 dark:bg-frost-700 dark:text-frost-100 dark:border-frost-600"
 				on:click={() => dispatch('toggleMock')}
 			>
 				<Voicemail size={14} />

package/package/components/flows/content/FlowModuleScript.svelte

@@ -36,7 +36,7 @@ function toggleShowAll() {
 
 <div class="flex flex-col flex-1 h-full overflow-auto p-2">
 	{#if showDate && date}
-		<span class="text-xs text-tertiary mb-4"><TimeAgo {date} /></span>
+		<span class="text-xs text-tertiary mb-4"><TimeAgo agoOnlyIfRecent withDate {date} /></span>
 	{/if}
 	{#if notFound}
 		<div class="text-red-400">script not found at {path} in workspace {$workspaceStore}</div>

package/package/components/flows/content/FlowModuleSleep.svelte

@@ -67,6 +67,7 @@ $: isSleepEnabled = Boolean(flowModule.sleep);
 			</div>
 		{:else}
 			<SecondsInput disabled />
+			<div class="text-secondary">OR use a dynamic expression</div>
 		{/if}
 	</Label>
 </Section>

package/package/components/flows/content/FlowModuleSuspend.svelte

@@ -28,7 +28,7 @@ async function loadGroups() {
         type: 'array',
         items: {
             type: 'string',
-            multiselect: allUserGroups
+            enum: allUserGroups
         }
     };
 }

package/package/components/flows/content/SuspendDrawer.svelte

@@ -42,10 +42,10 @@ export let text = 'Approval Help';
 								code={`import * as wmill from "npm:windmill-client@^1.158.2"
     
 export async function main() {
-    const resumeUrls = await wmill.getResumeUrls("approver1")
+    const urls = await wmill.getResumeUrls("approver1")
 
     return {
-        resume: resumeUrls['resume'],
+        resume: urls['resume'],
         default_args: {}, // optional, see below
         enums: {} // optional, see below
     }
@@ -58,10 +58,10 @@ export async function main() {
 								code={`import * as wmill from "windmill-client"
         
 export async function main() {
-    const resumeUrls = await wmill.getResumeUrls("approver1")
+    const urls = await wmill.getResumeUrls("approver1")
 
     return {
-        resume: resumeUrls['resume'],
+        resume: urls['resume'],
         default_args: {}, // optional, see below
         enums: {} // optional, see below
     }
@@ -97,7 +97,7 @@ import * as wmill from "npm:windmill-client@^1.158.2"
 
 export async function main() {
     // if no argument is passed, if user is logged in, it will use the user's username
-    const resumeUrls = await wmill.getResumeUrls("approver1") 
+    const urls = await wmill.getResumeUrls("approver1") 
 
     // send the resumeUrls to the recipient or see Prompt section above
 
@@ -112,7 +112,7 @@ export async function main() {
 			</Section>
 			<Section label="Dynamics enums">
 				As one of the return key of this step, return an object `enums` that contains the default
-				arguments of the form arguments. e.g:
+				options of the form arguments. e.g:
 				<HighlightCode
 					language={'deno'}
 					code={`
@@ -123,7 +123,7 @@ import * as wmill from "npm:windmill-client@^1.158.2"
 
 export async function main() {
     // if no argument is passed, if user is logged in, it will use the user's username
-    const resumeUrls = await wmill.getResumeUrls("approver1") 
+    const url = await wmill.getResumeUrls("approver1") 
 
     // send the resumeUrls to the recipient or see Prompt section above
 

package/package/components/flows/flowStateUtils.js

@@ -94,7 +94,8 @@ export async function createBranchAll(id) {
         id,
         value: {
             type: 'branchall',
-            branches: [{ modules: [] }]
+            branches: [{ modules: [] }],
+            parallel: true
         },
         summary: ''
     };

package/package/components/flows/flowStore.js

@@ -9,7 +9,7 @@ export async function copyFirstStepSchema(flowState, flowStore) {
     flowStore.update((flow) => {
         const firstModuleId = flow.value.modules[0]?.id;
         if (flowState[firstModuleId] && firstModuleId) {
-            flow.schema = flowState[firstModuleId].schema;
+            flow.schema = structuredClone(flowState[firstModuleId].schema);
             const v = flow.value.modules[0].value;
             if (v.type == 'rawscript' || v.type == 'script') {
                 Object.keys(v.input_transforms ?? {}).forEach((key) => {

package/package/components/flows/header/FlowImportExportMenu.svelte

@@ -2,26 +2,13 @@
 import DrawerContent from '../../common/drawer/DrawerContent.svelte';
 import FlowViewer from '../../FlowViewer.svelte';
 import { getContext } from 'svelte';
-import { Button } from '../../common';
 import { cleanInputs } from '../utils';
-import { FileJson } from 'lucide-svelte';
 const { flowStore } = getContext('FlowEditorContext');
-let jsonViewerDrawer;
+export let drawer;
 </script>
 
-<Button
-	btnClasses="mr-2"
-	size="xs"
-	variant="border"
-	color="light"
-	on:click={() => jsonViewerDrawer.toggleDrawer()}
-	startIcon={{ icon: FileJson }}
->
-	Export
-</Button>
-
-<Drawer bind:this={jsonViewerDrawer} size="800px">
-	<DrawerContent title="OpenFlow" on:close={() => jsonViewerDrawer.toggleDrawer()}>
+<Drawer bind:this={drawer} size="800px">
+	<DrawerContent title="OpenFlow" on:close={() => drawer?.toggleDrawer()}>
 		{#if $flowStore}
 			<FlowViewer flow={cleanInputs($flowStore)} tab="raw" />
 		{/if}

package/package/components/flows/header/FlowImportExportMenu.svelte.d.ts

@@ -1,6 +1,9 @@
 import { SvelteComponent } from "svelte";
+import Drawer from '../../common/drawer/Drawer.svelte';
 declare const __propDef: {
-    props: Record<string, never>;
+    props: {
+        drawer: Drawer | undefined;
+    };
     events: {
         [evt: string]: CustomEvent<any>;
     };