<script lang="ts">
import { createEventDispatcher } from 'svelte';
const dispatch = createEventDispatcher();
export let id: number;
export let value: string;
let width: number;
$: width = Math.max(value.length + 3, 6);
const handleClick = () => {
dispatch('deleted', {
tagId: id,
});
}
</script>
<input id="tag-{id}" type="text" class="letterInput" style="--valuelen: {width}ch" bind:value={value} autofocus>
<button on:click|preventDefault={handleClick}>X</button>
<style>
.letterInput {
width: var(--valuelen);
padding-left: 1ch;
</style>
