decePubClient/Components/Daisy/DataInput/DOtp.razor

@inherits DInputBase<string>

@* daisyUI OTP: https://daisyui.com/components/otp/ . The otp class is on the label; Length (4 to 6) sets the number of
   digit boxes, maxlength and pattern together. required is on by default because daisyUI styles the complete code
   through :valid; required="false" removes it. *@
<label class="@CssClassFull">
	@for (var i = 0; i < Digits; i++)
	{
		<span></span>
	}
	<input type="text" autocomplete="one-time-code" inputmode="numeric" required @attributes="InputAttributes"
		   maxlength="@Digits" pattern="@($"[0-9]{{{Digits}}}")" name="@NameAttribute" value="@CurrentValueAsString"
		   @oninput="OnInput" @onchange="OnChange" aria-invalid="@(IsInvalid ? "true" : null)" />
</label>

@code {
	[Parameter] public int Length { get; set; } = 6;
	[Parameter] public DColor Color { get; set; }
	[Parameter] public DSize Size { get; set; }
	/// <summary>Joins the digit boxes into one field (otp-joined).</summary>
	[Parameter] public bool Joined { get; set; }
	/// <summary>Update the bound value on every keystroke instead of on change.</summary>
	[Parameter] public bool Immediate { get; set; }

	int Digits => Math.Clamp(Length, 4, 6);

	string CssClassFull => Cx("otp", IsInvalid ? "otp-error" : ColorClass, SizeClass, Joined ? "otp-joined" : null, CssClass);

	string ColorClass => Color switch
	{
		DColor.Neutral => "otp-neutral",
		DColor.Primary => "otp-primary",
		DColor.Secondary => "otp-secondary",
		DColor.Accent => "otp-accent",
		DColor.Info => "otp-info",
		DColor.Success => "otp-success",
		DColor.Warning => "otp-warning",
		DColor.Error => "otp-error",
		_ => null
	};

	string SizeClass => Size switch
	{
		DSize.Xs => "otp-xs",
		DSize.Sm => "otp-sm",
		DSize.Lg => "otp-lg",
		DSize.Xl => "otp-xl",
		_ => null
	};

	void OnInput(ChangeEventArgs e)
	{
		if (Immediate)
			CurrentValueAsString = e.Value?.ToString();
	}

	void OnChange(ChangeEventArgs e) => CurrentValueAsString = e.Value?.ToString();
}