@using Connected.Models;

@inherits InputBase

@typeparam NumberType

<div class="@InputFieldClassList">
    <input type="text"
           placeholder="@Placeholder"
           step="@Step"
           disabled="@Disabled"
           readonly="@Readonly"
           required="@Required"
           value="@_value"
           @onkeydown=@(args => ChangeValue(args))
           @onkeydown:preventDefault="@_preventDefaultAction"
           @oninput=@SetValueAsync
           @onmousewheel=@OnMouseWheel
           @onchange="@Change"
           @onwheel="OnMouseWheel"
           @attributes="@InputAttributes" />
    
    <span class="highlight"></span>
    <span class="bar"></span>
    @if (IsLabel)
    {
        <label class="label-animated">@Label</label>
    }
    @if (IsHelperText && !IsError)
    {
        <div class="input-helper-text">@HelperText</div>
    }
    @if (IsError)
    {
        <div class="input-error-text">@ErrorText</div>
    }
    <span class="input-glyph-wraper">
        <span class="input-glyph">
            <span style="display:inline-block">
                <Glyph Width=16 Height=16 SVG="@Icons.Material.Outlined.KeyboardArrowUp" Click="StepUp" />
                <Glyph Width=16 Height=16 SVG="@Icons.Material.Outlined.KeyboardArrowDown" Click="StepDown"></Glyph>
            </span>
            @if (Clearable && !string.IsNullOrEmpty(Value?.ToString()))
            {
                <span class="input-glyph button" @onclick="Clear">
                    <Glyph SVG="@Icons.Material.Rounded.Dangerous" />
                </span>
            }
            @if (IsError)
            {
                <span class="input-glyph error">
                    <Glyph SVG="@Icons.Material.Outlined.Error" />
                </span>
            }
        </span>
    </span>
</div>