Fomr wizzard fix

src/Connected.Components.Showcase.Runner/Pages/ComponentsExamples/FormWizardStepExample.razor

@@ -0,0 +1,29 @@
+@page "/formwizard"
+@using Connected.Classes.FormWizard;
+@using Connected.Components;
+@using Connected.Enums;
+@using Connected.Models.Modal;
+@using Connected.Models;
+@using Connected.Services;
+@using Connected.Utilities;
+
+<h1 style="text-align:center;">FORM WIZARD EXAMPLE</h1>
+
+<FormWizard Options="@options">
+    <FormWizardStep>
+        Step 1
+    </FormWizardStep>
+    <FormWizardStep>
+        Step2
+    </FormWizardStep>
+    <FormWizardStep>
+        Step3
+    </FormWizardStep>
+    <FormWizardStep>
+        Step4
+    </FormWizardStep>
+</FormWizard>
+
+@code {
+    FormWizardOptions options = new(false, "Naslednji", "Prejšnji", "Končaj", "Prekliči");
+}

src/Connected.Components.Showcase.Runner/Pages/ComponentsExamples/ModalDialogExample.razor

@@ -38,7 +38,7 @@
          * 
          */
         @<div>
-            <div>Change the number input aand watch the value variable behind the modal change</div>
+            <div>Change the number input and watch the value variable behind the modal change</div>
             <NumberInput @bind-Value=@value></NumberInput>
         </div>,
 

src/Connected.Components.Showcase.Runner/Pages/ComponentsExamples/ToggleGlyphButtonExample.razor

@@ -0,0 +1,25 @@
+@page "/toggleglyph"
+@using Connected.Components;
+@using Connected.Enums;
+@using Connected.Models.Modal;
+@using Connected.Models;
+@using Connected.Services;
+@using Connected.Utilities;
+
+@inject ModalDialogService modalDialog;
+
+
+<h1 style="text-align:center;">DATE PICKER EXAMPLE</h1>
+
+
+<ToggleGlyphButton Glyph="@Icons.Material.Filled.Close" ToggledGlyph="@Icons.Material.Filled.Check" @bind-Toggled=toggle>
+    TGB
+</ToggleGlyphButton>
+
+
+<h4>Toggled: @toggle</h4>
+
+
+@code {
+   bool toggle = false;
+}

src/Connected.Components.Showcase.Runner/Pages/Index.razor

@@ -14,6 +14,8 @@
        <li><Link Class="m-1" Url="button" Text="Button" Target="Target.Self" /></li>
        <li><Link Class="m-1" Url="datepicker" Text="Date picker" Target="Target.Self" /></li>
        <li><Link Class="m-1" Url="datagrid" Text="Data Grid" Target="Target.Self" /></li>
+       <li><Link Class="m-1" Url="toggleglyph" Text="Toggle Glyph Button" Target="Target.Self" /></li>
+        <li><Link Class="m-1" Url="formwizard" Text="Form wizzard" Target="Target.Self" /></li>
     </ul>
 } else
 {

src/Connected.Components/Classes/FormWizard/FormWizardOptions.cs

@@ -0,0 +1,33 @@
+namespace Connected.Classes.FormWizard;
+public class FormWizardOptions
+{
+	public bool DisableNavigationOnFinish { get; set; } = false;
+	public string NextButtonText { get; set; } = "Next";
+	public string PreviousButtonText { get; set; } = "Previous";
+	public string FinishButtonText { get; set; } = "Finish";
+
+	public string CancelButtonText { get; set; } = "Cancel";
+
+	public FormWizardOptions(
+		bool DisableNavigationOnFinish=false, 
+		string NextButtonText = "Next", 
+		string PreviousButtonText = "Previous", 
+		string FinishButtonText="Finish", 
+		string CancelButtonText="Cancel")
+	{
+		this.DisableNavigationOnFinish = DisableNavigationOnFinish;
+		this.NextButtonText = NextButtonText;
+		this.PreviousButtonText = PreviousButtonText;
+		this.FinishButtonText = FinishButtonText;
+		this.CancelButtonText = CancelButtonText;
+	}
+
+	public FormWizardOptions(FormWizardOptions options)
+	{
+		DisableNavigationOnFinish = options.DisableNavigationOnFinish;
+		NextButtonText = options.NextButtonText;
+		PreviousButtonText = options.PreviousButtonText;
+		FinishButtonText = options.FinishButtonText;
+		CancelButtonText = options.CancelButtonText;
+	}
+}

src/Connected.Components/Classes/Modal/ModalOptions.cs

@@ -21,7 +21,7 @@ public class ModalOptions
 		Type = options.Type;
 	}
 
