{
console.log('CardSquare: Logo clicked, calling openPreview');
openPreview(logo);
}}
on:keydown={(e) => (e.key === 'Enter' || e.key === ' ') && openPreview(logo)}
style="cursor:pointer;"
>
{#if isSvgLogo(logo)}
{#key theme + (logo._activeColor || '')}
{/if}
{logo.name}
{#if logo.brand} {/if}
Format: {logo.format}
{#if logo.colors}
(logo._activeColor = undefined)}
on:keydown|stopPropagation={(e) => (e.key === 'Enter' || e.key === ' ') && (logo._activeColor = undefined)}
>
{#if logo.sets}
{#each Object.entries(logo.sets) as [setName, setConfig], i}
{
logo._activeColor = Object.values(logo.colors)[i % Object.keys(logo.colors).length];
logo._activeSet = setName;
}}
on:keydown|stopPropagation={(e) => {
if (e.key === 'Enter' || e.key === ' ') {
logo._activeColor = Object.values(logo.colors)[i % Object.keys(logo.colors).length];
logo._activeSet = setName;
}
}}
style="padding: 0; overflow: hidden;"
>
{@html generateColorSetCircle(logo.colors, setConfig)}
{/each}
{:else}
{#each Object.entries(logo.colors) as [colorName, colorValue], i}
(logo._activeColor = colorValue)}
on:keydown|stopPropagation={(e) =>
(e.key === 'Enter' || e.key === ' ') && (logo._activeColor = colorValue)}
>
{/each}
{/if}
{/if}