From 9806a21f48c56b1ede4ea1e474d471d43b4bacc3 Mon Sep 17 00:00:00 2001
From: markosteger <marko.steger@gmail.com>
Date: Thu, 16 Mar 2023 14:09:47 +0100
Subject: [PATCH] Datepicker fix, NumberInput fix, ToggleGlyphButton fix

---
 .../Pages/Index.razor                         |  24 +-
 .../Components/DatePicker.razor               |  12 +-
 .../Components/DatePicker.razor.cs            |  33 +--
 .../Components/FormWizard.razor               |   3 +-
 .../Components/NumberInput.razor              |  50 ++--
 .../Components/NumberInput.razor.cs           | 213 ++++++++++--------
 .../Components/NumberStepper.razor            |   2 +-
 .../Components/ToggleGlyphButton.razor        |   4 +-
 .../Components/ToggleGlyphButton.razor.cs     |  10 +
 .../Connected.Components.csproj               |   2 +-
 10 files changed, 205 insertions(+), 148 deletions(-)

diff --git a/src/Connected.Components.Showcase.Runner/Pages/Index.razor b/src/Connected.Components.Showcase.Runner/Pages/Index.razor
index 3a7dd11..4183816 100644
--- a/src/Connected.Components.Showcase.Runner/Pages/Index.razor
+++ b/src/Connected.Components.Showcase.Runner/Pages/Index.razor
@@ -36,20 +36,36 @@
         Step4
     </FormWizardStep>
 </FormWizard>
-<DatePicker 
-CloseOnDateSelect=true
-@bind-SelectedDate=@date>
+<DatePicker @bind-SelectedDate=@date>
  
 </DatePicker>
 
-<NumberStepper @bind-Value=number></NumberStepper>
+<NumberStepper @bind-Value=number ></NumberStepper>
+
+<Button OnClick="ChangeErrorText" >Error text</Button>
+
+<NumberInput @bind-Value=@dnumber Step=0.03 DecimalPlaces=2 HelperText="Helper text" ErrorText="@ErrorText" Clearable=true></NumberInput>
 
 <p>Selected date is @date.ToString()</p>
 
 <p>Number is: @number.ToString()</p>
+<p>DNumber is: @dnumber.ToString()</p>
 
 @code {
     DateTime date = DateTime.Today;
 
+    double dnumber = 0;
+
     int number = 0;
+
+    string ErrorText = "";
+
+    public void ChangeErrorText()
+    {
+        if (string.IsNullOrEmpty(ErrorText))
+            ErrorText = "Test string: Error has ocurred!";
+        else
+            ErrorText = string.Empty;
+        //StateHasChanged();
+    }
 }
\ No newline at end of file
diff --git a/src/Connected.Components/Components/DatePicker.razor b/src/Connected.Components/Components/DatePicker.razor
index b1e13ff..763b407 100644
--- a/src/Connected.Components/Components/DatePicker.razor
+++ b/src/Connected.Components/Components/DatePicker.razor
@@ -5,9 +5,9 @@
     <div id="picker">
         <div class="form-group">
             <input type="text" value="@SelectedDate.ToString(Format)" required="required" /><span class="highlight"></span><span class="bar"></span>
-            <label class="label-animated">Select date</label>
-            <div class="input-helper-text">Some helping Text</div>
-            <div class="input-error-text">At least 6 characters required</div>
+            <label class="label-animated">@LabelText</label>
+            <div class="input-helper-text">@HelperText</div>
+            <div class="input-error-text">@ErrorText</div>
             <span class="input-glyph-wraper">
                 <span class="input-glyph">
                     <span class="input-glyph button" @onclick="TogglePicker">
@@ -20,7 +20,6 @@
             </span>
         </div>
 
-
         @if (Shown)
         {
             <!-- DatePicker header -->
@@ -96,6 +95,11 @@
                                         <div class="days">@CalendarStart.AddDays(i).ToString("ddd").Substring(0,1)</div>
                                     }
 
