<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>