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

@@ -1,71 +1,20 @@
 @page "/"
-@using Connected.Models;
 @using Connected.Components;
+@using Connected.Enums;
+@using Connected.Models.Modal;
+@using Connected.Models;
+@using Connected.Services;
+@using Connected.Utilities;
 
+<h1 style="text-align:center;">Component Example page</h1>
 
-<h1 style="text-align:center;">Component Sandbox</h1>
-
-<Grid>
-    @for (int i = 0; i < 5; i++)
-    {
-        int num = i;
-        <GridRow>
-            <GridRowContent>
-                Fixed content @num.ToString()
-            </GridRowContent>
-            <GridRowContent Collapsable=true>
-                Collapsable content @num.ToString()
-            </GridRowContent>
-        </GridRow>
-    }
-</Grid>
-
-<p>Izbran datum je: @date</p>
-
-<FormWizard Id="Wizard1">
-    <FormWizardStep Name="Step1">
-        Step1
-    </FormWizardStep>
-    <FormWizardStep Name="Step2">
-        Step2
-    </FormWizardStep>
-    <FormWizardStep Name="Step3">
-        Step3
-    </FormWizardStep>
-    <FormWizardStep Name="Step4">
-        Step4
-    </FormWizardStep>
-</FormWizard>
-<DatePicker @bind-SelectedDate=@date>
- 
-</DatePicker>
-
-<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>
+<ul>
+    <li><Link Class="m-1" Url="modal" Text="Modal dialog" Target="Target.Self"  /></li>
+    <li><Link Class="m-1" Url="button" Text="Button" Target="Target.Self" /></li>
+</ul>
 
-<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();
-    }
 }

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">@LabelText</label>
-            <div class="input-helper-text">@HelperText</div>
-            <div class="input-error-text">@ErrorText</div>
+            <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>
             <span class="input-glyph-wraper">
                 <span class="input-glyph">
                     <span class="input-glyph button" @onclick="TogglePicker">
@@ -20,6 +20,7 @@
             </span>
         </div>
 
+
         @if (Shown)
         {
             <!-- DatePicker header -->
@@ -95,11 +96,6 @@
                                         <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))">

src/Connected.Components/Components/DatePicker.razor.cs

@@ -30,15 +30,6 @@ 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;
 
@@ -48,8 +39,6 @@ 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
@@ -95,17 +84,25 @@ public partial class DatePicker
 
 	public void SetStartStop()
 	{
-		CalendarStart = new DateTime(SelectedDate.Year,SelectedDate.Month,1);
-		CalendarEnd = CalendarStart.AddMonths(1).AddMinutes(-1);
-		offset=0;
-		DateTime temp = CalendarStart;
+		CalendarStart = SelectedDate;
+		while (CalendarStart.Day != 1)
+		{
+			CalendarStart = CalendarStart.AddDays(-1);
+		}
 		while (!CalendarStart.DayOfWeek.Equals(DayOfWeek.Monday))
 		{
 			CalendarStart = CalendarStart.AddDays(-1);
-			offset++;
 		}
-
-		DateTime start = CalendarStart.AddDays(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;
 		if (ShowingDates is null) ShowingDates = new();
 		ShowingDates.Clear();
 		while (start.CompareTo(CalendarEnd) < 0)

src/Connected.Components/Components/FormWizard.razor

@@ -1,12 +1,13 @@
 <CascadingValue Value="this">
+    
     <section id="@Id" class="@ClassList" style="@StyleList">
-        <div class="form-outer ">
+        <div class="form-outer">
             @ChildContent
         </div>
 
-        <div class="btn-content justify-space-between">
+        <div class="btn-box text-right my-5 d-flex justify-space-between">
             <button type="button" href="#" class="btn btn-secondary" aria-pressed="true" disabled="@WizardFinished" @onclick="CancelClick">Cancel</button>
-            <div class="btn-group">
+            <div>
                 <button type="button" @onclick="PreviousSlide" class="btn btn-core mr-2" aria-pressed="true" disabled="@WizardFinished"><i class='bx bx-chevron-left'></i>@PreviousBtnText</button>
                 <button type="button" @onclick="NextSlide" class="btn btn-core mr-2" aria-pressed="true" disabled="@WizardFinished">@NextBtnText<i class='bx bx-chevron-right'></i></button>
             </div>

src/Connected.Components/Components/Grid.razor.cs

@@ -37,4 +37,5 @@ public partial class Grid: ComponentBase
 				.Build();
 		}
 	}
+
 }

src/Connected.Components/Components/NumberInput.razor

@@ -5,45 +5,53 @@
 @typeparam NumberType
 
 <div class="@InputFieldClassList">
-    <input type="number"
-           disabled="@Disabled"
-           readonly="@Readonly"
+    <input type="text"
            placeholder="@Placeholder"
            step="@Step"
-           value="@Value"
+           disabled="@Disabled"
+           readonly="@Readonly"
+           required="@Required"
+           value="@_value"
+           @onkeydown=@(args => ChangeValue(args))
+           @onkeydown:preventDefault="@_preventDefaultAction"
+           @oninput=@SetValueAsync
            @onmousewheel=@OnMouseWheel
