{#if component.componentInput} {`${component.id}`} {#if component.componentInput.fieldType !== 'any'} {component.componentInput.fieldType === 'array' && component.componentInput.subFieldType ? `${capitalize(fieldTypeToTsType(component.componentInput.subFieldType))}[]` : capitalize(fieldTypeToTsType(component.componentInput.fieldType))} {/if}

{#if component.componentInput.type === 'static'} {:else if component.componentInput.type === 'template' && component.componentInput !== undefined}

{:else if component.componentInput.type === 'connected' && component.componentInput !== undefined} {:else if component.componentInput?.type === 'runnable' && component.componentInput !== undefined} {/if}

{#key $stateId} {#if component.componentInput?.type === 'runnable'} {#if Object.keys(component.componentInput.fields ?? {}).length > 0}

The runnable inputs of a button component are not settable by the user. They must be defined statically or connected.

{/if} {/if} {/key} {/if} {#if Object.values(component.configuration).length > 0} {/if} {#if component.type === 'tabscomponent'} {:else if component.type === 'verticalsplitpanescomponent' || component.type === 'horizontalsplitpanescomponent'} {:else if component.type === 'tablecomponent' && Array.isArray(component.actionButtons)} {/if} {#if component.type === 'buttoncomponent' || component.type === 'formcomponent' || component.type === 'formbuttoncomponent'} {/if}

{#if Object.keys(component.customCss ?? {}).length > 0}

(viewCssOptions = !viewCssOptions)} > {viewCssOptions ? 'Hide' : 'Show'}

{#if viewCssOptions}

{#each Object.keys(component.customCss ?? {}) as name} {#if component?.customCss?.[name]}

{/if} {/each}

{/if} {/if} {#if duplicateMoveAllowed}

Delete   Del

Copy: {getModifierKey()}+C, {getModifierKey()}+V

Move: {getModifierKey()}+X, {getModifierKey()}+V

Navigate: ← ↑→ ESC

{/if}

{/if}