windmill-components 1.60.3 → 1.70.0

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

@@ -0,0 +1,137 @@
+<script>import { Button } from '../../../common';
+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';
+export let id;
+export let componentInput;
+export let configuration;
+export let recomputeIds = undefined;
+export let extraQueryParams = {};
+export let horizontalAlignment = undefined;
+export let verticalAlignment = undefined;
+export const staticOutputs = ['loading', 'result'];
+const { runnableComponents, worldStore } = getContext('AppEditorContext');
+let labelValue = 'Default label';
+let color;
+let size;
+let runnableComponent;
+let disabled = undefined;
+let isLoading = false;
+let ownClick = false;
+let errors = {};
+$: 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({
+    next: (value) => {
+        isLoading = value;
+        if (ownClick && !value) {
+            ownClick = false;
+        }
+    }
+});
+$: loading = isLoading && ownClick;
+let open = 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}
+/>
+
+<Portal>
+	<Modal
+		{open}
+		title={labelValue}
+		on:canceled={() => {
+			open = false
+		}}
+		on:confirmed={() => {
+			open = false
+		}}
+	>
+		<RunnableWrapper
+			defaultUserInput
+			bind:runnableComponent
+			bind: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 () => {
+							await runnableComponent?.runComponent()
+
+							if (recomputeIds) {
+								recomputeIds.forEach((id) => {
+									$runnableComponents[id]?.()
+								})
+							}
+
+							open = false
+						}}
+						size="xs"
+						color="dark"
+					>
+						Submit
+					</Button>
+				</div>
+			</div>
+		</RunnableWrapper>
+	</Modal>
+</Portal>
+
+<AlignWrapper {horizontalAlignment} {verticalAlignment}>
+	{#if errorsMessage}
+		<div class="text-red-500 text-xs">{errorsMessage}</div>
+	{/if}
+	<Button
+		{disabled}
+		{size}
+		{color}
+		on:click={(e) => {
+			open = true
+		}}
+	>
+		{labelValue}
+	</Button>
+</AlignWrapper>

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

@@ -0,0 +1,25 @@
+import { SvelteComponentTyped } from "svelte";
+import type { AppInput } from '../../inputType';
+declare const __propDef: {
+    props: {
+        id: string;
+        componentInput: AppInput | undefined;
+        configuration: Record<string, AppInput>;
+        recomputeIds?: string[] | undefined;
+        extraQueryParams?: Record<string, any> | undefined;
+        horizontalAlignment?: 'left' | 'center' | 'right' | undefined;
+        verticalAlignment?: 'top' | 'center' | 'bottom' | undefined;
+        staticOutputs?: string[] | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+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/buttons/index.d.ts

@@ -0,0 +1,3 @@
+export { default as AppButton } from './AppButton.svelte';
+export { default as AppForm } from './AppForm.svelte';
+export { default as AppFormButton } from './AppFormButton.svelte';

package/components/apps/components/buttons/index.js

@@ -0,0 +1,3 @@
+export { default as AppButton } from './AppButton.svelte';
+export { default as AppForm } from './AppForm.svelte';
+export { default as AppFormButton } from './AppFormButton.svelte';

package/components/apps/components/{dataDisplay → display}/AppBarChart.svelte

@@ -5,6 +5,7 @@ import InputValue from '../helpers/InputValue.svelte';
 export let id;
 export let componentInput;
 export let configuration;
+export let initializing = undefined;
 export const staticOutputs = ['loading', 'result'];
 ChartJS.register(Title, Tooltip, Legend, LineElement, LinearScale, PointElement, CategoryScale, BarElement);
 let result = undefined;
@@ -17,7 +18,17 @@ $: backgroundColor = {
     // red theme
     theme3: ['#e74a3b', '#4e73df', '#1cc88a', '#36b9cc', '#f6c23e']
 }[theme];
-const options = {
+const lineOptions = {
+    responsive: true,
+    animation: false,
+    maintainAspectRatio: false,
+    plugins: {
+        legend: {
+            display: false
+        }
+    }
+};
+const barOptions = {
     responsive: true,
     animation: false,
     maintainAspectRatio: false,
@@ -41,12 +52,12 @@ $: data = {
 <InputValue {id} input={configuration.theme} bind:value={theme} />
 <InputValue {id} input={configuration.line} bind:value={lineChart} />
 
-<RunnableWrapper flexWrap autoRefresh bind:componentInput {id} bind:result>
+<RunnableWrapper flexWrap autoRefresh bind:componentInput {id} bind:initializing bind:result>
 	{#if result}
 		{#if lineChart}
-			<Line {data} {options} />
+			<Line {data} options={lineOptions} />
 		{:else}
-			<Bar {data} {options} />
+			<Bar {data} options={barOptions} />
 		{/if}
 	{/if}
 </RunnableWrapper>

package/components/apps/components/{dataDisplay → display}/AppBarChart.svelte.d.ts

@@ -5,6 +5,7 @@ declare const __propDef: {
         id: string;
         componentInput: AppInput | undefined;
         configuration: Record<string, AppInput>;
+        initializing?: boolean | undefined;
         staticOutputs?: string[] | undefined;
     };
     events: {

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

@@ -0,0 +1,31 @@
+<script>import DisplayResult from '../../../DisplayResult.svelte';
+import { getContext } from 'svelte';
+import { twMerge } from 'tailwind-merge';
+import { IS_APP_PUBLIC_CONTEXT_KEY } from '../../types';
+import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
+export let id;
+export let componentInput;
+export let initializing = undefined;
+export let customCss = undefined;
+const requireHtmlApproval = getContext(IS_APP_PUBLIC_CONTEXT_KEY);
+const { app } = getContext('AppEditorContext');
+let result = undefined;
+export const staticOutputs = ['result', 'loading'];
+</script>
+
+<RunnableWrapper flexWrap bind: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',
+		$app.css?.['displaycomponent']?.['header']?.class,
+		customCss?.header?.class
+	)}>
+		Results
+	</div>
+	<div class={twMerge(
+		'p-2',
+		$app.css?.['displaycomponent']?.['container']?.class,
+		customCss?.container?.class
+	)}>
+		<DisplayResult {result} {requireHtmlApproval} />
+	</div>
+</RunnableWrapper>

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

@@ -0,0 +1,23 @@
+import { SvelteComponentTyped } from "svelte";
+import type { AppInput } from '../../inputType';
+import { type ComponentCustomCSS } from '../../types';
+declare const __propDef: {
+    props: {
+        id: string;
+        componentInput: AppInput | undefined;
+        initializing?: boolean | undefined;
+        customCss?: ComponentCustomCSS<'header' | 'container'> | undefined;
+        staticOutputs?: string[] | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AppDisplayComponentProps = typeof __propDef.props;
+export type AppDisplayComponentEvents = typeof __propDef.events;
+export type AppDisplayComponentSlots = typeof __propDef.slots;
+export default class AppDisplayComponent extends SvelteComponentTyped<AppDisplayComponentProps, AppDisplayComponentEvents, AppDisplayComponentSlots> {
+    get staticOutputs(): string[];
+}
+export {};

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

@@ -0,0 +1,32 @@
+<script>import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
+export let id;
+export let componentInput;
+export let initializing = undefined;
+export const staticOutputs = ['result', 'loading'];
+let result = undefined;
+let h = undefined;
+let w = undefined;
+</script>
+
+<div
+	on:pointerdown={(e) => {
+		e?.preventDefault()
+	}}
+	class="h-full w-full"
+	bind:clientHeight={h}
+	bind:clientWidth={w}
+>
+	<RunnableWrapper autoRefresh flexWrap bind:componentInput {id} bind:initializing bind:result>
+		{#key result}
+			<iframe
+				frameborder="0"
+				style="height: {h}px; width: {w}px"
+				class="p-0"
+				title="sandbox"
+				srcdoc={result
+					? '<scr' + `ipt type="application/javascript" src="/tailwind.js"></script>` + result
+					: 'No html'}
+			/>
+		{/key}
+	</RunnableWrapper>
+</div>

package/components/apps/components/{dataDisplay → display}/AppHtml.svelte.d.ts

@@ -4,9 +4,7 @@ declare const __propDef: {
     props: {
         id: string;
         componentInput: AppInput | undefined;
-        horizontalAlignment?: 'left' | 'center' | 'right' | undefined;
-        verticalAlignment?: 'top' | 'center' | 'bottom' | undefined;
-        configuration: Record<string, AppInput>;
+        initializing?: boolean | undefined;
         staticOutputs?: string[] | undefined;
     };
     events: {

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

@@ -0,0 +1,35 @@
+<script>import { AlignWrapper, InputValue, RunnableWrapper } from '../helpers';
+import { loadIcon } from '../icon';
+export let id;
+export let horizontalAlignment = 'left';
+export let verticalAlignment = undefined;
+export let configuration;
+export const staticOutputs = [];
+let icon = undefined;
+let size;
+let color;
+let strokeWidth;
+let iconComponent;
+$: icon && handleIcon();
+async function handleIcon() {
+    if (icon) {
+        iconComponent = await loadIcon(icon);
+    }
+}
+</script>
+
+<InputValue {id} input={configuration.icon} bind:value={icon} />
+<InputValue {id} input={configuration.size} bind:value={size} />
+<InputValue {id} input={configuration.color} bind:value={color} />
+<InputValue {id} input={configuration.strokeWidth} bind:value={strokeWidth} />
+
+<AlignWrapper {horizontalAlignment} {verticalAlignment}>
+	{#if iconComponent}
+		<svelte:component
+			this={iconComponent}
+			size={size || 24}
+			color={color || 'currentColor'}
+			strokeWidth={strokeWidth || 2}
+		/>
+	{/if}
+</AlignWrapper>

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

@@ -0,0 +1,22 @@
+import { SvelteComponentTyped } from "svelte";
+import type { AppInput } from '../../inputType';
+declare const __propDef: {
+    props: {
+        id: string;
+        horizontalAlignment?: 'left' | 'center' | 'right' | undefined;
+        verticalAlignment?: 'top' | 'center' | 'bottom' | undefined;
+        configuration: Record<string, AppInput>;
+        staticOutputs?: string[] | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AppIconProps = typeof __propDef.props;
+export type AppIconEvents = typeof __propDef.events;
+export type AppIconSlots = typeof __propDef.slots;
+export default class AppIcon extends SvelteComponentTyped<AppIconProps, AppIconEvents, AppIconSlots> {
+    get staticOutputs(): string[];
+}
+export {};

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

@@ -0,0 +1,27 @@
+<script>import InputValue from '../helpers/InputValue.svelte';
+export let id;
+export let configuration;
+export const staticOutputs = ['loading'];
+const fit = {
+    cover: 'object-cover',
+    contain: 'object-contain',
+    fill: 'object-fill'
+};
+let source = undefined;
+let imageFit = undefined;
+let altText = undefined;
+let customStyles = undefined;
+</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} />
+<InputValue {id} input={configuration.customStyles} bind:value={customStyles} />
+
+<img
+	on:pointerdown|preventDefault
+	src={source}
+	alt={altText}
+	style={customStyles}
+	class="w-full h-full {fit[imageFit || 'cover']}"
+/>

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

@@ -0,0 +1,22 @@
+import { SvelteComponentTyped } from "svelte";
+import type { AppInput } from '../../inputType';
+declare const __propDef: {
+    props: {
+        id: string;
+        configuration: Record<string, AppInput>;
+        staticOutputs?: string[] | undefined;
+    };
+    events: {
+        pointerdown: PointerEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AppImageProps = typeof __propDef.props;
+export type AppImageEvents = typeof __propDef.events;
+export type AppImageSlots = typeof __propDef.slots;
+export default class AppImage extends SvelteComponentTyped<AppImageProps, AppImageEvents, AppImageSlots> {
+    get staticOutputs(): string[];
+}
+export {};

package/components/apps/components/{dataDisplay → display}/AppPieChart.svelte

@@ -5,6 +5,7 @@ import InputValue from '../helpers/InputValue.svelte';
 export let id;
 export let componentInput;
 export let configuration;
+export let initializing = undefined;
 export const staticOutputs = ['loading', 'result'];
 ChartJS.register(Title, Tooltip, Legend, LineElement, LinearScale, PointElement, CategoryScale, ArcElement);
 let result = undefined;
@@ -36,7 +37,7 @@ $: data = {
 <InputValue {id} input={configuration.theme} bind:value={theme} />
 <InputValue {id} input={configuration.doughnutStyle} bind:value={doughnut} />
 
-<RunnableWrapper flexWrap autoRefresh bind:componentInput {id} bind:result>
+<RunnableWrapper flexWrap autoRefresh bind:componentInput {id} bind:initializing bind:result>
 	{#if result}
 		{#if doughnut}
 			<Doughnut {data} {options} />

package/components/apps/components/{dataDisplay → display}/AppPieChart.svelte.d.ts

@@ -5,6 +5,7 @@ declare const __propDef: {
         id: string;
         componentInput: AppInput | undefined;
         configuration: Record<string, AppInput>;
+        initializing?: boolean | undefined;
         staticOutputs?: string[] | undefined;
     };
     events: {

package/components/apps/components/{dataDisplay → display}/AppScatterChart.svelte

@@ -6,6 +6,7 @@ import InputValue from '../helpers/InputValue.svelte';
 export let id;
 export let componentInput;
 export let configuration;
+export let initializing = undefined;
 let zoomable = false;
 let pannable = false;
 export const staticOutputs = ['loading', 'result'];
@@ -39,7 +40,7 @@ $: data = {
 <InputValue {id} input={configuration.zoomable} bind:value={zoomable} />
 <InputValue {id} input={configuration.pannable} bind:value={pannable} />
 
-<RunnableWrapper flexWrap autoRefresh bind:componentInput {id} bind:result>
+<RunnableWrapper flexWrap autoRefresh bind:componentInput {id} bind:initializing bind:result>
 	{#if result}
 		<Scatter {data} {options} />
 	{/if}

package/components/apps/components/{dataDisplay → display}/AppScatterChart.svelte.d.ts

@@ -5,6 +5,7 @@ declare const __propDef: {
         id: string;
         componentInput: AppInput | undefined;
         configuration: Record<string, AppInput>;
+        initializing?: boolean | undefined;
         staticOutputs?: string[] | undefined;
     };
     events: {

package/components/apps/components/{dataDisplay → display}/AppText.svelte

@@ -5,13 +5,17 @@ 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';
 export let id;
 export let componentInput;
 export let horizontalAlignment = 'left';
 export let verticalAlignment = undefined;
 export let configuration;
+export let initializing = undefined;
+export let customCss = undefined;
 export const staticOutputs = ['result', 'loading'];
-let extraStyle = undefined;
+const { app } = getContext('AppEditorContext');
 let result = undefined;
 let style = undefined;
 let copyButton;
@@ -47,37 +51,35 @@ $: style && (component = getComponent());
 $: style && (classes = getClasses());
 </script>
 
-<InputValue {id} input={configuration.extraStyle} bind:value={extraStyle} />
 <InputValue {id} input={configuration.style} bind:value={style} />
 <InputValue {id} input={configuration.copyButton} bind:value={copyButton} />
 
-<RunnableWrapper flexWrap bind:componentInput {id} bind:result>
+<RunnableWrapper flexWrap bind:componentInput {id} bind:initializing bind:result>
 	<AlignWrapper {horizontalAlignment} {verticalAlignment}>
 		{#if !result || result === ''}
 			<div class="text-gray-400 bg-gray-100 flex justify-center items-center h-full w-full">
 				No text
 			</div>
 		{:else}
-			<div class="flex flex-wrap gap-2">
+			<div class="flex flex-wrap gap-2 pb-0.5 overflow-x-auto">
 				<svelte:element
 					this={component}
-					class="whitespace-pre-wrap {classes}"
-					style={extraStyle}
+					class={twMerge(
+						'whitespace-pre-wrap',
+						$app.css?.['textcomponent']?.['text']?.class,
+						customCss?.text?.class,
+						classes
+					)}
+					style={[$app.css?.['textcomponent']?.['text']?.style, customCss?.text?.style].join(';')}
 				>
 					{String(result)}
 				</svelte:element>
 				{#if copyButton && result}
 					<Popover notClickable>
-						<Button
-							size="xs"
-							btnClasses="!px-2"
-							on:click={() => copyToClipboard(result)}
-						>
+						<Button size="xs" btnClasses="!px-2" on:click={() => copyToClipboard(result)}>
 							<Clipboard size={14} strokeWidth={2} />
 						</Button>
-						<svelte:fragment slot="text">
-							Copy to clipboard
-						</svelte:fragment>
+						<svelte:fragment slot="text">Copy to clipboard</svelte:fragment>
 					</Popover>
 				{/if}
 			</div>

package/components/apps/components/{dataDisplay → display}/AppText.svelte.d.ts

@@ -1,5 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
 import type { AppInput } from '../../inputType';
+import type { ComponentCustomCSS } from '../../types';
 declare const __propDef: {
     props: {
         id: string;
@@ -7,6 +8,8 @@ declare const __propDef: {
         horizontalAlignment?: 'left' | 'center' | 'right' | undefined;
         verticalAlignment?: 'top' | 'center' | 'bottom' | undefined;
         configuration: Record<string, AppInput>;
+        initializing?: boolean | undefined;
+        customCss?: ComponentCustomCSS<'text'> | undefined;
         staticOutputs?: string[] | undefined;
     };
     events: {

package/components/apps/components/{dataDisplay → display}/AppTimeseries.svelte

@@ -2,11 +2,12 @@
 import 'chartjs-adapter-date-fns';
 import { Chart as ChartJS, Title, Tooltip, Legend, LineElement, LinearScale, PointElement, CategoryScale, BarElement, TimeScale, LogarithmicScale } from 'chart.js';
 import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
-import Scatter from 'svelte-chartjs/Scatter.svelte';
+import { Scatter } from 'svelte-chartjs';
 import InputValue from '../helpers/InputValue.svelte';
 export let id;
 export let componentInput;
 export let configuration;
+export let initializing = undefined;
 export const staticOutputs = ['loading', 'result'];
 let logarithmicScale = false;
 let zoomable = false;
@@ -50,7 +51,7 @@ $: data = {
 <InputValue {id} input={configuration.zoomable} bind:value={zoomable} />
 <InputValue {id} input={configuration.pannable} bind:value={pannable} />
 
-<RunnableWrapper flexWrap autoRefresh bind:componentInput {id} bind:result>
+<RunnableWrapper flexWrap autoRefresh bind:componentInput {id} bind:initializing bind:result>
 	{#if result}
 		<Scatter {data} {options} />
 	{/if}

package/components/apps/components/{dataDisplay → display}/AppTimeseries.svelte.d.ts

@@ -6,6 +6,7 @@ declare const __propDef: {
         id: string;
         componentInput: AppInput | undefined;
         configuration: Record<string, AppInput>;
+        initializing?: boolean | undefined;
         staticOutputs?: string[] | undefined;
     };
     events: {

package/components/apps/components/display/PlotlyHtml.svelte

@@ -0,0 +1,38 @@
+<script>import { Loader2 } from 'lucide-svelte';
+import { onMount } from 'svelte';
+import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
+export let id;
+export let componentInput;
+export let configuration;
+export let initializing = undefined;
+export const staticOutputs = ['result', 'loading'];
+let result = undefined;
+let divEl = null;
+let Plotly;
+onMount(async () => {
+    if (divEl) {
+        //@ts-ignore
+        await import('https://cdn.plot.ly/plotly-2.18.0.min.js');
+        Plotly = window['Plotly'];
+    }
+});
+let h = undefined;
+let w = undefined;
+$: Plotly &&
+    result &&
+    divEl &&
+    h &&
+    w &&
+    Plotly.newPlot(divEl, [result], { width: w, height: h, margin: { l: 40, r: 40, b: 40, t: 40, pad: 4 } }, { responsive: true, displayModeBar: false });
+</script>
+
+<div class="w-full h-full" bind:clientHeight={h} bind:clientWidth={w}>
+	<RunnableWrapper flexWrap bind:componentInput {id} bind:initializing bind:result>
+		{#if !Plotly}
+			<div class="p-2">
+				<Loader2 class="animate-spin" />
+			</div>
+		{/if}
+		<div on:pointerdown bind:this={divEl} />
+	</RunnableWrapper>
+</div>

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

@@ -0,0 +1,24 @@
+import { SvelteComponentTyped } from "svelte";
+import type { AppInput } from '../../inputType';
+declare const __propDef: {
+    props: {
+        id: string;
+        componentInput: AppInput | undefined;
+        configuration: Record<string, AppInput>;
+        initializing?: boolean | undefined;
+        staticOutputs?: string[] | undefined;
+    };
+    events: {
+        pointerdown: PointerEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type PlotlyHtmlProps = typeof __propDef.props;
+export type PlotlyHtmlEvents = typeof __propDef.events;
+export type PlotlyHtmlSlots = typeof __propDef.slots;
+export default class PlotlyHtml extends SvelteComponentTyped<PlotlyHtmlProps, PlotlyHtmlEvents, PlotlyHtmlSlots> {
+    get staticOutputs(): string[];
+}
+export {};