-           @onwheel="OnMouseWheel"
-           @oninput=@SetNumberValueAsync
-           @attributes="@InputAttributes"
            @onchange="@Change"
-           required="@Required" />
+           @onwheel="OnMouseWheel"
+           @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>
     }
-
-    @if (!isValueNull || IsError)
-    {
     <span class="input-glyph-wraper">
-            @if (!isValueNull)
+        <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()))
             {
                 <span class="input-glyph button" @onclick="Clear">
-                    <Glyph SVG="@Icons.Material.Rounded.Dangerous" Class="icon-root svg-icon" />
+                    <Glyph SVG="@Icons.Material.Rounded.Dangerous" />
                 </span>
             }
             @if (IsError)
             {
                 <span class="input-glyph error">
-                    <Glyph SVG="@Icons.Material.Outlined.Error" Class="icon-root svg-icon" />
+                    <Glyph SVG="@Icons.Material.Outlined.Error" />
                 </span>
             }
         </span>
-    }
+    </span>
 </div>

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

@@ -42,12 +42,10 @@ 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;
 		}
 
@@ -73,13 +71,11 @@ 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);
@@ -108,19 +104,7 @@ public partial class NumberInput<NumberType> : InputBase where NumberType : INum
 		}
 	}
 
-	private bool isValueNull { get; set; } = true;
-
-	private bool IsValueSet()
-	{
-		bool result = false;
-		if (Value is not null)
-		{
-			result= true;
-		}
-		return result;
-	}
-
-	//private string? _value;
+	private string? _value;
 
 
 	/// <summary>
@@ -130,28 +114,28 @@ public partial class NumberInput<NumberType> : InputBase where NumberType : INum
 	/// </summary>
 	[Parameter]
 	[EditorRequired]
-	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;
-	//	}
-	//}
+	public NumberType? Value
+	{
+		get
+		{
+			if (string.IsNullOrEmpty(_value))
+				return default;
+			else
+			{
+				try
+				{
+					return Helper.ConvertToType<NumberType>(_value);
+				} catch
+				{
+					return default;
+				}
+			}
+		}
+		set
+		{
+			_value = value?.ToString();
+		}
+	}
 
 	/// <summary>
 	/// Number of decimal places for Value. If set, Value is corrected when input looses focus
@@ -161,48 +145,33 @@ 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("-", "");
-
-	//			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)
+	public async Task SetValueAsync(ChangeEventArgs args)
 	{
 		if (args.Value is not null)
 		{
-			if (!string.IsNullOrEmpty(args.Value.ToString()))
-			{
-				Value = Helper.ConvertToType<NumberType>(args.Value);
-				isValueNull = false;
-			} else
+			var newVal = args.Value.ToString()!;
+
+			if (!newVal.Equals("0"))
 			{
-				isValueNull = true;
+				if (newVal.ToString().Contains("-"))
+					newVal = "-" + newVal.ToString().Replace("-", "");
+
+				if (newVal.ToString().ToLower().Contains("e"))
+					newVal = "e" + newVal.ToString().Replace("e", "");
 			}
-			await ValueChanged.InvokeAsync(Value);
+
+			if (string.IsNullOrEmpty(newVal))
+				await ValueChanged.InvokeAsync(default);
+
+			if (!newVal.Equals(_value))
+				await ValueChanged.InvokeAsync(Helper.ConvertToType<NumberType>(newVal));
 		}
 	}
 
@@ -210,7 +179,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);
 	}
 
@@ -220,53 +189,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
@@ -290,10 +259,8 @@ public partial class NumberInput<NumberType> : InputBase where NumberType : INum
 	/// <returns></returns>
 	private async Task Clear()
 	{
-		//var val = Helper.ConvertToType<NumberType>(null);
-		Value = default(NumberType);
-		isValueNull = true;
-		await ValueChanged.InvokeAsync(Value);
+		var val = Helper.ConvertToType<NumberType>(null);
+		await ValueChanged.InvokeAsync(val);
 	}
 
 	#region Lifecycle

src/Connected.Components/Components/NumberStepper.razor

@@ -1,17 +0,0 @@
-@typeparam NumberType
-
-<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>
-        </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>

src/Connected.Components/Components/NumberStepper.razor.cs

@@ -1,98 +0,0 @@
-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);
-		}
-	}
-}

src/Connected.Components/Components/ToggleGlyphButton.razor

@@ -9,12 +9,12 @@
         <div style="align-items:center">
             @if (GlyphPosition == Position.Top)
             {
-                <Glyph SVG="@_ShownGlyph" Color="@GlyphColor" />
+                <Glyph SVG="@Glyph" Color="@GlyphColor" />
             }
             @ChildContent
             @if (GlyphPosition == Position.Bottom)
             {
-                <Glyph SVG="@_ShownGlyph" Color="@GlyphColor" />
+                <Glyph SVG="@Glyph" Color="@GlyphColor" />
             }
         </div>
     </div>

src/Connected.Components/Components/ToggleGlyphButton.razor.cs

@@ -55,16 +55,6 @@ 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