src/Connected.Components/Components/Button.razor

@@ -1,9 +1,44 @@
-<button type="button"
+<button 
-        @onclick="@OnClick"
+    type="button"
-        disabled=@Disabled
+    href="#"
-        style="@StyleList"
+    @onclick="@OnClick"
-        class="@ClassList">
+    disabled=@Disabled
+    style="@Style"
+    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,6 +1,8 @@
 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
@@ -26,10 +28,10 @@ public partial class Button
 	/// <summary>
 	/// Size of the button.
 	/// Options: Size.[Small,Medium,Large,FullWidth]
-	/// Default: Size.Medium
+	/// Default: Size.Large
 	/// </summary>
 	[Parameter]
-	public Size Size { get; set; } = Size.Medium;
+	public Size Size { get; set; } = Size.Large;
 
 	/// <summary>
 	/// Text shown inside the button
@@ -46,6 +48,29 @@ 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
@@ -65,7 +90,7 @@ public partial class Button
 
 	/// <summary>
 	/// User defined custom style
-	/// Options: any valid CSS style
+	/// Options: any user defined string with valid CSS style
 	/// Default: string.Empty
 	/// </summary>
 	[Parameter]
@@ -90,21 +115,10 @@ 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>
-	public string ClassList
+	private string ClassList
 	{
 		get
 		{
@@ -120,7 +134,7 @@ public partial class Button
 	/// <summary>
 	/// Generated class list for button based on user parameters
 	/// </summary>
-	public string ContentClassList
+	private string ContentClassList
 	{
 		get
 		{

src/Connected.Components/Components/CheckBox.razor

@@ -2,22 +2,10 @@
 
 @inherits InputBase;
 
-<label class="checkbox-group"
+<label class="checkbox-group" for="@Id">
-       for="@Id">
+    <input class="checkbox-input" id="@Id" type="checkbox" @attributes=@InputAttributes checked="@Checked" disabled="@Disabled">
-    <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"
+    <label for="@Id" class="checkbox-label">@Label</label>
-           class="@LabelClassList"
-           style="@LabelStyleList">
-        @Label
-    </label>
 </label>
 
 

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

@@ -1,100 +1,22 @@
 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; } = false;
+	public bool Checked { get; set; }
 
-
-	/// <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="@GlyphStyleList">
+<div style="width:@WidthString; height:@HeightString; overflow:hidden">
-<svg viewBox="0 0 24 24" class="@GlyphClassList" @onclick="@OnClick">
+<svg viewBox="0 0 24 24" style="fill:@Color;" class="@GlyphClassList" @onclick="@OnClick">
     @((MarkupString)SVG)
 </svg>
 </div>

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

@@ -2,87 +2,58 @@
 using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Web;
 
-namespace Connected.Components;
+namespace Connected.Components
-
-public partial class Glyph
 {
-	/// <summary>
+	public partial class Glyph
-	/// 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 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;
-
-	/// <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;
-
-	private string GlyphClassList
 	{
-		get
+		[Parameter]
+		public string SVG { get; set; } = string.Empty;
+
+		[Parameter]
+		public string Color { get; set; } = "#000000";
+
+		[Parameter]
+		public int Width { get; set; } = 24;
+		[Parameter]
+		public int Height { get; set; } = 24;
+
+		private string WidthString
 		{
-			return new CssBuilder()
+			get
-				.AddClass("color-"+Helper.GetEnumDescription<Color>(Color))
+			{
-				 .AddClass(Class)
+				return Width.ToString() + "px";
-				 .Build();
+			}
 		}
-	}
 
-	/// <summary>
+		private string HeightString
-	/// 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()
+			get
-				.AddStyle("width: "+Width.ToString()+"px; height:"+Height.ToString()+"px; overflow: hidden")
+			{
-				 .AddStyle(Style)
+				return Width.ToString() + "px";
-				 .Build();
+			}
 		}
-	}
 
-	[Parameter]
+		[Parameter]
-	/// <summary>
+		public string Class { get; set; } = string.Empty;
-	/// Glyph click event.
+
-	/// </summary>
+		private string GlyphClassList
-	public EventCallback<MouseEventArgs> Click { get; set; }
+		{
-	protected async Task OnClick(MouseEventArgs e)
+			get
-	{
+			{
-		await Click.InvokeAsync(e);
+				return new CssBuilder()
+					 .AddClass(Class)
+					 .Build();
+			}
+		}
+
+		[Parameter]
+		/// <summary>
+		/// Glyph click event.
+		/// </summary>
+		public EventCallback<MouseEventArgs> Click { get; set; }
+		protected async Task OnClick(MouseEventArgs e)
+		{
+			await Click.InvokeAsync(e);
+		}
 	}
 }

src/Connected.Components/Components/GlyphButton.razor

@@ -1,46 +0,0 @@
-@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

@@ -1,34 +0,0 @@
-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,6 +1,7 @@
-<a class="@LinkClassList"
+<a 
-   style="@LinkStyleList"
+    class="@LinkClassList"
-   href="@Url"
+    style="@LinkStyleList"
-   target="@_target">
+    href="@Url" 
+    target="@Target" >
     @Text
 </a>

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

@@ -1,47 +1,18 @@
-using Connected.Enums;
+using Connected.Utilities;
-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;
 
-	/// <summary>
+	[Parameter, EditorRequired]
-	/// 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;
 
-	/// <summary>
+	[Parameter, EditorRequired]
-	/// Target where the link shall open
+	public string Target { get; set; } = "_self";
-	/// 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;
 
@@ -55,11 +26,6 @@ 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;
 
@@ -73,13 +39,12 @@ public partial class Link
 		}
 	}
 
