{#if connecting}

connectOutput(connectingInput, component.type, component.id, detail)} componentId={component.id} />

{/if} {#if selected || hover} { dispatch('mouseover') }} on:mousedown|stopPropagation|capture draggable="false" title={`Id: ${component.id}`} class={twMerge( 'px-2 text-2xs font-semibold w-fit absolute shadow -top-[9px] -left-[8px] border rounded-sm z-50 cursor-move', selected ? 'bg-indigo-500/90 border-indigo-600 text-white' : $connectingInput.opened ? 'bg-red-500/90 border-red-600 text-white' : 'bg-blue-500/90 border-blue-600 text-white' )} > {component.id} {/if} {#if selected && !connecting}

{#if hasInlineEditor} {/if} {#if component.type === 'conditionalwrapper'} {:else if component.type === 'steppercomponent' || (component.type === 'tabscomponent' && component.configuration.tabsKind.type === 'static' && component.configuration.tabsKind.value === 'invisibleOnView')} {:else if component.type === 'decisiontreecomponent'} {/if}

{/if} {#if !errorHandledByComponent && $errorByComponent[component.id]} {@const error = $errorByComponent[component.id]?.error}

{error ?? ''}

{/if}