From 3c256f989f1a7a7317d171c01f412b5a5501384c Mon Sep 17 00:00:00 2001
From: stm <stm@tompit.com>
Date: Mon, 30 Jan 2023 07:55:53 +0100
Subject: [PATCH] ComponentsN - new components

---
 .../Components/Alert/Alert.razor              |   1 +
 .../Components/Button/GlyphButton.razor       |  27 ++++
 .../Components/Button/GlyphButton.razor.cs    |  54 +++++++
 .../Components/Button/ToggleGlyphButton.razor |  13 ++
 .../Button/ToggleGlyphButton.razor.cs         |  89 +++++++++++
 .../Components/Link/Link_old.razor            |   6 +
 .../Components/Link/Link_old.razor.cs         |  99 ++++++++++++
 .../ComponentsN/Alert.razor                   |  26 +++
 .../ComponentsN/Alert.razor.cs                |  90 +++++++++++
 .../ComponentsN/Button.razor                  |   8 +
 .../ComponentsN/Button.razor.cs               |  92 +++++++++++
 .../ComponentsN/Glyph.razor                   |   4 +
 .../ComponentsN/Glyph.razor.cs                |  44 ++++++
 .../ComponentsN/ISelect.cs                    |  11 ++
 .../ComponentsN/InputDate.razor               |   7 +
 .../ComponentsN/InputDate.razor.cs            |  63 ++++++++
 .../ComponentsN/InputNumber.razor             |  10 ++
 .../ComponentsN/InputNumber.razor.cs          |  77 +++++++++
 .../ComponentsN/InputText.razor               |  27 ++++
 .../ComponentsN/InputText.razor.cs            | 124 +++++++++++++++
 .../ComponentsN/Link.razor                    |   7 +
 .../ComponentsN/Link.razor.cs                 |  49 ++++++
 .../ComponentsN/Select.razor                  |  33 ++++
 .../ComponentsN/Select.razor.cs               |  63 ++++++++
 .../ComponentsN/SelectItem.razor              |   5 +
 .../ComponentsN/SelectItem.razor.cs           |  20 +++
 .../ComponentsN/ToggleButton.razor            |   5 +
 .../ComponentsN/ToggleButton.razor.cs         | 148 ++++++++++++++++++
 .../Connected.Components.csproj               |   7 +
 src/Connected.Components/Enums/LinkTarget.cs  |   9 ++
 30 files changed, 1218 insertions(+)
 create mode 100644 src/Connected.Components/Components/Button/GlyphButton.razor
 create mode 100644 src/Connected.Components/Components/Button/GlyphButton.razor.cs
 create mode 100644 src/Connected.Components/Components/Button/ToggleGlyphButton.razor
 create mode 100644 src/Connected.Components/Components/Button/ToggleGlyphButton.razor.cs
 create mode 100644 src/Connected.Components/Components/Link/Link_old.razor
 create mode 100644 src/Connected.Components/Components/Link/Link_old.razor.cs
 create mode 100644 src/Connected.Components/ComponentsN/Alert.razor
 create mode 100644 src/Connected.Components/ComponentsN/Alert.razor.cs
 create mode 100644 src/Connected.Components/ComponentsN/Button.razor
 create mode 100644 src/Connected.Components/ComponentsN/Button.razor.cs
 create mode 100644 src/Connected.Components/ComponentsN/Glyph.razor
 create mode 100644 src/Connected.Components/ComponentsN/Glyph.razor.cs
 create mode 100644 src/Connected.Components/ComponentsN/ISelect.cs
 create mode 100644 src/Connected.Components/ComponentsN/InputDate.razor
 create mode 100644 src/Connected.Components/ComponentsN/InputDate.razor.cs
 create mode 100644 src/Connected.Components/ComponentsN/InputNumber.razor
 create mode 100644 src/Connected.Components/ComponentsN/InputNumber.razor.cs
 create mode 100644 src/Connected.Components/ComponentsN/InputText.razor
 create mode 100644 src/Connected.Components/ComponentsN/InputText.razor.cs
 create mode 100644 src/Connected.Components/ComponentsN/Link.razor
 create mode 100644 src/Connected.Components/ComponentsN/Link.razor.cs
 create mode 100644 src/Connected.Components/ComponentsN/Select.razor
 create mode 100644 src/Connected.Components/ComponentsN/Select.razor.cs
 create mode 100644 src/Connected.Components/ComponentsN/SelectItem.razor
 create mode 100644 src/Connected.Components/ComponentsN/SelectItem.razor.cs
 create mode 100644 src/Connected.Components/ComponentsN/ToggleButton.razor
 create mode 100644 src/Connected.Components/ComponentsN/ToggleButton.razor.cs
 create mode 100644 src/Connected.Components/Enums/LinkTarget.cs

diff --git a/src/Connected.Components/Components/Alert/Alert.razor b/src/Connected.Components/Components/Alert/Alert.razor
index 8f72876..cda4f67 100644
--- a/src/Connected.Components/Components/Alert/Alert.razor
+++ b/src/Connected.Components/Components/Alert/Alert.razor
@@ -2,6 +2,7 @@
 
 @inherits UIComponent
 
+
 <div role="alert" class="@CompiledClassList" @attributes="CustomAttributes" @onclick="Clicked">
 	<div name="alert-content" class="alert-content">
 
