Stepper Fix ProgressValue does not Update When Step Add/Remove (#391)

* Stepper Fix ProgressValue does not Update When Step Add/Remove

* Change Example Names

* Fix Error and Warning

CodeBeam.MudBlazor.Extensions.Docs/Pages/Components/StepperExtended/StepperExtendedPage.razor

@@ -0,0 +1,12 @@
+@page "/mudstepperextended"
+@namespace MudExtensions.Docs.Pages
+
+<ExamplePage Title="MudStepperExtended">
+    <ExampleCard ComponentName="StepperExtended" ExampleName="StepperExtendedExample1" Title="Playground" Description="Place MudSteps in the MudStepper.">
+        <StepperExtendedExample1 />
+    </ExampleCard>
+
+    <ExampleCard ComponentName="StepperExtended" ExampleName="StepperExtendedExample2" Title="Order" Description="You can set each step's order dynamically.">
+        <StepperExtendedExample2 />
+    </ExampleCard>
+</ExamplePage>

CodeBeam.MudBlazor.Extensions.Docs/Pages/Index.razor

@@ -228,6 +228,7 @@
     {
         new("MudListExtended", "The extended MudList component."),
         new("MudSelectExtended", "The extended MudSelect component."),
+        new("MudStepperExtended", "A wizard-like steps to control the flow with rich options."),
         new("MudTextFieldExtended", "The extended MudTextField component."),
     };
 
@@ -254,7 +255,6 @@
         new("MudSignaturePad", "A signature pad."),
         new("MudSpeedDial", "Stacked buttons in a menu content."),
         new("MudSplitter", "A resizeable content splitter."),
-        new("MudStepper", "A wizard-like steps to control the flow with rich options."),
         new("MudSwitchM3", "Material 3 switch component that has all MudBlazor features."),
         new("MudTeleport", "Teleport the content to the specified parent and not follow the DOM hierarchy."),
         new("MudTextM3", "Material 3 typography"),

CodeBeam.MudBlazor.Extensions.Docs/Shared/MainLayout.razor

@@ -60,7 +60,7 @@
             <MudNavLink Href="/mudsignaturepad">SignaturePad</MudNavLink>
             <MudNavLink Href="/mudspeeddial">SpeedDial</MudNavLink>
             <MudNavLink Href="/mudsplitter">Splitter</MudNavLink>
-            <MudNavLink Href="/mudstepper">Stepper</MudNavLink>
+            <MudNavLink Href="/mudstepperextended">StepperExtended</MudNavLink>
             <MudNavLink Href="/mudswitchm3">SwitchM3</MudNavLink>
             <MudNavLink Href="/mudteleport">Teleport</MudNavLink>
             <MudNavLink Href="/mudtextfieldextended">TextFieldExtended</MudNavLink>

CodeBeam.MudBlazor.Extensions.UnitTests/Components/RenderTests.cs

@@ -51,7 +51,7 @@ public void SplitterPageRenderTest()
         [Test]
         public void StepperPageRenderTest()
         {
-            var comp = Context.RenderComponent<StepperPage>();
+            var comp = Context.RenderComponent<StepperExtendedPage>();
             comp.Markup.Should().NotBeNullOrEmpty();
         }
 

CodeBeam.MudBlazor.Extensions/Components/SpeedDial/MudSpeedDial.razor.cs

@@ -4,6 +4,9 @@
 
 namespace MudExtensions
 {
+    /// <summary>
+    /// 
+    /// </summary>
     public partial class MudSpeedDial : MudComponentBase
     {
         Guid _animationGuid = Guid.NewGuid();

CodeBeam.MudBlazor.Extensions/Components/StepperExtended/MudStepperExtended.razor.cs

@@ -152,11 +152,18 @@ internal int ActiveIndex
             set
             {
                 _activeIndex = value;
-                ProgressValue = _activeIndex * (100.0 / (Steps.Count - 1));
+                UpdateProgressValue();
             }
         }
 
         internal double ProgressValue;
+        /// <summary>
+        /// 
+        /// </summary>
+        protected void UpdateProgressValue()
+        {
+            ProgressValue = _activeIndex * (100.0 / (Steps.Count - 1));
+        }
 
         /// <summary>
         /// Provides CSS classes for the step content.
@@ -349,6 +356,7 @@ internal void AddStep(MudStepExtended step)
                 ReorderSteps();
             }
 
+            UpdateProgressValue();
             StateHasChanged();
         }
 
@@ -364,6 +372,7 @@ internal void RemoveStep(MudStepExtended step)
         {
             Steps.Remove(step);
             _allSteps.Remove(step);
+            UpdateProgressValue();
             StateHasChanged();
         }
 
