windmill-components 1.493.10 → 1.501.4

package/package/components/apps/components/inputs/AppS3FileInput.svelte

@@ -10,13 +10,8 @@ import InitializeComponent from '../helpers/InitializeComponent.svelte';
 import { computeS3FileInputPolicy } from '../../editor/appUtilsS3';
 import { defaultIfEmptyString } from '../../../../utils';
 import { userStore } from '../../../../stores';
-export let id;
-export let configuration;
-export let customCss = undefined;
-export let render;
-export let extraKey = undefined;
-export let onFileChange = undefined;
-let resolvedConfig = initConfig(components['s3fileinputcomponent'].initialData.configuration, configuration);
+let { id, configuration, customCss = undefined, render, extraKey = undefined, onFileChange = undefined } = $props();
+let resolvedConfig = $state(initConfig(components['s3fileinputcomponent'].initialData.configuration, configuration));
 let fileUploads = writable([]);
 const { app, worldStore, componentControl, runnableComponents, workspace } = getContext('AppViewerContext');
 $componentControl[id] = {
@@ -25,14 +20,14 @@ $componentControl[id] = {
         $fileUploads = [];
     }
 };
-let value = undefined;
+let value = $state(undefined);
 const outputs = initOutput($worldStore, id, {
     result: value ?? [],
     loading: false,
     jobId: undefined
 });
