windmill-components 1.79.0 → 1.82.1

package/components/apps/components/buttons/AppFormButton.svelte

@@ -3,11 +3,12 @@ import { faUser } from '@fortawesome/free-solid-svg-icons';
 import { getContext } from 'svelte';
 import { Icon } from 'svelte-awesome';
 import AlignWrapper from '../helpers/AlignWrapper.svelte';
-import InputValue from '../helpers/InputValue.svelte';
 import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
-import Portal from 'svelte-portal';
-import Modal from '../../../common/modal/Modal.svelte';
 import { concatCustomCss } from '../../utils';
+import { initConfig, initOutput } from '../../editor/appUtils';
+import { components } from '../../editor/component';
+import ResolveConfig from '../helpers/ResolveConfig.svelte';
+import AlwaysMountedModal, { getModal } from '../../../common/modal/AlwaysMountedModal.svelte';
 export let id;
 export let componentInput;
 export let configuration;
@@ -17,125 +18,109 @@ export let horizontalAlignment = undefined;
 export let verticalAlignment = undefined;
 export let customCss = undefined;
 export let render;
-export const staticOutputs = ['loading', 'result'];
 const { app, worldStore } = getContext('AppViewerContext');
-let labelValue = 'Default label';
-let color;
-let size;
+let outputs = initOutput($worldStore, id, {
+    result: undefined,
+    loading: false
+});
+let resolvedConfig = initConfig(components['formbuttoncomponent'].initialData.configuration, configuration);
 let runnableComponent;
-let disabled = undefined;
-let isLoading = false;
-let ownClick = false;
 let errors = {};
-let open = false;
 $: errorsMessage = Object.values(errors)
     .filter((x) => x != '')
     .join('\n');
 $: noInputs =
     componentInput?.type != 'runnable' || Object.keys(componentInput?.fields ?? {}).length == 0;
-$: outputs = $worldStore?.outputsById[id];
 $: if (outputs?.loading != undefined) {
     outputs.loading.set(false, true);
 }
-$: outputs?.loading.subscribe({
-    id: 'loading-' + id,
-    next: (value) => {
-        isLoading = value;
-        if (ownClick && !value) {
-            ownClick = false;
-        }
-    }
-});
-$: loading = isLoading && ownClick;
 $: css = concatCustomCss($app?.css?.formbuttoncomponent, customCss);
+let runnableWrapper;
+let loading = false;
 </script>
 