diff --git a/src/Connected.Components/Components/Button/GlyphButton.razor b/src/Connected.Components/Components/Button/GlyphButton.razor
new file mode 100644
index 0000000..60ef2a8
--- /dev/null
+++ b/src/Connected.Components/Components/Button/GlyphButton.razor
@@ -0,0 +1,27 @@
+@namespace Connected.Components
+
+@inherits ButtonBase
+
+@using Connected.Components;
+
+<Element disabled="@Disabled"
+         title="@GlyphTitle"
+         type="@ButtonType.ToString()"
+         ClassList="@CompiledClassList.ToString()"
+         HtmlTag="@HtmlTag"
+         PreventOnClickPropagation="PreventOnClickPropagation"
+         @attributes="CustomAttributes"
+         @onclick="OnClick">
+   @if (!String.IsNullOrEmpty(Glyph))
+   {
+      <span name="glyph-container" class="glyph-button-label">
+         <Icon Glyph="@Glyph" />
+      </span>
+   }
+   else
+   {
+      <TextContent Typo="Typo.body2">
+         @ChildContent
+      </TextContent>
+   }
+</Element>
diff --git a/src/Connected.Components/Components/Button/GlyphButton.razor.cs b/src/Connected.Components/Components/Button/GlyphButton.razor.cs
new file mode 100644
index 0000000..bff5752
--- /dev/null
+++ b/src/Connected.Components/Components/Button/GlyphButton.razor.cs
@@ -0,0 +1,54 @@
+using Connected.Utilities;
+using Microsoft.AspNetCore.Components;
+
+namespace Connected.Components;
+
+public partial class GlyphButton : ButtonBase
+{
+	#region Content
+	/// <summary>
+	/// The Icon that will be used in the component.
+	/// </summary>
+	[Parameter]
+	public string? Glyph { get; set; }
+
+	/// <summary>
+	/// GlyphTitle of the icon used for accessibility.
+	/// </summary>
+	[Parameter]
+	public string? GlyphTitle { get; set; }
+
+	/// <summary>
+	/// Child content of component, only shows if Glyph is null or Empty.
+	/// </summary>
+	[Parameter]
+	public RenderFragment? ChildContent { get; set; }
+
+	#endregion
+
+	#region Styling
+	/// <summary>
+	/// A space separated list of class names, added on top of the default class list.
+	/// </summary>
+	[Parameter]
+	public string? ClassList { get; set; }
+
+	/// <summary>
+	/// The variant to use.
+	/// </summary>
+	[Parameter]
+	public Variant Variant { get; set; } = Variant.Text;
+
+	/// <summary>
+	/// Contains the default container classlist and the user defined classes.
+	/// </summary>
+	private CssBuilder CompiledClassList
+	{
+		get
+		{
+			return new CssBuilder("button-root glyph-button")
+				.AddClass(ClassList);
+		}
+	}
+	#endregion
+}
diff --git a/src/Connected.Components/Components/Button/ToggleGlyphButton.razor b/src/Connected.Components/Components/Button/ToggleGlyphButton.razor
new file mode 100644
index 0000000..545c071
--- /dev/null
+++ b/src/Connected.Components/Components/Button/ToggleGlyphButton.razor
@@ -0,0 +1,13 @@
+@namespace Connected.Components
+
+@inherits UIComponent
+
+<GlyphButton aria-pressed="@Toggled.ToString()"
+             ClassList="@ClassList"
+             Clicked="Toggle"
+             Disabled="Disabled"
+             Glyph="@(Toggled ? ToggledGlyph : Glyph)"
+             GlyphTitle="@(Toggled && ToggledGlyphTitle != null ? ToggledGlyphTitle : GlyphTitle)"
+             Variant="Variant"
+             @attributes="CustomAttributes" 
+/>
diff --git a/src/Connected.Components/Components/Button/ToggleGlyphButton.razor.cs b/src/Connected.Components/Components/Button/ToggleGlyphButton.razor.cs
new file mode 100644
index 0000000..d441950
--- /dev/null
+++ b/src/Connected.Components/Components/Button/ToggleGlyphButton.razor.cs
@@ -0,0 +1,89 @@
+using Microsoft.AspNetCore.Components;
+
+namespace Connected.Components;
+
+public partial class ToggleGlyphButton : UIComponent
+{
+	#region Events
+	/// <summary>
+	/// Fires whenever toggled is changed. 
+	/// </summary>
+	[Parameter]
+	public EventCallback<bool> ToggledChanged { get; set; }
+
+	public async Task Toggle()
+	{
+		await SetToggledAsync(!Toggled);
+	}
+
+	protected internal async Task SetToggledAsync(bool toggled)
+	{
+		if (Disabled)
+			return;
+
+		if (Toggled != toggled)
+		{
+			Toggled = toggled;
+
+			if (!ToggledChanged.HasDelegate)
+				return;
+
+			await ToggledChanged.InvokeAsync(Toggled);
+		}
+	}
+
+	#endregion
+
+	#region Content
+	/// <summary>
+	/// The glyph that will be used in the untoggled state.
+	/// </summary>
+	[Parameter]
+	public string? Glyph { get; set; }
+
+	/// <summary>
+	/// GlyphTitle of the icon used for accessibility.
+	/// </summary>
+	[Parameter]
+	public string? GlyphTitle { get; set; }
+
+	/// <summary>
+	/// The glyph that will be used in the toggled state.
+	/// </summary>
+	[Parameter]
+	public string? ToggledGlyph { get; set; }
+
+	/// <summary>
+	/// GlyphTitle used in toggled state, if different.
+	/// </summary>
+	[Parameter]
+	public string? ToggledGlyphTitle { get; set; }
+	#endregion
+
+	#region Styling
+	/// <summary>
+	/// A space separated list of class names, added on top of the default class list.
+	/// </summary>
+	[Parameter]
+	public string? ClassList { get; set; }
+
+	/// <summary>
+	/// The variant to use.
+	/// </summary>
+	[Parameter]
+	public Variant Variant { get; set; } = Variant.Text;
+
+	/// <summary>
+	/// If true, the button will be disabled.
+	/// </summary>
+	[Parameter]
+	public bool Disabled { get; set; }
+
+	/// <summary>
+	/// The button toggled state.
+	/// </summary>
+	[Parameter]
+	public bool Toggled { get; set; }
+
+	#endregion
+}
diff --git a/src/Connected.Components/Components/Link/Link_old.razor b/src/Connected.Components/Components/Link/Link_old.razor
new file mode 100644
index 0000000..5793864
--- /dev/null
+++ b/src/Connected.Components/Components/Link/Link_old.razor
@@ -0,0 +1,6 @@
+@namespace Connected.Components
+@inherits UIComponent
+
+<a @attributes="Attributes" @onclick="OnClickHandler" class="@Classname">
+    @ChildContent
+</a>
\ No newline at end of file
diff --git a/src/Connected.Components/Components/Link/Link_old.razor.cs b/src/Connected.Components/Components/Link/Link_old.razor.cs
new file mode 100644
index 0000000..efc4f9b
--- /dev/null
+++ b/src/Connected.Components/Components/Link/Link_old.razor.cs
@@ -0,0 +1,99 @@
+using Connected.Annotations;
+using Connected.Extensions;
+using Connected.Utilities;
+using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Web;
+
+namespace Connected.Components;
+
+public partial class Link_old : UIComponent
+{
+
+	#region Events
+	/// <summary>
+	/// Link click event.
+	/// </summary>
+	[Parameter] public EventCallback<MouseEventArgs> OnClick { get; set; }
+
+	protected async Task OnClickHandler(MouseEventArgs ev)
+	{
+		if (Disabled) return;
+		await OnClick.InvokeAsync(ev);
+	}
+	#endregion
+
+	#region Content
+	private Dictionary<string, object> Attributes
+	{
+		get => Disabled ? CustomAttributes : new Dictionary<string, object>(CustomAttributes)
+		 {
+			 { "href", Href },
+			 { "target", Target }
+		 };
+	}
+	/// <summary>
+	/// The URL, which is the actual link.
+	/// </summary>
+	[Parameter]
+	[Category(CategoryTypes.Link.Behavior)]
+	public string Href { get; set; }
+
+	/// <summary>
+	/// The target attribute specifies where to open the link, if Link is specified. Possible values: _blank | _self | _parent | _top | <i>framename</i>
+	/// </summary>
+	[Parameter]
+	[Category(CategoryTypes.Link.Behavior)]
+	public string Target { get; set; }
+	#endregion
+
+	#region Styling
+	protected string Classname =>
+	new CssBuilder("typography mud-link")
+		.AddClass($"{Color.ToDescription()}-text")
+	  .AddClass($"link-underline-{Underline.ToDescription()}")
+	  .AddClass($"typography-{Typo.ToDescription()}")
+	  // When Href is empty, link's hover cursor is text "I beam" even when Clicked has a delegate.
+	  // To change this for more expected look change hover cursor to a pointer:
+	  .AddClass("cursor-pointer", Href == default && OnClick.HasDelegate && !Disabled)
+	  .AddClass($"link-disabled", Disabled)
+	  .AddClass(AdditionalClassList)
+	.Build();
+
+	/// <summary>
+	/// Child content of component.
+	/// </summary>
+	[Parameter]
+	[Category(CategoryTypes.Link.Behavior)]
+	public RenderFragment ChildContent { get; set; }
+
+	/// <summary>
+	/// The color of the component. It supports the theme colors.
+	/// </summary>
+	[Parameter]
+	[Category(CategoryTypes.Link.Appearance)]
+	public ThemeColor Color { get; set; } = ThemeColor.Primary;
+
+	/// <summary>
+	/// Typography variant to use.
+	/// </summary>
+	[Parameter]
+	[Category(CategoryTypes.Link.Appearance)]
+	public Typo Typo { get; set; } = Typo.body1;
+
+	/// <summary>
+	/// Controls when the link should have an underline.
+	/// </summary>
+	[Parameter]
+	[Category(CategoryTypes.Link.Appearance)]
+	public Underline Underline { get; set; } = Underline.Hover;
+
+	/// <summary>
+	/// If true, the navlink will be disabled.
+	/// </summary>
+	[Parameter]
+	[Category(CategoryTypes.Link.Behavior)]
+	public bool Disabled { get; set; }
+
+	#endregion
+
+}
diff --git a/src/Connected.Components/ComponentsN/Alert.razor b/src/Connected.Components/ComponentsN/Alert.razor
new file mode 100644
index 0000000..3c52893
--- /dev/null
+++ b/src/Connected.Components/ComponentsN/Alert.razor
@@ -0,0 +1,26 @@
+@if (Closed == false)
+{
+	<div role="alert" class="@CompiledClassList">
+		<div name="alert-content" class="alert-content">
+
+			@if (ShowGlyph)
+			{
+				<div class="alert-icon alert-icon-left">
+					<Glyph SVG="@Glyph" />
+				</div>
+			}
+
+			<div class="alert-message">
+				@ChildContent
+				@Text
+			</div>
+		</div>
+
+		@if (ShowCloseButton)
+		{
+			<div class="alert-close">
+				<Glyph SVG="@CloseButton" Click="OnCloseClick" />
+			</div>
+		}
+	</div>
+}
diff --git a/src/Connected.Components/ComponentsN/Alert.razor.cs b/src/Connected.Components/ComponentsN/Alert.razor.cs
new file mode 100644
index 0000000..897c386
--- /dev/null
+++ b/src/Connected.Components/ComponentsN/Alert.razor.cs
@@ -0,0 +1,90 @@
+using Connected.Utilities;
+using Microsoft.AspNetCore.Components;
+
+namespace Connected.ComponentsN;
+public partial class Alert
+{
+	[Parameter]
+	public bool ShowGlyph { get; set; } = true;
+	private string Glyph { get; set; } = string.Empty;
+
+	[Parameter]
+	public bool ShowCloseButton { get; set; } = false;
+
+	private string CloseButton { get; set; } = Icons.Material.Outlined.Close;
+	
+	[Parameter]
+	public bool Closed { get; set; } = false;
+
+	[Parameter, EditorRequired]
+	public string Text { get; set; } = string.Empty;
+
+	[Parameter]
+	public Severity Severity { get; set;} = Severity.Normal;
+
+	protected override async Task OnParametersSetAsync()
+	{
+		switch (Severity)
+		{
+			case Severity.Normal:
+				{
+					Glyph = Icons.Material.Outlined.EventNote;
+					break;
+				}
+			case Severity.Info:
+				{
+					Glyph = Icons.Material.Outlined.Info;
+					break;
+				}
+			case Severity.Success:
+				{
+					Glyph = Icons.Custom.Uncategorized.AlertSuccess;
+					break;
+				}
+			case Severity.Warning:
+				{
+					Glyph = Icons.Material.Outlined.ReportProblem;
+					break;
+				}
+			case Severity.Error:
+				{
+					Glyph = Icons.Material.Filled.ErrorOutline;
+					break;
+				}
+			default:
+				{
+					Glyph = Icons.Material.Outlined.EventNote;
+					break;
+				}
+		}
+		await base.OnParametersSetAsync();
+	}
+
+	/// <summary>
+	/// Child content of the component.
+	/// </summary>
+	[Parameter]
+	public RenderFragment? ChildContent { get; set; }
+
+	private void OnCloseClick()
+	{
+		Closed = true;
+		StateHasChanged();
+	}
+
+	[Parameter]
+	public string ClassList { get; set; } = string.Empty;
+	/// <summary>
+	/// Contains the default container classlist and the user defined classes.
+	/// </summary>
+	private string CompiledClassList
+	{
+		get
+		{
+			return new CssBuilder("alert")
+				.AddClass($"alert-text-{Severity}")
+				.AddClass(ClassList)
+				.Build();
+		}
+	}
+}
diff --git a/src/Connected.Components/ComponentsN/Button.razor b/src/Connected.Components/ComponentsN/Button.razor
new file mode 100644
index 0000000..f4c882b
--- /dev/null
+++ b/src/Connected.Components/ComponentsN/Button.razor
@@ -0,0 +1,8 @@
+<button 
+    onclick="@OnClick" 
+    class="@ButtonClassList" 
+    style="@ButtonStyleList" 
+    onmouseover="@HoverOn" 
+    onmouseout="@HoverOff">
+    @Text
+</button>
\ No newline at end of file
diff --git a/src/Connected.Components/ComponentsN/Button.razor.cs b/src/Connected.Components/ComponentsN/Button.razor.cs
new file mode 100644
index 0000000..2136c90
--- /dev/null
+++ b/src/Connected.Components/ComponentsN/Button.razor.cs
@@ -0,0 +1,92 @@
+using Connected.Utilities;
+using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Web;
+
+namespace Connected.ComponentsN;
+public partial class Button
+{
+    /// <summary>
+    /// Text shown inside the button
+    /// </summary>
+    [Parameter]
+    public string Text { get; set; } = string.Empty;
+
+    [Parameter]
+    /// <summary>
+    /// Button click event.
+    /// </summary>
+    public EventCallback<MouseEventArgs> Click { get; set; }
+    protected async Task OnClick(MouseEventArgs e)
+    {
+        await Click.InvokeAsync(e);
+
+    }
+    /// <summary>
+    /// Disabled or enabled property of the button. Default: false
+    /// </summary>
+    [Parameter]
+    public bool Disabled { get; set; } = false;
+
+    /// <summary>
+    /// Glyph for the button. 
+    /// Default: string.Empty
+    /// </summary>
+    [Parameter]
+    public string Glyph { get; set; } = string.Empty;
+
+    /// <summary>
+    /// Position of the glyph relative to button Text parameter. Default: GlyphPosition.LEFT (Possible options: GlyphPosition.LEFT, GlyphPosition.TOP, GlyphPosition.RIGHT, GlyphPosition.BOTTOM)
+    /// If Glyph parameter is empty this parameter is ignored
+    /// </summary>
+    [Parameter]
+    public Position GlyphPosition { get; set; } = Position.Left;
+
+    /// <summary>
+    /// HEX value of the color for the glyph custom color. Default: black (#000000)
+    /// If Glyph parameter is empty this parameter is ignored
+    /// </summary>
+    [Parameter]
+    public string GlyphColor { get; set; } = "#000000";
+
+    [Parameter]
+    public string Class { get; set; } = string.Empty;
+
+    private string ButtonClassList
+    {
+        get
+        {
+            return new CssBuilder()
+                .AddClass(Class)
+                .Build();
+        }
+    }
+
+    [Parameter]
+    public string Style { get; set; } = string.Empty;
+
+    private string ButtonStyleList
+    {
+        get
+        {
+            return new StyleBuilder()
+                .AddStyle(Style)
+                .Build();
+        }
+    }
+
+	/// <summary>
+	/// When mouse is over the component
+	/// </summary>
+	/// <returns></returns>
+	public async Task HoverOn()
+	{
+	}
+
+	/// <summary>
+	/// When mouse is away from component
+	/// </summary>
+	/// <returns></returns>
+	public async Task HoverOff()
+	{
+	}
+}
diff --git a/src/Connected.Components/ComponentsN/Glyph.razor b/src/Connected.Components/ComponentsN/Glyph.razor
new file mode 100644
index 0000000..78c061c
--- /dev/null
+++ b/src/Connected.Components/ComponentsN/Glyph.razor
@@ -0,0 +1,4 @@
+
+    <svg height="@Height" width="@Width" style="fill:@Color;" class="@GlyphClassList" @onclick="@OnClick">
+        @((MarkupString)SVG)
+    </svg>
\ No newline at end of file
diff --git a/src/Connected.Components/ComponentsN/Glyph.razor.cs b/src/Connected.Components/ComponentsN/Glyph.razor.cs
new file mode 100644
index 0000000..aafbee9
--- /dev/null
+++ b/src/Connected.Components/ComponentsN/Glyph.razor.cs
@@ -0,0 +1,44 @@
+using Connected.Utilities;
+using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Web;
+
+namespace Connected.ComponentsN
+{
+    public partial class Glyph
+    {
+        [Parameter]
+        public string SVG { get; set; } = string.Empty;
+
+        [Parameter]
+        public string Color { get; set; } = "#000000";
+
+        [Parameter]
+        public int Width { get; set; } = 30;
+        [Parameter]
+        public int Height { get; set; } = 30;
+
+			[Parameter]
+			public string Class { get; set; } = string.Empty;
+
+			private string GlyphClassList
+			{
+				get
+				{
+					return new CssBuilder()
+						 .AddClass(Class)
+						 .Build();
+				}
+			}
+
+		[Parameter]
+		/// <summary>
+		/// Button click event.
+		/// </summary>
+		public EventCallback<MouseEventArgs> Click { get; set; }
+		protected async Task OnClick(MouseEventArgs e)
+		{
+			await Click.InvokeAsync(e);
+
+		}
+	}
+}
\ No newline at end of file
diff --git a/src/Connected.Components/ComponentsN/ISelect.cs b/src/Connected.Components/ComponentsN/ISelect.cs
new file mode 100644
index 0000000..0f458ed
--- /dev/null
+++ b/src/Connected.Components/ComponentsN/ISelect.cs
@@ -0,0 +1,11 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace Connected.ComponentsN;
+internal interface ISelect
+{
+	public object FilterItems();
+}
diff --git a/src/Connected.Components/ComponentsN/InputDate.razor b/src/Connected.Components/ComponentsN/InputDate.razor
new file mode 100644
index 0000000..7c66b20
--- /dev/null
+++ b/src/Connected.Components/ComponentsN/InputDate.razor
@@ -0,0 +1,7 @@
+<div>
+    <input 
+            @bind="@Value"
+            @oninput="ChangeValueAsync"
+            type="datetime-local"
+            data-date-format="@Format">
+</div>
\ No newline at end of file
diff --git a/src/Connected.Components/ComponentsN/InputDate.razor.cs b/src/Connected.Components/ComponentsN/InputDate.razor.cs
new file mode 100644
index 0000000..aac0ae2
--- /dev/null
+++ b/src/Connected.Components/ComponentsN/InputDate.razor.cs
@@ -0,0 +1,63 @@
+
+using Connected.Utilities;
+using Microsoft.AspNetCore.Components;
+
+namespace Connected.ComponentsN;
+public partial class InputDate
+{
+    #region parameters
+    /// <summary>
+    /// Class 
+    /// </summary>
+    [Parameter]
+    public string Class { get; set; }
+
+    private string FixedInputClassList
+    {
+        get
+        {
+            return new CssBuilder()
+                .AddClass(Class)
+                .Build();
+        }
+    }
+    private InputType InputType { get; set; } = InputType.Date;
+
+    /// <summary>
+    /// Show clear button.
+    /// </summary>
+    [Parameter]
+    public bool ShowClearButton { get; set; } = false;
+
+    [Parameter]
+    public string ErrorText { get; set; } = string.Empty;
+
+    [Parameter]
+    public string Label { get; set; } = string.Empty;
+
+    [Parameter]
+    public string Format { get; set; } = "DD.MM.YYYY";
+
+    #endregion
+
+    #region Variables
+    private string _clearIcon = Icons.Material.Filled.Clear;
+
+    #endregion
+
+    [Parameter]
+    public DateTime Value { get; set; }
+
+    [Parameter]
+    public EventCallback<DateTime> ValueChanged { get; set; }
+
+    private async Task ChangeValueAsync(ChangeEventArgs args)
+    {
+        DateTime value = DateTime.Parse(args.Value.ToString());
+        await ValueChanged.InvokeAsync(value);
+    }
+
+    #region Lifecycle
+
+    #endregion
+}
diff --git a/src/Connected.Components/ComponentsN/InputNumber.razor b/src/Connected.Components/ComponentsN/InputNumber.razor
new file mode 100644
index 0000000..107439b
--- /dev/null
+++ b/src/Connected.Components/ComponentsN/InputNumber.razor
@@ -0,0 +1,10 @@
+@typeparam Type
+
+<div>
+    <input 
+            @bind="@Value"
+            @oninput="ChangeValueAsync"
+            type="number"
+            step="@Step"
+    />
+</div>
\ No newline at end of file
diff --git a/src/Connected.Components/ComponentsN/InputNumber.razor.cs b/src/Connected.Components/ComponentsN/InputNumber.razor.cs
new file mode 100644
index 0000000..44f5740
--- /dev/null
+++ b/src/Connected.Components/ComponentsN/InputNumber.razor.cs
@@ -0,0 +1,77 @@
+using Connected.Utilities;
+using Microsoft.AspNetCore.Components;
+
+namespace Connected.ComponentsN;
+public partial class InputNumber<Type>
+{
+    #region parameters
+    /// <summary>
+    /// Class 
+    /// </summary>
+    [Parameter]
+    public string Class { get; set; }
+
+    private string InputFieldClassList
+    {
+        get
+        {
+            return new CssBuilder()
+                .AddClass(Class)
+                .Build();
+        }
+    }
+
+    /// <summary>
+    /// Type of the input element. It should be a valid HTML5 input type.
+    /// </summary>
+    private InputType InputType { get; set; } = InputType.Number;
+
+    /// <summary>
+    /// Show clear button.
+    /// </summary>
+    [Parameter]
+    public bool ShowClearButton { get; set; } = false;
+
+    /// <summary>
+    /// The show input character counter
+    /// </summary>
+    [Parameter]
+    public bool ShowCharacterCounter { get; set; }
+
+    [Parameter]
+    public string ErrorText { get; set; } = string.Empty;
+
+    [Parameter]
+    public string Label { get; set; } = string.Empty;
+
+    /// <summary>
+    /// Step of Numeric field up/down. Only used when InputType.Number is used 
+    /// </summary>
+    [Parameter]
+    public double Step { get; set; } = 1;
+
+    #endregion
+
+    #region Variables
+    private string _clearIcon = Icons.Material.Filled.Clear;
+
+    #endregion
+
+    [Parameter]
+    public Type Value { get; set; }
+
+    [Parameter]
+    public EventCallback<Type> ValueChanged { get; set; }
+
+    private async Task ChangeValueAsync(ChangeEventArgs args)
+    {
+        Type param = (Type)Convert.ChangeType(args.Value, typeof(Type));
+
+
+        await ValueChanged.InvokeAsync(param);
+    }
+
+    #region Lifecycle
+
+    #endregion
+}
diff --git a/src/Connected.Components/ComponentsN/InputText.razor b/src/Connected.Components/ComponentsN/InputText.razor
new file mode 100644
index 0000000..b3ce9f2
--- /dev/null
+++ b/src/Connected.Components/ComponentsN/InputText.razor
@@ -0,0 +1,27 @@
+<div>
+    @if (NumOfLines > 1)
+    {
+        <textarea 
+            @bind="@Value"
+            @oninput="ChangeValueAsync"
+              rows="@NumOfLines"
+              required="@Required"
+              disabled="@Disabled"
+              readonly="@Readonly"
+              class="@InputFieldClassList"
+            placeholder="@Placeholder">
+            @Value
+        </textarea>
+    } else
+    {
+        <input 
+            @bind="@Value"
+            @oninput="ChangeValueAsync"
+            type="@InputType"
+            placeholder="@Placeholder"
+            required="@Required"
+            disabled="@Disabled"
+            readonly="@Readonly"
+           class="@InputFieldClassList" />
+    }
+</div>
\ No newline at end of file
diff --git a/src/Connected.Components/ComponentsN/InputText.razor.cs b/src/Connected.Components/ComponentsN/InputText.razor.cs
new file mode 100644
index 0000000..2e89a6c
--- /dev/null
+++ b/src/Connected.Components/ComponentsN/InputText.razor.cs
@@ -0,0 +1,124 @@
+
+using Connected.Utilities;
+using Microsoft.AspNetCore.Components;
+
+namespace Connected.ComponentsN;
+public partial class InputText
+{
+    #region parameters
+    /// <summary>
+    /// Class 
+    /// </summary>
+    [Parameter]
+    public string Class { get; set; }
+
+    private string InputFieldClassList
+    {
+        get
+        {
+            return new CssBuilder()
+                .AddClass(Class)
+                .Build();
+        }
+    }
+
+    private InputType InputType { get; set; } = InputType.Text;
+
+    [Parameter]
+    public bool IsPasswordField { get; set; } = false;
+
+    /// <summary>
+    /// Show clear button.
+    /// </summary>
+    [Parameter]
+    public bool Clearable { get; set; } = false;
+
+    /// <summary>
+    /// Required property
+    /// </summary>
+    [Parameter]
+    public bool Required { get; set; } = false;
+
+    /// <summary>
+    /// Show clear button.
+    /// </summary>
+    [Parameter]
+    public bool Disabled { get; set; } = false;
+
+    /// <summary>
+    /// Show clear button.
+    /// </summary>
+    [Parameter]
+    public bool Readonly { get; set; } = false;
+
+    /// <summary>
+    /// The show input character counter
+    /// </summary>
+    [Parameter]
+    public bool ShowCharCounter { get; set; }
+
+    [Parameter]
+    public string ErrorText { get; set; } = string.Empty;
+
+    [Parameter]
+    public string Label { get; set; } = string.Empty;
+
+    [Parameter]
+    public string Placeholder { get; set; } = string.Empty;
+
+
+    /// <summary>
+    /// If more than 1, we have a textarea with defined number of lines
+    /// </summary>
+    [Parameter]
+    public int NumOfLines
+    {
+        get
+        {
+            return _numberOfLines;
+        }
+        set
+        {
+            if (value < 1)
+            {
+                _numberOfLines = 1;
+            }
+            else
+            {
+                _numberOfLines = value;
+            }
+        }
+    }
+    private int _numberOfLines = 1;
+
+    #endregion
+
+    #region Variables
+    private string _clearIcon = Icons.Material.Filled.Clear;
+
+    #endregion
+
+    [Parameter]
+    public string Value { get; set; }
+
+    [Parameter]
+    public EventCallback<string> ValueChanged { get; set; }
+
+    private async Task ChangeValueAsync(ChangeEventArgs args)
+    {
+
+        await ValueChanged.InvokeAsync(args.Value.ToString());
+    }
+
+    #region Lifecycle
+
+    protected async Task OnParametersSetAsync()
+    {
+        if (IsPasswordField) InputType = InputType.Password;
+
+
+        await base.OnParametersSetAsync();
+    }
+
+    #endregion
+}
\ No newline at end of file
diff --git a/src/Connected.Components/ComponentsN/Link.razor b/src/Connected.Components/ComponentsN/Link.razor
new file mode 100644
index 0000000..deea63d
--- /dev/null
+++ b/src/Connected.Components/ComponentsN/Link.razor
@@ -0,0 +1,7 @@
+<a 
+    class="@LinkClassList"
+    style="@LinkStyleList"
+    href="@Url" 
+    target="@Target" >
+    @Text
+</a>
diff --git a/src/Connected.Components/ComponentsN/Link.razor.cs b/src/Connected.Components/ComponentsN/Link.razor.cs
new file mode 100644
index 0000000..ad73986
--- /dev/null
+++ b/src/Connected.Components/ComponentsN/Link.razor.cs
@@ -0,0 +1,49 @@
+using Connected.Utilities;
+using Microsoft.AspNetCore.Components;
+
+namespace Connected.ComponentsN;
+public partial class Link
+{
+    [Parameter, EditorRequired]
+    public string Url { get; set; } = string.Empty;
+
+    [Parameter, EditorRequired]
+    public string Text { get; set; } = string.Empty;
+
+    [Parameter, EditorRequired]
+    public string Target { get; set; } = "_self";
+
+    [Parameter]
+    public string Class { get; set; } = string.Empty;
+
+    private string LinkClassList
+    {
+        get
+        {
+            return new CssBuilder()
+                .AddClass(Class)
+                .Build();
+        }
+    }
+
+    [Parameter]
+    public string Style { get; set; } = string.Empty;
+
+    private string LinkStyleList
+    {
+        get
+        {
+            return new StyleBuilder()
+                .AddStyle(Style)
+                .Build();
+        }
+    }
+
+    protected override async Task OnParametersSetAsync()
+    {
+        if (string.IsNullOrEmpty(Text)) Text = Url;
+        await base.OnParametersSetAsync();
+    }
+}
+
+
diff --git a/src/Connected.Components/ComponentsN/Select.razor b/src/Connected.Components/ComponentsN/Select.razor
new file mode 100644
index 0000000..c4c3e62
--- /dev/null
+++ b/src/Connected.Components/ComponentsN/Select.razor
@@ -0,0 +1,33 @@
+@typeparam ValueType
+
+<style>
+    .selectbox {
+        width: 150px;
+        height: 100px;
+        background: red;
+        transition: height 0.05s;
+        overflow:hidden;
+    }
+
+    .selectbox:hover {
+        height: 400px;
+    }
+</style>
+
+<div class="selectbox @CompiledClassList">
+    @if (SearchFieldEnabled)
+    {
+        //search field
+    }
+
+    @foreach (SelectItem<ValueType> item in Items)
+    {
+        <Connected.ComponentsN.SelectItem ValueType="ValueType" Text="@item.Text" Value="item.Value" />
+    }
+
+
+    @if (_pagination()>1)
+    {
+            //pagination
+    }
+</div>
diff --git a/src/Connected.Components/ComponentsN/Select.razor.cs b/src/Connected.Components/ComponentsN/Select.razor.cs
new file mode 100644
index 0000000..7480c9c
--- /dev/null
+++ b/src/Connected.Components/ComponentsN/Select.razor.cs
@@ -0,0 +1,63 @@
+using Connected.Utilities;
+using Microsoft.AspNetCore.Components;
+namespace Connected.ComponentsN;
+public partial class Select<ValueType>
+{
+
+	[Parameter]
+	public bool SearchFieldEnabled { get; set; } = false;
+
+	[Parameter]
+	public int MaxVisibleItems { get; set; } = 7;
+
+	[Parameter]
+	public List<SelectItem<ValueType>> Items
+	{
+		get{
+			if (FilterText.Length > 0)
+			{
+				return _items.Where(i => i.Value.ToString().Contains(FilterText) || i.Text.ToString().Contains(FilterText)).ToList();
+			}
+			return _items;
+		}
+		set {
+			_items= value;
+		}
+	}
+
+	private List<SelectItem<ValueType>> _items = new List<SelectItem<ValueType>>();
+
+	private int ItemsCount => Items.Count();
+
+	
+	[Parameter]
+	public int SelectedIndex { get; set; } = 0;
+
+	[Parameter]
+	public string FilterText { get; set; } = string.Empty;
+
+	private int _pagination()
+	{
+		int result = 0;
+		if (MaxVisibleItems<ItemsCount)
+		{
+			result = (int)(ItemsCount / MaxVisibleItems) + (ItemsCount % MaxVisibleItems);
+		}
+		return result;
+	}
+
+	[Parameter]
+	public string ClassList { get; set; } = string.Empty;
+	/// <summary>
+	/// Contains the default container classlist and the user defined classes.
+	/// </summary>
+	private string CompiledClassList
+	{
+		get
+		{
+			return new CssBuilder()
+				.AddClass(ClassList)
+				.Build();
+		}
+	}
+}
diff --git a/src/Connected.Components/ComponentsN/SelectItem.razor b/src/Connected.Components/ComponentsN/SelectItem.razor
new file mode 100644
index 0000000..c13d41f
--- /dev/null
+++ b/src/Connected.Components/ComponentsN/SelectItem.razor
@@ -0,0 +1,5 @@
+@typeparam ValueType
+
+<div>
+    @Text
+</div>
diff --git a/src/Connected.Components/ComponentsN/SelectItem.razor.cs b/src/Connected.Components/ComponentsN/SelectItem.razor.cs
new file mode 100644
index 0000000..1d9a2ed
--- /dev/null
+++ b/src/Connected.Components/ComponentsN/SelectItem.razor.cs
@@ -0,0 +1,20 @@
+using Microsoft.AspNetCore.Components;
+
+namespace Connected.ComponentsN;
+public partial class SelectItem<ValueType>
+{
+	[Parameter, EditorRequired]
+	public ValueType Value { get; set; }
+	[Parameter]
+	public string Text { get; set; } = string.Empty;
+
+	protected override async Task OnParametersSetAsync()
+	{
+		if (string.IsNullOrEmpty(Text)) {
+		
+			if (Value is not null)
+				Text = Value.ToString();
+		}
+		await base.OnParametersSetAsync();
+	}
+}
diff --git a/src/Connected.Components/ComponentsN/ToggleButton.razor b/src/Connected.Components/ComponentsN/ToggleButton.razor
new file mode 100644
index 0000000..8cb11a4
--- /dev/null
+++ b/src/Connected.Components/ComponentsN/ToggleButton.razor
@@ -0,0 +1,5 @@
+@using Connected.ComponentsN
+
+<button onclick="@OnClick" style="@ButtonStyleList" onmouseover="@HoverOn" onmouseout="@HoverOff">
+    @Text
+</button>
\ No newline at end of file
diff --git a/src/Connected.Components/ComponentsN/ToggleButton.razor.cs b/src/Connected.Components/ComponentsN/ToggleButton.razor.cs
new file mode 100644
index 0000000..d7ccbcf
--- /dev/null
+++ b/src/Connected.Components/ComponentsN/ToggleButton.razor.cs
@@ -0,0 +1,148 @@
+using Connected.Utilities;
+using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Web;
+
+namespace Connected.ComponentsN;
+public partial class ToggleButton
+{
+	/// <summary>
+	/// Define state of ToggleButton: Default: false
+	/// </summary>
+	[Parameter]
+	public bool Toggled { get; set; } = false;
+
+	private void Toggle()
+	{
+		Toggled=!Toggled;
+		StateHasChanged();
+	}
+
+	#region Text content
+	/// <summary>
+	/// default Text shown inside the button
+	/// </summary>
+	[Parameter]
+    public string Text { get; set; } = string.Empty;
+	/// <summary>
+	/// Text of toggled button shown inside the button
+	/// </summary>
+	[Parameter]
+	public string ToggleText { get; set; } = string.Empty;
+
+	private string TextToShow()
+	{
+		if (Toggled) return ToggleText;
+		return Text;
+	}
+
+	#endregion
+
+	#region Glyph
+	/// <summary>
+	/// Glyph for the button. 
+	/// Default: string.Empty
+	/// </summary>
+	[Parameter]
+	public string Glyph { get; set; } = string.Empty;
+
+	/// <summary>
+	/// Glyph for the button. 
+	/// Default: string.Empty
+	/// </summary>
+	[Parameter]
+	public string ToggleGlyph { get; set; } = string.Empty;
+
+	private string GlyphToShow()
+	{
+		if (Toggled) return ToggleGlyph;
+		return Glyph;
+	}
+
+	/// <summary>
+	/// Position of the glyph relative to button Text parameter. Default: Position.Left (Possible options: Top,Bottom,Center,Left,Right,Start,End)
+	/// If Glyph parameter is empty this parameter is ignored
+	/// </summary>
+	[Parameter]
+	public Position GlyphPosition { get; set; } = Position.Left;
+
+	/// <summary>
+	/// HEX value of the color for the glyph custom color. Default: black (#000000)
+	/// If Glyph parameter is empty this parameter is ignored
+	/// </summary>
+	[Parameter]
+	public string GlyphColor { get; set; } = "#000000";
+
+	/// <summary>
+	/// HEX value of the color for the glyph custom color. Default: black (#000000)
+	/// If Glyph parameter is empty this parameter is ignored
+	/// </summary>
+	[Parameter]
+	public string ToggleGlyphColor { get; set; } = "#000000";
+
+	private string GlyphColorToUse()
+	{
+		if (Toggled) return ToggleGlyphColor;
+		return GlyphColor;
+	}
+
+	#endregion
+
+
+	[Parameter]
+    /// <summary>
+    /// Button click event.
+    /// </summary>
+    public EventCallback<MouseEventArgs> Click { get; set; }
+    protected async Task OnClick(MouseEventArgs e)
+    {
+        await Click.InvokeAsync(e);
+    }
+
+    /// <summary>
+    /// Disabled or enabled property of the button. Default: false
+    /// </summary>
+    [Parameter]
+    public bool Disabled { get; set; } = false;
+
+    [Parameter]
+    public string Class { get; set; } = string.Empty;
+
+    private string ButtonClassList
+    {
+        get
+        {
+            return new CssBuilder()
+                .AddClass(Class)
+                .Build();
+        }
+    }
+
+    [Parameter]
+    public string Style { get; set; } = string.Empty;
+
+    private string ButtonStyleList
+    {
+        get
+        {
+            return new StyleBuilder()
+                .AddStyle(Style)
+                .Build();
+        }
+    }
+
+	/// <summary>
+	/// When mouse is over the component
+	/// </summary>
+	/// <returns></returns>
+	public async Task HoverOn()
+	{
+	}
+
+	/// <summary>
+	/// When mouse is away from component
+	/// </summary>
+	/// <returns></returns>
+	public async Task HoverOff()
+	{
+	}
+}
diff --git a/src/Connected.Components/Connected.Components.csproj b/src/Connected.Components/Connected.Components.csproj
index 54aabe4..00911ab 100644
--- a/src/Connected.Components/Connected.Components.csproj
+++ b/src/Connected.Components/Connected.Components.csproj
@@ -17,6 +17,13 @@
 
 	<ItemGroup>
 		<None Include="compilerconfig.json" />
+		<None Include="ComponentsN\ToggleButton.razor" />
+		<None Include="ComponentsN\Button.razor" />
+		<None Include="ComponentsN\Glyph.razor" />
+		<None Include="ComponentsN\Link.razor" />
+		<None Include="ComponentsN\InputDate.razor" />
+		<None Include="ComponentsN\InputNumber.razor" />
+		<None Include="ComponentsN\InputText.razor" />
 	</ItemGroup>
 
 
diff --git a/src/Connected.Components/Enums/LinkTarget.cs b/src/Connected.Components/Enums/LinkTarget.cs
new file mode 100644
index 0000000..ff00801
--- /dev/null
+++ b/src/Connected.Components/Enums/LinkTarget.cs
@@ -0,0 +1,9 @@
+namespace Connected.Enums;
+
+public enum LinkTarget
+{
+    _blank,   //Opens the linked document in a new window or tab
+    _self, // Opens the linked document in the same frame as it was clicked(this is default)
+    _parent, // Opens the linked document in the parent frame
+    _top //	Opens the linked document in the full body of the window
+}