{#if !cssEditorOpen} {:else}

{/if}

{#if $enterpriseLicense !== undefined} {/if}

ID {component?.id} You can customise the CSS and the classes of this component instance. Theses customisations will only be applied to this component.

Global: {type ? ccomponents[type].name : ''} You can customise the CSS and the classes of all components of this type. Theses customisations will be applied to all components of this type.

{#if component && component.customCss !== undefined} {#each Object.keys(ccomponents[component.type].customCss ?? {}) as name}

app.set($app)} shouldDisplayRight={hasStyleValue(component.customCss[name])} on:right={() => { copyLocalToGlobal(name, component?.customCss?.[name]) tab = 'global' }} overridding={hasStyleValue($app.css?.[component.type]?.[name]) && hasStyleValue(component.customCss[name])} />

{/each} {/if} {#if type} {#each customCssByComponentType ?? [] as { id, forceStyle, forceClass }}

{#if $app.css && type && $app.css[type] && component?.customCss} { copyGlobalToLocal( id, component?.type ? $app?.css?.[component?.type]?.[id] : undefined ) tab = 'local' }} overriden={hasStyleValue(component.customCss[id])} wmClass={getSelector(id)} /> {/if}

{/each} {/if} { if (overrideGlobalCSS) { overrideGlobalCSS() overrideGlobalCSS = undefined } sendUserToast('Global CSS overridden') }} on:canceled={() => { overrideGlobalCSS = undefined }} >

The global CSS for this component already exists. Do you want to override it?

{ if (overrideLocalCSS) { overrideLocalCSS() overrideLocalCSS = undefined } sendUserToast('Local CSS overridden') }} on:canceled={() => { overrideLocalCSS = undefined }} >

The local CSS for this component already exists. Do you want to override it?

{/key} {:else} Select a component to style it in this panel {/if}