Merge pull request 'features/rewrite/grid' (#13) from features/rewrite/grid into features/rewrite/main

Reviewed-on: #13

.gitignore

@@ -431,3 +431,8 @@ FodyWeavers.xsd
 **.Runner/**
 
 **.DS_Store
+/src/Connected.Components/Models/Alert/AlertOptions.cs
+/src/Connected.Components/Components/DatePicker.razor.cs
+/src/Connected.Components/Components/FormWizard.razor
+/src/Connected.Components/Components/FormWizard.razor.cs
+/src/Connected.Components.Showcase.Runner/Program.cs

src/Connected.Components.Showcase.Runner/Connected.Components.Showcase.Runner.csproj

@@ -22,4 +22,9 @@
 		<Watch Remove="..\..\src\**\bin\**" />
 	</ItemGroup>
 
+
+	<ItemGroup>
+	  <Watch Remove="Program.cs" />
+	</ItemGroup>
+
 </Project>

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

@@ -944,7 +944,7 @@
             <!-- TO DO when modal is open add class to body .scroll-disabled-->
             
             <!-- Button trigger modal -->
-            <button type="button" class="btn btn-primary" @onclick="ToggleNav" data-bs-target="#staticBackdrop">
+            <button type="button" class="btn btn-primary" @onclick="ToggleModal" data-bs-target="#staticBackdrop">
             Launch backdrop modal
             </button>
 
@@ -960,7 +960,7 @@
                     ssss
                 </div>
                 <div class="modal-footer">
-                    <button type="button" class="btn btn-secondary" @onclick="ToggleNav">Close</button>
+                                <button type="button" class="btn btn-secondary" @onclick="ToggleModal">Close</button>
                     <button type="button" class="btn btn-core">Understood</button>
                 </div>
                 </div>
@@ -1168,6 +1168,13 @@
         NavClosed = string.IsNullOrWhiteSpace(NavClosed) ? "show" : "";
     }
 
+    private string ModalShown { get; set; } = "";
+
+    private void ToggleModal()
+    {
+        ModalShown = string.IsNullOrWhiteSpace(ModalShown) ? "show" : "";
+    }
+
 
     private string NextSlide { get; set; } = "";
 

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

@@ -5,6 +5,23 @@
 
 <h1 style="text-align:center;">Component Sandbox</h1>
 
+<Grid>
+    @for (int i = 0; i < 5; i++)
+    {
+        int num = i;
+        <GridRow>
+            <GridRowContent>
+                Fixed content @num.ToString()
+            </GridRowContent>
+            <GridRowContent Collapsable=true>
+                Collapsable content @num.ToString()
+            </GridRowContent>
+        </GridRow>
+    }
+</Grid>
+
+<p>Izbran datum je: @date</p>
+
 <FormWizard Id="Wizard1">
     <FormWizardStep Name="Step1">
         Step1

src/Connected.Components/Components/DatePicker.razor

@@ -1,15 +1,8 @@
 @using System.Globalization;
 
-      
-
 @if (loaded)
 {
     <div id="picker">
-
-        <!-- DatePicker input !can be edited manualy -->
-        @* <div class="inline-block"><input type="text" value="@SelectedDate.ToString(Format)" /><i class='bx bx-calendar' @onclick="(() => Shown = !Shown)"></i></div> *@
-
-
         <div class="form-group">
             <input type="text" value="@SelectedDate.ToString(Format)" required="required" /><span class="highlight"></span><span class="bar"></span>
             <label class="label-animated">Select date</label>
@@ -17,7 +10,7 @@
             <div class="input-error-text">At least 6 characters required</div>
             <span class="input-glyph-wraper">
                 <span class="input-glyph">
-                    <span class="input-glyph button" @onclick="(() => Shown = !Shown)">
+                    <span class="input-glyph button" @onclick="TogglePicker">
                         <Glyph SVG="@Icons.Material.Filled.CalendarMonth" class="icon-root svg-icon" />
                     </span>
                     <span class="input-glyph error">
@@ -32,146 +25,98 @@
         {
             <!-- DatePicker header -->
             <div class="picker-container">
-            <div id="picker-header">
+                <div id="picker-header">
-                @* <div class="text-medium">
-                    @SelectedDate.Year.ToString()
-                </div> *@
-                <div class="picker-header-label">Select date</div>
-                <div class="picker-header-title">
-                    @SelectedDate.ToString("ddd, " + Format)
-                </div>
-            </div>
-            <div class="picker-divider"></div>
-            <!-- DatePicker body -->
-            <div id="picker-body">
-                @switch (Selecting)
-                {
-                    case Selecting.Years:
-                        {
-                  
-                            <div class="picker-menu">
-                                <button class="btn btn-icon-alt "> 
-                                     <Glyph SVG="@Icons.Material.Filled.KeyboardArrowLeft" class="icon-root svg-icon icon-size-md" />
-                                </button> 
-                                <div class="text-semibold" @onclick=@(()=>Selecting = Selecting.Months)>@SelectedDate.ToString("yyyy")</div>
-                                <button class="btn btn-icon-alt "> 
-                                     <Glyph SVG="@Icons.Material.Filled.KeyboardArrowRight" class="icon-root svg-icon icon-size-md" />
-                                </button> 
-                            </div>
-                            <div class="picker-grid-col-3 gap-3">
-                                @for (int i = SelectedDate.Year - 7; i < SelectedDate.Year + 8; i++)
-                                {
-                                    int y = i;
-                                    @* <a href="#" @onclick="@(()=>SetYear(y))">
-                                        <div class="chip-group-content d-inline-flex bg-core py-1 m-1 b-1 b-r-3 text-dark" style="width:30%;">
-                                            <div class="chip-leading-icon"></div>
-                                            <div class="chip-label">@i.ToString()</div>
-                                            <div class="chip-cta-icon"></div>
-                                        </div>
-
-                                    </a>
-                                    if (SelectedDate.Year - i % 3 == 0)
-                                    {
-                                        <br />
-                                    } *@
-                                <button @onclick="@(()=>SetYear(y))" type="button" class="item">@i.ToString()</button>
-                                }
-                            </div>
-                            break;
-                        }
-                    case Selecting.Months:
-                        {
-             
 
-                            <div class="picker-menu">
+                    <div class="picker-header-label">Select date</div>
-                                <button class="btn btn-icon-alt "> 
+                    <div class="picker-header-title">
-                                     <Glyph SVG="@Icons.Material.Filled.KeyboardArrowLeft" class="icon-root svg-icon icon-size-md" />
+                        @SelectedDate.ToString("ddd, " + Format)
-                                </button> 
+                    </div>
-                                <div class="text-semibold" @onclick=@(()=>Selecting = Selecting.Years)>@SelectedDate.ToString("MMMM yyyy")</div>
+                </div>
-                                <button class="btn btn-icon-alt "> 
+                <div class="picker-divider"></div>
-                                     <Glyph SVG="@Icons.Material.Filled.KeyboardArrowRight" class="icon-root svg-icon icon-size-md" />
+                <!-- DatePicker body -->
-                                </button> 
+                <div id="picker-body">
-                            </div>
+                    @switch (Selecting)
-                            <div class="picker-grid-col-3 gap-3">
+                    {
-                                @for (int i = 1; i <= @DateTimeFormatInfo.CurrentInfo.MonthNames.Length - 1; i++)
+                        case Selecting.Years:
-                                {
+                            {
-                                    int m = i;
+
-                                    @* <a href="#" @onclick="@(()=>SetMonth(m))">
+                                <div class="picker-menu">
-
+                                    <button class="btn btn-icon-alt ">
-                                        <div class="chip-group-content d-inline-flex bg-core @MonthChipClass(m) py-1 m-1 b-1 b-r-3 text-dark" style="width:30%;">
+                                        <Glyph SVG="@Icons.Material.Filled.KeyboardArrowLeft" class="icon-root svg-icon icon-size-md" Click="(()=>NavBarClick(false))" />
-                                            <div class="chip-leading-icon"></div>
+                                    </button>
-                                            <div class="chip-label">@DateTimeFormatInfo.CurrentInfo.GetMonthName(i).Substring(0,3)</div>
+                                    <div class="text-semibold" @onclick=@(()=>Selecting = Selecting.Months)>@SelectedDate.ToString("yyyy")</div>
-                                            <div class="chip-cta-icon"></div>
+                                    <button class="btn btn-icon-alt ">
-                                        </div>
+                                        <Glyph SVG="@Icons.Material.Filled.KeyboardArrowRight" class="icon-root svg-icon icon-size-md" Click="(()=>NavBarClick())" />
-
+                                    </button>
-                                    </a>
+                                </div>
-                                
+                                <div class="picker-grid-col-3 gap-3">
-                                
+                                    @for (int i = SelectedDate.Year - 7; i < SelectedDate.Year + 8; i++)
-                                    if (i % 3 == 0)
                                     {
-                                        <br />
+                                        int y = i;
-                                    } *@
+                                        <button @onclick="@(()=>SetYear(y))" type="button" class="item @YearChipClass(y)">@i.ToString()</button>
-                                <button @onclick="@(()=>SetMonth(m))" type="button" class="item">@DateTimeFormatInfo.CurrentInfo.GetMonthName(i).Substring(0,3)</button>
+                                    }
-
+                                </div>
-                                }
+                                break;
-                             </div>
+                            }
-                            break;
+                        case Selecting.Months:
-                        }
+                            {
-                    case (Selecting.Days):
+                                <div class="picker-menu">
-                        {
+                                    <button class="btn btn-icon-alt ">
-                            <div class="picker-menu">
+                                        <Glyph SVG="@Icons.Material.Filled.KeyboardArrowLeft" class="icon-root svg-icon icon-size-md" Click="(()=>NavBarClick(false))" />
-                                <button class="btn btn-icon-alt "> 
+                                    </button>
-                                     <Glyph SVG="@Icons.Material.Filled.KeyboardArrowLeft" class="icon-root svg-icon icon-size-md" />
+                                    <div class="text-semibold" @onclick=@(()=>Selecting = Selecting.Years)>@SelectedDate.ToString("MMMM yyyy")</div>
-                                </button> 
+                                    <button class="btn btn-icon-alt ">
-                                <div class="text-semibold" @onclick=@(()=>Selecting = Selecting.Months)>@SelectedDate.ToString("MMMM yyyy")</div>
+                                        <Glyph SVG="@Icons.Material.Filled.KeyboardArrowRight" class="icon-root svg-icon icon-size-md" Click="(()=>NavBarClick())" />
-                                <button class="btn btn-icon-alt "> 
-                                     <Glyph SVG="@Icons.Material.Filled.KeyboardArrowRight" class="icon-root svg-icon icon-size-md" />
-                                </button> 
-                            </div>
-                            <div class="picker-grid-col-7 gap-3">
-                                @for (int i = 0; i < 7; i++)
-                            
-                                {
-                                
-                                    @* <div class="@DayNamesRowClass">@CalendarStart.AddDays(i).ToString("ddd").Substring(0,1)</div> *@
-                                    <div class="days">@CalendarStart.AddDays(i).ToString("ddd").Substring(0,1)</div>
-                                
-                                }
-                            
-                                @foreach (var Date in ShowingDates)
-                                {
-                                    <button class="item @DateChipStyle(Date)" @onclick="@(()=>SetDate(Date))">
-                                        @* <div class="chip-leading-icon d-inline-block p-1 m-1 @DateChipStyle(Date)" style="width:30px; height:30px; text-align:center">
-                                            @Date.Day.ToString()
-                                        </div> *@
-
-                                        
-                                            @Date.Day.ToString()
-                                        
                                     </button>
-                                    @if (CalendarStart.DayOfWeek.Equals(DayOfWeek.Sunday))
+                                </div>
+                                <div class="picker-grid-col-3 gap-3">
+                                    @for (int i = 1; i <= @DateTimeFormatInfo.CurrentInfo.MonthNames.Length - 1; i++)
                                     {
-                                        @* <br /> *@
+                                        int m = i;
+                                        <button @onclick="@(()=>SetMonth(m))" type="button" class="item @MonthChipClass(i)">@DateTimeFormatInfo.CurrentInfo.GetMonthName(i).Substring(0,3)</button>
                                     }
+                                </div>
+                                break;
+                            }
+                        case (Selecting.Days):
+                            {
+                                <div class="picker-menu">
+                                    <button class="btn btn-icon-alt ">
+                                        <Glyph SVG="@Icons.Material.Filled.KeyboardArrowLeft" class="icon-root svg-icon icon-size-md" Click="(()=>NavBarClick(false))" />
+                                    </button>
+                                    <div class="text-semibold" @onclick=@(()=>Selecting = Selecting.Months)>@SelectedDate.ToString("MMMM yyyy")</div>
+                                    <button class="btn btn-icon-alt ">
+                                        <Glyph SVG="@Icons.Material.Filled.KeyboardArrowRight" class="icon-root svg-icon icon-size-md" Click="(()=>NavBarClick())" />
+                                    </button>
+                                </div>
+                                <div class="picker-grid-col-7 gap-3">
+                                    @for (int i = 0; i < 7; i++)
 
-                                    CalendarStart = CalendarStart.AddDays(1);
+                                    {
-                                }
+                                        <div class="days">@CalendarStart.AddDays(i).ToString("ddd").Substring(0,1)</div>
-                            </div>
+                                    }
-                            break;
 
-                        }
+                                    @foreach (var Date in ShowingDates)
+                                    {
+                                        <button class="item @DateChipClass(Date)" @onclick="@(()=>SetDate(Date))">
+                                            @Date.Day.ToString()
+                                        </button>
+                                        CalendarStart = CalendarStart.AddDays(1);
+                                    }
+                                </div>
+                                break;
 
-                }
+                            }
-            </div>
+                    }
-            <!-- Bottom bar -->
+                </div>
+                <!-- Bottom bar -->
                 <div class="btn-content  justify-flex-end my-0">
-                    <button type="button" class="btn btn-sm btn-secondary">Cancel</button>
+                    <button type="button" class="btn btn-sm btn-secondary" @onclick="(()=>ClosePicker())">Cancel</button>
-                    <button type="button" class="btn btn-sm  btn-core">OK</button>
+                    <button type="button" class="btn btn-sm  btn-core" @onclick="(()=>ClosePicker(false))">OK</button>
+                </div>
+                <div>
                 </div>
-            <div>
-                
             </div>
-        </div>
         }
     </div>
 }

src/Connected.Components/Components/DatePicker.razor.cs

@@ -1,5 +1,4 @@
-using Connected.Utilities;
+using Microsoft.AspNetCore.Components;
-using Microsoft.AspNetCore.Components;
 
 namespace Connected.Components;
 public partial class DatePicker
@@ -18,6 +17,8 @@ public partial class DatePicker
 	[Parameter]
 	public DateTime SelectedDate { get; set;  } = DateTime.Today;
 
+	private DateTime _InitialDate {  get; set; }
+
 	[Parameter]
 	public DateTime? SelectedEndDate { get; set; } = null;
 
@@ -32,6 +33,9 @@ public partial class DatePicker
 	[Parameter]
 	public bool UseDateRange { get; set; } = false;
 
+	[Parameter]
+	public bool ShowBottomBar { get; set; } = false;
+
 	[Parameter]
 	public string Format { get; set; } = "dd.MM.yyyy";
 
@@ -78,48 +82,6 @@ public partial class DatePicker
 		StateHasChanged();
 	}
 
-	private string DayNamesRowClass
-	{
-		get
-		{
-			return new CssBuilder()
-				.AddClass("chip-leading-icon")
-				.AddClass("d-inline-block")
-				.AddClass("m-1")
-				.AddClass("bg-danger")
-				.AddClass("text-small")
-				.AddClass("text-white")
-				.Build();
-		}
-	}
-	private string ChipFirstRowStyle
-	{
-		get
-		{
-			return new StyleBuilder()
-				.AddStyle("width", "30px")
-				.AddStyle("height", "30px")
-				.AddStyle("text-align", "center")
-				.Build();
-		}
-	}
-	/*
-	 @for (int i=0;i<7; i++)
-            {
-                <div class="chip-leading-icon d-inline-block p-1 bg-danger text-small text-light" style="width:30px; height:30px; text-align:center">@calendarStart.AddDays(i).ToString("ddd").Substring(0,1)</div>
-            }
-            @while (calendarStart.CompareTo(calendarEnd) < 0)
-            {
-                <a href="#" @onclick="@(()=>SetDate(calendarStart))"><div class="chip-leading-icon d-inline-block p-1 @ChipStyle(calendarStart)" style="width:30px; height:30px; text-align:center">@calendarStart.Day.ToString()</div></a>
-                @if (calendarStart.DayOfWeek.Equals(DayOfWeek.Sunday))
-                {
-                    <br />
-                }
-                calendarStart = calendarStart.AddDays(1);
-            } 
-	 
-	 */
-
 	public void SetStartStop()
 	{
 		CalendarStart = SelectedDate;
@@ -150,7 +112,7 @@ public partial class DatePicker
 		}
 	}
 