-	protected override async Task OnInitializedAsync()
+	protected override async Task OnParametersSetAsync()
 	{
-		//if Text parameter is not provided we set it to match URL
 		if (string.IsNullOrEmpty(Text))
 			Text = Url;
 
-		await base.OnInitializedAsync();
+		await base.OnParametersSetAsync();
 	}
 }
 

src/Connected.Components/Components/MultilineInput.razor

@@ -1,45 +0,0 @@
-@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

@@ -1,119 +0,0 @@
-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,14 +7,13 @@
 <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=@SetValueAsync
+           @oninput=@GetValueAsync
            @onmousewheel=@OnMouseWheel
            @onchange="@Change"
            @onwheel="OnMouseWheel"
@@ -40,16 +39,18 @@
                 <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 && !string.IsNullOrEmpty(Value?.ToString()))
+            @if (Clearable && Value.ToString().Length > 0)
             {
                 <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" />
+                    <Glyph SVG="@Icons.Material.Outlined.Error" Color="#D10000" />
+                    <!--<i class='bx bx-error-circle'></i>-->
                 </span>
             }
         </span>

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

@@ -7,38 +7,24 @@ 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 = Helper.ConvertToType<double>(Value);
+			var num = (double)Convert.ChangeType(Value, typeof(double));
 
 			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;
@@ -52,22 +38,18 @@ 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 = Helper.ConvertToType<double>(Value);
+			var num = (double)Convert.ChangeType(Value, typeof(double));
 
 			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;
@@ -80,12 +62,6 @@ 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)
@@ -106,30 +82,15 @@ 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
 		{
@@ -137,22 +98,13 @@ 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 SetValueAsync(ChangeEventArgs args)
+	public async Task GetValueAsync(ChangeEventArgs args)
 	{
 		if (args.Value is not null)
 		{
@@ -171,21 +123,18 @@ public partial class NumberInput<NumberType> : InputBase where NumberType : INum
 				await ValueChanged.InvokeAsync(default);
 
 			if (!newVal.Equals(_value))
-				await ValueChanged.InvokeAsync(Helper.ConvertToType<NumberType>(newVal));
+				await ValueChanged.InvokeAsync((NumberType)Convert.ChangeType(newVal, typeof(NumberType)));
 		}
 	}
 
 	public async Task Change(ChangeEventArgs args)
 	{
 		if (args.Value is not null)
-			Value = AdjustDecimalPlaces(Helper.ConvertToType<NumberType>(args.Value));
+			Value = AdjustDecimalPlaces((NumberType)Convert.ChangeType(args.Value, typeof(NumberType)));
 
 		await ValueChanged.InvokeAsync(Value);
 	}
 
-	/// <summary>
-	/// On keyboard key press event
-	/// </summary>
 	[Parameter]
 	public EventCallback<KeyboardEventArgs> OnKeyDown { get; set; }
 
@@ -237,30 +186,33 @@ public partial class NumberInput<NumberType> : InputBase where NumberType : INum
 		}
 	}
 
