Add Focused class/style to BitTimePicker (#8375)

src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/TimePicker/BitTimePicker.razor.cs

@@ -5,11 +5,11 @@ namespace Bit.BlazorUI;
 
 public partial class BitTimePicker : BitInputBase<TimeSpan?>, IAsyncDisposable
 {
+    private bool _hasFocus;
     private bool _disposed;
     private string? _labelId;
     private string? _inputId;
     private string _calloutId = string.Empty;
-    private string _focusClass = string.Empty;
     private string _timePickerId = string.Empty;
     private ElementReference _inputHourRef = default!;
     private ElementReference _inputMinuteRef = default!;
@@ -282,12 +282,14 @@ protected override void RegisterCssClasses()
 
         ClassBuilder.Register(() => Standalone ? "bit-tpc-sta" : string.Empty);
 
-        ClassBuilder.Register(() => _focusClass);
+        ClassBuilder.Register(() => _hasFocus ? $"bit-tpc-foc {Classes?.Focused}" : string.Empty);
     }
 
     protected override void RegisterCssStyles()
     {
         StyleBuilder.Register(() => Styles?.Root);
+
+        StyleBuilder.Register(() => _hasFocus ? Styles?.Focused : string.Empty);
     }
 
     protected override void OnInitialized()
@@ -351,26 +353,29 @@ private async Task HandleOnFocusIn()
     {
         if (IsEnabled is false) return;
 
-        _focusClass = "bit-tpc-foc";
+        _hasFocus = true;
         ClassBuilder.Reset();
+        StyleBuilder.Reset();
         await OnFocusIn.InvokeAsync();
     }
 
     private async Task HandleOnFocusOut()
     {
         if (IsEnabled is false) return;
 
-        _focusClass = string.Empty;
+        _hasFocus = false;
         ClassBuilder.Reset();
+        StyleBuilder.Reset();
         await OnFocusOut.InvokeAsync();
     }
 
     private async Task HandleOnFocus()
     {
         if (IsEnabled is false) return;
 
-        _focusClass = "bit-tpc-foc";
+        _hasFocus = true;
         ClassBuilder.Reset();
+        StyleBuilder.Reset();
         await OnFocus.InvokeAsync();
     }
 

src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/TimePicker/BitTimePickerClassStyles.cs

@@ -7,6 +7,11 @@ public class BitTimePickerClassStyles
     /// </summary>
     public string? Root { get; set; }
 
+    /// <summary>
+    /// Custom CSS classes/styles for the focused of the BitTimePicker.
+    /// </summary>
+    public string? Focused { get; set; }
+
     /// <summary>
     /// Custom CSS classes/styles for the label of the BitTimePicker.
     /// </summary>

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/TimePicker/BitTimePickerDemo.razor.cs

@@ -358,6 +358,13 @@ public partial class BitTimePickerDemo
                     Description = "Custom CSS classes/styles for the root element of the BitTimePicker."
                 },
                 new()
+                {
+                    Name = "Focused",
+                    Type = "string?",
+                    DefaultValue = "null",
+                    Description = "Custom CSS classes/styles for the focused state of the BitTimePicker."
+                },
+                new()
                 {
                     Name = "Label",
                     Type = "string?",