-	public string DateChipStyle(DateTime date)
+	public string DateChipClass(DateTime date)
 	{
 		string result = "";
 		if (date.Month.CompareTo(SelectedDate.Month) < 0 || date.Month.CompareTo(SelectedDate.Month) > 0) return "d-none";
@@ -168,38 +130,66 @@ public partial class DatePicker
 	public string MonthChipClass(int month)
 	{
 		if (month.CompareTo(SelectedDate.Month) == 0)
-			return "bg-info text-light";
+			return "active";
 		else
-			return "bg-core text-dark";
+			return "";
 	}
 
 	public string YearChipClass(int year)
 	{
 		if (year.CompareTo(SelectedDate.Year) == 0)
-			return "bg-info text-light";
+			return "active";
 		else
-			return "bg-core text-dark";
+			return "";
 	}
 
 	protected override async Task OnInitializedAsync()
 	{
 		SelectedDate = DateTime.Today;
+		_InitialDate=SelectedDate;
 		SetStartStop();
 		loaded = true;
 		await base.OnInitializedAsync();
 	}
 
-	private string NavBarClass
+	private async Task ClosePicker(bool resetDate=true)
 	{
-		get
+		if (resetDate)
+			SelectedDate=_InitialDate;
+		Shown = false;
+		await SelectedDateChanged.InvokeAsync(SelectedDate);
+	}
+
+	private void TogglePicker()
+	{
+		_InitialDate=SelectedDate;
+		Shown = !Shown;
+	}
+
+	private async Task NavBarClick(bool forward = true)
+	{
+		int multiplier = 1;
+		if (!forward) multiplier = -1;
+		switch (Selecting)
 		{
-			return new CssBuilder("text-justify")
+			case Selecting.Years:
-				.AddClass("text-md-justify")
+				{
-				//.AddClass("bg-warning")
+					SelectedDate=SelectedDate.AddYears(8 * multiplier);
-				.AddClass("text-small")
+					break;
-				.AddClass("text-dark")
+				}
-				.Build();
+			case Selecting.Months:
+				{
+					SelectedDate = SelectedDate.AddYears(1 * multiplier);
+					break;
+				}
+			case Selecting.Days: 
+				{
+					SelectedDate = SelectedDate.AddMonths(1*multiplier);
+					break;
+				}
 		}
+		SetStartStop();
+		await InvokeAsync(StateHasChanged);
 	}
 
 }