-	public ModalOptions(bool disableEscKey=false, bool disableBackdropClick=false, bool noHeader=false, ModalType type=ModalType.Default)
+	public ModalOptions(bool disableEscKey = false, bool disableBackdropClick = false, bool noHeader = false, ModalType type = ModalType.Default)
 	{
 		DisableEscKey = disableEscKey;
 		DisableBackdropClick = disableBackdropClick;

src/Connected.Components/Components/FormWizard.razor

@@ -1,14 +1,16 @@
-<CascadingValue Value="this">
+@if (loaded)
+{
+    <CascadingValue Value="this">
         <section id="@Id" class="@ClassList" style="@StyleList">
             <div class="form-outer ">
                 @ChildContent
             </div>
 
             <div class="btn-content justify-space-between">
-            <button type="button" href="#" class="btn btn-secondary" aria-pressed="true" disabled="@WizardFinished" @onclick="CancelClick">Cancel</button>
+                <button type="button" href="#" class="btn btn-secondary" aria-pressed="true" disabled="@NavigationDisabled" @onclick="CancelClick">@Options.CancelButtonText</button>
                 <div class="btn-group">
-                <button type="button" @onclick="PreviousSlide" class="btn btn-core mr-2" aria-pressed="true" disabled="@WizardFinished"><i class='bx bx-chevron-left'></i>@PreviousBtnText</button>
+                    <button type="button" @onclick="PreviousSlide" class="btn btn-core mr-2" aria-pressed="true" disabled="@NavigationDisabled"><i class='bx bx-chevron-left'></i>@Options.PreviousButtonText</button>
-                <button type="button" @onclick="NextSlide" class="btn btn-core mr-2" aria-pressed="true" disabled="@WizardFinished">@NextBtnText<i class='bx bx-chevron-right'></i></button>
+                    <button type="button" @onclick="NextSlide" class="btn btn-core mr-2" aria-pressed="true" disabled="@NavigationDisabled">@NextBtnText<i class='bx bx-chevron-right'></i></button>
                 </div>
             </div>
 
@@ -20,3 +22,6 @@
             </div>
     </section>
 </CascadingValue>
+} else {
+    <p>Loading wizard....</p>
+}

src/Connected.Components/Components/FormWizard.razor.cs

@@ -1,6 +1,8 @@
-using Connected.Enums;
+using Connected.Classes.FormWizard;
+using Connected.Enums;
 using Connected.Utilities;
 using Microsoft.AspNetCore.Components;
+using Microsoft.Extensions.Options;
 using System.Reflection.Metadata;
 
 namespace Connected.Components;
@@ -21,6 +23,12 @@ public partial class FormWizard
 	[Parameter]
 	public List<FormWizardStep> Steps { get; set; } = new();
 
+	/// <summary>
+	/// Steps of type FormWizardStep
+	/// </summary>
+	[Parameter]
+	public bool DisableNavigationOnFinish { get; set; } = false;
+
 	/// <summary>
 	/// EventCallback for 'Finish' button click
 	/// </summary>
@@ -36,13 +44,20 @@ public partial class FormWizard
 	[Parameter]
 	public string Id { get; set; } = Guid.NewGuid().ToString();
 
-	private string NextBtnText = "Next";
+	/// <summary>
-	private string PreviousBtnText = "Previous";
+	/// Text shown inside the button
+	/// Options: any string variable
+	/// Default: string.Empty
+	/// </summary>
+	[Parameter]
+	public FormWizardOptions Options { get; set; } = new();
 
-	private bool WizardFinished { get; set; } = false;
+	private bool NavigationDisabled { get; set; } = false;
 
 	private FinishedState FinishedState { get; set; } = FinishedState.Unfinished;
 
+	private string NextBtnText { get; set; } = "Next";
+
 	[Parameter]
 	public int ActiveIndex
 	{
@@ -101,7 +116,7 @@ public partial class FormWizard
 		{
 			FinishedState = FinishedState.Finished;
 			Steps[ActiveIndex].Completed = true;
-			WizardFinished = true;
+			if (DisableNavigationOnFinish) NavigationDisabled = true;
 			await OnFinishedClick.InvokeAsync();
 		}
 		if (FinishedState.Equals(FinishedState.Unfinished))
@@ -116,9 +131,9 @@ public partial class FormWizard
 			Steps[PreviousIndex].IsPrevious = true;
 
 			if (ActiveIndex == NextIndex)
-				NextBtnText = "Finish";
+				NextBtnText = Options.FinishButtonText;
 			else
-				NextBtnText = "Next";
+				NextBtnText = Options.NextButtonText;
 		}
 	}
 
