windmill-components 1.60.3 → 1.83.1

package/components/apps/editor/settingsPanel/InputsSpecEditor.svelte

@@ -1,20 +1,140 @@
-<script>import ConnectedInputEditor from './inputEditor/ConnectedInputEditor.svelte';
+<script>import { Badge, ToggleButton, ToggleButtonGroup } from '../../../common';
+import { addWhitespaceBeforeCapitals, capitalize } from '../../../../utils';
+import { faArrowRight, faPen, faUpload, faUser } from '@fortawesome/free-solid-svg-icons';
+import { fieldTypeToTsType } from '../../utils';
+import Tooltip from '../../../Tooltip.svelte';
+import Popover from '../../../Popover.svelte';
+import ConnectedInputEditor from './inputEditor/ConnectedInputEditor.svelte';
 import EvalInputEditor from './inputEditor/EvalInputEditor.svelte';
 import RowInputEditor from './inputEditor/RowInputEditor.svelte';
 import StaticInputEditor from './inputEditor/StaticInputEditor.svelte';
+import UploadInputEditor from './inputEditor/UploadInputEditor.svelte';
+import { getContext } from 'svelte';
 export let id;
 export let componentInput;
+export let key;
 export let hasRows = false;
+export let userInputEnabled = false;
+export let shouldCapitalize = true;
+export let resourceOnly = false;
+export let tooltip = undefined;
+export let onlyStatic = false;
+export let fieldType;
+export let subFieldType;
+export let format;
+export let selectOptions;
+export let fileUpload = undefined;
+export let placeholder;
+const { connectingInput } = getContext('AppViewerContext');
+$: if (componentInput == undefined) {
+    //@ts-ignore
+    componentInput = {
+        type: 'static',
+        value: undefined
+    };
+}
 </script>
 
