<script lang="ts">
    export let id: string;
    export let value: number;

    export let negative = false;

    function inputInteger(event: Event & {currentTarget: (EventTarget & HTMLInputElement)}) {
        let newValue = event.currentTarget.value;

        if (newValue.startsWith("0") && newValue.length > 1) {
            newValue = newValue.slice(1, newValue.length)
        }

        if (!isNaN(Number(newValue))) {
            value = Number(newValue);
        }
        else if (negative && newValue.startsWith("-")) {
            if (isNaN(Number(newValue.slice(1, newValue.length)))) {
                event.currentTarget.value = value.toString();
            }
        }
        else if (newValue === "") {
            event.currentTarget.value = "0";
            value = 0;
        }
        else {
            event.currentTarget.value = value.toString();
        }
    }
</script>

<input {id} type="text" class="digitInput" style="--valuelen: {value.toString().length + 3}ch" on:input|preventDefault={inputInteger} {value}>

<style>
    .digitInput {
        width: var(--valuelen);
        padding-left: 1ch;
    }
</style>