@@ -135,9 +150,9 @@ public partial class FormWizard
 			Steps[PreviousIndex].IsPrevious = true;
 
 			if (ActiveIndex == NextIndex)
-				NextBtnText = "Finish";
+				NextBtnText = Options.FinishButtonText;
 			else
-				NextBtnText = "Next";
+				NextBtnText = Options.NextButtonText;
 		}
 		if (ActiveIndex == 0)
 		{
@@ -148,6 +163,9 @@ public partial class FormWizard
 
 	private async Task CancelClick()
 	{
+		ResetAllChildren(true);
+		ActiveIndex = 0;
+		Steps[0].Active = true;
 		await OnCancelClick.InvokeAsync();
 	}
 
@@ -184,13 +202,14 @@ public partial class FormWizard
 		Steps[ChildIndex].IsPrevious = false;
 	}
 
-	private void ResetAllChildren()
+	private void ResetAllChildren(bool reset_finished = false)
 	{
 		foreach (var step in Steps)
 		{
 			step.Active = false;
 			step.IsNext = false;
 			step.IsPrevious = false;
+			if (reset_finished) step.Completed = false;
 		}
 	}
 
@@ -216,11 +235,23 @@ public partial class FormWizard
 		await base.OnParametersSetAsync();
 	}*/
 
+	private bool loaded = false;
+
+	protected override async Task OnInitializedAsync()
+	{
+		loaded = true;
+		await Task.Run(StateHasChanged);
+	}
+
 	protected override async Task OnAfterRenderAsync(bool firstRender)
 	{
 		if (firstRender)
 		{
 			InitializeSteps();
+			if (ActiveIndex == NextIndex)
+				NextBtnText = Options.FinishButtonText;
+			else
+				NextBtnText = Options.NextButtonText;
 		}
 		await base.OnAfterRenderAsync(firstRender);
 	}

src/Connected.Components/Components/FormWizardStep.razor.cs

@@ -71,7 +71,6 @@ public partial class FormWizardStep
 		}
 	}
 
-
 	/// <summary>
 	/// Generated class list for button based on user parameters
 	/// </summary>

src/Connected.Components/Components/ToggleGlyphButton.razor

@@ -1,4 +1,4 @@
-@inherits Button
+@inherits GlyphButton
 
 <button type="button"
         @onclick="@Clicked"
@@ -6,16 +6,7 @@
         style="@StyleList"
         class="@ClassList">
         <div class="@ContentClassList">
