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

@@ -3,76 +3,39 @@
 
 <h1 style="text-align:center;">Component Sandbox</h1>
 
-<p>ValueDouble: @inputValueDouble.ToString()</p>
-<p>ValueInt: @inputValueInt.ToString()</p>
-<p>ValueText: @inputValueText</p>
-<p>SimpleSelectValue: @SelectedItemValue</p>
 
-<TextInput
-    Label="String"
-    Required="true"
-    ErrorText="@errorText"
-    @bind-Value="@inputValueText">
-</TextInput>
+<p>SelectedValue: @SelectedValue.ToString()</p>
 
-<TextInput 
-    Label="Password"
-    IsPassword="true"
-    Required="true"
-    ErrorText="@errorText"
-    @bind-Value="@inputValueText">
-</TextInput>
+<SimpleSelect
+    Items="@items" 
+    Label="Simple select" 
+    @bind-Value=@SelectedValue
+/>
 
 
 @code {
 
+    int SelectedValue;
 
-    List<SelectItem<string>> SelectFieldItems = new();
-    string SelectedItemValue = "";
+    List<int> items;
 
-    int counter { get; set; } = 0;
-
-    private string _inputText = string.Empty;
-    string inputValueText
+    private void FillItemsList()
     {
-        get
-        {
-            return _inputText;
-        }
-        set
-        {
-            if (value.Length > 0) errorText = "Error!!!";
-            else errorText = "";
-            _inputText = value;
-            StateHasChanged();
-        }
-    }
-    double inputValueDouble = 12.756;
-    int inputValueInt = 12;
+        if (items is null) items = new();
 
-    DateTime inputValueDate = DateTime.Now.AddDays(-10);
+        Random random = new Random(DateTime.Now.Millisecond);
 
-    public void CounterIncrement()
-    {
-        counter++;
+        for (int i = 0; i < 10; i++)
+        {
+            int item = random.Next();
+            items.Add(item);
+        }
         StateHasChanged();
     }
 
-    string errorText = "Error!!";
-
     protected override async Task OnInitializedAsync()
     {
-        SelectFieldItems.Add(new SelectItem<string>() { DisplayedText = "Item 1", Value = "select item value 1", Enabled = true });
-        SelectFieldItems.Add(new SelectItem<string>() { DisplayedText = "Item 2", Value = "select item value 2", Enabled = true });
-        SelectFieldItems.Add(new SelectItem<string>() { DisplayedText = "Item 3", Value = "select item value 3", Enabled = true });
-        SelectFieldItems.Add(new SelectItem<string>() { DisplayedText = "Item 4", Value = "select item value 4", Enabled = true });
-        SelectFieldItems.Add(new SelectItem<string>() { DisplayedText = "Item 5", Value = "select item value 5", Enabled = false });
-        SelectFieldItems.Add(new SelectItem<string>() { DisplayedText = "Item 6", Value = "select item value 6", Enabled = true });
-        SelectFieldItems.Add(new SelectItem<string>() { DisplayedText = "Item 7", Value = "select item value 7", Enabled = true });
-        SelectFieldItems.Add(new SelectItem<string>() { DisplayedText = "Item 8", Value = "select item value 8", Enabled = false });
-        SelectFieldItems.Add(new SelectItem<string>() { DisplayedText = "Item 9", Value = "select item value 9", Enabled = true });
-        SelectFieldItems.Add(new SelectItem<string>() { DisplayedText = "Item 10", Value = "select item value 10", Enabled = true });
-        SelectedItemValue = SelectFieldItems[0].Value;
+        FillItemsList();
     }
 
 }

src/Connected.Components/Components/NumberInput.razor

@@ -5,18 +5,19 @@
 @typeparam NumberType
 
 <div class="@InputFieldClassList">
-    <input type="number"
+    <input type="text"
            placeholder="@Placeholder"
            step="@_step"
            disabled="@Disabled"
            readonly="@Readonly"
