windmill-components 1.447.7 → 1.448.1

package/package/components/ArgInput.svelte.d.ts

@@ -4,6 +4,7 @@ import type ItemPicker from './ItemPicker.svelte';
 import SimpleEditor from './SimpleEditor.svelte';
 import type VariableEditor from './VariableEditor.svelte';
 import type { Script } from '../gen';
+import type { SchemaDiff } from './schema/schemaUtils';
 declare const __propDef: {
     props: {
         label?: string | undefined;
@@ -69,11 +70,21 @@ declare const __propDef: {
         } | undefined;
         otherArgs?: Record<string, any> | undefined;
         lightHeader?: boolean | undefined;
+        diffStatus?: SchemaDiff | undefined;
+        hideNested?: boolean | undefined;
+        nestedParent?: {
+            label: string;
+            nestedParent: any | undefined;
+        } | undefined;
+        nestedClasses?: string | undefined;
         focus?: (() => void) | undefined;
     };
     events: {
         focus: CustomEvent<any>;
         blur: CustomEvent<any>;
+        nestedChange: CustomEvent<any>;
+        acceptChange: CustomEvent<any>;
+        rejectChange: CustomEvent<any>;
         change: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;

package/package/components/AssignableTags.svelte

@@ -5,6 +5,7 @@ import AssignableTagsInner from './AssignableTagsInner.svelte';
 export let placement = 'bottom-end';
 export let color = 'dark';
 export let disabled = false;
+export let showWorkspaceRestriction = false;
 </script>
 
 <Popup
@@ -24,5 +25,5 @@ export let disabled = false;
 			>
 		</Button>
 	</svelte:fragment>
-	<AssignableTagsInner on:refresh />
+	<AssignableTagsInner {showWorkspaceRestriction} on:refresh />
 </Popup>

package/package/components/AssignableTags.svelte.d.ts

@@ -4,6 +4,7 @@ declare const __propDef: {
         placement?: "top-end" | "bottom-end" | undefined;
         color?: "dark" | "nord" | undefined;
         disabled?: boolean | undefined;
+        showWorkspaceRestriction?: boolean | undefined;
     };
     events: {
         refresh: CustomEvent<any>;

package/package/components/AssignableTagsInner.svelte

@@ -7,11 +7,15 @@ import NoWorkerWithTagWarning from './runs/NoWorkerWithTagWarning.svelte';
 import { CUSTOM_TAGS_SETTING } from '../consts';
 import { base } from '../base';
 import { createEventDispatcher } from 'svelte';
+export let showWorkspaceRestriction = false;
 let newTag = '';
 let customTags = undefined;
 async function loadCustomTags() {
     try {
-        customTags = (await WorkerService.getCustomTags()) ?? [];
+        customTags =
+            (await WorkerService.getCustomTags({
+                showWorkspaceRestriction
+            })) ?? [];
     }
     catch (err) {
         sendUserToast(`Could not load global cache: ${err}`, true);

package/package/components/AssignableTagsInner.svelte.d.ts

@@ -1,6 +1,8 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
-    props: Record<string, never>;
+    props: {
+        showWorkspaceRestriction?: boolean | undefined;
+    };
     events: {
         refresh: CustomEvent<any>;
     } & {

package/package/components/AuthSettings.svelte

@@ -15,6 +15,7 @@ import Toggle from './Toggle.svelte';
 import { ExternalLink, Plus } from 'lucide-svelte';
 export let snowflakeAccountIdentifier = '';
 export let oauths = {};
+export let requirePreexistingUserForOauth = false;
 const windmillBuiltins = [
     'github',
     'gitlab',
@@ -39,7 +40,6 @@ let oauth_name = undefined;
 let clientName = '';
 let resourceName = '';
 let tab = 'sso';
-let requirePreexistingUserForOauth = false;
 </script>
 
 <div>

package/package/components/AuthSettings.svelte.d.ts

@@ -3,6 +3,7 @@ declare const __propDef: {
     props: {
         snowflakeAccountIdentifier?: string | undefined;
         oauths?: Record<string, any> | undefined;
+        requirePreexistingUserForOauth?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/EditableSchemaForm.svelte

@@ -38,6 +38,9 @@ export let editTab;
 export let previewSchema = undefined;
 export let editPanelInitialSize = undefined;
 export let editPanelSize = 0;
+export let diff = {};
+export let disableDnd = false;
+export let shouldDispatchChanges = false;
 const dispatch = createEventDispatcher();
 let clazz = '';
 export { clazz as class };
@@ -193,6 +196,10 @@ $: updatePanelSizes($editPanelSizeSmooth, $inputPanelSizeSmooth);
 $: !!editTab ? openEditTab() : closeEditTab();
 let pannelButtonWidth = 0;
 export let pannelExtraButtonWidth = 0;
+export function updateJson() {
+    schemaString = JSON.stringify(schema, null, '\t');
+    editor?.setCode(schemaString);
+}
 </script>
 
 <div class="w-full h-full">
@@ -208,37 +215,60 @@ export let pannelExtraButtonWidth = 0;
 	<Splitpanes class="splitter-hidden w-full">
 		{#if !noPreview}
 			<Pane bind:size={inputPanelSize} minSize={20}>
-				<div class="flex flex-col pr-2 gap-2">
+				<div
+					class="h-full flex flex-col gap-2 {$$slots.openEditTab && editPanelSize > 0
+						? 'pr-[38px]'
+						: 'pr-2'}"
+				>
 					{#if $$slots.addProperty}
-						<div class="w-full justify-left pr-2">
-							<div style={`width: calc(100% - ${pannelButtonWidth - pannelExtraButtonWidth}px);`}>
+						<div class="w-full justify-left pr-2 grow-0">
+							<div
+								style={editPanelSize > 0
+									? `width: 100%;`
+									: `width: calc(100% - ${pannelButtonWidth - pannelExtraButtonWidth}px);`}
+							>
 								<slot name="addProperty" />
 							</div>
 						</div>
 					{/if}
 
-					<SchemaFormDnd
-						schema={previewSchema ? previewSchema : schema}
-						{dndType}
-						bind:args
-						on:click={(e) => {
-							opened = e.detail
-						}}
-						on:reorder={(e) => {
-							schema.order = e.detail
-							schema = schema
-							dispatch('change', schema)
-						}}
-						on:change={() => {
-							schema = schema
-							dispatch('change', schema)
-						}}
-						{lightweightMode}
-						prettifyHeader={isAppInput}
-						disabled={!!previewSchema}
-					/>
+					<div
+						class="min-h-0 overflow-y-auto grow rounded-md {$$slots.runButton
+							? 'flex flex-col gap-2'
+							: ''}"
+					>
+						<SchemaFormDnd
+							nestedClasses={'flex flex-col gap-1'}
+							schema={previewSchema ? previewSchema : schema}
+							{dndType}
+							{disableDnd}
+							bind:args
+							on:click={(e) => {
+								opened = e.detail
+							}}
+							on:reorder={(e) => {
+								schema.order = e.detail
+								schema = schema
+								dispatch('change', schema)
+							}}
+							on:change={() => {
+								schema = schema
+								dispatch('change', schema)
+							}}
+							{lightweightMode}
+							prettifyHeader={isAppInput}
+							disabled={!!previewSchema}
+							{diff}
+							on:acceptChange
+							on:rejectChange
+							on:nestedChange={() => {
+								dispatch('change', schema)
+							}}
+							{shouldDispatchChanges}
+						/>
 
-					<slot name="runButton" />
+						<slot name="runButton" />
+					</div>
 				</div>
 			</Pane>
 		{/if}
@@ -386,7 +416,6 @@ export let pannelExtraButtonWidth = 0;
 															{isAppInput}
 															on:change={() => {
 																schema = schema
-																// console.log('schema', schema)
 																dispatch('change', schema)
 															}}
 														>
@@ -401,8 +430,6 @@ export let pannelExtraButtonWidth = 0;
 																				const isS3 = e.detail == 'S3'
 																				const isOneOf = e.detail == 'oneOf'
 
-																				selected = e.detail
-
 																				const emptyProperty = {
 																					contentEncoding: undefined,
 																					enum_: undefined,
@@ -469,8 +496,12 @@ export let pannelExtraButtonWidth = 0;
 																						type: e.detail
 																					}
 																				}
-																				schema = schema
-																				dispatch('change', schema)
+																				// No better solution than this, needs future rework
+																				setTimeout(() => {
+																					schema = schema
+																					dispatch('change', schema)
+																				}, 100)
+																				dispatch('schemaChange')
 																			}}
 																		>
 																			{#each [['String', 'string'], ['Number', 'number'], ['Integer', 'integer'], ['Object', 'object'], ['OneOf', 'oneOf'], ['Array', 'array'], ['Boolean', 'boolean'], ['S3 Object', 'S3']] as x}
@@ -519,6 +550,7 @@ export let pannelExtraButtonWidth = 0;
 																	on:schemaChange={(e) => {
 																		schema = schema
 																		dispatch('change', schema)
+																		dispatch('schemaChange')
 																	}}
 																/>
 															{/if}

package/package/components/EditableSchemaForm.svelte.d.ts

@@ -1,5 +1,6 @@
 import { SvelteComponent } from "svelte";
 import type { Schema } from '../common';
+import type { SchemaDiff } from './schema/schemaUtils';
 declare const __propDef: {
     props: {
         schema: Schema | any;
@@ -20,16 +21,23 @@ declare const __propDef: {
         previewSchema?: Record<string, any> | undefined;
         editPanelInitialSize?: number | undefined;
         editPanelSize?: number | undefined;
+        diff?: Record<string, SchemaDiff> | undefined;
+        disableDnd?: boolean | undefined;
+        shouldDispatchChanges?: boolean | undefined;
         class?: string | undefined;
         setDefaults?: (() => void) | undefined;
         openField?: ((key: string) => void) | undefined;
         deleteField?: ((key: string) => void) | undefined;
         pannelExtraButtonWidth?: number | undefined;
+        updateJson?: (() => void) | undefined;
     };
     events: {
+        acceptChange: CustomEvent<any>;
+        rejectChange: CustomEvent<any>;
         click: MouseEvent;
         change: CustomEvent<any>;
         delete: CustomEvent<any>;
+        schemaChange: CustomEvent<any>;
         editPanelSizeChanged: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
@@ -48,5 +56,6 @@ export default class EditableSchemaForm extends SvelteComponent<EditableSchemaFo
     get setDefaults(): () => void;
     get openField(): (key: string) => void;
     get deleteField(): (key: string) => void;
+    get updateJson(): () => void;
 }
 export {};

package/package/components/FirstStepInputs.svelte

@@ -24,7 +24,7 @@ async function loadSchema() {
         error = e;
     }
 }
-loadSchema();
+$: $flowStore && $flowStateStore && loadSchema();
 function handleClick() {
     selected = !selected;
     dispatch('select', selected ? schema : undefined);
@@ -41,6 +41,8 @@ function handleKeydown(event) {
     if (event.key === 'Escape' && selected) {
         selected = false;
         dispatch('select', undefined);
+        event.stopPropagation();
+        event.preventDefault();
     }
 }
 let firstUpdate = true;

package/package/components/FlowPreviewContent.svelte

@@ -26,6 +26,7 @@ let selectedJobStepType = 'single';
 let isRunning = false;
 let jobProgressReset;
 export function test() {
+    renderCount++;
     runPreview($previewArgs, undefined);
 }
 const { selectedId, previewArgs, flowStateStore, flowStore, pathStore, initialPath, customUi, executionCount } = getContext('FlowEditorContext');
@@ -126,53 +127,53 @@ let selectedCapture = undefined;
 		on:close={captureLibraryDrawer?.toggleDrawer}
 	>
 		<div class="h-full flex flex-col gap-2">
-			<CapturesInputs
-				flowPath={$pathStore}
-				headless={false}
-				addButton={true}
-				on:select={(e) => {
-					selectedCapture = e.detail
-				}}
-				on:openTriggers={(e) => {
-					dispatch('openTriggers', e.detail)
-					captureLibraryDrawer?.closeDrawer()
-				}}
-			/>
+			<div class="min-h-0 grow h-full">
+				<CapturesInputs
+					flowPath={$pathStore}
+					headless={false}
+					addButton={true}
+					on:select={(e) => {
+						selectedCapture = e.detail
+					}}
+					on:openTriggers={(e) => {
+						dispatch('openTriggers', e.detail)
+						captureLibraryDrawer?.closeDrawer()
+					}}
+				/>
+			</div>
 
-			<div class="h-full overflow-hidden min-h-0 flex flex-col justify-between">
-				<div class="w-full flex flex-col min-h-0 gap-2 px-2 py-2 grow">
-					<div class="w-full flex flex-col">
-						<Button
-							color="blue"
-							btnClasses="w-full"
-							size="sm"
-							spacingSize="xl"
-							on:click={async () => {
-								$previewArgs = JSON.parse(JSON.stringify(selectedCapture))
-								captureLibraryDrawer?.closeDrawer()
-								renderCount++
-							}}
-							disabled={!selectedCapture}
+			<div class="w-full flex flex-col gap-2 px-2 py-2 h-[50%]">
+				<div class="w-full flex flex-col">
+					<Button
+						color="blue"
+						btnClasses="w-full"
+						size="sm"
+						spacingSize="xl"
+						on:click={async () => {
+							$previewArgs = JSON.parse(JSON.stringify(selectedCapture))
+							captureLibraryDrawer?.closeDrawer()
+							renderCount++
+						}}
+						disabled={!selectedCapture}
+					>
+						<ArrowLeftIcon class="w-4 h-4 mr-2" />
+						Use input
+					</Button>
+				</div>
+				<div class="w-full min-h-0 grow overflow-auto">
+					{#if typeof selectedCapture == 'string' && selectedCapture == 'WINDMILL_TOO_BIG'}
+						<div class="text-secondary mt-2">
+							Payload too big to preview but can still be loaded</div
 						>
-							<ArrowLeftIcon class="w-4 h-4 mr-2" />
-							Use input
-						</Button>
-					</div>
-					<div class="w-full min-h-0 grow overflow-auto">
-						{#if typeof selectedCapture == 'string' && selectedCapture == 'WINDMILL_TOO_BIG'}
-							<div class="text-secondary mt-2">
-								Payload too big to preview but can still be loaded</div
-							>
-						{:else if Object.keys(selectedCapture || {}).length > 0}
-							<div class=" overflow-auto h-full p-2">
-								<ObjectViewer json={selectedCapture} />
-							</div>
-						{:else}
-							<div class="text-center text-tertiary">
-								Select an Input to preview scripts arguments
-							</div>
-						{/if}
-					</div>
+					{:else if Object.keys(selectedCapture || {}).length > 0}
+						<div class=" overflow-auto h-full p-2">
+							<ObjectViewer json={selectedCapture} />
+						</div>
+					{:else}
+						<div class="text-center text-tertiary">
+							Select an Input to preview scripts arguments
+						</div>
+					{/if}
 				</div>
 			</div>
 		</div>

package/package/components/HistoricInputs.svelte

@@ -81,6 +81,8 @@ function handleKeydown(event) {
     if (event.key === 'Escape' && selected) {
         selected = undefined;
         dispatch('select', undefined);
+        event.stopPropagation();
+        event.preventDefault();
     }
 }
 function handleError(e) {

package/package/components/InstanceSettings.svelte

@@ -238,7 +238,11 @@ async function sendStats() {
 							>
 						{/if}
 					{:else if category == 'Auth/OAuth'}
-						<AuthSettings bind:oauths bind:snowflakeAccountIdentifier>
+						<AuthSettings
+							bind:oauths
+							bind:snowflakeAccountIdentifier
+							bind:requirePreexistingUserForOauth
+						>
 							<svelte:fragment slot="scim">
 								<div class="flex-col flex gap-2 pb-4">
 									{#each scimSamlSetting as setting}

package/package/components/Range.svelte

@@ -5,6 +5,8 @@ export let initialValue = 0;
 export let value = typeof initialValue === 'string' ? parseInt(initialValue) : initialValue;
 export let disabled = false;
 export let defaultValue = undefined;
+export let format = (v) => `${v}`;
+export let hideInput = false;
 let step = 1;
 let slider;
 function calculateAxisStep(min, max) {
@@ -15,9 +17,6 @@ $: if (value === null) {
     value = 0;
 }
 $: axisStep = calculateAxisStep(min, max);
-const format = (v, i, p) => {
-    return `${v}`;
-};
 function handleKeyDown(event) {
     if (disabled)
         return;
@@ -75,7 +74,9 @@ $: handleWidth = `${Math.max(max.toString().length ?? 2, 2)}em`;
 		{/if}
 	</div>
 
-	<input bind:value type="number" class="!w-16 h-8 !text-xs mb-6" {max} {min} {disabled} />
+	{#if !hideInput}
+		<input bind:value type="number" class="!w-16 h-8 !text-xs mb-6" {max} {min} {disabled} />
+	{/if}
 </div>
 
 <style>

package/package/components/Range.svelte.d.ts

@@ -7,6 +7,8 @@ declare const __propDef: {
         value?: number | undefined;
         disabled?: boolean | undefined;
         defaultValue?: number | undefined;
+        format?: ((value: number) => string) | undefined;
+        hideInput?: boolean | undefined;
     };
     events: {
         pointerdown: PointerEvent;

package/package/components/RunFormAdvancedPopup.svelte

@@ -3,7 +3,7 @@ import Label from './Label.svelte';
 import CloseButton from './common/CloseButton.svelte';
 import Toggle from './Toggle.svelte';
 import Tooltip from './Tooltip.svelte';
-import { userStore, workerTags } from '../stores';
+import { userStore, workerTags, workspaceStore } from '../stores';
 import { Button } from './common';
 import { WorkerService } from '../gen';
 import DateTimeInput from './DateTimeInput.svelte';
@@ -14,7 +14,7 @@ export let overrideTag;
 loadWorkerGroups();
 async function loadWorkerGroups() {
     if (!$workerTags) {
-        $workerTags = await WorkerService.getCustomTags();
+        $workerTags = await WorkerService.getCustomTags({ workspace: $workspaceStore });
     }
 }
 </script>

package/package/components/SavedInputsPicker.svelte

@@ -97,16 +97,22 @@ async function getPropPickerElements() {
 function handleKeydown(event) {
     if (event.key === 'Escape' && isEditing) {
         setEditing(null);
+        event.stopPropagation();
+        event.preventDefault();
     }
     else if (event.key === 'Escape' && selectedInput) {
         selectedInput = null;
         selectedArgs = undefined;
         dispatch('select', undefined);
+        event.stopPropagation();
+        event.preventDefault();
     }
     if (event.key === 'Enter' && isEditing) {
         updateInput(isEditing).then(() => {
             setEditing(null);
         });
+        event.stopPropagation();
+        event.preventDefault();
     }
 }
 function setEditing(input) {

package/package/components/SchemaForm.svelte

@@ -38,6 +38,10 @@ export let dndConfig = undefined;
 export let items = undefined;
 export let helperScript = undefined;
 export let lightHeader = false;
+export let diff = {};
+export let nestedParent = undefined;
+export let shouldDispatchChanges = false;
+export let nestedClasses = '';
 const dispatch = createEventDispatcher();
 let inputCheck = {};
 $: if (args == undefined || typeof args !== 'object') {
@@ -136,7 +140,9 @@ $: isValid = allTrue(inputCheck ?? {});
 {/if}
 
 <div
-	class="w-full {$$props.class} {flexWrap ? 'flex flex-row flex-wrap gap-x-6 ' : ''}"
+	class="w-full {$$props.class} {flexWrap
+		? 'flex flex-row flex-wrap gap-x-6 '
+		: ''} {nestedClasses}"
 	use:dragHandleZone={dndConfig ?? { items: [], dragDisabled: true }}
 	on:finalize
 	on:consider
@@ -144,12 +150,61 @@ $: isValid = allTrue(inputCheck ?? {});
 	{#if keys.length > 0}
 		{#each fields as item, i (item.id)}
 			{@const argName = item.value}
-			<div>
+			<div
+				class={typeof diff[argName] === 'object' && diff[argName].diff !== 'same'
+					? 'bg-red-300 dark:bg-red-800 rounded-md'
+					: ''}
+			>
 				<!-- svelte-ignore a11y-click-events-have-key-events -->
 				{#if !schemaSkippedValues.includes(argName) && keys.includes(argName)}
+					{#if typeof diff[argName] === 'object' && diff[argName].oldSchema}
+						{@const formerProperty = diff[argName].oldSchema}
+						<ArgInput
+							{disablePortal}
+							{resourceTypes}
+							{prettifyHeader}
+							autofocus={i == 0 && autofocus ? true : null}
+							label={argName}
+							description={formerProperty?.description}
+							value={args[argName]}
+							type={formerProperty?.type}
+							oneOf={formerProperty?.oneOf}
+							required={formerProperty?.required}
+							pattern={formerProperty?.pattern}
+							valid={inputCheck[argName]}
+							defaultValue={structuredClone(formerProperty?.default)}
+							enum_={formerProperty?.enum}
+							format={formerProperty?.format}
+							contentEncoding={formerProperty?.contentEncoding}
+							customErrorMessage={formerProperty?.customErrorMessage}
+							properties={formerProperty?.properties}
+							order={formerProperty?.order}
+							nestedRequired={formerProperty?.required}
+							itemsType={formerProperty?.items}
+							disabled={disabledArgs.includes(argName) || disabled || formerProperty?.disabled}
+							{compact}
+							{variableEditor}
+							{itemPicker}
+							{pickForField}
+							password={linkedSecret == argName}
+							extra={formerProperty}
+							{showSchemaExplorer}
+							simpleTooltip={schemaFieldTooltip[argName]}
+							{onlyMaskPassword}
+							nullable={formerProperty?.nullable}
+							title={formerProperty?.title}
+							placeholder={formerProperty?.placeholder}
+							orderEditable={dndConfig != undefined}
+							otherArgs={args}
+							{helperScript}
+							{lightHeader}
+							hideNested={typeof diff[argName].diff === 'object'}
+							diffStatus={undefined}
+						/>
+					{/if}
 					<!-- svelte-ignore a11y-no-static-element-interactions -->
 					<div
-						class="flex flex-row items-center bg-surface"
+						class="flex flex-row items-center"
 						on:click={() => {
 							dispatch('click', argName)
 						}}
@@ -214,7 +269,14 @@ $: isValid = allTrue(inputCheck ?? {});
 									</LightweightArgInput>
 								{:else}
 									<ArgInput
-										on:change={() => dispatch('change')}
+										on:change={() => {
+											dispatch('change')
+										}}
+										on:nestedChange={() => {
+											dispatch('nestedChange')
+										}}
+										on:acceptChange={(e) => dispatch('acceptChange', e.detail)}
+										on:rejectChange={(e) => dispatch('rejectChange', e.detail)}
 										{disablePortal}
 										{resourceTypes}
 										{prettifyHeader}
@@ -255,6 +317,10 @@ $: isValid = allTrue(inputCheck ?? {});
 										otherArgs={args}
 										{helperScript}
 										{lightHeader}
+										diffStatus={diff[argName] ?? undefined}
+										{nestedParent}
+										{shouldDispatchChanges}
+										{nestedClasses}
 									>
 										<svelte:fragment slot="actions">
 											<slot name="actions" />

package/package/components/SchemaForm.svelte.d.ts

@@ -2,6 +2,7 @@ import { SvelteComponent } from "svelte";
 import type { Schema } from '../common';
 import { type Script } from '../gen';
 import { type Options as DndOptions } from '@windmill-labs/svelte-dnd-action';
+import type { SchemaDiff } from './schema/schemaUtils';
 declare const __propDef: {
     props: {
         [x: string]: any;
@@ -41,6 +42,13 @@ declare const __propDef: {
             hash: string;
         } | undefined;
         lightHeader?: boolean | undefined;
+        diff?: Record<string, SchemaDiff> | undefined;
+        nestedParent?: {
+            label: string;
+            nestedParent: any | undefined;
+        } | undefined;
+        shouldDispatchChanges?: boolean | undefined;
+        nestedClasses?: string | undefined;
         setDefaults?: (() => void) | undefined;
     };
     events: {
@@ -48,6 +56,9 @@ declare const __propDef: {
         consider: Event | ClipboardEvent | CompositionEvent | UIEvent | FocusEvent | InputEvent | SubmitEvent | FormDataEvent | KeyboardEvent | MouseEvent | DragEvent | TouchEvent | PointerEvent | WheelEvent | AnimationEvent | TransitionEvent | ErrorEvent | ProgressEvent<EventTarget> | SecurityPolicyViolationEvent;
         click: CustomEvent<any>;
         change: CustomEvent<any>;
+        nestedChange: CustomEvent<any>;
+        acceptChange: CustomEvent<any>;
+        rejectChange: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };