Separating Button and GlyphButton

src/Connected.Components/Components/Button.razor

@@ -1,44 +1,9 @@
-<button 
+<button type="button"
-    type="button"
-    href="#"
         @onclick="@OnClick"
         disabled=@Disabled
-    style="@Style"
+        style="@StyleList"
         class="@ClassList">
     <div class="@ContentClassList">
-        @if (!string.IsNullOrEmpty(Glyph))
-        {
-            @if (GlyphPosition == Position.Top || GlyphPosition == Position.Bottom)
-            {
-                <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>
-            }
-            @if (GlyphPosition == Position.Left || GlyphPosition == Position.Right)
-            {
-                <div style="display:flex; align-items:center">
-                    @if (GlyphPosition == Position.Left)
-                    {
-                        <Glyph SVG="@Glyph" Color="@GlyphColor" Class="m-1" />
-                    }
-                    @ChildContent
-                    @if (GlyphPosition == Position.Right)
-                    {
-                        <Glyph SVG="@Glyph" Color="@GlyphColor" Class="m-1" />
-                    }
-                </div>
-            }
-        } else
-        {
-            @ChildContent
-        }
     </div>
 </button>

src/Connected.Components/Components/Button.razor.cs

@@ -1,8 +1,6 @@
 using Connected.Utilities;
 using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Web;
-using static Connected.Colors;
-using System;
 
 namespace Connected.Components;
 public partial class Button
@@ -28,10 +26,10 @@ public partial class Button
 	/// <summary>
 	/// Size of the button.
 	/// Options: Size.[Small,Medium,Large,FullWidth]
-	/// Default: Size.Large
+	/// Default: Size.Medium
 	/// </summary>
 	[Parameter]
-	public Size Size { get; set; } = Size.Large;
+	public Size Size { get; set; } = Size.Medium;
 
 	/// <summary>
 	/// Text shown inside the button
@@ -48,29 +46,6 @@ public partial class Button
 	[Parameter]
 	public bool Disabled { get; set; } = false;
 
-	/// <summary>
-	/// Glyph (Icon) inside the button.
-	/// Options: SVG string --> Icons
-	/// Default: string.Empty
-	/// </summary>
-	[Parameter]
-	public string Glyph { 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>
-	/// HEX string of the color for the glyph. If Glyph parameter is empty this parameter is ignored
-	/// Options: any HEX color string
-	/// Default: Black (#000000)
-	/// </summary>
-	[Parameter]
-	public string GlyphColor { get; set; } = "#000000";
 
 	/// <summary>
 	/// User defined custom class added on top of default generated classes
@@ -90,7 +65,7 @@ public partial class Button
 
 	/// <summary>
 	/// User defined custom style
-	/// Options: any user defined string with valid CSS style
+	/// Options: any valid CSS style
 	/// Default: string.Empty
 	/// </summary>
 	[Parameter]
@@ -115,10 +90,21 @@ public partial class Button
 
 	#region Styling
 
+	public string StyleList
+	{
+		get
+		{
+			return new StyleBuilder()
+				.AddStyle(Style)
+				.Build();
+		}
+	}
+
+
 	/// <summary>
 	/// Generated class list for button based on user parameters
 	/// </summary>
-	private string ClassList
+	public string ClassList
 	{
 		get
 		{
@@ -134,7 +120,7 @@ public partial class Button
 	/// <summary>
 	/// Generated class list for button based on user parameters
 	/// </summary>
-	private string ContentClassList
+	public string ContentClassList
 	{
 		get
 		{

src/Connected.Components/Components/CheckBox.razor

@@ -2,10 +2,22 @@
 
 @inherits InputBase;
 
-<label class="checkbox-group" for="@Id">
+<label class="checkbox-group"
-    <input class="checkbox-input" id="@Id" type="checkbox" @attributes=@InputAttributes checked="@Checked" disabled="@Disabled">
+       for="@Id">
+    <input class="@ClassList"
+           style="@StyleList"
+           id="@Id"
+           type="checkbox"
+           @attributes=@InputAttributes
+           checked="@Checked"
+           readonly="@Readonly"
+           disabled="@Disabled">
     <div class="checkbox-fill"></div>
-    <label for="@Id" class="checkbox-label">@Label</label>
+    <label for="@Id"
+           class="@LabelClassList"
+           style="@LabelStyleList">
+        @Label
+    </label>
 </label>
 
 

src/Connected.Components/Components/CheckBox.razor.cs

@@ -1,22 +1,100 @@
 using Connected.Models;
+using Connected.Utilities;
 using Microsoft.AspNetCore.Components;
 
 namespace Connected.Components;
 public partial class CheckBox : InputBase
 {
+	/// <summary>
+	/// State of the CheckBox
+	/// Options: true, false
+	/// Default: false
+	/// </summary>
 	[Parameter]
-	public bool Checked { get; set; }
+	public bool Checked { get; set; } = false;
 
+
+	/// <summary>
+	/// ID for the CheckBox
+	/// </summary>
 	[Parameter, EditorRequired]
 	public string? Id { get; set; }
 
+	/// <summary>
+	/// Event when the checked is changed
+	/// </summary>
 	[Parameter]
 	public EventCallback<bool> CheckedChanged { get; set; }
 
+	/// <summary>
+	/// OPTIONAL - Style for the input
+	/// Options: any valid CSS style
+	/// Default: string.Empty
+	/// </summary>
+	[Parameter]
+	public string Style { get; set; } = string.Empty;
+
+	/// <summary>
+	/// OPTIONAL - Class for the label of input
+	/// Options: any valid Class name or multiple separated with space
+	/// Default: string.Empty
+	/// </summary>
+	[Parameter]
+	public string LabelClass { get; set; } = string.Empty;
+
+	/// <summary>
+	/// OPTIONAL - Style for the label of input
+	/// Options: any valid CSS style
+	/// Default: string.Empty
+	/// </summary>
+	[Parameter]
+	public string LabelStyle { get; set; } = string.Empty;
+
+	/// <summary>
+	/// OnChange event when checked is changed
+	/// </summary>
+	/// <returns></returns>
 	public async Task OnChange()
 	{
 		Checked = !Checked;
-
 		await CheckedChanged.InvokeAsync(Checked);
 	}
+
+	private string ClassList
+	{
+		get
+		{
+			return new CssBuilder("checkbox-input")
+				.AddClass(base.Class)
+				.Build();
+		}
+	}
+	private string StyleList
+	{
+		get
+		{
+			return new StyleBuilder()
+				.AddStyle(Style)
+				.Build();
+		}
+	}
+
+	private string LabelClassList
+	{
+		get
+		{
+			return new CssBuilder("checkbox-label")
+				.AddClass(LabelClass)
+				.Build();
+		}
+	}
+	private string LabelStyleList
+	{
+		get
+		{
+			return new StyleBuilder()
+				.AddStyle(LabelStyle)
+				.Build();
+		}
+	}
 }

src/Connected.Components/Components/Glyph.razor

@@ -1,6 +1,6 @@
 
-<div style="width:@WidthString; height:@HeightString; overflow:hidden">
+<div style="@GlyphStyleList">
-<svg viewBox="0 0 24 24" style="fill:@Color;" class="@GlyphClassList" @onclick="@OnClick">
+<svg viewBox="0 0 24 24" class="@GlyphClassList" @onclick="@OnClick">
     @((MarkupString)SVG)
 </svg>
 </div>

src/Connected.Components/Components/Glyph.razor.cs

@@ -2,37 +2,47 @@
 using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Web;
 
-namespace Connected.Components
+namespace Connected.Components;
-{
+
 public partial class Glyph
 {
+	/// <summary>
+	/// SVG markup string for glyph
+	/// Options: any valid SVG markup string
+	/// Default: string.Empty
+	/// </summary>
 	[Parameter]
 	public string SVG { get; set; } = string.Empty;
 
+	/// <summary>
+	/// Color of the glyph
+	/// Options: Color.[Core,Primary,Secondary,Success,Info,Warning,Danger,White,Light,Dark]
+	/// Default: Color.Dark
+	/// </summary>
 	[Parameter]
-		public string Color { get; set; } = "#000000";
+	public Color Color { get; set; } = Color.Dark;
 
+	/// <summary>
+	/// Width of the glyph in px
+	/// Options: Any positive integer number
+	/// Default: 24
+	/// </summary>
 	[Parameter]
 	public int Width { get; set; } = 24;
+
+	/// <summary>
+	/// Height of the glyph in px
+	/// Options: Any positive integer number
+	/// Default: 24
+	/// </summary>
 	[Parameter]
 	public int Height { get; set; } = 24;
 
-		private string WidthString
+	/// <summary>
-		{
+	/// Class name or multiple classes separated by space
-			get
+	/// Options: Any valid class name or names separated by space
-			{
+	/// Default: string.Empty
-				return Width.ToString() + "px";
+	/// </summary>
-			}
-		}
-
-		private string HeightString
-		{
-			get
-			{
-				return Width.ToString() + "px";
-			}
-		}
-
 	[Parameter]
 	public string Class { get; set; } = string.Empty;
 
@@ -41,11 +51,31 @@ namespace Connected.Components
 		get
 		{
 			return new CssBuilder()
+				.AddClass("color-"+Helper.GetEnumDescription<Color>(Color))
 				 .AddClass(Class)
 				 .Build();
 		}
 	}
 
+	/// <summary>
+	/// User defined style for the glyph
+	/// Options: Any valid CSS style
+	/// Default: string.Empty
+	/// </summary>
+	[Parameter]
+	public string Style { get; set; } = string.Empty;
+
+	private string GlyphStyleList
+	{
+		get
+		{
+			return new StyleBuilder()
+				.AddStyle("width: "+Width.ToString()+"px; height:"+Height.ToString()+"px; overflow: hidden")
+				 .AddStyle(Style)
+				 .Build();
+		}
+	}
+
 	[Parameter]
 	/// <summary>
 	/// Glyph click event.
@@ -56,4 +86,3 @@ namespace Connected.Components
 		await Click.InvokeAsync(e);
 	}
 }
-}

src/Connected.Components/Components/GlyphButton.razor

@@ -0,0 +1,46 @@
+@inherits Button
+
+<button type="button"
+        href="#"
+        @onclick="@OnClick"
+        disabled=@Disabled
+        style="@StyleList"
+        class="@ClassList">
+    <div class="@ContentClassList">
+        @if (!string.IsNullOrEmpty(Glyph))
+        {
+            @if (GlyphPosition == Position.Top || GlyphPosition == Position.Bottom)
+            {
+                <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>
+            }
+            @if (GlyphPosition == Position.Left || GlyphPosition == Position.Right)
+            {
+                <div style="display:flex; align-items:center">
+                    @if (GlyphPosition == Position.Left)
+                    {
+                        <Glyph SVG="@Glyph" Color="@GlyphColor" Class="m-1" />
+                    }
+                    @ChildContent
+                    @if (GlyphPosition == Position.Right)
+                    {
+                        <Glyph SVG="@Glyph" Color="@GlyphColor" Class="m-1" />
+                    }
+                </div>
+            }
+        }
+        else
+        {
+            @ChildContent
+        }
+    </div>
+</button>

src/Connected.Components/Components/GlyphButton.razor.cs

@@ -0,0 +1,34 @@
+using Microsoft.AspNetCore.Components;
+
+namespace Connected.Components;
+public partial class GlyphButton : Button
+{
+	#region Parameters
+
+	/// <summary>
+	/// Glyph (Icon) inside the button.
+	/// Options: SVG string --> Icons
+	/// Default: string.Empty
+	/// </summary>
+	[Parameter, EditorRequired]
+	public string Glyph { 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;
+
+	#endregion
+
+}

src/Connected.Components/Components/Link.razor

@@ -1,7 +1,6 @@
-<a 
+<a class="@LinkClassList"
-    class="@LinkClassList"
    style="@LinkStyleList"
    href="@Url"
-    target="@Target" >
+   target="@_target">
     @Text
 </a>

src/Connected.Components/Components/Link.razor.cs

@@ -1,18 +1,47 @@
-using Connected.Utilities;
+using Connected.Enums;
+using Connected.Utilities;
 using Microsoft.AspNetCore.Components;
 
 namespace Connected.Components;
 public partial class Link
 {
+	/// <summary>
+	/// URL of the link
+	/// Options: Any valid web page adress
+	/// Default: string.Empty
+	/// </summary>
 	[Parameter, EditorRequired]
 	public string Url { get; set; } = string.Empty;
 
-	[Parameter, EditorRequired]
+	/// <summary>
+	/// Text shown for the link. If this is not provided URL is used
+	/// Options: Any valid string
+	/// Default: string.Empty
+	/// </summary>
+	[Parameter]
 	public string Text { get; set; } = string.Empty;
 
-	[Parameter, EditorRequired]
+	/// <summary>
-	public string Target { get; set; } = "_self";
+	/// Target where the link shall open
+	/// Options: Target.[Self,Parent,Top,Blank]
+	/// Default: Target.Self
+	/// </summary>
+	[Parameter]
+	public Target Target { get; set; } = Target.Self;
 
+	private string _target
+	{
+		get
+		{
+			return Helper.GetEnumDescription<Target>(Target);
+		}
+	}
+
+	/// <summary>
+	/// Class name or multiple classes separated by space
+	/// Options: Any valid class name or names separated by space
+	/// Default: string.Empty
+	/// </summary>
 	[Parameter]
 	public string Class { get; set; } = string.Empty;
 
@@ -26,6 +55,11 @@ public partial class Link
 		}
 	}
 
+	/// <summary>
+	/// Style string for the link
+	/// Options: Any valid CSS style
+	/// Default: string.Empty
+	/// </summary>
 	[Parameter]
 	public string Style { get; set; } = string.Empty;
 
@@ -39,12 +73,13 @@ public partial class Link
 		}
 	}
 
-	protected override async Task OnParametersSetAsync()
+	protected override async Task OnInitializedAsync()
 	{
+		//if Text parameter is not provided we set it to match URL
 		if (string.IsNullOrEmpty(Text))
 			Text = Url;
 
-		await base.OnParametersSetAsync();
+		await base.OnInitializedAsync();
 	}
 }
 