-	/// <summary>
+	private NumberType AdjustDecimalPlaces(NumberType value)
-	/// 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(Helper.ConvertToType<double>(result), DecimalPlaces);
+			double converted = Math.Round((double)Convert.ChangeType(result, typeof(double)), DecimalPlaces);
-			return Helper.ConvertToType<NumberType>(converted);
+			return (NumberType)Convert.ChangeType(converted, typeof(NumberType));
 		}
 		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()
 	{
-		var val = Helper.ConvertToType<NumberType>(null);
+		_value = string.Empty;
-		await ValueChanged.InvokeAsync(val);
+		await ValueChanged.InvokeAsync((NumberType)Convert.ChangeType(0, typeof(NumberType)));
+	}
+
+	protected override async Task OnAfterRenderAsync(bool firstRender)
+	{
+		if (firstRender)
+		{
+			if (!DecimalPlaces.Equals(Helper.GetDecimalPlaces(Value)))
+			{
+				Value = AdjustDecimalPlaces(Value);
+				StateHasChanged();
+			}
+		}
 	}
 
 	#region Lifecycle
@@ -276,18 +228,12 @@ public partial class NumberInput<NumberType> : InputBase where NumberType : INum
 		await base.OnParametersSetAsync();
 	}
 
-	protected override void OnAfterRender(bool firstRender)
+	protected override async Task OnInitializedAsync()
 	{
-		if (firstRender)
+		await base.OnInitializedAsync();
+		if (Required)
 		{
-			if (Value is not null)
+			if (!InputAttributes.ContainsKey("required")) InputAttributes.Add("required", true);
-			{
-				if (!DecimalPlaces.Equals(Helper.GetDecimalPlaces(Value)))
-				{
-					Value = AdjustDecimalPlaces(Value);
-					StateHasChanged();
-				}
-			}
 		}
 	}
 

src/Connected.Components/Components/Radio.razor

@@ -2,20 +2,8 @@
 
 @inherits InputBase;
 
-<label class="radio-group"
+<label class="radio-group" for="@Id">
-       for="@Id">
+    <input class="radio-input" id="@Id" name="@ParentRadioGroup.Name" type="radio" @onchange="OnChange" @attributes=@InputAttributes disabled="@Disabled" checked="@Checked">
-    <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,24 +1,18 @@
 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; } = false;
+	public bool Checked { get; set; }
 
 	[Parameter, EditorRequired]
 	public string? Id { get; set; }
 
-	#endregion
-
-	#region Events
-
 	[Parameter]
 	public EventCallback<bool> CheckedChanged { get; set; }
 
@@ -27,37 +21,4 @@ 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,6 +6,7 @@
       {
          <h5>@Name</h5>
       }
+
       <div class="container">
          @ChildContent
       </div>

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

@@ -3,32 +3,13 @@
 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; } = "radiogroup";
+	public string? Name { get; set; }
 
-
-	/// <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; } = false;
+	public bool Disabled { get; set; }
 
-
-	/// <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,23 +4,19 @@
 
 @inherits InputBase;
 
-@if (component_loaded)
+@if (Items is not null)
 {
-    @if (Items is not null)
+   <div class="@InputFieldClassList">
-    {
+        <select type="textarea" style="height:0px;" @attributes=@InputAttributes>
-        <div class="@InputFieldClassList">
+            </select>
-            <select type="textarea"
-            style="height:0px;"
-            @attributes=@InputAttributes></select>
             @if (IsLabel)
             {
                 <label class="label-animated">@Label</label>
             }
 
             <span class="highlight"></span>
-
+            <span class="bar">
-            <span class="bar"></span>
+            </span>
-
             <span class="input-glyph-wraper">
                 @if (Clearable)
                 {
@@ -28,9 +24,9 @@
                         <i class='bx bx-x-circle'></i>
                     </span>
                 }
-                <span class="input-glyph">
+                    <span class="input-glyph">
-                    <i class='bx bx-caret-down'></i>
+                        <i class='bx bx-caret-down'></i>
-                </span>
+                    </span>
                 @if (IsError)
                 {
                     <span class="input-glyph error">
@@ -39,27 +35,22 @@
                 }
             </span>
             <div class="drop-down">
-                <div class="dropdown-menu p-2"
+                <div class="dropdown-menu p-2" aria-labelledby="dropdownMenuButton">
-             aria-labelledby="dropdownMenuButton">
                     @if (EnableSearch)
                     {
                         <input type="text"
-                   placeholder="Enter search string..."
+                            placeholder="Enter search string..."
-                   class="dropdown-item"
+                            class="dropdown-item"
-                   @bind-value="@SearchText" />
+                            @bind-value="@SearchText" />
                     }
-                    @foreach (ValueType item in FilteredItems)
+                    @foreach (ValueType item in Items)
                     {
                         @if (item is not null)
                         {
-                            <div class="dropdown-item"
+                            <div class="dropdown-item" @onclick=@(()=>SetSelectedItem(@item))>@item.ToString()</div>
-                                @onclick=@(()=>SetSelectedItem(@item))>
-                                @item.ToString()
-                            </div>
                         }
                     }
                 </div>
-            </div>
         </div>
-    }
+   </div>
 }

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