src/Connected.Components/Components/FormWizard.razor

@@ -6,7 +6,7 @@
         </div>
 
         <div class="btn-box text-right my-5 d-flex justify-space-between">
-            <button type="button" href="#" class="btn btn-secondary" aria-pressed="true" disabled="@WizardFinished">Cancel</button>
+            <button type="button" href="#" class="btn btn-secondary" aria-pressed="true" disabled="@WizardFinished" @onclick="CancelClick">Cancel</button>
             <div>
                 <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="NextSlide" class="btn btn-core mr-2" aria-pressed="true" disabled="@WizardFinished">@NextBtnText<i class='bx bx-chevron-right'></i></button>

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

@@ -1,8 +1,7 @@
 using Connected.Enums;
 using Connected.Utilities;
 using Microsoft.AspNetCore.Components;
-using System.ComponentModel.DataAnnotations;
+using System.Reflection.Metadata;
-using System.Text;
 
 namespace Connected.Components;
 public partial class FormWizard
@@ -16,11 +15,26 @@ public partial class FormWizard
 	[Parameter]
 	public RenderFragment? ChildContent { get; set; }
 
+	/// <summary>
+	/// Steps of type FormWizardStep
+	/// </summary>
 	[Parameter]
 	public List<FormWizardStep> Steps { get; set; } = new();
 
