windmill-components 1.70.0 → 1.77.0

package/components/flows/map/FlowModuleSchemaItem.svelte

@@ -3,10 +3,7 @@ import Popover from '../../Popover.svelte';
 import { classNames } from '../../../utils';
 import { createEventDispatcher } from 'svelte';
 import { fade } from 'svelte/transition';
-import { Bed, PhoneIncoming, Repeat, Square, X } from 'lucide-svelte';
-export let isFirst = false;
-export let isLast = false;
-export let hasLine = true;
+import { Bed, Move, PhoneIncoming, Repeat, Square, X } from 'lucide-svelte';
 export let selected = false;
 export let deletable = false;
 export let retry = false;
@@ -16,105 +13,105 @@ export let sleep = false;
 export let bold = false;
 export let id = undefined;
 export let label;
-const margin = isLast ? '' : isFirst ? 'mb-0.5' : 'my-0.5';
+export let modType = undefined;
+export let bgColor = '';
 const dispatch = createEventDispatcher();
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
-<div class="flex relative" on:click>
-	<div
-		class={classNames(
-			'flex pl-6 ml-0.5',
-			hasLine ? 'line' : '',
-			isFirst ? 'justify-center items-start' : 'justify-center items-center'
-		)}
-	/>
+<div
+	class={classNames(
+		'w-full module flex rounded-sm cursor-pointer',
+		selected ? 'outline outline-offset-1 outline-2  outline-gray-600' : '',
+		'flex relative'
+	)}
+	style="width: 275px; height: 34px; background-color: {bgColor};"
+	on:click
+>
+	<div class="absolute text-sm right-12 -bottom-3 flex flex-row gap-1 z-20">
+		{#if retry}
+			<Popover notClickable>
+				<div
+					transition:fade|local={{ duration: 200 }}
+					class="center-center rounded border bg-white border-gray-400 text-gray-700 px-1 py-0.5"
+				>
+					<Repeat size={14} />
+				</div>
+				<svelte:fragment slot="text">Retries</svelte:fragment>
+			</Popover>
+		{/if}
+		{#if earlyStop}
+			<Popover notClickable>
+				<div
+					transition:fade|local={{ duration: 200 }}
+					class="center-center bg-white rounded border border-gray-400 text-gray-700 px-1 py-0.5"
+				>
+					<Square size={14} />
+				</div>
+				<svelte:fragment slot="text">Early stop/break</svelte:fragment>
+			</Popover>
+		{/if}
+		{#if suspend}
+			<Popover notClickable>
+				<div
+					transition:fade|local={{ duration: 200 }}
+					class="center-center bg-white rounded border border-gray-400 text-gray-700 px-1 py-0.5"
+				>
+					<PhoneIncoming size={14} />
+				</div>
+				<svelte:fragment slot="text">Suspend</svelte:fragment>
+			</Popover>
+		{/if}
+		{#if sleep}
+			<Popover notClickable>
+				<div
+					transition:fade|local={{ duration: 200 }}
+					class="center-center bg-white rounded border border-gray-400 text-gray-700 px-1 py-0.5"
+				>
+					<Bed size={14} />
+				</div>
+				<svelte:fragment slot="text">Sleep</svelte:fragment>
+			</Popover>
+		{/if}
+	</div>
 	<div
-		class={classNames(
-			'w-full flex overflow-hidden rounded-sm cursor-pointer mr-2',
-			selected ? 'outline outline-offset-1 outline-2  outline-gray-600' : '',
-			margin
-		)}
+		class="flex gap-1 justify-between items-center w-full overflow-hidden rounded-sm 
+			border border-gray-400 p-2 text-2xs module"
 	>
-		<div class="absolute text-sm right-12 -bottom-3 flex flex-row gap-1 z-20">
-			{#if retry}
-				<Popover notClickable>
-					<div
-						transition:fade={{ duration: 200 }}
-						class="center-center bg-white rounded border border-gray-400 text-gray-700 px-1 py-0.5"
-					>
-						<Repeat size={14} />
-					</div>
-					<svelte:fragment slot="text">Retries</svelte:fragment>
-				</Popover>
-			{/if}
-			{#if earlyStop}
-				<Popover notClickable>
-					<div
-						transition:fade={{ duration: 200 }}
-						class="center-center bg-white rounded border border-gray-400 text-gray-700 px-1 py-0.5"
-					>
-						<Square size={14} />
-					</div>
-					<svelte:fragment slot="text">Early stop/break</svelte:fragment>
-				</Popover>
-			{/if}
-			{#if suspend}
-				<Popover notClickable>
-					<div
-						transition:fade={{ duration: 200 }}
-						class="center-center bg-white rounded border border-gray-400 text-gray-700 px-1 py-0.5"
-					>
-						<PhoneIncoming size={14} />
-					</div>
-					<svelte:fragment slot="text">Suspend</svelte:fragment>
-				</Popover>
-			{/if}
-			{#if sleep}
-				<Popover notClickable>
-					<div
-						transition:fade={{ duration: 200 }}
-						class="center-center bg-white rounded border border-gray-400 text-gray-700 px-1 py-0.5"
-					>
-						<Bed size={14} />
-					</div>
-					<svelte:fragment slot="text">Sleep</svelte:fragment>
-				</Popover>
+		{#if $$slots.icon}
+			<slot name="icon" />
+			<span class="mr-2" />
+		{/if}
+		<div class="flex-1 truncate" class:font-bold={bold}>{label}</div>
+		<div class="flex items-center space-x-2">
+			{#if id}
+				<Badge color="indigo">{id}</Badge>
 			{/if}
 		</div>
-		<div
-			class="flex justify-between items-center w-full overflow-hidden rounded-sm 
-			border border-gray-400 p-2 bg-white text-2xs module"
-		>
-			{#if $$slots.icon}
-				<slot name="icon" />
-				<span class="mr-2" />
-			{/if}
-			<div class="flex-1 truncate" class:font-bold={bold}>{label}</div>
-			<div class="flex items-center space-x-2">
-				{#if id}
-					<Badge color="indigo">{id}</Badge>
-				{/if}
-				{#if deletable}
-					<button
-						class="absolute -top-2 right-0 rounded-full h-4 w-4 trash center-center 
-						border-[1.5px] border-gray-700 bg-white duration-150 hover:bg-red-400 hover:text-white 
-						hover:border-red-700 {selected ? '' : '!hidden'}"
-						on:click|preventDefault|stopPropagation={(event) => dispatch('delete', event)}
-					>
-						<X size={12} strokeWidth={2} />
-					</button>
-				{/if}
-			</div>
-		</div>
 	</div>
+	{#if deletable}
+		<button
+			class="absolute -top-2 -right-2 rounded-full h-4 w-4 trash center-center 
+	border-[1.5px] border-gray-700 bg-white duration-150 hover:bg-red-400 hover:text-white 
+	hover:border-red-700 {selected ? '' : '!hidden'}"
+			on:click|preventDefault|stopPropagation={(event) =>
+				dispatch('delete', { event, id, type: modType })}
+		>
+			<X size={12} strokeWidth={2} />
+		</button>
+
+		<button
+			class="absolute -top-2 right-10 rounded-full h-4 w-4 trash center-center 
+border-[1.5px] border-gray-700 bg-white duration-150 hover:bg-blue-400 hover:text-white 
+hover:border-blue-700 {selected ? '' : '!hidden'}"
+			on:click|preventDefault|stopPropagation={(event) => dispatch('move')}
+		>
+			<Move size={12} strokeWidth={2} />
+		</button>
+	{/if}
 </div>
 
 <style>
 	.module:hover .trash {
 		display: flex !important;
-	}
-	.line {
-		background: repeating-linear-gradient(to bottom, transparent 0 4px, rgb(120, 120, 120) 4px 8px)
-			50%/1px 100% no-repeat;
 	}</style>

package/components/flows/map/FlowModuleSchemaItem.svelte.d.ts

@@ -1,9 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        isFirst?: boolean | undefined;
-        isLast?: boolean | undefined;
-        hasLine?: boolean | undefined;
         selected?: boolean | undefined;
         deletable?: boolean | undefined;
         retry?: boolean | undefined;
@@ -13,10 +10,13 @@ declare const __propDef: {
         bold?: boolean | undefined;
         id?: string | undefined;
         label: string;
+        modType?: string | undefined;
+        bgColor?: string | undefined;
     };
     events: {
         click: MouseEvent;
         delete: CustomEvent<any>;
+        move: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/components/flows/map/FlowModuleSchemaMap.svelte

@@ -1,156 +1,182 @@
 <script>import { getContext } from 'svelte';
-import { createBranchAll, createBranches, createLoop, deleteFlowStateById, emptyModule, idMutex } from '../flowStateUtils';
-import { flowStateStore } from '../flowState';
-import FlowErrorHandlerItem from './FlowErrorHandlerItem.svelte';
-import RemoveStepConfirmationModal from '../content/RemoveStepConfirmationModal.svelte';
+import { createBranchAll, createBranches, createLoop, deleteFlowStateById, emptyModule } from '../flowStateUtils';
 import { emptyFlowModuleState } from '../utils';
-import MapItem from './MapItem.svelte';
 import FlowSettingsItem from './FlowSettingsItem.svelte';
-import FlowInputsItem from './FlowInputsItem.svelte';
-import InsertModuleButton from './InsertModuleButton.svelte';
-import { slide } from 'svelte/transition';
 import FlowConstantsItem from './FlowConstantsItem.svelte';
-export let root = false;
+import { dfs } from '../flowStore';
+import { FlowGraph } from '../../graph';
+import FlowErrorHandlerItem from './FlowErrorHandlerItem.svelte';
+import { push } from '../../../history';
 export let modules;
-export let parentType = undefined;
-let indexToRemove = undefined;
-const { select, selectedId } = getContext('FlowEditorContext');
-async function insertNewModuleAtIndex(index, kind) {
-    await idMutex.runExclusive(async () => {
-        var module = emptyModule(kind == 'flow');
-        var state = emptyFlowModuleState();
-        if (kind == 'forloop') {
-            ;
-            [module, state] = await createLoop(module.id);
-        }
-        else if (kind == 'branchone') {
-            ;
-            [module, state] = await createBranches(module.id);
-        }
-        else if (kind == 'branchall') {
-            ;
-            [module, state] = await createBranchAll(module.id);
-        }
-        const flowModule = module;
-        if (!modules)
-            return;
-        modules.splice(index, 0, flowModule);
-        modules = modules;
-        $flowStateStore[flowModule.id] = state;
-        if (kind == 'trigger') {
-            flowModule.summary = 'Trigger';
+export let sidebarSize = undefined;
+const { selectedId, moving, history, flowStateStore, flowStore } = getContext('FlowEditorContext');
+async function insertNewModuleAtIndex(modules, index, kind) {
+    push(history, $flowStore);
+    var module = emptyModule($flowStateStore, kind == 'flow');
+    var state = emptyFlowModuleState();
+    if (kind == 'forloop') {
+        ;
+        [module, state] = await createLoop(module.id);
+    }
+    else if (kind == 'branchone') {
+        ;
+        [module, state] = await createBranches(module.id);
+    }
+    else if (kind == 'branchall') {
+        ;
+        [module, state] = await createBranchAll(module.id);
+    }
+    $flowStateStore[module.id] = state;
+    if (kind == 'trigger') {
+        module.summary = 'Trigger';
+    }
+    else if (kind == 'approval') {
+        module.summary = 'Approval';
+    }
+    else if (kind == 'end') {
+        module.summary = 'Terminate flow';
+        module.stop_after_if = { skip_if_stopped: false, expr: 'true' };
+    }
+    if (!modules)
+        return [module];
+    modules.splice(index, 0, module);
+    return modules;
+}
+function removeAtId(modules, id) {
+    const index = modules.findIndex((mod) => mod.id == id);
+    if (index != -1) {
+        const [removed] = modules.splice(index, 1);
+        const leaves = dfs([removed], (mod) => mod.id);
+        leaves.forEach((leafId) => deleteFlowStateById(leafId, flowStateStore));
+        return modules;
+    }
+    return modules.map((mod) => {
+        if (mod.value.type == 'forloopflow') {
+            mod.value.modules = removeAtId(mod.value.modules, id);
         }
-        else if (kind == 'approval') {
-            flowModule.summary = 'Approval';
+        else if (mod.value.type == 'branchall') {
+            mod.value.branches = mod.value.branches.map((branch) => {
+                branch.modules = removeAtId(branch.modules, id);
+                return branch;
+            });
         }
-        else if (kind == 'end') {
-            flowModule.summary = 'Terminate flow';
-            flowModule.stop_after_if = { skip_if_stopped: false, expr: 'true' };
+        else if (mod.value.type == 'branchone') {
+            mod.value.branches = mod.value.branches.map((branch) => {
+                branch.modules = removeAtId(branch.modules, id);
+                return branch;
+            });
+            mod.value.default = removeAtId(mod.value.default, id);
         }
-        select(flowModule.id);
+        return mod;
     });
 }
-function removeAtIndex(index) {
-    if (!modules)
-        return;
-    const [removedModule] = modules.splice(index, 1);
-    modules = modules;
-    const leaves = findLeaves(removedModule);
-    leaves.forEach((leafId) => deleteFlowStateById(leafId));
-    select('settings-graph');
-}
-function findLeaves(flowModule) {
-    const id = flowModule.id;
-    if (flowModule.value.type === 'forloopflow') {
-        return [id, ...flowModule.value.modules.map((fm) => findLeaves(fm)).flat()];
+$: sidebarMode == 'graph' ? (sidebarSize = 40) : (sidebarSize = 20);
+let sidebarMode = 'graph';
+let minHeight = 0;
+function selectNextId(id) {
+    if (modules) {
+        let allIds = dfs(modules, (mod) => mod.id);
+        if (allIds.length > 1) {
+            const idx = allIds.indexOf(id);
+            $selectedId = idx == 0 ? allIds[0] : allIds[idx - 1];
+        }
+        else {
+            $selectedId = 'settings-metadata';
+        }
     }
-    if (flowModule.value.type === 'branchall') {
-        return [
-            id,
-            ...flowModule.value.branches
-                .map((branch) => branch.modules.map((mod) => findLeaves(mod)).flat())
-                .flat()
-        ];
+}
+async function addBranch(module) {
+    push(history, $flowStore);
+    if (module.value.type === 'branchone' || module.value.type === 'branchall') {
+        module.value.branches.splice(module.value.branches.length, 0, {
+            summary: '',
+            expr: 'false',
+            modules: []
+        });
     }
-    if (flowModule.value.type === 'branchone') {
-        return [
-            id,
-            ...flowModule.value.branches
-                .map((branch) => {
-                return branch.modules.map((mod) => findLeaves(mod)).flat();
-            })
-                .flat(),
-            ...flowModule.value.default.map((mod) => findLeaves(mod)).flat()
-        ];
+}
+function removeBranch(module, index) {
+    push(history, $flowStore);
+    if (module.value.type === 'branchone' || module.value.type === 'branchall') {
+        const offset = module.value.type === 'branchone' ? 1 : 0;
+        if (module.value.branches[index - offset]?.modules) {
+            const leaves = dfs(module.value.branches[index - offset].modules, (mod) => mod.id);
+            leaves.forEach((leafId) => deleteFlowStateById(leafId, flowStateStore));
+        }
+        module.value.branches.splice(index - offset, 1);
     }
-    return [id];
 }
-$: confirmationModalOpen = indexToRemove !== undefined;
 </script>
 
-<div class="flex flex-col h-full relative">
-	{#if root}
-		<div
-			class="z-10 sticky inline-flex flex-col gap-2 top-0 bg-gray-50 flex-initial p-2 items-center border-b border-gray-300"
-		>
-			<FlowSettingsItem />
-			<FlowConstantsItem />
-		</div>
-	{/if}
-	<ul class="w-full flex-auto {root ? 'px-2 pb-2 pt-3' : ''} py-1">
-		{#if root}
-			<li>
-				<FlowInputsItem />
-			</li>
-		{/if}
+<div class="flex flex-col h-full relative -pt-1">
+	<div
+		class="z-10 sticky inline-flex flex-col gap-2 top-0 bg-gray-50 flex-initial p-2 items-center border-b border-gray-300"
+	>
+		<FlowSettingsItem />
+		<FlowConstantsItem />
+	</div>
 
-		{#if modules}
-			{#each modules as mod, index (mod.id ?? index)}
-				<div transition:slide|local>
-					<MapItem
-						{index}
-						bind:mod
-						on:delete={(event) => {
-							if (event.detail.detail.shiftKey || mod.value.type === 'identity') {
-								removeAtIndex(index)
-							} else {
-								indexToRemove = index
-							}
-						}}
-						on:insert={(e) => {
-							insertNewModuleAtIndex(index, e.detail)
-						}}
-					/>
-				</div>
-			{/each}
-		{/if}
-		{#if !modules || modules[modules?.length - 1]?.summary != 'Terminate flow'}
-			<InsertModuleButton
-				stop={!root && parentType == 'branchone'}
-				trigger={root && modules?.length == 0}
-				on:new={(e) => insertNewModuleAtIndex(modules?.length ?? 0, e.detail)}
-			/>
-		{:else}
-			<div class="my-2" />
-		{/if}
-	</ul>
-	{#if root}
-		<div class="sticky bottom-0 bg-gray-50 flex-none px-4 py-1 pb-2 border-t">
-			<FlowErrorHandlerItem />
-		</div>
-	{/if}
+	<div class="flex-auto grow" bind:clientHeight={minHeight}>
+		<FlowGraph
+			insertable
+			scroll
+			{minHeight}
+			moving={$moving?.module.id}
+			rebuildOnChange={$flowStore}
+			maxHeight={minHeight}
+			modules={$flowStore.value?.modules}
+			{selectedId}
+			on:delete={({ detail }) => {
+				let e = detail.detail
+				push(history, $flowStore)
+				selectNextId(e.id)
+				removeAtId($flowStore.value.modules, e.id)
+				$flowStore = $flowStore
+			}}
+			on:insert={async ({ detail }) => {
+				if (detail.modules) {
+					if ($moving) {
+						push(history, $flowStore)
+						let indexToRemove = $moving.modules.findIndex((m) => $moving?.module?.id == m.id)
+						$moving.modules.splice(indexToRemove, 1)
+						detail.modules.splice(detail.index, 0, $moving.module)
+						$selectedId = $moving.module.id
+						$moving = undefined
+					} else {
+						await insertNewModuleAtIndex(detail.modules, detail.index ?? 0, detail.detail)
+						$selectedId = detail.modules[detail.index ?? 0].id
+					}
+					$flowStore = $flowStore
+				}
+			}}
+			on:newBranch={async ({ detail }) => {
+				if (detail.module) {
+					await addBranch(detail.module)
+					$flowStore = $flowStore
+				}
+			}}
+			on:deleteBranch={async ({ detail }) => {
+				if (detail.module) {
+					await removeBranch(detail.module, detail.index)
+					$flowStore = $flowStore
+					$selectedId = detail.module.id
+				}
+			}}
+			on:move={async ({ detail }) => {
+				if (!$moving || $moving.module.id !== detail.module.id) {
+					if (detail.module && detail.modules) {
+						console.log('MOVE+')
+						$moving = { module: detail.module, modules: detail.modules }
+					}
+				} else {
+					$moving = undefined
+				}
+			}}
+		/>
+	</div>
+	<div
+		class="z-10 absolute w-full inline-flex flex-col gap-2 bottom-0 left-0  flex-initial p-2 items-center border-b"
+	>
+		<FlowErrorHandlerItem />
+	</div>
 </div>
-
-<RemoveStepConfirmationModal
-	bind:open={confirmationModalOpen}
-	on:canceled={() => {
-		indexToRemove = undefined
-	}}
-	on:confirmed={() => {
-		if (indexToRemove !== undefined) {
-			removeAtIndex(indexToRemove)
-			indexToRemove = undefined
-		}
-		$selectedId = 'settings-graph'
-	}}
-/>

package/components/flows/map/FlowModuleSchemaMap.svelte.d.ts

@@ -2,9 +2,8 @@ import { SvelteComponentTyped } from "svelte";
 import type { FlowModule } from '../../../gen';
 declare const __propDef: {
     props: {
-        root?: boolean | undefined;
         modules: FlowModule[] | undefined;
-        parentType?: 'flow' | 'forloop' | 'branchall' | 'branchone' | undefined;
+        sidebarSize?: number | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/flows/map/FlowSettingsItem.svelte

@@ -1,17 +1,18 @@
 <script>import { getContext } from 'svelte';
 import { classNames } from '../../../utils';
 import { Badge } from '../../common';
-import { flowStore } from '../flowStore';
 import { SlidersHorizontal } from 'lucide-svelte';
-const { select, selectedId } = getContext('FlowEditorContext');
+const { selectedId, flowStore } = getContext('FlowEditorContext');
 $: settingsClass = classNames('border w-full rounded-sm p-2 bg-white border-gray-400 text-sm cursor-pointer flex items-center', $selectedId?.startsWith('settings')
     ? 'outline outline-offset-1 outline-2  outline-slate-900'
     : '');
 </script>
 
-<button on:click={() => select('settings-metadata')} class={settingsClass}>
+<button on:click={() => ($selectedId = 'settings-metadata')} class={settingsClass}>
 	<SlidersHorizontal size={16} />
-	<span class="text-xs font-bold flex flex-row justify-between w-full gap-2 items-center truncate ml-1">
+	<span
+		class="text-xs font-bold flex flex-row justify-between w-full gap-2 items-center truncate ml-1"
+	>
 		Settings
 
 		{#if $flowStore.value.same_worker}

package/components/flows/map/InsertModuleButton.svelte

@@ -1,22 +1,24 @@
 <script>import { Menu } from '../../common';
-import { faCode, faCodeBranch, faPlus, faBarsStaggered, faBolt, faCheck } from '@fortawesome/free-solid-svg-icons';
+import { faCode, faCodeBranch, faBarsStaggered, faBolt, faCheck } from '@fortawesome/free-solid-svg-icons';
 import { createEventDispatcher } from 'svelte';
 import Icon from 'svelte-awesome';
-import { Repeat, Square } from 'lucide-svelte';
+import { Cross, Repeat, Square } from 'lucide-svelte';
 const dispatch = createEventDispatcher();
 export let trigger = false;
 export let stop = false;
+export let open = undefined;
 </script>
 
-<Menu noMinW placement="bottom-start" let:close>
+<Menu bind:show={open} noMinW placement="bottom-center" let:close>
 	<button
+		title="Add step"
 		slot="trigger"
 		type="button"
-		class="text-gray-900 bg-white border mx-0.5 border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-full text-sm w-6 h-6 flex items-center justify-center"
+		class=" text-gray-900 bg-white border mx-0.5 border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-full text-sm w-6 h-6 flex items-center justify-center"
 	>
-		<Icon data={faPlus} scale={0.8} />
+		<Cross size={12} />
 	</button>
-	<div class="divide-y divide-gray-100 text-xs w-40">
+	<div class="font-mono divide-y divide-gray-100 text-xs w-40">
 		<button
 			class="w-full text-left p-2 hover:bg-gray-100"
 			on:click={() => {
@@ -27,7 +29,7 @@ export let stop = false;
 			tabindex="-1"
 		>
 			<Icon data={faCode} scale={0.8} class="mr-2" />
-			Action (Script)
+			Action
 		</button>
 		{#if trigger}
 			<button
@@ -40,7 +42,7 @@ export let stop = false;
 				tabindex="-1"
 			>
 				<Icon data={faBolt} scale={0.8} class="mr-2" />
-				Trigger (Script)
+				Trigger
 			</button>
 		{/if}
 		<button
@@ -53,7 +55,7 @@ export let stop = false;
 			tabindex="-1"
 		>
 			<Icon data={faCheck} class="mr-1.5" scale={0.8} />
-			Approval (Script)
+			Approval
 		</button>
 		<button
 			class="w-full inline-flex text-left p-2 hover:bg-gray-100"
@@ -63,7 +65,7 @@ export let stop = false;
 			}}
 			role="menuitem"
 		>
-			<span class="mr-2">
+			<span class="mr-3">
 				<Repeat size={14} />
 			</span>
 

package/components/flows/map/InsertModuleButton.svelte.d.ts

@@ -3,6 +3,7 @@ declare const __propDef: {
     props: {
         trigger?: boolean | undefined;
         stop?: boolean | undefined;
+        open?: boolean | undefined;
     };
     events: {
         new: CustomEvent<any>;