From fb85499a6ef3b862e8fe2ffd24b268a3fef1860a Mon Sep 17 00:00:00 2001
From: markosteger <marko.steger@gmail.com>
Date: Fri, 10 Mar 2023 11:25:00 +0100
Subject: [PATCH] NumberStepper - simple working concept

---
 .../Pages/Index.razor                         |  6 ++
 .../Components/Grid.razor.cs                  |  1 -
 .../Components/NumberStepper.razor            | 17 ++++
 .../Components/NumberStepper.razor.cs         | 98 +++++++++++++++++++
 4 files changed, 121 insertions(+), 1 deletion(-)
 create mode 100644 src/Connected.Components/Components/NumberStepper.razor
 create mode 100644 src/Connected.Components/Components/NumberStepper.razor.cs

diff --git a/src/Connected.Components.Showcase.Runner/Pages/Index.razor b/src/Connected.Components.Showcase.Runner/Pages/Index.razor
index 9ed0882..3a7dd11 100644
--- a/src/Connected.Components.Showcase.Runner/Pages/Index.razor
+++ b/src/Connected.Components.Showcase.Runner/Pages/Index.razor
@@ -42,8 +42,14 @@ CloseOnDateSelect=true
  
 </DatePicker>
 
+<NumberStepper @bind-Value=number></NumberStepper>
+
 <p>Selected date is @date.ToString()</p>
 
+<p>Number is: @number.ToString()</p>
+
 @code {
     DateTime date = DateTime.Today;
+
+    int number = 0;
 }
\ No newline at end of file
diff --git a/src/Connected.Components/Components/Grid.razor.cs b/src/Connected.Components/Components/Grid.razor.cs
index 563db2a..fe820dd 100644
--- a/src/Connected.Components/Components/Grid.razor.cs
+++ b/src/Connected.Components/Components/Grid.razor.cs
@@ -37,5 +37,4 @@ public partial class Grid: ComponentBase
 				.Build();
 		}
 	}
-
 }
diff --git a/src/Connected.Components/Components/NumberStepper.razor b/src/Connected.Components/Components/NumberStepper.razor
new file mode 100644
index 0000000..042ae57
--- /dev/null
+++ b/src/Connected.Components/Components/NumberStepper.razor
@@ -0,0 +1,17 @@
+@typeparam NumberType
+
+<div class="form-group-alt" style="width:50%">
+    <div class="input-group-content">
+        <div class="input-cta-icon" @onclick="StepDown">
+            <svg viewBox="0 0 24 24" class="color-dark icon-root svg-icon icon-size-md"><!--!--><g><rect fill="none" fill-rule="evenodd" height="24" width="24"></rect><rect fill-rule="evenodd" height="2" width="16" x="4" y="11"></rect></g></svg>
+        </div>
+        <div class="input-area">
+            <form>
+                <input style="text-align:center;width:100%" id="number" type="number" placeholder="0" value="@_value" @onchange="Change">
+                </form>
+        </div>
+        <div class="input-cta-icon" @onclick="StepUp">
+            <svg viewBox="0 0 24 24" class="color-dark icon-root svg-icon icon-size-md"><path d="M0 0h24v24H0z" fill="none"></path><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"></path></svg>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/Connected.Components/Components/NumberStepper.razor.cs b/src/Connected.Components/Components/NumberStepper.razor.cs
new file mode 100644
index 0000000..55bfb42
--- /dev/null
+++ b/src/Connected.Components/Components/NumberStepper.razor.cs
@@ -0,0 +1,98 @@
+using Connected.Utilities;
+using Microsoft.AspNetCore.Components;
+using System.Numerics;
+
+namespace Connected.Components
+{
+	public partial class NumberStepper<NumberType> where NumberType : INumber<NumberType>
+
+	{
+		[Parameter]
+		public string Class { get; set; } = string.Empty;
+
+		/// <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);
+
+				num += Step;
+
+				Value=Helper.ConvertToType<NumberType>(num);
+
+			}
+			catch
+			{
+				Value = default;
+			}
+
+			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);
+
+				num -= Step;
+
+				Value = Helper.ConvertToType<NumberType>(num);
+
+			}
+			catch
+			{
+				Value = default;
+			}
+
+			await ValueChanged.InvokeAsync(Value);
+		}
+
+		[Parameter]
+		public NumberType? Value
+		{
+			get
+			{
+				
+					try
+					{
+						return Helper.ConvertToType<NumberType>(_value);
+					}
+					catch
+					{
+						return default;
+					}
+			}
+			set
+			{
+				_value = Helper.ConvertToType<double>(value);
+			}
+		}
+		private double _value { get; set; } = 0;
+
+		/// <summary>
+		/// Value change event
+		/// </summary>
+		[Parameter]
+		public EventCallback<NumberType> ValueChanged { get; set; }
+
+		[Parameter]
+		public double Step { get; set; } = 1;
+ 
+		public async Task Change(ChangeEventArgs args)
+		{
+			if (args.Value is not null)
+				Value = (Helper.ConvertToType<NumberType>(args.Value));
+
+			await ValueChanged.InvokeAsync(Value);
+		}
+	}
+}
\ No newline at end of file