src/Connected.Components/Components/MultilineInput.razor

@@ -0,0 +1,45 @@
+@using Connected.Models;
+
+@inherits InputBase;
+
+<div class="@InputFieldClassList">
+    <textarea value="@Value"
+              placeholder="@Placeholder"
+              disabled="@Disabled"
+              readonly="@Readonly"
+              required="@Required"
+              style="overflow-x: hidden; overflow-y: hidden;"
+              @oninput=@ChangeValueAsync
+              @attributes="@InputAttributes" />
+
+    <span class="highlight"></span>
+    <span class="bar"></span>
+    @if (IsLabel)
+    {
+        <label class="label-animated">@Label</label>
+    }
+    @if (IsHelperText && !IsError)
+    {
+        <div class="input-helper-text">@HelperText</div>
+    }
+    @if (IsError)
+    {
+        <div class="input-error-text">@ErrorText</div>
+    }
+    <span class="input-glyph-wraper">
+        <span class="input-glyph">
+            @if (Clearable && !string.IsNullOrEmpty(Value))
+            {
+                <span class="input-glyph button" @onclick="Clear">
+                    <Glyph SVG="@Icons.Material.Rounded.Dangerous" />
+                </span>
+            }
+            @if (IsError)
+            {
+                <span class="input-glyph error">
+                    <Glyph SVG="@Icons.Material.Outlined.Error" />
+                </span>
+            }
+        </span>
+    </span>
+</div>

src/Connected.Components/Components/MultilineInput.razor.cs

