Grid, GridRow, GridRowContent

.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/Pages/Democomp.razor

@@ -906,12 +906,12 @@
             <!-- 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>
 
             <!-- Modal -->
-            <div class="modal fade @NavClosed" tabindex="-1"> 
+            <div class="modal fade @ModalShown" tabindex="-1"> 
             <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered">
                 <div class="modal-content">
                 <div class="modal-header">
@@ -922,7 +922,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>
@@ -1119,6 +1119,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/Program.cs

@@ -1,20 +0,0 @@
-using Connected.Components.Showcase.Runner;
-using Microsoft.AspNetCore.Components.Web;
-using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
-using Connected.Services;
-
-internal class Program
-{
-	private static async global::System.Threading.Tasks.Task Main(string[] args)
-	{
-		var builder = WebAssemblyHostBuilder.CreateDefault(args);
-		builder.RootComponents.Add<App>("#app");
-		builder.RootComponents.Add<HeadOutlet>("head::after");
-
-		builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
-
-		builder.Services.AddModalDialogService();
-
-		await builder.Build().RunAsync();
-	}
-}

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">
+        <div class="data-grid-select">
+            <label class="toggle-group m-0" for="toggle-s11">
+                <input class="toggle-input" id="toggle-s11" name="toggle" type="checkbox">
+                <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,48 @@
+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();
+		}
+	}
+
+	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,46 @@
+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
+		{
+			return new CssBuilder("row")
+				.AddClass("collapsed", Collapsable)
+				.AddClass("show", (Collapsable ? Parent?.CollapsedItemShown : false))
+				.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/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;
+	}
+}