Initial commit: Lagerbestand Blazor Projekt

Lagerbestand/Components/Shared/TireSizeInput.razor

@@ -0,0 +1,45 @@
+@* Masked input for tire sizes in the format ###/## R## (e.g. 225/45 R17).
+   The user only types digits; separators are inserted automatically. *@
+
+<input type="text"
+       class="form-control @CssClass"
+       inputmode="numeric"
+       maxlength="10"
+       placeholder="@Placeholder"
+       value="@Value"
+       @oninput="OnInput" />
+
+@code {
+    [Parameter] public string? Value { get; set; }
+    [Parameter] public EventCallback<string?> ValueChanged { get; set; }
+    [Parameter] public string Placeholder { get; set; } = "z.B. 225/45 R17";
+    [Parameter] public string? CssClass { get; set; }
+
+    private async Task OnInput(ChangeEventArgs e)
+    {
+        var raw = e.Value?.ToString() ?? string.Empty;
+        var formatted = FormatTireSize(raw);
+        Value = formatted;
+        await ValueChanged.InvokeAsync(formatted);
+    }
+
+    /// <summary>
+    /// Formats digit input into the tire size mask ###/## R##.
+    /// Examples: "2254517" -> "225/45 R17", "22545" -> "225/45", "225" -> "225"
+    /// </summary>
+    private static string FormatTireSize(string input)
+    {
+        var digits = new string(input.Where(char.IsDigit).Take(7).ToArray());
+
+        if (digits.Length == 0)
+            return string.Empty;
+
+        if (digits.Length <= 3)
+            return digits;
+
+        if (digits.Length <= 5)
+            return $"{digits[..3]}/{digits[3..]}";
+
+        return $"{digits[..3]}/{digits[3..5]} R{digits[5..]}";
+    }
+}