@@ -0,0 +1,119 @@
+using Connected.Models;
+using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Web;
+using System.ComponentModel.DataAnnotations;
+using System.Security.Cryptography;
+
+namespace Connected.Components;
+public partial class MultilineInput : InputBase
+{
+	#region Parameters
+
+	private int MinRows { get; set; } = 1;
+
+	/// <summary>
+	/// Number of rows
+	/// </summary>
+	[Parameter]
+	public int Rows
+	{
+		get
+		{
+			return _numRows;
+		}
+		set
+		{
+			if (value >= MinRows) _numRows= value;
+			else _numRows = MinRows;
+		}
+	}
+
+	private int _numRows = 1;
+
+	/// <summary>
+	/// Value of the TextInput. Used for @bind-Value
+	/// </summary>
+	[Parameter]
+	public string Value { get; set; } = string.Empty;
+
+	#endregion
+
+	#region Events, Methods
+
+	/// <summary>
+	/// Event triggered when value changes
+	/// </summary>
+	[Parameter]
+	public EventCallback<string> ValueChanged { get; set; }
+
+	/// <summary>
+	/// Method that triggers oninput -> when value inside the component changes
+	/// </summary>
+	/// <param name="args"></param>
+	/// <returns></returns>
+	private async Task ChangeValueAsync(ChangeEventArgs args)
+	{
+		int oldRows = Rows;
+		await ValueChanged.InvokeAsync(args?.Value?.ToString());
+
+		int newRows = GetNumberOfLines(args.Value.ToString());
+
+		if (newRows == MinRows)
+		{
+			Rows = MinRows;
+			ChangeAttribute("rows", Rows);
+			StateHasChanged();
+		}
+		else
+		{
+			Rows = Math.Max(MinRows, newRows);
+			if (oldRows < Rows)
+			{
+				ChangeAttribute("rows", Rows);
+				StateHasChanged();
+			}
+		}
+	}
+
+	private int GetNumberOfLines(string s)
+	{
+		int result = Math.Max(s.Split("\r\n").Length, 1);
+		result = Math.Max(s.Split("\r").Length, result);
+		result = Math.Max(s.Split("\n").Length, result);
+		return result;
+	}
+
+	/// <summary>
+	/// Clear the value of the TextInput
+	/// </summary>
+	/// <returns></returns>
+	private async Task Clear()
+	{
+		await ValueChanged.InvokeAsync(string.Empty);
+	}
+
+	#endregion
+
+	#region Lifecycle
+
+	private void AddAttribute(string key, object value)
+	{
+		if (!InputAttributes.ContainsKey(key))
+			InputAttributes.Add(key, value);
+	}
+
+	private void ChangeAttribute(string key, object value)
+	{
+		if (InputAttributes.ContainsKey(key)) InputAttributes.Remove(key);
+		InputAttributes.Add(key, value);
+	}
+
+	protected override void OnInitialized()
+	{
+		base.OnInitialized();
+		MinRows = Rows;
+		AddAttribute("rows", MinRows);
+	}
+
+	#endregion
+}

src/Connected.Components/Components/NumberInput.razor

@@ -7,13 +7,14 @@
 <div class="@InputFieldClassList">
     <input type="text"
            placeholder="@Placeholder"
-           step="@_step"
+           step="@Step"
            disabled="@Disabled"
            readonly="@Readonly"
+           required="@Required"
            value="@_value"
            @onkeydown=@(args => ChangeValue(args))
            @onkeydown:preventDefault="@_preventDefaultAction"
-           @oninput=@GetValueAsync
+           @oninput=@SetValueAsync
            @onmousewheel=@OnMouseWheel
            @onchange="@Change"
            @onwheel="OnMouseWheel"
@@ -39,18 +40,16 @@
                 <Glyph Width=16 Height=16 SVG="@Icons.Material.Outlined.KeyboardArrowUp" Click="StepUp" />
                 <Glyph Width=16 Height=16 SVG="@Icons.Material.Outlined.KeyboardArrowDown" Click="StepDown"></Glyph>
             </span>
-            @if (Clearable && Value.ToString().Length > 0)
+            @if (Clearable && !string.IsNullOrEmpty(Value?.ToString()))
             {
                 <span class="input-glyph button" @onclick="Clear">
                     <Glyph SVG="@Icons.Material.Rounded.Dangerous" />
-                    <!--<i class='bx bx-x-circle'></i>-->
                 </span>
             }
             @if (IsError)
             {
                 <span class="input-glyph error">
-                    <Glyph SVG="@Icons.Material.Outlined.Error" Color="#D10000" />
+                    <Glyph SVG="@Icons.Material.Outlined.Error" />
-                    <!--<i class='bx bx-error-circle'></i>-->
                 </span>
             }
         </span>

src/Connected.Components/Components/NumberInput.razor.cs

