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

@@ -4,11 +4,30 @@
 
 <h1 style="text-align:center;">Component Sandbox</h1>
 
-<DatePicker @bind-SelectedDate=date>
+<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 
+CloseOnDateSelect=true
+@bind-SelectedDate=@date>
 
 </DatePicker>
 
-<p>Izbran datum je: @date</p>
+<TextInput @bind-Value="@value"></TextInput>
+<p>Selected date is @date.ToString()</p>
+
+@value
 
 @code {
     DateTime date = DateTime.Today;

src/Connected.Components/Components/DatePicker.razor

@@ -21,21 +21,16 @@
                 {
                     case Selecting.Years:
                         {
-                            <div class="@NavBarClass" style="@NavBarStyle">
+                            <div class="@NavBarClass">
-                                <div class="chip-group-content d-inline-flex">
+                                <div class="d-inline-block p-2" style="width:10%;text-align:left"><i class='bx bx-chevron-left'></i></div>
-                                    <div class="chip-leading-icon" @onclick="(async ()=>await NavBarClick(false))"><i class='bx bx-chevron-left'></i></div>
+                                <div class="d-inline-block" style="width:70%;text-align:center" @onclick=@(()=>Selecting = Selecting.Months)>@SelectedDate.ToString("yyyy")</div>
-                                </div>
+                                <div class="d-inline-block p-2" style="width:10%;text-align:right"><i class='bx bx-chevron-right'></i></div>
-                                <div class="d-inline-block" style="width:70%;text-align:center" @onclick=@(()=>Selecting = Selecting.Months)>@SelectedDate.ToString("MMMM yyyy")</div>
-                                <!--<div class="d-inline-block p-2" style="width:10%;text-align:right"><i class='bx bx-chevron-right'></i></div>-->
-                                <div class="chip-group-content d-inline-flex">
-                                    <div class="chip-leading-icon" @onclick="(async ()=>await NavBarClick())"><i class='bx bx-chevron-right'></i></div>
-                                </div>
                             </div>
                             @for (int i = SelectedDate.Year - 7; i < SelectedDate.Year + 8; i++)
                             {
                                 int y = i;
                                 <a href="#" @onclick="@(()=>SetYear(y))">
-                                    <div class="chip-group-content d-inline-flex bg-core @YearChipClass(y) m-1 b-1 b-r-3 text-light" style="width:30%;">
+                                    <div class="chip-group-content d-inline-flex bg-core m-1 b-1 b-r-3 text-light" style="width:30%;">
                                         <div class="chip-leading-icon"></div>
                                         <div class="chip-label">@i.ToString()</div>
                                         <div class="chip-cta-icon"></div>
@@ -51,22 +46,15 @@
                         }
                     case Selecting.Months:
                         {
-                            <div class="@NavBarClass" style="@NavBarStyle">
+                            <div class="@NavBarClass">
-                                <div class="chip-group-content d-inline-flex">
+                                <div class="d-inline-block p-2" style="width:10%;text-align:left"><i class='bx bx-chevron-left'></i></div>
-                                    <div class="chip-leading-icon" @onclick="(async ()=>await NavBarClick(false))"><i class='bx bx-chevron-left'></i></div>
-                                </div>
-
                                 <div class="d-inline-block" style="width:70%;text-align:center" @onclick=@(()=>Selecting = Selecting.Years)>@SelectedDate.ToString("MMMM yyyy")</div>
-
+                                <div class="d-inline-block p-2" style="width:10%;text-align:right"><i class='bx bx-chevron-right'></i></div>
-                                <!--<div class="d-inline-block p-2" style="width:10%;text-align:right"><i class='bx bx-chevron-right'></i></div>-->
-                                <div class="chip-group-content d-inline-flex">
-                                    <div class="chip-leading-icon" @onclick="(async ()=>await NavBarClick())"><i class='bx bx-chevron-right'></i></div>
-                                </div>
                             </div>
                             @for (int i = 1; i <= @DateTimeFormatInfo.CurrentInfo.MonthNames.Length - 1; i++)
                             {
                                 int m = i;
-                                <a href="#" @onclick="@(()=>SetMonth(m))" @ont>
+                                <a href="#" @onclick="@(()=>SetMonth(m))">
 
                                     <div class="chip-group-content d-inline-flex bg-core @MonthChipClass(m) m-1 b-1 b-r-3 text-light" style="width:30%;">
                                         <div class="chip-leading-icon"></div>
@@ -84,17 +72,10 @@
                         }
                     case (Selecting.Days):
                         {
-                            <div class="@NavBarClass" style="@NavBarStyle">
+                            <div class="@NavBarClass">
-                                <div class="chip-group-content d-inline-flex">
+                                <div class="d-inline-block p-2" style="width:10%;text-align:left"><i class='bx bx-chevron-left'></i></div>
-                                    <div class="chip-leading-icon" @onclick="(async ()=>await NavBarClick(false))"><i class='bx bx-chevron-left'></i></div>
-                                </div>
-
                                 <div class="d-inline-block" style="width:70%;text-align:center" @onclick=@(()=>Selecting = Selecting.Months)>@SelectedDate.ToString("MMMM yyyy")</div>
-
+                                <div class="d-inline-block p-2" style="width:10%;text-align:right"><i class='bx bx-chevron-right'></i></div>
-                                <!--<div class="d-inline-block p-2" style="width:10%;text-align:right"><i class='bx bx-chevron-right'></i></div>-->
-                                <div class="chip-group-content d-inline-flex">
-                                    <div class="chip-leading-icon" @onclick="(async ()=>await NavBarClick())"><i class='bx bx-chevron-right'></i></div>
-                                </div>
                             </div>
 
                             @for (int i = 0; i < 7; i++)
@@ -112,19 +93,16 @@
                                 {
                                     <br />
                                 }
+
                                 CalendarStart = CalendarStart.AddDays(1);
                             }
                             break;
                         }
                 }
-                @if (ShowBottomBar)
+            </div>
-                {
+            <!-- Bottom bar -->
-                    <!-- Bottom bar -->
+            <div>
-                    <div class="p-2" style="@NavBarStyle">
+                
-                        <Button Class="btn-sm" OnClick="(()=>Shown=!Shown)">X</Button>
-                        <Button Class="btn-sm" OnClick="(async () => await SetDate(SelectedDate, true))">OK</Button>
-                    </div>
-                }
             </div>
         }
     </div>

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

@@ -32,9 +32,6 @@ public partial class DatePicker
 	[Parameter]
 	public bool UseDateRange { get; set; } = false;
 
-	[Parameter]
-	public bool ShowBottomBar { get; set; } = false;
-
 	[Parameter]
 	public string Format { get; set; } = "dd.MM.yyyy";
 
@@ -53,14 +50,13 @@ public partial class DatePicker
 	}
 	private bool Shown { get; set; } = false;
 