-           @onmousewheel="@OnMouseWheel"
-           @onwheel="@OnMouseWheel"
-           @oninput=@ChangeValueAsync
-           @bind-value="@Value"
-           @attributes="@InputAttributes">
-           </input>
-
+           value="@_value"
+           @onkeydown=@(args => ChangeValue(args))
+           @onkeydown:preventDefault="@_preventDefaultAction"
+           @oninput=@GetValueAsync
+           @onmousewheel=@OnMouseWheel
+           @onchange="@Change"
+           @onwheel="OnMouseWheel"
+           @attributes="@InputAttributes" />
     
     <span class="highlight"></span>
     <span class="bar"></span>
@@ -34,6 +35,10 @@
     }
     <span class="input-glyph-wraper">
         <span class="input-glyph">
+            <span style="display:inline-block">
+                <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)
             {
                 <span class="input-glyph button" @onclick="Clear">

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

@@ -3,11 +3,11 @@ using Connected.Utilities;
 using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Web;
 using System.Numerics;
-using static Connected.Colors;
 
 namespace Connected.Components;
 public partial class NumberInput<NumberType>:InputBase where NumberType : INumber<NumberType>
 {
+
 	private double _step =1;
 	[Parameter]
 	public double Step { 
@@ -22,30 +22,56 @@ public partial class NumberInput<NumberType>:InputBase where NumberType : INumbe
 	}
 
 	[Parameter]
-	public bool DisableMouseWheel { get; set; } = false;
+	public bool DisableMouseWheel
+	{
+		get;
+		set;
+	} = false;
 
 	private async Task StepUp()
 	{
-		double num = (double)Convert.ChangeType(Value, typeof(double));
-		num += _step;
-		Value = AdjustDecimalPlaces((NumberType)Convert.ChangeType(num, typeof(NumberType)));
+		try
+		{
+			double num = (double)Convert.ChangeType(Value, typeof(double));
+			num += _step;
+			if (DecimalPlaces > 0)
+				num = Math.Round(num, DecimalPlaces);
+			Value = (NumberType)Convert.ChangeType(num, typeof(NumberType));
+			if (IsError) ErrorText = string.Empty;
+		}
+		catch
+		{
+			ErrorText = "Error with step up!";
+			Value = default(NumberType);
+		}
 		await ValueChanged.InvokeAsync(Value);
 	}
 
 	private async Task StepDown()
 	{
-		double num = (double)Convert.ChangeType(Value, typeof(double));
-		num -= _step;
-		Value = AdjustDecimalPlaces((NumberType)Convert.ChangeType(num, typeof(NumberType)));
+		try
+		{
+			double num = (double)Convert.ChangeType(Value, typeof(double));
+			
+			num -= _step;
+			if (DecimalPlaces > 0)
+				num = Math.Round(num, DecimalPlaces);
+			Value = (NumberType)Convert.ChangeType(num, typeof(NumberType));
+			if (IsError) ErrorText = string.Empty;
+		} catch
+		{
+			ErrorText = "Error with step down!";
+			Value = default(NumberType);
+		}
 		await ValueChanged.InvokeAsync(Value);
 	}
-	protected async Task OnMouseWheel(WheelEventArgs obj)
+	protected async Task OnMouseWheel(WheelEventArgs args)
 	{
-		if (DisableMouseWheel==false)
+		if (DisableMouseWheel == false)
 		{
-			if (!obj.ShiftKey || Disabled || Readonly)
+			if (args.ShiftKey || Disabled || Readonly)
 				return;
-			if (obj.DeltaY < 0)
+			if (args.DeltaY >= 0)
 			{
 				await StepDown();
 			}
@@ -53,69 +79,145 @@ public partial class NumberInput<NumberType>:InputBase where NumberType : INumbe
 			{
 				await StepUp();
 			}
+		} else
+		{
+			return;
 		}
 	}
 
+	private string _value;
 
 	[Parameter]
-	public NumberType Value
+	public NumberType? Value
 	{
-		get;
-		set;
+		get
+		{
+			if (string.IsNullOrEmpty(_value)) return default(NumberType);
+			return (NumberType)Convert.ChangeType(_value, typeof(NumberType));
+		}
+		set
+		{
+			_value = value.ToString();
+		}
 	}
 
 	[Parameter]
 	public int DecimalPlaces { get; set; } =0;
 
-
 	[Parameter]
-    public EventCallback<NumberType> ValueChanged { get; set; }
+   public EventCallback<NumberType> ValueChanged { get; set; }
 
-	public async Task ChangeValueAsync(ChangeEventArgs args)
+	public async Task GetValueAsync(ChangeEventArgs args)
     {
 		if (args.Value is not null)
 		{
-				NumberType value = (NumberType)Convert.ChangeType(args.Value, typeof(NumberType));
-				if (value.ToString().Length <= 0)
-				{
+			string newVal = args.Value.ToString();
+			if (!newVal.Equals("0"))
+			{
+				if (newVal.ToString().Contains("-"))
+					newVal = "-" + newVal.ToString().Replace("-", "");
+				if (newVal.ToString().ToLower().Contains("e"))
+					newVal = "e" + newVal.ToString().Replace("e", "");
+			}
+			if (string.IsNullOrEmpty(newVal))
+			{
+				await ValueChanged.InvokeAsync((NumberType)Convert.ChangeType((NumberType)Convert.ChangeType(null, typeof(NumberType)), typeof(NumberType)));
+			}
+			else
+			{
+				if (!newVal.Equals(_value))
+					await ValueChanged.InvokeAsync((NumberType)Convert.ChangeType((NumberType)Convert.ChangeType(newVal, typeof(NumberType)), typeof(NumberType)));
+			}
+		}
+	}
+
+	public async Task Change(ChangeEventArgs args)
+	{
+		if (args.Value is not null)
+		{
+			Value = AdjustDecimalPlaces((NumberType)Convert.ChangeType(args.Value, typeof(NumberType)));
+		}
+		ValueChanged.InvokeAsync(Value);
+	}
+
+	[Parameter] public EventCallback<KeyboardEventArgs> OnKeyDown { get; set; }
 
-					value = (NumberType)Convert.ChangeType(0, typeof(NumberType));
+	private bool CheckKey(string key)
+	{
+		bool result;
+		if (Helper.IsNumeric(key)) return true;
+		switch (key.ToLower())
+		{
+			case "backspace":
+			case "delete":
+			case "arrowleft":
+			case "arrowright":
+			case "-":
+				//case "e":
+				{
+					result = true;
+					break;
+				}
+			default:
+				{ 
+					result = false;
+					break;
 				}
-				await ValueChanged.InvokeAsync((NumberType)Convert.ChangeType(AdjustDecimalPlaces(value), typeof(NumberType)));
 		}
+
+		if ((key.Equals("-") || key.Equals("-")) && _value.Contains(key)) result = false;
+		return result;
 	}
 
-	private NumberType AdjustDecimalPlaces(NumberType value)
+	private bool _preventDefaultAction = true;
+	public async Task ChangeValue(KeyboardEventArgs args)
 	{
-		NumberType result = value;
-		if (Helper.NumberHasDecimalPlaces(value))
+		_preventDefaultAction= true;
+		if (args is not null)
 		{
-			if (DecimalPlaces > 0)
+			var key = args.Key.ToString().ToLower();
+			if (CheckKey(key))
 			{
-				decimal rounded = (decimal)Convert.ChangeType(value, typeof(decimal));
-				rounded = Math.Round(rounded, DecimalPlaces);
-				result = (NumberType)Convert.ChangeType(rounded, typeof(NumberType));
+				_preventDefaultAction = false;
+
+				await OnKeyDown.InvokeAsync(args);
 			}
+		} else
+		{
+			args.Key = null;
+		}
+	}
+
+	private NumberType AdjustDecimalPlaces(NumberType value)
+	{
+		var result = value;
+		if (DecimalPlaces > 0)
+		{
+			double converted = Math.Round((double)Convert.ChangeType(result, typeof(double)), DecimalPlaces);
+			return (NumberType)Convert.ChangeType(converted, typeof(NumberType));
 		}
 		return result;
 	}
 
 	private async Task Clear()
 	{
+		_value = string.Empty;
 		await ValueChanged.InvokeAsync((NumberType)Convert.ChangeType(0, typeof(NumberType)));
 	}
 
-	#region Lifecycle
-
-	protected override async Task OnInitializedAsync()
+	protected override async Task OnAfterRenderAsync(bool firstRender)
 	{
-		if (DecimalPlaces > 0)
+		if (firstRender)
 		{
-			Value = AdjustDecimalPlaces(Value);
-			await ValueChanged.InvokeAsync(Value);
+			if (!DecimalPlaces.Equals(Helper.GetDecimalPlaces(Value)))
+			{
+				Value = AdjustDecimalPlaces(Value);
+				StateHasChanged();
+			}
 		}
 	}
 
+	#region Lifecycle
 	protected override async Task OnParametersSetAsync()
 	{
 		if (typeof(NumberType).Name.ToLower().Contains("int"))

src/Connected.Components/Components/SimpleSelect.razor

@@ -0,0 +1,58 @@
+@using Connected.Models;
+
+@typeparam ValueType
+
+@inherits InputBase;
+
+@if (Items is not null)
+{
+   <div class="@InputFieldClassList">
+        
+        <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>
+            <span class="input-glyph-wraper">
+                @if (Clearable)
+                {
+                    <span class="input-glyph button">
+                        <i class='bx bx-x-circle'></i>
+                    </span>
+                }
+                    <span class="input-glyph">
+                        <i class='bx bx-caret-down'></i>
+                    </span>
+                @if (IsError)
+                {
+                    <span class="input-glyph error">
+                        <i class='bx bx-error-circle'></i>
+                    </span>
+                }
+            </span>
+            <div class="drop-down">
+                <div class="dropdown-menu p-2" aria-labelledby="dropdownMenuButton">
+                    @if (EnableSearch)
+                    {
+                        <input type="text"
+                            placeholder="Enter search string..."
+                            class="dropdown-item"
+                            @bind-value="@SearchText"
+                        />
+                    }
+                    @foreach (ValueType item in Items)
+                    {
+                        @if (item is not null)
+                        {
+                            <div class="dropdown-item" @onclick=@(()=>SetSelectedItem(@item))>@item.ToString()</div>
+                        }
+                    }
+                </div>
+        </div>
+   </div>
+}

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

@@ -0,0 +1,88 @@
+using Connected.Models;
+using Microsoft.AspNetCore.Components;
+
+namespace Connected.Components;
+public partial class SimpleSelect<ValueType> : InputBase
+{
+	[Parameter]
+	public ValueType Value { get; set; }
+
+	[Parameter]
+	public IEnumerable<ValueType> Items { get; set; }
+
+	public IEnumerable<ValueType> OriginalItems { get; set; }
+
+	[Parameter]
+	public bool EnableSearch { get; set; } = true;
+
+	private string _searchText { get; set; } = string.Empty;
+	public string SearchText
+	{
+		get
+		{
+			return _searchText;
+		}
+		set
+		{
+			_searchText = value;
+			FilterItems();
+		}
+	}
+
+	private string DropDownClass { get; set; } = "drop-down";
+
+	bool DropDownClicked = false;
+
+	public void DropDownClassToggle()
+	{
+		DropDownClicked = !DropDownClicked;
+		if (DropDownClicked)
+		{
+			DropDownClass = "";
+		} else
+		{
+			DropDownClass = "drop-down";
+		}
+		StateHasChanged();
+	}
+
+	private async Task SetSelectedItem(ValueType item)
+	{
+		//DropDownClassToggle();
+		await ValueChanged.InvokeAsync(item);
+	}
+
+	private async Task FilterItems()
+	{
+		if (string.IsNullOrEmpty(_searchText))
+		{
+			Items = OriginalItems;
+		}
+		else
+		{
+			Items = Items.Where(item => item.ToString().ToLower().Contains(_searchText.ToLower()));
+		}
+		StateHasChanged();
+	}
+
+
+	[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()
+	{
+		if (base.InputAttributes is null) base.InputAttributes = new();
+		if (base.Required)
+		{
+			if (base.InputAttributes.ContainsKey("required")) base.InputAttributes.Add("required", true);
+		}
+		OriginalItems = Items;
+		if (_searchText.Length>0) await FilterItems();
+		await base.OnInitializedAsync();
+	}
+}

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

@@ -48,13 +48,11 @@ public partial class TextInput: InputBase
     private async Task ChangeValueAsync(ChangeEventArgs args)
     {
         await ValueChanged.InvokeAsync(args.Value.ToString());
-		  StateHasChanged();
     }
 
 	private async Task Clear()
 	{
 		await ValueChanged.InvokeAsync(string.Empty);
-		StateHasChanged();
 
 	}
 

src/Connected.Components/Connected.Components.csproj

@@ -27,6 +27,7 @@
 	</ItemGroup>
 
 	<ItemGroup>
+		<PackageReference Include="Microsoft.AspNetCore.Components" Version="7.0.3" />
 		<PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="7.0.*-*" />
 		<PackageReference Include="Nerdbank.GitVersioning" Version="3.5.119" PrivateAssets="all" Condition="!Exists('packages.config')" />
 	</ItemGroup>

src/Connected.Components/Models/InputBase.cs

@@ -1,5 +1,7 @@
 using Connected.Utilities;
 using Microsoft.AspNetCore.Components;
+using static Connected.Colors;
+using static System.Net.Mime.MediaTypeNames;
 
 namespace Connected.Models;
 public class InputBase : ComponentBase
@@ -71,6 +73,22 @@ public class InputBase : ComponentBase
 		}
 	}
 
+	/// <summary>
+	/// Fired when the text value changes.
+	/// </summary>
+	[Parameter] public EventCallback<string> TextChanged { get; set; }
+	public string Text { get; set; }
+
+	protected virtual async Task SetTextAsync(string text)
+	{
+		if (Text != text)
+		{
+			Text = text;
+			await TextChanged.InvokeAsync(text);
+		}
+	}
+
+
 	private string _helperText = string.Empty;
 	[Parameter]
 	public string HelperText

src/Connected.Components/Models/SelectItem.cs

@@ -1,9 +0,0 @@
-namespace Connected.Models
-{
-	public class SelectItem<ValueType>
-	{
-		public string DisplayedText { get; set; }
-		public ValueType Value { get; set; }
-		public bool Enabled { get; set; }
-	}
-}

src/Connected.Components/Utilities/Helper.cs

@@ -135,11 +135,11 @@ public static class Helper
 		}
 	}
 
-	public static bool IsVariableNumeric(string input)
+	public static bool IsNumeric(string input)
 	{
 		try
 		{
-			var number = Decimal.Parse(input);
+			var number = Double.Parse(input);
 			return true;
 		}
 		catch

src/Connected.Components/Utilities/StyleBuilder.cs

@@ -10,6 +10,7 @@ namespace Connected.Utilities;
 public struct StyleBuilder
 {
 	private string stringBuffer;
+	private string style;
 
 	/// <summary>
 	/// Creates a StyleBuilder used to define conditional in-line style used in a component. Call Build() to return the completed style as a string.
@@ -35,6 +36,7 @@ public struct StyleBuilder
 	/// <param name="prop"></param>
 	/// <param name="value"></param>
 	public StyleBuilder(string prop, string value) => stringBuffer = $"{prop}:{value};";
+	public StyleBuilder(string style) : this() => this.style = style;
 
 	/// <summary>
 	/// Adds a conditional in-line style to the builder with space separator and closing semicolon.