onSelect?.($state.snapshot(asset)) }} onkeydown={(evt) => { if (evt.key === 'Enter') { callClickHandlers(); } if (evt.key === 'x') { onSelect?.(asset); } if (document.activeElement === element && evt.key === 'Escape') { moveFocus((element) => element.dataset.thumbnailFocusContainer === undefined, 'next'); } }} onclick={handleClick} bind:this={element} data-asset={asset.id} data-thumbnail-focus-container tabindex={0} role="link" >

{#if (!loaded || thumbError) && asset.thumbhash}

{/if}

{#if !usingMobileDevice && !disabled}

{/if} {#if dimmed && !mouseOver}

{/if} {#if !authManager.key && asset.isFavorite}

{/if} {#if !authManager.key && showArchiveIcon && asset.visibility === AssetVisibility.Archive}

{/if} {#if asset.isImage && asset.projectionType === ProjectionType.EQUIRECTANGULAR}

{/if} {#if asset.stack && showStackedIcon}

{asset.stack.assetCount.toLocaleString($locale)}

{/if}

{#if !usingMobileDevice && mouseOver && !disableLinkMouseOver} evt.preventDefault()} tabindex={-1} aria-label="Thumbnail URL" > {/if} ((loaded = true), (thumbError = errored))} /> {#if asset.isVideo}

{:else if asset.isImage && asset.livePhotoVideoId}

{/if}

{#if selectionCandidate}

{/if} {#if !readonly && (mouseOver || selected || selectionCandidate)} {/if}