-<InputValue {id} input={configuration.label} bind:value={labelValue} />
-<InputValue {id} input={configuration.color} bind:value={color} />
-<InputValue {id} input={configuration.size} bind:value={size} />
-<InputValue
-	{id}
-	input={configuration.disabled}
-	bind:value={disabled}
-	bind:error={errors.disabled}
-/>
+{#each Object.keys(components['formbuttoncomponent'].initialData.configuration) as key (key)}
+	<ResolveConfig
+		{id}
+		{key}
+		bind:resolvedConfig={resolvedConfig[key]}
+		configuration={configuration[key]}
+	/>
+{/each}
 
-<Portal>
-	<Modal
-		{open}
-		title={labelValue}
-		class={css?.popup.class}
-		style={css?.popup.style}
-		on:canceled={() => {
-			open = false
-		}}
-		on:confirmed={() => {
-			open = false
-		}}
+<AlwaysMountedModal
+	title={resolvedConfig.label ?? ''}
+	class={css?.popup?.class}
+	style={css?.popup?.style}
+>
+	<RunnableWrapper
+		bind:this={runnableWrapper}
+		{recomputeIds}
+		{render}
+		bind:runnableComponent
+		{componentInput}
+		{id}
+		{extraQueryParams}
+		autoRefresh={false}
+		forceSchemaDisplay={true}
+		runnableClass="!block"
+		{outputs}
+		doOnSuccess={resolvedConfig.onSuccess}
 	>
-		<RunnableWrapper
-			{recomputeIds}
-			{render}
-			bind:runnableComponent
-			{componentInput}
-			{id}
-			{extraQueryParams}
-			autoRefresh={false}
-			forceSchemaDisplay={true}
-			runnableClass="!block"
-		>
-			<div class="flex flex-col gap-2 px-4 w-full">
-				<div>
-					{#if noInputs}
-						<div class="text-gray-600 italic text-sm my-4">
-							Run forms are associated with a runnable that has user inputs.
-							<br />
-							Once a script or flow is chosen, set some <strong>Runnable Inputs</strong> to
-							<strong>
-								User Input
-								<Icon data={faUser} scale={1.3} class="rounded-sm bg-gray-200 p-1 ml-0.5" />
-							</strong>
-						</div>
-					{/if}
-				</div>
-				<div class="flex justify-end">
-					<Button
-						{loading}
-						btnClasses="my-1"
-						on:pointerdown={(e) => {
-							e?.stopPropagation()
-							window.dispatchEvent(new Event('pointerup'))
-						}}
-						on:click={async () => {
+		<div class="flex flex-col gap-2 px-4 w-full">
+			<div>
+				{#if noInputs}
+					<div class="text-gray-600 italic text-sm my-4">
+						Run forms are associated with a runnable that has user inputs.
+						<br />
+						Once a script or flow is chosen, set some <strong>Runnable Inputs</strong> to
+						<strong>
+							User Input
+							<Icon data={faUser} scale={1.3} class="rounded-sm bg-gray-200 p-1 ml-0.5" />
+						</strong>
+					</div>
+				{/if}
+			</div>
+			<div class="flex justify-end">
+				<Button
+					{loading}
+					btnClasses="my-1"
+					on:pointerdown={(e) => {
+						e?.stopPropagation()
+						window.dispatchEvent(new Event('pointerup'))
+					}}
+					on:click={async () => {
+						if (!runnableComponent) {
+							runnableWrapper.onSuccess()
+						} else {
 							await runnableComponent?.runComponent()
-
-							open = false
-						}}
-						size="xs"
-						color="dark"
-					>
-						Submit
-					</Button>
-				</div>
+						}
+						getModal().close()
+					}}
+					size="xs"
+					color="dark"
+				>
+					Submit
+				</Button>
 			</div>
-		</RunnableWrapper>
-	</Modal>
-</Portal>
+		</div>
+	</RunnableWrapper>
+</AlwaysMountedModal>
 
 <AlignWrapper {horizontalAlignment} {verticalAlignment}>
 	{#if errorsMessage}
 		<div class="text-red-500 text-xs">{errorsMessage}</div>
 	{/if}
 	<Button
-		{disabled}
-		{size}
-		{color}
+		disabled={resolvedConfig.disabled ?? false}
+		size={resolvedConfig.size ?? 'md'}
+		color={resolvedConfig.color}
 		btnClasses={css?.button?.class ?? ''}
 		style={css?.button?.style ?? ''}
 		on:click={(e) => {
-			open = true
+			getModal().open()
 		}}
 	>
-		{labelValue}
+		{resolvedConfig.label}
 	</Button>
 </AlignWrapper>

package/components/apps/components/buttons/AppFormButton.svelte.d.ts

@@ -10,9 +10,8 @@ declare const __propDef: {
         extraQueryParams?: Record<string, any> | undefined;
         horizontalAlignment?: 'left' | 'center' | 'right' | undefined;
         verticalAlignment?: 'top' | 'center' | 'bottom' | undefined;
-        customCss?: ComponentCustomCSS<'button' | 'popup'> | undefined;
+        customCss?: ComponentCustomCSS<'formbuttoncomponent'> | undefined;
         render: boolean;
-        staticOutputs?: string[] | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -23,6 +22,5 @@ export type AppFormButtonProps = typeof __propDef.props;
 export type AppFormButtonEvents = typeof __propDef.events;
 export type AppFormButtonSlots = typeof __propDef.slots;
 export default class AppFormButton extends SvelteComponentTyped<AppFormButtonProps, AppFormButtonEvents, AppFormButtonSlots> {
-    get staticOutputs(): string[];
 }
 export {};

package/components/apps/components/display/AppBarChart.svelte

@@ -12,7 +12,7 @@ export let initializing = undefined;
 export let customCss = undefined;
 export let render;
 const { app, worldStore } = getContext('AppViewerContext');
-initOutput($worldStore, id, {
+let outputs = initOutput($worldStore, id, {
     result: undefined,
     loading: false
 });
@@ -62,7 +62,7 @@ $: css = concatCustomCss($app.css?.barchartcomponent, customCss);
 <InputValue {id} input={configuration.theme} bind:value={theme} />
 <InputValue {id} input={configuration.line} bind:value={lineChart} />
 
-<RunnableWrapper {render} autoRefresh {componentInput} {id} bind:initializing bind:result>
+<RunnableWrapper {outputs} {render} autoRefresh {componentInput} {id} bind:initializing bind:result>
 	<div class="w-full h-full {css?.container?.class ?? ''}" style={css?.container?.style ?? ''}>
 		{#if result}
 			{#if lineChart}

package/components/apps/components/display/AppBarChart.svelte.d.ts

@@ -7,7 +7,7 @@ declare const __propDef: {
         componentInput: AppInput | undefined;
         configuration: RichConfigurations;
         initializing?: boolean | undefined;
-        customCss?: ComponentCustomCSS<'container'> | undefined;
+        customCss?: ComponentCustomCSS<'barchartcomponent'> | undefined;
         render: boolean;
     };
     events: {

package/components/apps/components/display/AppDisplayComponent.svelte

@@ -12,13 +12,13 @@ export let render;
 const requireHtmlApproval = getContext(IS_APP_PUBLIC_CONTEXT_KEY);
 const { app, worldStore } = getContext('AppViewerContext');
 let result = undefined;
-initOutput($worldStore, id, {
+const outputs = initOutput($worldStore, id, {
     result: undefined,
     loading: false
 });
 </script>
 
-<RunnableWrapper {render} {componentInput} {id} bind:initializing bind:result>
+<RunnableWrapper {outputs} {render} {componentInput} {id} bind:initializing bind:result>
 	<div
 		class={twMerge(
 			'w-full border-b px-2 text-xs p-1 font-semibold bg-gray-500 text-white rounded-t-sm',

package/components/apps/components/display/AppDisplayComponent.svelte.d.ts

@@ -6,7 +6,7 @@ declare const __propDef: {
         id: string;
         componentInput: AppInput | undefined;
         initializing?: boolean | undefined;
-        customCss?: ComponentCustomCSS<'header' | 'container'> | undefined;
+        customCss?: ComponentCustomCSS<'displaycomponent'> | undefined;
         render: boolean;
     };
     events: {

package/components/apps/components/display/AppHtml.svelte

@@ -8,7 +8,7 @@ export let initializing = undefined;
 export let customCss = undefined;
 export let render;
 const { app, worldStore } = getContext('AppViewerContext');
-initOutput($worldStore, id, {
+const outputs = initOutput($worldStore, id, {
     result: undefined,
     loading: false
 });
@@ -26,7 +26,15 @@ $: css = concatCustomCss($app.css?.htmlcomponent, customCss);
 	bind:clientHeight={h}
 	bind:clientWidth={w}
 >
-	<RunnableWrapper {render} autoRefresh {componentInput} {id} bind:initializing bind:result>
+	<RunnableWrapper
+		{outputs}
+		{render}
+		autoRefresh
+		{componentInput}
+		{id}
+		bind:initializing
+		bind:result
+	>
 		{#key result}
 			<iframe
 				frameborder="0"

package/components/apps/components/display/AppHtml.svelte.d.ts

@@ -6,7 +6,7 @@ declare const __propDef: {
         id: string;
         componentInput: AppInput | undefined;
         initializing?: boolean | undefined;
-        customCss?: ComponentCustomCSS<'container'> | undefined;
+        customCss?: ComponentCustomCSS<'htmlcomponent'> | undefined;
         render: boolean;
     };
     events: {

package/components/apps/components/display/AppIcon.svelte

@@ -1,4 +1,5 @@
 <script>import { getContext } from 'svelte';
+import { initOutput } from '../../editor/appUtils';
 import { concatCustomCss } from '../../utils';
 import { AlignWrapper, InputValue } from '../helpers';
 import { loadIcon } from '../icon';
@@ -8,7 +9,9 @@ export let verticalAlignment = undefined;
 export let configuration;
 export let customCss = undefined;
 export let render;
-const { app } = getContext('AppViewerContext');
+const { app, worldStore } = getContext('AppViewerContext');
+//used so that we can count number of outputs setup for first refresh
+initOutput($worldStore, id, {});
 let icon = undefined;
 let size;
 let color;

package/components/apps/components/display/AppIcon.svelte.d.ts

@@ -6,7 +6,7 @@ declare const __propDef: {
         horizontalAlignment?: 'left' | 'center' | 'right' | undefined;
         verticalAlignment?: 'top' | 'center' | 'bottom' | undefined;
         configuration: RichConfigurations;
-        customCss?: ComponentCustomCSS<'container' | 'icon'> | undefined;
+        customCss?: ComponentCustomCSS<'iconcomponent'> | undefined;
         render: boolean;
     };
     events: {

package/components/apps/components/display/AppImage.svelte

@@ -1,33 +1,46 @@
 <script>import { getContext } from 'svelte';
 import { twMerge } from 'tailwind-merge';
+import { initConfig, initOutput } from '../../editor/appUtils';
+import { components, selectOptions } from '../../editor/component';
 import { concatCustomCss } from '../../utils';
-import InputValue from '../helpers/InputValue.svelte';
+import Loader from '../helpers/Loader.svelte';
+import ResolveConfig from '../helpers/ResolveConfig.svelte';
 export let id;
 export let configuration;
 export let customCss = undefined;
 export let render;
-const { app } = getContext('AppViewerContext');
+let resolvedConfig = initConfig(components['imagecomponent'].initialData.configuration, configuration);
+const { app, worldStore } = getContext('AppViewerContext');
 const fit = {
     cover: 'object-cover',
     contain: 'object-contain',
     fill: 'object-fill'
 };
-let source = undefined;
-let imageFit = undefined;
-let altText = undefined;
+//used so that we can count number of outputs setup for first refresh
+initOutput($worldStore, id, {});
 $: css = concatCustomCss($app.css?.imagecomponent, customCss);
 </script>
 
-<InputValue {id} input={configuration.source} bind:value={source} />
-<InputValue {id} input={configuration.imageFit} bind:value={imageFit} />
-<InputValue {id} input={configuration.altText} bind:value={altText} />
+{#each Object.keys(components['imagecomponent'].initialData.configuration) as key (key)}
+	<ResolveConfig
+		{id}
+		{key}
+		bind:resolvedConfig={resolvedConfig[key]}
+		configuration={configuration[key]}
+	/>
+{/each}
 
 {#if render}
-	<img
-		on:pointerdown|preventDefault
-		src={source}
-		alt={altText}
-		style={css?.image?.style ?? ''}
-		class={twMerge(`w-full h-full ${fit[imageFit || 'cover']}`, css?.image?.class ?? '')}
-	/>
+	<Loader loading={resolvedConfig.source == undefined}>
+		<img
+			on:pointerdown|preventDefault
+			src={resolvedConfig.source}
+			alt={resolvedConfig.altText}
+			style={css?.image?.style ?? ''}
+			class={twMerge(
+				`w-full h-full ${fit[resolvedConfig.imageFit || 'cover']}`,
+				css?.image?.class ?? ''
+			)}
+		/>
+	</Loader>
 {/if}

package/components/apps/components/display/AppImage.svelte.d.ts

@@ -4,7 +4,7 @@ declare const __propDef: {
     props: {
         id: string;
         configuration: RichConfigurations;
-        customCss?: ComponentCustomCSS<'image'> | undefined;
+        customCss?: ComponentCustomCSS<'imagecomponent'> | undefined;
         render: boolean;
     };
     events: {

package/components/apps/components/display/AppMap.svelte.d.ts

@@ -4,7 +4,7 @@ declare const __propDef: {
     props: {
         id: string;
         configuration: RichConfigurations;
-        customCss?: ComponentCustomCSS<'map'> | undefined;
+        customCss?: ComponentCustomCSS<'mapcomponent'> | undefined;
         render: boolean;
     };
     events: {

package/components/apps/components/display/AppPdf.svelte

@@ -14,8 +14,7 @@ export let configuration;
 export let customCss = undefined;
 export let render;
 const { app, mode, worldStore, selectedComponent } = getContext('AppViewerContext');
-initOutput($worldStore, id, {
-    result: undefined,
+const outputs = initOutput($worldStore, id, {
     loading: false
 });
 let source = undefined;
@@ -53,6 +52,7 @@ async function loadDocument(src) {
         return;
     }
     try {
+        outputs.loading.set(true);
         await resetDoc();
         doc = await getDocument(src).promise;
         pageNumber = 1;
@@ -64,6 +64,7 @@ async function loadDocument(src) {
         error = err?.message ?? (typeof err === 'string' ? err : 'Error loading PDF');
         console.log(err);
     }
+    outputs.loading.set(false);
 }
 async function renderPdf(scaleToViewport = true, resizing = false) {
     if (!(doc && wrapper && zoom)) {

package/components/apps/components/display/AppPdf.svelte.d.ts

@@ -5,7 +5,7 @@ declare const __propDef: {
     props: {
         id: string;
         configuration: RichConfigurations;
-        customCss?: ComponentCustomCSS<'container'> | undefined;
+        customCss?: ComponentCustomCSS<'pdfcomponent'> | undefined;
         render: boolean;
     };
     events: {

package/components/apps/components/display/AppPieChart.svelte

@@ -12,7 +12,7 @@ export let initializing = undefined;
 export let customCss = undefined;
 export let render;
 const { app, worldStore } = getContext('AppViewerContext');
-initOutput($worldStore, id, {
+const outputs = initOutput($worldStore, id, {
     result: undefined,
     loading: false
 });
@@ -47,7 +47,7 @@ $: css = concatCustomCss($app.css?.piechartcomponent, customCss);
 <InputValue {id} input={configuration.theme} bind:value={theme} />
 <InputValue {id} input={configuration.doughnutStyle} bind:value={doughnut} />
 
-<RunnableWrapper {render} autoRefresh {componentInput} {id} bind:initializing bind:result>
+<RunnableWrapper {outputs} {render} autoRefresh {componentInput} {id} bind:initializing bind:result>
 	<div class="w-full h-full {css?.container?.class ?? ''}" style={css?.container?.style ?? ''}>
 		{#if result}
 			{#if doughnut}

package/components/apps/components/display/AppPieChart.svelte.d.ts

@@ -7,7 +7,7 @@ declare const __propDef: {
         componentInput: AppInput | undefined;
         configuration: RichConfigurations;
         initializing?: boolean | undefined;
-        customCss?: ComponentCustomCSS<'container'> | undefined;
+        customCss?: ComponentCustomCSS<'piechartcomponent'> | undefined;
         render: boolean;
     };
     events: {

package/components/apps/components/display/AppScatterChart.svelte

@@ -15,7 +15,7 @@ export let render;
 let zoomable = false;
 let pannable = false;
 const { app, worldStore } = getContext('AppViewerContext');
-initOutput($worldStore, id, {
+const outputs = initOutput($worldStore, id, {
     result: undefined,
     loading: false
 });
@@ -50,7 +50,7 @@ $: css = concatCustomCss($app.css?.scatterchartcomponent, customCss);
 <InputValue {id} input={configuration.zoomable} bind:value={zoomable} />
 <InputValue {id} input={configuration.pannable} bind:value={pannable} />
 
-<RunnableWrapper {render} autoRefresh {componentInput} {id} bind:initializing bind:result>
+<RunnableWrapper {outputs} {render} autoRefresh {componentInput} {id} bind:initializing bind:result>
 	<div class="w-full h-full {css?.container?.class ?? ''}" style={css?.container?.style ?? ''}>
 		{#if result}
 			<Scatter {data} {options} />

package/components/apps/components/display/AppScatterChart.svelte.d.ts

@@ -7,7 +7,7 @@ declare const __propDef: {
         componentInput: AppInput | undefined;
         configuration: RichConfigurations;
         initializing?: boolean | undefined;
-        customCss?: ComponentCustomCSS<'container'> | undefined;
+        customCss?: ComponentCustomCSS<'scatterchartcomponent'> | undefined;
         render: boolean;
     };
     events: {

package/components/apps/components/display/AppText.svelte

@@ -3,12 +3,15 @@ import { copyToClipboard } from '../../../../utils';
 import Button from '../../../common/button/Button.svelte';
 import Popover from '../../../Popover.svelte';
 import AlignWrapper from '../helpers/AlignWrapper.svelte';
-import InputValue from '../helpers/InputValue.svelte';
 import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
 import { twMerge } from 'tailwind-merge';
 import { getContext } from 'svelte';
-import { initOutput } from '../../editor/appUtils';
+import { initConfig, initOutput } from '../../editor/appUtils';
 import Tooltip from '../../../Tooltip.svelte';
+import { get } from 'svelte/store';
+import ResolveConfig from '../helpers/ResolveConfig.svelte';
+import { components } from '../../editor/component';
+import { isCodeInjection } from '../../../flows/utils';
 export let id;
 export let componentInput;
 export let horizontalAlignment = 'left';
@@ -17,18 +20,20 @@ export let configuration;
 export let initializing = undefined;
 export let customCss = undefined;
 export let render;
+let resolvedConfig = initConfig(components['textcomponent'].initialData.configuration, configuration);
 const { app, worldStore, mode } = getContext('AppViewerContext');
-const { ontextfocus } = getContext('AppEditorContext');
-initOutput($worldStore, id, {
-    result: undefined,
-    loading: false
-});
+const editorcontext = getContext('AppEditorContext');
 let result = undefined;
-let style = undefined;
-let copyButton;
-let tooltip = '';
+if (componentInput?.type == 'template' && !isCodeInjection(componentInput.eval)) {
+    result = componentInput.eval;
+    initializing = false;
+}
+const outputs = initOutput($worldStore, id, {
+    result,
+    loading: initializing
+});
 function getComponent() {
-    switch (style) {
+    switch (resolvedConfig.style) {
         case 'Title':
             return 'h1';
         case 'Subtitle':
@@ -44,7 +49,7 @@ function getComponent() {
     }
 }
 function getClasses() {
-    switch (style) {
+    switch (resolvedConfig.style) {
         case 'Caption':
             return 'text-sm italic text-gray-500';
         case 'Label':
@@ -55,15 +60,20 @@ function getClasses() {
 }
 let component = 'p';
 let classes = '';
-$: style && (component = getComponent());
-$: style && (classes = getClasses());
+$: resolvedConfig.style && (component = getComponent());
+$: resolvedConfig.style && (classes = getClasses());
 </script>
 
-<InputValue {id} input={configuration.style} bind:value={style} />
-<InputValue {id} input={configuration.copyButton} bind:value={copyButton} />
-<InputValue {id} input={configuration.tooltip} bind:value={tooltip} />
+{#each Object.keys(components['textcomponent'].initialData.configuration) as key (key)}
+	<ResolveConfig
+		{id}
+		{key}
+		bind:resolvedConfig={resolvedConfig[key]}
+		configuration={configuration[key]}
+	/>
+{/each}
 
-<RunnableWrapper {render} {componentInput} {id} bind:initializing bind:result>
+<RunnableWrapper {outputs} {render} {componentInput} {id} bind:initializing bind:result>
 	<div class="h-full w-full overflow-hidden">
 		<AlignWrapper {horizontalAlignment} {verticalAlignment}>
 			{#if !result || result === ''}
@@ -78,7 +88,10 @@ $: style && (classes = getClasses());
 						: ''}"
 					on:click={() => {
 						if ($mode === 'dnd' && componentInput?.type == 'template') {
-							$ontextfocus?.()
+							let ontextfocus = editorcontext?.ontextfocus
+							if (ontextfocus) {
+								get(ontextfocus)?.()
+							}
 						}
 					}}
 				>
@@ -93,10 +106,10 @@ $: style && (classes = getClasses());
 						style={[$app.css?.['textcomponent']?.['text']?.style, customCss?.text?.style].join(';')}
 					>
 						{String(result)}
-						{#if tooltip != ''}
-							<Tooltip>{tooltip}</Tooltip>
+						{#if resolvedConfig.tooltip != ''}
+							<Tooltip>{resolvedConfig.tooltip}</Tooltip>
 						{/if}
-						{#if copyButton && result}
+						{#if resolvedConfig.copyButton && result}
 							<Popover notClickable>
 								<Button
 									variant="border"

package/components/apps/components/display/AppText.svelte.d.ts

@@ -9,7 +9,7 @@ declare const __propDef: {
         verticalAlignment?: 'top' | 'center' | 'bottom' | undefined;
         configuration: RichConfigurations;
         initializing?: boolean | undefined;
-        customCss?: ComponentCustomCSS<'text'> | undefined;
+        customCss?: ComponentCustomCSS<'textcomponent'> | undefined;
         render: boolean;
     };
     events: {