-	public async Task SetDate(DateTime Date, bool HideOnSet=false)
+	public async Task SetDate(DateTime Date)
 	{
 		SelectedDate = Date;
 		SetStartStop();
 		if (CloseOnDateSelect)
 			Shown = false;
 		await SelectedDateChanged.InvokeAsync(SelectedDate);
-		if (HideOnSet) Shown = false;
 		StateHasChanged();
 	}
 
@@ -172,17 +168,17 @@ public partial class DatePicker
 	public string MonthChipClass(int month)
 	{
 		if (month.CompareTo(SelectedDate.Month) == 0)
-			return "bg-info text-white";
+			return "bg-info text-light";
 		else
-			return "bg-core text-light";
+			return "bg-core text-dark";
 	}
 
 	public string YearChipClass(int year)
 	{
 		if (year.CompareTo(SelectedDate.Year) == 0)
-			return "bg-info text-white";
+			return "bg-info text-light";
 		else
-			return "bg-core text-light";
+			return "bg-core text-dark";
 	}
 
 	protected override async Task OnInitializedAsync()
@@ -200,51 +196,12 @@ public partial class DatePicker
 			return new CssBuilder("text-justify")
 				.AddClass("text-md-justify")
 				//.AddClass("bg-warning")
-				.AddClass("p-2")
 				.AddClass("text-small")
 				.AddClass("text-dark")
 				.Build();
 		}
 	}
 
-	private string NavBarStyle
-	{
-		get
-		{
-			return new StyleBuilder("display","flex")
-				.AddStyle("flex-direction","row")
-				.AddStyle("flex-wrap","nowrap")
-				.AddStyle("justify-content","space-between")
-				.Build();
-		}
-	}
-
-	private async Task NavBarClick(bool forward = true)
-	{
-		int multiplier = 1;
-		if (!forward) multiplier = -1;
-		switch (Selecting)
-		{
-			case Selecting.Years:
-				{
-					SelectedDate=SelectedDate.AddYears(8 * multiplier);
-					break;
-				}
-			case Selecting.Months:
-				{
-					SelectedDate = SelectedDate.AddYears(1 * multiplier);
-					break;
-				}
-			case Selecting.Days: 
-				{
-					SelectedDate = SelectedDate.AddMonths(1*multiplier);
-					break;
-				}
-		}
-		SetStartStop();
-		await InvokeAsync(StateHasChanged);
-	}
-
 }
 
 public enum Selecting

