windmill-components 1.269.4 → 1.291.4

package/package/components/apps/components/display/table/AppAggridExplorerTable.svelte

@@ -1,5 +1,5 @@
 <script>import { GridApi, createGrid } from 'ag-grid-community';
-import { isObject } from '../../../../../utils';
+import { isObject, sendUserToast } from '../../../../../utils';
 import { createEventDispatcher, getContext } from 'svelte';
 import Alert from '../../../../common/alert/Alert.svelte';
 import { deepEqual } from 'fast-equals';
@@ -9,7 +9,7 @@ import { twMerge } from 'tailwind-merge';
 import { initCss } from '../../../utils';
 import ResolveStyle from '../../helpers/ResolveStyle.svelte';
 import { Button } from '../../../../common';
-import { cellRendererFactory } from '../dbtable/utils';
+import { cellRendererFactory } from './utils';
 import { Trash2 } from 'lucide-svelte';
 // import 'ag-grid-community/dist/styles/ag-theme-alpine-dark.css'
 export let id;
@@ -96,6 +96,11 @@ let api = undefined;
 let eGui;
 $: eGui && mountGrid();
 function transformColumnDefs(columnDefs) {
+    const { isValid, errors } = validateColumnDefs(columnDefs);
+    if (!isValid) {
+        sendUserToast(`Invalid columnDefs: ${errors.join('\n')}`, true);
+        return [];
+    }
     let r = columnDefs?.filter((x) => x && !x.ignored) ?? [];
     if (allowDelete) {
         r.push({
@@ -105,11 +110,13 @@ function transformColumnDefs(columnDefs) {
                 new Button({
                     target: c.eGui,
                     props: {
-                        btnClasses: 'mt-1',
-                        color: 'red',
-                        variant: 'border',
+                        btnClasses: 'w-12',
+                        wrapperClasses: 'flex justify-end items-center h-full',
+                        color: 'light',
+                        size: 'sm',
+                        variant: 'contained',
                         iconOnly: true,
-                        endIcon: { icon: Trash2 },
+                        startIcon: { icon: Trash2 },
                         nonCaptureEvent: true
                     }
                 });
@@ -129,6 +136,19 @@ function transformColumnDefs(columnDefs) {
 }
 let firstRow = 0;
 let lastRow = 0;
+function validateColumnDefs(columnDefs) {
+    let isValid = true;
+    const errors = [];
+    // Validate each column definition
+    columnDefs.forEach((colDef, index) => {
+        // Check if 'field' property exists and is a non-empty string
+        if (!colDef.field || typeof colDef.field !== 'string' || colDef.field.trim() === '') {
+            isValid = false;
+            errors.push(`Column at index ${index} is missing a valid 'field' property.`);
+        }
+    });
+    return { isValid, errors };
+}
 function mountGrid() {
     if (eGui) {
         createGrid(eGui, {
@@ -141,6 +161,10 @@ function mountGrid() {
                 editable: resolvedConfig?.allEditable,
                 onCellValueChanged
             },
+            infiniteInitialRowCount: 100,
+            cacheBlockSize: 100,
+            cacheOverflowSize: 10,
+            maxBlocksInCache: 20,
             suppressColumnMoveAnimation: true,
             rowSelection: resolvedConfig?.multipleSelectable ? 'multiple' : 'single',
             rowMultiSelectWithClick: resolvedConfig?.multipleSelectable
@@ -179,7 +203,11 @@ function mountGrid() {
     }
 }
 $: resolvedConfig && updateOptions();
-$: datasource && api?.updateGridOptions({ datasource });
+let oldDatasource = datasource;
+$: if (datasource && datasource != oldDatasource) {
+    oldDatasource = datasource;
+    api?.updateGridOptions({ datasource });
+}
 let extraConfig = resolvedConfig.extraConfig;
 $: if (!deepEqual(extraConfig, resolvedConfig.extraConfig)) {
     extraConfig = resolvedConfig.extraConfig;
@@ -219,10 +247,6 @@ function updateOptions() {
         ...(resolvedConfig?.extraConfig ?? {})
     });
 }
-let runnableComponent;
-export function recompute() {
-    runnableComponent?.runComponent();
-}
 </script>
 
 {#each Object.keys(css ?? {}) as key (key)}
@@ -237,11 +261,7 @@ export function recompute() {
 
 {#if Array.isArray(resolvedConfig.columnDefs) && resolvedConfig.columnDefs.every(isObject)}
 	<div
-		class={twMerge(
-			'border shadow-sm divide-y flex flex-col h-full',
-			css?.container?.class,
-			'wm-aggrid-container'
-		)}
+		class={twMerge('divide-y flex flex-col h-full', css?.container?.class, 'wm-aggrid-container')}
 		style={containerHeight ? `height: ${containerHeight}px;` : css?.container?.style}
 		bind:clientHeight
 		bind:clientWidth
@@ -257,10 +277,10 @@ export function recompute() {
 		>
 			<div bind:this={eGui} style:height="100%" />
 		</div>
+		<div class="flex gap-1 w-full justify-end text-sm text-secondary py-1"
+			>{firstRow}{'->'}{lastRow + 1} of {datasource?.rowCount} rows</div
+		>
 	</div>
-	<div class="flex gap-1 absolute bottom-1 right-2 text-sm text-secondary"
-		>{firstRow}{'->'}{lastRow + 1} of {datasource?.rowCount} rows</div
-	>
 {:else if resolvedConfig.columnDefs != undefined}
 	<Alert title="Parsing issues" type="error" size="xs">
 		The columnDefs should be an array of objects, received:

package/package/components/apps/components/display/table/AppAggridExplorerTable.svelte.d.ts

@@ -17,7 +17,6 @@ declare const __propDef: {
         outputs: Record<string, Output<any>>;
         allowDelete: boolean;
         clearRows?: (() => void) | undefined;
-        recompute?: (() => void) | undefined;
     };
     events: {
         update: CustomEvent<any>;
@@ -32,6 +31,5 @@ export type AppAggridExplorerTableEvents = typeof __propDef.events;
 export type AppAggridExplorerTableSlots = typeof __propDef.slots;
 export default class AppAggridExplorerTable extends SvelteComponent<AppAggridExplorerTableProps, AppAggridExplorerTableEvents, AppAggridExplorerTableSlots> {
     get clearRows(): () => void;
-    get recompute(): () => void;
 }
 export {};

package/package/components/apps/components/display/table/AppAggridTable.svelte

@@ -103,7 +103,7 @@ function onCellValueChanged(event) {
             column: event.colDef.field,
             value: dataCell
         });
-        result[event.node.rowIndex][event.colDef.field] = dataCell;
+        result[Number(event.node.data['__index'])][event.colDef.field] = dataCell;
         let data = { ...result[event.node.rowIndex] };
         outputs?.selectedRow?.set(data);
     }
@@ -164,6 +164,9 @@ function mountGrid() {
                     onSelectionChanged(e.api);
                     resolvedConfig?.extraConfig?.['onSelectionChanged']?.(e);
                 },
+                onCellEditingStarted: (e) => {
+                    e.api.getRowNode(e.data['__index'])?.setSelected(true);
+                },
                 onFilterChanged: (e) => {
                     outputs?.filters?.set(e.api.getFilterModel());
                     outputs?.displayedRowCount?.set(e.api.getDisplayedRowCount());

package/package/components/apps/components/display/table/AppTable.svelte

@@ -505,6 +505,7 @@ function updateCellValue(rowIndex, columnIndex, newCellValue) {
 																	customCss={actionButton.customCss}
 																	configuration={actionButton.configuration}
 																	recomputeIds={actionButton.recomputeIds}
+																	onToggle={actionButton.onToggle}
 																	preclickAction={async () => {
 																		toggleRow(row)
 																	}}
@@ -521,6 +522,7 @@ function updateCellValue(rowIndex, columnIndex, newCellValue) {
 																		customCss={actionButton.customCss}
 																		configuration={actionButton.configuration}
 																		recomputeIds={actionButton.recomputeIds}
+																		onSelect={actionButton.onSelect}
 																		preclickAction={async () => {
 																			toggleRow(row)
 																		}}
@@ -553,6 +555,7 @@ function updateCellValue(rowIndex, columnIndex, newCellValue) {
 																customCss={actionButton.customCss}
 																configuration={actionButton.configuration}
 																recomputeIds={actionButton.recomputeIds}
+																onToggle={actionButton.onToggle}
 																preclickAction={async () => {
 																	toggleRow(row)
 																}}
@@ -569,6 +572,7 @@ function updateCellValue(rowIndex, columnIndex, newCellValue) {
 																	customCss={actionButton.customCss}
 																	configuration={actionButton.configuration}
 																	recomputeIds={actionButton.recomputeIds}
+																	onSelect={actionButton.onSelect}
 																	preclickAction={async () => {
 																		toggleRow(row)
 																	}}

package/package/components/apps/components/display/table/AppTable.svelte.d.ts

@@ -1,13 +1,13 @@
 import { SvelteComponent } from "svelte";
 import type { BaseAppComponent, ComponentCustomCSS, RichConfigurations } from '../../../types';
 import type { AppInput } from '../../../inputType';
-import { type ButtonComponent } from '../../../editor/component';
+import { type ButtonComponent, type CheckboxComponent, type SelectComponent } from '../../../editor/component';
 declare const __propDef: {
     props: {
         id: string;
         componentInput: AppInput | undefined;
         configuration: RichConfigurations;
-        actionButtons: (BaseAppComponent & ButtonComponent)[];
+        actionButtons: (BaseAppComponent & (ButtonComponent | CheckboxComponent | SelectComponent))[];
         initializing?: boolean | undefined;
         customCss?: ComponentCustomCSS<'tablecomponent'> | undefined;
         render: boolean;

package/package/components/apps/components/display/table/utils.js

@@ -0,0 +1,42 @@
+/**
+ * Class for defining a cell renderer.
+ * If you don't need to define a separate class you could use cellRendererFactory
+ * to create a component with the column definitions.
+ */
+export class AbstractCellRenderer {
+    eGui;
+    value;
+    params;
+    constructor(parentElement = 'span') {
+        // create empty span (or other element) to place svelte component in
+        this.eGui = document.createElement(parentElement);
+    }
+    init(params) {
+        this.value = params.value;
+        this.createComponent(params);
+        this.eGui.addEventListener('click', () => params.onClick?.(params.data));
+        this.params = params;
+    }
+    getGui() {
+        return this.eGui;
+    }
+    refresh(params) {
+        this.value = params.value;
+        this.eGui.innerHTML = '';
+        return true;
+    }
+}
+/**
+ * Creates a cell renderer using the given callback for how to initialise a svelte component.
+ * See AbstractCellRenderer.createComponent
+ * @param svelteComponent function for how to create the svelte component
+ * @returns
+ */
+export function cellRendererFactory(svelteComponent) {
+    class Renderer extends AbstractCellRenderer {
+        createComponent(params) {
+            svelteComponent(this, params);
+        }
+    }
+    return Renderer;
+}

package/package/components/apps/components/helpers/InputValue.svelte

@@ -12,6 +12,7 @@ export let error = '';
 export let key = '';
 export let field = key;
 export let onDemandOnly = false;
+export let exportValueFunction = false;
 const { componentControl, runnableComponents } = getContext('AppViewerContext');
 const editorContext = getContext('AppEditorContext');
 const iterContext = getContext('ListWrapperContext');
@@ -59,11 +60,7 @@ let timeout = undefined;
 let firstDebounce = true;
 const debounce_ms = 50;
 export async function computeExpr(args) {
-    const nvalue = await evalExpr(lastInput, args);
-    if (!deepEqual(nvalue, value)) {
-        value = nvalue;
-    }
-    return nvalue;
+    return await evalExpr(lastInput, args);
 }
 function debounce(cb) {
     if (firstDebounce) {
@@ -91,6 +88,7 @@ $: lastInput && $worldStore && debounce(handleConnection);
 const debounceTemplate = async () => {
     let nvalue = await getValue(lastInput);
     if (!deepEqual(nvalue, value)) {
+        // console.log('template')
         value = nvalue;
     }
 };
@@ -113,6 +111,7 @@ const debounceEval = async (s) => {
     if (!onDemandOnly) {
         let nhash = typeof nvalue != 'object' ? nvalue : sum(nvalue);
         if (lastExprHash != nhash) {
+            // console.log('eval changed', field, nvalue)
             value = nvalue;
             lastExprHash = nhash;
         }
@@ -122,6 +121,7 @@ $: lastInput && lastInput.type == 'eval' && $stateId && $state && debounce2(debo
 $: lastInput?.type == 'evalv2' && lastInput.expr && debounceEval('exprChanged');
 $: lastInput?.type == 'templatev2' && lastInput.eval && debounceTemplate();
 async function handleConnection() {
+    // console.log('handleCon')
     if (lastInput?.type === 'connected') {
         if (lastInput.connection) {
             const { path, componentId } = lastInput.connection;
@@ -142,7 +142,8 @@ async function handleConnection() {
         value = await evalExpr(lastInput);
     }
     else if (lastInput?.type == 'evalv2') {
-        if (onDemandOnly) {
+        // console.log('evalv2', onDemandOnly, field)
+        if (onDemandOnly && exportValueFunction) {
             value = (args) => {
                 return evalExpr(lastInput, args);
             };
@@ -189,7 +190,7 @@ async function evalExpr(input, args) {
         return;
     try {
         const context = computeGlobalContext($worldStore, deepMergeWithPriority(fullContext, args ?? {}));
-        const r = await eval_like(input.expr, context, true, $state, $mode == 'dnd', $componentControl, $worldStore, $runnableComponents);
+        const r = await eval_like(input.expr, context, $state, $mode == 'dnd', $componentControl, $worldStore, $runnableComponents, false);
         error = '';
         return r;
     }
@@ -206,7 +207,7 @@ async function getValue(input) {
         return;
     if ((input.type === 'template' || input.type == 'templatev2') && isCodeInjection(input.eval)) {
         try {
-            const r = await eval_like('`' + input.eval + '`', computeGlobalContext($worldStore, fullContext), true, $state, $mode == 'dnd', $componentControl, $worldStore, $runnableComponents);
+            const r = await eval_like('`' + input.eval + '`', computeGlobalContext($worldStore, fullContext), $state, $mode == 'dnd', $componentControl, $worldStore, $runnableComponents, false);
             error = '';
             return r;
         }
@@ -231,6 +232,7 @@ function onValueChange(newValue) {
             // No connection
             return;
         }
+        // console.log('onValueChange', newValue, connection, previousConnectedValue)
         previousConnectedValue = newValue;
         let { path } = connection;
         path = path.replace(/\[(\d+)\]/g, '.$1').replace(/\[\"(.*)\"\]/g, '.$1');

package/package/components/apps/components/helpers/InputValue.svelte.d.ts

@@ -10,6 +10,7 @@ declare const __propDef: {
         key?: string | undefined;
         field?: string | undefined;
         onDemandOnly?: boolean | undefined;
+        exportValueFunction?: boolean | undefined;
         computeExpr?: ((args?: Record<string, any>) => Promise<any>) | undefined;
     };
     events: {

package/package/components/apps/components/helpers/RefreshButton.svelte

@@ -11,7 +11,7 @@ async function refresh() {
 <button
 	on:pointerdown|preventDefault|stopPropagation
 	on:click|preventDefault|stopPropagation={refresh}
-	class="center-center p-1 rounded border bg-surface/60 hover:bg-gray-200 z-10"
+	class="center-center p-1 rounded border bg-surface/60 hover:bg-surface-hover z-10"
 >
 	<RefreshCw class={loading ? 'animate-spin' : ''} size={16} />
 </button>

package/package/components/apps/components/helpers/ResolveConfig.svelte

@@ -25,6 +25,7 @@ function handleSelected(selected) {
 				bind:value={resolvedConfig.configuration[choice][nestedKey]}
 				onDemandOnly={initialConfig?.type == 'oneOf' &&
 					initialConfig?.configuration?.[choice]?.[nestedKey]?.onDemandOnly}
+				exportValueFunction
 			/>
 		{/if}
 	{/each}
@@ -37,5 +38,6 @@ function handleSelected(selected) {
 		onDemandOnly={(initialConfig?.type == 'static' || initialConfig?.type == 'evalv2') &&
 			initialConfig?.onDemandOnly}
 		bind:value={resolvedConfig}
+		exportValueFunction
 	/>
 {/if}

package/package/components/apps/components/helpers/RunnableComponent.svelte

@@ -75,6 +75,7 @@ $: if (!deepEqual(currentStaticValues, lazyStaticValues)) {
     lazyStaticValues = currentStaticValues;
     refreshIfAutoRefresh('static changed');
 }
+// $: console.log(runnableInputValues)
 $: (runnableInputValues || extraQueryParams || args) &&
     resultJobLoader &&
     refreshIfAutoRefresh('arg changed');
@@ -173,7 +174,7 @@ async function executeComponent(noToast = false, inlineScriptOverride, setRunnab
                 iter: iterContext ? $iterContext : undefined,
                 row: rowContext ? $rowContext : undefined,
                 group: groupContext ? $groupContext : undefined
-            }), false, $state, isEditor, $componentControl, $worldStore, $runnableComponents);
+            }), $state, isEditor, $componentControl, $worldStore, $runnableComponents, true);
             await setResult(r, job, setRunnableJobEditorPanel);
             $state = $state;
         }
@@ -274,6 +275,8 @@ async function executeComponent(noToast = false, inlineScriptOverride, setRunnab
         let error = e.body ?? e.message;
         updateResult({ error });
         $errorByComponent[id] = { error };
+        donePromise?.({ error });
+        sendUserToast(error, true);
         loading = false;
     }
 }
@@ -337,7 +340,7 @@ async function runTransformer(res) {
                 iter: iterContext ? $iterContext : undefined,
                 row: rowContext ? $rowContext : undefined,
                 result: res
-            }), false, $state, isEditor, $componentControl, $worldStore, $runnableComponents);
+            }), $state, isEditor, $componentControl, $worldStore, $runnableComponents, true);
             return transformerResult;
         }
         catch (err) {
@@ -450,6 +453,7 @@ function updateBgRuns(loading) {
 			{id}
 			input={fields[key]}
 			bind:value={runnableInputValues[key]}
+			onDemandOnly={v.onDemandOnly}
 		/>
 	{/if}
 {/each}

package/package/components/apps/components/helpers/eval.d.ts

@@ -1,6 +1,6 @@
 import type { World } from '../../rx';
 export declare function computeGlobalContext(world: World | undefined, extraContext?: any): any;
-export declare function eval_like(text: string, context: {} | undefined, noReturn: boolean, state: Record<string, any>, editor: boolean, controlComponents: Record<string, {
+export declare function eval_like(text: string, context: {} | undefined, state: Record<string, any>, editor: boolean, controlComponents: Record<string, {
     setTab?: (index: number) => void;
     agGrid?: {
         api: any;
@@ -18,4 +18,4 @@ export declare function eval_like(text: string, context: {} | undefined, noRetur
     clearFiles?: () => void;
 }>, worldStore: World | undefined, runnableComponents: Record<string, {
     cb?: (() => void)[];
-}>): Promise<any>;
+}>, noReturn: boolean): Promise<any>;

package/package/components/apps/components/helpers/eval.js

@@ -13,23 +13,33 @@ export function computeGlobalContext(world, extraContext = {}) {
         ...extraContext
     };
 }
-function create_context_function_template(eval_string, context, noReturn) {
+function create_context_function_template(eval_string, contextKeys, noReturn) {
+    let hasReturnAsLastLine = noReturn || eval_string.split('\n').some((x) => x.startsWith('return '));
     return `
 return async function (context, state, goto, setTab, recompute, getAgGrid, setValue, setSelectedIndex, openModal, closeModal, open, close, validate, invalidate, validateAll, clearFiles, showToast) {
 "use strict";
-${Object.keys(context).length > 0
-        ? `let ${Object.keys(context).map((key) => ` ${key} = context['${key}']`)};`
+${contextKeys && contextKeys.length > 0
+        ? `let ${contextKeys.map((key) => ` ${key} = context['${key}']`)};`
         : ``}
-${noReturn
-        ? `return ${eval_string.startsWith('return ') ? eval_string.substring(7) : eval_string}`
-        : eval_string}
+${hasReturnAsLastLine
+        ? eval_string
+        : `
+return ${eval_string.startsWith('return ') ? eval_string.substring(7) : eval_string}`}
+
 }                                                                                                                   
 `;
 }
-function make_context_evaluator(eval_string, context, noReturn) {
-    let template = create_context_function_template(eval_string, context, noReturn);
+let functorCache = {};
+function make_context_evaluator(eval_string, contextKeys, noReturn) {
+    let cacheKey = hashCode(JSON.stringify({ eval_string, contextKeys, noReturn }));
+    if (functorCache[cacheKey]) {
+        return functorCache[cacheKey];
+    }
+    let template = create_context_function_template(eval_string, contextKeys, noReturn);
     let functor = Function(template);
-    return functor();
+    let r = functor();
+    functorCache[cacheKey] = r;
+    return r;
 }
 function isSerializable(obj) {
     var isNestedSerializable;
@@ -60,7 +70,18 @@ function isSerializable(obj) {
     }
     return true;
 }
-export async function eval_like(text, context = {}, noReturn, state, editor, controlComponents, worldStore, runnableComponents) {
+function hashCode(s) {
+    var hash = 0, i, chr;
+    if (s.length === 0)
+        return hash;
+    for (i = 0; i < s.length; i++) {
+        chr = s.charCodeAt(i);
+        hash = (hash << 5) - hash + chr;
+        hash |= 0; // Convert to 32bit integer
+    }
+    return hash;
+}
+export async function eval_like(text, context = {}, state, editor, controlComponents, worldStore, runnableComponents, noReturn) {
     const proxiedState = new Proxy(state, {
         set(target, key, value) {
             if (typeof key !== 'string') {
@@ -77,7 +98,8 @@ export async function eval_like(text, context = {}, noReturn, state, editor, con
             return true;
         }
     });
-    let evaluator = make_context_evaluator(text, context, noReturn);
+    let evaluator = make_context_evaluator(text, Object.keys(context ?? {}), noReturn);
+    // console.log(i, j)
     return await evaluator(context, proxiedState, async (x, newTab) => {
         if (newTab || editor) {
             if (!newTab) {

package/package/components/apps/components/inputs/AppCheckbox.svelte

@@ -18,6 +18,7 @@ export let render;
 export let extraKey = undefined;
 export let preclickAction = undefined;
 export let noInitialize = false;
+export let onToggle = undefined;
 export let controls = undefined;
 const { app, worldStore, componentControl, runnableComponents } = getContext('AppViewerContext');
 const iterContext = getContext('ListWrapperContext');
@@ -110,6 +111,9 @@ let css = initCss($app.css?.checkboxcomponent, customCss);
 			if (recomputeIds) {
 				recomputeIds.forEach((id) => $runnableComponents?.[id]?.cb?.forEach((cb) => cb()))
 			}
+			if (onToggle) {
+				onToggle.forEach((id) => $runnableComponents?.[id]?.cb?.forEach((cb) => cb()))
+			}
 		}}
 		disabled={resolvedConfig.disabled}
 	/>

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

@@ -12,6 +12,7 @@ declare const __propDef: {
         extraKey?: string | undefined;
         preclickAction?: (() => Promise<void>) | undefined;
         noInitialize?: boolean | undefined;
+        onToggle?: string[] | undefined;
         controls?: {
             left: () => boolean;
             right: () => boolean | string;

package/package/components/apps/components/inputs/AppDateInput.svelte

@@ -25,7 +25,7 @@ $componentControl[id] = {
 let outputs = initOutput($worldStore, id, {
     result: undefined
 });
-$: handleDefault(resolvedConfig.defaultValue);
+$: !value && handleDefault(resolvedConfig.defaultValue);
 function formatDate(dateString, formatString = 'dd.MM.yyyy') {
     if (formatString === '') {
         formatString = 'dd.MM.yyyy';
@@ -83,7 +83,7 @@ let css = initCss($app.css?.dateinputcomponent, customCss);
 			min={resolvedConfig.minDate}
 			max={resolvedConfig.maxDate}
 			placeholder="Type..."
-			class={twMerge(css?.input?.class, 'wm-date-input')}
+			class={twMerge('windmillapp w-full py-1.5 text-sm px-2', css?.input?.class, 'wm-date-input')}
 			style={css?.input?.style ?? ''}
 		/>
 	{/if}

package/package/components/apps/components/inputs/AppDateTimeInput.svelte

@@ -0,0 +1,121 @@
+<script>import { getContext } from 'svelte';
+import { initConfig, initOutput } from '../../editor/appUtils';
+import { initCss } from '../../utils';
+import AlignWrapper from '../helpers/AlignWrapper.svelte';
+import InitializeComponent from '../helpers/InitializeComponent.svelte';
+import { components } from '../../editor/component';
+import ResolveConfig from '../helpers/ResolveConfig.svelte';
+import ResolveStyle from '../helpers/ResolveStyle.svelte';
+import DateTimeInput from '../../../DateTimeInput.svelte';
+import { twMerge } from 'tailwind-merge';
+import { parseISO, format as formatDateFns } from 'date-fns';
+export let id;
+export let configuration;
+export let inputType;
+export let verticalAlignment = undefined;
+export let customCss = undefined;
+export let render;
+const { app, worldStore, componentControl, selectedComponent } = getContext('AppViewerContext');
+let resolvedConfig = initConfig(components['datetimeinputcomponent'].initialData.configuration, configuration);
+let value = undefined;
+$componentControl[id] = {
+    setValue(nvalue) {
+        value = nvalue;
+    }
+};
+let outputs = initOutput($worldStore, id, {
+    result: undefined,
+    validity: true
+});
+$: handleDefault(resolvedConfig.defaultValue);
+function formatDate(dateString, formatString = 'dd.MM.yyyy HH:mm') {
+    if (formatString === '') {
+        formatString = 'dd.MM.yyyy HH:mm';
+    }
+    try {
+        const isoDate = parseISO(dateString);
+        return formatDateFns(isoDate, formatString);
+    }
+    catch (error) {
+        return 'Error formatting date:' + error.message;
+    }
+}
+$: {
+    if (value) {
+        outputs?.result.set(formatDate(value, resolvedConfig.outputFormat));
+        const valueDate = new Date(value);
+        if (resolvedConfig.minDateTime) {
+            const minDate = new Date(resolvedConfig.minDateTime);
+            if (minDate.getDay() === valueDate.getDay() &&
+                minDate.getMonth() === valueDate.getMonth() &&
+                minDate.getFullYear() === valueDate.getFullYear()) {
+                outputs?.validity.set(minDate.getTime() < valueDate.getTime());
+            }
+            if (minDate.getTime() > valueDate.getTime()) {
+                outputs?.validity.set(false);
+            }
+        }
+        if (resolvedConfig.maxDateTime) {
+            const maxDate = new Date(resolvedConfig.maxDateTime);
+            if (maxDate.getDay() === valueDate.getDay() &&
+                maxDate.getMonth() === valueDate.getMonth() &&
+                maxDate.getFullYear() === valueDate.getFullYear()) {
+                outputs?.validity.set(maxDate.getTime() > valueDate.getTime());
+            }
+            if (maxDate.getTime() < valueDate.getTime()) {
+                outputs?.validity.set(false);
+            }
+        }
+    }
+    else {
+        outputs?.result.set(undefined);
+    }
+}
+function handleDefault(defaultValue) {
+    value = defaultValue;
+}
+let css = initCss($app.css?.datetimeinputcomponent, customCss);
+</script>
+
+{#each Object.keys(components['datetimeinputcomponent'].initialData.configuration) as key (key)}
+	<ResolveConfig
+		{id}
+		{key}
+		bind:resolvedConfig={resolvedConfig[key]}
+		configuration={configuration[key]}
+	/>
+{/each}
+
+{#each Object.keys(css ?? {}) as key (key)}
+	<ResolveStyle
+		{id}
+		{customCss}
+		{key}
+		bind:css={css[key]}
+		componentStyle={$app.css?.datetimeinputcomponent}
+	/>
+{/each}
+
+<InitializeComponent {id} />
+
+<AlignWrapper {render} {verticalAlignment}>
+	<div class={twMerge(css?.container?.class, 'w-full')} style={css?.container?.style}>
+		{#if inputType === 'date'}
+			<DateTimeInput
+				bind:value
+				useDropdown={resolvedConfig?.displayPresets}
+				on:pointerdown={(e) => {
+					e.stopPropagation()
+					$selectedComponent = [id]
+				}}
+				minDate={resolvedConfig.minDateTime
+					? formatDate(resolvedConfig.minDateTime, 'yyyy-MM-dd')
+					: undefined}
+				maxDate={resolvedConfig.maxDateTime
+					? formatDate(resolvedConfig.maxDateTime, 'yyyy-MM-dd')
+					: undefined}
+				on:focus={() => ($selectedComponent = [id])}
+			/>
+		{/if}
+	</div>
+</AlignWrapper>