@@ -7,24 +7,38 @@ using System.Numerics;
 namespace Connected.Components;
 public partial class NumberInput<NumberType> : InputBase where NumberType : INumber<NumberType>
 {
+	/// <summary>
+	/// Step for up and down on numeric field
+	/// Options: Any double number
+	/// Default: 1
+	/// </summary>
 	[Parameter]
 	public double Step { get; set; } = 1;
 
+	/// <summary>
+	/// Mouse wheel disable to prevent StepUp/StepDown on number filed
+	/// Options: true, false
+	/// Default: false
+	/// </summary>
 	[Parameter]
 	public bool DisableMouseWheel { get; set; } = false;
 
+	/// <summary>
+	/// Increase 'Value' for the 'Step'
+	/// </summary>
+	/// <returns>'Value' increased for the 'Step' parameter</returns>
 	private async Task StepUp()
 	{
 		try
 		{
-			var num = (double)Convert.ChangeType(Value, typeof(double));
+			var num = Helper.ConvertToType<double>(Value);
 
 			num += Step;
 
 			if (DecimalPlaces > 0)
 				num = Math.Round(num, DecimalPlaces);
+			Value = Helper.ConvertToType<NumberType>(num);
 			
-			Value = (NumberType)Convert.ChangeType(num, typeof(NumberType));
 
 			if (IsError)
 				ErrorText = string.Empty;
@@ -38,18 +52,22 @@ public partial class NumberInput<NumberType> : InputBase where NumberType : INum
 		await ValueChanged.InvokeAsync(Value);
 	}
 
+	/// <summary>
+	/// Decrease 'Value' for the 'Step'
+	/// </summary>
+	/// <returns>'Value' decreased for the 'Step' parameter</returns>
 	private async Task StepDown()
 	{
 		try
 		{
-			var num = (double)Convert.ChangeType(Value, typeof(double));
+			var num = Helper.ConvertToType<double>(Value);
 
 			num -= Step;
 
 			if (DecimalPlaces > 0)
 				num = Math.Round(num, DecimalPlaces);
 
-			Value = (NumberType)Convert.ChangeType(num, typeof(NumberType));
+			Value = Helper.ConvertToType<NumberType>(num);
 
 			if (IsError)
 				ErrorText = string.Empty;
@@ -62,6 +80,12 @@ public partial class NumberInput<NumberType> : InputBase where NumberType : INum
 
 		await ValueChanged.InvokeAsync(Value);
 	}
+
+	/// <summary>
+	/// Event triggered when mouse wheel is activated inside component
+	/// </summary>
+	/// <param name="args">WheelEventArgs argument</param>
+	/// <returns>Doesnt return values just increasing/decreasing values</returns>
 	protected async Task OnMouseWheel(WheelEventArgs args)
 	{
 		if (DisableMouseWheel)
@@ -82,15 +106,30 @@ public partial class NumberInput<NumberType> : InputBase where NumberType : INum
 
 	private string? _value;
 
+
+	/// <summary>
+	/// Value of any numeric type
+	/// Options: any numeric type variable
+	/// Default: null
+	/// </summary>
 	[Parameter]
+	[EditorRequired]
 	public NumberType? Value
 	{
 		get
 		{
 			if (string.IsNullOrEmpty(_value))
 				return default;
-
+			else
-			return (NumberType)Convert.ChangeType(_value, typeof(NumberType));
+			{
+				try
+				{
+					return Helper.ConvertToType<NumberType>(_value);
+				} catch
+				{
+					return default;
+				}
+			}
 		}
 		set
 		{
@@ -98,13 +137,22 @@ public partial class NumberInput<NumberType> : InputBase where NumberType : INum
 		}
 	}
 
+	/// <summary>
+	/// Number of decimal places for Value. If set, Value is corrected when input looses focus
+	/// Options: any integer number greater or equal 0
+	/// Default: 0
+	/// </summary>
 	[Parameter]
 	public int DecimalPlaces { get; set; } = 0;
 
+
+	/// <summary>
+	/// Value change event
+	/// </summary>
 	[Parameter]
 	public EventCallback<NumberType> ValueChanged { get; set; }
 
-	public async Task GetValueAsync(ChangeEventArgs args)
+	public async Task SetValueAsync(ChangeEventArgs args)
 	{
 		if (args.Value is not null)
 		{
@@ -123,18 +171,21 @@ public partial class NumberInput<NumberType> : InputBase where NumberType : INum
 				await ValueChanged.InvokeAsync(default);
 
 			if (!newVal.Equals(_value))
-				await ValueChanged.InvokeAsync((NumberType)Convert.ChangeType(newVal, typeof(NumberType)));
+				await ValueChanged.InvokeAsync(Helper.ConvertToType<NumberType>(newVal));
 		}
 	}
 
 	public async Task Change(ChangeEventArgs args)
 	{
 		if (args.Value is not null)
-			Value = AdjustDecimalPlaces((NumberType)Convert.ChangeType(args.Value, typeof(NumberType)));
+			Value = AdjustDecimalPlaces(Helper.ConvertToType<NumberType>(args.Value));
 
 		await ValueChanged.InvokeAsync(Value);
 	}
 
+	/// <summary>
+	/// On keyboard key press event
+	/// </summary>
 	[Parameter]
 	public EventCallback<KeyboardEventArgs> OnKeyDown { get; set; }
 
@@ -186,33 +237,30 @@ public partial class NumberInput<NumberType> : InputBase where NumberType : INum
 		}
 	}
 
-	private NumberType AdjustDecimalPlaces(NumberType value)
+	/// <summary>
+	/// Method for adjusting decimal places provided with parameter
+	/// </summary>
+	/// <param name="value">Value whose decimal places we want to change</param>
+	/// <returns>NumberType result with adjusted decimal places</returns>
+	private NumberType? AdjustDecimalPlaces(NumberType? value)
 	{
 		var result = value;
 		if (DecimalPlaces > 0)
 		{
-			double converted = Math.Round((double)Convert.ChangeType(result, typeof(double)), DecimalPlaces);
+			double converted = Math.Round(Helper.ConvertToType<double>(result), DecimalPlaces);
-			return (NumberType)Convert.ChangeType(converted, typeof(NumberType));
+			return Helper.ConvertToType<NumberType>(converted);
 		}
 		return result;
 	}
 	
+	/// <summary>
+	/// Clear event for user clear icon click. It clears the Value and set it to 
+	/// </summary>
+	/// <returns></returns>
 	private async Task Clear()
 	{
-		_value = string.Empty;
+		var val = Helper.ConvertToType<NumberType>(null);
-		await ValueChanged.InvokeAsync((NumberType)Convert.ChangeType(0, typeof(NumberType)));
+		await ValueChanged.InvokeAsync(val);
-	}
-
-	protected override async Task OnAfterRenderAsync(bool firstRender)
-	{
-		if (firstRender)
-		{
-			if (!DecimalPlaces.Equals(Helper.GetDecimalPlaces(Value)))
-			{
-				Value = AdjustDecimalPlaces(Value);
-				StateHasChanged();
-			}
-		}
 	}
 
 	#region Lifecycle
@@ -228,12 +276,18 @@ public partial class NumberInput<NumberType> : InputBase where NumberType : INum
 		await base.OnParametersSetAsync();
 	}
 
-	protected override async Task OnInitializedAsync()
+	protected override void OnAfterRender(bool firstRender)
 	{
-		await base.OnInitializedAsync();
+		if (firstRender)
-		if (Required)
 		{
-			if (!InputAttributes.ContainsKey("required")) InputAttributes.Add("required", true);
+			if (Value is not null)
+			{
+				if (!DecimalPlaces.Equals(Helper.GetDecimalPlaces(Value)))
+				{
+					Value = AdjustDecimalPlaces(Value);
+					StateHasChanged();
+				}
+			}
 		}
 	}
 

src/Connected.Components/Components/Radio.razor

@@ -2,8 +2,20 @@
 
 @inherits InputBase;
 
-<label class="radio-group" for="@Id">
+<label class="radio-group"
-    <input class="radio-input" id="@Id" name="@ParentRadioGroup.Name" type="radio" @onchange="OnChange" @attributes=@InputAttributes disabled="@Disabled" checked="@Checked">
+       for="@Id">
+    <input class="@ClassNameList"
+           id="@Id"
+           name="@ParentRadioGroup?.Name"
+           type="radio"
+           @onchange="OnChange"
+           @attributes=@InputAttributes
+           disabled="@Disabled"
+           readonly="@Readonly"
+           checked="@Checked">
+
     <div class="radio-fill"></div>
-    <label for="@Id" class="radio-label">@Label</label>
+
+    <label for="@Id"
+           class="@LabelClassNameList">@Label</label>
 </label>

src/Connected.Components/Components/Radio.razor.cs

@@ -1,18 +1,24 @@
 using Connected.Models;
+using Connected.Utilities;
 using Microsoft.AspNetCore.Components;
 
 namespace Connected.Components;
 public partial class Radio : InputBase
 {
+	#region Parameters
 	[CascadingParameter]
 	public RadioGroup? ParentRadioGroup { get; set; }
 
 	[Parameter]
-	public bool Checked { get; set; }
+	public bool Checked { get; set; } = false;
 
 	[Parameter, EditorRequired]
 	public string? Id { get; set; }
 
+	#endregion
+
+	#region Events
+
 	[Parameter]
 	public EventCallback<bool> CheckedChanged { get; set; }
 
@@ -21,4 +27,37 @@ public partial class Radio : InputBase
 		Checked = !Checked;
 		await CheckedChanged.InvokeAsync(Checked);
 	}
+
+	#endregion
+
+	#region Style
+
+	[Parameter]
+	public string ClassName { get; set; } = string.Empty;
+
+	private string ClassNameList
+	{
+		get
+		{
+			return new CssBuilder("radio-input")
+				.AddClass(ClassName)
+				.Build();
+		}
+	}
+
+	[Parameter]
+	public string LabelClassName { get; set; } = string.Empty;
+
+	private string LabelClassNameList
+	{
+		get
+		{
+			return new CssBuilder("radio-label")
+				.AddClass(LabelClassName)
+				.Build();
+		}
+	}
+
+	#endregion
+
 }

