@using System.Globalization
@inject IJSRuntime js

<TelerikNumericTextBox @bind-Value="@NumericValue"
                       Format="C2"
                       Id="ntb1"
                       Width="200px" />

@* Move JavaScript code to a separate JS file *@
<script suppress-error="BL9992">
    var currencySymbol = "";
    var groupSeparator = "";

    function onAfterRenderJs(currencySym, groupSep) {
        currencySymbol = currencySym;
        groupSeparator = groupSep;

        var input = document.getElementById("ntb1");
        if (input) {
            input.addEventListener("paste", onNumericTextBoxPaste);
        }
    }

    async function onNumericTextBoxPaste(e) {
        let pastedValue = await navigator.clipboard.readText();

        if (pastedValue.indexOf(currencySymbol) == -1 && pastedValue.indexOf(groupSeparator) == -1) {
            return;
        }

        e.target.value = pastedValue.replace(currencySymbol, "").trim().replace(groupSeparator, "");
        e.target.dispatchEvent(new Event("input", { bubbles: true, cancelable: true  }));
    }
</script>

@code {
    private decimal NumericValue { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await Task.Delay(1); // ensure HTML is ready
            await js.InvokeVoidAsync("onAfterRenderJs",
                CultureInfo.CurrentCulture.NumberFormat.CurrencySymbol,
                CultureInfo.CurrentCulture.NumberFormat.NumberGroupSeparator);
        }

        await base.OnAfterRenderAsync(firstRender);
    }
}