+                                    @for (int i=0; i<offset; i++)
+                                    {
+                                        <div></div>
+                                    }
+
                                     @foreach (var Date in ShowingDates)
                                     {
                                         <button class="item @DateChipClass(Date)" @onclick="@(()=>SetDate(Date))">
diff --git a/src/Connected.Components/Components/DatePicker.razor.cs b/src/Connected.Components/Components/DatePicker.razor.cs
index 6be2192..a5592f4 100644
--- a/src/Connected.Components/Components/DatePicker.razor.cs
+++ b/src/Connected.Components/Components/DatePicker.razor.cs
@@ -30,6 +30,15 @@ public partial class DatePicker
 
 	private List<DateTime> ShowingDates = new List<DateTime>();
 
+	[Parameter]
+	public string ErrorText { get; set; } = string.Empty;
+
+	[Parameter]
+	public string LabelText { get; set; } = "Select date";
+
+	[Parameter]
+	public string HelperText { get; set; } = string.Empty;
+
 	[Parameter]
 	public bool UseDateRange { get; set; } = false;
 
@@ -39,6 +48,8 @@ public partial class DatePicker
 	[Parameter]
 	public string Format { get; set; } = "dd.MM.yyyy";
 
+	private int offset = 0;
+
 	private bool _readonly = false;
 	[Parameter]
 	public bool Editable
@@ -84,25 +95,17 @@ public partial class DatePicker
 
 	public void SetStartStop()
 	{
-		CalendarStart = SelectedDate;
-		while (CalendarStart.Day != 1)
-		{
-			CalendarStart = CalendarStart.AddDays(-1);
-		}
+		CalendarStart = new DateTime(SelectedDate.Year,SelectedDate.Month,1);
+		CalendarEnd = CalendarStart.AddMonths(1).AddMinutes(-1);
+		offset=0;
+		DateTime temp = CalendarStart;
 		while (!CalendarStart.DayOfWeek.Equals(DayOfWeek.Monday))
 		{
 			CalendarStart = CalendarStart.AddDays(-1);
+			offset++;
 		}
-		CalendarEnd = SelectedDate;
-		while (CalendarEnd.Month == SelectedDate.Month)
-		{
-			CalendarEnd = CalendarEnd.AddDays(1);
-		}
-		while (!CalendarEnd.DayOfWeek.Equals(DayOfWeek.Monday))
-		{
-			CalendarEnd = CalendarEnd.AddDays(1);
-		}
-		DateTime start = CalendarStart;
+
+		DateTime start = CalendarStart.AddDays(offset);
 		if (ShowingDates is null) ShowingDates = new();
 		ShowingDates.Clear();
 		while (start.CompareTo(CalendarEnd) < 0)
diff --git a/src/Connected.Components/Components/FormWizard.razor b/src/Connected.Components/Components/FormWizard.razor
index ecb2844..7a9ccd8 100644
--- a/src/Connected.Components/Components/FormWizard.razor
+++ b/src/Connected.Components/Components/FormWizard.razor
@@ -1,7 +1,6 @@
 <CascadingValue Value="this">
-    
     <section id="@Id" class="@ClassList" style="@StyleList">
-        <div class="form-outer">
+        <div class="form-outer ">
             @ChildContent
         </div>
 
diff --git a/src/Connected.Components/Components/NumberInput.razor b/src/Connected.Components/Components/NumberInput.razor
index 71cf4b4..65307c7 100644
--- a/src/Connected.Components/Components/NumberInput.razor
+++ b/src/Connected.Components/Components/NumberInput.razor
@@ -5,53 +5,45 @@
 @typeparam NumberType
 
 <div class="@InputFieldClassList">
-    <input type="text"
-           placeholder="@Placeholder"
-           step="@Step"
+    <input type="number"
            disabled="@Disabled"
            readonly="@Readonly"
-           required="@Required"
-           value="@_value"
-           @onkeydown=@(args => ChangeValue(args))
-           @onkeydown:preventDefault="@_preventDefaultAction"
-           @oninput=@SetValueAsync
+           placeholder="@Placeholder"
+           step="@Step"
+           value="@Value"
            @onmousewheel=@OnMouseWheel
-           @onchange="@Change"
            @onwheel="OnMouseWheel"
-           @attributes="@InputAttributes" />
-    
+           @oninput=@SetNumberValueAsync
+           @attributes="@InputAttributes"
+           @onchange="@Change"
+           required="@Required" />
+
     <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>
-    }
+
+
+    <label class="label-animated">@Label</label>
+    <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">
-            <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 && !string.IsNullOrEmpty(Value?.ToString()))
+
+    @if (!isValueNull || IsError)
+    {
+        <span class="input-glyph-wraper">
+            @if (!isValueNull)
             {
                 <span class="input-glyph button" @onclick="Clear">
-                    <Glyph SVG="@Icons.Material.Rounded.Dangerous" />
+                    <Glyph SVG="@Icons.Material.Rounded.Dangerous" Class="icon-root svg-icon" />
                 </span>
             }
             @if (IsError)
             {
                 <span class="input-glyph error">
-                    <Glyph SVG="@Icons.Material.Outlined.Error" />
+                    <Glyph SVG="@Icons.Material.Outlined.Error" Class="icon-root svg-icon" />
                 </span>
             }
         </span>
-    </span>
+    }
 </div>