src/Connected.Components/Components/RadioGroup.razor

@@ -6,7 +6,6 @@
       {
          <h5>@Name</h5>
       }
-
       <div class="container">
          @ChildContent
       </div>

src/Connected.Components/Components/RadioGroup.razor.cs

@@ -3,13 +3,32 @@
 namespace Connected.Components;
 public partial class RadioGroup
 {
+	#region Parameters
+
+	/// <summary>
+	/// Radio group name. Mandatory! Used for proper radio button grouping
+	/// Options: any string will do
+	/// Default: 'radiogroup'
+	/// </summary>
 	[Parameter, EditorRequired]
-	public string? Name { get; set; }
+	public string? Name { get; set; } = "radiogroup";
 
+
+	/// <summary>
+	/// Used for globaly disabling radio button group and all the radios within
+	/// Options: true or false
+	/// Default: false
+	/// </summary>
 	[Parameter]
-	public bool Disabled { get; set; }
+	public bool Disabled { get; set; } = false;
 
+
+	/// <summary>
+	/// All the radiobuttons and other components inside radio group
+	/// </summary>
 	[Parameter]
 	public RenderFragment? ChildContent { get; set; }
 
+	#endregion
+
 }

src/Connected.Components/Components/SimpleSelect.razor

@@ -4,19 +4,23 @@
 
 @inherits InputBase;
 
+@if (component_loaded)
+{
     @if (Items is not null)
     {
         <div class="@InputFieldClassList">
-        <select type="textarea" style="height:0px;" @attributes=@InputAttributes>
+            <select type="textarea"
-            </select>
+            style="height:0px;"
+            @attributes=@InputAttributes></select>
             @if (IsLabel)
             {
                 <label class="label-animated">@Label</label>
             }
 
             <span class="highlight"></span>
-            <span class="bar">
+
-            </span>
+            <span class="bar"></span>
+
             <span class="input-glyph-wraper">
                 @if (Clearable)
                 {
@@ -35,7 +39,8 @@
                 }
             </span>
             <div class="drop-down">
-                <div class="dropdown-menu p-2" aria-labelledby="dropdownMenuButton">
+                <div class="dropdown-menu p-2"
+             aria-labelledby="dropdownMenuButton">
                     @if (EnableSearch)
                     {
                         <input type="text"
@@ -43,14 +48,18 @@
                    class="dropdown-item"
                    @bind-value="@SearchText" />
                     }
-                    @foreach (ValueType item in Items)
+                    @foreach (ValueType item in FilteredItems)
                     {
                         @if (item is not null)
                         {
-                            <div class="dropdown-item" @onclick=@(()=>SetSelectedItem(@item))>@item.ToString()</div>
+                            <div class="dropdown-item"
+                                @onclick=@(()=>SetSelectedItem(@item))>
+                                @item.ToString()
+                            </div>
                         }
                     }
                 </div>
             </div>
         </div>
     }
+}

src/Connected.Components/Components/SimpleSelect.razor.cs

@@ -1,22 +1,46 @@
 using Connected.Models;
 using Microsoft.AspNetCore.Components;
 using System.Collections.ObjectModel;