-$: resolvedConfigS3 = resolvedConfig.type.configuration.s3;
-let css = initCss($app.css?.fileinputcomponent, customCss);
+let resolvedConfigS3 = $derived(resolvedConfig.type.configuration.s3);
+let css = $state(initCss($app.css?.fileinputcomponent, customCss));
 /*
 
     {#if resolvedConfig.displayDirectLink && fileUpload.progress === 100}

package/package/components/apps/components/inputs/AppS3FileInput.svelte.d.ts

@@ -1,26 +1,12 @@
 import type { ComponentCustomCSS, RichConfigurations } from '../../types';
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const AppS3FileInput: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     id: string;
     configuration: RichConfigurations;
-    customCss?: ComponentCustomCSS<"s3fileinputcomponent"> | undefined;
+    customCss?: ComponentCustomCSS<'s3fileinputcomponent'> | undefined;
     render: boolean;
     extraKey?: string | undefined;
     onFileChange?: string[] | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type AppS3FileInput = InstanceType<typeof AppS3FileInput>;
+}
+declare const AppS3FileInput: import("svelte").Component<Props, {}, "">;
+type AppS3FileInput = ReturnType<typeof AppS3FileInput>;
 export default AppS3FileInput;

package/package/components/apps/components/inputs/AppSelect.svelte

@@ -1,8 +1,6 @@
-<script lang="ts">import { getContext, onDestroy } from 'svelte';
-import Select from '../../svelte-select/lib/index';
+<script lang="ts">import { getContext, onDestroy, untrack } from 'svelte';
 import { initCss } from '../../utils';
 import AlignWrapper from '../helpers/AlignWrapper.svelte';
-import { SELECT_INPUT_DEFAULT_STYLE } from '../../../../defaults';
 import { initConfig, initOutput } from '../../editor/appUtils';
 import InitializeComponent from '../helpers/InitializeComponent.svelte';
 import ResolveConfig from '../helpers/ResolveConfig.svelte';
@@ -12,19 +10,9 @@ import { classNames } from '../../../../utils';
 import { Bug } from 'lucide-svelte';
 import Popover from '../../../Popover.svelte';
 import ResolveStyle from '../helpers/ResolveStyle.svelte';
-export let id;
-export let configuration;
-export let verticalAlignment = undefined;
-export let customCss = undefined;
-export let render;
-export let extraKey = undefined;
-export let preclickAction = undefined;
-export let recomputeIds = undefined;
-export let noInitialize = false;
-export let controls = undefined;
-export let noDefault = false;
-export let onSelect = undefined;
-const { app, worldStore, connectingInput, selectedComponent, runnableComponents, componentControl, darkMode } = getContext('AppViewerContext');
+import Select from '../../../select/Select.svelte';
+let { id, configuration, verticalAlignment = undefined, customCss = undefined, render, extraKey = undefined, preclickAction = undefined, recomputeIds = undefined, noInitialize = false, controls = undefined, noDefault = false, onSelect = undefined } = $props();
+const { app, worldStore, connectingInput, selectedComponent, runnableComponents, componentControl } = getContext('AppViewerContext');
 const iterContext = getContext('ListWrapperContext');
 const listInputs = getContext('ListInputs');
 const rowContext = getContext('RowWrapperContext');
@@ -37,18 +25,17 @@ $componentControl[id] = {
 if (controls) {
     $componentControl[id] = { ...$componentControl[id], ...controls };
 }
-let resolvedConfig = initConfig(components['selectcomponent'].initialData.configuration, configuration);
+let resolvedConfig = $state(initConfig(components['selectcomponent'].initialData.configuration, configuration));
 let outputs = initOutput($worldStore, id, {
     result: undefined
 });
 // The library expects double quotes around the value
-let value = noDefault
+let value = $state(noDefault
     ? undefined
     : outputs?.result.peak()
         ? JSON.stringify(outputs?.result.peak())
-        : undefined;
-$: resolvedConfig.items && handleItems();
-let listItems = [];
+        : undefined);
+let listItems = $state([]);
 function setContextValue(value) {
     if (iterContext && listInputs) {
         listInputs.set(id, value);
@@ -105,8 +92,7 @@ onDestroy(() => {
     listInputs?.remove(id);
     rowInputs?.remove(id);
 });
-function onChange(e) {
-    e?.stopPropagation();
+function onChange(nvalue) {
     if (resolvedConfig.create) {
         listItems = listItems.map((i) => {
             delete i.created;
@@ -114,7 +100,7 @@ function onChange(e) {
         });
     }
     preclickAction?.();
-    setValue(e.detail?.['value']);
+    setValue(nvalue);
     if (onSelect) {
         onSelect.forEach((id) => $runnableComponents?.[id]?.cb?.forEach((f) => f()));
     }
@@ -142,9 +128,10 @@ function onClear() {
     outputs?.result.set(undefined, true);
     setContextValue(undefined);
 }
-let css = initCss($app.css?.selectcomponent, customCss);
+let css = $state(initCss($app.css?.selectcomponent, customCss));
 let previsousFilter = '';
-function handleFilter(e) {
+function onFilter(newFilterText) {
+    filterText = newFilterText;
     if (resolvedConfig.create && filterText !== previsousFilter) {
         previsousFilter = filterText;
         if (filterText.length > 0) {
@@ -159,7 +146,6 @@ function handleFilter(e) {
         }
     }
 }
-$: resolvedConfig.defaultValue != undefined && handleDefault();
 function handleDefault() {
     if (resolvedConfig.defaultValue != undefined) {
         const nvalue = resolvedConfig.defaultValue;
@@ -168,7 +154,13 @@ function handleDefault() {
         setContextValue(nvalue);
     }
 }
-let filterText = '';
+let filterText = $state('');
+$effect(() => {
+    resolvedConfig.items && untrack(() => handleItems());
+});
+$effect(() => {
+    resolvedConfig.defaultValue != undefined && untrack(() => handleDefault());
+});
 </script>
 
 {#each Object.keys(components['selectcomponent'].initialData.configuration) as key (key)}
@@ -199,7 +191,7 @@ let filterText = '';
 	<div
 		class="app-select w-full"
 		style="height: 34px;"
-		on:pointerdown={(e) => {
+		onpointerdown={(e) => {
 			if (!e.shiftKey) {
 				e.stopPropagation()
 			}
@@ -207,7 +199,7 @@ let filterText = '';
 	>
 		{#if Array.isArray(listItems) && listItems.every((x) => x && typeof x == 'object' && typeof x['label'] == 'string' && `value` in x)}
 			{#if resolvedConfig.nativeHtmlSelect}
-				<select class={css?.input?.class} style={css?.input?.style} on:change={onNativeChange}>
+				<select class={css?.input?.class} style={css?.input?.style} onchange={onNativeChange}>
 					{#if resolvedConfig.placeholder}
 						<option value="" disabled selected>{resolvedConfig.placeholder}</option>
 					{/if}
@@ -217,34 +209,22 @@ let filterText = '';
 				</select>
 			{:else}
 				<Select
-					inAppEditor={true}
-					--border-radius="0.250rem"
-					--clear-icon-color="#6b7280"
-					--border={$darkMode ? '1px solid #6b7280' : '1px solid #d1d5db'}
-					bind:filterText
-					on:filter={handleFilter}
-					on:clear={onClear}
-					on:change={onChange}
-					items={listItems}
+					bind:filterText={() => filterText, onFilter}
+					{onClear}
+					items={listItems.map((item) =>
+						item.created && item.label === filterText
+							? { ...item, label: 'Add new: ' + item.label }
+							: item
+					)}
 					listAutoWidth={resolvedConfig.fullWidth}
-					inputStyles={SELECT_INPUT_DEFAULT_STYLE.inputStyles}
-					containerStyles={($darkMode
-						? SELECT_INPUT_DEFAULT_STYLE.containerStylesDark
-						: SELECT_INPUT_DEFAULT_STYLE.containerStyles) + css?.input?.style}
-					{value}
+					containerStyle={css?.input?.style}
+					bind:value={() => value, onChange}
 					class={css?.input?.class}
 					placeholder={resolvedConfig.placeholder}
 					disabled={resolvedConfig.disabled}
-					on:focus={() => {
-						if (!$connectingInput.opened) {
-							$selectedComponent = [id]
-						}
-					}}
-				>
-					<svelte:fragment slot="item" let:item
-						>{#if resolvedConfig.create}{item.created ? 'Add new: ' : ''}{/if}{item.label}
-					</svelte:fragment>
-				</Select>
+					clearable
+					onFocus={() => !$connectingInput.opened && ($selectedComponent = [id])}
+				/>
 			{/if}
 		{:else}
 			<Popover notClickable placement="bottom" popupClass="!bg-surface border w-96">
@@ -255,16 +235,18 @@ let filterText = '';
 				>
 					<Bug size={14} />
 				</div>
-				<span slot="text">
-					<div class="bg-surface">
-						<Alert title="Incorrect options" type="error" size="xs" class="h-full w-full ">
-							The selectable items should be an array of {'{"value": any, "label":}'}. Found:
-							<pre class="w-full bg-surface p-2 rounded-md whitespace-pre-wrap"
-								>{JSON.stringify(listItems, null, 4)}</pre
-							>
-						</Alert>
-					</div>
-				</span>
+				{#snippet text()}
+					<span>
+						<div class="bg-surface">
+							<Alert title="Incorrect options" type="error" size="xs" class="h-full w-full ">
+								The selectable items should be an array of {'{"value": any, "label":}'}. Found:
+								<pre class="w-full bg-surface p-2 rounded-md whitespace-pre-wrap"
+									>{JSON.stringify(listItems, null, 4)}</pre
+								>
+							</Alert>
+						</div>
+					</span>
+				{/snippet}
 			</Popover>
 		{/if}
 	</div>

package/package/components/apps/components/inputs/AppSelect.svelte.d.ts

@@ -1,22 +1,9 @@
 import type { ComponentCustomCSS, RichConfigurations } from '../../types';
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const AppSelect: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     id: string;
     configuration: RichConfigurations;
-    verticalAlignment?: "top" | "center" | "bottom" | undefined;
-    customCss?: ComponentCustomCSS<"selectcomponent"> | undefined;
+    verticalAlignment?: 'top' | 'center' | 'bottom' | undefined;
+    customCss?: ComponentCustomCSS<'selectcomponent'> | undefined;
     render: boolean;
     extraKey?: string | undefined;
     preclickAction?: (() => Promise<void>) | undefined;
@@ -28,8 +15,7 @@ declare const AppSelect: $$__sveltets_2_IsomorphicComponent<{
     } | undefined;
     noDefault?: boolean;
     onSelect?: string[] | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type AppSelect = InstanceType<typeof AppSelect>;
+}
+declare const AppSelect: import("svelte").Component<Props, {}, "">;
+type AppSelect = ReturnType<typeof AppSelect>;
 export default AppSelect;

package/package/components/apps/components/inputs/AppSelectStep.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">import { getContext } from 'svelte';
+<script lang="ts">import { getContext, untrack } from 'svelte';
 import AlignWrapper from '../helpers/AlignWrapper.svelte';
 import { initConfig, initOutput } from '../../editor/appUtils';
 import InitializeComponent from '../helpers/InitializeComponent.svelte';
@@ -8,20 +8,14 @@ import Stepper from '../../../common/stepper/Stepper.svelte';
 import { twMerge } from 'tailwind-merge';
 import { initCss } from '../../utils';
 import ResolveStyle from '../helpers/ResolveStyle.svelte';
-export let id;
-export let configuration;
-export let horizontalAlignment = undefined;
-export let verticalAlignment = undefined;
-export let render;
-export let customCss = undefined;
+let { id, configuration, horizontalAlignment = undefined, verticalAlignment = undefined, render, customCss = undefined } = $props();
 const { app, worldStore, componentControl } = getContext('AppViewerContext');
-const resolvedConfig = initConfig(components['selectstepcomponent'].initialData.configuration, configuration);
+const resolvedConfig = $state(initConfig(components['selectstepcomponent'].initialData.configuration, configuration));
 const outputs = initOutput($worldStore, id, {
     result: undefined
 });
-let selected = '';
-let selectedIndex = 0;
-$: resolvedConfig.defaultValue != undefined && setDefaultValue();
+let selected = $state('');
+let selectedIndex = $state(0);
 $componentControl[id] = {
     setValue(nvalue) {
         selected = nvalue;
@@ -58,8 +52,13 @@ function getValue(item) {
 function getLabel(item) {
     return typeof item == 'string' ? item : item.label;
 }
-let css = initCss($app.css?.selectstepcomponent, customCss);
-$: selected && handleSelection(selected);
+let css = $state(initCss($app.css?.selectstepcomponent, customCss));
+$effect(() => {
+    resolvedConfig.defaultValue != undefined && untrack(() => setDefaultValue());
+});
+$effect(() => {
+    selected && untrack(() => handleSelection(selected));
+});
 </script>
 
 {#each Object.keys(components['selectstepcomponent'].initialData.configuration) as key (key)}
@@ -90,7 +89,7 @@ $: selected && handleSelection(selected);
 	class={twMerge(css?.container?.class, 'wm-select-step')}
 	style={css?.container?.style}
 >
-	<div class="w-full" on:pointerdown={onPointerDown}>
+	<div class="w-full" onpointerdown={onPointerDown}>
 		<Stepper
 			tabs={(resolvedConfig?.items ?? []).map((item) => getLabel(item))}
 			hasValidations={false}

package/package/components/apps/components/inputs/AppSelectStep.svelte.d.ts

@@ -1,26 +1,12 @@
 import type { ComponentCustomCSS, RichConfigurations } from '../../types';
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const AppSelectStep: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     id: string;
     configuration: RichConfigurations;
-    horizontalAlignment?: "left" | "center" | "right" | undefined;
-    verticalAlignment?: "top" | "center" | "bottom" | undefined;
+    horizontalAlignment?: 'left' | 'center' | 'right' | undefined;
+    verticalAlignment?: 'top' | 'center' | 'bottom' | undefined;
     render: boolean;
-    customCss?: ComponentCustomCSS<"selectstepcomponent"> | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type AppSelectStep = InstanceType<typeof AppSelectStep>;
+    customCss?: ComponentCustomCSS<'selectstepcomponent'> | undefined;
+}
+declare const AppSelectStep: import("svelte").Component<Props, {}, "">;
+type AppSelectStep = ReturnType<typeof AppSelectStep>;
 export default AppSelectStep;

package/package/components/apps/components/inputs/AppSelectTab.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">import { getContext, onDestroy } from 'svelte';
+<script lang="ts">import { getContext, onDestroy, untrack } from 'svelte';
 import { initCss } from '../../utils';
 import AlignWrapper from '../helpers/AlignWrapper.svelte';
 import { initConfig, initOutput } from '../../editor/appUtils';
@@ -8,21 +8,15 @@ import { components } from '../../editor/component';
 import ResolveConfig from '../helpers/ResolveConfig.svelte';
 import { twMerge } from 'tailwind-merge';
 import ResolveStyle from '../helpers/ResolveStyle.svelte';
-export let id;
-export let configuration;
-export let horizontalAlignment = undefined;
-export let verticalAlignment = undefined;
-export let customCss = undefined;
-export let render;
+let { id, configuration, horizontalAlignment = undefined, verticalAlignment = undefined, customCss = undefined, render } = $props();
 const { app, worldStore, componentControl } = getContext('AppViewerContext');
-const resolvedConfig = initConfig(components['selecttabcomponent'].initialData.configuration, configuration);
+const resolvedConfig = $state(initConfig(components['selecttabcomponent'].initialData.configuration, configuration));
 const outputs = initOutput($worldStore, id, {
     result: undefined
 });
 const iterContext = getContext('ListWrapperContext');
 const listInputs = getContext('ListInputs');
-let selected = '';
-$: selected === '' && resolvedConfig && setDefaultValue();
+let selected = $state('');
 onDestroy(() => {
     listInputs?.remove(id);
 });
@@ -32,6 +26,11 @@ $componentControl[id] = {
     },
     setTab(index) {
         selected = resolvedConfig.items?.[index]?.value;
+    },
+    setSelectedIndex(index) {
+        if (index >= 0 && index < resolvedConfig.items?.length) {
+            selected = resolvedConfig.items?.[index]?.value;
+        }
     }
 };
 function setDefaultValue() {
@@ -48,8 +47,13 @@ function handleSelection(value) {
         listInputs.set(id, value);
     }
 }
-$: selected && handleSelection(selected);
-let css = initCss($app.css?.selecttabcomponent, customCss);
+let css = $state(initCss($app.css?.selecttabcomponent, customCss));
+$effect.pre(() => {
+    selected === '' && resolvedConfig.defaultValue && untrack(() => setDefaultValue());
+});
+$effect.pre(() => {
+    selected && untrack(() => handleSelection(selected));
+});
 </script>
 
 {#each Object.keys(components['selecttabcomponent'].initialData.configuration) as key (key)}

package/package/components/apps/components/inputs/AppSelectTab.svelte.d.ts

@@ -1,26 +1,12 @@
 import type { ComponentCustomCSS, RichConfigurations } from '../../types';
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const AppSelectTab: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     id: string;
     configuration: RichConfigurations;
-    horizontalAlignment?: "left" | "center" | "right" | undefined;
-    verticalAlignment?: "top" | "center" | "bottom" | undefined;
-    customCss?: ComponentCustomCSS<"selecttabcomponent"> | undefined;
+    horizontalAlignment?: 'left' | 'center' | 'right' | undefined;
+    verticalAlignment?: 'top' | 'center' | 'bottom' | undefined;
+    customCss?: ComponentCustomCSS<'selecttabcomponent'> | undefined;
     render: boolean;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type AppSelectTab = InstanceType<typeof AppSelectTab>;
+}
+declare const AppSelectTab: import("svelte").Component<Props, {}, "">;
+type AppSelectTab = ReturnType<typeof AppSelectTab>;
 export default AppSelectTab;

package/package/components/apps/components/inputs/AppSliderInputs.svelte

@@ -1,5 +1,6 @@
-<script lang="ts">import RangeSlider from 'svelte-range-slider-pips';
-import { getContext, onDestroy } from 'svelte';
+<script lang="ts">import { stopPropagation } from 'svelte/legacy';
+import RangeSlider from 'svelte-range-slider-pips';
+import { getContext, onDestroy, untrack } from 'svelte';
 import AlignWrapper from '../helpers/AlignWrapper.svelte';
 import { twMerge } from 'tailwind-merge';
 import { initCss } from '../../utils';
@@ -8,24 +9,19 @@ import InitializeComponent from '../helpers/InitializeComponent.svelte';
 import { components } from '../../editor/component';
 import ResolveConfig from '../helpers/ResolveConfig.svelte';
 import ResolveStyle from '../helpers/ResolveStyle.svelte';
-export let id;
-export let configuration;
-export let verticalAlignment = undefined;
-export let customCss = undefined;
-export let render;
+let { id, configuration, verticalAlignment = undefined, customCss = undefined, render } = $props();
 const iterContext = getContext('ListWrapperContext');
 const listInputs = getContext('ListInputs');
 const { app, worldStore, selectedComponent, componentControl } = getContext('AppViewerContext');
-let resolvedConfig = initConfig(components['slidercomponent'].initialData.configuration, configuration);
+let resolvedConfig = $state(initConfig(components['slidercomponent'].initialData.configuration, configuration));
 onDestroy(() => {
     listInputs?.remove(id);
 });
-let values = [resolvedConfig.defaultValue ?? 0];
-$: resolvedConfig.defaultValue != undefined && handleDefault();
+let values = $state([resolvedConfig.defaultValue ?? 0]);
 function handleDefault() {
     values = [resolvedConfig?.defaultValue ?? 0];
 }
-let slider;
+let slider = $state();
 const outputs = initOutput($worldStore, id, {
     result: 0 || null
 });
@@ -34,7 +30,6 @@ $componentControl[id] = {
         values = [nvalue];
     }
 };
-$: values && handleValues();
 function handleValues() {
     // Disallow 'e' character in numbers
     // if(value && value.toString().includes('e')) {
@@ -46,15 +41,8 @@ function handleValues() {
         listInputs.set(id, num);
     }
 }
-let css = initCss($app.css?.slidercomponent, customCss);
-let lastStyle = undefined;
-$: if (css && slider && lastStyle !== css?.handle?.style) {
-    const handle = slider.querySelector('.rangeNub');
-    if (handle) {
-        lastStyle = css?.handle?.style;
-        handle.style.cssText = css?.handle?.style ?? '';
-    }
-}
+let css = $state(initCss($app.css?.slidercomponent, customCss));
+let lastStyle = $state(undefined);
 const spanClass = 'text-center text-sm font-medium bg-blue-100 text-blue-800 rounded px-2.5 py-0.5';
 function computeWidth() {
     let maxValue = resolvedConfig.max ?? 0 + (resolvedConfig.step ?? 0);
@@ -69,9 +57,27 @@ function computeWidth() {
         document.body.removeChild(span);
     }
 }
-$: if (resolvedConfig.max != undefined && resolvedConfig.step && render) {
-    computeWidth();
-}
+$effect.pre(() => {
+    resolvedConfig.defaultValue != undefined && untrack(() => handleDefault());
+});
+$effect.pre(() => {
+    values?.[0];
+    values && handleValues();
+});
+$effect.pre(() => {
+    if (css && slider && lastStyle !== css?.handle?.style) {
+        const handle = slider.querySelector('.rangeNub');
+        if (handle) {
+            lastStyle = css?.handle?.style;
+            handle.style.cssText = css?.handle?.style ?? '';
+        }
+    }
+});
+$effect.pre(() => {
+    if (resolvedConfig.max != undefined && resolvedConfig.step && render) {
+        untrack(() => computeWidth());
+    }
+});
 </script>
 
 {#each Object.keys(components['slidercomponent'].initialData.configuration) as key (key)}
@@ -106,7 +112,7 @@ $: if (resolvedConfig.max != undefined && resolvedConfig.step && render) {
 			)}
 			style="--range-handle-focus: {'#7e9abd'}; --range-handle: {'#7e9abd'}; {css?.bar?.style ??
 				''}"
-			on:pointerdown|stopPropagation={() => ($selectedComponent = [id])}
+			onpointerdown={stopPropagation(() => ($selectedComponent = [id]))}
 		>
 			<RangeSlider
 				id="slider-input"

package/package/components/apps/components/inputs/AppSliderInputs.svelte.d.ts

@@ -1,25 +1,11 @@
 import type { ComponentCustomCSS, RichConfigurations } from '../../types';
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const AppSliderInputs: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     id: string;
     configuration: RichConfigurations;
-    verticalAlignment?: "top" | "center" | "bottom" | undefined;
-    customCss?: ComponentCustomCSS<"slidercomponent"> | undefined;
+    verticalAlignment?: 'top' | 'center' | 'bottom' | undefined;
+    customCss?: ComponentCustomCSS<'slidercomponent'> | undefined;
     render: boolean;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type AppSliderInputs = InstanceType<typeof AppSliderInputs>;
+}
+declare const AppSliderInputs: import("svelte").Component<Props, {}, "">;
+type AppSliderInputs = ReturnType<typeof AppSliderInputs>;
 export default AppSliderInputs;