\ No newline at end of file
diff --git a/src/Connected.Components/Components/NumberInput.razor.cs b/src/Connected.Components/Components/NumberInput.razor.cs
index 2f09c56..28756ad 100644
--- a/src/Connected.Components/Components/NumberInput.razor.cs
+++ b/src/Connected.Components/Components/NumberInput.razor.cs
@@ -42,10 +42,12 @@ public partial class NumberInput<NumberType> : InputBase where NumberType : INum
 
 			if (IsError)
 				ErrorText = string.Empty;
+			isValueNull = false;
 		}
 		catch
 		{
 			ErrorText = "Error with step up!";
+			isValueNull = true;
 			Value = default;
 		}
 
@@ -71,11 +73,13 @@ public partial class NumberInput<NumberType> : InputBase where NumberType : INum
 
 			if (IsError)
 				ErrorText = string.Empty;
+			isValueNull = false;
 		}
 		catch
 		{
 			ErrorText = "Error with step down!";
 			Value = default;
+			isValueNull = true;
 		}
 
 		await ValueChanged.InvokeAsync(Value);
@@ -104,7 +108,19 @@ public partial class NumberInput<NumberType> : InputBase where NumberType : INum
 		}
 	}
 
-	private string? _value;
+	private bool isValueNull { get; set; } = true;
+
+	private bool IsValueSet()
+	{
+		bool result = false;
+		if (Value is not null)
+		{
+			result= true;
+		}
+		return result;
+	}
+
+	//private string? _value;
 
 
 	/// <summary>
@@ -114,28 +130,28 @@ public partial class NumberInput<NumberType> : InputBase where NumberType : INum
 	/// </summary>
 	[Parameter]
 	[EditorRequired]
-	public NumberType? Value
-	{
-		get
-		{
-			if (string.IsNullOrEmpty(_value))
-				return default;
-			else
-			{
-				try
-				{
-					return Helper.ConvertToType<NumberType>(_value);
-				} catch
-				{
-					return default;
-				}
-			}
-		}
-		set
-		{
-			_value = value?.ToString();
-		}
-	}
+	public NumberType? Value { get; set; } = default;
+	//{
+	//	get
+	//	{
+	//		if (string.IsNullOrEmpty(_value))
+	//			return default;
+	//		else
+	//		{
+	//			try
+	//			{
+	//				return Helper.ConvertToType<NumberType>(_value);
+	//			} catch
+	//			{
+	//				return default;
+	//			}
+	//		}
+	//	}
+	//	set
+	//	{
+	//		Value = value;
+	//	}
+	//}
 
 	/// <summary>
 	/// Number of decimal places for Value. If set, Value is corrected when input looses focus
