ToggleGlyphButton

src/Connected.Components/Components/ToggleGlyphButton.razor

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

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

@@ -0,0 +1,120 @@
+using Connected.Utilities;
+using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Web;
+
+namespace Connected.Components;
+public partial class ToggleGlyphButton: Button
+{
+	#region Parameters
+
+	/// <summary>
+	/// Outline type of the button.
+	/// Options: true, false
+	/// Default: false
+	/// </summary>
+	[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 .
+	/// Options: SVG string --> Icons
+	/// Default: string.Empty
+	/// </summary>
+	[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;
+
+	/// <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;
+
+	#endregion
+
+	#region Events
+
+	/// <summary>
+	/// Button click event.
+	/// Options: any MouseEventCallback event
+	/// Default: empty
+	[Parameter]
+	public EventCallback<bool> ToggledChanged { get; set; }
+
+	protected async Task Clicked(MouseEventArgs e)
+	{
+		Toggled = !Toggled;
+		await ToggledChanged.InvokeAsync(Toggled);
+	}
+	#endregion
+
+	#region Styling
+
+	public string StyleList
+	{
+		get
+		{
+			return new StyleBuilder()
+				.AddStyle(base.Style)
+				.Build();
+		}
+	}
+
+
+	/// <summary>
+	/// Generated class list for button based on user parameters
+	/// </summary>
+	public string ClassList
+	{
+		get
+		{
+			return new CssBuilder("btn")
+				.AddClass("btn-" + Helper.GetEnumDescription<Size>(base.Size))
+				.AddClass("btn-" + Helper.GetEnumDescription<Color>(base.Color),!base.Outlined)
+				.AddClass("btn-outline-" + Helper.GetEnumDescription<Color>(base.Color), base.Outlined)
+				.AddClass(base.Class)
+				.Build();
+		}
+	}
+
+	/// <summary>
+	/// Generated class list for button based on user parameters
+	/// </summary>
+	public string ContentClassList
+	{
+		get
+		{
+			return new CssBuilder("")
+				.AddClass(base.ContentClass)
+				.Build();
+		}
+	}
+
+	#endregion
+
+}