windmill-components 1.75.0 → 1.78.0

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

@@ -6,6 +6,7 @@ import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
 import { loadIcon } from '../icon';
 import { twMerge } from 'tailwind-merge';
 import { goto } from '$app/navigation';
+import { initOutput } from '../../editor/appUtils';
 export let id;
 export let componentInput;
 export let configuration;
@@ -17,8 +18,8 @@ export let noWFull = false;
 export let preclickAction = undefined;
 export let customCss = undefined;
 export let render;
-export const staticOutputs = ['loading', 'result'];
-const { runnableComponents, worldStore, app } = getContext('AppViewerContext');
+export let initializing = true;
+const { worldStore, app } = getContext('AppViewerContext');
 let labelValue;
 let color;
 let size;
@@ -46,12 +47,16 @@ async function handleAfterIcon() {
         afterIconComponent = await loadIcon(afterIcon);
     }
 }
-$: outputs = $worldStore?.outputsById[id];
+let outputs = initOutput($worldStore, id, {
+    result: undefined,
+    loading: false
+});
 $: triggerOnAppLoad && runnableComponent?.runComponent();
 $: if (outputs?.loading != undefined) {
     outputs.loading.set(false, true);
 }
 $: outputs?.loading.subscribe({
+    id: 'loading-' + id,
     next: (value) => {
         isLoading = value;
         if (ownClick && !value) {
@@ -84,13 +89,15 @@ async function handleClick(event) {
     else {
         await runnableComponent?.runComponent();
     }
-    if (recomputeIds) {
-        await Promise.all(recomputeIds.map((id) => $runnableComponents?.[id]?.()));
-    }
 }
 </script>
 
-<InputValue {id} input={configuration.label} bind:value={labelValue} />
+<InputValue
+	on:done={() => initializing && (initializing = false)}
+	{id}
+	input={configuration.label}
+	bind:value={labelValue}
+/>
 <InputValue {id} input={configuration.goto} bind:value={gotoUrl} />
 <InputValue {id} input={configuration.color} bind:value={color} />
 <InputValue {id} input={configuration.size} bind:value={size} />
@@ -101,6 +108,7 @@ async function handleClick(event) {
 <InputValue
 	{id}
 	input={configuration.disabled}
+	extraContext={extraQueryParams}
 	bind:value={disabled}
 	bind:error={errors.disabled}
 />
@@ -108,7 +116,7 @@ async function handleClick(event) {
 <InputValue {id} input={configuration.gotoNewTab} bind:value={gotoNewTab} />
 
 <RunnableWrapper
-	flexWrap
+	{recomputeIds}
 	bind:runnableComponent
 	{componentInput}
 	{id}

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

@@ -14,7 +14,7 @@ declare const __propDef: {
         preclickAction?: (() => Promise<void>) | undefined;
         customCss?: ComponentCustomCSS<'button'> | undefined;
         render: boolean;
-        staticOutputs?: string[] | undefined;
+        initializing?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -25,6 +25,5 @@ export type AppButtonProps = typeof __propDef.props;
 export type AppButtonEvents = typeof __propDef.events;
 export type AppButtonSlots = typeof __propDef.slots;
 export default class AppButton extends SvelteComponentTyped<AppButtonProps, AppButtonEvents, AppButtonSlots> {
-    get staticOutputs(): string[];
 }
 export {};

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

@@ -15,7 +15,7 @@ export let horizontalAlignment = undefined;
 export let customCss = undefined;
 export let render;
 export const staticOutputs = ['loading', 'result'];
-const { app, runnableComponents, worldStore, stateId } = getContext('AppViewerContext');
+const { app, worldStore, stateId } = getContext('AppViewerContext');
 let labelValue = 'Default label';
 let color;
 let size;
@@ -30,6 +30,7 @@ $: if (outputs?.loading != undefined) {
     outputs.loading.set(false, true);
 }
 $: outputs?.loading.subscribe({
+    id: 'loading-' + id,
     next: (value) => {
         isLoading = value;
     }
@@ -43,6 +44,7 @@ $: css = concatCustomCss($app.css?.formcomponent, customCss);
 <InputValue {id} input={configuration.size} bind:value={size} />
 
 <RunnableWrapper
+	{recomputeIds}
 	{render}
 	bind:runnableComponent
 	{componentInput}
@@ -84,12 +86,6 @@ $: css = concatCustomCss($app.css?.formcomponent, customCss);
 						}}
 						on:click={() => {
 							runnableComponent?.runComponent()
-
-							if (recomputeIds) {
-								recomputeIds.forEach((id) => {
-									$runnableComponents[id]?.()
-								})
-							}
 						}}
 						{size}
 						{color}

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

@@ -18,7 +18,7 @@ export let verticalAlignment = undefined;
 export let customCss = undefined;
 export let render;
 export const staticOutputs = ['loading', 'result'];
-const { app, runnableComponents, worldStore } = getContext('AppViewerContext');
+const { app, worldStore } = getContext('AppViewerContext');
 let labelValue = 'Default label';
 let color;
 let size;
@@ -38,6 +38,7 @@ $: if (outputs?.loading != undefined) {
     outputs.loading.set(false, true);
 }
 $: outputs?.loading.subscribe({
+    id: 'loading-' + id,
     next: (value) => {
         isLoading = value;
         if (ownClick && !value) {
@@ -73,6 +74,7 @@ $: css = concatCustomCss($app?.css?.formbuttoncomponent, customCss);
 		}}
 	>
 		<RunnableWrapper
+			{recomputeIds}
 			{render}
 			bind:runnableComponent
 			{componentInput}
@@ -107,12 +109,6 @@ $: css = concatCustomCss($app?.css?.formbuttoncomponent, customCss);
 						on:click={async () => {
 							await runnableComponent?.runComponent()
 
-							if (recomputeIds) {
-								recomputeIds.forEach((id) => {
-									$runnableComponents[id]?.()
-								})
-							}
-
 							open = false
 						}}
 						size="xs"

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

@@ -4,14 +4,18 @@ import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
 import InputValue from '../helpers/InputValue.svelte';
 import { concatCustomCss } from '../../utils';
 import { getContext } from 'svelte';
+import { initOutput } from '../../editor/appUtils';
 export let id;
 export let componentInput;
 export let configuration;
 export let initializing = undefined;
 export let customCss = undefined;
 export let render;
-export const staticOutputs = ['loading', 'result'];
-const { app } = getContext('AppViewerContext');
+const { app, worldStore } = getContext('AppViewerContext');
+initOutput($worldStore, id, {
+    result: undefined,
+    loading: false
+});
 ChartJS.register(Title, Tooltip, Legend, LineElement, LinearScale, PointElement, CategoryScale, BarElement);
 let result = undefined;
 let theme = 'theme1';
@@ -58,7 +62,7 @@ $: css = concatCustomCss($app.css?.barchartcomponent, customCss);
 <InputValue {id} input={configuration.theme} bind:value={theme} />
 <InputValue {id} input={configuration.line} bind:value={lineChart} />
 
-<RunnableWrapper {render} flexWrap autoRefresh {componentInput} {id} bind:initializing bind:result>
+<RunnableWrapper {render} autoRefresh {componentInput} {id} bind:initializing bind:result>
 	<div class="w-full h-full {css?.container?.class ?? ''}" style={css?.container?.style ?? ''}>
 		{#if result}
 			{#if lineChart}

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

@@ -9,7 +9,6 @@ declare const __propDef: {
         initializing?: boolean | undefined;
         customCss?: ComponentCustomCSS<'container'> | undefined;
         render: boolean;
-        staticOutputs?: string[] | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -20,6 +19,5 @@ 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> {
-    get staticOutputs(): string[];
 }
 export {};

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

@@ -1,6 +1,7 @@
 <script>import DisplayResult from '../../../DisplayResult.svelte';
 import { getContext } from 'svelte';
 import { twMerge } from 'tailwind-merge';
+import { initOutput } from '../../editor/appUtils';
 import { IS_APP_PUBLIC_CONTEXT_KEY } from '../../types';
 import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
 export let id;
@@ -9,12 +10,15 @@ export let initializing = undefined;
 export let customCss = undefined;
 export let render;
 const requireHtmlApproval = getContext(IS_APP_PUBLIC_CONTEXT_KEY);
-const { app } = getContext('AppViewerContext');
+const { app, worldStore } = getContext('AppViewerContext');
 let result = undefined;
-export const staticOutputs = ['result', 'loading'];
+initOutput($worldStore, id, {
+    result: undefined,
+    loading: false
+});
 </script>
 
-<RunnableWrapper {render} flexWrap {componentInput} {id} bind:initializing bind:result>
+<RunnableWrapper {render} {componentInput} {id} bind:initializing bind:result>
 	<div
 		class={twMerge(
 			'w-full border-b px-2 text-xs p-1 font-semibold bg-gray-500 text-white rounded-t-sm',

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

@@ -8,7 +8,6 @@ declare const __propDef: {
         initializing?: boolean | undefined;
         customCss?: ComponentCustomCSS<'header' | 'container'> | undefined;
         render: boolean;
-        staticOutputs?: string[] | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -19,6 +18,5 @@ 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

@@ -1,4 +1,5 @@
 <script>import { getContext } from 'svelte';
+import { initOutput } from '../../editor/appUtils';
 import { concatCustomCss } from '../../utils';
 import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
 export let id;
@@ -6,8 +7,11 @@ export let componentInput;
 export let initializing = undefined;
 export let customCss = undefined;
 export let render;
-export const staticOutputs = ['result', 'loading'];
-const { app } = getContext('AppViewerContext');
+const { app, worldStore } = getContext('AppViewerContext');
+initOutput($worldStore, id, {
+    result: undefined,
+    loading: false
+});
 let result = undefined;
 let h = undefined;
 let w = undefined;
@@ -22,15 +26,7 @@ $: css = concatCustomCss($app.css?.htmlcomponent, customCss);
 	bind:clientHeight={h}
 	bind:clientWidth={w}
 >
-	<RunnableWrapper
-		{render}
-		autoRefresh
-		flexWrap
-		{componentInput}
-		{id}
-		bind:initializing
-		bind:result
-	>
+	<RunnableWrapper {render} autoRefresh {componentInput} {id} bind:initializing bind:result>
 		{#key result}
 			<iframe
 				frameborder="0"

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

@@ -8,7 +8,6 @@ declare const __propDef: {
         initializing?: boolean | undefined;
         customCss?: ComponentCustomCSS<'container'> | undefined;
         render: boolean;
-        staticOutputs?: string[] | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -19,6 +18,5 @@ export type AppHtmlProps = typeof __propDef.props;
 export type AppHtmlEvents = typeof __propDef.events;
 export type AppHtmlSlots = typeof __propDef.slots;
 export default class AppHtml extends SvelteComponentTyped<AppHtmlProps, AppHtmlEvents, AppHtmlSlots> {
-    get staticOutputs(): string[];
 }
 export {};

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

@@ -6,7 +6,6 @@ export let id;
 export let horizontalAlignment = 'left';
 export let verticalAlignment = undefined;
 export let configuration;
-export const staticOutputs = [];
 export let customCss = undefined;
 export let render;
 const { app } = getContext('AppViewerContext');

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

@@ -7,7 +7,6 @@ declare const __propDef: {
         horizontalAlignment?: 'left' | 'center' | 'right' | undefined;
         verticalAlignment?: 'top' | 'center' | 'bottom' | undefined;
         configuration: Record<string, AppInput>;
-        staticOutputs?: string[] | undefined;
         customCss?: ComponentCustomCSS<'container' | 'icon'> | undefined;
         render: boolean;
     };
@@ -20,6 +19,5 @@ 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

@@ -4,7 +4,6 @@ import { concatCustomCss } from '../../utils';
 import InputValue from '../helpers/InputValue.svelte';
 export let id;
 export let configuration;
-export const staticOutputs = ['loading'];
 export let customCss = undefined;
 export let render;
 const { app } = getContext('AppViewerContext');

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

@@ -5,7 +5,6 @@ declare const __propDef: {
     props: {
         id: string;
         configuration: Record<string, AppInput>;
-        staticOutputs?: string[] | undefined;
         customCss?: ComponentCustomCSS<'image'> | undefined;
         render: boolean;
     };
@@ -20,6 +19,5 @@ 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/display/AppMap.svelte

@@ -8,17 +8,21 @@ import { OSM, Vector as VectorSource } from 'ol/source';
 import { Vector as VectorLayer, Tile as TileLayer } from 'ol/layer';
 import { Point } from 'ol/geom';
 import { defaults as defaultControls } from 'ol/control';
-import { findGridItem } from '../../editor/appUtils';
+import { findGridItem, initOutput } from '../../editor/appUtils';
 const LAYER_NAME = {
     MARKER: 'Marker'
 };
 export let id;
 export let configuration;
-export const staticOutputs = ['mapRegion'];
 export let customCss = undefined;
 export let render;
 const { app, worldStore, selectedComponent, connectingInput, focusedGrid, mode } = getContext('AppViewerContext');
-$: outputs = $worldStore?.outputsById[id];
+let outputs = initOutput($worldStore, id, {
+    mapRegion: {
+        topLeft: { lat: 0, lon: 0 },
+        bottomRight: { lat: 0, lon: 0 }
+    }
+});
 let map;
 let mapElement;
 let longitude = undefined;
@@ -134,6 +138,7 @@ function handleSyncRegion() {
     const z = map.getView().getZoom();
     updateRegionOutput();
     if (z) {
+        //@ts-ignore
         gridItem.data.configuration.zoom.value = z;
     }
     const center = map.getView().getCenter();
@@ -141,7 +146,9 @@ function handleSyncRegion() {
         return;
     }
     if (gridItem) {
+        //@ts-ignore
         gridItem.data.configuration.longitude.value = center[0];
+        //@ts-ignore
         gridItem.data.configuration.latitude.value = center[1];
     }
 }

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

@@ -5,7 +5,6 @@ declare const __propDef: {
     props: {
         id: string;
         configuration: Record<string, AppInput>;
-        staticOutputs?: string[] | undefined;
         customCss?: ComponentCustomCSS<'map'> | undefined;
         render: boolean;
     };
@@ -18,6 +17,5 @@ export type AppMapProps = typeof __propDef.props;
 export type AppMapEvents = typeof __propDef.events;
 export type AppMapSlots = typeof __propDef.slots;
 export default class AppMap extends SvelteComponentTyped<AppMapProps, AppMapEvents, AppMapSlots> {
-    get staticOutputs(): string[];
 }
 export {};

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

@@ -8,13 +8,16 @@ import { throttle } from '../../../../utils';
 import { Button } from '../../../common';
 import { Download, Loader2, MoveHorizontal, ZoomIn, ZoomOut } from 'lucide-svelte';
 import { fade } from 'svelte/transition';
-import { findGridItem } from '../../editor/appUtils';
+import { findGridItem, initOutput } from '../../editor/appUtils';
 export let id;
 export let configuration;
-export const staticOutputs = ['loading'];
 export let customCss = undefined;
 export let render;
-const { app, mode, selectedComponent } = getContext('AppViewerContext');
+const { app, mode, worldStore, selectedComponent } = getContext('AppViewerContext');
+initOutput($worldStore, id, {
+    result: undefined,
+    loading: false
+});
 let source = undefined;
 let wrapper = undefined;
 let error = undefined;
@@ -136,7 +139,9 @@ function onScroll() {
 }
 function syncZoomValue() {
     const gridItem = findGridItem($app, id);
+    //@ts-ignore
     if (gridItem && gridItem.data.configuration.zoom.value !== zoom) {
+        //@ts-ignore
         gridItem.data.configuration.zoom.value = zoom;
     }
     $app = $app;

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

@@ -6,7 +6,6 @@ declare const __propDef: {
     props: {
         id: string;
         configuration: Record<string, AppInput>;
-        staticOutputs?: string[] | undefined;
         customCss?: ComponentCustomCSS<'container'> | undefined;
         render: boolean;
     };
@@ -19,6 +18,5 @@ export type AppPdfProps = typeof __propDef.props;
 export type AppPdfEvents = typeof __propDef.events;
 export type AppPdfSlots = typeof __propDef.slots;
 export default class AppPdf extends SvelteComponentTyped<AppPdfProps, AppPdfEvents, AppPdfSlots> {
-    get staticOutputs(): string[];
 }
 export {};

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

@@ -4,14 +4,18 @@ import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
 import InputValue from '../helpers/InputValue.svelte';
 import { concatCustomCss } from '../../utils';
 import { getContext } from 'svelte';
+import { initOutput } from '../../editor/appUtils';
 export let id;
 export let componentInput;
 export let configuration;
 export let initializing = undefined;
 export let customCss = undefined;
 export let render;
-export const staticOutputs = ['loading', 'result'];
-const { app } = getContext('AppViewerContext');
+const { app, worldStore } = getContext('AppViewerContext');
+initOutput($worldStore, id, {
+    result: undefined,
+    loading: false
+});
 ChartJS.register(Title, Tooltip, Legend, LineElement, LinearScale, PointElement, CategoryScale, ArcElement);
 let result = undefined;
 let theme = 'theme1';
@@ -43,7 +47,7 @@ $: css = concatCustomCss($app.css?.piechartcomponent, customCss);
 <InputValue {id} input={configuration.theme} bind:value={theme} />
 <InputValue {id} input={configuration.doughnutStyle} bind:value={doughnut} />
 
-<RunnableWrapper {render} flexWrap autoRefresh {componentInput} {id} bind:initializing bind:result>
+<RunnableWrapper {render} autoRefresh {componentInput} {id} bind:initializing bind:result>
 	<div class="w-full h-full {css?.container?.class ?? ''}" style={css?.container?.style ?? ''}>
 		{#if result}
 			{#if doughnut}

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

@@ -9,7 +9,6 @@ declare const __propDef: {
         initializing?: boolean | undefined;
         customCss?: ComponentCustomCSS<'container'> | undefined;
         render: boolean;
-        staticOutputs?: string[] | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -20,6 +19,5 @@ export type AppPieChartProps = typeof __propDef.props;
 export type AppPieChartEvents = typeof __propDef.events;
 export type AppPieChartSlots = typeof __propDef.slots;
 export default class AppPieChart extends SvelteComponentTyped<AppPieChartProps, AppPieChartEvents, AppPieChartSlots> {
-    get staticOutputs(): string[];
 }
 export {};

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

@@ -5,6 +5,7 @@ import Scatter from 'svelte-chartjs/Scatter.svelte';
 import InputValue from '../helpers/InputValue.svelte';
 import { concatCustomCss } from '../../utils';
 import { getContext } from 'svelte';
+import { initOutput } from '../../editor/appUtils';
 export let id;
 export let componentInput;
 export let configuration;
@@ -13,8 +14,11 @@ export let customCss = undefined;
 export let render;
 let zoomable = false;
 let pannable = false;
-export const staticOutputs = ['loading', 'result'];
-const { app } = getContext('AppViewerContext');
+const { app, worldStore } = getContext('AppViewerContext');
+initOutput($worldStore, id, {
+    result: undefined,
+    loading: false
+});
 ChartJS.register(Title, Tooltip, Legend, LineElement, LinearScale, PointElement, CategoryScale, BarElement, zoomPlugin);
 let result = undefined;
 $: options = {
@@ -46,7 +50,7 @@ $: css = concatCustomCss($app.css?.scatterchartcomponent, customCss);
 <InputValue {id} input={configuration.zoomable} bind:value={zoomable} />
 <InputValue {id} input={configuration.pannable} bind:value={pannable} />
 
-<RunnableWrapper {render} flexWrap autoRefresh {componentInput} {id} bind:initializing bind:result>
+<RunnableWrapper {render} autoRefresh {componentInput} {id} bind:initializing bind:result>
 	<div class="w-full h-full {css?.container?.class ?? ''}" style={css?.container?.style ?? ''}>
 		{#if result}
 			<Scatter {data} {options} />

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

@@ -9,7 +9,6 @@ declare const __propDef: {
         initializing?: boolean | undefined;
         customCss?: ComponentCustomCSS<'container'> | undefined;
         render: boolean;
-        staticOutputs?: string[] | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -20,6 +19,5 @@ export type AppScatterChartProps = typeof __propDef.props;
 export type AppScatterChartEvents = typeof __propDef.events;
 export type AppScatterChartSlots = typeof __propDef.slots;
 export default class AppScatterChart extends SvelteComponentTyped<AppScatterChartProps, AppScatterChartEvents, AppScatterChartSlots> {
-    get staticOutputs(): string[];
 }
 export {};

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

@@ -7,7 +7,8 @@ import InputValue from '../helpers/InputValue.svelte';
 import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
 import { twMerge } from 'tailwind-merge';
 import { getContext } from 'svelte';
-import ResizeWrapper from '../helpers/ResizeWrapper.svelte';
+import { initOutput } from '../../editor/appUtils';
+import Tooltip from '../../../Tooltip.svelte';
 export let id;
 export let componentInput;
 export let horizontalAlignment = 'left';
@@ -16,12 +17,16 @@ export let configuration;
 export let initializing = undefined;
 export let customCss = undefined;
 export let render;
-export const staticOutputs = ['result', 'loading'];
-const { app } = getContext('AppViewerContext');
+const { app, worldStore, mode } = getContext('AppViewerContext');
+const { ontextfocus } = getContext('AppEditorContext');
+initOutput($worldStore, id, {
+    result: undefined,
+    loading: false
+});
 let result = undefined;
 let style = undefined;
 let copyButton;
-let fitContent = false;
+let tooltip = '';
 function getComponent() {
     switch (style) {
         case 'Title':
@@ -56,17 +61,27 @@ $: style && (classes = getClasses());
 
 <InputValue {id} input={configuration.style} bind:value={style} />
 <InputValue {id} input={configuration.copyButton} bind:value={copyButton} />
-<InputValue {id} input={configuration.fitContent} bind:value={fitContent} />
+<InputValue {id} input={configuration.tooltip} bind:value={tooltip} />
 
-<RunnableWrapper {render} flexWrap {componentInput} {id} bind:initializing bind:result>
-	<ResizeWrapper {id} shouldWrap={fitContent}>
+<RunnableWrapper {render} {componentInput} {id} bind:initializing bind:result>
+	<div class="h-full w-full overflow-hidden">
 		<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 pb-0.5 overflow-x-auto">
+				<!-- svelte-ignore a11y-click-events-have-key-events -->
+				<div
+					class="flex flex-wrap gap-2 pb-0.5  {$mode === 'dnd' && componentInput?.type == 'template'
+						? 'cursor-text'
+						: ''}"
+					on:click={() => {
+						if ($mode === 'dnd' && componentInput?.type == 'template') {
+							$ontextfocus?.()
+						}
+					}}
+				>
 					<svelte:element
 						this={component}
 						class={twMerge(
@@ -78,17 +93,26 @@ $: style && (classes = getClasses());
 						style={[$app.css?.['textcomponent']?.['text']?.style, customCss?.text?.style].join(';')}
 					>
 						{String(result)}
+						{#if tooltip != ''}
+							<Tooltip>{tooltip}</Tooltip>
+						{/if}
+						{#if copyButton && result}
+							<Popover notClickable>
+								<Button
+									variant="border"
+									size="xs"
+									color="dark"
+									btnClasses="!p-1"
+									on:click={() => copyToClipboard(result)}
+								>
+									<Clipboard size={14} strokeWidth={2} />
+								</Button>
+								<svelte:fragment slot="text">Copy to clipboard</svelte:fragment>
+							</Popover>
+						{/if}
 					</svelte:element>
-					{#if copyButton && result}
-						<Popover notClickable>
-							<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>
-						</Popover>
-					{/if}
 				</div>
 			{/if}
 		</AlignWrapper>
-	</ResizeWrapper>
+	</div>
 </RunnableWrapper>