@@ -145,33 +161,48 @@ public partial class NumberInput<NumberType> : InputBase where NumberType : INum
 	[Parameter]
 	public int DecimalPlaces { get; set; } = 0;
 
-
 	/// <summary>
 	/// Value change event
 	/// </summary>
 	[Parameter]
-	public EventCallback<NumberType> ValueChanged { get; set; }
+	public EventCallback<NumberType?> ValueChanged { get; set; }
+
+	//public async Task SetValueAsync(ChangeEventArgs args)
+	//{
+	//	if (args.Value is not null)
+	//	{
+	//		var newVal = args.Value.ToString()!;
+
+	//		if (!newVal.Equals("0"))
+	//		{
+	//			if (newVal.ToString().Contains("-"))
+	//				newVal = "-" + newVal.ToString().Replace("-", "");
 
-	public async Task SetValueAsync(ChangeEventArgs args)
+	//			if (newVal.ToString().ToLower().Contains("e"))
+	//				newVal = "e" + newVal.ToString().Replace("e", "");
+	//		}
+
+	//		if (string.IsNullOrEmpty(newVal))
+	//			await ValueChanged.InvokeAsync(default);
+
+	//		if (!newVal.Equals(_value))
+	//			await ValueChanged.InvokeAsync(Helper.ConvertToType<NumberType>(newVal));
+	//	}
+	//}
+
+	public async Task SetNumberValueAsync(ChangeEventArgs args)
 	{
 		if (args.Value is not null)
 		{
-			var newVal = args.Value.ToString()!;
-
-			if (!newVal.Equals("0"))
+			if (!string.IsNullOrEmpty(args.Value.ToString()))
 			{
-				if (newVal.ToString().Contains("-"))
-					newVal = "-" + newVal.ToString().Replace("-", "");
-
-				if (newVal.ToString().ToLower().Contains("e"))
-					newVal = "e" + newVal.ToString().Replace("e", "");
+				Value = Helper.ConvertToType<NumberType>(args.Value);
+				isValueNull = false;
+			} else
+			{
+				isValueNull = true;
 			}
-
-			if (string.IsNullOrEmpty(newVal))
-				await ValueChanged.InvokeAsync(default);
-
-			if (!newVal.Equals(_value))
-				await ValueChanged.InvokeAsync(Helper.ConvertToType<NumberType>(newVal));
+			await ValueChanged.InvokeAsync(Value);
 		}
 	}
 
@@ -179,7 +210,7 @@ public partial class NumberInput<NumberType> : InputBase where NumberType : INum
 	{
 		if (args.Value is not null)
 			Value = AdjustDecimalPlaces(Helper.ConvertToType<NumberType>(args.Value));
-
+		isValueNull = false;
 		await ValueChanged.InvokeAsync(Value);
 	}
 
@@ -189,53 +220,53 @@ public partial class NumberInput<NumberType> : InputBase where NumberType : INum
 	[Parameter]
 	public EventCallback<KeyboardEventArgs> OnKeyDown { get; set; }
 
-	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;
-				}
-		}
-
-		if ((key.Equals("-") || key.Equals("-")) && _value.Contains(key)) result = false;
-		return result;
-	}
-
-	private bool _preventDefaultAction = true;
-	public async Task ChangeValue(KeyboardEventArgs args)
-	{
-		_preventDefaultAction = true;
-		if (args is not null)
-		{
-			var key = args.Key.ToString().ToLower();
-
-			if (CheckKey(key))
-			{
-				_preventDefaultAction = false;
-
-				await OnKeyDown.InvokeAsync(args);
-			}
-		}
-		else
-		{
-			args.Key = null;
-		}
-	}
+	//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;
+	//			}
+	//	}
+
+	//	if ((key.Equals("-") || key.Equals("-")) && _value.Contains(key)) result = false;
+	//	return result;
+	//}
+
+	//private bool _preventDefaultAction = true;
+	//public async Task ChangeValue(KeyboardEventArgs args)
+	//{
+	//	_preventDefaultAction = true;
+	//	if (args is not null)
+	//	{
+	//		var key = args.Key.ToString().ToLower();
+
+	//		if (CheckKey(key))
+	//		{
+	//			_preventDefaultAction = false;
+
+	//			await OnKeyDown.InvokeAsync(args);
+	//		}
+	//	}
+	//	else
+	//	{
+	//		args.Key = null;
+	//	}
+	//}
 
 	/// <summary>
 	/// Method for adjusting decimal places provided with parameter