@@ -633,10 +642,11 @@ public void SetStepStatus(int index, StepStatus status)
         }
 
         /// <summary>
-        /// 
+        /// Update all component and render again.
         /// </summary>
         public void ForceRender()
         {
+            UpdateProgressValue();
             StateHasChanged();
         }
 

CodeBeam.MudBlazor.Extensions/Components/TextFieldExtended/MudTextFieldExtended.razor.cs

@@ -7,6 +7,10 @@
 
 namespace MudExtensions
 {
+    /// <summary>
+    /// 
+    /// </summary>
+    /// <typeparam name="T"></typeparam>
     public partial class MudTextFieldExtended<T> : MudDebouncedInputExtended<T>
     {
         /// <summary>

CodeBeam.MudBlazor.Extensions/Components/Toggle/MudToggle.razor.cs

@@ -5,6 +5,9 @@
 
 namespace MudExtensions
 {
+    /// <summary>
+    /// 
+    /// </summary>
     public partial class MudToggle : MudComponentBase
     {
         /// <summary>

CodeBeam.MudBlazor.Extensions/Components/TransferList/MudTransferList.razor.cs

@@ -4,6 +4,10 @@
 
 namespace MudExtensions
 {
+    /// <summary>
+    /// 
+    /// </summary>
+    /// <typeparam name="T"></typeparam>
     public partial class MudTransferList<T> : MudComponentBase
     {
         MudListExtended<T> _startList = new();
@@ -65,6 +69,9 @@ public partial class MudTransferList<T> : MudComponentBase
         [Parameter]
         public EventCallback<ICollection<T?>?> EndCollectionChanged { get; set; }
 
+        /// <summary>
+        /// 
+        /// </summary>
         [Parameter]
         [Category(CategoryTypes.FormComponent.ListBehavior)]
         public Func<T?, string?>? ToStringFunc { get; set; }
@@ -357,6 +364,10 @@ protected internal async Task TransferAll(bool startToEnd = true)
             }
         }
 
+        /// <summary>
+        /// 
+        /// </summary>
+        /// <returns></returns>
         public ICollection<T?>? GetStartListSelectedValues()
         {
             if (_startList == null)
@@ -408,6 +419,11 @@ protected void OrderItems()
             EndCollection = OrderFunc.Invoke(EndCollection);
         }
 
+        /// <summary>
+        /// 
+        /// </summary>
+        /// <param name="args"></param>
+        /// <returns></returns>
         protected async Task DoubleClick(ListItemClickEventArgs<T> args)
         {
             if (AllowDoubleClick == false)

CodeBeam.MudBlazor.Extensions/Components/Wheel/MudWheel.razor.cs

@@ -12,7 +12,9 @@ namespace MudExtensions
     /// <typeparam name="T"></typeparam>
     public partial class MudWheel<T> : MudBaseInput<T>
     {
-
+        /// <summary>
+        /// 
+        /// </summary>
         [Inject] public IScrollManager ScrollManager { get; set; }
 
         /// <summary>

CodeBeam.MudBlazor.Extensions/Utilities/MudCssManager.cs

@@ -1,5 +1,4 @@
 using Microsoft.JSInterop;
-using MudBlazor.Extensions;
 using System.ComponentModel;
 
 namespace MudExtensions.Utilities
@@ -11,6 +10,10 @@ public class MudCssManager
     {
         private IJSRuntime JSRuntime;
 
+        /// <summary>
+        /// 
+        /// </summary>
+        /// <param name="jsRuntime"></param>
         public MudCssManager(IJSRuntime jsRuntime)
         {
             JSRuntime = jsRuntime;
@@ -34,7 +37,7 @@ public async Task SetCss(string? className, CssProp cssProp, string? value)
                 className = "." + className;
             }
 
-            object[] parameters = new object[] { className, cssProp.ToDescriptionString(), value };
+            object?[] parameters = new object?[] { className, cssProp.ToDescriptionString(), value };
             await JSRuntime.InvokeVoidAsync("setcss", parameters);
         }
 
@@ -56,7 +59,7 @@ public async Task SetCss(string? className, string? cssPropName, string? value)
                 className = "." + className;
             }
 
-            object[] parameters = new object[] { className, cssPropName, value };
+            object?[] parameters = new object?[] { className, cssPropName, value };
             await JSRuntime.InvokeVoidAsync("setcss", parameters);
         }
 
@@ -99,7 +102,7 @@ public async Task SetCss(string? className, string? cssPropName, string? value)
                 className = "." + className;
             }
 
-            object[] parameters = new object[] { className, cssPropName };
+            object?[] parameters = new object?[] { className, cssPropName };
             var result = await JSRuntime.InvokeAsync<string?>("getcss", parameters);
             return result;
         }