windmill-components 1.89.0 → 1.103.0

package/package/components/TestJobLoader.svelte

@@ -1,6 +1,6 @@
 <script>import { Job, JobService } from '../gen';
 import { workspaceStore } from '../stores';
-import { onDestroy } from 'svelte';
+import { onDestroy, tick } from 'svelte';
 import { createEventDispatcher } from 'svelte';
 export let isLoading = false;
 export let job = undefined;
@@ -37,6 +37,10 @@ export async function abstractRun(fn) {
         return testId;
     }
     catch (err) {
+        // if error happens on submitting the job, reset UI state so the user can try again
+        isLoading = false;
+        currentId = undefined;
+        job = undefined;
         throw err;
     }
 }
@@ -128,6 +132,7 @@ async function loadTestJob(id) {
                 //only CompletedJob has success property
                 isCompleted = true;
                 if (currentId === id) {
+                    await tick();
                     dispatch('done', job);
                     currentId = undefined;
                 }

package/package/components/Toast.svelte

@@ -6,6 +6,7 @@ export let message;
 export let toastId;
 export let error = false;
 export let actions = [];
+export let errorMessage = undefined;
 function handleClose() {
     toast.pop(toastId);
 }
@@ -20,8 +21,8 @@ onMount(() => {
 <div
 	class="pointer-events-auto w-full max-w-sm overflow-hidden bg-white shadow-lg ring-1 ring-black ring-opacity-5 border"
 >
-	<div class="p-2 min-h-[60px]">
-		<div class="flex items-start">
+	<div class="p-2 min-h-[60px] flex flex-col">
+		<div class="flex items-start w-full">
 			<div class="flex-shrink-0 mt-0.5">
 				{#if error}
 					<XCircleIcon class="h-4 w-4 text-red-400" />
@@ -29,22 +30,15 @@ onMount(() => {
 					<CheckCircle2 class="h-4 w-4 text-green-400" />
 				{/if}
 			</div>
-			<div class="ml-3 w-0 flex-1">
+			<div class="ml-3 flex-1 w-0">
 				<p class="text-sm text-gray-500">{message}</p>
-				<div class="mt-2 flex flex-row gap-2 h-15">
-					{#each actions as action, index (index)}
-						<Button
-							on:click={() => {
-								action.callback()
-								toast.pop(toastId)
-							}}
-							class="text-sm !text-black"
-						>
-							{action.label}
-						</Button>
-					{/each}
-				</div>
+				{#if errorMessage}
+					<p class="text-sm text-gray-500 border bg-gray-50 p-2 w-full overflow-auto mt-2">
+						{errorMessage}
+					</p>
+				{/if}
 			</div>
+
 			<div class="ml-4 flex flex-shrink-0">
 				<button
 					type="button"
@@ -60,5 +54,18 @@ onMount(() => {
 				</button>
 			</div>
 		</div>
+		<div class="mt-2 flex flex-row gap-2 h-15">
+			{#each actions as action, index (index)}
+				<Button
+					on:click={() => {
+						action.callback()
+						toast.pop(toastId)
+					}}
+					class="text-sm !text-black"
+				>
+					{action.label}
+				</Button>
+			{/each}
+		</div>
 	</div>
 </div>

package/package/components/Toast.svelte.d.ts

@@ -1,11 +1,12 @@
 import { SvelteComponentTyped } from "svelte";
-import type { ToastAction } from '../utils';
+import type { ToastAction } from '../toast';
 declare const __propDef: {
     props: {
         message: string;
         toastId: string;
         error?: boolean | undefined;
         actions?: ToastAction[] | undefined;
+        errorMessage?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/Toggle.svelte

@@ -1,5 +1,7 @@
-<script>import { createEventDispatcher } from 'svelte';
+<script>import { classNames } from '../utils';
+import { createEventDispatcher } from 'svelte';
 import { twMerge } from 'tailwind-merge';
+import Tooltip from './Tooltip.svelte';
 export let options = {};
 export let checked = false;
 export let disabled = false;
@@ -14,14 +16,14 @@ const dispatch = createEventDispatcher();
 <span class="{$$props.class} z-auto">
 	<label
 		for={id}
-		class="inline-flex items-center mt-2 duration-200 {disabled
+		class="inline-flex items-center mt-2 duration-50 {disabled
 			? 'grayscale opacity-50'
 			: 'cursor-pointer'}"
 	>
 		{#if Boolean(options?.left)}
 			<span
 				class={twMerge(
-					'mr-2 font-medium duration-200',
+					'mr-2 font-medium duration-50',
 					disabled ? 'text-gray-500' : 'text-gray-900',
 					size === 'xs' ? 'text-xs' : 'text-sm',
 					textClass
@@ -47,18 +49,19 @@ const dispatch = createEventDispatcher();
 				}}
 			/>
 			<div
-				class="w-11 h-6 bg-gray-200 rounded-full peer peer-focus:ring-4 peer-focus:ring-blue-300
-				peer-checked:after:translate-x-full peer-checked:after:border-white after:content-['']
-				after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300
-				after:border after:rounded-full after:h-5 after:w-5 after:transition-all {color == 'red'
-					? 'peer-checked:bg-red-600'
-					: 'peer-checked:bg-blue-600'}"
+				class={classNames(
+					"transition-all bg-gray-200 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute  after:bg-white after:border-white after:border after:rounded-full after:transition-all ",
+					color == 'red' ? 'peer-checked:bg-red-600' : 'peer-checked:bg-blue-600',
+					size === 'sm'
+						? 'w-11 h-6 after:top-0.5 after:left-[2px] after:h-5 after:w-5'
+						: 'w-7 h-4 after:top-0.5 after:left-[2px] after:h-3 after:w-3'
+				)}
 			/>
 		</div>
 		{#if Boolean(options?.right)}
 			<span
 				class={twMerge(
-					'ml-2 font-medium duration-200',
+					'ml-2 font-medium duration-50',
 					disabled ? 'text-gray-500' : 'text-gray-900',
 					size === 'xs' ? 'text-xs' : 'text-sm',
 					textClass
@@ -66,6 +69,9 @@ const dispatch = createEventDispatcher();
 				style={textStyle}
 			>
 				{options?.right}
+				{#if options?.rightTooltip}
+					<Tooltip>{options?.rightTooltip}</Tooltip>
+				{/if}
 			</span>
 		{/if}
 	</label>

package/package/components/Toggle.svelte.d.ts

@@ -5,6 +5,7 @@ declare const __propDef: {
         options?: {
             left?: string | undefined;
             right?: string | undefined;
+            rightTooltip?: string | undefined;
         } | undefined;
         checked?: boolean | undefined;
         disabled?: boolean | undefined;

package/package/components/Tooltip.svelte

@@ -12,8 +12,8 @@ export let documentationLink = undefined;
 <Popover notClickable {placement} class={wrapperClass}>
 	<Icon
 		class="{light
-			? 'text-gray-400'
-			: ' text-gray-500'} font-thin inline-block align-middle w-4 {$$props.class}"
+			? 'text-gray-400 hover:text-gray-500'
+			: ' text-gray-500 hover:text-gray-600'}  cursor-pointer transition-all font-thin flex h-4 p-0.5 w-4 justify-center items-center {$$props.class}"
 		data={faInfoCircle}
 		{scale}
 	/>

package/package/components/UserSettings.svelte

@@ -1,6 +1,6 @@
 <script>import { usersWorkspaceStore } from '../stores';
 import { UserService, SettingsService } from '../gen';
-import { displayDate, sendUserToast, copyToClipboard } from '../utils';
+import { displayDate, copyToClipboard } from '../utils';
 import { faClipboard, faPlus } from '@fortawesome/free-solid-svg-icons';
 import TableCustom from './TableCustom.svelte';
 import { Button } from './common';
@@ -18,6 +18,7 @@ import Drawer from './common/drawer/Drawer.svelte';
 import DrawerContent from './common/drawer/DrawerContent.svelte';
 import { page } from '$app/stores';
 import { goto } from '$app/navigation';
+import { sendUserToast } from '../toast';
 let drawer;
 export function openDrawer() {
     loadVersion();
@@ -82,7 +83,7 @@ async function deleteToken(tokenPrefix) {
 	<DrawerContent title="User Settings" on:close={closeDrawer}>
 		<div class="flex flex-col h-full">
 			<div>
-				<div class="text-xs pt-1 pb-2 text-gray-500 ">
+				<div class="text-xs pt-1 pb-2 text-gray-500">
 					Windmill {version}
 				</div>
 
@@ -91,7 +92,7 @@ async function deleteToken(tokenPrefix) {
 					{#if passwordError}
 						<div class="text-red-600 text-2xs grow">{passwordError}</div>
 					{/if}
-					<div class="flex flex-col gap-2 w-full ">
+					<div class="flex flex-col gap-2 w-full">
 						<div class="mt-4">
 							<label class="block w-60 mb-2 text-gray-500">
 								<div class="text-gray-700">email</div>
@@ -121,7 +122,9 @@ async function deleteToken(tokenPrefix) {
 							text-sm
 							"
 									/>
-									<Button size="sm" btnClasses="mt-4" on:click={setPassword}>Set password</Button>
+									<Button size="sm" btnClasses="mt-4 w-min" on:click={setPassword}
+										>Set password</Button
+									>
 								</label>
 							{:else if login_type == 'github'}
 								<span>Authentified through Github OAuth2. Cannot set a password.</span>
@@ -156,7 +159,7 @@ async function deleteToken(tokenPrefix) {
 					<div
 						class="{newToken
 							? ''
-							: 'hidden'} border rounded-md mb-6 px-2 py-2 bg-green-50 flex flex-row flex-wrap "
+							: 'hidden'} border rounded-md mb-6 px-2 py-2 bg-green-50 flex flex-row flex-wrap"
 					>
 						<div>
 							Added token: <button on:click={() => copyToClipboard(newToken ?? '')} class="inline"
@@ -182,7 +185,7 @@ async function deleteToken(tokenPrefix) {
 								>
 								<input type="text" bind:value={newTokenLabel} />
 							</div>
-							<div class="flex flex-col ">
+							<div class="flex flex-col">
 								<label for="expires"
 									>Expires In<span class="text-xs text-gray-500">(optional)</span>
 								</label>

package/package/components/VariableEditor.svelte

@@ -1,5 +1,4 @@
-<script>import { canWrite, isOwner, sendUserToast } from '../utils';
-import { VariableService } from '../gen';
+<script>import { VariableService } from '../gen';
 import Path from './Path.svelte';
 import { createEventDispatcher } from 'svelte';
 import { userStore, workspaceStore } from '../stores';
@@ -13,6 +12,8 @@ import autosize from 'svelte-autosize';
 import Toggle from './Toggle.svelte';
 import { faSave } from '@fortawesome/free-solid-svg-icons';
 import SimpleEditor from './SimpleEditor.svelte';
+import { sendUserToast } from '../toast';
+import { canWrite, isOwner } from '../utils';
 const dispatch = createEventDispatcher();
 let path = '';
 let variable = {
@@ -137,7 +138,11 @@ let editor = undefined;
 					/>
 				</div>
 				<div class="mt-4">
-					<Toggle bind:checked={variable.is_secret} options={{ right: 'Secret' }} />
+					<Toggle
+						on:change={() => loadVariable(initialPath)}
+						bind:checked={variable.is_secret}
+						options={{ right: 'Secret' }}
+					/>
 					<div class="mb-2" />
 					{#if variable.is_secret}
 						<Alert type="warning" title="Audit log for each access">

package/package/components/apps/components/buttons/AppButton.svelte

@@ -7,6 +7,7 @@ import { twMerge } from 'tailwind-merge';
 import { initConfig, initOutput } from '../../editor/appUtils';
 import { components } from '../../editor/component';
 import ResolveConfig from '../helpers/ResolveConfig.svelte';
+import { concatCustomCss } from '../../utils';
 export let id;
 export let componentInput;
 export let configuration;
@@ -18,12 +19,12 @@ export let noWFull = false;
 export let preclickAction = undefined;
 export let customCss = undefined;
 export let render;
-export let initializing = false;
+export let errorHandledByComponent = false;
 export let extraKey = undefined;
 export let controls = undefined;
 const { worldStore, app, componentControl, selectedComponent } = getContext('AppViewerContext');
 let resolvedConfig = initConfig(components['buttoncomponent'].initialData.configuration, configuration);
-$: initializing = resolvedConfig?.label == undefined;
+$: errorHandledByComponent = resolvedConfig?.onError?.selected !== 'errorOverlay';
 let outputs = initOutput($worldStore, id, {
     result: undefined,
     loading: false
@@ -59,13 +60,14 @@ async function handleClick(event) {
         await preclickAction();
     }
     if (!runnableComponent) {
-        runnableWrapper.onSuccess();
+        runnableWrapper?.onSuccess?.();
     }
     else {
         await runnableComponent?.runComponent();
     }
 }
 let loading = false;
+$: css = concatCustomCss($app.css?.buttoncomponent, customCss);
 </script>
 
 {#each Object.keys(components['buttoncomponent'].initialData.configuration) as key (key)}
@@ -87,6 +89,8 @@ let loading = false;
 	bind:loading
 	{componentInput}
 	doOnSuccess={resolvedConfig.onSuccess}
+	doOnError={resolvedConfig.onError}
+	{errorHandledByComponent}
 	{id}
 	{extraQueryParams}
 	autoRefresh={false}
@@ -101,13 +105,13 @@ let loading = false;
 		{/if}
 		<Button
 			on:pointerdown={(e) => e.stopPropagation()}
-			btnClasses={twMerge(
-				$app.css?.['buttoncomponent']?.['button']?.class,
-				customCss?.button?.class,
+			btnClasses={css?.button?.class}
+			wrapperClasses={twMerge(
+				css?.container?.class,
 				resolvedConfig.fillContainer ? 'w-full h-full' : ''
 			)}
-			wrapperClasses={resolvedConfig.fillContainer ? 'w-full h-full' : ''}
-			style={[$app.css?.['buttoncomponent']?.['button']?.style, customCss?.button?.style].join(';')}
+			wrapperStyle={css?.container?.style}
+			style={css?.button?.style}
 			disabled={resolvedConfig.disabled}
 			on:click={handleClick}
 			size={resolvedConfig.size}

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

@@ -14,7 +14,7 @@ declare const __propDef: {
         preclickAction?: (() => Promise<void>) | undefined;
         customCss?: ComponentCustomCSS<'buttoncomponent'> | undefined;
         render: boolean;
-        initializing?: boolean | undefined;
+        errorHandledByComponent?: boolean | undefined;
         extraKey?: string | undefined;
         controls?: {
             left: () => boolean;

package/package/components/apps/components/buttons/AppForm.svelte

@@ -16,20 +16,22 @@ export let extraQueryParams = {};
 export let horizontalAlignment = undefined;
 export let customCss = undefined;
 export let render;
+export let errorHandledByComponent = false;
+$: errorHandledByComponent = resolvedConfig?.onError?.selected !== 'errorOverlay';
 export const staticOutputs = ['loading', 'result'];
 const { app, worldStore, stateId } = getContext('AppViewerContext');
-let outputs = initOutput($worldStore, id, {
+const outputs = initOutput($worldStore, id, {
     result: undefined,
     loading: false
 });
-let resolvedConfig = initConfig(components['formcomponent'].initialData.configuration, configuration);
+const resolvedConfig = initConfig(components['formcomponent'].initialData.configuration, configuration);
 let runnableComponent;
 let isLoading = false;
+let loading = false;
 $: noInputs =
     $stateId != undefined &&
         (componentInput?.type != 'runnable' || Object.keys(componentInput?.fields ?? {}).length == 0);
 $: css = concatCustomCss($app.css?.formcomponent, customCss);
-let loading = false;
 </script>
 
 {#each Object.keys(components['formcomponent'].initialData.configuration) as key (key)}
@@ -49,10 +51,12 @@ let loading = false;
 	{componentInput}
 	{id}
 	doOnSuccess={resolvedConfig.onSuccess}
+	doOnError={resolvedConfig.onError}
+	{errorHandledByComponent}
 	{extraQueryParams}
 	autoRefresh={false}
 	forceSchemaDisplay={true}
-	runnableClass="!block"
+	runnableClass={css?.container?.class}
 	runnableStyle={css?.container?.style}
 	{outputs}
 >
@@ -74,11 +78,11 @@ let loading = false;
 					</div>
 				{/if}
 			</div>
-			<div class="flex justify-end">
+			<div class="flex justify-end my-1">
 				{#if !noInputs}
 					<Button
 						loading={isLoading}
-						btnClasses="my-1 {css?.button?.class ?? ''}"
+						btnClasses={css?.button?.class}
 						style={css?.button?.style ?? ''}
 						on:pointerdown={(e) => {
 							e?.stopPropagation()

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

@@ -11,6 +11,7 @@ declare const __propDef: {
         horizontalAlignment?: 'left' | 'center' | 'right' | undefined;
         customCss?: ComponentCustomCSS<'formcomponent'> | undefined;
         render: boolean;
+        errorHandledByComponent?: boolean | undefined;
         staticOutputs?: string[] | undefined;
     };
     events: {

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

@@ -8,7 +8,7 @@ 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';
+import AlwaysMountedModal from '../../../common/modal/AlwaysMountedModal.svelte';
 export let id;
 export let componentInput;
 export let configuration;
@@ -18,7 +18,14 @@ export let horizontalAlignment = undefined;
 export let verticalAlignment = undefined;
 export let customCss = undefined;
 export let render;
-const { app, worldStore } = getContext('AppViewerContext');
+export let errorHandledByComponent = false;
+$: errorHandledByComponent = resolvedConfig?.onError?.selected !== 'errorOverlay';
+const { app, worldStore, componentControl } = getContext('AppViewerContext');
+$componentControl[id] = {
+    onDelete: () => {
+        modal?.close();
+    }
+};
 let outputs = initOutput($worldStore, id, {
     result: undefined,
     loading: false
@@ -37,6 +44,7 @@ $: if (outputs?.loading != undefined) {
 $: css = concatCustomCss($app?.css?.formbuttoncomponent, customCss);
 let runnableWrapper;
 let loading = false;
+let modal;
 </script>
 
 {#each Object.keys(components['formbuttoncomponent'].initialData.configuration) as key (key)}
@@ -48,11 +56,7 @@ let loading = false;
 	/>
 {/each}
 
-<AlwaysMountedModal
-	title={resolvedConfig.label ?? ''}
-	class={css?.popup?.class}
-	style={css?.popup?.style}
->
+<AlwaysMountedModal title={resolvedConfig.label ?? ''} bind:this={modal}>
 	<RunnableWrapper
 		bind:this={runnableWrapper}
 		{recomputeIds}
@@ -66,6 +70,8 @@ let loading = false;
 		runnableClass="!block"
 		{outputs}
 		doOnSuccess={resolvedConfig.onSuccess}
+		doOnError={resolvedConfig.onError}
+		{errorHandledByComponent}
 	>
 		<div class="flex flex-col gap-2 px-4 w-full">
 			<div>
@@ -90,11 +96,11 @@ let loading = false;
 					}}
 					on:click={async () => {
 						if (!runnableComponent) {
-							runnableWrapper.onSuccess()
+							runnableWrapper?.onSuccess()
 						} else {
 							await runnableComponent?.runComponent()
 						}
-						getModal().close()
+						modal?.close()
 					}}
 					size="xs"
 					color="dark"
@@ -117,7 +123,7 @@ let loading = false;
 		btnClasses={css?.button?.class ?? ''}
 		style={css?.button?.style ?? ''}
 		on:click={(e) => {
-			getModal().open()
+			modal?.open()
 		}}
 	>
 		{resolvedConfig.label}

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

@@ -12,6 +12,7 @@ declare const __propDef: {
         verticalAlignment?: 'top' | 'center' | 'bottom' | undefined;
         customCss?: ComponentCustomCSS<'formbuttoncomponent'> | undefined;
         render: boolean;
+        errorHandledByComponent?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/apps/components/buttons/AppSchemaForm.svelte

@@ -0,0 +1,69 @@
+<script>import { getContext } from 'svelte';
+import { initConfig, initOutput, selectId } from '../../editor/appUtils';
+import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
+import LightweightSchemaForm from '../../../LightweightSchemaForm.svelte';
+import { concatCustomCss } from '../../utils';
+import { twMerge } from 'tailwind-merge';
+import { components } from '../../editor/component';
+import ResolveConfig from '../helpers/ResolveConfig.svelte';
+export let id;
+export let componentInput;
+export let initializing = undefined;
+export let render;
+export let configuration;
+export let customCss = undefined;
+const { worldStore, connectingInput, app, selectedComponent } = getContext('AppViewerContext');
+const outputs = initOutput($worldStore, id, {
+    result: undefined,
+    loading: false,
+    valid: true,
+    values: {}
+});
+let result = undefined;
+let args = {};
+function handleArgsChange() {
+    const newArgs = {};
+    for (const key in args) {
+        if (result?.properties[key]) {
+            newArgs[key] = args[key];
+        }
+    }
+    outputs.values.set(newArgs, true);
+}
+$: args && handleArgsChange();
+$: outputs.valid.set(valid);
+$: css = concatCustomCss($app.css?.schemaformcomponent, customCss);
+const resolvedConfig = initConfig(components['schemaformcomponent'].initialData.configuration, configuration);
+let valid = true;
+</script>
+
+{#each Object.keys(components['schemaformcomponent'].initialData.configuration) as key (key)}
+	<ResolveConfig
+		{id}
+		{key}
+		bind:resolvedConfig={resolvedConfig[key]}
+		configuration={configuration[key]}
+	/>
+{/each}
+
+<RunnableWrapper {outputs} {render} autoRefresh {componentInput} {id} bind:initializing bind:result>
+	{#if result && Object.keys(result?.properties ?? {}).length > 0}
+		<div
+			class={twMerge('p-2 overflow-auto h-full', css?.container?.class)}
+			style={css?.container?.style}
+			on:pointerdown|stopPropagation={(e) =>
+				!$connectingInput.opened && selectId(e, id, selectedComponent, $app)}
+		>
+			<LightweightSchemaForm
+				schema={result}
+				bind:isValid={valid}
+				bind:args
+				displayType={Boolean(resolvedConfig.displayType)}
+				largeGap={Boolean(resolvedConfig.largeGap)}
+				{css}
+			/>
+		</div>
+	{:else}
+		<p class="m-2 italic">Empty form (no propertie)</p>
+	{/if}
+</RunnableWrapper>

package/{dist/components/apps/components/display/AppBarChart.svelte.d.ts → package/components/apps/components/buttons/AppSchemaForm.svelte.d.ts}

@@ -5,19 +5,19 @@ declare const __propDef: {
     props: {
         id: string;
         componentInput: AppInput | undefined;
-        configuration: RichConfigurations;
         initializing?: boolean | undefined;
-        customCss?: ComponentCustomCSS<'barchartcomponent'> | undefined;
         render: boolean;
+        configuration: RichConfigurations;
+        customCss?: ComponentCustomCSS<'schemaformcomponent'> | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
-export type AppBarChartProps = typeof __propDef.props;
-export type AppBarChartEvents = typeof __propDef.events;
-export type AppBarChartSlots = typeof __propDef.slots;
-export default class AppBarChart extends SvelteComponentTyped<AppBarChartProps, AppBarChartEvents, AppBarChartSlots> {
+export type AppSchemaFormProps = typeof __propDef.props;
+export type AppSchemaFormEvents = typeof __propDef.events;
+export type AppSchemaFormSlots = typeof __propDef.slots;
+export default class AppSchemaForm extends SvelteComponentTyped<AppSchemaFormProps, AppSchemaFormEvents, AppSchemaFormSlots> {
 }
 export {};

package/package/components/apps/components/display/AppChartJs.svelte

@@ -0,0 +1,48 @@
+<script>import { Chart } from 'svelte-chartjs';
+import { Chart as ChartJS, registerables } from 'chart.js';
+import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
+import { concatCustomCss } from '../../utils';
+import { getContext } from 'svelte';
+import { initConfig, initOutput } from '../../editor/appUtils';
+import { components } from '../../editor/component';
+import ResolveConfig from '../helpers/ResolveConfig.svelte';
+export let id;
+export let componentInput;
+export let configuration;
+export let initializing = undefined;
+export let customCss = undefined;
+export let render;
+const { app, worldStore } = getContext('AppViewerContext');
+const outputs = initOutput($worldStore, id, {
+    result: undefined,
+    loading: false
+});
+ChartJS.register(...registerables);
+let result = undefined;
+const options = {
+    responsive: true,
+    animation: false,
+    maintainAspectRatio: false
+};
+$: css = concatCustomCss($app.css?.piechartcomponent, customCss);
+const resolvedConfig = initConfig(components['chartjscomponent'].initialData.configuration, configuration);
+</script>
+
+{#each Object.keys(components['chartjscomponent'].initialData.configuration) as key (key)}
+	<ResolveConfig
+		{id}
+		{key}
+		bind:resolvedConfig={resolvedConfig[key]}
+		configuration={configuration[key]}
+	/>
+{/each}
+
+<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 && resolvedConfig.type}
+			{#key resolvedConfig.type}
+				<Chart type={resolvedConfig.type} data={result} {options} />
+			{/key}
+		{/if}
+	</div>
+</RunnableWrapper>