IGP-Fan-Reference/Components/Form/FormNumberComponent.razor

<div class="formNumberContainer">
    @if (FormLabelComponent != null)
    {
        <FormLabelComponent>@FormLabelComponent</FormLabelComponent>
    }
    <div>
        <input readonly="@ReadOnly"
               id="@Id"
               class="numberInput"
               type="number"
               min="@Min"
               max="@Max"
               value="@Value"
               @onchange="OnInputChanged"/>
    </div>
    @if (FormInfoComponent != null)
    {
        <FormInfoComponent>@FormInfoComponent</FormInfoComponent>
    }
</div>

<style>
    .formNumberContainer {
        display: flex;
        width: 100%;
        flex-direction: column;
        gap: 6px;
    }

    .numberInput {
        width: 100%;
        background-color: var(--primary);
        border: 4px solid var(--primary-border);
        border-radius: 1px;
        padding: 8px;
    }
</style>

@code {

    [Parameter] public RenderFragment? FormLabelComponent { get; set; }

    [Parameter] public string Id { get; set; } = default!;

    [Parameter] public RenderFragment? FormInfoComponent { get; set; }

    [Parameter] public EventCallback<ChangeEventArgs> OnChange { get; set; }

    void OnInputChanged(ChangeEventArgs changeEventArgs)
    {
        var valueWas = Value;
        var newValue = int.Parse(changeEventArgs.Value!.ToString()!);

        if (newValue > Max)
        {
            newValue = Max;
        }

        if (newValue < Min)
        {
            newValue = Min;
        }

        if (valueWas != newValue)
        {
            Value = newValue;
            changeEventArgs.Value = newValue;
            OnChange.InvokeAsync(changeEventArgs);
        }
    }

    [Parameter] public bool ReadOnly { get; set; }

    [Parameter] public int Value { get; set; }

    [Parameter] public int Min { get; set; }

    [Parameter] public int Max { get; set; } = 2048;

}