src/Connected.Components/Components/TimePicker.razor

@@ -1,10 +0,0 @@
-<div>
-    <span>
-        <input id="hour" type="number" min="0" max="59" step="1" @bind-value="@Hour" />
-        <label for="hour">hrs</label>
-        <input id="minute" type="number" min="0" max="59" step="1" @bind-value="@Minute" />
-        <label for="minute">min</label>
-        <input id="minute" type="number" min="0" max="59" step="1" @bind-value="@Second" />
-        <label for="minute">sec</label>
-    </span>
-</div>

src/Connected.Components/Components/TimePicker.razor.cs

@@ -1,20 +0,0 @@
-using Microsoft.AspNetCore.Components;
-
-namespace Connected.Components;
-public partial class TimePicker: ComponentBase
-{
-	[Parameter]
-	public TimeOnly Time { get; set; } = TimeOnly.FromDateTime(DateTime.Now);
-
-	private int Hour = 0;
-	private int Minute = 0;
-	private int Second = 0;
-
-	protected override async Task OnParametersSetAsync()
-	{
-		Hour = Time.Hour; 
-		Minute = Time.Minute; 
-		Second = Time.Second;
-		await base.OnInitializedAsync();
-	}
-}

src/Connected.Components/Enums/TouchGesture.cs

@@ -1,22 +0,0 @@
-using System.ComponentModel;
-
-namespace Connected.Enums;
-public enum TouchGesture
-{
-	[Description("swipeleft")]
-	SwipeLeft,
-	[Description("swiperight")]
-	SwipeRight,
-	[Description("swipeup")]
-	SwipeUp,
-	[Description("swipedown")]
-	SwipeDown,
-	[Description("pinch")]
-	Pinch,
-	[Description("zoom")]
-	Zoom,
-	[Description("tap")]
-	Tap,
-	[Description("none")]
-	None,
-}

src/Connected.Components/Utilities/TouchGestures.cs

@@ -1,76 +0,0 @@
-using Connected.Enums;
-using Microsoft.AspNetCore.Components.Web;
-using System.Reflection.Metadata.Ecma335;
-
-namespace Connected.Utilities;
-public static class TouchGestures
-{
-	public static TouchGesture GetTouchGesture(TouchPoint[] TouchPoints, DateTime GestureStart)
-	{
-		try
-		{
-			if (TouchPoints is not null)
-			{
-				/* handling tap
-				 * TouchPoints --> array with one point inside suggesting user tapped the screen
-				 */
-				if (TouchPoints.Length == 1)
-				{
-					var point = TouchPoints[0];
-					return TouchGesture.Tap;
-				}
-				/* handling swipe with one finger 
-				 * TouchPoints --> array of exactly two points start and end point, suggesting one finger was used and dragged across the screen
-				 */
-				if (TouchPoints.Length == 2)
-				{
-					var startPoint = TouchPoints[0];
-					var endPoint = TouchPoints[1];
-
-					const double swipeThreshold = 0.8;
-					var diffX = startPoint.ClientX - endPoint.ClientX;
-					var diffY = startPoint.ClientY - endPoint.ClientY;
-					var diffTime = DateTime.Now - GestureStart;
-					var velocityX = Math.Abs(diffX / diffTime.Milliseconds);
-					var velocityY = Math.Abs(diffY / diffTime.Milliseconds);
-
-					//dismiss touch gestures if user slowly touched the screen, preventing accidental or unwanted touches
-					if (velocityX < swipeThreshold && velocityY < swipeThreshold) 
-							return TouchGesture.None;
-
-					//preventing false gesture detection if the swipe is too diagonal
-					if (Math.Abs(velocityX - velocityY) < 0.5) 
-						return TouchGesture.None;
-
-					if (velocityX >= swipeThreshold)
-					{
-						if (diffX < 0)
-							return TouchGesture.SwipeRight;
-						else
-							return TouchGesture.SwipeLeft;
-					}
-					if (velocityY >= swipeThreshold)
-					{
-						if (diffX < 0)
-							return TouchGesture.SwipeUp;
-						else
-							return TouchGesture.SwipeDown;
-					}
-				}
-				/* handling zoom, pinch, mutifinger swipe
-				 * TouchPoints --> array of more than 2 points, suggesting two or more fingers were used to make a gesture
-				 */
-				if (TouchPoints.Length > 2)
-				{
-					//TODO
-				}
-			}
-			return TouchGesture.None;
-		}
-		catch
-		{
-			return TouchGesture.None;
-		}
-
-	}
-}