-	[Parameter, EditorRequired]
+	/// <summary>
-	public string Id { get; set; }
+	/// EventCallback for 'Finish' button click
+	/// </summary>
+	[Parameter]
+	public EventCallback OnFinishedClick { get; set; }
+
+	/// <summary>
+	/// EventCallback for 'Cancel' button click
+	/// </summary>
+	[Parameter]
+	public EventCallback OnCancelClick { get; set; }
+
+	[Parameter]
+	public string Id { get; set; } = Guid.NewGuid().ToString();
 
 	private string NextBtnText = "Next";
 	private string PreviousBtnText = "Previous";
@@ -50,7 +64,7 @@ public partial class FormWizard
 	{
 		get
 		{
-			if (ActiveIndex>0)
+			if (ActiveIndex > 0)
 				return ActiveIndex - 1;
 			return ActiveIndex;
 		}
@@ -62,10 +76,11 @@ public partial class FormWizard
 		{
 			try
 			{
-				if (ActiveIndex < StepCount-1)
+				if (ActiveIndex < StepCount - 1)
 					return ActiveIndex + 1;
 				return ActiveIndex;
-			} catch
+			}
+			catch
 			{
 				return ActiveIndex;
 			}
@@ -80,38 +95,17 @@ public partial class FormWizard
 		}
 	}
 