+using System.Collections.Specialized;
 
 namespace Connected.Components;
 public partial class SimpleSelect<ValueType> : InputBase
 {
+	private bool component_loaded = false;
+	#region Parameters
+	
+	/// <summary>
+	/// Value that is currently selected in the dropdown. Used for @bind-Value
+	/// </summary>
 	[Parameter]
-	public ValueType Value { get; set; }
+	public ValueType? Value { get; set; }
 
-	[Parameter]
+	/// <summary>
-	public IEnumerable<ValueType> Items { get; set; }
+	/// Collection of Items to work on (Filter). Filtered result is then shown in dropdown. If no filter is aplied, all the items are shown
+	/// </summary>
+	[Parameter, EditorRequired]
+	public ObservableCollection<ValueType>? Items { get; set; }
 
-	public ObservableCollection<ValueType> OriginalItems { get; set; }
+	/// <summary>
+	/// Collection of items from 'Items' filtered with 'SearchText'
+	/// </summary>
+	private List<ValueType>? FilteredItems { get; set; }
 
+	/// <summary>
+	/// Enable edit text search box for item filtering
+	/// Options: true or false
+	/// Default: true
+	/// </summary>
 	[Parameter]
 	public bool EnableSearch { get; set; } = true;
 
 	private string _searchText { get; set; } = string.Empty;
+
+	/// <summary>
+	/// Search string provided by user
+	/// Options: any string
+	/// Default: string.Empty
+	/// </summary>
 	public string SearchText
 	{
 		get
@@ -30,50 +54,92 @@ public partial class SimpleSelect<ValueType> : InputBase
 		}
 	}
 
+	#endregion
+
+	#region Events, Methods
+
+	/// <summary>
+	/// Method for setting the item on select
+	/// </summary>
+	/// <param name="item">item that will be set as selected</param>
+	/// <returns>Methot returns nothing</returns>
 	private async Task SetSelectedItem(ValueType item)
 	{
-		//DropDownClassToggle();
 		await ValueChanged.InvokeAsync(item);
 	}
 
+	/// <summary>
+	/// Method for filtering items using 'SearchText' as filter
+	/// </summary>
 	private void FilterItems()
+	{
+		if (Items is not null)
 		{
 			if (string.IsNullOrEmpty(_searchText))
 			{
-			Items = OriginalItems;
+				SetItems();
 			}
 			else
 			{
-			Items = Items.Where(item => item.ToString().ToLower().Contains(_searchText.ToLower()));
+				FilteredItems = Items.Where(item => item.ToString().ToLower().Contains(_searchText.ToLower())).ToList();
 			}
 			StateHasChanged();
 		}
+	}
 
-
+	/// <summary>
+	/// Event triggered when value changes
+	/// </summary>
 	[Parameter]
 	public EventCallback<ValueType> ValueChanged { get; set; }
 
-	private async Task ChangeValueAsync(ChangeEventArgs args)
+
+	/// <summary>
+	/// Method for setting the FilteredItems collection keeping the original Item collection
+	/// </summary>
+	private void SetItems()
 	{
-		await ValueChanged.InvokeAsync((ValueType)Convert.ChangeType(args.Value, typeof(ValueType)));
+		if (Items is not null)
+		{
+			FilteredItems = Items.ToList();
+		}
 	}
 
-	protected override async Task OnParametersSetAsync()
+	/// <summary>
+	/// Event triggered when the provided Items collection changes
+	/// </summary>
+	/// <param name="sender"></param>
+	/// <param name="e"></param>
+	private void OriginalItems_CollectionChanged(object? sender, NotifyCollectionChangedEventArgs e)
 	{
-
+		SetItems();
-		OriginalItems = new ObservableCollection<ValueType>(Items);
-
-		if (_searchText.Length > 0)
 		FilterItems();
-
-		await base.OnParametersSetAsync();
 	}
 
+	#endregion
+
+	#region Lifecycle
+
+	/// <summary>
+	/// Initializing Collections and aplying Filters if provided
+	/// </summary>
+	/// <returns>Nothing gets returned</returns>
 	protected override async Task OnInitializedAsync()
 	{
 		await base.OnInitializedAsync();
+		if (Items is null)
+		{
+			Items= new ObservableCollection<ValueType>();
+		}
+		SetItems();
+		if (_searchText.Length > 0)
+			FilterItems();
+		Items.CollectionChanged += OriginalItems_CollectionChanged;
 		
-		if (Required && InputAttributes.ContainsKey("required"))
+		component_loaded = true;
-			InputAttributes.Add("required", true);
+		StateHasChanged();
 	}
+
+	#endregion
+
 }

src/Connected.Components/Components/TextInput.razor

@@ -3,27 +3,15 @@
 @inherits InputBase;
 
 <div class="@InputFieldClassList">
-    @if (NumOfRows==1)
-    {
     <input type="@InputType"
            value="@Value"
            placeholder="@Placeholder"
            disabled="@Disabled"
            readonly="@Readonly"
+           required="@Required"
            @oninput=@ChangeValueAsync
            @attributes="@InputAttributes" />
 
-    } else
-    {
-        <textarea type="textarea"
-           rows="@NumOfRows"
-           value="@Value"
-           placeholder="@Placeholder"
-           disabled="@Disabled"
-           readonly="@Readonly"
-           @oninput=@ChangeValueAsync
-           @attributes="@InputAttributes" />
-    }
 
     <span class="highlight"></span>
     <span class="bar"></span>
@@ -45,16 +33,15 @@
             {
                 <span class="input-glyph button" @onclick="Clear">
                     <Glyph SVG="@Icons.Material.Rounded.Dangerous" />
-                    <!--<i class='bx bx-x-circle'></i>-->
                 </span>
             }
             @if (IsError)
             {
                 <span class="input-glyph error">
-                    <Glyph SVG="@Icons.Material.Outlined.Error" Color="#D10000" />
+                    <Glyph SVG="@Icons.Material.Outlined.Error" />
-                    <!--<i class='bx bx-error-circle'></i>-->
                 </span>
             }
         </span>
     </span>
 </div>