-{#if componentInput.type === 'connected'}
-	<ConnectedInputEditor bind:componentInput />
-{:else if componentInput.type === 'row'}
-	<RowInputEditor bind:componentInput />
-{:else if componentInput.type === 'static'}
-	<StaticInputEditor bind:componentInput />
-{:else if componentInput.type === 'eval'}
-	<EvalInputEditor {hasRows} {id} bind:componentInput />
-{:else if componentInput.type === 'user'}
-	<span class="text-2xs italic text-gray-6f00">Field's value is set by the user</span>
+{#if !(resourceOnly && (fieldType !== 'object' || !format?.startsWith('resource-')))}
+	<div class="flex flex-col gap-1">
+		<div class="flex justify-between items-end gap-1">
+			<span class="text-sm font-semibold truncate">
+				{shouldCapitalize ? capitalize(addWhitespaceBeforeCapitals(key)) : key}
+				{#if tooltip}
+					<Tooltip>
+						{tooltip}
+					</Tooltip>
+				{/if}
+			</span>
+
+			<div class="flex gap-x-2 gap-y-1 flex-wrap justify-end items-center">
+				<Badge color="blue">
+					{fieldType === 'array' && subFieldType
+						? `${capitalize(fieldTypeToTsType(subFieldType))}[]`
+						: capitalize(fieldTypeToTsType(fieldType))}
+				</Badge>
+
+				{#if !onlyStatic && componentInput?.type && componentInput.type != 'eval'}
+					<ToggleButtonGroup
+						bind:selected={componentInput.type}
+						on:selected={(e) => {
+							if (e.detail == 'connected' && !componentInput['connection']) {
+								$connectingInput = {
+									opened: true,
+									input: undefined,
+									hoveredComponent: undefined
+								}
+							}
+						}}
+					>
+						<Popover placement="bottom" notClickable disapperTimoout={0}>
+							<ToggleButton
+								position="left"
+								value="static"
+								startIcon={{ icon: faPen }}
+								size="xs"
+								iconOnly
+							/>
+							<svelte:fragment slot="text">Static</svelte:fragment>
+						</Popover>
+						{#if userInputEnabled && !format?.startsWith('resource-')}
+							<Popover placement="bottom" notClickable disapperTimoout={0}>
+								<ToggleButton
+									position="center"
+									value="user"
+									startIcon={{ icon: faUser }}
+									size="xs"
+									iconOnly
+								/>
+								<svelte:fragment slot="text">User Input</svelte:fragment>
+							</Popover>
+						{/if}
+						{#if fileUpload}
+							<Popover placement="bottom" notClickable disapperTimoout={0}>
+								<ToggleButton
+									position="center"
+									value="upload"
+									startIcon={{ icon: faUpload }}
+									size="xs"
+									iconOnly
+								/>
+								<svelte:fragment slot="text">Upload</svelte:fragment>
+							</Popover>
+						{/if}
+						<Popover placement="bottom" notClickable disapperTimoout={0}>
+							<ToggleButton
+								position="right"
+								value="connected"
+								startIcon={{ icon: faArrowRight }}
+								size="xs"
+								iconOnly
+							/>
+							<svelte:fragment slot="text">Connect</svelte:fragment>
+						</Popover>
+					</ToggleButtonGroup>
+				{/if}
+			</div>
+		</div>
+
+		{#if componentInput?.type === 'connected'}
+			<ConnectedInputEditor bind:componentInput />
+		{:else if componentInput?.type === 'row'}
+			<RowInputEditor bind:componentInput />
+		{:else if componentInput?.type === 'static'}
+			<StaticInputEditor
+				{fieldType}
+				{subFieldType}
+				{selectOptions}
+				{format}
+				{placeholder}
+				bind:componentInput
+			/>
+		{:else if componentInput?.type === 'eval'}
+			<EvalInputEditor {hasRows} {id} bind:componentInput />
+		{:else if componentInput?.type === 'upload'}
+			<UploadInputEditor bind:componentInput />
+		{:else if componentInput?.type === 'user'}
+			<span class="text-2xs italic text-gray-600">Field's value is set by the user</span>
+		{/if}
+	</div>
 {/if}

package/components/apps/editor/settingsPanel/InputsSpecEditor.svelte.d.ts

@@ -1,10 +1,26 @@
 import { SvelteComponentTyped } from "svelte";
-import type { ConnectedAppInput, EvalAppInput, RowAppInput, StaticAppInput, UserAppInput } from '../../inputType';
+import type { RichConfiguration } from '../../types';
+import type { InputType } from '../../inputType';
 declare const __propDef: {
     props: {
         id: string;
-        componentInput: StaticAppInput | ConnectedAppInput | UserAppInput | RowAppInput | EvalAppInput;
+        componentInput: RichConfiguration;
+        key: string;
         hasRows?: boolean | undefined;
+        userInputEnabled?: boolean | undefined;
+        shouldCapitalize?: boolean | undefined;
+        resourceOnly?: boolean | undefined;
+        tooltip?: string | undefined;
+        onlyStatic?: boolean | undefined;
+        fieldType: InputType;
+        subFieldType: InputType | undefined;
+        format: string | undefined;
+        selectOptions: string[] | undefined;
+        fileUpload?: {
+            accept: string;
+            convertTo: string;
+        } | undefined;
+        placeholder: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/apps/editor/settingsPanel/InputsSpecsEditor.svelte

@@ -1,114 +1,50 @@
-<script>import { Badge, ToggleButton, ToggleButtonGroup } from '../../../common';
-import { addWhitespaceBeforeCapitals, capitalize } from '../../../../utils';
-import { faArrowRight, faPen, faTableCells, faUser } from '@fortawesome/free-solid-svg-icons';
-import { fieldTypeToTsType } from '../../utils';
-import InputsSpecEditor from './InputsSpecEditor.svelte';
-import { getContext } from 'svelte';
-import Tooltip from '../../../Tooltip.svelte';
-import Popover from '../../../Popover.svelte';
+<script>import InputsSpecEditor from './InputsSpecEditor.svelte';
+import OneOfInputSpecsEditor from './OneOfInputSpecsEditor.svelte';
 export let id;
 export let inputSpecs;
-export let userInputEnabled = true;
+export let inputSpecsConfiguration = inputSpecs;
+export let userInputEnabled = false;
 export let shouldCapitalize = true;
 export let rowColumns = false;
-const { connectingInput } = getContext('AppEditorContext');
+export let resourceOnly = false;
 </script>
 
 {#if inputSpecs}
 	<div class="w-full flex flex-col gap-4">
-		{#each Object.keys(inputSpecs) as inputSpecKey (inputSpecKey)}
-			{@const input = inputSpecs[inputSpecKey]}
-			<div class="flex flex-col gap-1">
-				<div class="flex justify-between items-end gap-1">
-					<span class="text-sm font-semibold truncate">
-						{shouldCapitalize
-							? capitalize(addWhitespaceBeforeCapitals(inputSpecKey))
-							: inputSpecKey}
-						{#if input.tooltip}
-							<Tooltip>
-								{input.tooltip}
-							</Tooltip>
-						{/if}
-					</span>
-
-					<div class="flex gap-x-2 gap-y-1 flex-wrap justify-end items-center">
-						<Badge color="blue">
-							{input.fieldType === 'array' && input.subFieldType
-								? `${capitalize(fieldTypeToTsType(input.subFieldType))}[]`
-								: capitalize(fieldTypeToTsType(input.fieldType))}
-						</Badge>
-
-						{#if !inputSpecs[inputSpecKey].onlyStatic && inputSpecs[inputSpecKey].type != 'eval'}
-							<ToggleButtonGroup
-								bind:selected={inputSpecs[inputSpecKey].type}
-								on:selected={(e) => {
-									if (e.detail == 'connected' && !inputSpecs[inputSpecKey]['connection']) {
-										$connectingInput = {
-											opened: true,
-											input: undefined,
-											hoveredComponent: undefined
-										}
-									}
-								}}
-							>
-								<Popover placement="bottom" notClickable disapperTimoout={0}>
-									<ToggleButton
-										position="left"
-										value="static"
-										startIcon={{ icon: faPen }}
-										size="xs"
-										iconOnly
-									/>
-									<svelte:fragment slot="text">Static</svelte:fragment>
-								</Popover>
-								{#if rowColumns}
-									<Popover placement="bottom" notClickable disapperTimoout={0}>
-										<ToggleButton
-											position="center"
-											value="row"
-											startIcon={{ icon: faTableCells }}
-											size="xs"
-										>
-											<Tooltip scale={0.6} placement="top-end" wrapperClass="center-center">
-												Use the column name to have the value of the cell be passed to the action
-											</Tooltip>
-										</ToggleButton>
-										<svelte:fragment slot="text">Column</svelte:fragment>
-									</Popover>
-								{/if}
-								{#if userInputEnabled && !input.format?.startsWith('resource-')}
-									<Popover placement="bottom" notClickable disapperTimoout={0}>
-										<ToggleButton
-											position="center"
-											value="user"
-											startIcon={{ icon: faUser }}
-											size="xs"
-											iconOnly
-										/>
-										<svelte:fragment slot="text">User Input</svelte:fragment>
-									</Popover>
-								{/if}
-								<Popover placement="bottom" notClickable disapperTimoout={0}>
-									<ToggleButton
-										position="right"
-										value="connected"
-										startIcon={{ icon: faArrowRight }}
-										size="xs"
-										iconOnly
-									/>
-									<svelte:fragment slot="text">Connect</svelte:fragment>
-								</Popover>
-							</ToggleButtonGroup>
-						{/if}
-					</div>
-				</div>
-
+		{#each Object.keys(inputSpecsConfiguration) as k}
+			{#if inputSpecs[k] && inputSpecs[k]?.type == 'oneOf'}
+				<OneOfInputSpecsEditor
+					key={k}
+					bind:oneOf={inputSpecs[k]}
+					{id}
+					{shouldCapitalize}
+					{resourceOnly}
+					{rowColumns}
+					inputSpecsConfiguration={inputSpecsConfiguration?.[k]?.['configuration']}
+					labels={inputSpecsConfiguration?.[k]?.['labels']}
+					tooltip={inputSpecsConfiguration?.[k]?.['tooltip']}
+				/>
+			{:else}
+				{@const meta = inputSpecsConfiguration?.[k]}
+				<!-- {JSON.stringify(meta)} -->
 				<InputsSpecEditor
-					hasRows={rowColumns}
+					key={k}
+					bind:componentInput={inputSpecs[k]}
 					{id}
-					bind:componentInput={inputSpecs[inputSpecKey]}
+					{userInputEnabled}
+					{shouldCapitalize}
+					{resourceOnly}
+					hasRows={rowColumns}
+					fieldType={meta?.['fieldType']}
+					subFieldType={meta?.['subFieldType']}
+					format={meta?.['format']}
+					selectOptions={meta?.['selectOptions']}
+					tooltip={meta?.['tooltip']}
+					onlyStatic={meta?.['onlyStatic']}
+					fileUpload={meta?.['fileUpload']}
+					placeholder={meta?.['placeholder']}
 				/>
-			</div>
+			{/if}
 		{/each}
 	</div>
 {:else}

package/components/apps/editor/settingsPanel/InputsSpecsEditor.svelte.d.ts

@@ -1,12 +1,14 @@
 import { SvelteComponentTyped } from "svelte";
-import type { BaseAppComponent } from '../../types';
+import type { RichConfigurations } from '../../types';
 declare const __propDef: {
     props: {
         id: string;
-        inputSpecs: BaseAppComponent['configuration'];
+        inputSpecs: RichConfigurations;
+        inputSpecsConfiguration?: RichConfigurations | undefined;
         userInputEnabled?: boolean | undefined;
         shouldCapitalize?: boolean | undefined;
         rowColumns?: boolean | undefined;
+        resourceOnly?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/apps/editor/settingsPanel/OneOfInputSpecsEditor.svelte

@@ -0,0 +1,52 @@
+<script>import Tooltip from '../../../Tooltip.svelte';
+import InputsSpecEditor from './InputsSpecEditor.svelte';
+export let key;
+export let oneOf;
+export let inputSpecsConfiguration;
+export let labels;
+export let shouldCapitalize;
+export let id;
+export let resourceOnly;
+export let rowColumns;
+export let tooltip;
+$: if (oneOf.configuration[oneOf.selected] == undefined) {
+    oneOf.configuration[oneOf.selected] = {};
+}
+</script>
+
+<div class="p-2 border">
+	<h4 class="mb-2">{key}&nbsp;<Tooltip>{tooltip}</Tooltip></h4>
+	<select
+		class="w-full border border-gray-300 rounded-md p-2"
+		value={oneOf.selected}
+		on:change={(e) => {
+			oneOf = { ...oneOf, selected: e?.target?.['value'] }
+		}}
+	>
+		{#each Object.keys(inputSpecsConfiguration ?? {}) as choice}
+			<option value={choice}>{labels?.[choice] ?? choice}</option>
+		{/each}
+	</select>
+	<div class="mb-4" />
+	<div class="flex flex-col gap-4">
+		{#each Object.keys(inputSpecsConfiguration?.[oneOf.selected] ?? {}) as nestedKey}
+			{@const config = inputSpecsConfiguration?.[oneOf.selected]?.[nestedKey]}
+			{#if config && oneOf.configuration[oneOf.selected]}
+				<InputsSpecEditor
+					key={nestedKey}
+					bind:componentInput={oneOf.configuration[oneOf.selected][nestedKey]}
+					{id}
+					userInputEnabled={false}
+					{shouldCapitalize}
+					{resourceOnly}
+					hasRows={rowColumns}
+					fieldType={config?.['fieldType']}
+					subFieldType={config?.['subFieldType']}
+					format={config?.['format']}
+					selectOptions={config?.['selectOptions']}
+					placeholder={config?.['placeholder']}
+				/>
+			{/if}
+		{/each}
+	</div>
+</div>

package/components/apps/editor/settingsPanel/OneOfInputSpecsEditor.svelte.d.ts

@@ -0,0 +1,28 @@
+import { SvelteComponentTyped } from "svelte";
+import type { RichConfiguration } from '../../types';
+declare const __propDef: {
+    props: {
+        key: string;
+        oneOf: {
+            selected: string;
+            configuration: RichConfiguration;
+        } | any;
+        inputSpecsConfiguration: RichConfiguration | any;
+        labels: Record<string, string> | undefined;
+        shouldCapitalize: boolean;
+        id: string;
+        resourceOnly: boolean;
+        rowColumns: boolean;
+        tooltip: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type OneOfInputSpecsEditorProps = typeof __propDef.props;
+export type OneOfInputSpecsEditorEvents = typeof __propDef.events;
+export type OneOfInputSpecsEditorSlots = typeof __propDef.slots;
+export default class OneOfInputSpecsEditor extends SvelteComponentTyped<OneOfInputSpecsEditorProps, OneOfInputSpecsEditorEvents, OneOfInputSpecsEditorSlots> {
+}
+export {};

package/components/apps/editor/settingsPanel/Recompute.svelte

@@ -3,7 +3,7 @@ import { getContext } from 'svelte';
 import PanelSection from './common/PanelSection.svelte';
 export let recomputeIds = undefined;
 export let ownId;
-const { runnableComponents } = getContext('AppEditorContext');
+const { runnableComponents } = getContext('AppViewerContext');
 function onChange(event, id) {
     if (event.currentTarget.checked) {
         recomputeIds = [...(recomputeIds ?? []), id];
@@ -14,7 +14,10 @@ function onChange(event, id) {
 }
 </script>
 
-<PanelSection title="Recompute others" tooltip="Select components to recompute after running this script">
+<PanelSection
+	title="Recompute others"
+	tooltip="Select components to recompute after running this script"
+>
 	{#if Object.keys($runnableComponents ?? {}).filter((id) => id !== ownId).length > 0}
 		<table class="divide-y divide-gray-300 border w-full">
 			<thead class="bg-gray-50">
@@ -35,6 +38,7 @@ function onChange(event, id) {
 						</td>
 						<td class="relative whitespace-nowrap px-4 py-2 ">
 							<input
+								class="windmillapp"
 								type="checkbox"
 								on:change={(event) => onChange(event, id)}
 								checked={recomputeIds?.includes(id)}

package/components/apps/editor/settingsPanel/SelectedRunnable.svelte

@@ -1,17 +1,14 @@
 <script>import Button from '../../../common/button/Button.svelte';
+import Toggle from '../../../Toggle.svelte';
 import Tooltip from '../../../Tooltip.svelte';
-import { faClose, faEdit } from '@fortawesome/free-solid-svg-icons';
+import { faClose } from '@fortawesome/free-solid-svg-icons';
 import { getContext } from 'svelte';
 import { clearResultAppInput } from '../../utils';
-import InlineScriptEditorDrawer from '../inlineScriptsPanel/InlineScriptEditorDrawer.svelte';
-const { app } = getContext('AppEditorContext');
+import ComponentTriggerList from './triggerLists/ComponentTriggerList.svelte';
+const { app } = getContext('AppViewerContext');
+const { selectedComponentInEditor } = getContext('AppEditorContext');
 export let appInput;
-let inlineScriptEditorDrawer;
-function edit() {
-    if (appInput.runnable?.type === 'runnableByName') {
-        inlineScriptEditorDrawer?.openDrawer();
-    }
-}
+export let appComponent;
 function detach() {
     if (appInput.runnable?.type === 'runnableByName' && appInput.runnable.inlineScript) {
         $app.unusedInlineScripts.push({
@@ -27,13 +24,7 @@ function clear() {
 }
 </script>
 
-{#if appInput.runnable && appInput.runnable.type === 'runnableByName' && appInput.runnable.inlineScript}
-	<InlineScriptEditorDrawer
-		bind:this={inlineScriptEditorDrawer}
-		bind:inlineScript={appInput.runnable.inlineScript}
-	/>
-{/if}
-<div class="flex flex-col xl:flex-row justify-between w-full flex-wrap items-center gap-1">
+<div class="flex justify-between w-full items-center gap-1">
 	<span class="text-xs font-semibold truncate">
 		{#if appInput.runnable?.type === 'runnableByName'}
 			{appInput.runnable.name}
@@ -41,13 +32,10 @@ function clear() {
 			{appInput.runnable.path}
 		{/if}
 	</span>
-	<div class="flex gap-1 flex-wrap justify-center">
+	<div class="flex gap-1  justify-center">
 		{#if appInput.runnable?.type === 'runnableByName' && appInput.runnable.inlineScript}
-			<Button size="xs" color="light" variant="border" startIcon={{ icon: faEdit }} on:click={edit}>
-				Edit
-			</Button>
 			<Button size="xs" color="light" variant="border" on:click={detach}>
-				Detach
+				Detach&nbsp;
 				<Tooltip>
 					Detaching an inline script keep it for later to be reused by another component
 				</Tooltip>
@@ -58,6 +46,71 @@ function clear() {
 		</Button>
 	</div>
 </div>
+<div>
+	<div class="w-full"><div class="mx-auto w-0">&downarrow;</div></div>
+	<div class="flex gap-1 justify-between items-center">
+		<span class="text-xs font-semibold truncate">
+			Transformer &nbsp;<Tooltip
+				>A transformer is an optional frontend script that is executed right after the component's
+				script whose purpose is to do lightweight transformation in the browser. It takes the
+				previous computation's result as `result`</Tooltip
+			></span
+		>
+		<div class="flex gap-1">
+			{#if !appInput.transformer}
+				<div>
+					<Button
+						variant="border"
+						color="light"
+						size="xs"
+						on:click={() => {
+							appInput.transformer = {
+								language: 'frontend',
+								content: 'return result'
+							}
+							$selectedComponentInEditor = appComponent.id + '_transformer'
+						}}>Add Transformer</Button
+					>
+				</div>
+			{:else}
+				<Button
+					size="xs"
+					color="red"
+					variant="border"
+					startIcon={{ icon: faClose }}
+					on:click={() => {
+						appInput.transformer = undefined
+					}}
+				>
+					Clear
+				</Button>
+			{/if}
+		</div></div
+	>
+</div>
+
+{#if appInput.runnable?.type === 'runnableByName' && appInput.runnable.inlineScript}
+	{#if !['buttoncomponent', 'formbuttoncomponent', 'formcomponent'].includes(appComponent.type)}
+		<div class="flex items-center">
+			<Toggle
+				size="xs"
+				color="red"
+				bind:checked={appInput.doNotRecomputeOnInputChanged}
+				options={{ right: 'do NOT recompute on input changes' }}
+			/>
+			<Tooltip>If not toggled, whenever an input is changed, the script will be re-run.</Tooltip>
+		</div>
+	{/if}
+
+	<div>
+		<ComponentTriggerList
+			bind:runnable={appInput.runnable}
+			{appComponent}
+			fields={appInput.fields}
+			doNotRecomputeOnInputChanged={appInput.doNotRecomputeOnInputChanged}
+		/>
+	</div>
+{/if}
 {#if appInput.runnable?.type === 'runnableByName' && !appInput.runnable.inlineScript}
 	<span class="text-xs text-gray-500">
 		Please configure the language in the inline script panel

package/components/apps/editor/settingsPanel/SelectedRunnable.svelte.d.ts

@@ -1,8 +1,10 @@
 import { SvelteComponentTyped } from "svelte";
 import type { ResultAppInput } from '../../inputType';
+import type { AppComponent } from '../component';
 declare const __propDef: {
     props: {
         appInput: ResultAppInput;
+        appComponent: AppComponent;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/apps/editor/settingsPanel/StylePanel.svelte

@@ -0,0 +1,61 @@
+<script>import { Button } from '../../../common';
+import { sendUserToast } from '../../../../utils';
+import { Copy } from 'lucide-svelte';
+import { getContext } from 'svelte';
+import { ccomponents } from '../component';
+import CssProperty from '../componentsPanel/CssProperty.svelte';
+import { quickStyleProperties } from '../componentsPanel/quickStyleProperties';
+export let component;
+const { app } = getContext('AppViewerContext');
+function applyToAllInstances() {
+    if (component) {
+        if (!$app.css) {
+            $app.css = {};
+        }
+        let componentType = component?.type;
+        if (!$app.css[componentType]) {
+            $app.css[componentType] = {};
+        }
+        Object.keys(ccomponents[component.type].customCss ?? {}).forEach((name) => {
+            if (!$app.css[componentType][name]) {
+                $app.css[componentType][name] = {};
+            }
+            if (component) {
+                let nstyle = component.customCss[name];
+                if (nstyle.style) {
+                    $app.css[componentType][name].style = nstyle.style;
+                }
+                if (nstyle.class) {
+                    $app.css[componentType][name].class = nstyle.class;
+                }
+            }
+        });
+        sendUserToast(`Applied style to all instances of the ${componentType.replace('component', '')} component`);
+    }
+}
+</script>
+
+<Button
+	variant="border"
+	color="light"
+	size="xs"
+	aria-label="Apply to all instances of this component"
+	on:click={applyToAllInstances}
+>
+	Copy style to global CSS &nbsp;<Copy size={18} />
+</Button>
+
+{#if component && component.customCss !== undefined}
+	{#each Object.keys(ccomponents[component.type].customCss ?? {}) as name}
+		<div class="w-full">
+			<CssProperty
+				quickStyleProperties={quickStyleProperties?.[component.type]?.[name]}
+				forceStyle={ccomponents[component.type].customCss[name].style !== undefined}
+				forceClass={ccomponents[component.type].customCss[name].class !== undefined}
+				{name}
+				bind:value={component.customCss[name]}
+				on:change={() => app.set($app)}
+			/>
+		</div>
+	{/each}
+{/if}