@@ -1,46 +1,22 @@
 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; }
 
-	/// <summary>
+	[Parameter]
-	/// Collection of Items to work on (Filter). Filtered result is then shown in dropdown. If no filter is aplied, all the items are shown
+	public IEnumerable<ValueType> Items { get; set; }
-	/// </summary>
-	[Parameter, EditorRequired]
-	public ObservableCollection<ValueType>? Items { get; set; }
 
-	/// <summary>
+	public ObservableCollection<ValueType> OriginalItems { get; set; }
-	/// 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
@@ -54,92 +30,50 @@ 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))
 		{
-			if (string.IsNullOrEmpty(_searchText))
+			Items = OriginalItems;
-			{
-				SetItems();
-			}
-			else
-			{
-				FilteredItems = Items.Where(item => item.ToString().ToLower().Contains(_searchText.ToLower())).ToList();
-			}
-			StateHasChanged();
 		}
-	}
+		else
-
-	/// <summary>
-	/// Event triggered when value changes
-	/// </summary>
-	[Parameter]
-	public EventCallback<ValueType> ValueChanged { get; set; }
-
-
-	/// <summary>
-	/// Method for setting the FilteredItems collection keeping the original Item collection
-	/// </summary>
-	private void SetItems()
-	{
-		if (Items is not null)
 		{
-			FilteredItems = Items.ToList();
+			Items = Items.Where(item => item.ToString().ToLower().Contains(_searchText.ToLower()));
 		}
-	}
-
-	/// <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();
-		FilterItems();
-	}
-
-	#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;
-		
-		component_loaded = true;
 		StateHasChanged();
 	}
 
-	#endregion
 
+	[Parameter]
+	public EventCallback<ValueType> ValueChanged { get; set; }
+
+	private async Task ChangeValueAsync(ChangeEventArgs args)
+	{
+		await ValueChanged.InvokeAsync((ValueType)Convert.ChangeType(args.Value, typeof(ValueType)));
+	}
+
+	protected override async Task OnParametersSetAsync()
+	{
+
+		OriginalItems = new ObservableCollection<ValueType>(Items);
+
+		if (_searchText.Length > 0)
+			FilterItems();
+
+		await base.OnParametersSetAsync();
+	}
+
+	protected override async Task OnInitializedAsync()
+	{
+		await base.OnInitializedAsync();
+
+		if (Required && InputAttributes.ContainsKey("required"))
+			InputAttributes.Add("required", true);
+	}
 }

src/Connected.Components/Components/TextInput.razor

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

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

@@ -4,24 +4,10 @@ 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
 	{
@@ -36,40 +22,30 @@ 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;
 
-	#endregion
+	private string InputType => IsPassword ? "password" : "text";
 
-	#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);
 	}
 
-	#endregion
+	protected override async Task OnInitializedAsync()
+	{
+		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;
-		await CheckedChanged.InvokeAsync((bool)Checked);
+		CheckedChanged.InvokeAsync((bool)Checked);
 	}
 }

src/Connected.Components/Enums/Target.cs

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

src/Connected.Components/Navigation.cs

@@ -1,6 +1,4 @@
-using Connected.Enums;
+using Microsoft.AspNetCore.Components;
-using Connected.Utilities;
-using Microsoft.AspNetCore.Components;
 using Microsoft.JSInterop;
 
 namespace Connected;
@@ -26,9 +24,8 @@ 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 t=Target.Self)
+	public async Task NavigateTo(string url, Target target=Target._self)
 	{
-		string target = Helper.GetEnumDescription<Target>(t);
 		if (!target.Equals("_self"))
 		{
 			if (!url.Equals(_navigationManager.Uri))
@@ -113,4 +110,10 @@ internal class Navigation
 	}
 }
 
-
+enum Target
+{
+	_self,
+	_blank,
+	_parent,
+	_top
+}

src/Connected.Components/Utilities/Helper.cs

@@ -135,24 +135,12 @@ 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
 		{
-			return Double.TryParse(input, out var number);
+			var number = Double.Parse(input);
+			return true;
 		}
 		catch
 		{