+

src/Connected.Components/Components/TextInput.razor.cs

@@ -4,10 +4,24 @@ using Microsoft.AspNetCore.Components;
 namespace Connected.Components;
 public partial class TextInput : InputBase
 {
+	#region Parameters
 
+	/// <summary>
+	/// Setter for the TextInput if input is password field (for hiding characters)
+	/// Options: true or false
+	/// Default: false;
+	/// </summary>
 	[Parameter]
 	public bool IsPassword { get; set; } = false;
 
+	/// <summary>
+	/// String for the component to use if TextInput is password field
+	/// </summary>
+	private string InputType => IsPassword ? "password" : "text";
+
+	/// <summary>
+	/// Number of rows
+	/// </summary>
 	[Parameter]
 	public int NumOfRows
 	{
@@ -22,30 +36,40 @@ public partial class TextInput : InputBase
 	}
 	private int _numberOfLines = 1;
 
-
+	/// <summary>
+	/// Value of the TextInput. Used for @bind-Value
+	/// </summary>
 	[Parameter]
 	public string Value { get; set; } = string.Empty;
 
-	private string InputType => IsPassword ? "password" : "text";
+	#endregion
 
+	#region Events, Methods
+
+	/// <summary>
+	/// Event triggered when value changes
+	/// </summary>
 	[Parameter]
 	public EventCallback<string> ValueChanged { get; set; }
 
+	/// <summary>
+	/// Method that triggers oninput -> when value inside the component changes
+	/// </summary>
+	/// <param name="args"></param>
+	/// <returns></returns>
 	private async Task ChangeValueAsync(ChangeEventArgs args)
 	{
 		await ValueChanged.InvokeAsync(args?.Value?.ToString());
 	}
 
+	/// <summary>
+	/// Clear the value of the TextInput
+	/// </summary>
+	/// <returns></returns>
 	private async Task Clear()
 	{
 		await ValueChanged.InvokeAsync(string.Empty);
 	}
 
-	protected override async Task OnInitializedAsync()
+	#endregion
-	{
-		await base.OnInitializedAsync();
-
-		if (Required && !InputAttributes.ContainsKey("required"))
-			InputAttributes.Add("required", true);
-	}
 }

src/Connected.Components/Components/ToggleInput.razor.cs

@@ -22,6 +22,6 @@ public partial class ToggleInput: InputBase
 	public async Task OnChange()
 	{
 		Checked = !Checked;
-		CheckedChanged.InvokeAsync((bool)Checked);
+		await CheckedChanged.InvokeAsync((bool)Checked);
 	}
 }

src/Connected.Components/Enums/Target.cs

@@ -0,0 +1,18 @@
+using System.ComponentModel;
+
+namespace Connected.Enums;
+public enum Target
+{
+	[Description("_top")]
+	Top,
+
+	[Description("_parent")]
+	Parent,
+
+	[Description("_blank")]
+	Blank,
+
+	[Description("_self")]
+	Self,
+
+}

src/Connected.Components/Models/InputBase.cs

@@ -33,13 +33,17 @@ public class InputBase : ComponentBase
 	public Dictionary<string, object> InputAttributes { get; set; } = new();
 
 	/// <summary>
-	/// Show clear button.
+	/// Disable input component
+	/// Options: true or false
+	/// Default: false
 	/// </summary>
 	[Parameter]
 	public bool Disabled { get; set; } = false;
 
 	/// <summary>
-	/// Show clear button.
+	/// Make input component readonly
+	/// Options: true or false
+	/// Default: false
 	/// </summary>
 	[Parameter]
 	public bool Readonly { get; set; } = false;
@@ -117,7 +121,7 @@ public class InputBase : ComponentBase
 	[Parameter]
 	public string Placeholder { get; set; } = string.Empty;
 
-	protected override async Task OnInitializedAsync()
+	protected override void OnInitialized()
 	{
 		if (InputAttributes is null) InputAttributes = new();
 	}

src/Connected.Components/Navigation.cs

@@ -1,4 +1,6 @@
-using Microsoft.AspNetCore.Components;
+using Connected.Enums;
+using Connected.Utilities;
+using Microsoft.AspNetCore.Components;
 using Microsoft.JSInterop;
 
 namespace Connected;
@@ -24,8 +26,9 @@ internal class Navigation
 	/// Navigates to the specified url.
 	/// </summary>
 	/// <param name="url">The destination url (relative or absolute).</param>
-	public async Task NavigateTo(string url, Target target=Target._self)
+	public async Task NavigateTo(string url, Target t=Target.Self)
 	{
+		string target = Helper.GetEnumDescription<Target>(t);
 		if (!target.Equals("_self"))
 		{
 			if (!url.Equals(_navigationManager.Uri))
@@ -110,10 +113,4 @@ internal class Navigation
 	}
 }
 
-enum Target
+
-{
-	_self,
-	_blank,
-	_parent,
-	_top
-}

src/Connected.Components/Utilities/Helper.cs

@@ -135,12 +135,24 @@ public static class Helper
 		}
 	}
 
+	public static T? ConvertToType<T>(object variable)
+	{
+		try
+		{
+			if (variable is not null)
+				return (T)Convert.ChangeType(variable, typeof(T));
+			return default;
+		} catch
+		{
+			return default;
+		}
+	}
+
 	public static bool IsNumeric(string input)
 	{
 		try
 		{
-			var number = Double.Parse(input);
+			return Double.TryParse(input, out var number);
-			return true;
 		}
 		catch
 		{