setHoverRating(0)} use:focusOutside={{ onFocusOut: reset }} use:shortcuts={[ { shortcut: { key: 'ArrowLeft' }, preventDefault: false, onShortcut: (event) => event.stopPropagation() }, { shortcut: { key: 'ArrowRight' }, preventDefault: false, onShortcut: (event) => event.stopPropagation() }, ]} >
{$t('rating')}
{#each { length: count } as _, index} {@const value = index + 1} {@const filled = hoverRating >= value || (hoverRating === 0 && ratingSelection >= value)} {@const starId = `${id}-${value}`}
setHoverRating(value)} tabindex={-1} data-testid="star" >
{$t('rating_count', { values: { count: value } })}
{ focusRating = value; }} on:change={() => handleSelectDebounced(value)} class="sr-only" /> {/each}
{#if ratingSelection > 0 && !readOnly}
{ ratingSelection = 0; handleSelect(ratingSelection); }} class="cursor-pointer text-xs text-immich-primary dark:text-immich-dark-primary" > {$t('rating_clear')}
{/if}