-	private void NextSlide()
+	private async Task NextSlide()
 	{
 		if (NextBtnText.ToLower().Equals("finish"))
 		{
 			FinishedState = FinishedState.Finished;
 			Steps[ActiveIndex].Completed = true;
 			WizardFinished = true;
+			await OnFinishedClick.InvokeAsync();
 		}
 		if (FinishedState.Equals(FinishedState.Unfinished))
 		{
-			/*if (ActiveIndex < StepCount)
-			{
-				Steps[ActiveIndex].Completed = true;
-				ResetValuesForChild(ActiveIndex);
-				if (ActiveIndex < StepCount)
-					ResetValuesForChild(NextIndex);
-				if (ActiveIndex > 0)
-					ResetValuesForChild(PreviousIndex);
-
-				ActiveIndex = NextIndex;
-				Steps[ActiveIndex].Active = true;
-				Steps[PreviousIndex].IsPrevious = true;
-				if (ActiveIndex != NextIndex)
-					Steps[NextIndex].IsNext = true;
-				else Steps[NextIndex].IsNext = false;
-
-				if (ActiveIndex == NextIndex)
-					NextBtnText = "Finish";
-				else
-					NextBtnText = "Next";
-				StateHasChanged();
-			}*/
 			Steps[ActiveIndex].Completed = true;
 			Steps[ActiveIndex].Active = false;
 			Steps[PreviousIndex].IsPrevious = false;
@@ -132,7 +126,6 @@ public partial class FormWizard
 	{
 		if (ActiveIndex > 0)
 		{
-			//Steps[ActiveIndex].Completed = true;
 			Steps[ActiveIndex].Active = false;
 			Steps[PreviousIndex].IsPrevious = false;
 			Steps[ActiveIndex].IsNext = false;
@@ -146,13 +139,18 @@ public partial class FormWizard
 			else
 				NextBtnText = "Next";
 		}
-		if (ActiveIndex==0)
+		if (ActiveIndex == 0)
 		{
 			ResetAllChildren();
 			Steps[ActiveIndex].Active = true;
 		}
 	}
 
+	private async Task CancelClick()
+	{
+		await OnCancelClick.InvokeAsync();
+	}
+
 	[Parameter]
 	public string Class { get; set; } = string.Empty;
 
@@ -201,21 +199,22 @@ public partial class FormWizard
 		ResetAllChildren();
 		Steps[ActiveIndex].Active = true;
 
-		if (ActiveIndex!=0)
+		if (ActiveIndex != 0)
 		{
 			Steps[ActiveIndex].IsNext = true;
-			Steps[PreviousIndex].IsPrevious= true;
+			Steps[PreviousIndex].IsPrevious = true;
 		}
 		StateHasChanged();
 	}
 
-	protected override async Task OnParametersSetAsync()
+	/*protected override async Task OnParametersSetAsync()
 	{
-		if (Steps is not null)
+		if (Steps is null) Steps = new();
-		Steps.Clear();
+			Steps.Clear();
+		InitializeSteps();
 
 		await base.OnParametersSetAsync();
-	}
+	}*/
 
 	protected override async Task OnAfterRenderAsync(bool firstRender)
 	{

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

@@ -9,8 +9,11 @@ public partial class FormWizardStep
 	[CascadingParameter]
 	public FormWizard Parent { get; set; }
 
-	[Parameter, EditorRequired]
+	/// <summary>
-	public string Name { get; set; }
+	/// Unique name of the step (used for properly identifying steps)
+	/// </summary>
+	[Parameter]
+	public string? Id { get; set; } = Guid.NewGuid().ToString();
 
 	/// <summary>
 	/// Text shown inside the button
@@ -46,7 +49,7 @@ public partial class FormWizardStep
 		get
 		{
 			return new CssBuilder("dot")
-				.AddClass("completed",Completed)
+				.AddClass("completed", Completed)
 				.AddClass("next", Active)
 				.Build();
 		}
@@ -62,7 +65,7 @@ public partial class FormWizardStep
 		get
 		{
 			return new StyleBuilder()
-				.AddStyle("display","none", (!Active && !IsNext && !IsPrevious)) //Workarround for more than 2 steps where steps didnt hide after
+				.AddStyle("display", "none", (!Active && !IsNext && !IsPrevious)) //Workarround for more than 2 steps where steps didnt hide after
 				.AddStyle(Style)
 				.Build();
 		}
@@ -88,10 +91,17 @@ public partial class FormWizardStep
 
 	#region Lifecycle
 
+	private bool ItemExists()
+	{
+		if (Parent.Steps.Where(step => step.Id.Equals(this.Id)).Count() > 0) return true;
+		return false;
+	}
+
 
-	protected override async Task OnInitializedAsync()
+	protected override async Task OnParametersSetAsync()
 	{
-		Parent.Steps.Add(this);
+		if (!ItemExists())
+			Parent.Steps.Add(this);
 		await base.OnInitializedAsync();
 	}
 

src/Connected.Components/Components/Grid.razor

@@ -0,0 +1,5 @@
+<CascadingValue Value="this">
+    <div class="@GridClass">
+        @ChildContent
+    </div>
+</CascadingValue>

src/Connected.Components/Components/Grid.razor.cs

@@ -0,0 +1,41 @@
+using Connected.Utilities;
+using Microsoft.AspNetCore.Components;
+
+namespace Connected.Components;
+public partial class Grid: ComponentBase
+{
+	public List<GridRow> Rows { get; set; } = new();
+	
+	[Parameter]
+	public RenderFragment? ChildContent { get; set; }
+
+	[Parameter]
+	public bool Dense { get; set; } = true;
+
+	[Parameter]
+	public bool ContainsImage { get; set; } = true;
+
+	[Parameter]
+	public bool ShowSelect { get; set; } = true;
+
+	[Parameter]
+	public bool Collapsable { get; set; } = true;
+
+	[Parameter]
+	public string Class { get; set; } = string.Empty;
+
+	private string GridClass
+	{
+		get
+		{
+			return new CssBuilder("data-grid")
+				.AddClass("dense", Dense)
+				.AddClass("image", ContainsImage)
+				.AddClass("select", ShowSelect)
+				.AddClass("collapse", Collapsable)
+				.AddClass(Class)
+				.Build();
+		}
+	}
+
+}

src/Connected.Components/Components/GridRow.razor

@@ -0,0 +1,23 @@
+<CascadingValue Value="this">
+    <div class="@GridRowClass" id="@Guid.NewGuid()">
+        <div class="data-grid-select" >
+            <label class="toggle-group m-0" for="@SwitchButtonId">
+                <input class="toggle-input" id="@SwitchButtonId" name="toggle" type="checkbox" @onchange="(args=>SwitchButtonChange(args))">
+                <div class="toggle-fill"></div>
+            </label>
+        </div>
+
+        <div class="data-grid-img">
+            <img class="img-fluid" src="https://source.unsplash.com/random?face" />
+        </div>
+
+        <!-- Row content -->
+        <div class="data-grid-container">
+            @ChildContent
+        </div>
+
+        <div class="data-grid-collapse-cta" @onclick="ToggleNav">
+            <Glyph SVG="@Icons.Material.Filled.KeyboardArrowDown" class="icon-root svg-icon icon-size-md" />
+        </div>
+    </div>
+</CascadingValue>

src/Connected.Components/Components/GridRow.razor.cs

@@ -0,0 +1,58 @@
+using Connected.Utilities;
+using Microsoft.AspNetCore.Components;
+
+namespace Connected.Components;
+public partial class GridRow : ComponentBase
+{
+
+	[CascadingParameter]
+	public Grid Parent { get; set; }
+
+	public List<GridRowContent> Children { get; set; }
+
+	[Parameter]
+	public RenderFragment? ChildContent { get; set; }
+
+	[Parameter]
+	public bool CollapsedItemShown { get; set; } = false;
+
+	private void ToggleNav()
+	{
+		CollapsedItemShown = !CollapsedItemShown;
+	}
+
+	[Parameter]
+	public string Class { get; set; } = string.Empty;
+
+	[Parameter]
+	public GridRowTemplate? Template { get; set; } = null;
+
+	private string GridRowClass
+	{
+		get
+		{
+			return new CssBuilder("data-grid-row-content")
+				.AddClass("show",CollapsedItemShown)
+				.AddClass(Class)
+				.Build();
+		}
+	}
+
+	[Parameter]
+	public EventCallback<ChangeEventArgs> SwitchButtonChangeEvent { get; set; }
+
+	private async Task SwitchButtonChange(ChangeEventArgs args)
+	{
+		await SwitchButtonChangeEvent.InvokeAsync(args);
+	}
+
+	private string SwitchButtonId = Guid.NewGuid().ToString();
+
+	protected override async Task OnInitializedAsync()
+	{
+		if (Parent.Rows is null) Parent.Rows = new();
+		Parent.Rows.Add(this);
+		await base.OnInitializedAsync();
+	}
+
+}

src/Connected.Components/Components/GridRowContent.razor

@@ -0,0 +1,3 @@
+<div class="@GeneratedRowContentClass">
+    @ChildContent
+</div>

src/Connected.Components/Components/GridRowContent.razor.cs

@@ -0,0 +1,53 @@
+using Connected.Utilities;
+using Microsoft.AspNetCore.Components;
+
+namespace Connected.Components;
+public partial class GridRowContent : ComponentBase
+{
+	[CascadingParameter]
+	public GridRow? Parent { get; set; }
+
+	/// <summary>
+	/// Text shown inside the button
+	/// Options: any string variable
+	/// Default: string.Empty
+	/// </summary>
+	[Parameter]
+	public RenderFragment? ChildContent { get; set; }
+
+	/// <summary>
+	/// Disabled or enabled.
+	/// Default: false
+	/// </summary>
+	[Parameter]
+	public bool Collapsable { get; set; } = false;
+
+	private string GeneratedRowContentClass
+	{
+		get
+		{
+			CssBuilder cssBuilder = new CssBuilder("row");
+
+			cssBuilder.AddClass("collapsed", Collapsable);
+
+			if (Parent is not null)
+			{
+				cssBuilder.AddClass("show", (Collapsable ? Parent.CollapsedItemShown : false));
+			}
+
+			return cssBuilder.Build();
+		}
+	}
+
+	protected override async Task OnInitializedAsync()
+	{
+
+		if (Parent is not null)
+		{
+			if (Parent.Children is null) Parent.Children = new();
+			Parent.Children.Add(this);
+		}
+		await base.OnInitializedAsync();
+	}
+}
+

src/Connected.Components/Connected.Components.csproj

@@ -68,7 +68,7 @@
 		<Error Condition="!Exists('$(MSBuildProjectDirectory)/wwwroot/Fonts/')" Text="Missing Fonts folder in wwwroot" />
 		<ItemGroup>
 			<!--Include without duplication-->
-			<_OpenSansFont Include="wwwroot\Fonts\OpenSans-*.ttf" Exclude="@(Content)" />
+			<_OpenSansFont Include="wwwroot\Fonts\OpenSans-*.woff2" Exclude="@(Content)" />
 			<Content Include="@(_OpenSansFont)" />
 		</ItemGroup>
 	</Target>

src/Connected.Components/Enums/Color.cs

@@ -5,7 +5,7 @@ namespace Connected;
 public enum Color
 {
 	[Description("core")]
-   Core,
+	Core,
 
 	[Description("primary")]
 	Primary,

src/Connected.Components/Enums/ThemeProvider.cs

@@ -0,0 +1,23 @@
+using System.ComponentModel;
+
+namespace Connected;
+
+public enum Theme
+{
+	[Description("")]
+	Default,
+
+	[Description("dark")]
+   Dark,
+
+	[Description("light")]
+	Light,
+
+	[Description("pink")]
+	Pink
+}
+
+public static class ThemeProvider
+{
+	public static Theme theme { get; set; } = Theme.Default;
+}

src/Connected.Components/Utilities/GridRowTemplate.cs

@@ -0,0 +1,5 @@
+namespace Connected.Utilities;
+public class GridRowTemplate
+{
+	public Position ImagePosition { get; set; } = Position.Left;
+}

src/connected.components/Models/Alert/AlertOptions.cs

@@ -0,0 +1,21 @@
+namespace Connected.Models.Alert;
+public class AlertOptions
+{
+	Severity Severity { get; set; } = Severity.Info;
+	public bool ShowHeader { get; set; } = true;
+	public bool Cancelable { get; set; } = true;
+
+	public AlertOptions()
+	{
+		Severity = Severity.Info;
+		ShowHeader = true;
+		Cancelable = true;
+	}
+
+	public AlertOptions(Severity severity, bool showHeader, bool cancelable)
+	{
+		Severity = severity;
+		ShowHeader = showHeader;
+		Cancelable = cancelable;
+	}
+}