MudStaticTextField: Adornment Icon Toggle

* Add ability to toggle the adornment icon

Author: Anu6is

demo/StaticSample/StaticSample/Components/Account/Pages/Login.razor

@@ -44,9 +44,9 @@
                 <MudStaticTextField @bind-Value="@Input.Email" Adornment="Adornment.End" AdornmentIcon="@Icons.Material.Outlined.Email" autocomplete="username"
                                     Class="pb-2" Margin="Margin.Dense" Variant="Variant.Outlined" Label="Email" For="() => Input.Email" />
 
-                <MudStaticTextField @bind-Value="@Input.Password" Adornment="Adornment.End" AdornmentIcon="@Icons.Material.Outlined.VisibilityOff" AdornmentClickFunction="showPassword"
-                                    autocomplete="current-password" Class="pb-2" Margin="Margin.Dense" Variant="Variant.Outlined" Label="Password"
-                                    InputType="InputType.Password" For="() => Input.Password" />
+                <MudStaticTextField @bind-Value="@Input.Password" autocomplete="current-password" Class="pb-2" Margin="Margin.Dense" Variant="Variant.Outlined" Label="Password"
+                                    Adornment="Adornment.End" AdornmentIcon="@Icons.Material.Outlined.Visibility" AdornmentToggledIcon="@Icons.Material.Outlined.VisibilityOff"
+                                    AdornmentClickFunction="showPassword" InputType="InputType.Password" For="() => Input.Password" />
 
                 <MudStack Row="true" AlignItems="AlignItems.Center" Justify="Justify.SpaceBetween">
                     <MudStaticSwitch @bind-Value="Input.RememberMe" Color="Color.Primary" Label="Remember Me" Typo="Typo.body2"/>

src/Components/MudStaticTextField.razor

@@ -52,6 +52,7 @@
     /// </example>
     /// </remarks>
     [Parameter] public string? AdornmentClickFunction { get; set; }
+    [Parameter] public string? AdornmentToggledIcon { get; set; }
     [Parameter] public Expression<Func<string>>? ValueExpression { get; set; }
 
     private string _name = string.Empty;
@@ -142,9 +143,21 @@
         {
             const inputControl = inputElement.closest(".mud-input-control");
             const buttonElement = inputControl.querySelector('button');
+            const svgElement = buttonElement.querySelector("svg");
+            const icon = '@AdornmentIcon';
+            const toggleIcon = '@AdornmentToggledIcon';
+
+            let isToggled = false;
 
             if (buttonElement) {
                 buttonElement.addEventListener('click', function (event) {
+                    
+                    if (svgElement && toggleIcon) 
+                    {
+                        isToggled = !isToggled;
+                        svgElement.innerHTML = isToggled ? toggleIcon : icon;
+                    }
+
                     if (typeof window[onAdornmentClick] === 'function') {
                         window[onAdornmentClick](inputElement, event.target);
                     }

tests/StaticInput.UnitTests.Viewer/Components/Tests/TextField/TextFieldAdornmentTest.razor

@@ -9,7 +9,8 @@
                         Adornment="Adornment.End" AdornmentIcon="@Icons.Material.Outlined.Email"
                         Class="pb-2" Margin="Margin.Dense" Variant="Variant.Outlined" />
     <MudStaticTextField @bind-Value="@Model.Password" For="() => Model.Password" Label="Password" Placeholder="Password"
-                        Adornment="Adornment.End" AdornmentIcon="@Icons.Material.Outlined.VisibilityOff"
+                        Adornment="Adornment.End" AdornmentIcon="@Icons.Material.Outlined.Visibility" 
+                        AdornmentToggledIcon="@Icons.Material.Outlined.VisibilityOff"
                         AdornmentClickFunction="handleAdornmentClick" InputType="InputType.Password"
                         Class="pb-2" Margin="Margin.Dense" Variant="Variant.Outlined" />
 </EditForm>

tests/StaticInput.UnitTests/Components/TextFieldTests.cs

@@ -226,5 +226,25 @@ public async Task TextField_AdornmentButton_IsClickable()
 
             message.Should().Be("Adornment clicked!");
         }
+
+        [Fact]
+        public async Task TextField_AdornmentButton_CanToggle()
+        {
+            var url = typeof(TextFieldAdornmentTest).ToQueryString();
+
+            await Page.GotoAsync(url);
+
+            var button = await Page.QuerySelectorAsync("input[type=\"password\"] ~ .mud-input-adornment .mud-icon-button");
+            var innerHtml = await button!.InnerHTMLAsync();
+
+            innerHtml.Should().Contain("<path d=\"M0 0h24v24H0V0z\" fill=\"none\"></path>");
+
+            await button.ClickAsync();
+
+            button = await Page.QuerySelectorAsync("input[type=\"password\"] ~ .mud-input-adornment .mud-icon-button");
+            innerHtml = await button!.InnerHTMLAsync();
+
+            innerHtml.Should().Contain("<path d=\"M0 0h24v24H0V0zm0 0h24v24H0V0zm0 0h24v24H0V0zm0 0h24v24H0V0z\" fill=\"none\"></path>");
+        }
     }
 }