-        <div style="align-items:center">
-            @if (GlyphPosition == Position.Top)
-            {
             <Glyph SVG="@_ShownGlyph" Color="@GlyphColor" />
-            }
             @ChildContent
-            @if (GlyphPosition == Position.Bottom)
-            {
-                <Glyph SVG="@_ShownGlyph" Color="@GlyphColor" />
-            }
-        </div>
         </div>
 </button>

src/Connected.Components/Components/ToggleGlyphButton.razor.cs

@@ -3,7 +3,7 @@ using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Web;
 
 namespace Connected.Components;
-public partial class ToggleGlyphButton: Button
+public partial class ToggleGlyphButton: GlyphButton
 {
 	#region Parameters
 
@@ -15,13 +15,6 @@ public partial class ToggleGlyphButton: Button
 	[Parameter]
 	public bool Toggled { get; set; } = false;
 
-	/// <summary>
-	/// Glyph (Icon) inside the button.
-	/// Options: SVG string --> Icons
-	/// Default: string.Empty
-	/// </summary>
-	[Parameter, EditorRequired]
-	public string Glyph { get; set; } = string.Empty;
 
 	/// <summary>
 	/// Glyph (Icon) inside the button when tge .
@@ -31,29 +24,25 @@ public partial class ToggleGlyphButton: Button
 	[Parameter, EditorRequired]
 	public string ToggledGlyph { get; set; } = string.Empty;
 
-	/// <summary>
-	/// Position of the glyph relative to button Text parameter. If Glyph parameter == string.Empty this parameter is ignored
-	/// Options: Position.[left,top,right,bottom]
-	/// Default: Position.left 
-	/// </summary>
-	[Parameter]
-	public Position GlyphPosition { get; set; } = Position.Left;
-
 	/// <summary>
 	/// Color for the glyph. If Glyph parameter is empty this parameter is ignored
 	/// Options: Color.[Core,Primary,Secondary,Success,Info,Warning,Danger,White,Light,Dark]
 	/// Default: Color.Dark
 	/// </summary>
 	[Parameter]
-	public Color GlyphColor { get; set; } = Color.Dark;
+	public Color ToggledGlyphColor { get; set; } = Color.Dark;
 
-	/// <summary>
-	/// Color for the glyph. If Glyph parameter is empty this parameter is ignored
-	/// Options: Color.[Core,Primary,Secondary,Success,Info,Warning,Danger,White,Light,Dark]
-	/// Default: Color.Dark
-	/// </summary>
 	[Parameter]
-	public Color ToggledGlyphColor { get; set; } = Color.Dark;
+	public Color ToggledButtonColor { get; set; } = Color.Success;
+
+	private Color _ButtonColor
+	{
+		get
+		{
+			if (Toggled) return ToggledButtonColor;
+			return base.Color;
+		}
+	}
 
 	private string _ShownGlyph
 	{
@@ -61,7 +50,7 @@ public partial class ToggleGlyphButton: Button
 		{
 			if (Toggled)
 				return ToggledGlyph;
-			return Glyph;
+			return base.Glyph;
 		}
 	}
 
@@ -94,8 +83,9 @@ public partial class ToggleGlyphButton: Button
 		{
 			return new CssBuilder("btn")
 				.AddClass("btn-" + Helper.GetEnumDescription<Size>(base.Size))
-				.AddClass("btn-" + Helper.GetEnumDescription<Color>(base.Color),!base.Outlined)
+				.AddClass("btn-" + Helper.GetEnumDescription<Color>(_ButtonColor),!base.Outlined)
-				.AddClass("btn-outline-" + Helper.GetEnumDescription<Color>(base.Color), base.Outlined)
+				.AddClass("btn-outline-" + Helper.GetEnumDescription<Color>(_ButtonColor), base.Outlined)
+				.AddClass("wrap")
 				.AddClass(base.Class)
 				.Build();
 		}