@@ -259,8 +290,10 @@ public partial class NumberInput<NumberType> : InputBase where NumberType : INum
 	/// <returns></returns>
 	private async Task Clear()
 	{
-		var val = Helper.ConvertToType<NumberType>(null);
-		await ValueChanged.InvokeAsync(val);
+		//var val = Helper.ConvertToType<NumberType>(null);
+		Value = default(NumberType);
+		isValueNull = true;
+		await ValueChanged.InvokeAsync(Value);
 	}
 
 	#region Lifecycle
diff --git a/src/Connected.Components/Components/NumberStepper.razor b/src/Connected.Components/Components/NumberStepper.razor
index 042ae57..d0dc8df 100644
--- a/src/Connected.Components/Components/NumberStepper.razor
+++ b/src/Connected.Components/Components/NumberStepper.razor
@@ -1,6 +1,6 @@
 @typeparam NumberType
 
-<div class="form-group-alt" style="width:50%">
+<div class="form-group-alt">
     <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>
diff --git a/src/Connected.Components/Components/ToggleGlyphButton.razor b/src/Connected.Components/Components/ToggleGlyphButton.razor
index 6e6c789..73de04a 100644
--- a/src/Connected.Components/Components/ToggleGlyphButton.razor
+++ b/src/Connected.Components/Components/ToggleGlyphButton.razor
@@ -9,12 +9,12 @@
         <div style="align-items:center">
             @if (GlyphPosition == Position.Top)
             {
-                <Glyph SVG="@Glyph" Color="@GlyphColor" />
+                <Glyph SVG="@_ShownGlyph" Color="@GlyphColor" />
             }
             @ChildContent
             @if (GlyphPosition == Position.Bottom)
             {
-                <Glyph SVG="@Glyph" Color="@GlyphColor" />
+                <Glyph SVG="@_ShownGlyph" Color="@GlyphColor" />
             }
         </div>
     </div>
diff --git a/src/Connected.Components/Components/ToggleGlyphButton.razor.cs b/src/Connected.Components/Components/ToggleGlyphButton.razor.cs
index 9878734..eceac3e 100644
--- a/src/Connected.Components/Components/ToggleGlyphButton.razor.cs
+++ b/src/Connected.Components/Components/ToggleGlyphButton.razor.cs
@@ -55,6 +55,16 @@ public partial class ToggleGlyphButton: Button
 	[Parameter]
 	public Color ToggledGlyphColor { get; set; } = Color.Dark;
 
+	private string _ShownGlyph
+	{
+		get
+		{
+			if (Toggled)
+				return ToggledGlyph;
+			return Glyph;
+		}
+	}
+
 	#endregion
 
 	#region Events
diff --git a/src/Connected.Components/Connected.Components.csproj b/src/Connected.Components/Connected.Components.csproj
index 68de09a..aa53687 100644
--- a/src/Connected.Components/Connected.Components.csproj
+++ b/src/Connected.Components/Connected.Components.csproj
@@ -28,7 +28,7 @@
 	</ItemGroup>
 
 	<ItemGroup>
-		<PackageReference Include="Microsoft.AspNetCore.Components" Version="7.0.3" />
+		<PackageReference Include="Microsoft.AspNetCore.Components" Version="7.0.*" />
 		<PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="7.0.*-*" />
 	</ItemGroup>