Version updated

Co-authored-by: John Gold <john.gold@haulerhub.com>

.github/workflows/ci.yml

@@ -0,0 +1,26 @@
+# This workflow will build a .NET project
+# For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-net
+
+name: .NET
+
+on:
+  push:
+    branches: [ "master" ]
+  pull_request:
+    branches: [ "master" ]
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/checkout@v3
+    - name: Setup .NET
+      uses: actions/setup-dotnet@v3
+      with:
+        dotnet-version: 7.0.x
+    - name: Build
+      run: dotnet build Radzen.Blazor/Radzen.Blazor.csproj
+    - name: Test
+      run: dotnet test Radzen.Blazor.Tests/Radzen.Blazor.Tests.csproj

.gitignore

@@ -8,6 +8,7 @@
 *.user
 *.userosscache
 *.sln.docstates
+global.json
 
 # User-specific files (MonoDevelop/Xamarin Studio)
 *.userprefs
@@ -333,3 +334,10 @@ issues.json
 
 Radzen.Blazor/wwwroot/css/
 project.csproj
+RadzenBlazorDemos/wwwroot/docs/
+Radzen.DocFX/obj/
+Radzen.DocFX/_site/
+Radzen.DocFX/_exported_templates
+Radzen.DocFX/api/*.yml
+!Radzen.DocFX/api/index.md
+Radzen.DocFX/api/.manifest

CONTRIBUTING.md

@@ -5,23 +5,21 @@
 This is a set of guidelines for contributing to Radzen.Blazor.
 
 ## Asking questions
-
 Please don't open an issue to ask a question about using Radzen.Blazor components. You can check the following resources instead:
 
-- [Online demos](https://blazor.radzen.com)
-
+### [Online demos](https://blazor.radzen.com)
 A showcase application that demonstrates all Radzen.Blazor components. You will find various use cases that demonstrate the component features and API. The source 
 of the demos is available [here](https://github.com/radzenhq/radzen-blazor/tree/master/RadzenBlazorDemos).
-- [Documentation](https://www.radzen.com/documentation/blazor/accordion/)
 
+### [Documentation](https://blazor.radzen.com/docs/)
 Technical documentation and API reference.
-- [Online forum](https://forum.radzen.com)
 
+### [Community forum](https://forum.radzen.com)
 You can ask your question here. Please use the [Radzen.Blazor Components](https://forum.radzen.com/c/blazor-components/10) category.
 
-- Dedicated technical support
+### Dedicated technical support
 
-Radzen staff provides technical support with guaranteed response time to Radzen Professional and Enterprise subscribers. The pricing options are available [here](https://www.radzen.com/pricing/).
+Radzen staff provides technical support with guaranteed response time to Radzen Professional and Enterprise subscribers. The pricing options are available [here](https://www.radzen.com/blazor-studio/pricing/).
 
 ## How Can I Contribute?
 
@@ -67,7 +65,8 @@ Explain the enhancement and include additional details:
 If you want to contribute a new feature of fix a bug you can open a pull request. 
 
 Make sure you follow this procedure:
-
+* **Important!!!** if you itent to make a lot of changes in a pull request open an issue to discuss this with us first. The Radzen Blazor Components have a lot of
+moving parts and making big changes should be done with extra precautions. 
 * **Be sure that none of the existing tests** breaks after your changes. The test project is available [here](https://github.com/radzenhq/radzen-blazor/tree/master/Radzen.Blazor.Tests).
 * **If possible add new tests that verify your fix or new feature**. 
 * **Follow the existing coding style** (to be described in detail later).

Dockerfile

@@ -0,0 +1,31 @@
+# syntax=docker/dockerfile:1
+FROM mono:latest
+
+ENV DOCFX_VER 2.58.4
+
+RUN apt-get update && apt-get install unzip wget git -y && wget -q -P /tmp https://github.com/dotnet/docfx/releases/download/v${DOCFX_VER}/docfx.zip && \
+    mkdir -p /opt/docfx && \
+    unzip /tmp/docfx.zip -d /opt/docfx && \
+    echo '#!/bin/bash\nmono /opt/docfx/docfx.exe $@' > /usr/bin/docfx && \
+    chmod +x /usr/bin/docfx && \
+    rm -rf /tmp/*
+
+COPY Radzen.Blazor /app/Radzen.Blazor
+COPY Radzen.DocFX /app/DocFX
+COPY RadzenBlazorDemos /app/RadzenBlazorDemos
+COPY RadzenBlazorDemos.Host /app/RadzenBlazorDemos.Host
+WORKDIR /app
+RUN docfx DocFX/docfx.json
+
+FROM mcr.microsoft.com/dotnet/sdk:7.0
+
+COPY --from=0 /app/RadzenBlazorDemos.Host /app/RadzenBlazorDemos.Host
+COPY --from=0 /app/RadzenBlazorDemos /app/RadzenBlazorDemos
+
+WORKDIR /app/RadzenBlazorDemos.Host
+RUN dotnet publish -c Release -o out
+
+ENV ASPNETCORE_URLS http://*:5000
+WORKDIR /app/RadzenBlazorDemos.Host/out
+
+ENTRYPOINT ["dotnet", "RadzenBlazorDemos.Host.dll"]

LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2018-2021 Radzen Ltd
+Copyright (c) 2018-2023 Radzen Ltd
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -1,43 +1,118 @@
-# Radzen Blazor Components
+![Radzen Blazor Components](RadzenBlazorDemos/wwwroot/images/radzen-blazor-components.png)
 
-The home of the [Radzen Blazor components](https://blazor.radzen.com)
+<h1 align="center">
+    Radzen Blazor Components
+</h1>
 
-## Commercial support
+<p align="center">
+    A set of <strong>70+ free and open source</strong> native Blazor UI controls.
+</p>
 
-Paid support for the Radzen Blazor Components is available as part of the [Radzen Professional subscription](https://www.radzen.com/pricing/). 
+<div align="center">
 
-Our flagship product Radzen provides tons of productivity features for Blazor developers:
-- The first in the industry WYSIWYG Blazor design time canvas
+[See Online Demos](https://blazor.radzen.com) or [Read the Docs](https://blazor.radzen.com/docs/)
+
+</div>
+
+---
+
+<p align="center">
+    <a href="https://github.com/radzenhq/radzen-blazor/blob/master/LICENSE">
+        <img alt="License - MIT" src="https://img.shields.io/github/license/radzenhq/radzen-blazor?logo=github&style=for-the-badge" />
+    </a>
+    <a href="https://www.nuget.org/packages/Radzen.Blazor">
+        <img alt="Nuget Downloads" src="https://img.shields.io/nuget/dt/Radzen.Blazor?color=%232694F9&label=nuget%20downloads&logo=nuget&style=for-the-badge" />
+    </a>
+    <img alt="Last Commit" src="https://img.shields.io/github/last-commit/radzenhq/radzen-blazor?logo=github&style=for-the-badge" />
+    <a href="https://github.com/radzenhq/radzen-blazor/graphs/contributors">
+        <img alt="Github Contributors" src="https://img.shields.io/github/contributors/radzenhq/radzen-blazor?logo=github&style=for-the-badge" />
+    </a>
+    <a href="https://blazor.radzen.com">
+        <img alt="Radzen Blazor Components - Online Demos" src="https://img.shields.io/badge/demos-online-brightgreen?color=%232694F9&logo=blazor&style=for-the-badge" />
+    </a>
+    <a href="https://blazor.radzen.com/docs">
+        <img alt="Radzen Blazor Components - Documentation" src="https://img.shields.io/badge/docs-online-brightgreen?color=%232694F9&logo=blazor&style=for-the-badge" />
+    </a>
+</p>
+
+## Why choose Radzen Blazor Components?
+
+### :sparkles: Free
+
+Radzen Blazor Components are open source and free for commercial use. You can install them from [nuget](https://www.nuget.org/packages/Radzen.Blazor) or build your own copy from source.
+
+Paid support is available as part of the [Radzen Professional subscription](https://www.radzen.com/blazor-studio/pricing/).
+
+### :computer: Native
+
+The components are implemented in C# and take full advantage of the Blazor framework. They do not depend on or wrap existing JavaScript frameworks or libraries.
+
+Blazor Server and Blazor WebAssembly are fully supported.
+
+### :seedling: Growing
+
+We add new components and features on a regular basis.
+
+Short development cycle. We release as soon as new stuff is available. No more quarterly releases.
+
+## Support exceeding your expectations
+
+### :speech_balloon: Community Support
+Everybody is welcome to visit the [Radzen Community forum](https://forum.radzen.com/). Join the growing community and participate in the discussions!
+
+### :dart: Dedicated Support
+
+The Radzen team monitors the forum threads, but does not guarantee a response to every question. For guaranteed responses you may consider the dedicated support option.
+
+Dedicated support for the Radzen Blazor Components is available as part of the [Radzen Professional subscription](https://www.radzen.com/blazor-studio/pricing/).
+
+Our flagship product [Radzen Blazor Studio](https://www.radzen.com/blazor-studio/) provides tons of productivity features for Blazor developers:
+- An industry-leading WYSIWYG Blazor design time canvas
 - Scaffolding a complete CRUD applications from a database
 - Built-in security - authentication and authorization
 - Visual Studio Code and Professional support
 - Deployment to IIS and Azure
 - Dedicated support with 24 hour guaranteed response time
-- Active community forum
 
-## Get started with the Radzen Blazor Components
+## Get started with Radzen Blazor Components
 
-### Install
+### 1. Install
 
-Radzen Blazor Components are distributed as the Radzen.Blazor nuget package. You can add them to your project in one of the following ways
-- Install the package from command line by running dotnet add package Radzen.Blazor
-- Add the project from the Visual Nuget Package Manager 
+Radzen Blazor Components are distributed as a [Radzen.Blazor nuget package](https://www.nuget.org/packages/Radzen.Blazor). You can add them to your project in one of the following ways
+- Install the package from command line by running `dotnet add package Radzen.Blazor`
+- Add the project from the Visual Nuget Package Manager
 - Manually edit the .csproj file and add a project reference
 
-### Import the namespace
+### 2. Import the namespace
 
 Open the `_Imports.razor` file of your Blazor application and add this line `@using Radzen.Blazor`.
 
-### Include a theme
+### 3. Include a theme
 
-Open the `_Host.cshtml` file (server-side Blazor) or `wwwroot/index.html` (client-side Blazor) and include a theme CSS file by adding this snippet `<link rel="stylesheet" href="_content/Radzen.Blazor/css/default.css">` or `<link rel="stylesheet" href="_content/Radzen.Blazor/css/default-base.css">` if you either include Bootstrap manually or don't use it at all.
+Radzen Blazor components come with five free themes: Material, Standard, Default, Dark, Software and Humanistic.
 
-### Include Radzen.Blazor.js
+To use a theme
+1. Pick a theme. The [online demos](https://blazor.radzen.com/colors) allow you to preview the available options via the theme dropdown located in the header. The Material theme is currently selected by default.
+1. Include the theme CSS file in your Blazor application. Open `Pages\_Layout.cshtml` (Blazor Server .NET 6), `Pages\_Host.cshtml` (Blazor Server .NET 7) or `wwwroot/index.html` (Blazor WebAssembly) and include a theme CSS file by adding this snippet
+   ```html
+   <link rel="stylesheet" href="_content/Radzen.Blazor/css/material-base.css">
+   ```
 
-Open the `_Host.cshtml` file (server-side Blazor) or `wwwroot/index.html` (client-side Blazor) and include this snippet `<script src="_content/Radzen.Blazor/Radzen.Blazor.js"></script>`
+To include a different theme (i.e. Standard) just change the name of the CSS file:
+```
+<link rel="stylesheet" href="_content/Radzen.Blazor/css/standard-base.css">
+```
 
-### Use a component
-Use any Radzen Blazor component by typing its tag name in a Blazor page e.g. 
+### 4. Include Radzen.Blazor.js
+
+Open `Pages\_Layout.cshtml` (Blazor Server .NET 6), `Pages\_Host.cshtml` (Blazor Server .NET 7) or `wwwroot/index.html` (Blazor WebAssembly) and include this snippet:
+
+```html
+<script src="_content/Radzen.Blazor/Radzen.Blazor.js"></script>
+```
+
+### 5. Use a component
+Use any Radzen Blazor component by typing its tag name in a Blazor page e.g.
 ```html
 <RadzenButton Text="Hi"></RadzenButton>
 ```
@@ -62,3 +137,6 @@ Use any Radzen Blazor component by typing its tag name in a Blazor page e.g.
   }
 }
 ```
+## Run demos locally
+
+Use Radzen.Server.sln to open and run demos as Blazor server application or Radzen.WebAssembly.sln to open and run demos as Blazor WebAssembly application. Radzen.sln has reference to all projects including tests.

Radzen.Blazor.Tests/AutoCompleteTests.cs

@@ -0,0 +1,74 @@
+using Xunit;
+
+namespace Radzen.Blazor.Tests
+{
+	public class AutoCompleteTests
+	{
+        [Fact]
+        public void AutoComplete_Enum_Converts_To_Attr_Value()
+        {
+            // Options
+            Assert.Equal("off", AutoCompleteType.Off.GetAutoCompleteValue());
+            Assert.Equal("on", AutoCompleteType.On.GetAutoCompleteValue());
+            Assert.Equal("name", AutoCompleteType.Name.GetAutoCompleteValue());
+            Assert.Equal("honorific-prefix", AutoCompleteType.HonorificPrefix.GetAutoCompleteValue());
+            Assert.Equal("given-name", AutoCompleteType.GivenName.GetAutoCompleteValue());
+            Assert.Equal("additional-name", AutoCompleteType.AdditionalName.GetAutoCompleteValue());
+            Assert.Equal("family-name", AutoCompleteType.FamilyName.GetAutoCompleteValue());
+            Assert.Equal("honorific-suffix", AutoCompleteType.HonorificSuffix.GetAutoCompleteValue());
+            Assert.Equal("nickname", AutoCompleteType.Nickname.GetAutoCompleteValue());
+            Assert.Equal("email", AutoCompleteType.Email.GetAutoCompleteValue());
+            Assert.Equal("username", AutoCompleteType.Username.GetAutoCompleteValue());
+            Assert.Equal("new-password", AutoCompleteType.NewPassword.GetAutoCompleteValue());
+            Assert.Equal("current-password", AutoCompleteType.CurrentPassword.GetAutoCompleteValue());
+            Assert.Equal("one-time-code", AutoCompleteType.OneTimeCode.GetAutoCompleteValue());
+            Assert.Equal("organization-title", AutoCompleteType.OrganizationTitle.GetAutoCompleteValue());
+            Assert.Equal("organization", AutoCompleteType.Organization.GetAutoCompleteValue());
+            Assert.Equal("street-address", AutoCompleteType.StreetAddress.GetAutoCompleteValue());
+            Assert.Equal("address-line1", AutoCompleteType.AddressLine1.GetAutoCompleteValue());
+            Assert.Equal("address-line2", AutoCompleteType.AddressLine2.GetAutoCompleteValue());
+            Assert.Equal("address-line3", AutoCompleteType.AddressLine3.GetAutoCompleteValue());
+            Assert.Equal("address-level1", AutoCompleteType.AddressLevel1.GetAutoCompleteValue());
+            Assert.Equal("address-level2", AutoCompleteType.AddressLevel2.GetAutoCompleteValue());
+            Assert.Equal("address-level3", AutoCompleteType.AddressLevel3.GetAutoCompleteValue());
+            Assert.Equal("address-level4", AutoCompleteType.AddressLevel4.GetAutoCompleteValue());
+            Assert.Equal("country", AutoCompleteType.Country.GetAutoCompleteValue());
+            Assert.Equal("country-name", AutoCompleteType.CountryName.GetAutoCompleteValue());
+            Assert.Equal("postal-code", AutoCompleteType.PostalCode.GetAutoCompleteValue());
+            Assert.Equal("cc-name", AutoCompleteType.CcName.GetAutoCompleteValue());
+            Assert.Equal("cc-given-name", AutoCompleteType.CcGivenName.GetAutoCompleteValue());
+            Assert.Equal("cc-additional-name", AutoCompleteType.CcAdditionalName.GetAutoCompleteValue());
+            Assert.Equal("cc-family-name", AutoCompleteType.CcFamilyName.GetAutoCompleteValue());
+            Assert.Equal("cc-number", AutoCompleteType.CcNumber.GetAutoCompleteValue());
+            Assert.Equal("cc-exp", AutoCompleteType.CcExp.GetAutoCompleteValue());
+            Assert.Equal("cc-exp-month", AutoCompleteType.CcExpMonth.GetAutoCompleteValue());
+            Assert.Equal("cc-exp-year", AutoCompleteType.CcExpYear.GetAutoCompleteValue());
+            Assert.Equal("cc-csc", AutoCompleteType.CcCsc.GetAutoCompleteValue());
+            Assert.Equal("cc-type", AutoCompleteType.CcType.GetAutoCompleteValue());
+            Assert.Equal("transaction-currency", AutoCompleteType.TransactionCurrency.GetAutoCompleteValue());
+            Assert.Equal("transaction-amount", AutoCompleteType.TransactionAmount.GetAutoCompleteValue());
+            Assert.Equal("language", AutoCompleteType.Language.GetAutoCompleteValue());
+            Assert.Equal("bday", AutoCompleteType.Bday.GetAutoCompleteValue());
+            Assert.Equal("bday-day", AutoCompleteType.BdayDay.GetAutoCompleteValue());
+            Assert.Equal("bday-month", AutoCompleteType.BdayMonth.GetAutoCompleteValue());
+            Assert.Equal("bday-year", AutoCompleteType.BdayYear.GetAutoCompleteValue());
+            Assert.Equal("sex", AutoCompleteType.Sex.GetAutoCompleteValue());
+            Assert.Equal("tel", AutoCompleteType.Tel.GetAutoCompleteValue());
+            Assert.Equal("tel-country-code", AutoCompleteType.TelCountryCode.GetAutoCompleteValue());
+            Assert.Equal("tel-national", AutoCompleteType.TelNational.GetAutoCompleteValue());
+            Assert.Equal("tel-area-code", AutoCompleteType.TelAreaCode.GetAutoCompleteValue());
+            Assert.Equal("tel-local", AutoCompleteType.TelLocal.GetAutoCompleteValue());
+            Assert.Equal("tel-extension", AutoCompleteType.TelExtension.GetAutoCompleteValue());
+            Assert.Equal("impp", AutoCompleteType.Impp.GetAutoCompleteValue());
+            Assert.Equal("url", AutoCompleteType.Url.GetAutoCompleteValue());
+            Assert.Equal("photo", AutoCompleteType.Photo.GetAutoCompleteValue());
+            // Synonyms
+            Assert.Equal("address-level1", AutoCompleteType.State.GetAutoCompleteValue());
+            Assert.Equal("address-level1", AutoCompleteType.Province.GetAutoCompleteValue());
+            Assert.Equal("postal-code", AutoCompleteType.ZipCode.GetAutoCompleteValue());
+            Assert.Equal("given-name", AutoCompleteType.FirstName.GetAutoCompleteValue());
+            Assert.Equal("additional-name", AutoCompleteType.MiddleName.GetAutoCompleteValue());
+            Assert.Equal("family-name", AutoCompleteType.LastName.GetAutoCompleteValue());
+        }
+    }
+}

Radzen.Blazor.Tests/BadgeTests.cs

@@ -0,0 +1,47 @@
+using Bunit;
+using Xunit;
+
+namespace Radzen.Blazor.Tests
+{
+    public class BadgeTests
+    {
+        [Fact]
+        public void Badge_Renders_TextParameter()
+        {
+            using var ctx = new TestContext();
+
+            var component = ctx.RenderComponent<RadzenBadge>();
+
+            var text = "Test";
+
+            component.SetParametersAndRender(parameters => parameters.Add(p => p.Text, text));
+
+            Assert.Contains(text, component.Markup);
+        }
+
+        [Fact]
+        public void Badge_Renders_ChildContent()
+        {
+            using var ctx = new TestContext();
+
+            var component = ctx.RenderComponent<RadzenBadge>();
+
+            component.SetParametersAndRender(parameters => parameters.AddChildContent("SomeContent"));
+
+            Assert.Contains(@$"SomeContent", component.Markup);
+        }
+
+        [Fact]
+        public void Badge_Renders_BadgeStyle()
+        {
+            var badgeStyle = BadgeStyle.Danger;
+
+            using var ctx = new TestContext();
+
+            var component = ctx.RenderComponent<RadzenBadge>();
+            component.SetParametersAndRender(parameters => parameters.Add(p => p.BadgeStyle, badgeStyle));
+
+            Assert.Contains($"badge-{badgeStyle.ToString().ToLower()}", component.Markup);
+        }
+    }
+}

Radzen.Blazor.Tests/BreadCrumbTests.cs

@@ -0,0 +1,77 @@
+using Bunit;
+using Xunit;
+
+namespace Radzen.Blazor.Tests
+{
+    public class BreadCrumbTests
+    {
+        [Fact]
+        public void BreadCrumb_Renders_Items()
+        {
+            using var ctx = new TestContext();
+
+            var component = ctx.RenderComponent<RadzenBreadCrumb>();
+
+            component.SetParametersAndRender(parameters =>
+            {
+                parameters.Add(c => c.ChildContent, builder =>
+          {
+              builder.OpenComponent<RadzenBreadCrumbItem>(0);
+              builder.AddAttribute(1, nameof(RadzenBreadCrumbItem.Text), "Test");
+              builder.CloseComponent();
+          });
+            });
+            //@"<RadzenBreadCrumbItem Text=""Test"" />"
+            Assert.Contains(@"class=""rz-breadcrumb-item", component.Markup);
+            Assert.Contains(">Test</", component.Markup);
+        }
+
+        [Fact]
+        public void BreadCrumb_Renders_Icon()
+        {
+            using var ctx = new TestContext();
+
+            var component = ctx.RenderComponent<RadzenBreadCrumb>();
+
+            component.SetParametersAndRender(parameters =>
+            {
+                parameters.Add(c => c.ChildContent, builder =>
+          {
+              builder.OpenComponent<RadzenBreadCrumbItem>(0);
+              builder.AddAttribute(1, nameof(RadzenBreadCrumbItem.Text), "Test");
+              builder.AddAttribute(2, nameof(RadzenBreadCrumbItem.Icon), "add");
+              builder.CloseComponent();
+          });
+            });
+
+            //@"<RadzenBreadCrumbItem Text=""Test"" />"
+            Assert.Contains("<i", component.Markup);
+            Assert.Contains(">add</i>", component.Markup);
+        }
+
+        [Fact]
+        public void BreadCrumb_Renders_Link()
+        {
+            using var ctx = new TestContext();
+
+            var component = ctx.RenderComponent<RadzenBreadCrumb>();
+
+            component.SetParametersAndRender(parameters =>
+            {
+                parameters.Add(c => c.ChildContent, builder =>
+                {
+                    builder.OpenComponent<RadzenBreadCrumbItem>(0);
+                    builder.AddAttribute(1, nameof(RadzenBreadCrumbItem.Text), "Test");
+                    builder.AddAttribute(2, nameof(RadzenBreadCrumbItem.Icon), "add");
+                    builder.AddAttribute(3, nameof(RadzenBreadCrumbItem.Path), "/badge");
+                    builder.CloseComponent();
+                });
+            });
+
+            //@"<RadzenBreadCrumbItem Text=""Test"" />"
+            Assert.Contains("<i", component.Markup);
+            Assert.Contains(">add</i>", component.Markup);
+            Assert.Contains("<a href=\"/badge", component.Markup);
+        }
+    }
+}

Radzen.Blazor.Tests/ButtonTests.cs

@@ -33,6 +33,28 @@ namespace Radzen.Blazor.Tests
             Assert.Contains(@$"<i class=""rz-button-icon-left rzi"">{icon}</i>", component.Markup);
         }
 
+        [Fact]
+        public void Button_Renders_BusySpinner()
+        {
+            using var ctx = new TestContext();
+
+            var component = ctx.RenderComponent<RadzenButton>();
+
+            var icon = "account_circle";
+
+            component.SetParametersAndRender(parameters => parameters
+                .Add(p => p.Icon, icon)
+                .Add(p => p.IsBusy, true)
+            );
+
+            // does not render the actual icon when busy
+            Assert.DoesNotContain(@$"<i class=""rz-button-icon-left rzi"">{icon}</i>", component.Markup);
+
+            // renders the icon with busy spin animation
+            Assert.Contains(@"<i style=""animation: rotation", component.Markup);
+            Assert.Contains(">refresh</i>", component.Markup);
+        }
+
         [Fact]
         public void Button_Renders_IconAndTextParameters()
         {
@@ -43,9 +65,10 @@ namespace Radzen.Blazor.Tests
             var text = "Test";
             var icon = "account_circle";
 
-            component.SetParametersAndRender(parameters => {
+            component.SetParametersAndRender(parameters =>
+            {
                 parameters.Add(p => p.Text, text);
-                parameters.Add(p => p.Icon, icon); 
+                parameters.Add(p => p.Icon, icon);
             });
 
             Assert.Contains(@$"<i class=""rz-button-icon-left rzi"">{icon}</i>", component.Markup);
@@ -76,7 +99,8 @@ namespace Radzen.Blazor.Tests
             var text = "Test";
             var image = "test.png";
 
-            component.SetParametersAndRender(parameters => {
+            component.SetParametersAndRender(parameters =>
+            {
                 parameters.Add(p => p.Text, text);
                 parameters.Add(p => p.Image, image);
             });
@@ -110,11 +134,11 @@ namespace Radzen.Blazor.Tests
 
             component.SetParametersAndRender(parameters => parameters.Add(p => p.ButtonStyle, ButtonStyle.Primary));
 
-            Assert.Contains(@$"btn-primary", component.Markup);
+            Assert.Contains(@$"rz-primary", component.Markup);
 
             component.SetParametersAndRender(parameters => parameters.Add(p => p.ButtonStyle, ButtonStyle.Secondary));
 
-            Assert.Contains(@$"btn-secondary", component.Markup);
+            Assert.Contains(@$"rz-secondary", component.Markup);
         }
 
         [Fact]

Radzen.Blazor.Tests/ChartTests.cs

@@ -0,0 +1,44 @@
+using System.Linq;
+using System.Threading;
+using System.Threading.Tasks;
+using Bunit;
+using Radzen.Blazor.Rendering;
+using Xunit;
+
+namespace Radzen.Blazor.Tests;
+
+public class ChartTests
+{
+    [Fact(Timeout = 30000)]
+    public async Task Chart_Tooltip_Performance()
+    {
+        using var ctx = new TestContext();
+        ctx.JSInterop.Mode = JSRuntimeMode.Loose;
+        ctx.JSInterop.Setup<Rect>("Radzen.createChart", _ => true).SetResult(new Rect {Left = 0, Top = 0, Width = 200, Height = 200});
+
+        var seriesData = Enumerable.Range(0, 5000).Select(i => new Point { X = i, Y = i });
+        var chart = ctx.RenderComponent<RadzenChart>(chartParameters =>
+            chartParameters
+                .AddChildContent<RadzenLineSeries<Point>>(seriesParameters =>
+                    seriesParameters
+                        .Add(p => p.CategoryProperty, nameof(Point.X))
+                        .Add(p => p.ValueProperty, nameof(Point.Y))
+                        .Add(p => p.Data, seriesData))
+                .AddChildContent<RadzenCategoryAxis>(axisParameters =>
+                    axisParameters
+                        .Add(p => p.Step, 100)
+                        .Add(p => p.Formatter, x =>
+                        {
+                            Thread.Sleep(100);
+                            return $"{x}";
+                        })));
+
+        foreach (var _ in Enumerable.Range(0, 10))
+        {
+            await chart.InvokeAsync(() => chart.Instance.MouseMove(100, 100));
+            Assert.Contains("<div class=\"rz-chart-tooltip", chart.Markup);
+            await chart.InvokeAsync(() => chart.Instance.MouseMove(0, 0));
+            Assert.DoesNotContain("<div class=\"rz-chart-tooltip", chart.Markup);
+        }
+    }
+}

Radzen.Blazor.Tests/CheckBoxTests.cs

@@ -110,7 +110,7 @@ namespace Radzen.Blazor.Tests
 
             component.SetParametersAndRender(parameters => parameters.Add(p => p.Change, args => { raised = true; }));
 
-            component.Find("div").MouseUp();
+            component.Find("div.rz-chkbox-box").Click();
 
             Assert.True(raised);
         }
@@ -126,7 +126,7 @@ namespace Radzen.Blazor.Tests
 
             component.SetParametersAndRender(parameters => parameters.Add(p => p.ValueChanged, args => { raised = true; }));
 
-            component.Find("div").MouseUp();
+            component.Find("div.rz-chkbox-box").Click();
 
             Assert.True(raised);
         }
@@ -141,21 +141,21 @@ namespace Radzen.Blazor.Tests
             component.SetParametersAndRender(parameters => parameters.Add<bool>(p => p.TriState, true));
 
 
-            component.Find("div").MouseUp();
+            component.Find("div.rz-chkbox-box").Click();
 
             component.Render();
 
             Assert.Contains(@$"rz-state-active", component.Markup);
             Assert.Contains(@$"rzi-check", component.Markup);
 
-            component.Find("div").MouseUp();
+            component.Find("div.rz-chkbox-box").Click();
 
             component.Render();
 
             Assert.DoesNotContain(@$"rz-state-active", component.Markup);
             Assert.DoesNotContain(@$"rzi-check", component.Markup);
 
-            component.Find("div").MouseUp();
+            component.Find("div.rz-chkbox-box").Click();
 
             Assert.Contains(@$"rz-state-active", component.Markup);
             Assert.Contains(@$"rzi-times", component.Markup);

Radzen.Blazor.Tests/ColorPickerTests.cs

@@ -0,0 +1,16 @@
+using Bunit;
+using Xunit;
+
+namespace Radzen.Blazor.Tests
+{
+    public class ColorPickerTests
+    {
+        [Fact]
+        public void ColorPicker_ShouldAcceptInvalidValues()
+        {
+            using var ctx = new TestContext();
+
+            var component = ctx.RenderComponent<RadzenColorPicker>(ComponentParameter.CreateParameter("Value", "invalid"));
+        }
+    }
+}

Radzen.Blazor.Tests/DataGridTests.cs

@@ -2,9 +2,7 @@ using AngleSharp.Dom;
 using Bunit;
 using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Rendering;
-using Radzen.Blazor.Rendering;
 using System;
-using System.Collections;
 using System.Collections.Generic;
 using System.Linq;
 using System.Text.RegularExpressions;
@@ -22,9 +20,11 @@ namespace Radzen.Blazor.Tests
             ctx.JSInterop.Mode = JSRuntimeMode.Loose;
             ctx.JSInterop.SetupModule("_content/Radzen.Blazor/Radzen.Blazor.js");
 
-            var component = ctx.RenderComponent<RadzenGrid<dynamic>>(parameterBuilder => {
+            var component = ctx.RenderComponent<RadzenGrid<dynamic>>(parameterBuilder =>
+            {
                 parameterBuilder.Add<IEnumerable<dynamic>>(p => p.Data, new[] { new { Id = 1 }, new { Id = 2 }, new { Id = 3 } });
-                parameterBuilder.Add<RenderFragment>(p => p.Columns, builder => {
+                parameterBuilder.Add<RenderFragment>(p => p.Columns, builder =>
+                {
                     builder.OpenComponent(0, typeof(RadzenGridColumn<dynamic>));
                     builder.AddAttribute(1, "Property", "Id");
                     builder.CloseComponent();
@@ -63,20 +63,22 @@ namespace Radzen.Blazor.Tests
             ctx.JSInterop.Mode = JSRuntimeMode.Loose;
             ctx.JSInterop.SetupModule("_content/Radzen.Blazor/Radzen.Blazor.js");
 
-            var component = ctx.RenderComponent<RadzenGrid<dynamic>>(parameterBuilder => {
-                parameterBuilder.Add<IEnumerable<dynamic>>(p => p.Data, new[] { new { Id = 1}, new { Id = 2 }, new { Id = 3 } });
-                parameterBuilder.Add<RenderFragment>(p => p.Columns, builder => {
+            var component = ctx.RenderComponent<RadzenGrid<dynamic>>(parameterBuilder =>
+            {
+                parameterBuilder.Add<IEnumerable<dynamic>>(p => p.Data, new[] { new { Id = 1 }, new { Id = 2 }, new { Id = 3 } });
+                parameterBuilder.Add<RenderFragment>(p => p.Columns, builder =>
+                {
                     builder.OpenComponent(0, typeof(RadzenGridColumn<dynamic>));
                     builder.AddAttribute(1, "Property", "Id");
                     builder.CloseComponent();
                 });
             });
 
-            var markup = new Regex(@"\s\s+").Replace(component.Markup, "").Trim();
+            var data = component.FindAll(".rz-cell-data");
 
-            Assert.Contains(@$"<span class=""rz-cell-data"">1</span>", markup);
-            Assert.Contains(@$"<span class=""rz-cell-data"">2</span>", markup);
-            Assert.Contains(@$"<span class=""rz-cell-data"">3</span>", markup);
+            Assert.Equal("1", data[0].TextContent.Trim());
+            Assert.Equal("2", data[1].TextContent.Trim());
+            Assert.Equal("3", data[2].TextContent.Trim());
         }
 
         [Fact]
@@ -86,18 +88,19 @@ namespace Radzen.Blazor.Tests
             ctx.JSInterop.Mode = JSRuntimeMode.Loose;
             ctx.JSInterop.SetupModule("_content/Radzen.Blazor/Radzen.Blazor.js");
 
-            var component = ctx.RenderComponent<RadzenGrid<dynamic>>(parameterBuilder => {
+            var component = ctx.RenderComponent<RadzenGrid<dynamic>>(parameterBuilder =>
+            {
                 parameterBuilder.Add<IEnumerable<dynamic>>(p => p.Data, new[] { new { Id = 1 }, new { Id = 2 }, new { Id = 3 } });
-                parameterBuilder.Add<RenderFragment>(p => p.Columns, builder => {
+                parameterBuilder.Add<RenderFragment>(p => p.Columns, builder =>
+                {
                     builder.OpenComponent(0, typeof(RadzenGridColumn<dynamic>));
                     builder.AddAttribute(1, "Title", "MyId");
                     builder.CloseComponent();
                 });
             });
 
-            var markup = new Regex(@"\s\s+").Replace(component.Markup, "").Trim();
-
-            Assert.Contains(@$"<span class=""rz-column-title"">MyId</span>", markup);
+            var title = component.Find(".rz-column-title");
+            Assert.Equal("MyId", title.TextContent.Trim());
         }
 
         [Fact]
@@ -107,20 +110,23 @@ namespace Radzen.Blazor.Tests
             ctx.JSInterop.Mode = JSRuntimeMode.Loose;
             ctx.JSInterop.SetupModule("_content/Radzen.Blazor/Radzen.Blazor.js");
 
-            var component = ctx.RenderComponent<RadzenGrid<dynamic>>(parameterBuilder => {
+            var component = ctx.RenderComponent<RadzenGrid<dynamic>>(parameterBuilder =>
+            {
                 parameterBuilder.Add<IEnumerable<dynamic>>(p => p.Data, new[] { new { Id = 1 }, new { Id = 2 }, new { Id = 3 } });
-                parameterBuilder.Add<RenderFragment>(p => p.Columns, builder => {
+                parameterBuilder.Add<RenderFragment>(p => p.Columns, builder =>
+                {
                     builder.OpenComponent(0, typeof(RadzenGridColumn<dynamic>));
                     builder.AddAttribute(1, "Property", "Id");
                     builder.AddAttribute(2, "Title", "Id");
                     builder.CloseComponent();
                 });
-                parameterBuilder.Add<bool>(p => p.AllowSorting, true) ;
+                parameterBuilder.Add<bool>(p => p.AllowSorting, true);
             });
 
             Assert.Contains(@$"rz-sortable-column", component.Markup);
 
-            component.SetParametersAndRender(parameters => {
+            component.SetParametersAndRender(parameters =>
+            {
                 parameters.Add<bool>(p => p.AllowSorting, false);
             });
 
@@ -134,9 +140,11 @@ namespace Radzen.Blazor.Tests
             ctx.JSInterop.Mode = JSRuntimeMode.Loose;
             ctx.JSInterop.SetupModule("_content/Radzen.Blazor/Radzen.Blazor.js");
 
-            var component = ctx.RenderComponent<RadzenGrid<dynamic>>(parameterBuilder => {
+            var component = ctx.RenderComponent<RadzenGrid<dynamic>>(parameterBuilder =>
+            {
                 parameterBuilder.Add<IEnumerable<dynamic>>(p => p.Data, new[] { new { Id = 1 }, new { Id = 2 }, new { Id = 3 } });
-                parameterBuilder.Add<RenderFragment>(p => p.Columns, builder => {
+                parameterBuilder.Add<RenderFragment>(p => p.Columns, builder =>
+                {
                     builder.OpenComponent(0, typeof(RadzenGridColumn<dynamic>));
                     builder.AddAttribute(1, "Property", "Id");
                     builder.AddAttribute(2, "Title", "Id");
@@ -156,9 +164,11 @@ namespace Radzen.Blazor.Tests
             ctx.JSInterop.Mode = JSRuntimeMode.Loose;
             ctx.JSInterop.SetupModule("_content/Radzen.Blazor/Radzen.Blazor.js");
 
-            var component = ctx.RenderComponent<RadzenGrid<dynamic>>(parameterBuilder => {
+            var component = ctx.RenderComponent<RadzenGrid<dynamic>>(parameterBuilder =>
+            {
                 parameterBuilder.Add<IEnumerable<dynamic>>(p => p.Data, new[] { new { Id = 1 }, new { Id = 2 }, new { Id = 3 } });
-                parameterBuilder.Add<RenderFragment>(p => p.Columns, builder => {
+                parameterBuilder.Add<RenderFragment>(p => p.Columns, builder =>
+                {
                     builder.OpenComponent(0, typeof(RadzenGridColumn<dynamic>));
                     builder.AddAttribute(1, "Property", "Id");
                     builder.AddAttribute(2, "Title", "Id");
@@ -169,7 +179,8 @@ namespace Radzen.Blazor.Tests
 
             Assert.Contains(@$"rz-cell-filter", component.Markup);
 
-            component.SetParametersAndRender(parameters => {
+            component.SetParametersAndRender(parameters =>
+            {
                 parameters.Add<bool>(p => p.AllowFiltering, false);
             });
 
@@ -183,9 +194,11 @@ namespace Radzen.Blazor.Tests
             ctx.JSInterop.Mode = JSRuntimeMode.Loose;
             ctx.JSInterop.SetupModule("_content/Radzen.Blazor/Radzen.Blazor.js");
 
-            var component = ctx.RenderComponent<RadzenGrid<dynamic>>(parameterBuilder => {
+            var component = ctx.RenderComponent<RadzenGrid<dynamic>>(parameterBuilder =>
+            {
                 parameterBuilder.Add<IEnumerable<dynamic>>(p => p.Data, new[] { new { Id = 1 }, new { Id = 2 }, new { Id = 3 } });
-                parameterBuilder.Add<RenderFragment>(p => p.Columns, builder => {
+                parameterBuilder.Add<RenderFragment>(p => p.Columns, builder =>
+                {
                     builder.OpenComponent(0, typeof(RadzenGridColumn<dynamic>));
                     builder.AddAttribute(1, "Property", "Id");
                     builder.AddAttribute(2, "Title", "Id");
@@ -205,9 +218,11 @@ namespace Radzen.Blazor.Tests
             ctx.JSInterop.Mode = JSRuntimeMode.Loose;
             ctx.JSInterop.SetupModule("_content/Radzen.Blazor/Radzen.Blazor.js");
 
-            var component = ctx.RenderComponent<RadzenGrid<dynamic>>(parameterBuilder => {
+            var component = ctx.RenderComponent<RadzenGrid<dynamic>>(parameterBuilder =>
+            {
                 parameterBuilder.Add<IEnumerable<dynamic>>(p => p.Data, new[] { new { Id = 1 }, new { Id = 2 }, new { Id = 3 } });
-                parameterBuilder.Add<RenderFragment>(p => p.Columns, builder => {
+                parameterBuilder.Add<RenderFragment>(p => p.Columns, builder =>
+                {
                     builder.OpenComponent(0, typeof(RadzenGridColumn<dynamic>));
                     builder.AddAttribute(1, "Property", "Id");
                     builder.AddAttribute(2, "Title", "Id");
@@ -219,7 +234,8 @@ namespace Radzen.Blazor.Tests
 
             Assert.Contains(@$"rz-grid-filter", component.Markup);
 
-            component.SetParametersAndRender(parameters => {
+            component.SetParametersAndRender(parameters =>
+            {
                 parameters.Add<FilterMode>(p => p.FilterMode, FilterMode.Simple);
             });
 
@@ -233,9 +249,11 @@ namespace Radzen.Blazor.Tests
             ctx.JSInterop.Mode = JSRuntimeMode.Loose;
             ctx.JSInterop.SetupModule("_content/Radzen.Blazor/Radzen.Blazor.js");
 
-            var component = ctx.RenderComponent<RadzenGrid<int>>(parameterBuilder => {
+            var component = ctx.RenderComponent<RadzenGrid<int>>(parameterBuilder =>
+            {
                 parameterBuilder.Add<IEnumerable<int>>(p => p.Data, new[] { 1, 2, 3 });
-                parameterBuilder.Add<RenderFragment>(p => p.Columns, builder => {
+                parameterBuilder.Add<RenderFragment>(p => p.Columns, builder =>
+                {
                     builder.OpenComponent(0, typeof(RadzenGridColumn<int>));
 
                     builder.AddAttribute(1, "HeaderTemplate", (RenderFragment)delegate (RenderTreeBuilder b)
@@ -257,9 +275,11 @@ namespace Radzen.Blazor.Tests
             ctx.JSInterop.Mode = JSRuntimeMode.Loose;
             ctx.JSInterop.SetupModule("_content/Radzen.Blazor/Radzen.Blazor.js");
 
-            var component = ctx.RenderComponent<RadzenGrid<int>>(parameterBuilder => {
+            var component = ctx.RenderComponent<RadzenGrid<int>>(parameterBuilder =>
+            {
                 parameterBuilder.Add<IEnumerable<int>>(p => p.Data, new[] { 1, 2, 3 });
-                parameterBuilder.Add<RenderFragment>(p => p.Columns, builder => {
+                parameterBuilder.Add<RenderFragment>(p => p.Columns, builder =>
+                {
                     builder.OpenComponent(0, typeof(RadzenGridColumn<int>));
 
                     builder.AddAttribute(1, "FooterTemplate", (RenderFragment)delegate (RenderTreeBuilder b)
@@ -284,9 +304,11 @@ namespace Radzen.Blazor.Tests
             ctx.JSInterop.Mode = JSRuntimeMode.Loose;
             ctx.JSInterop.SetupModule("_content/Radzen.Blazor/Radzen.Blazor.js");
 
-            var component = ctx.RenderComponent<RadzenGrid<dynamic>>(parameterBuilder => {
+            var component = ctx.RenderComponent<RadzenGrid<dynamic>>(parameterBuilder =>
+            {
                 parameterBuilder.Add<IEnumerable<dynamic>>(p => p.Data, Enumerable.Range(0, 100).Select(i => new { Id = i }));
-                parameterBuilder.Add<RenderFragment>(p => p.Columns, builder => {
+                parameterBuilder.Add<RenderFragment>(p => p.Columns, builder =>
+                {
                     builder.OpenComponent(0, typeof(RadzenGridColumn<dynamic>));
                     builder.AddAttribute(1, "Property", "Id");
                     builder.AddAttribute(2, "Title", "Id");
@@ -328,9 +350,10 @@ namespace Radzen.Blazor.Tests
 
             var component = ctx.RenderComponent<RadzenGrid<int>>(parameterBuilder => parameterBuilder.Add<IEnumerable<int>>(p => p.Data, Enumerable.Range(0, 100)));
 
-            component.SetParametersAndRender(parameters => {
+            component.SetParametersAndRender(parameters =>
+            {
                 parameters.Add<bool>(p => p.AllowPaging, true);
-                parameters.Add<PagerPosition>(p => p.PagerPosition, PagerPosition.Top); 
+                parameters.Add<PagerPosition>(p => p.PagerPosition, PagerPosition.Top);
             });
 
             Assert.Contains(@$"rz-paginator", component.Markup);
@@ -346,7 +369,8 @@ namespace Radzen.Blazor.Tests
 
             var component = ctx.RenderComponent<RadzenGrid<int>>(parameterBuilder => parameterBuilder.Add<IEnumerable<int>>(p => p.Data, Enumerable.Range(0, 100)));
 
-            component.SetParametersAndRender(parameters => {
+            component.SetParametersAndRender(parameters =>
+            {
                 parameters.Add<bool>(p => p.AllowPaging, true);
                 parameters.Add<PagerPosition>(p => p.PagerPosition, PagerPosition.TopAndBottom);
             });
@@ -355,6 +379,57 @@ namespace Radzen.Blazor.Tests
             Assert.Contains(@$"rz-paginator-bottom", component.Markup);
         }
 
+        [Fact]
+        public void DataGrid_Renders_DefaultEmptyText()
+        {
+            using var ctx = new TestContext();
+            ctx.JSInterop.Mode = JSRuntimeMode.Loose;
+            ctx.JSInterop.SetupModule("_content/Radzen.Blazor/Radzen.Blazor.js");
+
+            var component = ctx.RenderComponent<RadzenGrid<int>>(parameterBuilder => parameterBuilder.Add<IEnumerable<int>>(p => p.Data, Array.Empty<int>()));
+            component.Render();
+
+            Assert.Contains("No records to display.", component.Markup);
+        }
+
+        [Fact]
+        public void DataGrid_Renders_EmptyText()
+        {
+            string emptyText = "Lorem Ipsum";
+            using var ctx = new TestContext();
+            ctx.JSInterop.Mode = JSRuntimeMode.Loose;
+            ctx.JSInterop.SetupModule("_content/Radzen.Blazor/Radzen.Blazor.js");
+
+            var component = ctx.RenderComponent<RadzenGrid<int>>(parameterBuilder => parameterBuilder.Add<IEnumerable<int>>(p => p.Data, Array.Empty<int>()));
+            component.SetParametersAndRender(parameters =>
+            {
+                parameters.Add(p => p.EmptyText, emptyText);
+            });
+
+            Assert.Contains(emptyText, component.Markup);
+        }
+
+        [Fact]
+        public void DataGrid_Renders_EmptyTemplate()
+        {
+            using var ctx = new TestContext();
+            ctx.JSInterop.Mode = JSRuntimeMode.Loose;
+            ctx.JSInterop.SetupModule("_content/Radzen.Blazor/Radzen.Blazor.js");
+
+            var component = ctx.RenderComponent<RadzenGrid<int>>(parameterBuilder => parameterBuilder.Add<IEnumerable<int>>(p => p.Data, Array.Empty<int>()));
+            component.SetParametersAndRender(parameters =>
+            {
+                parameters.Add<RenderFragment>(p => p.EmptyTemplate, builder =>
+                {
+                    builder.OpenElement(0, "p");
+                    builder.AddContent(0, "Lorem Ipsum");
+                    builder.CloseElement();
+                });
+            });
+
+            Assert.Contains("<p>Lorem Ipsum</p>", component.Markup);
+        }
+
         [Fact]
         public void DataGrid_Raises_LoadDataEventOnNextPageClick()
         {
@@ -367,7 +442,8 @@ namespace Radzen.Blazor.Tests
             var raised = false;
             LoadDataArgs newArgs = null;
 
-            component.SetParametersAndRender(parameters => {
+            component.SetParametersAndRender(parameters =>
+            {
                 parameters.Add<bool>(p => p.AllowPaging, true);
                 parameters.Add<LoadDataArgs>(p => p.LoadData, args => { raised = true; newArgs = args; });
             });
@@ -391,7 +467,8 @@ namespace Radzen.Blazor.Tests
             var raised = false;
             LoadDataArgs newArgs = null;
 
-            component.SetParametersAndRender(parameters => {
+            component.SetParametersAndRender(parameters =>
+            {
                 parameters.Add<bool>(p => p.AllowPaging, true);
                 parameters.Add<LoadDataArgs>(p => p.LoadData, args => { raised = true; newArgs = args; });
             });
@@ -415,7 +492,8 @@ namespace Radzen.Blazor.Tests
             var raised = false;
             LoadDataArgs newArgs = null;
 
-            component.SetParametersAndRender(parameters => {
+            component.SetParametersAndRender(parameters =>
+            {
                 parameters.Add<bool>(p => p.AllowPaging, true);
                 parameters.Add<LoadDataArgs>(p => p.LoadData, args => { raised = true; newArgs = args; });
             });
@@ -440,7 +518,8 @@ namespace Radzen.Blazor.Tests
             var raised = false;
             LoadDataArgs newArgs = null;
 
-            component.SetParametersAndRender(parameters => {
+            component.SetParametersAndRender(parameters =>
+            {
                 parameters.Add<bool>(p => p.AllowPaging, true);
                 parameters.Add<LoadDataArgs>(p => p.LoadData, args => { raised = true; newArgs = args; });
             });
@@ -464,7 +543,8 @@ namespace Radzen.Blazor.Tests
 
             var raised = false;
 
-            component.SetParametersAndRender(parameters => {
+            component.SetParametersAndRender(parameters =>
+            {
                 parameters.Add<bool>(p => p.AllowPaging, true);
                 parameters.Add<LoadDataArgs>(p => p.LoadData, args => { raised = true; });
             });
@@ -485,7 +565,8 @@ namespace Radzen.Blazor.Tests
 
             var raised = false;
 
-            component.SetParametersAndRender(parameters => {
+            component.SetParametersAndRender(parameters =>
+            {
                 parameters.Add<bool>(p => p.AllowPaging, true);
                 parameters.Add<LoadDataArgs>(p => p.LoadData, args => { raised = true; });
             });
@@ -506,13 +587,15 @@ namespace Radzen.Blazor.Tests
 
             var raised = false;
 
-            component.SetParametersAndRender(parameters => {
+            component.SetParametersAndRender(parameters =>
+            {
                 parameters.Add<bool>(p => p.AllowPaging, true);
             });
 
             component.Find(".rz-paginator-last").Click();
 
-            component.SetParametersAndRender(parameters => {
+            component.SetParametersAndRender(parameters =>
+            {
                 parameters.Add<LoadDataArgs>(p => p.LoadData, args => { raised = true; });
             });
 
@@ -532,13 +615,15 @@ namespace Radzen.Blazor.Tests
 
             var raised = false;
 
-            component.SetParametersAndRender(parameters => {
+            component.SetParametersAndRender(parameters =>
+            {
                 parameters.Add<bool>(p => p.AllowPaging, true);
             });
 
             component.Find(".rz-paginator-last").Click();
 
-            component.SetParametersAndRender(parameters => {
+            component.SetParametersAndRender(parameters =>
+            {
                 parameters.Add<LoadDataArgs>(p => p.LoadData, args => { raised = true; });
             });
 
@@ -559,7 +644,8 @@ namespace Radzen.Blazor.Tests
             var raised = false;
             LoadDataArgs newArgs = null;
 
-            component.SetParametersAndRender(parameters => {
+            component.SetParametersAndRender(parameters =>
+            {
                 parameters.Add<bool>(p => p.AllowPaging, true);
                 parameters.Add<int>(p => p.PageSize, 20);
                 parameters.Add<LoadDataArgs>(p => p.LoadData, args => { raised = true; newArgs = args; });

Radzen.Blazor.Tests/DatePickerTests.cs

@@ -1,8 +1,8 @@
 using Bunit;
-using Radzen.Blazor.Rendering;
 using System;
-using System.Collections;
 using System.Collections.Generic;
+using System.Globalization;
+using System.Linq;
 using Xunit;
 
 namespace Radzen.Blazor.Tests
@@ -49,7 +49,7 @@ namespace Radzen.Blazor.Tests
 
             var component = ctx.RenderComponent<RadzenDatePicker<DateTime>>();
 
-            component.SetParametersAndRender(parameters => { 
+            component.SetParametersAndRender(parameters => {
                 parameters.Add<bool>(p => p.ShowTime, true);
                 parameters.Add<bool>(p => p.ShowSeconds, true);
             });
@@ -93,7 +93,7 @@ namespace Radzen.Blazor.Tests
 
             component.SetParametersAndRender(parameters => {
                 parameters.Add(p => p.DateFormat, format);
-                parameters.Add<object>(p => p.Value, DateTime.Now); 
+                parameters.Add<object>(p => p.Value, DateTime.Now);
             });
 
             Assert.Contains(@$"value=""{string.Format("{0:" + format + "}", DateTime.Now)}""", component.Markup);
@@ -146,7 +146,7 @@ namespace Radzen.Blazor.Tests
 
             component.SetParametersAndRender(parameters => {
                 parameters.Add<object>(p => p.Value, DateTime.Now);
-                parameters.Add<bool>(p => p.AllowClear, true); 
+                parameters.Add<bool>(p => p.AllowClear, true);
             });
 
             Assert.Contains(@$"<i class=""rz-dropdown-clear-icon rzi rzi-times""", component.Markup);
@@ -230,7 +230,7 @@ namespace Radzen.Blazor.Tests
         }
 
         [Fact]
-        public void DatePicker_Raises_ChangeEventOnNextMonth()
+        public void DatePicker_NotRaises_ChangeEventOnNextMonth()
         {
             using var ctx = new TestContext();
             ctx.JSInterop.Mode = JSRuntimeMode.Loose;
@@ -247,12 +247,11 @@ namespace Radzen.Blazor.Tests
 
             component.Find(".rz-datepicker-next-icon").Click();
 
-            Assert.True(raised);
-            Assert.True(((DateTime)newValue) > DateTime.Now);
+            Assert.False(raised);
         }
 
         [Fact]
-        public void DatePicker_Raises_ValueChangedEventOnNextMonth()
+        public void DatePicker_NotRaises_ValueChangedEventOnNextMonth()
         {
             using var ctx = new TestContext();
             ctx.JSInterop.Mode = JSRuntimeMode.Loose;
@@ -269,12 +268,11 @@ namespace Radzen.Blazor.Tests
 
             component.Find(".rz-datepicker-next-icon").Click();
 
-            Assert.True(raised);
-            Assert.True(((DateTime)newValue) > DateTime.Now);
+            Assert.False(raised);
         }
 
         [Fact]
-        public void DatePicker_Raises_ChangeEventOnPrevMonth()
+        public void DatePicker_NotRaises_ChangeEventOnPrevMonth()
         {
             using var ctx = new TestContext();
             ctx.JSInterop.Mode = JSRuntimeMode.Loose;
@@ -291,12 +289,11 @@ namespace Radzen.Blazor.Tests
 
             component.Find(".rz-datepicker-prev-icon").Click();
 
-            Assert.True(raised);
-            Assert.True(((DateTime)newValue) < DateTime.Now);
+            Assert.False(raised);
         }
 
         [Fact]
-        public void DatePicker_Raises_ValueChangedEventOnPrevMonth()
+        public void DatePicker_NotRaises_ValueChangedEventOnPrevMonth()
         {
             using var ctx = new TestContext();
             ctx.JSInterop.Mode = JSRuntimeMode.Loose;
@@ -313,8 +310,200 @@ namespace Radzen.Blazor.Tests
 
             component.Find(".rz-datepicker-prev-icon").Click();
 
+            Assert.False(raised);
+        }
+
+        [Fact]
+        public void DatePicker_Raises_ValueChangedEvent_Returns_PreviousDateOnInputOnDisabledDates()
+        {
+            IEnumerable<DateTime> dates = new DateTime[] { DateTime.Today };
+            DateTime previousDay = DateTime.Today.AddDays(-1);
+
+            using var ctx = new TestContext();
+            ctx.JSInterop.Mode = JSRuntimeMode.Loose;
+
+            var component = ctx.RenderComponent<RadzenDatePicker<DateTime>>();
+
+            var raised = false;
+            object newValue = null;
+
+            component.SetParametersAndRender(parameters => {
+                parameters.Add(p => p.ValueChanged, args => { raised = true; newValue = args; })
+                          .Add(p => p.DateRender, args => { args.Disabled = dates.Contains(args.Date); });
+            });
+
+            var inputElement = component.Find(".rz-inputtext");
+
+            // initialize DateTimeValue
+            ctx.JSInterop.Setup<string>("Radzen.getInputValue", invocation => true).SetResult(previousDay.ToShortDateString());
+            inputElement.Change(previousDay.AddDays(-1));
+
+            // try to enter disabled date
+            ctx.JSInterop.Setup<string>("Radzen.getInputValue", invocation => true).SetResult(DateTime.Today.ToShortDateString());
+            inputElement.Change(DateTime.Today);
+
             Assert.True(raised);
-            Assert.True(((DateTime)newValue) < DateTime.Now);
+            Assert.Equal(previousDay, (DateTime)newValue);
+        }
+
+        [Fact]
+        public void DatePicker_Clears_InputOnDisabledDates()
+        {
+            IEnumerable<DateTime> dates = new DateTime[] { DateTime.Today };
+            DateTime previousDay = DateTime.Today.AddDays(-1);
+
+            using var ctx = new TestContext();
+            ctx.JSInterop.Mode = JSRuntimeMode.Loose;
+
+            var component = ctx.RenderComponent<RadzenDatePicker<DateTime?>>();
+
+            var raised = false;
+            object newValue = null;
+
+            component.SetParametersAndRender(parameters => {
+                parameters.Add(p => p.ValueChanged, args => { raised = true; newValue = args; })
+                          .Add(p => p.DateRender, args => { args.Disabled = dates.Contains(args.Date); });
+            });
+
+            var inputElement = component.Find(".rz-inputtext");
+
+            // initialize DateTimeValue
+            ctx.JSInterop.Setup<string>("Radzen.getInputValue", invocation => true).SetResult(previousDay.ToShortDateString());
+            inputElement.Change(previousDay.AddDays(-1));
+
+            // try to enter disabled date
+            ctx.JSInterop.Setup<string>("Radzen.getInputValue", invocation => true).SetResult(DateTime.Today.ToShortDateString());
+            inputElement.Change(DateTime.Today);
+
+            Assert.True(raised);
+            Assert.Null(newValue);
+        }
+
+        [Fact]
+        public void DatePicker_Respects_DateTimeMaxValue()
+        {
+            using var ctx = new TestContext();
+            ctx.JSInterop.Mode = JSRuntimeMode.Loose;
+            ctx.JSInterop.SetupModule("_content/Radzen.Blazor/Radzen.Blazor.js");
+
+            var component = ctx.RenderComponent<RadzenDatePicker<DateTime>>(parameters =>
+            {
+                parameters.Add(p => p.Value, DateTime.MaxValue);
+            });
+
+            Assert.Contains(DateTime.MaxValue.ToString(component.Instance.DateFormat), component.Markup);
+
+            var exception = Record.Exception(() => component.Find(".rz-datepicker-next-icon")
+                                                            .Click());
+            Assert.Null(exception);
+        }
+
+        [Fact]
+        public void DatePicker_Respects_DateTimeMinValue()
+        {
+            using var ctx = new TestContext();
+            ctx.JSInterop.Mode = JSRuntimeMode.Loose;
+            ctx.JSInterop.SetupModule("_content/Radzen.Blazor/Radzen.Blazor.js");
+
+            var component = ctx.RenderComponent<RadzenDatePicker<DateTime>>(parameters =>
+            {
+                parameters.Add(p => p.Value, DateTime.MinValue);
+            });
+
+            Assert.Contains(DateTime.MinValue.ToString(component.Instance.DateFormat), component.Markup);
+
+            var exception = Record.Exception(() => component.Find(".rz-datepicker-prev-icon")
+                                                            .Click());
+            Assert.Null(exception);
+        }
+
+        [Theory]
+        [InlineData(DateTimeKind.Local)]
+        [InlineData(DateTimeKind.Unspecified)]
+        [InlineData(DateTimeKind.Utc)]
+        public void DatePicker_Respects_DateTimeKind(DateTimeKind kind)
+        {
+            using var ctx = new TestContext();
+            ctx.JSInterop.Mode = JSRuntimeMode.Loose;
+            ctx.JSInterop.SetupModule("_content/Radzen.Blazor/Radzen.Blazor.js");
+
+            var component = ctx.RenderComponent<RadzenDatePicker<DateTime>>(parameters =>
+            {
+                parameters.Add(x => x.Kind, kind);
+                parameters.Add(x => x.ShowTime, true);
+            });
+
+            var raised = false;
+            object newValue = null;
+
+            component.SetParametersAndRender(parameters =>
+            {
+                parameters.Add(p => p.Change, args => { raised = true; newValue = args; });
+            });
+
+            component.Find(".rz-datepicker-next-icon").Click();
+            component.FindAll(".rz-button-text").First(x => x.TextContent == "Ok").Click();
+
+            Assert.True(raised);
+            Assert.Equal(kind, ((DateTime)newValue).Kind);
+        }
+
+        [Fact]
+        public void DatePicker_Renders_FooterTemplate()
+        {
+            using var ctx = new TestContext();
+            ctx.JSInterop.Mode = JSRuntimeMode.Loose;
+            ctx.JSInterop.SetupModule("_content/Radzen.Blazor/Radzen.Blazor.js");
+
+            string actionsTemplate = "<input type=\"button\" value=\"Test\" />";
+
+            var component = ctx.RenderComponent<RadzenDatePicker<DateTime>>(parameters =>
+            {
+                parameters.Add(p => p.Value, DateTime.MinValue);
+                parameters.Add(p => p.FooterTemplate, actionsTemplate);
+            });
+
+            Assert.Contains(actionsTemplate, component.Markup);
+        }
+
+        [Fact]
+        public void DatePicker_Converts_DateTimeOffSet_FromUtc_ToLocal()
+        {
+            using var ctx = new TestContext();
+            ctx.JSInterop.Mode = JSRuntimeMode.Loose;
+            ctx.JSInterop.SetupModule("_content/Radzen.Blazor/Radzen.Blazor.js");
+
+            var valueUtc = DateTimeOffset.UtcNow;
+            var kind = DateTimeKind.Local;
+
+            var component = ctx.RenderComponent<RadzenDatePicker<DateTimeOffset>>(parameters =>
+            {
+                parameters.Add(p => p.Kind, kind);
+                parameters.Add(p => p.Value, valueUtc);
+            });
+
+            Assert.Equal(kind, (component.Instance.Value as DateTime?)?.Kind);
+            Assert.Equal(valueUtc.LocalDateTime.ToString(CultureInfo.InvariantCulture), (component.Instance.Value as DateTime?)?.ToString(CultureInfo.InvariantCulture));
+        }
+
+        [Fact]
+        public void DatePicker_Converts_DateTimeOffSet_Local_ToUtc()
+        {
+            using var ctx = new TestContext();
+            ctx.JSInterop.Mode = JSRuntimeMode.Loose;
+            ctx.JSInterop.SetupModule("_content/Radzen.Blazor/Radzen.Blazor.js");
+
+            var valueUtc = DateTimeOffset.Now;
+            var kind = DateTimeKind.Utc;
+
+            var component = ctx.RenderComponent<RadzenDatePicker<DateTimeOffset>>(parameters =>
+            {
+                parameters.Add(p => p.Kind, kind);
+                parameters.Add(p => p.Value, valueUtc);
+            });
+
+            Assert.Equal(kind, (component.Instance.Value as DateTime?)?.Kind);
+            Assert.Equal(valueUtc.UtcDateTime.ToString(CultureInfo.InvariantCulture), (component.Instance.Value as DateTime?)?.ToString(CultureInfo.InvariantCulture));
         }
     }
 }

Radzen.Blazor.Tests/DropDownTests.cs

@@ -0,0 +1,144 @@
+using System;
+using System.Threading.Tasks;
+using Bunit;
+using Xunit;
+
+namespace Radzen.Blazor.Tests
+{
+    public class DropDownTests
+    {
+        class DataItem
+        {
+            public string Text { get; set; }
+            public int Id { get; set; }
+        }
+
+        private static IRenderedComponent<RadzenDropDown<T>> DropDown<T>(TestContext ctx, Action<ComponentParameterCollectionBuilder<RadzenDropDown<T>>> configure = null)
+        {
+            var data = new [] {
+                new DataItem { Text = "Item 1", Id = 1 },
+                new DataItem { Text = "Item 2", Id = 2 },
+            };
+
+            var component = ctx.RenderComponent<RadzenDropDown<T>>();
+
+            component.SetParametersAndRender(parameters => {
+                parameters.Add(p => p.Data, data);
+                parameters.Add(p => p.TextProperty, nameof(DataItem.Text));
+
+                if (configure != null)
+                {
+                    configure.Invoke(parameters);
+                }
+                else
+                {
+                    parameters.Add(p => p.ValueProperty, nameof(DataItem.Id));
+                }
+            });
+
+            return component;
+        }
+
+        [Fact]
+        public async Task Dropdown_SelectItem_Method_Should_Not_Throw()
+        {
+            using var ctx = new TestContext();
+
+            ctx.JSInterop.Mode = JSRuntimeMode.Loose;
+
+            var component = DropDown<int>(ctx);
+
+            var items = component.FindAll(".rz-dropdown-item");
+
+            Assert.Equal(2, items.Count);
+
+            //this throws
+            await component.InvokeAsync(async () => await component.Instance.SelectItem(1));
+        }
+
+        [Fact]
+        public void DropDown_RendersItems()
+        {
+            using var ctx = new TestContext();
+
+            ctx.JSInterop.Mode = JSRuntimeMode.Loose;
+
+            var component = DropDown<int>(ctx);
+
+            var items = component.FindAll(".rz-dropdown-item");
+
+            Assert.Equal(2, items.Count);
+        }
+
+        [Fact]
+        public void DropDown_AppliesSelectionStyleForIntValue()
+        {
+            using var ctx = new TestContext();
+
+            ctx.JSInterop.Mode = JSRuntimeMode.Loose;
+
+            var component = DropDown<int>(ctx);
+
+            var items = component.FindAll(".rz-dropdown-item");
+
+            items[0].Click();
+
+            component.Render();
+
+            items = component.FindAll(".rz-dropdown-item");
+
+            Assert.Contains("rz-state-highlight", items[0].ClassList);
+        }
+
+        [Fact]
+        public void DropDown_AppliesSelectionStyleForStringValue()
+        {
+            using var ctx = new TestContext();
+
+            ctx.JSInterop.Mode = JSRuntimeMode.Loose;
+
+            var component = DropDown<string>(ctx, parameters => {
+                parameters.Add(p => p.ValueProperty, nameof(DataItem.Text));
+            });
+
+            var items = component.FindAll(".rz-dropdown-item");
+
+            items[0].Click();
+
+            component.Render();
+
+            items = component.FindAll(".rz-dropdown-item");
+
+            Assert.Contains("rz-state-highlight", items[0].ClassList);
+        }
+
+        [Fact]
+        public void DropDown_AppliesSelectionStyleWhenMultipleSelectionIsEnabled()
+        {
+            using var ctx = new TestContext();
+
+            ctx.JSInterop.Mode = JSRuntimeMode.Loose;
+
+            var component = DropDown<string>(ctx, parameters => {
+                parameters.Add(p => p.ValueProperty, nameof(DataItem.Text));
+                parameters.Add(p => p.Multiple, true);
+            });
+
+            var items = component.FindAll(".rz-multiselect-item");
+
+            items[0].Click();
+
+            component.Render();
+
+            items = component.FindAll(".rz-multiselect-item");
+
+            items[1].Click();
+
+            component.Render();
+
+            var selectedItems = component.FindAll(".rz-state-highlight");
+
+            Assert.Equal(2, selectedItems.Count);
+        }
+    }
+}

Radzen.Blazor.Tests/FieldsetTests.cs

@@ -1,4 +1,6 @@
 using Bunit;
+using Microsoft.AspNetCore.Components;
+using System.Linq;
 using Xunit;
 
 namespace Radzen.Blazor.Tests
@@ -15,7 +17,6 @@ namespace Radzen.Blazor.Tests
             component.Render();
 
             Assert.Contains(@$"rz-fieldset", component.Markup);
-            Assert.Contains(@$"rz-fieldset-legend", component.Markup);
             Assert.Contains(@$"rz-fieldset-content-wrapper", component.Markup);
             Assert.Contains(@$"rz-fieldset-content", component.Markup);
         }
@@ -145,7 +146,8 @@ namespace Radzen.Blazor.Tests
 
             var raised = false;
 
-            component.SetParametersAndRender(parameters => {
+            component.SetParametersAndRender(parameters =>
+            {
                 parameters.Add<bool>(p => p.AllowCollapse, true);
                 parameters.Add(p => p.Collapse, args => { raised = true; });
             });
@@ -160,5 +162,57 @@ namespace Radzen.Blazor.Tests
 
             component.Find("a").Click();
         }
+
+        [Fact]
+        public void Fieldset_Renders_SummaryWhenCollapsed()
+        {
+            using var ctx = new TestContext();
+            var component = ctx.RenderComponent<RadzenFieldset>();
+
+            component.SetParametersAndRender(parameters =>
+            {
+                parameters.Add<bool>(p => p.AllowCollapse, true);
+                parameters.Add<bool>(p => p.Collapsed, true);
+                parameters.Add<RenderFragment>(p => p.SummaryTemplate, builder =>
+                {
+                    builder.OpenElement(0, "p");
+                    builder.AddContent(0, "SummaryContent");
+                    builder.CloseElement();
+                });
+
+            });
+
+            Assert.Contains("SummaryContent", component.Markup);
+            Assert.Equal(
+                "",
+                component.Find(".rz-fieldset-content-summary").ParentElement.Attributes.First(attr => attr.Name == "style").Value
+            );
+        }
+
+        [Fact]
+        public void Fieldset_DontRenders_SummaryWhenOpen()
+        {
+            using var ctx = new TestContext();
+            var component = ctx.RenderComponent<RadzenFieldset>();
+
+            component.SetParametersAndRender(parameters =>
+            {
+                parameters.Add<bool>(p => p.AllowCollapse, true);
+                parameters.Add<bool>(p => p.Collapsed, false);
+                parameters.Add<RenderFragment>(p => p.SummaryTemplate, builder =>
+                {
+                    builder.OpenElement(0, "p");
+                    builder.AddContent(0, "SummaryContent");
+                    builder.CloseElement();
+                });
+
+            });
+
+            Assert.Contains("SummaryContent", component.Markup);
+            Assert.Equal(
+                "display: none",
+                component.Find(".rz-fieldset-content-summary").ParentElement.Attributes.First(attr => attr.Name == "style").Value
+            );
+        }
     }
 }

Radzen.Blazor.Tests/IconTests.cs

@@ -17,7 +17,7 @@ namespace Radzen.Blazor.Tests
             component.SetParametersAndRender(parameters => parameters.Add(p => p.Icon, icon));
 
             Assert.Contains(@$">{icon}</i>", component.Markup);
-            Assert.Contains(@$"<i class=""rzi d-inline-flex justify-content-center align-items-center""", component.Markup);
+            Assert.Contains(@$"<i class=""rzi""", component.Markup);
         }
 
         [Fact]
@@ -45,5 +45,29 @@ namespace Radzen.Blazor.Tests
 
             Assert.Contains(@$"autofocus", component.Markup);
         }
+
+        [Fact]
+        public void Icon_Renders_IconStyleClass()
+        {
+            using var ctx = new TestContext();
+
+            var component = ctx.RenderComponent<RadzenIcon>();
+
+            component.SetParametersAndRender(parameters => parameters.Add(icon => icon.IconStyle, IconStyle.Primary));
+
+            Assert.Contains(@$"rzi-primary", component.Markup);
+        }
+
+        [Fact]
+        public void Icon_NotRenders_IconStyleClass_WhenNull()
+        {
+            using var ctx = new TestContext();
+
+            var component = ctx.RenderComponent<RadzenIcon>();
+
+            component.SetParametersAndRender(parameters => parameters.Add(icon => icon.IconStyle, null));
+
+            Assert.DoesNotContain(@$"rzi-primary", component.Markup);
+        }
     }
 }

Radzen.Blazor.Tests/LinkTests.cs

@@ -30,8 +30,10 @@ namespace Radzen.Blazor.Tests
 
             component.SetParametersAndRender(parameters => parameters.Add(p => p.Text, text));
 
-            Assert.Contains(@$">{text}</span>", component.Markup);
-            Assert.Contains(@$"class=""rz-link-text""", component.Markup);
+            var textElement = component.Find(".rz-link-text");
+
+            Assert.NotNull(textElement);
+            Assert.Equal(text, textElement.TextContent.Trim());
         }
 
         [Fact]

Radzen.Blazor.Tests/LoginTests.cs

@@ -26,7 +26,12 @@ namespace Radzen.Blazor.Tests
 
             var component = ctx.RenderComponent<RadzenLogin>();
 
-            Assert.Contains(@$"<label class=""col-sm-3 col-form-label"" for=""username"">Username</label>", component.Markup);
+            component.SetParametersAndRender(p => {
+                p.AddUnmatched("id", "login");
+            });
+
+            var label = component.Find($@"label[for=""login-username""]");
+            Assert.NotNull(label);
         }
 
         [Fact]
@@ -36,7 +41,7 @@ namespace Radzen.Blazor.Tests
 
             var component = ctx.RenderComponent<RadzenLogin>();
 
-            Assert.Contains(@$"<input name=""userName"" class=""rz-textbox""", component.Markup);
+            Assert.Contains(@$"<input name=""Username""", component.Markup);
         }
 
         [Fact]
@@ -63,7 +68,7 @@ namespace Radzen.Blazor.Tests
             component.SetParametersAndRender(parameters => {
                 parameters.Add(p => p.Username, "user");
                 parameters.Add(p => p.Password, "pwd");
-                parameters.Add(p => p.Login, args => { clicked = true; }); 
+                parameters.Add(p => p.Login, args => { clicked = true; });
             });
 
             component.Find("button").Click();
@@ -89,30 +94,6 @@ namespace Radzen.Blazor.Tests
             Assert.True(!clicked);
         }
 
-        [Fact]
-        public void Login_Validates_UsernameParameter()
-        {
-            using var ctx = new TestContext();
-
-            var component = ctx.RenderComponent<RadzenLogin>();
-
-            component.Find("button").Click();
-
-            Assert.Contains(@$"Username is required", component.Markup);
-        }
-
-        [Fact]
-        public void Login_Validates_PasswordParameter()
-        {
-            using var ctx = new TestContext();
-
-            var component = ctx.RenderComponent<RadzenLogin>();
-
-            component.Find("button").Click();
-
-            Assert.Contains(@$"Password is required", component.Markup);
-        }
-
         [Fact]
         public void Login_Renders_LoginTextParameter()
         {
@@ -138,7 +119,7 @@ namespace Radzen.Blazor.Tests
                 parameters.Add(p => p.AllowResetPassword, true);
             });
 
-            Assert.Contains(@$"Forgot password</a>", component.Markup);
+            Assert.Contains(@$"Forgot password?</a>", component.Markup);
         }
 
         [Fact]
@@ -214,7 +195,7 @@ namespace Radzen.Blazor.Tests
                 parameters.Add(p => p.Register, args => { clicked = true; });
             });
 
-            component.Find(".btn-secondary").Click();
+            component.Find(".rz-secondary").Click();
 
             Assert.True(clicked);
         }
@@ -240,7 +221,7 @@ namespace Radzen.Blazor.Tests
         }
 
         [Fact]
-        public void Login_NotRaises_ResetPasswordEvent_WhenEmptyUsername()
+        public void Login_Raises_ResetPasswordEvent_WhenEmptyUsername()
         {
             using var ctx = new TestContext();
 
@@ -255,19 +236,7 @@ namespace Radzen.Blazor.Tests
 
             component.Find("a").Click();
 
-            Assert.True(!clicked);
-        }
-
-        [Fact]
-        public void Login_Validates_UsernameParameter_OnResetPasswordEvent()
-        {
-            using var ctx = new TestContext();
-
-            var component = ctx.RenderComponent<RadzenLogin>();
-
-            component.Find("a").Click();
-
-            Assert.Contains(@$"Username is required", component.Markup);
+            Assert.True(clicked);
         }
     }
 }

Radzen.Blazor.Tests/MaskTests.cs

@@ -128,6 +128,34 @@ namespace Radzen.Blazor.Tests
             Assert.Contains(@$"autocomplete=""on""", component.Markup);
         }
 
+        [Fact]
+        public void Mask_Renders_TypedAutoCompleteParameter()
+        {
+            using var ctx = new TestContext();
+
+            var component = ctx.RenderComponent<RadzenMask>();
+
+            component.SetParametersAndRender(parameters => parameters.Add<bool>(p => p.AutoComplete, false));
+            component.SetParametersAndRender(parameters => parameters.Add<AutoCompleteType>(p => p.AutoCompleteType, AutoCompleteType.On));
+
+            Assert.Contains(@$"autocomplete=""off""", component.Markup);
+
+            component.SetParametersAndRender(parameters => parameters.Add<bool>(p => p.AutoComplete, true));
+            component.SetParametersAndRender(parameters => parameters.Add<AutoCompleteType>(p => p.AutoCompleteType, AutoCompleteType.Off));
+
+            Assert.Contains(@$"autocomplete=""off""", component.Markup);
+
+            component.SetParametersAndRender(parameters => parameters.Add<bool>(p => p.AutoComplete, true));
+            component.SetParametersAndRender(parameters => parameters.Add<AutoCompleteType>(p => p.AutoCompleteType, AutoCompleteType.AdditionalName));
+
+            Assert.Contains(@$"autocomplete=""{AutoCompleteType.AdditionalName.GetAutoCompleteValue()}""", component.Markup);
+
+            component.SetParametersAndRender(parameters => parameters.Add<bool>(p => p.AutoComplete, true));
+            component.SetParametersAndRender(parameters => parameters.Add<AutoCompleteType>(p => p.AutoCompleteType, AutoCompleteType.Email));
+
+            Assert.Contains(@$"autocomplete=""{AutoCompleteType.Email.GetAutoCompleteValue()}""", component.Markup);
+        }
+
         [Fact]
         public void Mask_Renders_MaxLengthParameter()
         {

Radzen.Blazor.Tests/NumericRangeValidatorTests.cs

@@ -0,0 +1,139 @@
+using System;
+using Bunit;
+using Microsoft.AspNetCore.Components.Forms;
+using Xunit;
+
+namespace Radzen.Blazor.Tests
+{
+    public class NumericRangeValidatorTests
+    {
+        class FormComponentTestDouble : IRadzenFormComponent
+        {
+            public bool IsBound => false;
+
+            public bool HasValue => true;
+
+            public string Name { get; set; }
+
+            public FieldIdentifier FieldIdentifier => throw new System.NotImplementedException();
+
+            public object GetValue()
+            {
+                return Value;
+            }
+
+            public object Value { get; set; }
+        }
+
+        class RadzenNumericRangeValidatorTestDouble : RadzenNumericRangeValidator
+        {
+            public bool Validate(object value)
+            {
+                return base.Validate(new FormComponentTestDouble { Value = value });
+            }
+        }
+
+        [Fact]
+        public void Throws_Exception_If_Min_And_Max_Are_Null()
+        {
+            var validator = new RadzenNumericRangeValidatorTestDouble();
+
+            Assert.Throws<System.ArgumentException>(() => validator.Validate(1));
+        }
+
+        [Fact]
+        public void Returns_False_If_Value_Is_Null()
+        {
+            using var ctx = new TestContext();
+            var component = ctx.RenderComponent<RadzenNumericRangeValidatorTestDouble>();
+
+            component.SetParametersAndRender(parameters =>
+            {
+                component.SetParametersAndRender(parameters => parameters.Add(p => p.Min, 0).Add(p => p.Max, 10));
+            });
+
+            Assert.False(component.Instance.Validate(null));
+        }
+
+        [Fact]
+        public void Returns_True_If_Value_Is_Greater_Than_Min()
+        {
+            using var ctx = new TestContext();
+            var component = ctx.RenderComponent<RadzenNumericRangeValidatorTestDouble>();
+            component.SetParametersAndRender(parameters => parameters.Add(p => p.Min, 0));
+
+            Assert.True(component.Instance.Validate(1));
+        }
+
+        [Fact]
+        public void Returns_True_If_Value_Is_Equal_To_Min()
+        {
+            using var ctx = new TestContext();
+            var component = ctx.RenderComponent<RadzenNumericRangeValidatorTestDouble>();
+            component.SetParametersAndRender(parameters => parameters.Add(p => p.Min, 0));
+
+            Assert.True(component.Instance.Validate(0));
+        }
+
+        [Fact]
+        public void Returns_True_If_Value_Is_Less_Than_Max()
+        {
+            using var ctx = new TestContext();
+            var component = ctx.RenderComponent<RadzenNumericRangeValidatorTestDouble>();
+            component.SetParametersAndRender(parameters => parameters.Add(p => p.Max, 10));
+
+            Assert.True(component.Instance.Validate(9));
+        }
+
+        [Fact]
+        public void Returns_True_If_Value_Is_Equal_To_Max()
+        {
+            using var ctx = new TestContext();
+            var component = ctx.RenderComponent<RadzenNumericRangeValidatorTestDouble>();
+            component.SetParametersAndRender(parameters => parameters.Add(p => p.Max, 10));
+
+            Assert.True(component.Instance.Validate(10));
+        }
+
+        [Fact]
+        public void Returns_True_If_Value_Is_Between_Min_And_Max()
+        {
+            using var ctx = new TestContext();
+            var component = ctx.RenderComponent<RadzenNumericRangeValidatorTestDouble>();
+            component.SetParametersAndRender(parameters => parameters.Add(p => p.Min, 0).Add(p => p.Max, 10));
+
+            Assert.True(component.Instance.Validate(5));
+        }
+
+        [Fact]
+        public void Returns_True_If_Value_Is_Between_Min_And_Max_And_They_Are_Nullable()
+        {
+            int? min = 0;
+            int? max = 10;
+            using var ctx = new TestContext();
+            var component = ctx.RenderComponent<RadzenNumericRangeValidatorTestDouble>();
+            component.SetParametersAndRender(parameters => parameters.Add(p => p.Min, min).Add(p => p.Max, max));
+            Assert.True(component.Instance.Validate(5));
+        }
+
+        [Fact]
+        public void Returns_True_When_Value_Is_Of_DifferentType()
+        {
+            using var ctx = new TestContext();
+            var component = ctx.RenderComponent<RadzenNumericRangeValidatorTestDouble>();
+            component.SetParametersAndRender(parameters => parameters.Add(p => p.Min, 0m).Add(p => p.Max, 10m));
+
+            Assert.True(component.Instance.Validate(5));
+        }
+
+        [Fact]
+        public void Returns_False_If_Cannot_Conert_Value()
+        {
+            using var ctx = new TestContext();
+            var component = ctx.RenderComponent<RadzenNumericRangeValidatorTestDouble>();
+            component.SetParametersAndRender(parameters => parameters.Add(p => p.Min, 0m).Add(p => p.Max, 10m));
+
+            Assert.False(component.Instance.Validate(DateTime.Now));
+        }
+    }
+}

Radzen.Blazor.Tests/NumericTests.cs

@@ -1,6 +1,4 @@
 using Bunit;
-using Bunit.JSInterop;
-using System;
 using Xunit;
 
 namespace Radzen.Blazor.Tests
@@ -47,8 +45,10 @@ namespace Radzen.Blazor.Tests
             var minValue = 2;
             var raised = false;
 
-            component.SetParametersAndRender(parameters => {
+            component.SetParametersAndRender(parameters =>
+            {
                 component.SetParametersAndRender(parameters => parameters.Add(p => p.Change, args => { raised = true; }));
+                parameters.Add<double>(p => p.Value, minValue);
                 parameters.Add<decimal?>(p => p.Min, minValue);
             });
 
@@ -69,7 +69,8 @@ namespace Radzen.Blazor.Tests
             var maxValue = 10;
             var raised = false;
 
-            component.SetParametersAndRender(parameters => {
+            component.SetParametersAndRender(parameters =>
+            {
                 component.SetParametersAndRender(parameters => parameters.Add(p => p.Change, args => { raised = true; }));
                 parameters.Add<double>(p => p.Value, maxValue);
                 parameters.Add<decimal?>(p => p.Max, maxValue);
@@ -192,6 +193,34 @@ namespace Radzen.Blazor.Tests
             Assert.Contains(@$"autocomplete=""on""", component.Markup);
         }
 
+        [Fact]
+        public void Numeric_Renders_TypedAutoCompleteParameter()
+        {
+            using var ctx = new TestContext();
+
+            var component = ctx.RenderComponent<RadzenNumeric<double>>();
+
+            component.SetParametersAndRender(parameters => parameters.Add<bool>(p => p.AutoComplete, false));
+            component.SetParametersAndRender(parameters => parameters.Add<AutoCompleteType>(p => p.AutoCompleteType, AutoCompleteType.On));
+
+            Assert.Contains(@$"autocomplete=""off""", component.Markup);
+
+            component.SetParametersAndRender(parameters => parameters.Add<bool>(p => p.AutoComplete, true));
+            component.SetParametersAndRender(parameters => parameters.Add<AutoCompleteType>(p => p.AutoCompleteType, AutoCompleteType.Off));
+
+            Assert.Contains(@$"autocomplete=""off""", component.Markup);
+
+            component.SetParametersAndRender(parameters => parameters.Add<bool>(p => p.AutoComplete, true));
+            component.SetParametersAndRender(parameters => parameters.Add<AutoCompleteType>(p => p.AutoCompleteType, AutoCompleteType.BdayMonth));
+
+            Assert.Contains(@$"autocomplete=""{AutoCompleteType.BdayMonth.GetAutoCompleteValue()}""", component.Markup);
+
+            component.SetParametersAndRender(parameters => parameters.Add<bool>(p => p.AutoComplete, true));
+            component.SetParametersAndRender(parameters => parameters.Add<AutoCompleteType>(p => p.AutoCompleteType, AutoCompleteType.BdayYear));
+
+            Assert.Contains(@$"autocomplete=""{AutoCompleteType.BdayYear.GetAutoCompleteValue()}""", component.Markup);
+        }
+
         [Fact]
         public void Numeric_Raises_ChangedEvent()
         {
@@ -248,17 +277,18 @@ namespace Radzen.Blazor.Tests
             var expectedValue = 5.5;
             object newValue = null;
 
-            component.SetParametersAndRender(parameters => {
+            component.SetParametersAndRender(parameters =>
+            {
                 parameters.Add<double>(p => p.Value, value);
                 parameters.Add(p => p.Step, "2");
-                parameters.Add(p => p.Change, args => { raised = true; newValue = args; }); 
+                parameters.Add(p => p.Change, args => { raised = true; newValue = args; });
             });
 
             component.Find(".rz-spinner-up").Click();
 
             Assert.True(raised, "Numeric Change should be raised on step up");
             Assert.True(object.Equals(expectedValue, newValue), $"Numeric value should be incremented on step up. Expected value: {expectedValue}, value: {newValue}");
-            
+
             raised = false;
 
             component.SetParametersAndRender(parameters => parameters.Add(p => p.ValueChanged, args => { raised = true; }));
@@ -282,7 +312,8 @@ namespace Radzen.Blazor.Tests
             var expectedValue = 1.5;
             object newValue = null;
 
-            component.SetParametersAndRender(parameters => {
+            component.SetParametersAndRender(parameters =>
+            {
                 parameters.Add<double>(p => p.Value, value);
                 parameters.Add(p => p.Step, "2");
                 parameters.Add(p => p.Change, args => { raised = true; newValue = args; });
@@ -301,5 +332,51 @@ namespace Radzen.Blazor.Tests
 
             Assert.True(raised, "Numeric ValueChanged should be raised on step up");
         }
+
+        [Fact]
+        public void Numeric_UpDown_Rendered()
+        {
+            using var ctx = new TestContext();
+
+            var component = ctx.RenderComponent<RadzenNumeric<double>>();
+
+            component.Render();
+
+            Assert.Contains(@$"rz-spinner-button-icon", component.Markup);
+            Assert.Contains(@$"rz-spinner-up", component.Markup);
+            Assert.Contains(@$"rz-spinner-down", component.Markup);
+        }
+
+        [Fact]
+        public void Numeric_UpDown_NotRenderedIfHidden()
+        {
+            using var ctx = new TestContext();
+
+            var component = ctx.RenderComponent<RadzenNumeric<double>>(ComponentParameter.CreateParameter(nameof(RadzenNumeric<double>.ShowUpDown), false));
+
+            component.Render();
+
+            Assert.DoesNotContain(@$"rz-spinner-button-icon", component.Markup);
+            Assert.DoesNotContain(@$"rz-spinner-up", component.Markup);
+            Assert.DoesNotContain(@$"rz-spinner-down", component.Markup);
+        }
+
+        [Fact]
+        public void Numeric_Formatted()
+        {
+            using var ctx = new TestContext();
+
+            double valueToTest = 100.234;
+            string format = "0.00";
+
+            var component = ctx.RenderComponent<RadzenNumeric<double>>(
+                ComponentParameter.CreateParameter(nameof(RadzenNumeric<double>.Format), format),
+                ComponentParameter.CreateParameter(nameof(RadzenNumeric<double>.Value), valueToTest)
+            );
+
+            component.Render();
+
+            Assert.Contains($" value=\"{valueToTest.ToString(format)}\"", component.Markup);
+        }
     }
 }

Radzen.Blazor.Tests/PagerTests.cs

@@ -0,0 +1,80 @@
+using Bunit;
+using Bunit.JSInterop;
+using System;
+using System.Collections.Generic;
+using Xunit;
+
+namespace Radzen.Blazor.Tests
+{
+    public class PagerTests
+    {
+        [Fact]
+        public void RadzenPager_AutoHide_If_Count_Is_Less_Than_PageSize()
+        {
+            using var ctx = new TestContext();
+            ctx.JSInterop.Mode = JSRuntimeMode.Loose;
+            ctx.JSInterop.SetupModule("_content/Radzen.Blazor/Radzen.Blazor.js");
+
+            var component = ctx.RenderComponent<RadzenPager>(parameters =>
+            {
+                parameters.Add<int>(p => p.PageSize, 20);
+                parameters.Add<int>(p => p.Count, 100);
+            });
+
+            component.Render();
+
+            Assert.Contains(@$"rz-paginator", component.Markup);
+
+            component.SetParametersAndRender(parameters =>
+            {
+                parameters.Add<int>(p => p.PageSize, 101);
+                parameters.Add<int>(p => p.Count, 100);
+            });
+            Assert.DoesNotContain(@$"rz-paginator", component.Markup);
+        }
+
+        [Fact]
+        public void RadzenPager_Dont_AutoHide_If_PageSizeOptions_Specified()
+        {
+            using var ctx = new TestContext();
+            ctx.JSInterop.Mode = JSRuntimeMode.Loose;
+            ctx.JSInterop.SetupModule("_content/Radzen.Blazor/Radzen.Blazor.js");
+
+            var component = ctx.RenderComponent<RadzenPager>(parameters =>
+            {
+                parameters.Add<int>(p => p.PageSize, 101);
+                parameters.Add<int>(p => p.Count, 100);
+                parameters.Add<IEnumerable<int>>(p => p.PageSizeOptions, new int[] { 3, 7, 15 });
+            });
+
+            component.Render();
+
+            Assert.Contains(@$"rz-paginator", component.Markup);
+            Assert.Contains(@$"rz-dropdown-trigger", component.Markup);
+        }
+
+        [Fact]
+        public async void RadzenPager_Renders_Summary() {
+            using var ctx = new TestContext();
+            ctx.JSInterop.Mode = JSRuntimeMode.Loose;
+            ctx.JSInterop.SetupModule("_content/Radzen.Blazor/Radzen.Blazor.js");
+
+            var component = ctx.RenderComponent<RadzenPager>(parameters => {
+                parameters.Add<int>(p => p.PageSize, 10);
+                parameters.Add<int>(p => p.Count, 100);
+                parameters.Add<bool>(p => p.ShowPagingSummary, true);
+            });
+            await component.Instance.GoToPage(2);
+            component.Render();
+
+            Assert.Contains(@$"rz-paginator-summary", component.Markup); 
+            Assert.Contains(@$"Page 3 of 10 (100 items)", component.Markup); 
+            
+            component.SetParametersAndRender(parameters => {
+                parameters.Add<bool>(p => p.ShowPagingSummary, false);
+            });
+            Assert.DoesNotContain(@$"rz-paginator-summary", component.Markup);
+        }
+
+    }
+}

Radzen.Blazor.Tests/PanelMenuTests.cs

@@ -0,0 +1,98 @@
+using Bunit;
+using Bunit.TestDoubles;
+using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Routing;
+using Microsoft.Extensions.DependencyInjection.Extensions;
+using Xunit;
+
+namespace Radzen.Blazor.Tests
+{
+    public class PanelMenuTests
+    {
+        class TestNavigationManager : NavigationManager
+        {
+            public TestNavigationManager(string uri)
+            {
+                Initialize("http://www.example.com/", uri);
+            }
+
+            protected override void NavigateToCore(string uri, bool forceLoad)
+            {
+            }
+        }
+
+        private static string CreatePanelMenu(string currentAbsoluteUrl, NavLinkMatch match, params string[] urls)
+        {
+            using var ctx = new TestContext();
+
+            ctx.Services.RemoveAll<NavigationManager>();
+            ctx.Services.TryAddSingleton<NavigationManager>(new TestNavigationManager(currentAbsoluteUrl));
+
+            var component = ctx.RenderComponent<RadzenPanelMenu>();
+
+            component.SetParametersAndRender(parameters => parameters.Add(p => p.Match, match).AddChildContent(builder => 
+            {
+                foreach (var url in urls)
+                {
+                    builder.OpenComponent<RadzenPanelMenuItem>(0);
+                    builder.AddAttribute(1, nameof(RadzenPanelMenuItem.Path), url);
+                    builder.CloseComponent();
+                }
+            }));
+
+            return component.Markup;
+        }
+
+        [Fact]
+        public void RadzenPanelMenu_SetsOneActiveMenuItem()
+        {
+            var component = CreatePanelMenu("http://www.example.com/datagrid-dynamic", NavLinkMatch.All, "/datagrid", "/datagrid-dynamic");
+
+            var firstIndex = component.IndexOf("rz-navigation-item-wrapper-active");
+            var lastIndex = component.LastIndexOf("rz-navigation-item-wrapper-active");
+
+            Assert.NotEqual(-1, firstIndex);
+            Assert.Equal(firstIndex, lastIndex);
+        }
+
+        [Fact]
+        public void RadzenPanelMenu_MatchesQueryStringParameters()
+        {
+            var component = CreatePanelMenu("http://www.example.com/foo?bar", NavLinkMatch.Prefix, "/foo");
+
+            Assert.Contains("rz-navigation-item-wrapper-active", component);
+        }
+
+        [Fact]
+        public void RadzenPanelMenu_DoesNotMatchQueryStringParametersWhenExactMatchIsSpecified()
+        {
+            var component = CreatePanelMenu("http://www.example.com/foo?bar", NavLinkMatch.All, "/foo");
+
+            Assert.DoesNotContain("rz-navigation-item-wrapper-active", component);
+        }
+
+        [Fact]
+        public void RadzenPanelMenu_DoesNotMatchRootWithEverything()
+        {
+            var component = CreatePanelMenu("http://www.example.com/foo", NavLinkMatch.Prefix, "/");
+
+            Assert.DoesNotContain("rz-navigation-item-wrapper-active", component);
+        }
+
+        [Fact]
+        public void RadzenPanelMenu_MatchesRoot()
+        {
+            var component = CreatePanelMenu("http://www.example.com/", NavLinkMatch.Prefix, "/");
+
+            Assert.Contains("rz-navigation-item-wrapper-active", component);
+        }
+
+        [Fact]
+        public void RadzenPanelMenu_MatchesRootWithoutTrailingSlash()
+        {
+            var component = CreatePanelMenu("http://www.example.com", NavLinkMatch.Prefix, "/");
+
+            Assert.Contains("rz-navigation-item-wrapper-active", component);
+        }
+    }
+}

Radzen.Blazor.Tests/PanelTests.cs

@@ -1,4 +1,6 @@
 using Bunit;
+using Microsoft.AspNetCore.Components;
+using System.Linq;
 using Xunit;
 
 namespace Radzen.Blazor.Tests
@@ -159,7 +161,8 @@ namespace Radzen.Blazor.Tests
 
             var raised = false;
 
-            component.SetParametersAndRender(parameters => {
+            component.SetParametersAndRender(parameters =>
+            {
                 parameters.Add<bool>(p => p.AllowCollapse, true);
                 parameters.Add(p => p.Collapse, args => { raised = true; });
             });
@@ -174,5 +177,57 @@ namespace Radzen.Blazor.Tests
 
             component.Find("a").Click();
         }
+
+        [Fact]
+        public void Panel_Renders_SummaryWhenCollapsed()
+        {
+            using var ctx = new TestContext();
+            var component = ctx.RenderComponent<RadzenPanel>();
+
+            component.SetParametersAndRender(parameters =>
+            {
+                parameters.Add<bool>(p => p.AllowCollapse, true);
+                parameters.Add<bool>(p => p.Collapsed, true);
+                parameters.Add<RenderFragment>(p => p.SummaryTemplate, builder =>
+                {
+                    builder.OpenElement(0, "p");
+                    builder.AddContent(0, "SummaryContent");
+                    builder.CloseElement();
+                });
+
+            });
+
+            Assert.Contains("SummaryContent", component.Markup);
+            Assert.Equal(
+                "display: block",
+                component.Find(".rz-panel-content-summary").ParentElement.Attributes.First(attr => attr.Name == "style").Value
+            );
+        }
+
+        [Fact]
+        public void Panel_DontRenders_SummaryWhenOpen()
+        {
+            using var ctx = new TestContext();
+            var component = ctx.RenderComponent<RadzenPanel>();
+
+            component.SetParametersAndRender(parameters =>
+            {
+                parameters.Add<bool>(p => p.AllowCollapse, true);
+                parameters.Add<bool>(p => p.Collapsed, false);
+                parameters.Add<RenderFragment>(p => p.SummaryTemplate, builder =>
+                {
+                    builder.OpenElement(0, "p");
+                    builder.AddContent(0, "SummaryContent");
+                    builder.CloseElement();
+                });
+
+            });
+
+            Assert.Contains("SummaryContent", component.Markup);
+            Assert.Equal(
+                "display: none",
+                component.Find(".rz-panel-content-summary").ParentElement.Attributes.First(attr => attr.Name == "style").Value
+            );
+        }
     }
 }

Radzen.Blazor.Tests/PasswordTests.cs

@@ -128,6 +128,34 @@ namespace Radzen.Blazor.Tests
             Assert.Contains(@$"autocomplete=""on""", component.Markup);
         }
 
+        [Fact]
+        public void Password_Renders_TypedAutoCompleteParameter()
+        {
+            using var ctx = new TestContext();
+
+            var component = ctx.RenderComponent<RadzenPassword>();
+
+            component.SetParametersAndRender(parameters => parameters.Add<bool>(p => p.AutoComplete, false));
+            component.SetParametersAndRender(parameters => parameters.Add<AutoCompleteType>(p => p.AutoCompleteType, AutoCompleteType.On));
+
+            Assert.Contains(@$"autocomplete=""new-password""", component.Markup);
+
+            component.SetParametersAndRender(parameters => parameters.Add<bool>(p => p.AutoComplete, true));
+            component.SetParametersAndRender(parameters => parameters.Add<AutoCompleteType>(p => p.AutoCompleteType, AutoCompleteType.Off));
+
+            Assert.Contains(@$"autocomplete=""off""", component.Markup);
+
+            component.SetParametersAndRender(parameters => parameters.Add<bool>(p => p.AutoComplete, true));
+            component.SetParametersAndRender(parameters => parameters.Add<AutoCompleteType>(p => p.AutoCompleteType, AutoCompleteType.CurrentPassword));
+
+            Assert.Contains(@$"autocomplete=""{AutoCompleteType.CurrentPassword.GetAutoCompleteValue()}""", component.Markup);
+
+            component.SetParametersAndRender(parameters => parameters.Add<bool>(p => p.AutoComplete, true));
+            component.SetParametersAndRender(parameters => parameters.Add<AutoCompleteType>(p => p.AutoCompleteType, AutoCompleteType.NewPassword));
+
+            Assert.Contains(@$"autocomplete=""{AutoCompleteType.NewPassword.GetAutoCompleteValue()}""", component.Markup);
+        }
+
         [Fact]
         public void Password_Renders_UnmatchedParameter()
         {

Radzen.Blazor.Tests/ProgressBarTests.cs

@@ -18,7 +18,9 @@ namespace Radzen.Blazor.Tests
 
             component.SetParametersAndRender(parameters => parameters.Add<double>(p => p.Value, value));
 
-            Assert.Contains(@$"<div class=""rz-progressbar-label"">{value}", component.Markup);
+
+            Assert.Contains(@$"<div class=""rz-progressbar-label"">", component.Markup);
+            Assert.Contains(@$"{value}%", component.Markup);
             Assert.Contains(@$"aria-valuenow=""{value}""", component.Markup);
             Assert.Contains(@$"aria-valuemin=""0""", component.Markup);
         }
@@ -50,13 +52,13 @@ namespace Radzen.Blazor.Tests
 
             component.Render();
 
-            Assert.Contains(@$"%</div>", component.Markup);
+            Assert.Contains(@$"0%", component.Markup);
 
-            var value = "mm";
+            var unit = "mm";
 
-            component.SetParametersAndRender(parameters => parameters.Add(p => p.Unit, value));
+            component.SetParametersAndRender(parameters => parameters.Add(p => p.Unit, unit));
 
-            Assert.Contains(@$"{value}</div>", component.Markup);
+            Assert.Contains(@$"0{unit}", component.Markup);
         }
 
         [Fact]
@@ -118,5 +120,27 @@ namespace Radzen.Blazor.Tests
 
             Assert.Contains(@$"style=""width: {Math.Min(value / max * 100, 100).ToInvariantString()}%;""", component.Markup);
         }
+
+        [Fact]
+        public void ProgressBar_Renders_ProgressBarStyle()
+        {
+            using var ctx = new TestContext();
+
+            var component = ctx.RenderComponent<RadzenProgressBar>();
+
+            component.SetParametersAndRender(parameters=>parameters.Add(p=>p.ProgressBarStyle, ProgressBarStyle.Success));
+            Assert.Contains(@$"rz-progressbar-determinate-success", component.Markup);
+
+            component.SetParametersAndRender(parameters => parameters.Add(p => p.ProgressBarStyle, ProgressBarStyle.Info));
+            Assert.Contains(@$"rz-progressbar-determinate-info", component.Markup);
+
+            component.SetParametersAndRender(parameters => parameters.Add(p => p.ProgressBarStyle, ProgressBarStyle.Success));
+            component.SetParametersAndRender(parameters => parameters.Add(p => p.Mode, ProgressBarMode.Indeterminate));
+            Assert.Contains(@$"rz-progressbar-indeterminate-success", component.Markup);
+
+            component.SetParametersAndRender(parameters => parameters.Add(p => p.ProgressBarStyle, ProgressBarStyle.Info));
+            component.SetParametersAndRender(parameters => parameters.Add(p => p.Mode, ProgressBarMode.Indeterminate));
+            Assert.Contains(@$"rz-progressbar-indeterminate-info", component.Markup);
+        }
     }
 }

Radzen.Blazor.Tests/PropertyAccessTests.cs

@@ -0,0 +1,120 @@
+using AngleSharp.Css;
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Linq.Dynamic.Core;
+using Xunit;
+
+namespace Radzen.Blazor.Tests
+{
+    public class PropertyAccessTests
+    {
+        public partial class TestData
+        {
+            public string PROPERTY { get; set; }
+            public string Property { get; set; }
+        }
+
+        [Fact]
+        public void Getter_With_DifferentTargetType()
+        {
+            var o = new TestData { Property = "test" };
+            var getter = PropertyAccess.Getter<object, object>(nameof(TestData.Property), typeof(TestData));
+            var value = getter(o);
+            Assert.Equal(o.Property, value);
+        }
+
+        [Fact]
+        public void Getter_With_Members_That_Differ_Only_In_Casing()
+        {
+            var o = new TestData { PROPERTY = nameof(TestData.PROPERTY), Property = nameof(TestData.Property) };
+            var getter = PropertyAccess.Getter<TestData, string>(nameof(TestData.PROPERTY));
+            var value = getter(o);
+            Assert.Equal(nameof(TestData.PROPERTY), value);
+        }
+
+        [Fact]
+        public void Getter_Resolves_Property_On_Simple_Object()
+        {
+            var o = new SimpleObject() { Prop1 = "TestString" };
+            var getter = PropertyAccess.Getter<SimpleObject, string>("Prop1");
+            var value = getter(o);
+            Assert.Equal("TestString", value);
+        }
+
+        [Fact]
+        public void Getter_Resolves_Property_On_Simple_Object_QueryableType()
+        {
+            var _data = new List<SimpleObject>()
+            {
+                new SimpleObject() { Prop1 = "TestString" },
+            };
+
+            Func<object, object> getter = PropertyAccess.Getter<object, object>("Prop1", typeof(SimpleObject));
+
+            var value = getter(_data[0]);
+            Assert.Equal("TestString", value);
+        }
+
+        [Fact]
+        public void Getter_Resolves_Property_On_Nested_Object()
+        {
+            var o = new NestedObject() { Obj = new SimpleObject { Prop1 = "TestString" } };
+            var getter = PropertyAccess.Getter<NestedObject, string>("Obj.Prop1");
+            var value = getter(o);
+            Assert.Equal("TestString", value);
+        }
+
+        [Fact]
+        public void Getter_Resolves_Property_From_Array()
+        {
+            var o = new ArrayObject() { Values = new string[] { "1", "2", "3" } };
+            var getter = PropertyAccess.Getter<ArrayObject, string>("Values[1]");
+            var value = getter(o);
+            Assert.Equal("2", value);
+        }
+
+        [Fact]
+        public void Getter_Resolves_Property_From_Nested_Array()
+        {
+            var o = new NestedArrayObject() { Obj = new ArrayObject() { Values = new string[] { "1", "2", "3" } } };
+            var getter = PropertyAccess.Getter<NestedArrayObject, string>("Obj.Values[2]");
+            var value = getter(o);
+            Assert.Equal("3", value);
+        }
+
+        [Fact]
+        public void Getter_Resolves_Property_From_List()
+        {
+            var o = new ListObject() { Values = new List<string>() { "1", "2", "3" } };
+            var getter = PropertyAccess.Getter<ListObject, string>("Values[1]");
+            var value = getter(o);
+            Assert.Equal("2", value);
+        }
+
+        public class SimpleObject
+        {
+            public string Prop1 { get; set; }
+        }
+
+        public class NestedObject
+        {
+            public SimpleObject Obj { get; set; }
+        }
+
+        public class ArrayObject
+        {
+            public string[] Values { get; set; }
+        }
+
+        public class NestedArrayObject
+        {
+            public ArrayObject Obj { get; set; }
+        }
+
+        public class ListObject
+        {
+            public List<string> Values { get; set; }
+        }
+    }
+}

Radzen.Blazor.Tests/Radzen.Blazor.Tests.csproj

@@ -1,15 +1,14 @@
 <Project Sdk="Microsoft.NET.Sdk">
 
   <PropertyGroup>
-    <TargetFramework>net5.0</TargetFramework>
+    <TargetFramework>net7</TargetFramework>
 
     <IsPackable>false</IsPackable>
   </PropertyGroup>
 
   <ItemGroup>
     <PackageReference Include="Microsoft.NET.Test.Sdk" Version="16.7.1" />
-    <PackageReference Include="bunit.web" Version="1.0.0-preview-01" />
-    <PackageReference Include="bunit.xunit" Version="1.0.0-preview-01" />
+    <PackageReference Include="bunit.web" Version="1.2.49" />
     <PackageReference Include="xunit" Version="2.4.1" />
     <PackageReference Include="xunit.runner.visualstudio" Version="2.4.3">
       <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>

Radzen.Blazor.Tests/Rendering/StepGeneratorTests.cs

@@ -0,0 +1,25 @@
+using System.Collections.Generic;
+using Radzen.Blazor.Rendering;
+using Xunit;
+
+namespace Radzen.Blazor.Tests.Rendering;
+
+public class StepGeneratorTests
+{
+    [Fact]
+    public void Renders_Path_Correctly()
+    {
+        var data = new List<Point>
+        {
+            new() { X = 10, Y = 10 },
+            new() { X = 20, Y = 15 },
+            new() { X = 30, Y = 20 },
+            new() { X = 40, Y = 25 },
+            new() { X = 50, Y = 50 }
+        };
+
+        var path = new StepGenerator().Path(data);
+        
+        Assert.Equal("10 10 H 20 V 15 H 30 V 20 H 40 V 25 H 50 V 50", path);
+    }
+}

Radzen.Blazor.Tests/SliderTests.cs

@@ -38,8 +38,8 @@ namespace Radzen.Blazor.Tests
 
             component.SetParametersAndRender(parameters => parameters.Add<int>(p => p.Value, value));
 
-            Assert.Contains(@$"style=""width: {(value / max * 100).ToInvariantString()}%;""", component.Markup);
-            Assert.Contains(@$"style=""left: {(value / max * 100).ToInvariantString()}%;""", component.Markup);
+            Assert.Contains(@$"style=""width: {Math.Round((value / max * 100)).ToInvariantString()}%;""", component.Markup);
+            Assert.Contains(@$"style=""left: {Math.Round((value / max * 100)).ToInvariantString()}%;""", component.Markup);
         }
 
         [Fact]
@@ -55,9 +55,9 @@ namespace Radzen.Blazor.Tests
                 parameters.Add<IEnumerable<int>>(p => p.Value, new int[] { 4, 30 });
             });
 
-            Assert.Contains(@$"left: 4.00%", component.Markup);
-            Assert.Contains(@$"left: 30.0%", component.Markup);
-            Assert.Contains(@$"left: 4.00%; width: 26.00%;", component.Markup);
+            Assert.Contains(@$"left: 4%", component.Markup);
+            Assert.Contains(@$"left: 30%", component.Markup);
+            Assert.Contains(@$"left: 4%; width: 26%;", component.Markup);
         }
 
         [Fact]

Radzen.Blazor.Tests/SpeechToTextButtonTests.cs

@@ -0,0 +1,197 @@
+using Bunit;
+using Xunit;
+
+namespace Radzen.Blazor.Tests
+{
+    public class SpeechToTextButtonTests
+    {
+        [Fact]
+        public void SpeechToTextButton_Renders_Record_Button_When_Visible()
+        {
+            using var ctx = new TestContext();
+
+            var component = ctx.RenderComponent<RadzenSpeechToTextButton>();
+
+            component.Render();
+
+            var recordButton = component.Find("button.rz-button-icon-only.rz-speech-to-text-button");
+
+            Assert.NotNull(recordButton);
+        }
+
+        [Fact]
+        public void SpeechToTextButton_Does_Not_Renders_Record_Button_When_Visible_False()
+        {
+            using var ctx = new TestContext();
+
+            var component = ctx.RenderComponent<RadzenSpeechToTextButton>();
+
+            component.SetParametersAndRender(parameters =>
+            {
+                parameters.Add(p => p.Visible, false);
+            });
+
+            Assert.Throws<ElementNotFoundException>(() => component.Find("button.rz-button-icon-only.rz-speech-to-text-button"));
+        }
+
+        [Fact]
+        public void SpeechToTextButton_Renders_Additional_Css()
+        {
+            using var ctx = new TestContext();
+
+            var component =
+                ctx.RenderComponent<RadzenSpeechToTextButton>(ComponentParameter.CreateParameter("class", "another-class"));
+
+            var recordButton = component.Find("button.rz-button-icon-only.rz-speech-to-text-button.another-class");
+
+            Assert.NotNull(recordButton);
+        }
+
+        [Fact]
+        public void SpeechToTextButton_Can_Override_Default_Title_And_Aria_Label()
+        {
+            using var ctx = new TestContext();
+
+            var component =
+                ctx.RenderComponent<RadzenSpeechToTextButton>(
+                    ComponentParameter.CreateParameter("title", "title override"),
+                    ComponentParameter.CreateParameter("aria-label", "aria-label override"));
+
+            var recordButton = component.Find("button.rz-button-icon-only.rz-speech-to-text-button");
+
+            Assert.NotNull(recordButton);
+            Assert.Equal("title override", recordButton.GetAttribute("title"));
+            Assert.Equal("aria-label override", recordButton.GetAttribute("aria-label"));
+        }
+
+        [Fact]
+        public void SpeechToTextButton_Sets_Record_Button_Css_When_Record_Button_Clicked()
+        {
+            using var ctx = new TestContext();
+
+            var component = ctx.RenderComponent<RadzenSpeechToTextButton>();
+
+            ctx.JSInterop.Mode = JSRuntimeMode.Loose;
+
+            component.Render();
+
+            var recordButton = component.Find("button.rz-button-icon-only.rz-speech-to-text-button");
+
+            Assert.NotNull(recordButton);
+
+            recordButton.Click();
+
+            component.Render();
+
+            var blinkingRecordButton = component.Find("button.rz-button-icon-only.rz-speech-to-text-button-recording");
+
+            Assert.NotNull(blinkingRecordButton);
+        }
+
+        [Fact]
+        public void SpeechToTextButton_Sets_StopTitle_When_Record_Button_Clicked()
+        {
+            using var ctx = new TestContext();
+
+            var component = ctx.RenderComponent<RadzenSpeechToTextButton>();
+
+            ctx.JSInterop.Mode = JSRuntimeMode.Loose;
+
+            component.Render();
+
+            var recordButton = component.Find("button.rz-button-icon-only.rz-speech-to-text-button");
+
+            Assert.NotNull(recordButton);
+
+            recordButton.Click();
+
+            component.Render();
+
+            var blinkingRecordButton = component.Find("button.rz-button-icon-only.rz-speech-to-text-button-recording");
+
+            Assert.Equal(component.Instance.StopTitle, blinkingRecordButton.GetAttribute("title"));
+        }
+
+        [Fact]
+        public void SpeechToTextButton_ChangesIconWhen_When_Record_Button_Clicked()
+        {
+            using var ctx = new TestContext();
+
+            var component = ctx.RenderComponent<RadzenSpeechToTextButton>();
+
+            ctx.JSInterop.Mode = JSRuntimeMode.Loose;
+
+            component.Render();
+
+            var recordButton = component.Find("button.rz-button-icon-only.rz-speech-to-text-button");
+
+            Assert.NotNull(recordButton);
+
+            recordButton.Click();
+
+            component.Render();
+
+            var blinkingRecordButton = component.Find("button span");
+
+            Assert.Contains("stop", blinkingRecordButton.TextContent);
+            Assert.DoesNotContain("mic", blinkingRecordButton.TextContent);
+        }
+
+        [Fact]
+        public void SpeechToTextButton_UnSets_Record_Button_Css_When_Record_Button_Clicked_Twice()
+        {
+            using var ctx = new TestContext();
+
+            var component = ctx.RenderComponent<RadzenSpeechToTextButton>();
+
+            ctx.JSInterop.Mode = JSRuntimeMode.Loose;
+
+            component.Render();
+
+            var recordButton = component.Find("button.rz-button-icon-only.rz-speech-to-text-button");
+
+            Assert.NotNull(recordButton);
+
+            recordButton.Click();
+
+            component.Render();
+
+            const string blinkingRecordButtonSelector = "button.rz-button-icon-only.rz-speech-to-text-button-recording";
+            var blinkingRecordButton = component.Find(blinkingRecordButtonSelector);
+
+            Assert.NotNull(blinkingRecordButton);
+
+            blinkingRecordButton.Click();
+
+            component.Render();
+
+            Assert.Throws<ElementNotFoundException>(() => component.Find(blinkingRecordButtonSelector));
+        }
+
+        [Fact]
+        public void SpeechToTextButton_Invokes_OnResult_FromJs()
+        {
+            using var ctx = new TestContext();
+
+            ctx.JSInterop.Mode = JSRuntimeMode.Loose;
+
+            var component = ctx.RenderComponent<RadzenSpeechToTextButton>();
+
+            string resultsFromJs = null;
+
+            component.SetParametersAndRender(parameters => parameters.Add(p => p.Change, r => resultsFromJs = r));
+
+            var recordButton = component.Find("button.rz-button-icon-only.rz-speech-to-text-button");
+
+            Assert.NotNull(recordButton);
+
+            recordButton.Click();
+
+            const string speechResults = "results from js";
+
+            component.InvokeAsync(() => component.Instance.OnResult(speechResults));
+
+            Assert.Equal(speechResults, resultsFromJs);
+        }
+    }
+}

Radzen.Blazor.Tests/SplitButtonTests.cs

@@ -127,6 +127,8 @@ namespace Radzen.Blazor.Tests
         public void SplitButton_Raises_ClickEvent()
         {
             using var ctx = new TestContext();
+            ctx.JSInterop.Mode = JSRuntimeMode.Loose;
+            ctx.JSInterop.SetupModule("_content/Radzen.Blazor/Radzen.Blazor.js");
 
             var component = ctx.RenderComponent<RadzenSplitButton>();
 

Radzen.Blazor.Tests/SwitchTests.cs

@@ -110,7 +110,7 @@ namespace Radzen.Blazor.Tests
 
             component.SetParametersAndRender(parameters => parameters.Add(p => p.Change, args => { raised = true; newValue = args; }));
 
-            component.Find("div").MouseUp();
+            component.Find("div").Click();
 
             Assert.True(raised);
             Assert.True(object.Equals(value, !(bool)newValue));
@@ -129,7 +129,7 @@ namespace Radzen.Blazor.Tests
 
             component.SetParametersAndRender(parameters => parameters.Add(p => p.ValueChanged, args => { raised = true; newValue = args; }));
 
-            component.Find("div").MouseUp();
+            component.Find("div").Click();
 
             Assert.True(raised);
             Assert.True(object.Equals(value, !(bool)newValue));

Radzen.Blazor.Tests/TextBoxTests.cs

@@ -128,6 +128,34 @@ namespace Radzen.Blazor.Tests
             Assert.Contains(@$"autocomplete=""on""", component.Markup);
         }
 
+        [Fact]
+        public void TextBox_Renders_TypedAutoCompleteParameter()
+        {
+            using var ctx = new TestContext();
+
+            var component = ctx.RenderComponent<RadzenTextBox>();
+
+            component.SetParametersAndRender(parameters => parameters.Add<bool>(p => p.AutoComplete, false));
+            component.SetParametersAndRender(parameters => parameters.Add<AutoCompleteType>(p => p.AutoCompleteType, AutoCompleteType.On));
+
+            Assert.Contains(@$"autocomplete=""off""", component.Markup);
+
+            component.SetParametersAndRender(parameters => parameters.Add<bool>(p => p.AutoComplete, true));
+            component.SetParametersAndRender(parameters => parameters.Add<AutoCompleteType>(p => p.AutoCompleteType, AutoCompleteType.Off));
+
+            Assert.Contains(@$"autocomplete=""off""", component.Markup);
+
+            component.SetParametersAndRender(parameters => parameters.Add<bool>(p => p.AutoComplete, true));
+            component.SetParametersAndRender(parameters => parameters.Add<AutoCompleteType>(p => p.AutoCompleteType, AutoCompleteType.AdditionalName));
+
+            Assert.Contains(@$"autocomplete=""{AutoCompleteType.AdditionalName.GetAutoCompleteValue()}""", component.Markup);
+
+            component.SetParametersAndRender(parameters => parameters.Add<bool>(p => p.AutoComplete, true));
+            component.SetParametersAndRender(parameters => parameters.Add<AutoCompleteType>(p => p.AutoCompleteType, AutoCompleteType.FamilyName));
+
+            Assert.Contains(@$"autocomplete=""{AutoCompleteType.FamilyName.GetAutoCompleteValue()}""", component.Markup);
+        }
+
         [Fact]
         public void TextBox_Renders_MaxLengthParameter()
         {

Radzen.Blazor/.config/dotnet-tools.json

@@ -1,12 +0,0 @@
-{
-  "version": 1,
-  "isRoot": true,
-  "tools": {
-    "excubo.webcompiler": {
-      "version": "2.6.0",
-      "commands": [
-        "webcompiler"
-      ]
-    }
-  }
-}

Radzen.Blazor/AppointmentData.cs

@@ -1,12 +1,55 @@
 using System;
+using System.Collections.Generic;
 
 namespace Radzen.Blazor
 {
+    /// <summary>
+    /// Represents an appointment in <see cref="RadzenScheduler{TItem}" />
+    /// </summary>
     public class AppointmentData
     {
+        /// <summary>
+        /// Gets or sets the start of the appointment.
+        /// </summary>
+        /// <value>The start.</value>
         public DateTime Start { get; set; }
+        /// <summary>
+        /// Gets or sets the end of the appointment.
+        /// </summary>
+        /// <value>The end.</value>
         public DateTime End { get; set; }
+        /// <summary>
+        /// Gets or sets the text of the appointment.
+        /// </summary>
+        /// <value>The text.</value>
         public string Text { get; set; }
+        /// <summary>
+        /// Gets or sets the data associated with the appointment
+        /// </summary>
+        /// <value>The data.</value>
         public object Data { get; set; }
+
+        /// <summary>
+        /// Determines whether the specified object is equal to this instance. Used to check if two appointments are equal.
+        /// </summary>
+        /// <param name="obj">The object to compare with this instance.</param>
+        /// <returns><c>true</c> if the specified is equal to this instance; otherwise, <c>false</c>.</returns>
+        public override bool Equals(object obj)
+        {
+            return obj is AppointmentData data &&
+                   Start == data.Start &&
+                   End == data.End &&
+                   Text == data.Text &&
+                   EqualityComparer<object>.Default.Equals(Data, data.Data);
+        }
+
+        /// <summary>
+        /// Returns a hash code for this instance.
+        /// </summary>
+        /// <returns>A hash code for this instance, suitable for use in hashing algorithms and data structures like a hash table.</returns>
+        public override int GetHashCode()
+        {
+            return HashCode.Combine(Start, End, Text, Data);
+        }
     }
 }

Radzen.Blazor/AutoCompleteType.cs

@@ -0,0 +1,81 @@
+namespace Radzen.Blazor
+{
+    /// <summary>
+    /// The <c>AutomCompleteType</c> is a string-associated enum of
+    /// browser-supported autocomplete attribute values.
+    /// </summary>
+    /// <remarks>
+    /// This class lists the autocomplete attirbute options allowing
+    /// developers to provide the browser with guidance on how to pre-populate
+    /// the form fields. It is a class rather than a simpler enum to associate
+    /// each option with the string the browser expects. For more information
+    /// please review the list of options (https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)
+    /// and the spec (https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill).
+    /// </remarks>
+    public enum AutoCompleteType
+    {
+        // Options
+        Off,
+        On,
+        Name,
+        HonorificPrefix,
+        GivenName,
+        AdditionalName,
+        FamilyName,
+        HonorificSuffix,
+        Nickname,
+        Email,
+        Username,
+        NewPassword,
+        CurrentPassword,
+        OneTimeCode,
+        OrganizationTitle,
+        Organization,
+        StreetAddress,
+        AddressLine1,
+        AddressLine2,
+        AddressLine3,
+        AddressLevel1,
+        AddressLevel2,
+        AddressLevel3,
+        AddressLevel4,
+        Country,
+        CountryName,
+        PostalCode,
+        CcName,
+        CcGivenName,
+        CcAdditionalName,
+        CcFamilyName,
+        CcNumber,
+        CcExp,
+        CcExpMonth,
+        CcExpYear,
+        CcCsc,
+        CcType,
+        TransactionCurrency,
+        TransactionAmount,
+        Language,
+        Bday,
+        BdayDay,
+        BdayMonth,
+        BdayYear,
+        Sex,
+        Tel,
+        TelCountryCode,
+        TelNational,
+        TelAreaCode,
+        TelLocal,
+        TelExtension,
+        Impp,
+        Url,
+        Photo,
+
+        // Synonyms
+        State,
+        Province,
+        ZipCode,
+        FirstName,
+        MiddleName,
+        LastName,
+    }
+}

Radzen.Blazor/AxisBase.cs

@@ -3,45 +3,106 @@ using Microsoft.AspNetCore.Components;
 
 namespace Radzen.Blazor
 {
+    /// <summary>
+    /// Base class for an axis in <see cref="RadzenChart" />.
+    /// </summary>
     public abstract class AxisBase : RadzenChartComponentBase, IChartAxis
     {
+        /// <summary>
+        /// Gets or sets the stroke (line color) of the axis.
+        /// </summary>
+        /// <value>The stroke.</value>
         [Parameter]
         public string Stroke { get; set; }
+        /// <summary>
+        /// Gets or sets the pixel width of axis.
+        /// </summary>
+        /// <value>The width of the stroke.</value>
         [Parameter]
         public double StrokeWidth { get; set; } = 1;
 
+        /// <summary>
+        /// Gets or sets the child content.
+        /// </summary>
+        /// <value>The child content.</value>
         [Parameter]
         public RenderFragment ChildContent { get; set; }
 
+        /// <summary>
+        /// Gets or sets the format string used to display the axis values.
+        /// </summary>
+        /// <value>The format string.</value>
         [Parameter]
         public string FormatString { get; set; }
 
+        /// <summary>
+        /// Gets or sets a formatter function that formats the axis values.
+        /// </summary>
+        /// <value>The formatter.</value>
         [Parameter]
         public Func<object, string> Formatter { get; set; }
 
+        /// <summary>
+        /// Gets or sets the type of the line used to display the axis.
+        /// </summary>
+        /// <value>The type of the line.</value>
         [Parameter]
         public LineType LineType { get; set; }
 
+        /// <summary>
+        /// Gets or sets the grid lines configuration of the current axis.
+        /// </summary>
+        /// <value>The grid lines.</value>
         public RadzenGridLines GridLines { get; set; } = new RadzenGridLines();
 
+        /// <summary>
+        /// Gets or sets the title configuration.
+        /// </summary>
+        /// <value>The title.</value>
         public RadzenAxisTitle Title { get; set; } = new RadzenAxisTitle();
 
+        /// <summary>
+        /// Gets or sets the ticks configuration.
+        /// </summary>
+        /// <value>The ticks.</value>
         public RadzenTicks Ticks { get; set; } = new RadzenTicks();
 
-        internal int TickDistance { get; set; } = 100;
+        /// <summary>
+        /// Gets or sets the pixel distance between axis ticks. It is used to calculate the number of visible ticks depending on the available space. Set to 100 by default;
+        /// Setting <see cref="Step" /> will override this value.
+        /// </summary>
+        /// <value>The desired pixel distance between ticks.</value>
+        [Parameter]
+        public int TickDistance { get; set; } = 100;
 
+        /// <summary>
+        /// Specifies the minimum value of the axis.
+        /// </summary>
+        /// <value>The minimum.</value>
         [Parameter]
         public object Min { get; set; }
 
+        /// <summary>
+        /// Specifies the maximum value of the axis.
+        /// </summary>
+        /// <value>The maximum.</value>
         [Parameter]
         public object Max { get; set; }
 
+        /// <summary>
+        /// Specifies the step of the axis.
+        /// </summary>
         [Parameter]
         public object Step { get; set; }
 
+        /// <summary>
+        /// Gets or sets a value indicating whether this <see cref="AxisBase"/> is visible.
+        /// </summary>
+        /// <value><c>true</c> if visible; otherwise, <c>false</c>.</value>
         [Parameter]
         public bool Visible { get; set; } = true;
 
+        /// <inheritdoc />
         protected override bool ShouldRefreshChart(ParameterView parameters)
         {
             return DidParameterChange(parameters, nameof(Min), Min) ||

Radzen.Blazor/CartesianSeries.cs

@@ -5,12 +5,22 @@ using System.Linq;
 using System.Linq.Dynamic.Core;
 using Radzen.Blazor.Rendering;
 using System.Threading.Tasks;
+using System.Collections;
+using Microsoft.AspNetCore.Components.Rendering;
 
 namespace Radzen.Blazor
 {
+    /// <summary>
+    /// Base class of <see cref="RadzenChart" /> series.
+    /// </summary>
+    /// <typeparam name="TItem">The type of the series data.</typeparam>
     public abstract class CartesianSeries<TItem> : RadzenChartComponentBase, IChartSeries, IDisposable
     {
-        protected Func<TItem, double> Category(ScaleBase scale)
+        /// <summary>
+        /// Creates a getter function that returns a value from the specified category scale for the specified data item.
+        /// </summary>
+        /// <param name="scale">The scale.</param>
+        internal Func<TItem, double> Category(ScaleBase scale)
         {
             if (IsNumeric(CategoryProperty))
             {
@@ -34,16 +44,28 @@ namespace Radzen.Blazor
             return (item) => Items.IndexOf(item);
         }
 
+        /// <summary>
+        /// Helper function. Used internally.
+        /// </summary>
         protected Func<TItem, double> ComposeCategory(ScaleBase scale)
         {
             return scale.Compose(Category(scale));
         }
 
+        /// <summary>
+        /// Helper function. Used internally.
+        /// </summary>
         protected Func<TItem, double> ComposeValue(ScaleBase scale)
         {
             return scale.Compose(Value);
         }
 
+        /// <summary>
+        /// Determines whether the property with the specified name is <see cref="DateTime" />
+        /// </summary>
+        /// <param name="propertyName">Name of the property.</param>
+        /// <returns><c>true</c> if the specified property name is date; otherwise, <c>false</c>.</returns>
+        /// <exception cref="ArgumentException">Property {propertyName} does not exist</exception>
         protected bool IsDate(string propertyName)
         {
             if (String.IsNullOrEmpty(propertyName))
@@ -61,6 +83,12 @@ namespace Radzen.Blazor
             return PropertyAccess.IsDate(property);
         }
 
+        /// <summary>
+        /// Determines whether the property with the specified name is numeric.
+        /// </summary>
+        /// <param name="propertyName">Name of the property.</param>
+        /// <returns><c>true</c> if the specified property name is numeric; otherwise, <c>false</c>.</returns>
+        /// <exception cref="ArgumentException">Property {propertyName} does not exist</exception>
         protected bool IsNumeric(string propertyName)
         {
             if (String.IsNullOrEmpty(propertyName))
@@ -78,46 +106,118 @@ namespace Radzen.Blazor
             return PropertyAccess.IsNumeric(property);
         }
 
+        /// <inheritdoc />
         [Parameter]
         public string Title { get; set; }
 
+        /// <summary>
+        /// Gets or sets the child content.
+        /// </summary>
+        /// <value>The child content.</value>
         [Parameter]
         public RenderFragment ChildContent { get; set; }
 
+        /// <summary>
+        /// Gets or sets the tooltip template.
+        /// </summary>
+        /// <value>The tooltip template.</value>
         [Parameter]
         public RenderFragment<TItem> TooltipTemplate { get; set; }
 
+        /// <summary>
+        /// Gets the list of overlays.
+        /// </summary>
+        /// <value>The Overlays list.</value>
+        public IList<IChartSeriesOverlay> Overlays { get; } = new List<IChartSeriesOverlay>();
+
+        /// <summary>
+        /// Gets the coordinate system of the series.
+        /// </summary>
+        /// <value>Coordinate system enum value.</value>
+        public virtual CoordinateSystem CoordinateSystem => CoordinateSystem.Cartesian;
+
+        /// <summary>
+        /// The name of the property of <typeparamref name="TItem" /> that provides the X axis (a.k.a. category axis) values.
+        /// </summary>
         [Parameter]
         public string CategoryProperty { get; set; }
 
+        /// <summary>
+        /// Gets or sets a value indicating whether this <see cref="CartesianSeries{TItem}"/> is visible.
+        /// Invisible series do not appear in the legend and cannot be shown by the user.
+        /// Use the <c>Visible</c> property to programatically show or hide a series.
+        /// </summary>
+        /// <value><c>true</c> if visible; otherwise, <c>false</c>.</value>
+        [Parameter]
         public bool Visible { get; set; } = true;
 
+        /// <summary>
+        /// Gets or sets a value indicating whether this <see cref="CartesianSeries{TItem}"/> is hidden.
+        /// Hidden series are initially invisible and the user can show them by clicking on their label in the legend.
+        /// Use the <c>Hidden</c> property to hide certain series from your users but still allow them to see them.
+        /// </summary>
+        /// <value><c>true</c> if hidden; otherwise, <c>false</c>.</value>
+        [Parameter]
+        public bool Hidden { get; set; }
+
+        bool IsVisible { get; set; } = true;
+
+        bool IChartSeries.Visible
+        {
+            get
+            {
+                return IsVisible;
+            }
+        }
+
+        /// <inheritdoc />
+        public bool ShowInLegend { get => Visible; }
+
+        /// <summary>
+        /// The name of the property of <typeparamref name="TItem" /> that provides the Y axis (a.k.a. value axis) values.
+        /// </summary>
         [Parameter]
         public string ValueProperty { get; set; }
 
+        /// <inheritdoc />
         [Parameter]
         public int RenderingOrder { get; set; }
 
-        protected Func<TItem, double> Value
+        /// <summary>
+        /// Creates a getter function that returns a value from the specified data item. Uses <see cref="ValueProperty" />.
+        /// </summary>
+        /// <value>The value.</value>
+        /// <exception cref="ArgumentException">ValueProperty should not be empty</exception>
+        internal Func<TItem, double> Value
         {
             get
             {
                 if (String.IsNullOrEmpty(ValueProperty))
                 {
-                    throw new ArgumentException("ValueProperty shoud not be empty");
+                    throw new ArgumentException("ValueProperty should not be empty");
                 }
 
                 return PropertyAccess.Getter<TItem, double>(ValueProperty);
             }
         }
 
+        /// <summary>
+        /// Gets or sets the data of the series. The data is enumerated and its items are displayed by the series.
+        /// </summary>
+        /// <value>The data.</value>
         [Parameter]
         public IEnumerable<TItem> Data { get; set; }
 
+        /// <summary>
+        /// Stores <see cref="Data" /> as an IList of <typeparamref name="TItem"/>.
+        /// </summary>
+        /// <value>The items.</value>
         protected IList<TItem> Items { get; set; } = new List<TItem>();
 
+        /// <inheritdoc />
         public RadzenMarkers Markers { get; set; } = new RadzenMarkers();
 
+        /// <inheritdoc />
         public virtual MarkerType MarkerType
         {
             get
@@ -142,6 +242,17 @@ namespace Radzen.Blazor
             }
         }
 
+        /// <summary>
+        /// Returns the category values
+        /// </summary>
+        protected virtual IList<object> GetCategories()
+        {
+            Func<TItem, object> category = String.IsNullOrEmpty(CategoryProperty) ? (item) => string.Empty : PropertyAccess.Getter<TItem, object>(CategoryProperty);
+
+            return Items.Select(category).ToList();
+        }
+
+        /// <inheritdoc />
         public virtual ScaleBase TransformCategoryScale(ScaleBase scale)
         {
             if (Items == null)
@@ -168,9 +279,7 @@ namespace Radzen.Blazor
                 };
             }
 
-            Func<TItem, object> category = String.IsNullOrEmpty(CategoryProperty) ? (item) => string.Empty : PropertyAccess.Getter<TItem, object>(CategoryProperty);
-
-            var data = Items.Select(category).ToList();
+            var data = GetCategories();
 
             if (scale is OrdinalScale ordinal)
             {
@@ -199,6 +308,7 @@ namespace Radzen.Blazor
             };
         }
 
+        /// <inheritdoc />
         public virtual ScaleBase TransformValueScale(ScaleBase scale)
         {
             if (Items != null)
@@ -212,18 +322,55 @@ namespace Radzen.Blazor
             return scale;
         }
 
+        /// <inheritdoc />
         public abstract RenderFragment Render(ScaleBase categoryScale, ScaleBase valueScale);
+
+        /// <inheritdoc />
+        public RenderFragment RenderOverlays(ScaleBase categoryScale, ScaleBase valueScale)
+        {
+            return new RenderFragment(builder =>
+            {
+                builder.OpenRegion(0);
+                foreach (var overlay in Overlays)
+                {
+                    if (overlay.Visible)
+                    {
+                        builder.AddContent(1, overlay.Render(categoryScale, valueScale));
+                    }
+                }
+                builder.CloseRegion();
+            });
+        }
+
+        /// <inheritdoc />
         public abstract string Color { get; }
 
-        double MinValue { get; set; }
-        double MaxValue { get; set; }
-
+        /// <inheritdoc />
         public override async Task SetParametersAsync(ParameterView parameters)
         {
             var shouldRefresh = parameters.DidParameterChange(nameof(Data), Data);
+            var visibleChanged = parameters.DidParameterChange(nameof(Visible), Visible);
+            var hiddenChanged = parameters.DidParameterChange(nameof(Hidden), Hidden);
 
             await base.SetParametersAsync(parameters);
 
+            if (hiddenChanged)
+            {
+                IsVisible = !Hidden;
+                shouldRefresh = true;
+            }
+
+            if (visibleChanged)
+            {
+                IsVisible = Visible;
+                shouldRefresh = true;
+            }
+
+            if (Data != null && Data.Count() != Items.Count)
+            {
+                shouldRefresh = true;
+            }
+
             if (shouldRefresh)
             {
                 if (Data != null)
@@ -241,33 +388,36 @@ namespace Radzen.Blazor
                     {
                         Items = Items.AsQueryable().OrderBy(CategoryProperty).ToList();
                     }
-
-                    if (Items.Any())
-                    {
-                        MinValue = Items.Min(Value);
-                        MaxValue = Items.Max(Value);
-                    }
                 }
 
-                Chart.Refresh(false);
+                await Chart.Refresh(false);
             }
         }
 
+        /// <inheritdoc />
         protected override void Initialize()
         {
             Chart.AddSeries(this);
         }
 
-        public virtual bool Contains(double x, double y)
+        /// <inheritdoc />
+        public virtual bool Contains(double x, double y, double tolerance)
         {
             return false;
         }
 
+        /// <inheritdoc />
         public virtual double MeasureLegend()
         {
             return TextMeasurer.TextWidth(GetTitle());
         }
 
+        /// <summary>
+        /// Determines if the provided point is inside the provided polygon.
+        /// </summary>
+        /// <param name="point">The point.</param>
+        /// <param name="polygon">The polygon.</param>
+        /// <returns><c>true</c> if the polygon contains the point, <c>false</c> otherwise.</returns>
         protected bool InsidePolygon(Point point, Point[] polygon)
         {
             var minX = polygon[0].X;
@@ -303,6 +453,7 @@ namespace Radzen.Blazor
             return inside;
         }
 
+        /// <inheritdoc />
         public virtual RenderFragment RenderTooltip(object data, double marginLeft, double marginTop)
         {
             var item = (TItem)data;
@@ -316,10 +467,7 @@ namespace Radzen.Blazor
                 builder.AddAttribute(1, nameof(ChartTooltip.X), x + marginLeft);
                 builder.AddAttribute(2, nameof(ChartTooltip.Y), y + marginTop);
 
-                if (TooltipTemplate != null)
-                {
-                    builder.AddAttribute(3, nameof(ChartTooltip.ChildContent), TooltipTemplate(item));
-                }
+                builder.AddAttribute(3, nameof(ChartTooltip.ChildContent), TooltipTemplate?.Invoke(item));
 
                 builder.AddAttribute(4, nameof(ChartTooltip.Title), TooltipTitle(item));
                 builder.AddAttribute(5, nameof(ChartTooltip.Label), TooltipLabel(item));
@@ -330,21 +478,30 @@ namespace Radzen.Blazor
             };
         }
 
+        /// <summary>
+        /// Gets the tooltip inline style.
+        /// </summary>
+        /// <param name="item">The item.</param>
         protected virtual string TooltipStyle(TItem item)
         {
             return Chart.Tooltip.Style;
         }
 
+        /// <summary>
+        /// Gets the tooltip CSS class.
+        /// </summary>
+        /// <param name="item">The item.</param>
         protected virtual string TooltipClass(TItem item)
         {
             return $"rz-series-{Chart.Series.IndexOf(this)}-tooltip";
         }
 
+        /// <inheritdoc />
         public virtual RenderFragment RenderLegendItem()
         {
             var style = new List<string>();
 
-            if (Visible == false)
+            if (IsVisible == false)
             {
                 style.Add("text-decoration: line-through");
             }
@@ -363,6 +520,7 @@ namespace Radzen.Blazor
             };
         }
 
+        /// <inheritdoc />
         public double MarkerSize
         {
             get
@@ -378,62 +536,210 @@ namespace Radzen.Blazor
             }
         }
 
-        private void OnLegendItemClick()
+        /// <inheritdoc />
+        public double GetMedian()
         {
-            Chart.ToggleSeries(this);
+            return Data.Select(e => Value(e)).OrderBy(e => e).Skip(Data.Count() / 2).FirstOrDefault();
         }
 
+        /// <inheritdoc />
+        public double GetMean()
+        {
+            return Data.Select(e => Value(e)).Average();
+        }
+
+        /// <inheritdoc />
+        public double GetMode()
+        {
+            return Data.GroupBy(e => Value(e)).Select(g => new { Value = g.Key, Count = g.Count() }).OrderByDescending(e => e.Count).FirstOrDefault().Value;
+        }
+
+        /// <summary>
+        /// https://en.wikipedia.org/wiki/Simple_linear_regression#Fitting_the_regression_line
+        /// </summary>
+        public (double a, double b) GetTrend()
+        {
+            double a, b;
+
+            Func<TItem, double> X;
+            Func<TItem, double> Y;
+            if (Chart.ShouldInvertAxes())
+            {
+                X = e => Chart.CategoryScale.Scale(Value(e));
+                Y = e => Chart.ValueScale.Scale(Category(Chart.ValueScale)(e));
+            }
+            else
+            {
+                X = e => Chart.CategoryScale.Scale(Category(Chart.CategoryScale)(e));
+                Y = e => Chart.ValueScale.Scale(Value(e));
+            }
+
+            var avgX = Data.Select(e => X(e)).Average();
+            var avgY = Data.Select(e => Y(e)).Average();
+            var sumXY = Data.Sum(e => (X(e) - avgX) * (Y(e) - avgY));         
+            if (Chart.ShouldInvertAxes())
+            {
+                var sumYSq = Data.Sum(e => (Y(e) - avgY) * (Y(e) - avgY));
+                b = sumXY / sumYSq;
+                a = avgX - b * avgY;
+            }
+            else
+            {
+                var sumXSq = Data.Sum(e => (X(e) - avgX) * (X(e) - avgX));
+                b = sumXY / sumXSq;
+                a = avgY - b * avgX;
+            }
+
+            return (a, b);
+        }
+
+        private async Task OnLegendItemClick()
+        {
+            IsVisible = !IsVisible;
+
+            if (Chart.LegendClick.HasDelegate)
+            {
+                var args = new LegendClickEventArgs
+                {
+                    Data = this.Data,
+                    Title = GetTitle(),
+                    IsVisible = IsVisible,
+                };
+
+                await Chart.LegendClick.InvokeAsync(args);
+
+                IsVisible = args.IsVisible;
+            }
+
+            await Chart.Refresh();
+        }
+
+        /// <inheritdoc />
         public string GetTitle()
         {
             return String.IsNullOrEmpty(Title) ? $"Series {Chart.Series.IndexOf(this) + 1}" : Title;
         }
 
+        /// <summary>
+        /// Gets the label of the tooltip displayed for this item.
+        /// </summary>
+        /// <param name="item">The item.</param>
         protected virtual string TooltipLabel(TItem item)
         {
             return GetTitle();
         }
 
+        /// <summary>
+        /// Gets the title of the tooltip displayed for this item.
+        /// </summary>
+        /// <param name="item">The item.</param>
         protected virtual string TooltipTitle(TItem item)
         {
             var category = Category(Chart.CategoryScale);
             return Chart.CategoryAxis.Format(Chart.CategoryScale, Chart.CategoryScale.Value(category(item)));
         }
 
+        /// <summary>
+        /// Gets the value of the tooltip displayed for this item.
+        /// </summary>
+        /// <param name="item">The item.</param>
+        /// <returns>System.String.</returns>
         protected virtual string TooltipValue(TItem item)
         {
             return Chart.ValueAxis.Format(Chart.ValueScale, Chart.ValueScale.Value(Value(item)));
         }
 
-        protected virtual double TooltipX(TItem item)
+        /// <summary>
+        /// Gets the X coordinate of the tooltip of the specified item.
+        /// </summary>
+        /// <param name="item">The item.</param>
+        internal virtual double TooltipX(TItem item)
         {
             var category = Category(Chart.CategoryScale);
             return Chart.CategoryScale.Scale(category(item), true);
         }
 
-        protected virtual double TooltipY(TItem item)
+        /// <summary>
+        /// Gets the Y coordinate of the tooltip of the specified item.
+        /// </summary>
+        /// <param name="item">The item.</param>
+        internal virtual double TooltipY(TItem item)
         {
             return Chart.ValueScale.Scale(Value(item), true);
         }
 
+        /// <inheritdoc />
         public virtual object DataAt(double x, double y)
         {
-            var first = Items.FirstOrDefault();
-            var last = Items.LastOrDefault();
+            if (Items.Any())
+            {
+                return Items.Select(item =>
+                {
+                    var distance = Math.Abs(TooltipX(item) - x);
+                    return new { Item = item, Distance = distance };
+                }).Aggregate((a, b) => a.Distance < b.Distance ? a : b).Item;
+            }
 
-            var category = Category(Chart.CategoryScale);
-
-            var startX = Chart.CategoryScale.Scale(category(first), true);
-            var endX = Chart.CategoryScale.Scale(category(last), true);
-
-            var count = Math.Max(Items.Count() - 1, 1);
-            var index = Convert.ToInt32((x - startX) / ((endX - startX) / count));
-
-            return Items.ElementAtOrDefault(index);
+            return null;
         }
 
+        /// <inheritdoc />
+        public virtual IEnumerable<ChartDataLabel> GetDataLabels(double offsetX, double offsetY)
+        {
+            var list = new List<ChartDataLabel>();
+
+            foreach (var d in Data)
+            {
+                list.Add(new ChartDataLabel 
+                { 
+                    Position = new Point { X = TooltipX(d) + offsetX, Y = TooltipY(d) + offsetY },
+                    TextAnchor = "middle",
+                    Text = Chart.ValueAxis.Format(Chart.ValueScale, Value(d))
+                });
+            }
+
+            return list;
+        }
+
+        /// <summary>
+        /// Returns a color from the specified list of colors. Rotates colors.
+        /// </summary>
+        /// <param name="index">The index.</param>
+        /// <param name="colors">The colors.</param>
+        /// <param name="defaultValue">The default value.</param>
+        protected string PickColor(int index, IEnumerable<string> colors, string defaultValue = null)
+        {
+            if (colors == null || !colors.Any())
+            {
+                return defaultValue;
+            }
+
+            return colors.ElementAt(index % colors.Count());
+        }
+
+        /// <inheritdoc />
         public void Dispose()
         {
             Chart?.RemoveSeries(this);
         }
+
+        /// <inheritdoc />
+        public async Task InvokeClick(EventCallback<SeriesClickEventArgs> handler, object data)
+        {
+            var category = Category(Chart.CategoryScale);
+
+            await handler.InvokeAsync(new SeriesClickEventArgs
+            {
+                Data = data,
+                Title = GetTitle(),
+                Category = PropertyAccess.GetValue(data, CategoryProperty),
+                Value = PropertyAccess.GetValue(data, ValueProperty),
+                Point = new SeriesPoint
+                {
+                    Category = category((TItem)data),
+                    Value = Value((TItem)data)
+                }
+            });
+        }
     }
 }

Radzen.Blazor/ColorScheme.cs

@@ -1,10 +1,25 @@
 namespace Radzen.Blazor
 {
+    /// <summary>
+    /// Specifies the <see cref="RadzenChart" /> color schemes used when rendering the series.
+    /// </summary>
     public enum ColorScheme
     {
+        /// <summary>
+        /// Pastel color scheme.
+        /// </summary>
         Pastel,
+        /// <summary>
+        /// Palette color scheme.
+        /// </summary>
         Palette,
+        /// <summary>
+        /// Divergent color scheme.
+        /// </summary>
         Divergent,
+        /// <summary>
+        /// Monochrome color scheme
+        /// </summary>
         Monochrome
     }
 }

Radzen.Blazor/ContextMenuService.cs

@@ -7,10 +7,48 @@ using System.Threading.Tasks;
 
 namespace Radzen
 {
+    /// <summary>
+    /// Class ContextMenuService. Contains various methods with options to open and close context menus. 
+    /// Should be added as scoped service in the application services and RadzenContextMenu should be added in application main layout.
+    /// Implements the <see cref="IDisposable" />
+    /// </summary>
+    /// <seealso cref="IDisposable" />
+    /// <example>
+    /// <code>
+    /// @inject ContextMenuService ContextMenuService
+    /// &lt;RadzenButton Text="Show context menu" ContextMenu=@(args => ShowContextMenuWithContent(args)) /&gt;
+    /// @code {
+    ///     void ShowContextMenuWithContent(MouseEventArgs args) =&gt; ContextMenuService.Open(args, ds =&gt;
+    ///       @&lt;RadzenMenu Click="OnMenuItemClick"&gt;
+    ///         &lt;RadzenMenuItem Text="Item1" Value="1"&gt;&lt;/RadzenMenuItem&gt;
+    ///         &lt;RadzenMenuItem Text="Item2" Value="2"&gt;&lt;/RadzenMenuItem&gt;
+    ///         &lt;RadzenMenuItem Text="More items" Value="3"&gt;
+    ///             &lt;RadzenMenuItem Text="More sub items" Value="4"&gt;
+    ///                 &lt;RadzenMenuItem Text="Item1" Value="5"&gt;&lt;/RadzenMenuItem&gt;
+    ///                 &lt;RadzenMenuItem Text="Item2" Value="6"&gt;&lt;/RadzenMenuItem&gt;
+    ///             &lt;/RadzenMenuItem&gt;
+    ///         &lt;/RadzenMenuItem&gt;
+    ///       &lt;/RadzenMenu&gt;);
+    /// 
+    ///     void OnMenuItemClick(MenuItemEventArgs args)
+    ///     {
+    ///       Console.WriteLine($"Menu item with Value={args.Value} clicked");
+    ///     }
+    /// }
+    /// </code>
+    /// </example>
     public class ContextMenuService : IDisposable
     {
+        /// <summary>
+        /// Gets or sets the navigation manager.
+        /// </summary>
+        /// <value>The navigation manager.</value>
         NavigationManager navigationManager { get; set; }
 
+        /// <summary>
+        /// Initializes a new instance of the <see cref="ContextMenuService"/> class.
+        /// </summary>
+        /// <param name="uriHelper">The URI helper.</param>
         public ContextMenuService(NavigationManager uriHelper)
         {
             navigationManager = uriHelper;
@@ -21,6 +59,11 @@ namespace Radzen
             }
         }
 
+        /// <summary>
+        /// Handles the OnLocationChanged event of the UriHelper control.
+        /// </summary>
+        /// <param name="sender">The source of the event.</param>
+        /// <param name="e">The <see cref="Microsoft.AspNetCore.Components.Routing.LocationChangedEventArgs"/> instance containing the event data.</param>
         private void UriHelper_OnLocationChanged(object sender, Microsoft.AspNetCore.Components.Routing.LocationChangedEventArgs e)
         {
             if (this.OnNavigate != null)
@@ -29,12 +72,27 @@ namespace Radzen
             }
         }
 
+        /// <summary>
+        /// Occurs when [on navigate].
+        /// </summary>
         public event Action OnNavigate;
 
+        /// <summary>
+        /// Raises the Close event.
+        /// </summary>
         public event Action OnClose;
 
+        /// <summary>
+        /// Occurs when [on open].
+        /// </summary>
         public event Action<MouseEventArgs, ContextMenuOptions> OnOpen;
 
+        /// <summary>
+        /// Opens the specified arguments.
+        /// </summary>
+        /// <param name="args">The <see cref="MouseEventArgs"/> instance containing the event data.</param>
+        /// <param name="items">The items.</param>
+        /// <param name="click">The click.</param>
         public void Open(MouseEventArgs args, IEnumerable<ContextMenuItem> items, Action<MenuItemEventArgs> click = null)
         {
             var options = new ContextMenuOptions();
@@ -45,6 +103,11 @@ namespace Radzen
             OpenTooltip(args, options);
         }
 
+        /// <summary>
+        /// Opens the specified arguments.
+        /// </summary>
+        /// <param name="args">The <see cref="MouseEventArgs"/> instance containing the event data.</param>
+        /// <param name="childContent">Content of the child.</param>
         public void Open(MouseEventArgs args, RenderFragment<ContextMenuService> childContent)
         {
             var options = new ContextMenuOptions();
@@ -54,39 +117,87 @@ namespace Radzen
             OpenTooltip(args, options);
         }
 
+        /// <summary>
+        /// Opens the tooltip.
+        /// </summary>
+        /// <param name="args">The <see cref="MouseEventArgs"/> instance containing the event data.</param>
+        /// <param name="options">The options.</param>
         private void OpenTooltip(MouseEventArgs args, ContextMenuOptions options)
         {
             OnOpen?.Invoke(args, options);
         }
 
+        /// <summary>
+        /// Closes this instance.
+        /// </summary>
         public void Close()
         {
             OnClose?.Invoke();
         }
 
+        /// <summary>
+        /// Disposes this instance.
+        /// </summary>
         public void Dispose()
         {
             navigationManager.LocationChanged -= UriHelper_OnLocationChanged;
         }
     }
 
+    /// <summary>
+    /// Class ContextMenuOptions.
+    /// </summary>
     public class ContextMenuOptions
     {
+        /// <summary>
+        /// Gets or sets the child content.
+        /// </summary>
+        /// <value>The child content.</value>
         public RenderFragment<ContextMenuService> ChildContent { get; set; }
+        /// <summary>
+        /// Gets or sets the items.
+        /// </summary>
+        /// <value>The items.</value>
         public IEnumerable<ContextMenuItem> Items { get; set; }
 
+        /// <summary>
+        /// Gets or sets the click.
+        /// </summary>
+        /// <value>The click.</value>
         public Action<MenuItemEventArgs> Click { get; set; }
     }
 
+    /// <summary>
+    /// Class ContextMenu.
+    /// </summary>
     public class ContextMenu
     {
+        /// <summary>
+        /// Gets or sets the options.
+        /// </summary>
+        /// <value>The options.</value>
         public ContextMenuOptions Options { get; set; }
+        /// <summary>
+        /// Gets or sets the mouse event arguments.
+        /// </summary>
+        /// <value>The mouse event arguments.</value>
         public MouseEventArgs MouseEventArgs { get; set; }
     }
 
+    /// <summary>
+    /// Class ContextMenuItem.
+    /// </summary>
     public class ContextMenuItem
-    { 
+    {
+        /// <summary>
+        /// Gets or sets the text.
+        /// </summary>
+        /// <value>The text.</value>
         public string Text { get; set; }
+        /// <summary>
+        /// Gets or sets the value.
+        /// </summary>
+        /// <value>The value.</value>
         public object Value { get; set; }
     }
 }

Radzen.Blazor/DataBoundFormComponent.cs

@@ -8,37 +8,85 @@ using System.Threading.Tasks;
 using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Forms;
 using Radzen.Blazor;
+using Radzen.Blazor.Rendering;
 
 namespace Radzen
 {
+    /// <summary>
+    /// Class DataBoundFormComponent.
+    /// Implements the <see cref="Radzen.RadzenComponent" />
+    /// Implements the <see cref="Radzen.IRadzenFormComponent" />
+    /// </summary>
+    /// <typeparam name="T"></typeparam>
+    /// <seealso cref="Radzen.RadzenComponent" />
+    /// <seealso cref="Radzen.IRadzenFormComponent" />
     public class DataBoundFormComponent<T> : RadzenComponent, IRadzenFormComponent
     {
+        /// <summary>
+        /// Gets or sets the index of the tab.
+        /// </summary>
+        /// <value>The index of the tab.</value>
         [Parameter]
         public int TabIndex { get; set; } = 0;
 
+        /// <summary>
+        /// Gets or sets the filter case sensitivity.
+        /// </summary>
+        /// <value>The filter case sensitivity.</value>
         [Parameter]
         public FilterCaseSensitivity FilterCaseSensitivity { get; set; } = FilterCaseSensitivity.Default;
 
+        /// <summary>
+        /// Gets or sets the filter operator.
+        /// </summary>
+        /// <value>The filter operator.</value>
         [Parameter]
         public StringFilterOperator FilterOperator { get; set; } = StringFilterOperator.Contains;
 
+        /// <summary>
+        /// Gets or sets the name.
+        /// </summary>
+        /// <value>The name.</value>
         [Parameter]
         public string Name { get; set; }
 
+        /// <summary>
+        /// Gets or sets the placeholder.
+        /// </summary>
+        /// <value>The placeholder.</value>
         [Parameter]
         public string Placeholder { get; set; }
 
+        /// <summary>
+        /// Gets or sets a value indicating whether this <see cref="DataBoundFormComponent{T}"/> is disabled.
+        /// </summary>
+        /// <value><c>true</c> if disabled; otherwise, <c>false</c>.</value>
         [Parameter]
         public bool Disabled { get; set; }
 
+        /// <summary>
+        /// Gets or sets the change.
+        /// </summary>
+        /// <value>The change.</value>
         [Parameter]
         public EventCallback<object> Change { get; set; }
 
+        /// <summary>
+        /// Gets or sets the load data.
+        /// </summary>
+        /// <value>The load data.</value>
         [Parameter]
         public EventCallback<Radzen.LoadDataArgs> LoadData { get; set; }
 
+        /// <summary>
+        /// The form
+        /// </summary>
         IRadzenForm _form;
 
+        /// <summary>
+        /// Gets or sets the form.
+        /// </summary>
+        /// <value>The form.</value>
         [CascadingParameter]
         public IRadzenForm Form
         {
@@ -48,15 +96,19 @@ namespace Radzen
             }
             set
             {
-                if (_form != value && value != null)
-                {
-                    _form = value;
-                    _form.AddComponent(this);
-                }
+                _form = value;
+                _form?.AddComponent(this);
             }
         }
 
+        /// <summary>
+        /// The value
+        /// </summary>
         object _value;
+        /// <summary>
+        /// Gets or sets the value.
+        /// </summary>
+        /// <value>The value.</value>
         [Parameter]
         public object Value
         {
@@ -73,9 +125,17 @@ namespace Radzen
             }
         }
 
+        /// <summary>
+        /// Gets or sets the value changed.
+        /// </summary>
+        /// <value>The value changed.</value>
         [Parameter]
         public EventCallback<T> ValueChanged { get; set; }
 
+        /// <summary>
+        /// Gets a value indicating whether this instance is bound.
+        /// </summary>
+        /// <value><c>true</c> if this instance is bound; otherwise, <c>false</c>.</value>
         public bool IsBound
         {
             get
@@ -83,7 +143,11 @@ namespace Radzen
                 return ValueChanged.HasDelegate;
             }
         }
-        public bool HasValue
+        /// <summary>
+        /// Gets a value indicating whether this instance has value.
+        /// </summary>
+        /// <value><c>true</c> if this instance has value; otherwise, <c>false</c>.</value>
+        public virtual bool HasValue
         {
             get
             {
@@ -95,10 +159,21 @@ namespace Radzen
             }
         }
 
+        /// <summary>
+        /// Gets or sets the text property.
+        /// </summary>
+        /// <value>The text property.</value>
         [Parameter]
         public string TextProperty { get; set; }
 
+        /// <summary>
+        /// The data
+        /// </summary>
         IEnumerable _data = null;
+        /// <summary>
+        /// Gets or sets the data.
+        /// </summary>
+        /// <value>The data.</value>
         [Parameter]
         public virtual IEnumerable Data
         {
@@ -113,17 +188,23 @@ namespace Radzen
                     _view = null;
                     _value = null;
                     _data = value;
-                    OnDataChanged();
                     StateHasChanged();
                 }
             }
         }
 
-        protected virtual void OnDataChanged()
+        /// <summary>
+        /// Called when [data changed].
+        /// </summary>
+        protected virtual async Task OnDataChanged()
         {
-
+            await Task.CompletedTask;
         }
 
+        /// <summary>
+        /// Gets the query.
+        /// </summary>
+        /// <value>The query.</value>
         protected virtual IQueryable Query
         {
             get
@@ -132,9 +213,19 @@ namespace Radzen
             }
         }
 
-        protected string searchText;
+        /// <summary>
+        /// The search text
+        /// </summary>
+        internal string searchText;
 
+        /// <summary>
+        /// The view
+        /// </summary>
         protected IQueryable _view = null;
+        /// <summary>
+        /// Gets the view.
+        /// </summary>
+        /// <value>The view.</value>
         protected virtual IEnumerable View
         {
             get
@@ -171,15 +262,38 @@ namespace Radzen
             }
         }
 
+        /// <summary>
+        /// Gets or sets the edit context.
+        /// </summary>
+        /// <value>The edit context.</value>
         [CascadingParameter]
         public EditContext EditContext { get; set; }
 
+        /// <summary>
+        /// Gets the field identifier.
+        /// </summary>
+        /// <value>The field identifier.</value>
         public FieldIdentifier FieldIdentifier { get; private set; }
 
+        /// <summary>
+        /// Gets or sets the value expression.
+        /// </summary>
+        /// <value>The value expression.</value>
         [Parameter]
         public Expression<Func<T>> ValueExpression { get; set; }
-        public override Task SetParametersAsync(ParameterView parameters)
+        /// <summary>
+        /// Set parameters as an asynchronous operation.
+        /// </summary>
+        /// <param name="parameters">The parameters.</param>
+        /// <returns>A Task representing the asynchronous operation.</returns>
+        public override async Task SetParametersAsync(ParameterView parameters)
         {
+            var dataChanged = parameters.DidParameterChange(nameof(Data), Data);
+            if (dataChanged)
+            {
+                await OnDataChanged();
+            }
+
             var result = base.SetParametersAsync(parameters);
 
             if (EditContext != null && ValueExpression != null && FieldIdentifier.Model != EditContext.Model)
@@ -188,14 +302,22 @@ namespace Radzen
                 EditContext.OnValidationStateChanged += ValidationStateChanged;
             }
 
-            return result;
+            await result;
         }
 
+        /// <summary>
+        /// Validations the state changed.
+        /// </summary>
+        /// <param name="sender">The sender.</param>
+        /// <param name="e">The <see cref="ValidationStateChangedEventArgs"/> instance containing the event data.</param>
         private void ValidationStateChanged(object sender, ValidationStateChangedEventArgs e)
         {
             StateHasChanged();
         }
 
+        /// <summary>
+        /// Disposes this instance.
+        /// </summary>
         public override void Dispose()
         {
             base.Dispose();
@@ -208,9 +330,23 @@ namespace Radzen
             Form?.RemoveComponent(this);
         }
 
+        /// <summary>
+        /// Gets the value.
+        /// </summary>
+        /// <returns>System.Object.</returns>
         public object GetValue()
         {
             return Value;
         }
+
+
+        /// <summary>
+        /// Gets the class list.
+        /// </summary>
+        /// <param name="className">Name of the class.</param>
+        /// <returns>ClassList.</returns>
+        protected ClassList GetClassList(string className) => ClassList.Create(className)
+                                                                       .AddDisabled(Disabled)
+                                                                       .Add(FieldIdentifier, EditContext);
     }
 }

Radzen.Blazor/DialogService.cs

@@ -1,4 +1,5 @@
 using Microsoft.AspNetCore.Components;
+using Microsoft.JSInterop;
 using System;
 using System.Collections.Generic;
 using System.Linq;
@@ -6,13 +7,66 @@ using System.Threading.Tasks;
 
 namespace Radzen
 {
+    /// <summary>
+    /// Class DialogService. Contains various methods with options to open and close dialogs. 
+    /// Should be added as scoped service in the application services and RadzenDialog should be added in application main layout.
+    /// </summary>
+    /// <example>
+    /// <code>
+    /// @inject DialogService DialogService
+    /// &lt;RadzenButton Text="Show dialog with inline Blazor content" Click=@ShowInlineDialog /&gt;
+    /// @code {
+    ///  async Task ShowInlineDialog()
+    ///  {
+    ///    var result = await DialogService.OpenAsync("Simple Dialog", ds =&gt;
+    ///      @&lt;div&gt;
+    ///          &lt;p Style="margin-bottom: 1rem"&gt;Confirm?&lt;/p&gt;
+    ///          &lt;div class="row"&gt;
+    ///              &lt;div class="col-md-12"&gt;
+    ///                  &lt;RadzenButton Text="Ok" Click="() =&gt; ds.Close(true)" Style="margin-bottom: 10px; width: 150px" /&gt;
+    ///                  &lt;RadzenButton Text="Cancel" Click="() =&gt; ds.Close(false)" ButtonStyle="ButtonStyle.Secondary"  Style="margin-bottom: 10px; width: 150px"/&gt;
+    ///                  &lt;RadzenButton Text="Refresh" Click="(() =&gt; { orderID = 10249; ds.Refresh(); })" ButtonStyle="ButtonStyle.Info"  Style="margin-bottom: 10px; width: 150px"/&gt;
+    ///                  Order ID: @orderID
+    ///              &lt;/div&gt;
+    ///          &lt;/div&gt;
+    ///      &lt;/div&gt;);
+    ///    Console.WriteLine($"Dialog result: {result}");
+    ///  }
+    /// }
+    /// </code>
+    /// </example>
     public class DialogService : IDisposable
     {
-        NavigationManager UriHelper { get; set; }
+        private DotNetObjectReference<DialogService> reference;
+        internal DotNetObjectReference<DialogService> Reference
+        {
+            get
+            {
+                if (reference == null)
+                {
+                    reference = DotNetObjectReference.Create(this);
+                }
 
-        public DialogService(NavigationManager uriHelper)
+                return reference;
+            }
+        }
+
+        /// <summary>
+        /// Gets or sets the URI helper.
+        /// </summary>
+        /// <value>The URI helper.</value>
+        NavigationManager UriHelper { get; set; }
+        IJSRuntime JSRuntime { get; set; }
+
+        /// <summary>
+        /// Initializes a new instance of the <see cref="DialogService"/> class.
+        /// </summary>
+        /// <param name="uriHelper">The URI helper.</param>
+        /// <param name="jsRuntime">IJSRuntime instance.</param>
+        public DialogService(NavigationManager uriHelper, IJSRuntime jsRuntime)
         {
             UriHelper = uriHelper;
+            JSRuntime = jsRuntime;
 
             if (UriHelper != null)
             {
@@ -24,21 +78,74 @@ namespace Radzen
         {
             if (dialogs.Count > 0)
             {
-                this.Close();
+                Close();
+            }
+
+            if (_sideDialogTask?.Task.IsCompleted == false)
+            {
+                CloseSide();
             }
         }
 
+        /// <summary>
+        /// Raises the Close event.
+        /// </summary>
         public event Action<dynamic> OnClose;
 
+        /// <summary>
+        /// Occurs when [on refresh].
+        /// </summary>
+        public event Action OnRefresh;
+
+        /// <summary>
+        /// Occurs when a new dialog is open.
+        /// </summary>
         public event Action<string, Type, Dictionary<string, object>, DialogOptions> OnOpen;
 
+        /// <summary>
+        /// Raises the Close event for the side dialog
+        /// </summary>
+        public event Action<dynamic> OnSideClose;
+
+        /// <summary>
+        /// Raises the Open event for the side dialog
+        /// </summary>
+        public event Action<Type, Dictionary<string, object>, SideDialogOptions> OnSideOpen;
+
+        /// <summary>
+        /// Opens a dialog with the specified arguments.
+        /// </summary>
+        /// <typeparam name="T">The type of the Blazor component which will be displayed in a dialog.</typeparam>
+        /// <param name="title">The text displayed in the title bar of the dialog.</param>
+        /// <param name="parameters">The dialog parameters. Passed as property values of <typeparamref name="T" />.</param>
+        /// <param name="options">The dialog options.</param>
         public void Open<T>(string title, Dictionary<string, object> parameters = null, DialogOptions options = null) where T : ComponentBase
         {
             OpenDialog<T>(title, parameters, options);
         }
 
-        protected List<TaskCompletionSource<dynamic>> tasks = new List<TaskCompletionSource<dynamic>>();
+        /// <summary>
+        /// Invokes <see cref="OnRefresh" />.
+        /// </summary>
+        public void Refresh()
+        {
+            OnRefresh?.Invoke();
+        }
 
+        /// <summary>
+        /// The tasks
+        /// </summary>
+        protected List<TaskCompletionSource<dynamic>> tasks = new List<TaskCompletionSource<dynamic>>();
+        private TaskCompletionSource<dynamic> _sideDialogTask;
+
+        /// <summary>
+        /// Opens a dialog with the specified arguments.
+        /// </summary>
+        /// <typeparam name="T">The type of the Blazor component which will be displayed in a dialog.</typeparam>
+        /// <param name="title">The text displayed in the title bar of the dialog.</param>
+        /// <param name="parameters">The dialog parameters. Passed as property values of <typeparamref name="T" />.</param>
+        /// <param name="options">The dialog options.</param>
+        /// <returns>The value passed as argument to <see cref="Close" />.</returns>
         public Task<dynamic> OpenAsync<T>(string title, Dictionary<string, object> parameters = null, DialogOptions options = null) where T : ComponentBase
         {
             var task = new TaskCompletionSource<dynamic>();
@@ -48,6 +155,50 @@ namespace Radzen
 
             return task.Task;
         }
+
+        /// <summary>
+        /// Opens a side dialog with the specified arguments
+        /// </summary>
+        /// <typeparam name="T">The type of Blazor component which will be displayed in the side dialog.</typeparam>
+        /// <param name="title">The text displayed in the title bar of the side dialog.</param>
+        /// <param name="parameters">The dialog parameters. Passed as property values of <typeparamref name="T"/></param>
+        /// <param name="options">The side dialog options.</param>
+        /// <returns>A task that completes when the dialog is closed or a new one opened</returns>
+        public Task<dynamic> OpenSideAsync<T>(string title, Dictionary<string, object> parameters = null, SideDialogOptions options = null)
+            where T : ComponentBase
+        {
+            CloseSide();
+            _sideDialogTask = new TaskCompletionSource<dynamic>();
+            if (options == null)
+            {
+                options = new SideDialogOptions();
+            }
+
+            options.Title = title;
+            OnSideOpen?.Invoke(typeof(T), parameters ?? new Dictionary<string, object>(), options);
+            return _sideDialogTask.Task;
+        }
+
+        /// <summary>
+        /// Closes the side dialog
+        /// </summary>
+        /// <param name="result">The result of the Dialog</param>
+        public void CloseSide(dynamic result = null)
+        {
+            if (_sideDialogTask?.Task.IsCompleted == false)
+            {
+                _sideDialogTask.TrySetResult(result);
+                OnSideClose?.Invoke(result);
+            }
+        }
+
+        /// <summary>
+        /// Opens a dialog with the specified content.
+        /// </summary>
+        /// <param name="title">The text displayed in the title bar of the dialog.</param>
+        /// <param name="childContent">The content displayed in the dialog.</param>
+        /// <param name="options">The dialog options.</param>
+        /// <returns>The value passed as argument to <see cref="Close" />.</returns>
         public Task<dynamic> OpenAsync(string title, RenderFragment<DialogService> childContent, DialogOptions options = null)
         {
             var task = new TaskCompletionSource<dynamic>();
@@ -62,6 +213,12 @@ namespace Radzen
             return task.Task;
         }
 
+        /// <summary>
+        /// Opens a dialog with the specified content.
+        /// </summary>
+        /// <param name="title">The text displayed in the title bar of the dialog.</param>
+        /// <param name="childContent">The content displayed in the dialog.</param>
+        /// <param name="options">The dialog options.</param>
         public void Open(string title, RenderFragment<DialogService> childContent, DialogOptions options = null)
         {
             options = options ?? new DialogOptions();
@@ -71,7 +228,11 @@ namespace Radzen
             OpenDialog<object>(title, null, options);
         }
 
+        /// <summary>
+        /// The dialogs
+        /// </summary>
         protected List<object> dialogs = new List<object>();
+
         private void OpenDialog<T>(string title, Dictionary<string, object> parameters, DialogOptions options)
         {
             dialogs.Add(new object());
@@ -80,105 +241,344 @@ namespace Radzen
                 Width = options != null && !string.IsNullOrEmpty(options.Width) ? options.Width : "600px",
                 Left = options != null && !string.IsNullOrEmpty(options.Left) ? options.Left : "",
                 Top = options != null && !string.IsNullOrEmpty(options.Top) ? options.Top : "",
+                Bottom = options != null && !string.IsNullOrEmpty(options.Bottom) ? options.Bottom : "",
                 Height = options != null && !string.IsNullOrEmpty(options.Height) ? options.Height : "",
                 ShowTitle = options != null ? options.ShowTitle : true,
                 ShowClose = options != null ? options.ShowClose : true,
-                ChildContent = options?.ChildContent
+                Resizable = options != null ? options.Resizable : false,
+                Draggable = options != null ? options.Draggable : false,
+                ChildContent = options?.ChildContent,
+                Style = options != null ? options.Style : "",
+                AutoFocusFirstElement = options != null ? options.AutoFocusFirstElement : true,
+                CloseDialogOnOverlayClick = options != null ? options.CloseDialogOnOverlayClick : false,
+                CloseDialogOnEsc = options != null ? options.CloseDialogOnEsc : true,
+                CssClass = options != null ? options.CssClass : "",
             });
         }
 
-        public void Close(dynamic result = null)
+        /// <summary>
+        /// Closes the last opened dialog with optional result.
+        /// </summary>
+        /// <param name="result">The result.</param>
+        [JSInvokable("DialogService.Close")]
+        public virtual void Close(dynamic result = null)
         {
-            OnClose?.Invoke(result);
-
             var dialog = dialogs.LastOrDefault();
+
             if (dialog != null)
             {
+                OnClose?.Invoke(result);
                 dialogs.Remove(dialog);
             }
 
             var task = tasks.LastOrDefault();
             if (task != null && task.Task != null && !task.Task.IsCompleted)
             {
-                task.SetResult(result);
                 tasks.Remove(task);
+                task.SetResult(result);
             }
         }
 
+        /// <inheritdoc />
         public void Dispose()
         {
+            reference?.Dispose();
+            reference = null;
+
             UriHelper.LocationChanged -= UriHelper_OnLocationChanged;
         }
 
-        public async Task<bool?> Confirm(string message = "Confirm?", string title = "Confirm", ConfirmOptions options = null) => await OpenAsync(title, ds => {
-            RenderFragment content = b =>
-            {
-                var i = 0;
-                b.OpenElement(i++, "div");
-                b.OpenElement(i++, "p");
-                b.AddAttribute(i++, "style", "margin-bottom: 20px;");
-                b.AddContent(i++, message);
-                b.CloseElement();
-
-                b.OpenElement(i++, "div");
-                b.AddAttribute(i++, "class", "row");
-                b.OpenElement(i++, "div");
-                b.AddAttribute(i++, "class", "col-md-12");
-
-                b.OpenComponent<Blazor.RadzenButton>(i++);
-                b.AddAttribute(i++, "Text", options != null ? options.OkButtonText : "Ok");
-                b.AddAttribute(i++, "Style", "margin-bottom: 10px; width: 150px");
-                b.AddAttribute(i++, "Click", EventCallback.Factory.Create<Microsoft.AspNetCore.Components.Web.MouseEventArgs>(this, () => ds.Close(true)));
-                b.CloseComponent();
-
-                b.OpenComponent<Blazor.RadzenButton>(i++);
-                b.AddAttribute(i++, "Text", options != null ? options.CancelButtonText : "Cancel");
-                b.AddAttribute(i++, "ButtonStyle", ButtonStyle.Secondary);
-                b.AddAttribute(i++, "Style", "margin-bottom: 10px; margin-left: 10px; width: 150px");
-                b.AddAttribute(i++, "Click", EventCallback.Factory.Create<Microsoft.AspNetCore.Components.Web.MouseEventArgs>(this, () => ds.Close(false)));
-                b.CloseComponent();
-                
-                b.CloseElement();
-                b.CloseElement();
-                b.CloseElement();
-            };
-            return content;
-        }, new DialogOptions() 
+        /// <summary>
+        /// Displays a confirmation dialog.
+        /// </summary>
+        /// <param name="message">The message displayed to the user.</param>
+        /// <param name="title">The text displayed in the title bar of the dialog.</param>
+        /// <param name="options">The options.</param>
+        /// <returns><c>true</c> if the user clicked the OK button, <c>false</c> otherwise.</returns>
+        public async Task<bool?> Confirm(string message = "Confirm?", string title = "Confirm", ConfirmOptions options = null)
         {
-            Width = options != null ? !string.IsNullOrEmpty(options.Width) ? options.Width : "355px" : "355px",
-            Height = options != null ? options.Height : null,
-            Left = options != null ? options.Left : null,
-            Top = options != null ? options.Top : null,
-            Bottom = options != null ? options.Bottom : null,
-            ChildContent = options != null ? options.ChildContent : null,
-            ShowTitle = options != null ? options.ShowTitle : true,
-            ShowClose = options != null ? options.ShowClose : true
-        });
+            var dialogOptions = new DialogOptions()
+            {
+                Width = options != null ? !string.IsNullOrEmpty(options.Width) ? options.Width : "" : "",
+                Height = options != null ? options.Height : null,
+                Left = options != null ? options.Left : null,
+                Top = options != null ? options.Top : null,
+                Bottom = options != null ? options.Bottom : null,
+                ChildContent = options != null ? options.ChildContent : null,
+                ShowTitle = options != null ? options.ShowTitle : true,
+                ShowClose = options != null ? options.ShowClose : true,
+                Resizable = options != null ? options.Resizable : false,
+                Draggable = options != null ? options.Draggable : false,
+                Style = options != null ? options.Style : "",
+                AutoFocusFirstElement = options != null ? options.AutoFocusFirstElement : true,
+                CloseDialogOnOverlayClick = options != null ? options.CloseDialogOnOverlayClick : false,
+                CloseDialogOnEsc = options != null ? options.CloseDialogOnEsc : true,
+                CssClass = options != null ? $"rz-dialog-confirm {options.CssClass}" : "rz-dialog-confirm",
+            };
+
+            return await OpenAsync(title, ds =>
+            {
+                RenderFragment content = b =>
+                {
+                    var i = 0;
+                    b.OpenElement(i++, "p");
+                    b.AddAttribute(i++, "class", "rz-dialog-confirm-message");
+                    b.AddContent(i++, (MarkupString)message);
+                    b.CloseElement();
+
+                    b.OpenElement(i++, "div");
+                    b.AddAttribute(i++, "class", "rz-dialog-confirm-buttons");
+
+                    b.OpenComponent<Blazor.RadzenButton>(i++);
+                    b.AddAttribute(i++, "Text", options != null ? options.OkButtonText : "Ok");
+                    b.AddAttribute(i++, "Click", EventCallback.Factory.Create<Microsoft.AspNetCore.Components.Web.MouseEventArgs>(this, () => ds.Close(true)));
+                    b.CloseComponent();
+
+                    b.OpenComponent<Blazor.RadzenButton>(i++);
+                    b.AddAttribute(i++, "Text", options != null ? options.CancelButtonText : "Cancel");
+                    b.AddAttribute(i++, "ButtonStyle", ButtonStyle.Secondary);
+                    b.AddAttribute(i++, "Click", EventCallback.Factory.Create<Microsoft.AspNetCore.Components.Web.MouseEventArgs>(this, () => ds.Close(false)));
+                    b.CloseComponent();
+
+                    b.CloseElement();
+                };
+                return content;
+            }, dialogOptions);
+        }
+
+        /// <summary>
+        /// Displays a alert dialog.
+        /// </summary>
+        /// <param name="message">The message displayed to the user.</param>
+        /// <param name="title">The text displayed in the title bar of the dialog.</param>
+        /// <param name="options">The options.</param>
+        /// <returns><c>true</c> if the user clicked the OK button, <c>false</c> otherwise.</returns>
+        public async Task<bool?> Alert(string message = "", string title = "Message", AlertOptions options = null)
+        {
+            var dialogOptions = new DialogOptions()
+            {
+                Width = options != null ? !string.IsNullOrEmpty(options.Width) ? options.Width : "" : "",
+                Height = options != null ? options.Height : null,
+                Left = options != null ? options.Left : null,
+                Top = options != null ? options.Top : null,
+                Bottom = options != null ? options.Bottom : null,
+                ChildContent = options != null ? options.ChildContent : null,
+                ShowTitle = options != null ? options.ShowTitle : true,
+                ShowClose = options != null ? options.ShowClose : true,
+                Resizable = options != null ? options.Resizable : false,
+                Draggable = options != null ? options.Draggable : false,
+                Style = options != null ? options.Style : "",
+                AutoFocusFirstElement = options != null ? options.AutoFocusFirstElement : true,
+                CloseDialogOnOverlayClick = options != null ? options.CloseDialogOnOverlayClick : false,
+                CloseDialogOnEsc = options != null ? options.CloseDialogOnEsc : true,
+                CssClass = options != null ? $"rz-dialog-alert {options.CssClass}" : "rz-dialog-alert",
+            };
+
+            return await OpenAsync(title, ds =>
+            {
+                RenderFragment content = b =>
+                {
+                    var i = 0;
+                    b.OpenElement(i++, "p");
+                    b.AddAttribute(i++, "class", "rz-dialog-alert-message");
+                    b.AddContent(i++, (MarkupString)message);
+                    b.CloseElement();
+
+                    b.OpenElement(i++, "div");
+                    b.AddAttribute(i++, "class", "rz-dialog-alert-buttons");
+
+                    b.OpenComponent<Blazor.RadzenButton>(i++);
+                    b.AddAttribute(i++, "Text", options != null ? options.OkButtonText : "Ok");
+                    b.AddAttribute(i++, "Click", EventCallback.Factory.Create<Microsoft.AspNetCore.Components.Web.MouseEventArgs>(this, () => ds.Close(true)));
+                    b.CloseComponent();
+
+                    b.CloseElement();
+                };
+                return content;
+            }, dialogOptions);
+        }
     }
 
-    public class DialogOptions
+    /// <summary>
+    /// Base Class for dialog options
+    /// </summary>
+    public abstract class DialogOptionsBase
     {
+        /// <summary>
+        /// Gets or sets a value indicating whether to show the title bar. Set to <c>true</c> by default.
+        /// </summary>
+        /// <value><c>true</c> if title bar is shown; otherwise, <c>false</c>.</value>
         public bool ShowTitle { get; set; } = true;
+
+        /// <summary>
+        /// Gets or sets a value indicating whether to show the close button. Set to <c>true</c> by default.
+        /// </summary>
+        /// <value><c>true</c> if the close button is shown; otherwise, <c>false</c>.</value>
         public bool ShowClose { get; set; } = true;
-        public string Left { get; set; }
-        public string Top { get; set; }
-        public string Bottom { get; set; }
+        /// <summary>
+        /// Gets or sets the width of the dialog.
+        /// </summary>
+        /// <value>The width.</value>
         public string Width { get; set; }
+        /// <summary>
+        /// Gets or sets the height of the dialog.
+        /// </summary>
+        /// <value>The height.</value>
         public string Height { get; set; }
-        public RenderFragment<DialogService> ChildContent { get; set; }
+        /// <summary>
+        /// Gets or sets the CSS style of the dialog
+        /// </summary>
+        /// <value>The style.</value>
+        public string Style { get; set; }
+
+        /// <summary>
+        /// Gets or sets a value indicating whether the dialog should be closed by clicking the overlay.
+        /// </summary>
+        /// <value><c>true</c> if closeable; otherwise, <c>false</c>.</value>
+        public bool CloseDialogOnOverlayClick { get; set; } = false;
+
+        /// <summary>
+        /// Gets or sets dialog box custom class
+        /// </summary>
+        public string CssClass { get; set; }
     }
 
-    public class ConfirmOptions : DialogOptions
+    /// <summary>
+    /// Class SideDialogOptions
+    /// </summary>
+    public class SideDialogOptions : DialogOptionsBase
     {
+        /// <summary>
+        /// The title displayed on the dialog.
+        /// </summary>
+        public string Title { get; set; }
+
+        /// <summary>
+        /// The Position on which the dialog will be positioned
+        /// </summary>
+        public DialogPosition Position { get; set; } = DialogPosition.Right;
+
+        /// <summary>
+        /// Whether to show a mask on the background or not
+        /// </summary>
+        public bool ShowMask { get; set; } = true;
+    }
+
+    /// <summary>
+    /// DialogPosition enum
+    /// </summary>
+    public enum DialogPosition
+    {
+        /// <summary>
+        /// Dialog will be positioned on the right side
+        /// </summary>
+        Right,
+        /// <summary>
+        /// Dialog will be positioned on the left side
+        /// </summary>
+        Left,
+        /// <summary>
+        /// Dialog will be positioned on the top of the page
+        /// </summary>
+        Top,
+        /// <summary>
+        /// Dialog will be positioned at the bottom of the page
+        /// </summary>
+        Bottom
+    }
+
+    /// <summary>
+    /// Class DialogOptions.
+    /// </summary>
+    public class DialogOptions : DialogOptionsBase
+    {
+        /// <summary>
+        /// Gets or sets a value indicating whether the dialog is resizable. Set to <c>false</c> by default.
+        /// </summary>
+        /// <value><c>true</c> if resizable; otherwise, <c>false</c>.</value>
+        public bool Resizable { get; set; } = false;
+        /// <summary>
+        /// Gets or sets a value indicating whether the dialog is draggable. Set to <c>false</c> by default.
+        /// </summary>
+        /// <value><c>true</c> if draggable; otherwise, <c>false</c>.</value>
+        public bool Draggable { get; set; } = false;
+        /// <summary>
+        /// Gets or sets the X coordinate of the dialog. Maps to the <c>left</c> CSS attribute.
+        /// </summary>
+        /// <value>The left.</value>
+        public string Left { get; set; }
+        /// <summary>
+        /// Gets or sets the Y coordinate of the dialog. Maps to the <c>top</c> CSS attribute.
+        /// </summary>
+        /// <value>The top.</value>
+        public string Top { get; set; }
+        /// <summary>
+        /// Specifies the <c>bottom</c> CSS attribute.
+        /// </summary>
+        /// <value>The bottom.</value>
+        public string Bottom { get; set; }
+        /// <summary>
+        /// Gets or sets the child content.
+        /// </summary>
+        /// <value>The child content.</value>
+        public RenderFragment<DialogService> ChildContent { get; set; }
+        /// <summary>
+        /// Gets or sets a value indicating whether to focus the first focusable HTML element. Set to <c>true</c> by default.
+        /// </summary>
+        public bool AutoFocusFirstElement { get; set; } = true;
+        /// <summary>
+        /// Gets or sets a value indicating whether the dialog should be closed on ESC key press.
+        /// </summary>
+        /// <value><c>true</c> if closeable; otherwise, <c>false</c>.</value>
+        public bool CloseDialogOnEsc { get; set; } = true;
+    }
+
+    /// <summary>
+    /// Class ConfirmOptions.
+    /// </summary>
+    public class AlertOptions : DialogOptions
+    {
+        /// <summary>
+        /// Gets or sets the text of the OK button.
+        /// </summary>
         public string OkButtonText { get; set; }
+    }
+
+    /// <summary>
+    /// Class ConfirmOptions.
+    /// </summary>
+    public class ConfirmOptions : AlertOptions
+    {
+        /// <summary>
+        /// Gets or sets the text of the Cancel button.
+        /// </summary>
         public string CancelButtonText { get; set; }
     }
 
+    /// <summary>
+    /// Class Dialog.
+    /// </summary>
     public class Dialog
     {
+        /// <summary>
+        /// Gets or sets the title.
+        /// </summary>
+        /// <value>The title.</value>
         public string Title { get; set; }
+        /// <summary>
+        /// Gets or sets the type.
+        /// </summary>
+        /// <value>The type.</value>
         public Type Type { get; set; }
+        /// <summary>
+        /// Gets or sets the parameters.
+        /// </summary>
+        /// <value>The parameters.</value>
         public Dictionary<string, object> Parameters { get; set; }
+        /// <summary>
+        /// Gets or sets the options.
+        /// </summary>
+        /// <value>The options.</value>
         public DialogOptions Options { get; set; }
     }
 }

Radzen.Blazor/Extensions.cs

@@ -0,0 +1,69 @@
+using System;
+using System.Collections;
+using System.Collections.Generic;
+using System.ComponentModel.DataAnnotations;
+using System.Linq;
+using System.Reflection;
+using System.Reflection.Emit;
+using System.Text.RegularExpressions;
+using System.Xml.Linq;
+
+namespace Radzen.Blazor
+{
+    /// <summary>
+    /// Class EnumExtensions.
+    /// </summary>
+    public static class EnumExtensions
+    {
+        /// <summary>
+        /// Gets enum description.
+        /// </summary>
+        public static string GetDisplayDescription(this Enum enumValue)
+        {
+            var enumValueAsString = enumValue.ToString();
+            var val = enumValue.GetType().GetMember(enumValueAsString).FirstOrDefault();
+
+            return val?.GetCustomAttribute<DisplayAttribute>()?.GetDescription() ?? enumValueAsString;
+        }
+
+        /// <summary>
+        /// Converts Enum to IEnumerable of Value/Text.
+        /// </summary>
+        public static IEnumerable<object> EnumAsKeyValuePair(Type enumType)
+        {
+            return Enum.GetValues(enumType).Cast<Enum>().Distinct().Select(val => new { Value = Convert.ToInt32(val), Text = val.GetDisplayDescription() });
+        }
+
+        /// <summary>
+        /// Converts the autocomplete type enum value to the expected
+        /// autocomplete attribute value.
+        /// </summary>
+        /// <returns>The autocomplete attribute string value.</returns>
+        public static string GetAutoCompleteValue(this AutoCompleteType typeValue)
+        {
+            // Handle synonyms.
+            switch (typeValue)
+            {
+                case AutoCompleteType.FirstName:
+                    return "given-name";
+                case AutoCompleteType.LastName:
+                    return "family-name";
+                case AutoCompleteType.MiddleName:
+                    return "additional-name";
+                case AutoCompleteType.ZipCode:
+                    return "postal-code";
+                case AutoCompleteType.Province:
+                    return "address-level1";
+                case AutoCompleteType.State:
+                    return "address-level1";
+            }
+
+            // Handle standard values.
+            var value = typeValue.ToString();
+            value = Regex.Replace(value, "([^A-Z])([A-Z])", "$1-$2");
+            return Regex.Replace(value, "([A-Z]+)([A-Z][^A-Z$])", "$1-$2")
+                .Trim().ToLower();
+        }
+    }
+}
+

Radzen.Blazor/FormComponent.cs

@@ -5,28 +5,64 @@ using System.Threading.Tasks;
 using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Forms;
 using Microsoft.AspNetCore.Components.Web;
+using Radzen.Blazor.Rendering;
 
 namespace Radzen
 {
+    /// <summary>
+    /// Class FormComponent.
+    /// Implements the <see cref="Radzen.RadzenComponent" />
+    /// Implements the <see cref="Radzen.IRadzenFormComponent" />
+    /// </summary>
+    /// <typeparam name="T"></typeparam>
+    /// <seealso cref="Radzen.RadzenComponent" />
+    /// <seealso cref="Radzen.IRadzenFormComponent" />
     public class FormComponent<T> : RadzenComponent, IRadzenFormComponent
     {
+        /// <summary>
+        /// Gets or sets the name.
+        /// </summary>
+        /// <value>The name.</value>
         [Parameter]
         public string Name { get; set; }
 
+        /// <summary>
+        /// Gets or sets the index of the tab.
+        /// </summary>
+        /// <value>The index of the tab.</value>
         [Parameter]
         public int TabIndex { get; set; } = 0;
 
+        /// <summary>
+        /// Gets or sets the placeholder.
+        /// </summary>
+        /// <value>The placeholder.</value>
         [Parameter]
         public string Placeholder { get; set; }
 
+        /// <summary>
+        /// Gets or sets a value indicating whether this <see cref="FormComponent{T}"/> is disabled.
+        /// </summary>
+        /// <value><c>true</c> if disabled; otherwise, <c>false</c>.</value>
         [Parameter]
         public bool Disabled { get; set; }
 
+        /// <summary>
+        /// The form
+        /// </summary>
         IRadzenForm _form;
 
+        /// <summary>
+        /// Gets or sets the edit context.
+        /// </summary>
+        /// <value>The edit context.</value>
         [CascadingParameter]
         public EditContext EditContext { get; set; }
 
+        /// <summary>
+        /// Gets or sets the form.
+        /// </summary>
+        /// <value>The form.</value>
         [CascadingParameter]
         public IRadzenForm Form
         {
@@ -36,17 +72,22 @@ namespace Radzen
             }
             set
             {
-                if (_form != value && value != null)
-                {
-                    _form = value;
-                    _form.AddComponent(this);
-                }
+                _form = value;
+                _form?.AddComponent(this);
             }
         }
 
+        /// <summary>
+        /// Gets or sets the value changed.
+        /// </summary>
+        /// <value>The value changed.</value>
         [Parameter]
         public EventCallback<T> ValueChanged { get; set; }
 
+        /// <summary>
+        /// Gets a value indicating whether this instance has value.
+        /// </summary>
+        /// <value><c>true</c> if this instance has value; otherwise, <c>false</c>.</value>
         public virtual bool HasValue
         {
             get
@@ -59,6 +100,10 @@ namespace Radzen
             }
         }
 
+        /// <summary>
+        /// Gets a value indicating whether this instance is bound.
+        /// </summary>
+        /// <value><c>true</c> if this instance is bound; otherwise, <c>false</c>.</value>
         public bool IsBound
         {
             get
@@ -67,8 +112,15 @@ namespace Radzen
             }
         }
 
+        /// <summary>
+        /// The value
+        /// </summary>
         protected T _value;
 
+        /// <summary>
+        /// Gets or sets the value.
+        /// </summary>
+        /// <value>The value.</value>
         [Parameter]
         public virtual T Value
         {
@@ -86,11 +138,28 @@ namespace Radzen
         }
 
 
+        /// <summary>
+        /// Gets or sets the change.
+        /// </summary>
+        /// <value>The change.</value>
         [Parameter]
         public EventCallback<T> Change { get; set; }
+        /// <summary>
+        /// Gets the field identifier.
+        /// </summary>
+        /// <value>The field identifier.</value>
         public FieldIdentifier FieldIdentifier { get; private set; }
+        /// <summary>
+        /// Gets or sets the value expression.
+        /// </summary>
+        /// <value>The value expression.</value>
         [Parameter]
         public Expression<Func<T>> ValueExpression { get; set; }
+        /// <summary>
+        /// Sets the parameters asynchronous.
+        /// </summary>
+        /// <param name="parameters">The parameters.</param>
+        /// <returns>Task.</returns>
         public override Task SetParametersAsync(ParameterView parameters)
         {
             var result = base.SetParametersAsync(parameters);
@@ -98,17 +167,26 @@ namespace Radzen
             if (EditContext != null && ValueExpression != null && FieldIdentifier.Model != EditContext.Model)
             {
                 FieldIdentifier = FieldIdentifier.Create(ValueExpression);
+                EditContext.OnValidationStateChanged -= ValidationStateChanged;
                 EditContext.OnValidationStateChanged += ValidationStateChanged;
             }
 
             return result;
         }
 
+        /// <summary>
+        /// Validations the state changed.
+        /// </summary>
+        /// <param name="sender">The sender.</param>
+        /// <param name="e">The <see cref="ValidationStateChangedEventArgs"/> instance containing the event data.</param>
         private void ValidationStateChanged(object sender, ValidationStateChangedEventArgs e)
         {
             StateHasChanged();
         }
 
+        /// <summary>
+        /// Disposes this instance.
+        /// </summary>
         public override void Dispose()
         {
             base.Dispose();
@@ -121,11 +199,20 @@ namespace Radzen
             Form?.RemoveComponent(this);
         }
 
+        /// <summary>
+        /// Gets the value.
+        /// </summary>
+        /// <returns>System.Object.</returns>
         public object GetValue()
         {
             return Value;
         }
 
+        /// <summary>
+        /// Handles the <see cref="E:ContextMenu" /> event.
+        /// </summary>
+        /// <param name="args">The <see cref="MouseEventArgs"/> instance containing the event data.</param>
+        /// <returns>Task.</returns>
         public override Task OnContextMenu(MouseEventArgs args)
         {
             if (!Disabled)
@@ -135,5 +222,14 @@ namespace Radzen
 
             return Task.CompletedTask;
         }
+
+        /// <summary>
+        /// Gets the class list.
+        /// </summary>
+        /// <param name="className">Name of the class.</param>
+        /// <returns>ClassList.</returns>
+        protected ClassList GetClassList(string className) => ClassList.Create(className)
+                                                                       .AddDisabled(Disabled)
+                                                                       .Add(FieldIdentifier, EditContext);
     }
 }

Radzen.Blazor/GaugeBase.cs

@@ -6,21 +6,49 @@ using Radzen.Blazor.Rendering;
 
 namespace Radzen.Blazor
 {
+    /// <summary>
+    /// Class GaugeBase.
+    /// Implements the <see cref="Radzen.RadzenComponent" />
+    /// </summary>
+    /// <seealso cref="Radzen.RadzenComponent" />
     public abstract class GaugeBase : RadzenComponent
     {
+        /// <summary>
+        /// Gets or sets the child content.
+        /// </summary>
+        /// <value>The child content.</value>
         [Parameter]
         public RenderFragment ChildContent
         {
             get; set;
         }
 
+        /// <summary>
+        /// Gets or sets the width.
+        /// </summary>
+        /// <value>The width.</value>
         public double? Width { get; set; }
 
+        /// <summary>
+        /// Gets or sets the height.
+        /// </summary>
+        /// <value>The height.</value>
         public double? Height { get; set; }
 
+        /// <summary>
+        /// The width and height are set
+        /// </summary>
         bool widthAndHeightAreSet = false;
+        /// <summary>
+        /// The first render
+        /// </summary>
         bool firstRender = true;
 
+        /// <summary>
+        /// On after render as an asynchronous operation.
+        /// </summary>
+        /// <param name="firstRender">if set to <c>true</c> [first render].</param>
+        /// <returns>A Task representing the asynchronous operation.</returns>
         protected override async Task OnAfterRenderAsync(bool firstRender)
         {
             this.firstRender = firstRender;
@@ -31,7 +59,7 @@ namespace Radzen.Blazor
 
                 if (Visible)
                 {
-                    var rect = await JSRuntime.InvokeAsync<Rect>("Radzen.createGauge", Element, DotNetObjectReference.Create(this));
+                    var rect = await JSRuntime.InvokeAsync<Rect>("Radzen.createGauge", Element, Reference);
 
                     if (!widthAndHeightAreSet)
                     {
@@ -43,6 +71,9 @@ namespace Radzen.Blazor
             }
         }
 
+        /// <summary>
+        /// Called when [initialized].
+        /// </summary>
         protected override void OnInitialized()
         {
             base.OnInitialized();
@@ -50,6 +81,11 @@ namespace Radzen.Blazor
             Initialize();
         }
 
+        /// <summary>
+        /// Resizes the specified width.
+        /// </summary>
+        /// <param name="width">The width.</param>
+        /// <param name="height">The height.</param>
         [JSInvokable]
         public void Resize(double width, double height)
         {
@@ -73,6 +109,9 @@ namespace Radzen.Blazor
             }
         }
 
+        /// <summary>
+        /// Initializes this instance.
+        /// </summary>
         private void Initialize()
         {
             double width = 0;
@@ -107,8 +146,16 @@ namespace Radzen.Blazor
             }
         }
 
+        /// <summary>
+        /// The visible changed
+        /// </summary>
         private bool visibleChanged = false;
 
+        /// <summary>
+        /// Set parameters as an asynchronous operation.
+        /// </summary>
+        /// <param name="parameters">The parameters.</param>
+        /// <returns>A Task representing the asynchronous operation.</returns>
         public override async Task SetParametersAsync(ParameterView parameters)
         {
             bool shouldRefresh = parameters.DidParameterChange(nameof(Style), Style);
@@ -131,6 +178,9 @@ namespace Radzen.Blazor
             }
         }
 
+        /// <summary>
+        /// Disposes this instance.
+        /// </summary>
         public override void Dispose()
         {
             base.Dispose();
@@ -141,6 +191,9 @@ namespace Radzen.Blazor
             }
         }
 
+        /// <summary>
+        /// Reloads this instance.
+        /// </summary>
         public void Reload()
         {
             StateHasChanged();

Radzen.Blazor/GaugeTickPosition.cs

@@ -1,9 +1,21 @@
 namespace Radzen.Blazor
 {
+    /// <summary>
+    /// Enum GaugeTickPosition
+    /// </summary>
     public enum GaugeTickPosition
     {
+        /// <summary>
+        /// The inside
+        /// </summary>
         Inside,
+        /// <summary>
+        /// The outside
+        /// </summary>
         Outside,
+        /// <summary>
+        /// The none
+        /// </summary>
         None
     }
 }

Radzen.Blazor/HttpResponseMessageExtensions.cs

@@ -7,8 +7,21 @@ using System.Xml.Linq;
 
 namespace Radzen
 {
+    /// <summary>
+    /// Class HttpResponseMessageExtensions.
+    /// </summary>
     public static class HttpResponseMessageExtensions
     {
+        /// <summary>
+        /// Read as an asynchronous operation.
+        /// </summary>
+        /// <typeparam name="T"></typeparam>
+        /// <param name="response">The response.</param>
+        /// <returns>A Task&lt;T&gt; representing the asynchronous operation.</returns>
+        /// <exception cref="Exception">Unable to parse the response.</exception>
+        /// <exception cref="Exception"></exception>
+        /// <exception cref="Exception">Unable to parse the response.</exception>
+        /// <exception cref="Exception"></exception>
         public static async Task<T> ReadAsync<T>(this HttpResponseMessage response)
         {
             try

Radzen.Blazor/IChartAxis.cs

@@ -1,7 +1,13 @@
 namespace Radzen.Blazor
 {
+    /// <summary>
+    /// Common axis API of <see cref="RadzenChart" />
+    /// </summary>
     public interface IChartAxis
     {
+        /// <summary>
+        /// Gets or sets the grid lines configuration of this axis.
+        /// </summary>
         RadzenGridLines GridLines { get; set; }
     }
 }

Radzen.Blazor/IChartBarSeries.cs

@@ -1,7 +1,14 @@
 namespace Radzen.Blazor
 {
+    /// <summary>
+    /// Marker interface for <see cref="RadzenBarSeries{TItem}" />.
+    /// </summary>
     public interface IChartBarSeries
     {
+        /// <summary>
+        /// Gets the count.
+        /// </summary>
+        /// <value>The count.</value>
         int Count { get; }
     }
 }

Radzen.Blazor/IChartColumnSeries.cs

@@ -1,7 +1,14 @@
 namespace Radzen.Blazor
 {
+    /// <summary>
+    /// Marker interface for <see cref="RadzenColumnSeries{TItem}" />.
+    /// </summary>
     public interface IChartColumnSeries
     {
+        /// <summary>
+        /// Gets the count.
+        /// </summary>
+        /// <value>The count.</value>
         int Count { get; }
     }
 }

Radzen.Blazor/IChartDonutSeries.cs

@@ -2,8 +2,17 @@ using Microsoft.AspNetCore.Components;
 
 namespace Radzen.Blazor
 {
+    /// <summary>
+    /// Marker interface for <see cref="RadzenColumnSeries{TItem}" />.
+    /// </summary>
     public interface IChartDonutSeries
     {
-      RenderFragment RenderTitle(double x, double y);
+        /// <summary>
+        /// Renders the title.
+        /// </summary>
+        /// <param name="x">The x.</param>
+        /// <param name="y">The y.</param>
+        /// <returns>RenderFragment.</returns>
+        RenderFragment RenderTitle(double x, double y);
     }
 }

Radzen.Blazor/IChartSeries.cs

@@ -1,24 +1,149 @@
+using System;
+using System.Collections;
+using System.Collections.Generic;
+using System.Threading.Tasks;
 using Microsoft.AspNetCore.Components;
+using Radzen.Blazor.Rendering;
 
 namespace Radzen.Blazor
 {
+    /// <summary>
+    /// Specifies the common API that <see cref="RadzenChart" /> series must implement.
+    /// </summary>
     public interface IChartSeries
     {
+        /// <summary>
+        /// Transforms a category scale to new one.
+        /// </summary>
+        /// <param name="scale">The scale.</param>
         ScaleBase TransformCategoryScale(ScaleBase scale);
+        /// <summary>
+        /// Transforms a category scale to new one.
+        /// </summary>
+        /// <param name="scale">The scale.</param>
         ScaleBase TransformValueScale(ScaleBase scale);
+        /// <summary>
+        /// Gets or sets the series marker configuration.
+        /// </summary>
         RadzenMarkers Markers { get; set; }
+        /// <summary>
+        /// Gets the series marker type.
+        /// </summary>
+        /// <value>The type of the marker.</value>
         MarkerType MarkerType { get; }
+        /// <summary>
+        /// Gets the size of the marker.
+        /// </summary>
+        /// <value>The size of the marker.</value>
         double MarkerSize { get; }
+        /// <summary>
+        /// Renders the series with the specified category and value scales.
+        /// </summary>
+        /// <param name="categoryScale">The category scale.</param>
+        /// <param name="valueScale">The value scale.</param>
+        /// <returns>RenderFragment.</returns>
         RenderFragment Render(ScaleBase categoryScale, ScaleBase valueScale);
+        /// <summary>
+        /// Renders the series overlays with the specified category and value scales.
+        /// </summary>
+        /// <param name="categoryScale">The category scale.</param>
+        /// <param name="valueScale">The value scale.</param>
+        /// <returns>RenderFragment.</returns>
+        RenderFragment RenderOverlays(ScaleBase categoryScale, ScaleBase valueScale);
+        /// <summary>
+        /// Renders the series tooltip.
+        /// </summary>
+        /// <param name="data">The data.</param>
+        /// <param name="marginLeft">The left margin.</param>
+        /// <param name="marginTop">The right margin.</param>
+        /// <returns>RenderFragment.</returns>
         RenderFragment RenderTooltip(object data, double marginLeft, double marginTop);
+        /// <summary>
+        /// Renders the legend item.
+        /// </summary>
+        /// <returns>RenderFragment.</returns>
         RenderFragment RenderLegendItem();
+        /// <summary>
+        /// Gets the color.
+        /// </summary>
+        /// <value>The color.</value>
         string Color { get; }
-        bool Visible { get; set; }
+        /// <summary>
+        /// Gets a value indicating whether this <see cref="IChartSeries"/> is visible.
+        /// </summary>
+        /// <value><c>true</c> if visible; otherwise, <c>false</c>.</value>
+        bool Visible { get; }
+        /// <summary>
+        /// Gets a value indicating whether this series should appear in the legend.
+        /// </summary>
+        /// <value><c>true</c> if the series appears in the legend; otherwise, <c>false</c>.</value>
+        bool ShowInLegend { get; }
+        /// <summary>
+        /// Gets or sets the rendering order.
+        /// </summary>
+        /// <value>The rendering order.</value>
         int RenderingOrder { get; set; }
-        bool Contains(double x, double y);
+        /// <summary>
+        /// Determines if the series contains the specified coordinates with a given tolerance.
+        /// </summary>
+        /// <param name="x">The x.</param>
+        /// <param name="y">The y.</param>
+        /// <param name="tolerance">The tolerance.</param>
+        /// <returns><c>true</c> if the series contains the coordinates; otherwise, <c>false</c>.</returns>
+        bool Contains(double x, double y, double tolerance);
+        /// <summary>
+        /// Returns the data at the specified coordinates;
+        /// </summary>
+        /// <param name="x">The x.</param>
+        /// <param name="y">The y.</param>
         object DataAt(double x, double y);
+        /// <summary>
+        /// Returns data chart position
+        /// </summary>
+        IEnumerable<ChartDataLabel> GetDataLabels(double offsetX, double offsetY);
+        /// <summary>
+        /// Returns series median
+        /// </summary>
+        double GetMedian();
+        /// <summary>
+        /// Returns series mean
+        /// </summary>
+        double GetMean();
+        /// <summary>
+        /// Returns series mode
+        /// </summary>
+        double GetMode();
+        /// <summary>
+        /// Returns series trend
+        /// </summary>
+        (double a, double b) GetTrend();
+        /// <summary>
+        /// Series coordinate system
+        /// </summary>
+        CoordinateSystem CoordinateSystem { get; }
+        /// <summary>
+        /// Series overlays
+        /// </summary>
+        IList<IChartSeriesOverlay> Overlays{ get; }
+        /// <summary>
+        /// Gets or sets the title of the series. The title is displayed in tooltips and the legend.
+        /// </summary>
+        /// <value>The title.</value>
         string Title { get; set; }
+        /// <summary>
+        /// Gets the title.
+        /// </summary>
         string GetTitle();
+        /// <summary>
+        /// Measures the legend.
+        /// </summary>
+        /// <returns>System.Double.</returns>
         double MeasureLegend();
+        /// <summary>
+        /// Invokes the click handler with the provided data item.
+        /// </summary>
+        /// <param name="handler">The handler.</param>
+        /// <param name="data">The data.</param>
+        Task InvokeClick(EventCallback<SeriesClickEventArgs> handler, object data);
     }
 }

Radzen.Blazor/IChartSeriesOverlay.cs

@@ -0,0 +1,33 @@
+using Microsoft.AspNetCore.Components;
+
+namespace Radzen.Blazor
+{
+    /// <summary>
+    /// Interface for chart overlays
+    /// </summary>
+    public interface IChartSeriesOverlay
+    {
+        /// <summary>
+        /// Render overlay
+        /// </summary>
+        /// <param name="categoryScale"></param>
+        /// <param name="valueScale"></param>
+        /// <returns>RenderFragment</returns>
+        RenderFragment Render(ScaleBase categoryScale, ScaleBase valueScale);
+
+        /// <summary>
+        /// Gets overlay visibility state
+        /// </summary>
+        bool Visible { get; }
+
+        /// <summary>
+        /// Hit test
+        /// </summary>
+        bool Contains(double mouseX, double mouseY, int tolerance);
+
+        /// <summary>
+        /// Renders tooltip
+        /// </summary>
+        RenderFragment RenderTooltip(double mouseX, double mouseY, double marginLeft, double marginTop);
+    }
+}

Radzen.Blazor/IChartStackedBarSeries.cs

@@ -0,0 +1,13 @@
+namespace Radzen.Blazor
+{
+    /// <summary>
+    /// Marker interface for <see cref="RadzenStackedBarSeries{TItem}" />.
+    /// </summary>
+    public interface IChartStackedBarSeries : IChartBarSeries
+    {
+        /// <summary>
+        /// Gets the value at the specified index.
+        /// </summary>
+        double ValueAt(int index);
+    }
+}

Radzen.Blazor/IChartStackedColumnSeries.cs

@@ -0,0 +1,19 @@
+namespace Radzen.Blazor
+{
+    /// <summary>
+    /// Marker interface for <see cref="RadzenStackedColumnSeries{TItem}" />.
+    /// </summary>
+    public interface IChartStackedColumnSeries
+    {
+        /// <summary>
+        /// Gets the count.
+        /// </summary>
+        /// <value>The count.</value>
+        int Count { get; }
+
+        /// <summary>
+        /// Gets the value at the specified index.
+        /// </summary>
+        double ValueAt(int index);
+    }
+}

Radzen.Blazor/IScheduler.cs

@@ -1,23 +1,95 @@
 using System;
 using System.Collections.Generic;
+using System.Globalization;
 using System.Threading.Tasks;
 using Microsoft.AspNetCore.Components;
 
 namespace Radzen.Blazor
 {
+    /// <summary>
+    /// The common <see cref="RadzenScheduler{TItem}" /> API injected as a cascading parameter to is views.
+    /// </summary>
     public interface IScheduler
     {
+        /// <summary>
+        /// Gets the appointments in the specified range.
+        /// </summary>
+        /// <param name="start">The start of the range.</param>
+        /// <param name="end">The end of the range.</param>
+        /// <returns>A collection of appointments within the specified range.</returns>
         IEnumerable<AppointmentData> GetAppointmentsInRange(DateTime start, DateTime end);
+        /// <summary>
+        /// Determines whether an appointment is within the specified range.
+        /// </summary>
+        /// <param name="item">The appointment to check.</param>
+        /// <param name="start">The start of the range.</param>
+        /// <param name="end">The end of the range.</param>
+        /// <returns><c>true</c> if the appointment is within the specified range; otherwise, <c>false</c>.</returns>
         bool IsAppointmentInRange(AppointmentData item, DateTime start, DateTime end);
+        /// <summary>
+        /// Adds a view. Must be called when a <see cref="ISchedulerView" /> is initialized.
+        /// </summary>
+        /// <param name="view">The view to add.</param>
         Task AddView(ISchedulerView view);
+        /// <summary>
+        /// Removes a view. Must be called when a <see cref="ISchedulerView" /> is disposed.
+        /// </summary>
+        /// <param name="view">The view to remove.</param>
         void RemoveView(ISchedulerView view);
+        /// <summary>
+        /// Determines whether the specified view is selected.
+        /// </summary>
+        /// <param name="view">The view.</param>
+        /// <returns><c>true</c> if the specified view is selected; otherwise, <c>false</c>.</returns>
         bool IsSelected(ISchedulerView view);
+        /// <summary>
+        /// Gets or sets the current date.
+        /// </summary>
+        /// <value>The current date.</value>
         DateTime CurrentDate { get; set; }
+        /// <summary>
+        /// Selects the specified appointment.
+        /// </summary>
+        /// <param name="data">The appointment to select.</param>
         Task SelectAppointment(AppointmentData data);
+        /// <summary>
+        /// Selects the specified slot.
+        /// </summary>
+        /// <param name="start">The start.</param>
+        /// <param name="end">The end.</param>
         Task SelectSlot(DateTime start, DateTime end);
+        /// <summary>
+        /// Gets the appointment HTML attributes.
+        /// </summary>
+        /// <param name="item">The appointment.</param>
+        /// <returns>A dictionary containing the HTML attributes for the specified appointment.</returns>
         IDictionary<string, object> GetAppointmentAttributes(AppointmentData item);
+        /// <summary>
+        /// Gets the slot HTML attributes.
+        /// </summary>
+        /// <param name="start">The start of the slot.</param>
+        /// <param name="end">The end of the slot.</param>
+        /// <returns>A dictionary containing the HTML attributes for the specified slot.</returns>
+        IDictionary<string, object> GetSlotAttributes(DateTime start, DateTime end);
+        /// <summary>
+        /// Renders the appointment.
+        /// </summary>
+        /// <param name="item">The item.</param>
+        /// <returns>RenderFragment.</returns>
         RenderFragment RenderAppointment(AppointmentData item);
+        /// <summary>
+        /// Reloads this instance.
+        /// </summary>
         Task Reload();
+        /// <summary>
+        /// Gets the height.
+        /// </summary>
+        /// <value>The height.</value>
         double Height { get; }
+        /// <summary>
+        /// Gets or sets the culture.
+        /// </summary>
+        /// <value>The culture.</value>
+        CultureInfo Culture { get; set; }
     }
 }

Radzen.Blazor/ISchedulerView.cs

@@ -3,18 +3,51 @@ using Microsoft.AspNetCore.Components;
 
 namespace Radzen.Blazor
 {
+    /// <summary>
+    /// Interface that has to be implemented by a view in order to by supported by <see cref="RadzenScheduler{TItem}" />.
+    /// </summary>
     public interface ISchedulerView
     {
+        /// <summary>
+        /// Gets the icon of the view. It is displayed in the view switching UI.
+        /// </summary>
+        string Icon { get; }
+        /// <summary>
+        /// Gets the title of the view. It is displayed in the RadzenScheduler title area.
+        /// </summary>
+        /// <value>The title.</value>
         string Title { get; }
+        /// <summary>
+        /// Gets the text of the view. It is displayed in the view switching UI.
+        /// </summary>
+        /// <value>The text.</value>
         string Text { get; }
 
+        /// <summary>
+        /// Returns a new date when the user clicks the next button of RadzenScheduler.
+        /// </summary>
+        /// <returns>The next date. For example a day view will return the next day, a week view will return the next week.</returns>
         DateTime Next();
 
+        /// <summary>
+        /// Returns a new date when the user clicks the previous button of RadzenScheduler.
+        /// </summary>
+        /// <returns>The previous date. For example a day view will return the previous day, a week view will return the previous week.</returns>
         DateTime Prev();
 
+        /// <summary>
+        /// Renders this instance.
+        /// </summary>
+        /// <returns>RenderFragment.</returns>
         RenderFragment Render();
 
+        /// <summary>
+        /// Gets the start date.
+        /// </summary>
         DateTime StartDate { get; }
+        /// <summary>
+        /// Gets the end date.
+        /// </summary>
         DateTime EndDate { get; }
     }
 }

Radzen.Blazor/Interpolation.cs

@@ -0,0 +1,22 @@
+namespace Radzen.Blazor
+{
+    /// <summary>
+    /// Specifies the interpolation mode of lines between data points. Used by <see cref="RadzenAreaSeries{TItem}"/> and <see cref="RadzenLineSeries{TItem}"/>.
+    /// </summary>
+    public enum Interpolation
+    {
+
+        /// <summary>
+        /// Points are connected by a straight line.
+        /// </summary>
+        Line,
+        /// <summary>
+        /// Points are connected by a smooth curve.
+        /// </summary>
+        Spline,
+        /// <summary>
+        /// Points are connected by horizontal and vertical lines only.
+        /// </summary>
+        Step
+    }
+}

Radzen.Blazor/LICENSE.txt

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2018-2021 Radzen Ltd
+Copyright (c) 2018-2023 Radzen Ltd
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

Radzen.Blazor/LegendPosition.cs

@@ -1,10 +1,25 @@
 namespace Radzen.Blazor
 {
+    /// <summary>
+    /// Specifies the legend position in a <see cref="RadzenChart" />.
+    /// </summary>
     public enum LegendPosition
     {
+        /// <summary>
+        /// The legend is at the right side of the series.
+        /// </summary>
         Right,
+        /// <summary>
+        /// The legend is at the left side of the series.
+        /// </summary>
         Left,
+        /// <summary>
+        /// The legend is above the series.
+        /// </summary>
         Top,
+        /// <summary>
+        /// The legend is below the series.
+        /// </summary>
         Bottom
     }
 }

Radzen.Blazor/LineStyle.cs

@@ -1,9 +1,21 @@
 namespace Radzen.Blazor
 {
+    /// <summary>
+    /// Specified the line drawing style.
+    /// </summary>
     public enum LineType
     {
+        /// <summary>
+        /// Solid lines.
+        /// </summary>
         Solid,
+        /// <summary>
+        /// Dashed lines.
+        /// </summary>
         Dashed,
+        /// <summary>
+        /// Dotted lines.
+        /// </summary>
         Dotted
     }
 }

Radzen.Blazor/LinearScale.cs

@@ -65,7 +65,13 @@ namespace Radzen.Blazor
             if (start == end)
             {
                 start = 0;
-                end = end + NiceNumber(end/ticks, false);
+                end += NiceNumber(end / ticks, false);
+            }
+
+            if (Round && end < 0)
+            {
+                end = 0;
+                start += NiceNumber(start / ticks, false);
             }
 
             var range = end - start;

Radzen.Blazor/MarkerType.cs

@@ -1,12 +1,33 @@
 namespace Radzen.Blazor
 {
+    /// <summary>
+    /// Specifies the type of marker that <see cref="RadzenChart" /> displays for data points.
+    /// </summary>
     public enum MarkerType
     {
+        /// <summary>
+        /// Do not display a marker for data points.
+        /// </summary>
         None,
+        /// <summary>
+        /// Cycle between markers.
+        /// </summary>
         Auto,
+        /// <summary>
+        /// Use a circle marker.
+        /// </summary>
         Circle,
+        /// <summary>
+        /// Use a triangle marker.
+        /// </summary>
         Triangle,
+        /// <summary>
+        /// Use a square marker.
+        /// </summary>
         Square,
+        /// <summary>
+        /// Use a diamond marker.
+        /// </summary>
         Diamond
     }
 }

Radzen.Blazor/NotificationService.cs

@@ -1,14 +1,34 @@
-using System;
+using Microsoft.AspNetCore.Components;
+using Radzen.Blazor;
+using System;
 using System.Collections.Generic;
 using System.Collections.ObjectModel;
 using System.Text;
 
 namespace Radzen
 {
+    /// <summary>
+    /// Class NotificationService. Contains various methods with options to open notifications. 
+    /// Should be added as scoped service in the application services and RadzenNotification should be added in application main layout.
+    /// </summary>
+    /// <example>
+    /// <code>
+    /// @inject NotificationService NotificationService
+    /// &lt;RadzenButton Text="Show info notification" Click=@(args => NotificationService.Notify(new NotificationMessage { Severity = NotificationSeverity.Info, Summary = "Info Summary", Detail = "Info Detail", Duration = 4000 })) / &gt;
+    /// </code>
+    /// </example>
     public class NotificationService
     {
+        /// <summary>
+        /// Gets the messages.
+        /// </summary>
+        /// <value>The messages.</value>
         public ObservableCollection<NotificationMessage> Messages { get; private set; } = new ObservableCollection<NotificationMessage>();
 
+        /// <summary>
+        /// Notifies the specified message.
+        /// </summary>
+        /// <param name="message">The message.</param>
         public void Notify(NotificationMessage message)
         {
             var newMessage = new NotificationMessage()
@@ -17,7 +37,10 @@ namespace Radzen
                 Severity = message.Severity,
                 Summary = message.Summary,
                 Detail = message.Detail,
-                Style = message.Style
+                Style = message.Style,
+                Click = message.Click,
+                CloseOnClick = message.CloseOnClick,
+                Payload = message.Payload
             };
 
             if (!Messages.Contains(newMessage))
@@ -26,14 +49,27 @@ namespace Radzen
             }
         }
 
-        public void Notify(NotificationSeverity severity = NotificationSeverity.Info, string summary = "", string detail = "", double duration = 3000)
+      /// <summary>
+      /// Notifies the specified severity.
+      /// </summary>
+      /// <param name="severity">The severity.</param>
+      /// <param name="summary">The summary.</param>
+      /// <param name="detail">The detail.</param>
+      /// <param name="duration">The duration.</param>
+      /// <param name="click">The click event.</param>
+      /// <param name="closeOnClick">If true, then the notification will be closed when clicked on.</param>
+      /// <param name="payload">Used to store a custom payload that can be retreived later in the click event handler.</param>
+      public void Notify(NotificationSeverity severity = NotificationSeverity.Info, string summary = "", string detail = "", double duration = 3000, Action<NotificationMessage> click = null, bool closeOnClick = false, object payload = null)
         {
             var newMessage = new NotificationMessage()
             {
                 Duration = duration,
                 Severity = severity,
                 Summary = summary,
-                Detail = detail
+                Detail = detail,
+                Click = click,
+                CloseOnClick = closeOnClick,
+                Payload = payload
             };
 
             if (!Messages.Contains(newMessage))
@@ -43,12 +79,50 @@ namespace Radzen
         }
     }
 
+    /// <summary>
+    /// Class NotificationMessage.
+    /// </summary>
     public class NotificationMessage
     {
+        /// <summary>
+        /// Gets or sets the duration.
+        /// </summary>
+        /// <value>The duration.</value>
         public double? Duration { get; set; }
+        /// <summary>
+        /// Gets or sets the severity.
+        /// </summary>
+        /// <value>The severity.</value>
         public NotificationSeverity Severity { get; set; }
+        /// <summary>
+        /// Gets or sets the summary.
+        /// </summary>
+        /// <value>The summary.</value>
         public string Summary { get; set; }
+        /// <summary>
+        /// Gets or sets the detail.
+        /// </summary>
+        /// <value>The detail.</value>
         public string Detail { get; set; }
+        /// <summary>
+        /// Gets or sets the style.
+        /// </summary>
+        /// <value>The style.</value>
         public string Style { get; set; }
-    }
+        /// <summary>
+        /// Gets or sets the click event.
+        /// </summary>
+        /// <value>This event handler is called when the notification is clicked on.</value>
+        public Action<NotificationMessage> Click { get; set; }
+        /// <summary>
+        /// Gets or sets click on close action.
+        /// </summary>
+        /// <value>If true, then the notification will be closed when clicked on.</value>
+        public bool CloseOnClick { get; set; }
+        /// <summary>
+        /// Gets or sets notification payload.
+        /// </summary>
+        /// <value>Used to store a custom payload that can be retreived later in the click event handler.</value>
+        public object Payload { get; set; }
+   }
 }

Radzen.Blazor/OData.cs

@@ -8,35 +8,76 @@ using System.Web;
 
 namespace Radzen
 {
+    /// <summary>
+    /// Class ODataEnumerable.
+    /// Implements the <see cref="IEnumerable{T}" />
+    /// </summary>
+    /// <typeparam name="T"></typeparam>
+    /// <seealso cref="IEnumerable{T}" />
     public class ODataEnumerable<T> : IEnumerable<T>
     {
+        /// <summary>
+        /// The source
+        /// </summary>
         IEnumerable<T> source;
+        /// <summary>
+        /// Initializes a new instance of the <see cref="ODataEnumerable{T}"/> class.
+        /// </summary>
+        /// <param name="source">The source.</param>
         public ODataEnumerable(IEnumerable<T> source)
         {
             this.source = source;
         }
 
+        /// <summary>
+        /// Gets the enumerator.
+        /// </summary>
+        /// <returns>IEnumerator&lt;T&gt;.</returns>
         public IEnumerator<T> GetEnumerator()
         {
             return source.GetEnumerator();
         }
 
+        /// <summary>
+        /// Gets the enumerator.
+        /// </summary>
+        /// <returns>IEnumerator.</returns>
         IEnumerator IEnumerable.GetEnumerator()
         {
             return source.GetEnumerator();
         }
     }
 
+    /// <summary>
+    /// Class ODataServiceResult.
+    /// </summary>
+    /// <typeparam name="T"></typeparam>
     public class ODataServiceResult<T>
     {
+        /// <summary>
+        /// Gets or sets the count.
+        /// </summary>
+        /// <value>The count.</value>
         [JsonPropertyName("@odata.count")]
         public int Count { get; set; }
 
+        /// <summary>
+        /// Gets or sets the value.
+        /// </summary>
+        /// <value>The value.</value>
         public IEnumerable<T> Value { get; set; }
     }
 
+    /// <summary>
+    /// Class ODataJsonSerializer.
+    /// </summary>
     public static class ODataJsonSerializer
     {
+        /// <summary>
+        /// Determines whether the specified type is complex.
+        /// </summary>
+        /// <param name="type">The type.</param>
+        /// <returns><c>true</c> if the specified type is complex; otherwise, <c>false</c>.</returns>
         static bool IsComplex(Type type)
         {
             var underlyingType = type.IsGenericType && type.GetGenericTypeDefinition() == typeof(Nullable<>) ? Nullable.GetUnderlyingType(type) : type;
@@ -47,11 +88,23 @@ namespace Radzen
                 type != typeof(string) && type != typeof(decimal) && type.IsClass;
         }
 
+        /// <summary>
+        /// Determines whether the specified type is enumerable.
+        /// </summary>
+        /// <param name="type">The type.</param>
+        /// <returns><c>true</c> if the specified type is enumerable; otherwise, <c>false</c>.</returns>
         static bool IsEnumerable(Type type)
         {
             return !typeof(string).IsAssignableFrom(type) && (typeof(IEnumerable<>).IsAssignableFrom(type) || typeof(IEnumerable).IsAssignableFrom(type));
         }
 
+        /// <summary>
+        /// Serializes the specified value.
+        /// </summary>
+        /// <typeparam name="TValue">The type of the t value.</typeparam>
+        /// <param name="value">The value.</param>
+        /// <param name="options">The options.</param>
+        /// <returns>System.String.</returns>
         public static string Serialize<TValue>(TValue value, JsonSerializerOptions options = null)
         {
             if (options == null)
@@ -70,19 +123,45 @@ namespace Radzen
         }
     }
 
+    /// <summary>
+    /// Class ComplexPropertiesConverter.
+    /// Implements the <see cref="JsonConverter{T}" />
+    /// </summary>
+    /// <typeparam name="T"></typeparam>
+    /// <seealso cref="JsonConverter{T}" />
     public class ComplexPropertiesConverter<T> : JsonConverter<T>
     {
+        /// <summary>
+        /// The complex properties
+        /// </summary>
         IEnumerable<string> complexProperties;
+        /// <summary>
+        /// Initializes a new instance of the <see cref="ComplexPropertiesConverter{T}"/> class.
+        /// </summary>
+        /// <param name="complexProperties">The complex properties.</param>
         public ComplexPropertiesConverter(IEnumerable<string> complexProperties)
         {
             this.complexProperties = complexProperties;
         }
 
+        /// <summary>
+        /// Reads the specified reader.
+        /// </summary>
+        /// <param name="reader">The reader.</param>
+        /// <param name="typeToConvert">The type to convert.</param>
+        /// <param name="options">The options.</param>
+        /// <returns>T.</returns>
         public override T Read(ref Utf8JsonReader reader, Type typeToConvert, JsonSerializerOptions options)
         {
             return JsonSerializer.Deserialize<T>(ref reader, options);
         }
 
+        /// <summary>
+        /// Writes the specified writer.
+        /// </summary>
+        /// <param name="writer">The writer.</param>
+        /// <param name="value">The value.</param>
+        /// <param name="options">The options.</param>
         public override void Write(Utf8JsonWriter writer, T value, JsonSerializerOptions options)
         {
             writer.WriteStartObject();
@@ -105,21 +184,54 @@ namespace Radzen
         }
     }
 
+    /// <summary>
+    /// Class DateTimeConverterUsingDateTimeParse.
+    /// Implements the <see cref="JsonConverter{DateTime}" />
+    /// </summary>
+    /// <seealso cref="JsonConverter{DateTime}" />
     public class DateTimeConverterUsingDateTimeParse : JsonConverter<DateTime>
     {
+        /// <summary>
+        /// Reads the specified reader.
+        /// </summary>
+        /// <param name="reader">The reader.</param>
+        /// <param name="typeToConvert">The type to convert.</param>
+        /// <param name="options">The options.</param>
+        /// <returns>DateTime.</returns>
         public override DateTime Read(ref Utf8JsonReader reader, Type typeToConvert, JsonSerializerOptions options)
         {
             return DateTime.Parse(reader.GetString());
         }
 
+        /// <summary>
+        /// Writes the specified writer.
+        /// </summary>
+        /// <param name="writer">The writer.</param>
+        /// <param name="value">The value.</param>
+        /// <param name="options">The options.</param>
         public override void Write(Utf8JsonWriter writer, DateTime value, JsonSerializerOptions options)
         {
             writer.WriteStringValue(value.ToString("yyyy-MM-ddTHH:mm:ss.fffZ"));
         }
     }
 
+    /// <summary>
+    /// Class ODataExtensions.
+    /// </summary>
     public static class ODataExtensions
-    {        
+    {
+        /// <summary>
+        /// Gets the o data URI.
+        /// </summary>
+        /// <param name="uri">The URI.</param>
+        /// <param name="filter">The filter.</param>
+        /// <param name="top">The top.</param>
+        /// <param name="skip">The skip.</param>
+        /// <param name="orderby">The orderby.</param>
+        /// <param name="expand">The expand.</param>
+        /// <param name="select">The select.</param>
+        /// <param name="count">if set to <c>true</c> [count].</param>
+        /// <returns>Uri.</returns>
         public static Uri GetODataUri(this Uri uri, string filter = null, int? top = null, int? skip = null, string orderby = null, string expand = null, string select = null, bool? count = null)
         {
             var uriBuilder = new UriBuilder(uri);

Radzen.Blazor/PagedDataBoundComponent.cs

@@ -8,29 +8,93 @@ using Radzen.Blazor;
 
 namespace Radzen
 {
+    /// <summary>
+    /// Base classes of components that support paging.
+    /// </summary>
+    /// <typeparam name="T">The type of the data item</typeparam>
     public class PagedDataBoundComponent<T> : RadzenComponent
     {
+        /// <summary>
+        /// Gets or sets the pager position. Set to <c>PagerPosition.Bottom</c> by default.
+        /// </summary>
+        /// <value>The pager position.</value>
         [Parameter]
         public PagerPosition PagerPosition { get; set; } = PagerPosition.Bottom;
 
+        /// <summary>
+        /// Gets or sets a value indicating whether pager is visible even when not enough data for paging.
+        /// </summary>
+        /// <value><c>true</c> if pager is visible even when not enough data for paging otherwise, <c>false</c>.</value>
+        [Parameter]
+        public bool PagerAlwaysVisible { get; set; }
+
+        /// <summary>
+        /// Gets or sets the horizontal align.
+        /// </summary>
+        /// <value>The horizontal align.</value>
+        [Parameter]
+        public HorizontalAlign PagerHorizontalAlign { get; set; } = HorizontalAlign.Justify;
+
+        /// <summary>
+        /// Gets or sets a value indicating whether paging is allowed. Set to <c>false</c> by default.
+        /// </summary>
+        /// <value><c>true</c> if paging is allowed; otherwise, <c>false</c>.</value>
         [Parameter]
         public bool AllowPaging { get; set; }
 
+        int _PageSize = 10;
+        /// <summary>
+        /// Gets or sets the size of the page.
+        /// </summary>
+        /// <value>The size of the page.</value>
         [Parameter]
-        public int PageSize { get; set; } = 10;
+        public int PageSize 
+        {
+            get
+            {
+                return pageSize ?? _PageSize;
+            }
+            set
+            {
+                _PageSize = value;
+            }
+        }
 
+        /// <summary>
+        /// Gets or sets the page numbers count.
+        /// </summary>
+        /// <value>The page numbers count.</value>
         [Parameter]
         public int PageNumbersCount { get; set; } = 5;
 
+        /// <summary>
+        /// Gets or sets the count.
+        /// </summary>
+        /// <value>The count.</value>
         [Parameter]
         public int Count { get; set; }
+        /// <summary>
+        /// Gets or sets the current page.
+        /// </summary>
+        /// <value>The current page.</value>
         public int CurrentPage { get; set; }
 
+        /// <summary>
+        /// Gets or sets the template.
+        /// </summary>
+        /// <value>The template.</value>
         [Parameter]
         public RenderFragment<T> Template { get; set; }
 
+        /// <summary>
+        /// The data
+        /// </summary>
         IEnumerable<T> _data;
 
+        /// <summary>
+        /// Gets or sets the data.
+        /// </summary>
+        /// <value>The data.</value>
         [Parameter]
         public IEnumerable<T> Data
         {
@@ -49,19 +113,55 @@ namespace Radzen
             }
         }
 
-        protected IQueryable<T> _view = null;
+        /// <summary>
+        /// Gets or sets the page size options.
+        /// </summary>
+        /// <value>The page size options.</value>
+        [Parameter]
+        public IEnumerable<int> PageSizeOptions { get; set; }
+
+        /// <summary>
+        /// Gets or sets the page size description text.
+        /// </summary>
+        /// <value>The page size description text.</value>
+        [Parameter]
+        public string PageSizeText { get; set; } = "items per page";
+        
+        /// <summary>
+        /// Gets or sets the pager summary visibility.
+        /// </summary>
+        /// <value>The pager summary visibility.</value>
+        [Parameter]
+        public bool ShowPagingSummary { get; set; } = false;
+
+        /// <summary>
+        /// Gets or sets the pager summary format.
+        /// </summary>
+        /// <value>The pager summary format.</value>
+        [Parameter]
+        public string PagingSummaryFormat { get; set; } = "Page {0} of {1} ({2} items)";
+
+        internal IQueryable<T> _view = null;
+        /// <summary>
+        /// Gets the paged view.
+        /// </summary>
+        /// <value>The paged view.</value>
         public virtual IQueryable<T> PagedView
         {
             get
             {
                 if (_view == null)
                 {
-                    _view = (AllowPaging ? View.Skip(skip).Take(PageSize) : View).ToList().AsQueryable();
+                    _view = (AllowPaging && !LoadData.HasDelegate ? View.Skip(skip).Take(PageSize) : View).ToList().AsQueryable();
                 }
                 return _view;
             }
         }
 
+        /// <summary>
+        /// Gets the view.
+        /// </summary>
+        /// <value>The view.</value>
         public virtual IQueryable<T> View
         {
             get
@@ -70,9 +170,16 @@ namespace Radzen
             }
         }
 
+        /// <summary>
+        /// Gets or sets the load data.
+        /// </summary>
+        /// <value>The load data.</value>
         [Parameter]
         public EventCallback<Radzen.LoadDataArgs> LoadData { get; set; }
 
+        /// <summary>
+        /// Reloads this instance.
+        /// </summary>
         public async virtual Task Reload()
         {
             _view = null;
@@ -92,11 +199,36 @@ namespace Radzen
             }
         }
 
+        /// <summary>
+        /// Called when [data changed].
+        /// </summary>
         protected virtual void OnDataChanged()
         {
 
         }
 
+        /// <summary>
+        /// Set parameters as an asynchronous operation.
+        /// </summary>
+        /// <param name="parameters">The parameters.</param>
+        /// <returns>A Task representing the asynchronous operation.</returns>
+        public override async Task SetParametersAsync(ParameterView parameters)
+        {
+            bool pageSizeChanged = parameters.DidParameterChange(nameof(PageSize), PageSize) &&
+                PageSize != pageSize;
+
+            await base.SetParametersAsync(parameters);
+
+            if (pageSizeChanged && !firstRender)
+            {
+               await InvokeAsync(Reload);
+            }
+        }
+
+        /// <summary>
+        /// Called when [parameters set asynchronous].
+        /// </summary>
+        /// <returns>Task.</returns>
         protected override Task OnParametersSetAsync()
         {
             if (Visible && !LoadData.HasDelegate)
@@ -111,70 +243,146 @@ namespace Radzen
             return base.OnParametersSetAsync();
         }
 
-        protected override Task OnAfterRenderAsync(bool firstRender)
+        /// <summary>
+        /// The first render
+        /// </summary>
+        bool firstRender = true;
+        /// <summary>
+        /// Called when [after render asynchronous].
+        /// </summary>
+        /// <param name="firstRender">if set to <c>true</c> [first render].</param>
+        /// <returns>Task.</returns>
+        protected override async Task OnAfterRenderAsync(bool firstRender)
+        {
+            this.firstRender = firstRender;
+
+            if (firstRender)
+            {
+                await ReloadOnFirstRender();
+            }
+
+            await base.OnAfterRenderAsync(firstRender);
+        }
+
+        internal virtual async Task ReloadOnFirstRender()
         {
             if (firstRender && Visible && (LoadData.HasDelegate && Data == null))
             {
-                InvokeAsync(Reload);
+                await InvokeAsync(Reload);
                 StateHasChanged();
             }
-
-            return base.OnAfterRenderAsync(firstRender);
         }
 
+        /// <summary>
+        /// The skip
+        /// </summary>
         protected int skip;
 
+        /// <summary>
+        /// The top pager
+        /// </summary>
         protected RadzenPager topPager;
+        /// <summary>
+        /// The bottom pager
+        /// </summary>
         protected RadzenPager bottomPager;
 
+        /// <summary>
+        /// Gets or sets the page callback.
+        /// </summary>
+        /// <value>The page callback.</value>
+        [Parameter]
+        public EventCallback<PagerEventArgs> Page { get; set; }
+
+        /// <summary>
+        /// Handles the <see cref="E:PageChanged" /> event.
+        /// </summary>
+        /// <param name="args">The <see cref="PagerEventArgs"/> instance containing the event data.</param>
         protected async Task OnPageChanged(PagerEventArgs args)
         {
             skip = args.Skip;
             CurrentPage = args.PageIndex;
+
+            await Page.InvokeAsync(args);
+
             await InvokeAsync(Reload);
         }
 
+        internal int? pageSize;
+
+        /// <summary>
+        /// Called when [page size changed].
+        /// </summary>
+        /// <param name="value">The value.</param>
+        protected virtual async Task OnPageSizeChanged(int value)
+        {
+            pageSize = value;
+            await InvokeAsync(Reload);
+        }
+
+        /// <summary>
+        /// Calculates the pager.
+        /// </summary>
         protected void CalculatePager()
         {
             if (topPager != null)
             {
-                topPager.GoToPage(CurrentPage).Wait();
-                InvokeAsync(topPager.Reload);
+                topPager.SetCount(Count);
+                topPager.SetCurrentPage(CurrentPage);
             }
 
             if (bottomPager != null)
             {
-                bottomPager.GoToPage(CurrentPage).Wait();
-                InvokeAsync(bottomPager.Reload);
+                bottomPager.SetCount(Count);
+                bottomPager.SetCurrentPage(CurrentPage);
             }
         }
 
-        public async Task GoToPage(int page)
+        /// <summary>
+        /// Goes to page.
+        /// </summary>
+        /// <param name="page">The page.</param>
+        /// <param name="forceReload">if set to <c>true</c> [force reload].</param>
+        public async Task GoToPage(int page, bool forceReload = false)
         {
             if (topPager != null)
             {
-                await topPager.GoToPage(page);
+                await topPager.GoToPage(page, forceReload);
             }
 
             if (bottomPager != null)
             {
-                await bottomPager.GoToPage(page);
+                await bottomPager.GoToPage(page, forceReload);
             }
         }
 
+        /// <summary>
+        /// Firsts the page.
+        /// </summary>
+        /// <param name="forceReload">if set to <c>true</c> [force reload].</param>
         public async Task FirstPage(bool forceReload = false)
         {
+            var shouldReload = forceReload && CurrentPage == 0;
+
             if (topPager != null)
             {
-                await topPager.FirstPage(forceReload);
+                await topPager.FirstPage();
             }
 
             if (bottomPager != null)
             {
-                await bottomPager.FirstPage(forceReload);
+                await bottomPager.FirstPage();
+            }
+
+            if (shouldReload)
+            {
+                await InvokeAsync(Reload);
             }
         }
 
+        /// <summary>
+        /// Previouses the page.
+        /// </summary>
         public async Task PrevPage()
         {
             if (topPager != null)
@@ -188,6 +396,9 @@ namespace Radzen
             }
         }
 
+        /// <summary>
+        /// Nexts the page.
+        /// </summary>
         public async Task NextPage()
         {
             if (topPager != null)
@@ -201,6 +412,9 @@ namespace Radzen
             }
         }
 
+        /// <summary>
+        /// Lasts the page.
+        /// </summary>
         public async Task LastPage()
         {
             if (topPager != null)

Radzen.Blazor/README.md

@@ -0,0 +1,105 @@
+## Radzen Blazor is a set of 70+ free native Blazor UI controls packed with DataGrid, Scheduler, Charts and robust theming including Material design and Fluent UI.
+
+![Radzen Blazor Components](https://raw.githubusercontent.com/radzenhq/radzen-blazor/master/RadzenBlazorDemos/wwwroot/images/radzen-blazor-components.png)
+
+## Why choose Radzen Blazor Components?
+
+### :sparkles: Free
+
+Radzen Blazor Components are open source and free for commercial use. You can install them from [nuget](https://www.nuget.org/packages/Radzen.Blazor) or build your own copy from source.
+
+Paid support is available as part of the [Radzen Professional subscription](https://www.radzen.com/blazor-studio/pricing/).
+
+### :computer: Native
+
+The components are implemented in C# and take full advantage of the Blazor framework. They do not depend on or wrap existing JavaScript frameworks or libraries.
+
+Blazor Server and Blazor WebAssembly are fully supported.
+
+### :seedling: Growing
+
+We add new components and features on a regular basis.
+
+Short development cycle. We release as soon as new stuff is available. No more quarterly releases.
+
+## Support exceeding your expectations
+
+### :speech_balloon: Community Support
+Everybody is welcome to visit the [Radzen Community forum](https://forum.radzen.com/). Join the growing community and participate in the discussions!
+
+### :dart: Dedicated Support
+
+The Radzen team monitors the forum threads, but does not guarantee a response to every question. For guaranteed responses you may consider the dedicated support option.
+
+Dedicated support for the Radzen Blazor Components is available as part of the [Radzen Professional subscription](https://www.radzen.com/blazor-studio/pricing/).
+
+Our flagship product [Radzen Blazor Studio](https://www.radzen.com/blazor-studio/) provides tons of productivity features for Blazor developers:
+- An industry-leading WYSIWYG Blazor design time canvas
+- Scaffolding a complete CRUD applications from a database
+- Built-in security - authentication and authorization
+- Visual Studio Code and Professional support
+- Deployment to IIS and Azure
+- Dedicated support with 24 hour guaranteed response time
+
+## Get started with Radzen Blazor Components
+
+### 1. Install
+
+Radzen Blazor Components are distributed as a [Radzen.Blazor nuget package](https://www.nuget.org/packages/Radzen.Blazor). You can add them to your project in one of the following ways
+- Install the package from command line by running `dotnet add package Radzen.Blazor`
+- Add the project from the Visual Nuget Package Manager
+- Manually edit the .csproj file and add a project reference
+
+### 2. Import the namespace
+
+Open the `_Imports.razor` file of your Blazor application and add this line `@using Radzen.Blazor`.
+
+### 3. Include a theme
+Radzen Blazor components come with five free themes: Material, Standard, Default, Dark, Software and Humanistic.
+
+To use a theme
+1. Pick a theme. The [online demos](https://blazor.radzen.com/colors) allow you to preview the available options via the theme dropdown located in the header. The Material theme is currently selected by default.
+1. Include the theme CSS file in your Blazor application. Open `Pages\_Layout.cshtml` (Blazor Server .NET 6), `Pages\_Host.cshtml` (Blazor Server .NET 7) or `wwwroot/index.html` (Blazor WebAssembly) and include a theme CSS file by adding this snippet
+   ```html
+   <link rel="stylesheet" href="_content/Radzen.Blazor/css/material-base.css">
+   ```
+
+To include a different theme (i.e. Standard) just change the name of the CSS file:
+```
+<link rel="stylesheet" href="_content/Radzen.Blazor/css/standard-base.css">
+```
+
+### 4. Include Radzen.Blazor.js
+
+Open `Pages\_Layout.cshtml` (Blazor Server .NET 6), `Pages\_Host.cshtml` (Blazor Server .NET 7) or `wwwroot/index.html` (Blazor WebAssembly) and include this snippet:
+
+```html
+<script src="_content/Radzen.Blazor/Radzen.Blazor.js"></script>
+```
+
+### 5. Use a component
+Use any Radzen Blazor component by typing its tag name in a Blazor page e.g.
+```html
+<RadzenButton Text="Hi"></RadzenButton>
+```
+
+#### Data-binding a property
+```razor
+<RadzenButton Text=@text />
+<RadzenTextBox @bind-Value=@text />
+@code {
+  string text = "Hi";
+}
+```
+
+#### Handing events
+
+```razor
+<RadzenButton Click="@ButtonClicked" Text="Hi"></RadzenButton>
+@code {
+  void ButtonClicked()
+  {
+
+  }
+}
+```

Radzen.Blazor/Radzen.Blazor.csproj

@@ -1,78 +1,75 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
   <PropertyGroup>
     <NoWarn>BL9993</NoWarn>
-    <TargetFrameworks>netstandard2.1;net5.0</TargetFrameworks>
+    <TargetFrameworks>netstandard2.1;net5.0;net6.0;net7.0</TargetFrameworks>
     <RazorLangVersion>3.0</RazorLangVersion>
     <LangVersion>7.3</LangVersion>
     <OutputType>Library</OutputType>
     <IsPackable>true</IsPackable>
     <PackageId>Radzen.Blazor</PackageId>
     <Product>Radzen.Blazor</Product>
-    <Version>3.0.10</Version>
+    <Version>4.7.8</Version>
     <Copyright>Radzen Ltd.</Copyright>
     <Authors>Radzen Ltd.</Authors>
-    <Description>Native Blazor UI components by Radzen Ltd.</Description>
-    <PackageTags>blazor blazor-component blazor-grid blazor-datagrid</PackageTags>
+    <Description>Radzen Blazor is a set of 70+ free native Blazor UI controls packed with DataGrid, Scheduler, Charts and robust theming including Material design and Fluent UI.</Description>
+    <PackageTags>blazor material design fluent fluentui components datagrid scheduler charts</PackageTags>
+	<PackageReadmeFile>README.md</PackageReadmeFile>
     <PackageProjectUrl>https://www.radzen.com</PackageProjectUrl>
     <PackageIcon>icon.png</PackageIcon>
     <PackageLicenseFile>LICENSE.txt</PackageLicenseFile>
     <Title>Radzen Components for Blazor</Title>
     <RepositoryUrl>https://github.com/radzenhq/radzen-blazor</RepositoryUrl>
+    <GenerateDocumentationFile>true</GenerateDocumentationFile>
   </PropertyGroup>
-
   <ItemGroup>
+    <PackageReference Include="LibSassBuilder" Version="2.0.1" />
     <PackageReference Include="Microsoft.AspNetCore.Components" Condition="'$(TargetFramework)' == 'netstandard2.1'" Version="3.1.0" />
     <PackageReference Include="Microsoft.AspNetCore.Components.Web" Condition="'$(TargetFramework)' == 'netstandard2.1'" Version="3.1.0" />
     <PackageReference Include="Microsoft.AspNetCore.Components" Condition="'$(TargetFramework)' == 'net5.0'" Version="5.0.0" />
     <PackageReference Include="Microsoft.AspNetCore.Components.Web" Condition="'$(TargetFramework)' == 'net5.0'" Version="5.0.0" />
-    <PackageReference Include="Microsoft.CSharp" Version="4.7.0" />
-    <PackageReference Include="System.Linq.Dynamic.Core" Version="1.2.2" />
+	<PackageReference Include="Microsoft.AspNetCore.Components" Condition="'$(TargetFramework)' == 'net6.0'" Version="6.0.0" />
+	<PackageReference Include="Microsoft.AspNetCore.Components.Web" Condition="'$(TargetFramework)' == 'net6.0'" Version="6.0.0" />
+	<PackageReference Include="Microsoft.AspNetCore.Components" Condition="'$(TargetFramework)' == 'net7.0'" Version="7.0.0" />
+	<PackageReference Include="Microsoft.AspNetCore.Components.Web" Condition="'$(TargetFramework)' == 'net7.0'" Version="7.0.0" />
+	<PackageReference Include="Microsoft.CSharp" Version="4.7.0" />
+    <PackageReference Include="System.Linq.Dynamic.Core" Version="1.2.22" />
   </ItemGroup>
 
   <ItemGroup>
-      <None Include="LICENSE.txt" Pack="true" PackagePath="" />
-      <None Include="icon.png" Pack="true" PackagePath="" />
+    <None Include="LICENSE.txt" Pack="true" PackagePath="" />
+    <None Include="icon.png" Pack="true" PackagePath="" />
+	<None Include="README.md" Pack="true" PackagePath="\"/>
   </ItemGroup>
 
   <ItemGroup>
-      <EmbeddedResource Include="LinkerConfig.xml">
-        <LogicalName>$(MSBuildProjectName).xml</LogicalName>
-      </EmbeddedResource>
+    <EmbeddedResource Include="LinkerConfig.xml">
+      <LogicalName>$(MSBuildProjectName).xml</LogicalName>
+    </EmbeddedResource>
   </ItemGroup>
-  
-  <UsingTask
-  TaskName="RemoveSourceMap"
-  TaskFactory="RoslynCodeTaskFactory"
-  AssemblyFile="$(MSBuildToolsPath)\Microsoft.Build.Tasks.Core.dll" >
-    <Task>
-      <Using Namespace="System"/>
-      <Using Namespace="System.IO"/>
-      <Using Namespace="System.Text"/>
-      <Code Type="Fragment" Language="cs">
-        <![CDATA[
-          foreach (var file in Directory.EnumerateFiles("./wwwroot/css", "*.css"))
-          {
-              File.WriteAllText(file, File.ReadAllText(file).Replace("/*# sourceMappingURL=themes" + Path.DirectorySeparatorChar + Path.GetFileName(file) + ".map */", ""), Encoding.UTF8);
-          }
-        ]]>
-      </Code>
-    </Task>
-  </UsingTask>
-  
-  <Target Name="ToolRestore" BeforeTargets="PreBuildEvent">
-    <Exec Command="dotnet tool restore" StandardOutputImportance="high" />
+
+  <PropertyGroup>
+    <LibSassOutputStyle>expanded</LibSassOutputStyle>
+    <EnableDefaultSassItems>false</EnableDefaultSassItems>  
+  </PropertyGroup>
+
+  <ItemGroup>
+    <Sass Include="$(MSBuildProjectDirectory)/themes/*.scss" Exclude="$(MSBuildProjectDirectory)/themes/_*.scss" Condition="'$(TargetFramework)' == 'net6.0'" />
+  </ItemGroup>
+
+ <Target Name="Sass" BeforeTargets="BeforeBuild" Condition="'$(TargetFramework)' == 'net6.0'">
+    <PropertyGroup>
+      <_SassFileList>@(Sass->'&quot;%(FullPath)&quot;', ' ')</_SassFileList>
+      <LibSassBuilderArgs>files $(_SassFileList) --outputstyle $(LibSassOutputStyle) --level $(LibSassOutputLevel)</LibSassBuilderArgs>
+    </PropertyGroup>
+    <Message Text="$(LibSassBuilderArgs)" Importance="$(LibSassMessageLevel)" />
+    <Message Text="Converted SassFile list to argument" Importance="$(LibSassMessageLevel)" />
   </Target>
-  <Target Name="PreBuild" AfterTargets="ToolRestore">
-    <Exec Command="dotnet tool run webcompiler -r themes -o wwwroot/css -z disable -m disable -p disable" StandardOutputImportance="high" />
+
+  <Target Name="MoveCss" AfterTargets="AfterCompile" Condition="'$(TargetFramework)' == 'net6.0'" >
     <ItemGroup>
-      <CssFiles Include="$(MSBuildProjectDirectory)\themes\*.css" />
+        <CssFile Include="$(MSBuildProjectDirectory)/themes/*.css" />
     </ItemGroup>
-    <ItemGroup>
-      <BootstrapFiles Include="$(MSBuildProjectDirectory)\wwwroot\css\bootstrap\**\*.*" />
-    </ItemGroup>
-    <Delete Files="@(CssFiles)" />
-    <Delete Files="@(BootstrapFiles)" />
-    <RemoveDir Directories="$(MSBuildProjectDirectory)\wwwroot\css\bootstrap" />
-    <RemoveSourceMap />
+    <Move SourceFiles="@(CssFile)" DestinationFolder="$(MSBuildProjectDirectory)/wwwroot/css/" />
   </Target>
+
 </Project>

Radzen.Blazor/RadzenAccordion.razor

@@ -10,14 +10,14 @@
 }
 @if (Visible)
 {
-<div @ref="@Element" role="tablist" @attributes="Attributes" class="@GetCssClass()" id="@GetId()">
+<div @ref="@Element" role="tablist" style=@Style @attributes="Attributes" class="@GetCssClass()" id="@GetId()">
     @for (var i = 0; i < items.Count; i++)
     {
         var item = items[i];
         if (!item.Visible)
             continue;
 
-        <div class="rz-accordion-header rz-state-active" @attributes="item.Attributes" style="@item.Style">
+        <div @ref="@item.Element" id="@item.GetItemId()" @attributes="item.Attributes" class="@item.GetItemCssClass()" style="@item.Style">
             <a @onclick="@((args) => SelectItem(item))" href="javascript:void(0)" role="tab" tabindex="0"
                id="@($"rz-accordiontab-{items.IndexOf(item)}")" aria-controls="@($"rz-accordiontab-{items.IndexOf(item)}-content")" aria-expanded="true">
                 @if (IsSelected(i, item))
@@ -34,7 +34,7 @@
                 }
                 @if (!string.IsNullOrEmpty(item.Text))
                 {
-                    <span>@item.Text</span>
+                    <span>@((MarkupString)item.Text)</span>
                 }
             </a>
         </div>
@@ -49,112 +49,4 @@
         }
     }
 </div>
-}
-
-@code {
-    protected override string GetComponentCssClass()
-    {
-        return "rz-accordion";
-    }
-
-    [Parameter]
-    public bool Multiple { get; set; }
-
-    [Parameter]
-    public int SelectedIndex { get; set; } = 0;
-
-    [Parameter]
-    public EventCallback<int> Expand { get; set; }
-
-    [Parameter]
-    public EventCallback<int> Collapse { get; set; }
-
-    [Parameter]
-    public RenderFragment Items { get; set; }
-
-    List<RadzenAccordionItem> items = new List<RadzenAccordionItem>();
-
-    public void AddItem(RadzenAccordionItem item)
-    {
-        if (items.IndexOf(item) == -1)
-        {
-            if (item.Selected)
-            {
-                SelectedIndex = items.Count;
-                if (!Multiple)
-                {
-                    expandedIdexes.Clear();
-                }
-
-                if (!expandedIdexes.Contains(SelectedIndex))
-                {
-                    expandedIdexes.Add(SelectedIndex);
-                }
-            }
-
-            items.Add(item);
-            StateHasChanged();
-        }
-    }
-
-    public void RemoveItem(RadzenAccordionItem item)
-    {
-        if (items.Contains(item))
-        {
-            items.Remove(item);
-            try { InvokeAsync(StateHasChanged); } catch { }
-        }
-    }
-
-    internal void Refresh()
-    {
-        StateHasChanged();
-    }
-
-    protected bool IsSelected(int index, RadzenAccordionItem item)
-    {
-        return expandedIdexes.Contains(index);
-    }
-
-    List<int> expandedIdexes = new List<int>();
-
-    internal async System.Threading.Tasks.Task SelectItem(RadzenAccordionItem item)
-    {
-        await CollapseAll(item);
-
-        var itemIndex = items.IndexOf(item);
-        if (!expandedIdexes.Contains(itemIndex))
-        {
-            expandedIdexes.Add(itemIndex);
-            await Expand.InvokeAsync(itemIndex);
-        }
-        else
-        {
-            expandedIdexes.Remove(itemIndex);
-            await Collapse.InvokeAsync(itemIndex);
-        }
-
-        if (!Multiple)
-        {
-            SelectedIndex = itemIndex;
-        }
-
-        StateHasChanged();
-    }
-
-    async System.Threading.Tasks.Task CollapseAll(RadzenAccordionItem item)
-    {
-        if (!Multiple && items.Count > 1)
-        {
-            foreach (var i in items.Where(i => i != item))
-            {
-                var itemIndex = items.IndexOf(i);
-                if (expandedIdexes.Contains(itemIndex))
-                {
-                    expandedIdexes.Remove(itemIndex);
-                    await Collapse.InvokeAsync(items.IndexOf(i));
-                }
-            }
-        }
-    }
 }

Radzen.Blazor/RadzenAccordion.razor.cs

@@ -0,0 +1,173 @@
+using Microsoft.AspNetCore.Components;
+using System.Collections.Generic;
+using System.Linq;
+
+namespace Radzen.Blazor
+{
+    /// <summary>
+    /// RadzenAccordion component.
+    /// </summary>
+    /// <example>
+    /// <code>
+    /// &lt;RadzenAccordion&gt;
+    ///     &lt;Items&gt;
+    ///         &lt;RadzenAccordionItem Text="Orders" Icon="account_balance_wallet"&gt;
+    ///             Details for Orders
+    ///         &lt;/RadzenAccordionItem&gt;
+    ///         &lt;RadzenAccordionItem Text="Employees" Icon="account_box"&gt;
+    ///             Details for Employees
+    ///         &lt;/RadzenAccordionItem&gt;
+    ///     &lt;/Items&gt;
+    /// &lt;/RadzenAccordion&gt;
+    /// </code>
+    /// </example>
+    public partial class RadzenAccordion : RadzenComponent
+    {
+        /// <inheritdoc />
+        protected override string GetComponentCssClass()
+        {
+            return "rz-accordion";
+        }
+
+        /// <summary>
+        /// Gets or sets a value indicating whether multiple items can be expanded.
+        /// </summary>
+        /// <value><c>true</c> if multiple items can be expanded; otherwise, <c>false</c>.</value>
+        [Parameter]
+        public bool Multiple { get; set; }
+
+        /// <summary>
+        /// Gets or sets the index of the selected item.
+        /// </summary>
+        /// <value>The index of the selected item.</value>
+        [Parameter]
+        public int SelectedIndex { get; set; } = 0;
+
+        /// <summary>
+        /// Gets or sets a callback raised when the item is expanded.
+        /// </summary>
+        /// <value>The expand.</value>
+        [Parameter]
+        public EventCallback<int> Expand { get; set; }
+
+        /// <summary>
+        /// Gets or sets a callback raised when the item is collapsed.
+        /// </summary>
+        /// <value>The collapse.</value>
+        [Parameter]
+        public EventCallback<int> Collapse { get; set; }
+
+        /// <summary>
+        /// Gets or sets the items.
+        /// </summary>
+        /// <value>The items.</value>
+        [Parameter]
+        public RenderFragment Items { get; set; }
+
+        List<RadzenAccordionItem> items = new List<RadzenAccordionItem>();
+
+        /// <summary>
+        /// Adds the item.
+        /// </summary>
+        /// <param name="item">The item.</param>
+        public void AddItem(RadzenAccordionItem item)
+        {
+            if (items.IndexOf(item) == -1)
+            {
+                if (item.Selected)
+                {
+                    SelectedIndex = items.Count;
+                    if (!Multiple)
+                    {
+                        expandedIdexes.Clear();
+                    }
+
+                    if (!expandedIdexes.Contains(SelectedIndex))
+                    {
+                        expandedIdexes.Add(SelectedIndex);
+                    }
+                }
+
+                items.Add(item);
+                StateHasChanged();
+            }
+        }
+
+        /// <summary>
+        /// Removes the item.
+        /// </summary>
+        /// <param name="item">The item.</param>
+        public void RemoveItem(RadzenAccordionItem item)
+        {
+            if (items.Contains(item))
+            {
+                items.Remove(item);
+                if (!disposed)
+                {
+                    try { InvokeAsync(StateHasChanged); } catch { }
+                }
+            }
+        }
+
+        /// <summary>
+        /// Refreshes this instance.
+        /// </summary>
+        internal void Refresh()
+        {
+            StateHasChanged();
+        }
+
+        /// <summary>
+        /// Determines whether the specified index is selected.
+        /// </summary>
+        /// <param name="index">The index.</param>
+        /// <param name="item">The item.</param>
+        /// <returns><c>true</c> if the specified index is selected; otherwise, <c>false</c>.</returns>
+        protected bool IsSelected(int index, RadzenAccordionItem item)
+        {
+            return expandedIdexes.Contains(index);
+        }
+
+        List<int> expandedIdexes = new List<int>();
+
+        internal async System.Threading.Tasks.Task SelectItem(RadzenAccordionItem item)
+        {
+            await CollapseAll(item);
+
+            var itemIndex = items.IndexOf(item);
+            if (!expandedIdexes.Contains(itemIndex))
+            {
+                expandedIdexes.Add(itemIndex);
+                await Expand.InvokeAsync(itemIndex);
+            }
+            else
+            {
+                expandedIdexes.Remove(itemIndex);
+                await Collapse.InvokeAsync(itemIndex);
+            }
+
+            if (!Multiple)
+            {
+                SelectedIndex = itemIndex;
+            }
+
+            StateHasChanged();
+        }
+
+        async System.Threading.Tasks.Task CollapseAll(RadzenAccordionItem item)
+        {
+            if (!Multiple && items.Count > 1)
+            {
+                foreach (var i in items.Where(i => i != item))
+                {
+                    var itemIndex = items.IndexOf(i);
+                    if (expandedIdexes.Contains(itemIndex))
+                    {
+                        expandedIdexes.Remove(itemIndex);
+                        await Collapse.InvokeAsync(items.IndexOf(i));
+                    }
+                }
+            }
+        }
+    }
+}

Radzen.Blazor/RadzenAccordionItem.cs

@@ -0,0 +1,129 @@
+using Microsoft.AspNetCore.Components;
+using System.Threading.Tasks;
+
+namespace Radzen.Blazor
+{
+    /// <summary>
+    /// Class RadzenAccordionItem.
+    /// </summary>
+    public partial class RadzenAccordionItem : RadzenComponent
+    {
+        /// <summary>
+        /// Gets or sets the text.
+        /// </summary>
+        /// <value>The text.</value>
+        [Parameter]
+        public string Text { get; set; }
+
+        /// <summary>
+        /// Gets or sets the icon.
+        /// </summary>
+        /// <value>The icon.</value>
+        [Parameter]
+        public string Icon { get; set; }
+
+        /// <summary>
+        /// Gets or sets a value indicating whether this <see cref="RadzenAccordionItem"/> is selected.
+        /// </summary>
+        /// <value><c>true</c> if selected; otherwise, <c>false</c>.</value>
+        [Parameter]
+        public bool Selected { get; set; }
+
+        /// <summary>
+        /// Gets or sets the child content.
+        /// </summary>
+        /// <value>The child content.</value>
+        [Parameter]
+        public RenderFragment ChildContent { get; set; }
+
+
+        bool _visible = true;
+        /// <summary>
+        /// Gets or sets a value indicating whether this <see cref="RadzenAccordionItem"/> is visible.
+        /// </summary>
+        /// <value><c>true</c> if visible; otherwise, <c>false</c>.</value>
+        [Parameter]
+        public override bool Visible
+        {
+            get
+            {
+                return _visible;
+            }
+            set
+            {
+                if (_visible != value)
+                {
+                    _visible = value;
+                    if (Accordion != null)
+                    {
+                        Accordion.Refresh();
+                    }
+                }
+            }
+        }
+
+        RadzenAccordion _accordion;
+
+        /// <summary>
+        /// Gets or sets the accordion.
+        /// </summary>
+        /// <value>The accordion.</value>
+        [CascadingParameter]
+        public RadzenAccordion Accordion
+        {
+            get
+            {
+                return _accordion;
+            }
+            set
+            {
+                if (_accordion != value)
+                {
+                    _accordion = value;
+                    _accordion.AddItem(this);
+                }
+            }
+        }
+
+        /// <summary>
+        /// Set parameters as an asynchronous operation.
+        /// </summary>
+        /// <param name="parameters">The parameters.</param>
+        /// <returns>A Task representing the asynchronous operation.</returns>
+        public override async Task SetParametersAsync(ParameterView parameters)
+        {
+            if (parameters.DidParameterChange(nameof(Selected), Selected))
+            {
+                Accordion?.SelectItem(this);
+            }
+
+            await base.SetParametersAsync(parameters);
+        }
+
+        /// <summary>
+        /// Disposes this instance.
+        /// </summary>
+        public override void Dispose()
+        {
+            base.Dispose();
+
+            Accordion?.RemoveItem(this);
+        }
+
+        internal string GetItemId()
+        {
+            return GetId();
+        }
+
+        internal string GetItemCssClass()
+        {
+            return GetCssClass();
+        }
+
+        /// <inheritdoc />
+        protected override string GetComponentCssClass()
+        {
+            return "rz-accordion-header";
+        }
+    }
+}

Radzen.Blazor/RadzenAccordionItem.razor

@@ -1,68 +0,0 @@
-@inherits RadzenComponent
-@code {
-    [Parameter]
-    public string Text { get; set; }
-
-    [Parameter]
-    public string Icon { get; set; }
-
-    [Parameter]
-    public bool Selected { get; set; }
-
-    [Parameter]
-    public RenderFragment ChildContent { get; set; }
-
-    bool _visible = true;
-    [Parameter]
-    public override bool Visible
-    {
-        get
-        {
-            return _visible;
-        }
-        set
-        {
-            if (_visible != value)
-            {
-                _visible = value;
-                Accordion.Refresh();
-            }
-        }
-    }
-
-    RadzenAccordion _accordion;
-
-    [CascadingParameter]
-    public RadzenAccordion Accordion
-    {
-        get
-        {
-            return _accordion;
-        }
-        set
-        {
-            if (_accordion != value)
-            {
-                _accordion = value;
-                _accordion.AddItem(this);
-            }
-        }
-    }
-
-    public override async Task SetParametersAsync(ParameterView parameters)
-    {
-        if (parameters.DidParameterChange(nameof(Selected), Selected))
-        {
-            Accordion?.SelectItem(this);
-        }
-
-        await base.SetParametersAsync(parameters);
-    }
-
-    public override void Dispose()
-    {
-        base.Dispose();
-
-        Accordion?.RemoveItem(this);
-    }
-}

Radzen.Blazor/RadzenAlert.razor

@@ -0,0 +1,89 @@
+@inherits RadzenComponentWithChildren
+@if (GetVisible())
+{
+    <div @ref="@Element" style="@Style" @attributes="Attributes" class="@GetCssClass()" id="@GetId()" aria-live="polite">
+        <div class="rz-alert-item">
+            @if (ShowIcon)
+            {
+               <RadzenIcon Icon="@getIcon()" Class="rz-alert-icon" />
+            }
+            <div class="rz-alert-message">
+                @if (!string.IsNullOrEmpty(Title))
+                {
+                <div class="rz-alert-title">@Title</div>
+                }
+                <div class="rz-alert-content">
+                    @if(ChildContent != null)
+                    {
+                        @ChildContent
+                    }
+                    else
+                    {
+                        @Text
+                    }
+                </div>
+            </div>
+        </div>
+        @if (AllowClose)
+        {
+            if (Shade == Shade.Lighter)
+            {
+                if (AlertStyle == AlertStyle.Primary)
+                {
+                    <RadzenButton Click=@Close Icon="close" Variant="Variant.Text" ButtonStyle="ButtonStyle.Primary" Shade="Shade.Dark" Size="@getCloseButtonSize()" />
+                }
+                else if (AlertStyle == AlertStyle.Secondary)
+                {
+                    <RadzenButton Click=@Close Icon="close" Variant="Variant.Text" ButtonStyle="ButtonStyle.Secondary" Shade="Shade.Dark" Size="@getCloseButtonSize()" />
+                }
+                else if (AlertStyle == AlertStyle.Light)
+                {
+                    <RadzenButton Click=@Close Icon="close" Variant="Variant.Text" ButtonStyle="ButtonStyle.Dark" Shade="Shade.Dark" Size="@getCloseButtonSize()" />
+                }
+                else if (AlertStyle == AlertStyle.Base)
+                {
+                    <RadzenButton Click=@Close Icon="close" Variant="Variant.Text" ButtonStyle="ButtonStyle.Dark" Shade="Shade.Dark" Size="@getCloseButtonSize()" />
+                }
+                else if (AlertStyle == AlertStyle.Dark)
+                {
+                    <RadzenButton Click=@Close Icon="close" Variant="Variant.Text" ButtonStyle="ButtonStyle.Light" Shade="Shade.Dark" Size="@getCloseButtonSize()" />
+                }
+                else if (AlertStyle == AlertStyle.Success)
+                {
+                    <RadzenButton Click=@Close Icon="close" Variant="Variant.Text" ButtonStyle="ButtonStyle.Success" Shade="Shade.Dark" Size="@getCloseButtonSize()" />
+                }
+                else if (AlertStyle == AlertStyle.Danger)
+                {
+                    <RadzenButton Click=@Close Icon="close" Variant="Variant.Text" ButtonStyle="ButtonStyle.Danger" Shade="Shade.Dark" Size="@getCloseButtonSize()" />
+                }
+                else if (AlertStyle == AlertStyle.Warning)
+                {
+                    <RadzenButton Click=@Close Icon="close" Variant="Variant.Text" ButtonStyle="ButtonStyle.Warning" Shade="Shade.Dark" Size="@getCloseButtonSize()" />
+                }
+                else if (AlertStyle == AlertStyle.Info)
+                {
+                    <RadzenButton Click=@Close Icon="close" Variant="Variant.Text" ButtonStyle="ButtonStyle.Info" Shade="Shade.Dark" Size="@getCloseButtonSize()" />
+                }
+            }
+            else
+            {
+                if (AlertStyle == AlertStyle.Light)
+                {
+                    <RadzenButton Click=@Close Icon="close" Variant="Variant.Text" ButtonStyle="ButtonStyle.Dark" Size="@getCloseButtonSize()" />
+                }
+                else if (AlertStyle == AlertStyle.Base)
+                {
+                    <RadzenButton Click=@Close Icon="close" Variant="Variant.Text" ButtonStyle="ButtonStyle.Dark" Size="@getCloseButtonSize()" />
+                }
+                else if (AlertStyle == AlertStyle.Dark)
+                {
+                    <RadzenButton Click=@Close Icon="close" Variant="Variant.Text" ButtonStyle="ButtonStyle.Light" Size="@getCloseButtonSize()" />
+                }
+                else
+                {
+                    <RadzenButton Click=@Close Icon="close" Variant="Variant.Text" ButtonStyle="ButtonStyle.Light" Size="@getCloseButtonSize()" />
+                }
+            }
+        }
+    </div>
+}

Radzen.Blazor/RadzenAlert.razor.cs

@@ -0,0 +1,158 @@
+using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Web;
+using System;
+using System.Threading.Tasks;
+
+namespace Radzen.Blazor
+{
+    /// <summary>
+    /// RadzenAlert component.
+    /// </summary>
+    /// <example>
+    /// <code>
+    /// &lt;RadzenAlert&gt;
+    ///     &lt;ChildContent&gt;
+    ///         Content
+    ///     &lt;/ChildContent&gt;
+    /// &lt;/RadzenAlert&gt;
+    /// </code>
+    /// </example>
+    public partial class RadzenAlert : RadzenComponentWithChildren
+    {
+        private string getAlertSize()
+        {
+            return Size == AlertSize.Medium ? "md" : Size == AlertSize.Large ? "lg" : Size == AlertSize.Small ? "sm" : "xs";
+        }
+
+        /// <summary>
+        /// Gets or sets a value indicating whether close is allowed. Set to <c>true</c> by default.
+        /// </summary>
+        /// <value><c>true</c> if close is allowed; otherwise, <c>false</c>.</value>
+        [Parameter]
+        public bool AllowClose { get; set; } = true;
+
+        /// <summary>
+        /// Gets or sets a value indicating whether icon should be shown. Set to <c>true</c> by default.
+        /// </summary>
+        /// <value><c>true</c> if icon is shown; otherwise, <c>false</c>.</value>
+        [Parameter]
+        public bool ShowIcon { get; set; } = true;
+
+        /// <summary>
+        /// Gets or sets the title.
+        /// </summary>
+        /// <value>The title.</value>
+        [Parameter]
+        public string Title { get; set; }
+
+        /// <summary>
+        /// Gets or sets the text of the alert. Overriden by <see cref="ChildContent" />.
+        /// </summary>
+        /// <value>The title.</value>
+        [Parameter]
+        public string Text { get; set; }
+
+        /// <summary>
+        /// Gets or sets the icon.
+        /// </summary>
+        /// <value>The icon.</value>
+        [Parameter]
+        public string Icon { get; set; }
+
+        /// <summary>
+        /// Gets or sets the severity.
+        /// </summary>
+        /// <value>The severity.</value>
+        [Parameter]
+        public AlertStyle AlertStyle { get; set; } = AlertStyle.Base;
+
+        /// <summary>
+        /// Gets or sets the design variant of the alert.
+        /// </summary>
+        /// <value>The variant of the alert.</value>
+        [Parameter]
+        public Variant Variant { get; set; } = Variant.Filled;
+
+        /// <summary>
+        /// Gets or sets the color shade of the alert.
+        /// </summary>
+        /// <value>The color shade of the alert.</value>
+        [Parameter]
+        public Shade Shade { get; set; } = Shade.Default;
+
+        /// <summary>
+        /// Gets or sets the size.
+        /// </summary>
+        /// <value>The size.</value>
+        [Parameter]
+        public AlertSize Size { get; set; } = AlertSize.Medium;
+
+        ButtonSize getCloseButtonSize()
+        {
+            return Size == AlertSize.ExtraSmall ? ButtonSize.ExtraSmall : ButtonSize.Small;
+        }
+
+        bool? visible;
+        bool GetVisible()
+        {
+            return visible ?? Visible;
+        }
+
+        /// <inheritdoc />
+        protected override string GetComponentCssClass()
+        {
+            return $"rz-alert rz-alert-{getAlertSize()} rz-variant-{Enum.GetName(typeof(Variant), Variant).ToLowerInvariant()} rz-{Enum.GetName(typeof(AlertStyle), AlertStyle).ToLowerInvariant()} rz-shade-{Enum.GetName(typeof(Shade), Shade).ToLowerInvariant()}";
+        }
+
+        string getIcon()
+        {
+            if (!string.IsNullOrEmpty(Icon))
+            {
+                return Icon;
+            }
+            else if (AlertStyle == AlertStyle.Primary)
+            {
+                return "lightbulb_outline";
+            }
+            else if (AlertStyle == AlertStyle.Secondary)
+            {
+                return "lightbulb_outline";
+            }
+            else if (AlertStyle == AlertStyle.Light)
+            {
+                return "lightbulb_outline";
+            }
+            else if (AlertStyle == AlertStyle.Base)
+            {
+                return "lightbulb_outline";
+            }
+            else if (AlertStyle == AlertStyle.Dark)
+            {
+                return "lightbulb_outline";
+            }
+            else if (AlertStyle == AlertStyle.Success)
+            {
+                return "check_circle_outline";
+            }
+            else if (AlertStyle == AlertStyle.Danger)
+            {
+                return "error_outline";
+            }
+            else if (AlertStyle == AlertStyle.Warning)
+            {
+                return "warning_amber";
+            }
+            else if (AlertStyle == AlertStyle.Info)
+            {
+                return "info_outline";
+            }
+
+            return "";
+        }
+
+        void Close()
+        {
+            visible = false;
+        }
+    }
+}

Radzen.Blazor/RadzenArcGauge.razor

@@ -3,7 +3,7 @@
 
 @if (Visible)
 {
-    <div @ref="Element" class=@GetCssClass() @attributes=@Attributes style=@Style id="@GetId()">
+    <div @ref="Element" style=@Style @attributes=@Attributes class=@GetCssClass() id="@GetId()">
     @if (Width.HasValue && Height.HasValue)
     {
         <svg style="width: 100%; height: 100%">

Radzen.Blazor/RadzenArcGaugeScale.razor

@@ -39,149 +39,3 @@
 <CascadingValue Value=@this>
     @ChildContent
 </CascadingValue>
-@code {
-    [CascadingParameter]
-    public RadzenArcGauge Gauge { get; set; }
-
-    [Parameter]
-    public string Stroke { get; set; }
-
-    [Parameter]
-    public double StrokeWidth { get; set; } = 1;
-
-    [Parameter]
-    public RenderFragment ChildContent { get; set; }
-
-    [Parameter]
-    public double TickLength { get; set; } = 10;
-
-    [Parameter]
-    public double MinorTickLength { get; set; } = 5;
-
-    [Parameter]
-    public double TickLabelOffset { get; set; } = 25;
-
-    [Parameter]
-    public string FormatString { get; set; }
-
-    [Parameter]
-    public string Fill { get; set; }
-
-    [Parameter]
-    public double Height { get; set; } = 0.2;
-
-    [Parameter]
-    public Func<double, string> Formatter { get; set; } = value => value.ToString();
-
-    [Parameter]
-    public double StartAngle { get; set; } = -90;
-
-    [Parameter]
-    public GaugeTickPosition TickPosition { get; set; } = GaugeTickPosition.None;
-
-    [Parameter]
-    public double EndAngle { get; set; } = 90;
-
-    [Parameter]
-    public double Radius { get; set; } = 1;
-
-    [Parameter]
-    public bool ShowFirstTick { get; set; } = true;
-
-    [Parameter]
-    public bool ShowLastTick { get; set; } = true;
-
-    [Parameter]
-    public bool ShowTickLabels { get; set; } = true;
-
-    [Parameter]
-    public double X { get; set; } = 0.5;
-
-    [Parameter]
-    public double Min { get; set; } = 0;
-
-    [Parameter]
-    public double Max { get; set; } = 100;
-
-    [Parameter]
-    public double Step { get; set; } = 20;
-
-    [Parameter]
-    public double MinorStep { get; set; }
-
-    [Parameter]
-    public double Y { get; set; } = 0.5;
-
-    [Parameter]
-    public double Margin { get; set; } = 16;
-
-    public double CurrentStrokeWidth
-    {
-        get
-        {
-            if (TickPosition == GaugeTickPosition.None)
-            {
-                return 0;
-            }
-
-            return StrokeWidth;
-        }
-    }
-
-    public double CurrentRadius
-    {
-        get
-        {
-            var radius = Math.Min(Gauge.Width.Value, Gauge.Height.Value) / 2 - Margin * 2;
-
-            radius *= Radius;
-
-            if (TickPosition == GaugeTickPosition.Outside)
-            {
-                radius -= TextMeasurer.TextWidth(Max.ToString(), 16);
-            }
-
-            return radius;
-        }
-    }
-
-
-    double CurrentScaleRadius
-    {
-        get
-        {
-            if (TickPosition == GaugeTickPosition.Inside)
-            {
-                return CurrentRadius - CurrentSize;
-            }
-
-            return CurrentRadius;
-        }
-    }
-
-    public double CurrentSize
-    {
-        get
-        {
-            var radius = Math.Min(Gauge.Width.Value, Gauge.Height.Value) / 2 - Margin * 2;
-
-            if (TickPosition == GaugeTickPosition.Outside)
-            {
-                radius -= TextMeasurer.TextWidth(Max.ToString(), 16);
-            }
-
-            return radius * Height;
-        }
-    }
-
-    public Point CurrentCenter
-    {
-        get
-        {
-            var x = X * Gauge.Width;
-            var y = Y * Gauge.Height;
-
-            return new Point { X = x.Value, Y = y.Value };
-        }
-    }
-}

Radzen.Blazor/RadzenArcGaugeScale.razor.cs

@@ -0,0 +1,272 @@
+using Microsoft.AspNetCore.Components;
+using Radzen.Blazor.Rendering;
+using System;
+
+namespace Radzen.Blazor
+{
+    /// <summary>
+    /// RadzenArcGaugeScale component.
+    /// </summary>
+    public partial class RadzenArcGaugeScale: ComponentBase
+    {
+        /// <summary>
+        /// Gets or sets the gauge.
+        /// </summary>
+        /// <value>The gauge.</value>
+        [CascadingParameter]
+        public RadzenArcGauge Gauge { get; set; }
+
+        /// <summary>
+        /// Gets or sets the stroke.
+        /// </summary>
+        /// <value>The stroke.</value>
+        [Parameter]
+        public string Stroke { get; set; }
+
+        /// <summary>
+        /// Gets or sets the width of the stroke.
+        /// </summary>
+        /// <value>The width of the stroke.</value>
+        [Parameter]
+        public double StrokeWidth { get; set; } = 1;
+
+        /// <summary>
+        /// Gets or sets the child content.
+        /// </summary>
+        /// <value>The child content.</value>
+        [Parameter]
+        public RenderFragment ChildContent { get; set; }
+
+        /// <summary>
+        /// Gets or sets the length of the tick.
+        /// </summary>
+        /// <value>The length of the tick.</value>
+        [Parameter]
+        public double TickLength { get; set; } = 10;
+
+        /// <summary>
+        /// Gets or sets the length of the minor tick.
+        /// </summary>
+        /// <value>The length of the minor tick.</value>
+        [Parameter]
+        public double MinorTickLength { get; set; } = 5;
+
+        /// <summary>
+        /// Gets or sets the tick label offset.
+        /// </summary>
+        /// <value>The tick label offset.</value>
+        [Parameter]
+        public double TickLabelOffset { get; set; } = 25;
+
+        /// <summary>
+        /// Gets or sets the format string.
+        /// </summary>
+        /// <value>The format string.</value>
+        [Parameter]
+        public string FormatString { get; set; }
+
+        /// <summary>
+        /// Gets or sets the fill.
+        /// </summary>
+        /// <value>The fill.</value>
+        [Parameter]
+        public string Fill { get; set; }
+
+        /// <summary>
+        /// Gets or sets the height.
+        /// </summary>
+        /// <value>The height.</value>
+        [Parameter]
+        public double Height { get; set; } = 0.2;
+
+        /// <summary>
+        /// Gets or sets the formatter.
+        /// </summary>
+        /// <value>The formatter.</value>
+        [Parameter]
+        public Func<double, string> Formatter { get; set; } = value => value.ToString();
+
+        /// <summary>
+        /// Gets or sets the start angle.
+        /// </summary>
+        /// <value>The start angle.</value>
+        [Parameter]
+        public double StartAngle { get; set; } = -90;
+
+        /// <summary>
+        /// Gets or sets the tick position.
+        /// </summary>
+        /// <value>The tick position.</value>
+        [Parameter]
+        public GaugeTickPosition TickPosition { get; set; } = GaugeTickPosition.None;
+
+        /// <summary>
+        /// Gets or sets the end angle.
+        /// </summary>
+        /// <value>The end angle.</value>
+        [Parameter]
+        public double EndAngle { get; set; } = 90;
+
+        /// <summary>
+        /// Gets or sets the radius.
+        /// </summary>
+        /// <value>The radius.</value>
+        [Parameter]
+        public double Radius { get; set; } = 1;
+
+        /// <summary>
+        /// Gets or sets a value indicating whether first tick is shown.
+        /// </summary>
+        /// <value><c>true</c> if first tick is shown; otherwise, <c>false</c>.</value>
+        [Parameter]
+        public bool ShowFirstTick { get; set; } = true;
+
+        /// <summary>
+        /// Gets or sets a value indicating whether last tick is shown.
+        /// </summary>
+        /// <value><c>true</c> if last tick is shown; otherwise, <c>false</c>.</value>
+        [Parameter]
+        public bool ShowLastTick { get; set; } = true;
+
+        /// <summary>
+        /// Gets or sets a value indicating whether to show tick labels.
+        /// </summary>
+        /// <value><c>true</c> if tick labels are shown; otherwise, <c>false</c>.</value>
+        [Parameter]
+        public bool ShowTickLabels { get; set; } = true;
+
+        /// <summary>
+        /// Gets or sets the x.
+        /// </summary>
+        /// <value>The x.</value>
+        [Parameter]
+        public double X { get; set; } = 0.5;
+
+        /// <summary>
+        /// Determines the minimum value.
+        /// </summary>
+        /// <value>The minimum value.</value>
+        [Parameter]
+        public double Min { get; set; } = 0;
+
+        /// <summary>
+        /// Determines the maximum value.
+        /// </summary>
+        /// <value>The maximum value.</value>
+        [Parameter]
+        public double Max { get; set; } = 100;
+
+        /// <summary>
+        /// Gets or sets the step.
+        /// </summary>
+        /// <value>The step.</value>
+        [Parameter]
+        public double Step { get; set; } = 20;
+
+        /// <summary>
+        /// Gets or sets the minor step.
+        /// </summary>
+        /// <value>The minor step.</value>
+        [Parameter]
+        public double MinorStep { get; set; }
+
+        /// <summary>
+        /// Gets or sets the y.
+        /// </summary>
+        /// <value>The y.</value>
+        [Parameter]
+        public double Y { get; set; } = 0.5;
+
+        /// <summary>
+        /// Gets or sets the margin.
+        /// </summary>
+        /// <value>The margin.</value>
+        [Parameter]
+        public double Margin { get; set; } = 16;
+
+        /// <summary>
+        /// Gets the width of the current stroke.
+        /// </summary>
+        /// <value>The width of the current stroke.</value>
+        public double CurrentStrokeWidth
+        {
+            get
+            {
+                if (TickPosition == GaugeTickPosition.None)
+                {
+                    return 0;
+                }
+
+                return StrokeWidth;
+            }
+        }
+
+        /// <summary>
+        /// Gets the current radius.
+        /// </summary>
+        /// <value>The current radius.</value>
+        public double CurrentRadius
+        {
+            get
+            {
+                var radius = Math.Min(Gauge.Width.Value, Gauge.Height.Value) / 2 - Margin * 2;
+
+                radius *= Radius;
+
+                if (TickPosition == GaugeTickPosition.Outside)
+                {
+                    radius -= TextMeasurer.TextWidth(Max.ToString(), 16);
+                }
+
+                return radius;
+            }
+        }
+
+        double CurrentScaleRadius
+        {
+            get
+            {
+                if (TickPosition == GaugeTickPosition.Inside)
+                {
+                    return CurrentRadius - CurrentSize;
+                }
+
+                return CurrentRadius;
+            }
+        }
+
+        /// <summary>
+        /// Gets the current size.
+        /// </summary>
+        /// <value>The current size.</value>
+        public double CurrentSize
+        {
+            get
+            {
+                var radius = Math.Min(Gauge.Width.Value, Gauge.Height.Value) / 2 - Margin * 2;
+
+                if (TickPosition == GaugeTickPosition.Outside)
+                {
+                    radius -= TextMeasurer.TextWidth(Max.ToString(), 16);
+                }
+
+                return radius * Height;
+            }
+        }
+
+        /// <summary>
+        /// Gets the current center.
+        /// </summary>
+        /// <value>The current center.</value>
+        public Point CurrentCenter
+        {
+            get
+            {
+                var x = X * Gauge.Width;
+                var y = Y * Gauge.Height;
+
+                return new Point { X = x.Value, Y = y.Value };
+            }
+        }
+    }
+}

Radzen.Blazor/RadzenArcGaugeScaleValue.razor

@@ -17,54 +17,3 @@
         Size=@Scale.CurrentSize
     />
 </g>
-@code {
-    [Parameter]
-    public double Value { get; set; }
-
-    [CascadingParameter]
-    public RadzenArcGaugeScale Scale { get; set; }
-
-    [Parameter]
-    public string Stroke { get; set; }
-
-    [Parameter]
-    public double StrokeWidth { get; set; }
-
-    [Parameter]
-    public string Fill { get; set; }
-
-    [Parameter]
-    public bool ShowValue { get; set; } = true;
-
-    [Parameter]
-    public string FormatString { get; set; }
-
-    [Parameter]
-    public RenderFragment<RadzenArcGaugeScaleValue> Template { get; set; }
-
-    [CascadingParameter]
-    public RadzenArcGauge Gauge { get; set; }
-
-    protected override void OnInitialized()
-    {
-        base.OnInitialized();
-
-        Gauge.AddValue(this);
-    }
-    public override async Task SetParametersAsync(ParameterView parameters)
-    {
-        var shouldRefresh = false;
-
-        if (parameters.DidParameterChange(nameof(Value), Value) || parameters.DidParameterChange(nameof(ShowValue), ShowValue))
-        {
-            shouldRefresh = true;
-        }
-
-        await base.SetParametersAsync(parameters);
-
-        if (shouldRefresh)
-        {
-            Gauge.Reload();
-        }
-    }
-}

Radzen.Blazor/RadzenArcGaugeScaleValue.razor.cs

@@ -0,0 +1,99 @@
+using Microsoft.AspNetCore.Components;
+using System.Threading.Tasks;
+
+namespace Radzen.Blazor
+{
+    /// <summary>
+    /// RadzenArcGaugeScaleValue component.
+    /// </summary>
+    public partial class RadzenArcGaugeScaleValue : ComponentBase
+    {
+        /// <summary>
+        /// Gets or sets the value.
+        /// </summary>
+        /// <value>The value.</value>
+        [Parameter]
+        public double Value { get; set; }
+
+        /// <summary>
+        /// Gets or sets the scale.
+        /// </summary>
+        /// <value>The scale.</value>
+        [CascadingParameter]
+        public RadzenArcGaugeScale Scale { get; set; }
+
+        /// <summary>
+        /// Gets or sets the stroke.
+        /// </summary>
+        /// <value>The stroke.</value>
+        [Parameter]
+        public string Stroke { get; set; }
+
+        /// <summary>
+        /// Gets or sets the width of the stroke.
+        /// </summary>
+        /// <value>The width of the stroke.</value>
+        [Parameter]
+        public double StrokeWidth { get; set; }
+
+        /// <summary>
+        /// Gets or sets the fill.
+        /// </summary>
+        /// <value>The fill.</value>
+        [Parameter]
+        public string Fill { get; set; }
+
+        /// <summary>
+        /// Gets or sets a value indicating whether to show value.
+        /// </summary>
+        /// <value><c>true</c> if value is shown; otherwise, <c>false</c>.</value>
+        [Parameter]
+        public bool ShowValue { get; set; } = true;
+
+        /// <summary>
+        /// Gets or sets the format string.
+        /// </summary>
+        /// <value>The format string.</value>
+        [Parameter]
+        public string FormatString { get; set; }
+
+        /// <summary>
+        /// Gets or sets the template.
+        /// </summary>
+        /// <value>The template.</value>
+        [Parameter]
+        public RenderFragment<RadzenArcGaugeScaleValue> Template { get; set; }
+
+        /// <summary>
+        /// Gets or sets the gauge.
+        /// </summary>
+        /// <value>The gauge.</value>
+        [CascadingParameter]
+        public RadzenArcGauge Gauge { get; set; }
+
+        /// <inheritdoc />
+        protected override void OnInitialized()
+        {
+            base.OnInitialized();
+
+            Gauge.AddValue(this);
+        }
+        /// <inheritdoc />
+        public override async Task SetParametersAsync(ParameterView parameters)
+        {
+            var shouldRefresh = false;
+
+            if (parameters.DidParameterChange(nameof(Value), Value) || parameters.DidParameterChange(nameof(ShowValue), ShowValue))
+            {
+                shouldRefresh = true;
+            }
+
+            await base.SetParametersAsync(parameters);
+
+            if (shouldRefresh)
+            {
+                Gauge.Reload();
+            }
+        }
+    }
+}

Radzen.Blazor/RadzenAreaSeries.razor

@@ -6,82 +6,15 @@
   @ChildContent
 </CascadingValue>
 @code {
-  [Parameter]
-  public string Stroke { get; set; }
-
-  [Parameter]
-  public string Fill { get; set; }
-
-  [Parameter]
-  public double StrokeWidth { get; set; } = 2;
-
-  [Parameter]
-  public LineType LineType { get; set; }
-
-  [Parameter]
-  public bool Smooth { get; set; }
-
-  public override string Color
-  {
-    get
-    {
-      return Stroke;
-    }
-  }
-
-  public override bool Contains(double x, double y)
-  {
-      var tolerance = 25;
-      var category = ComposeCategory(Chart.CategoryScale);
-      var value = ComposeValue(Chart.ValueScale);
-
-      var points =  Items.Select(item => new Point { X = category(item), Y = value(item) }).ToArray();
-
-      var valueTicks = Chart.ValueScale.Ticks(Chart.ValueAxis.TickDistance);
-      var axisY = Chart.ValueScale.Scale(Math.Max(0, valueTicks.Start));
-
-      if (points.Any())
-      {
-        for (var i = 0; i < points.Length - 1; i++)
-        {
-            var start = points[i];
-            var end = points[i + 1];
-
-            var polygon = new[] {
-                new Point { X = start.X, Y = start.Y - tolerance },
-                new Point { X = end.X, Y = end.Y - tolerance },
-                new Point { X = end.X, Y = axisY },
-                new Point { X = start.X, Y = axisY },
-            };
-
-            if (InsidePolygon(new Point { X = x, Y = y }, polygon))
-            {
-              return true;
-            }
-        }
-      }
-
-      return false;
-  }
-
   public override RenderFragment Render(ScaleBase categoryScale, ScaleBase valueScale)
   {
     var category = ComposeCategory(categoryScale);
 
     var value = ComposeValue(valueScale);
 
-    IPathGenerator pathGenerator;
-      
-    if (Smooth)
-    {
-      pathGenerator = new SplineGenerator();
-    }
-    else
-    {
-      pathGenerator = new LineGenerator();
-    }
+    var pathGenerator = GetPathGenerator();
 
-    var data = Items.Select(item => 
+    var data = Items.Select(item =>
     {
       var x = category(item);
       var y = value(item);
@@ -93,7 +26,7 @@
     var index = Chart.Series.IndexOf(this);
     var className = $"rz-area-series rz-series-{index}";
 
-    return 
+    return
     @<g class="@className">
       @if (Items.Any())
       {
@@ -110,7 +43,7 @@
         <path @key="@area" style="@style" d="@area" fill="@Fill" stroke="none"></path>
         <Path @key="@line" D="@line" Stroke="@Stroke" StrokeWidth="@StrokeWidth" LineType="@LineType" Style="@style" Fill="none" />
       }
-      <Markers Data="@Items" Category="@category" Value="@value" MarkerType="@MarkerType" Stroke="@Markers.Stroke" Fill="@(Markers.Fill ?? Stroke)" StrokeWidth="@Markers.StrokeWidth" Size="@Markers.Size" />
+      <Markers Series="@this" Data="@Items" Category="@category" Value="@value" MarkerType="@MarkerType" Stroke="@Markers.Stroke" Fill="@(Markers.Fill ?? Stroke)" StrokeWidth="@Markers.StrokeWidth" Size="@Markers.Size" />
     </g>;
   }
 }

Radzen.Blazor/RadzenAreaSeries.razor.cs

@@ -0,0 +1,162 @@
+using Microsoft.AspNetCore.Components;
+using Radzen.Blazor.Rendering;
+using System;
+using System.Collections.Generic;
+using System.Linq;
+
+namespace Radzen.Blazor
+{
+    /// <summary>
+    /// Renders area series in <see cref="RadzenChart" />.
+    /// </summary>
+    public partial class RadzenAreaSeries<TItem> : CartesianSeries<TItem>
+    {
+        /// <summary>
+        /// Specifies the color of the line.
+        /// </summary>
+        /// <value>The stroke.</value>
+        [Parameter]
+        public string Stroke { get; set; }
+
+        /// <summary>
+        /// Specifies the fill (background color) of the area series.
+        /// </summary>
+        /// <value>The fill.</value>
+        [Parameter]
+        public string Fill { get; set; }
+
+        /// <summary>
+        /// Gets or sets the pixel width of the line. Set to <c>2</c> by default.
+        /// </summary>
+        /// <value>The width of the stroke.</value>
+        [Parameter]
+        public double StrokeWidth { get; set; } = 2;
+
+        /// <summary>
+        /// Specifies the line type.
+        /// </summary>
+        [Parameter]
+        public LineType LineType { get; set; }
+
+        /// <summary>
+        /// Specifies whether to render a smooth line. Set to <c>false</c> by default.
+        /// </summary>
+        [Parameter]
+        public bool Smooth
+        {
+            get => Interpolation == Interpolation.Spline;
+            set => Interpolation = value ? Interpolation.Spline : Interpolation.Line;
+        }
+
+        /// <summary>
+        /// Specifies how to render lines between data points. Set to <see cref="Line"/> by default
+        /// </summary>
+        [Parameter]
+        public Interpolation Interpolation { get; set; } = Interpolation.Line;
+
+        /// <inheritdoc />
+        public override string Color
+        {
+            get
+            {
+                return Stroke;
+            }
+        }
+
+        /// <inheritdoc />
+        protected override string TooltipStyle(TItem item)
+        {
+            var style = base.TooltipStyle(item);
+
+            var index = Items.IndexOf(item);
+
+            if (index >= 0)
+            {
+                var color = Fill;
+
+                if (color != null)
+                {
+                    style = $"{style}; border-color: {color};";
+                }
+            }
+
+            return style;
+        }
+
+        /// <inheritdoc />
+        public override bool Contains(double x, double y, double tolerance)
+        {
+            var category = ComposeCategory(Chart.CategoryScale);
+            var value = ComposeValue(Chart.ValueScale);
+
+            var points = Items.Select(item => new Point { X = category(item), Y = value(item) }).ToArray();
+
+            var valueTicks = Chart.ValueScale.Ticks(Chart.ValueAxis.TickDistance);
+            var axisY = Chart.ValueScale.Scale(Math.Max(0, valueTicks.Start));
+
+            if (points.Length > 0)
+            {
+                if (points.Length == 1)
+                {
+                    var point = points[0];
+
+                    var polygon = new[] {
+                        new Point { X = point.X - tolerance, Y = point.Y - tolerance },
+                        new Point { X = point.X - tolerance, Y = point.Y + tolerance },
+                        new Point { X = point.X + tolerance, Y = point.Y + tolerance },
+                        new Point { X = point.X + tolerance, Y = point.Y - tolerance },
+                    };
+
+                    if (InsidePolygon(new Point { X = x, Y = y }, polygon))
+                    {
+                        return true;
+                    }
+                }
+                else
+                {
+                    for (var i = 0; i < points.Length - 1; i++)
+                    {
+                        var start = points[i];
+                        var end = points[i + 1];
+
+                        var polygon = new[]
+                        {
+                            new Point { X = start.X, Y = start.Y - tolerance },
+                            new Point { X = end.X, Y = end.Y - tolerance },
+                            new Point { X = end.X, Y = axisY },
+                            new Point { X = start.X, Y = axisY },
+                        };
+
+                        if (InsidePolygon(new Point { X = x, Y = y }, polygon))
+                        {
+                            return true;
+                        }
+                    }
+                }
+            }
+
+            return false;
+        }
+
+        /// <inheritdoc />
+        public override IEnumerable<ChartDataLabel> GetDataLabels(double offsetX, double offsetY)
+        {
+            return base.GetDataLabels(offsetX, offsetY - 16);
+        }
+
+        private IPathGenerator GetPathGenerator()
+        {
+            switch(Interpolation)
+            {
+                case Interpolation.Line:
+                    return new LineGenerator();
+                case Interpolation.Spline:
+                    return new SplineGenerator();
+                case Interpolation.Step:
+                    return new StepGenerator();
+                default:
+                    throw new NotSupportedException($"Interpolation {Interpolation} is not supported yet.");
+            }
+        }
+    }
+}

Radzen.Blazor/RadzenAutoComplete.razor

@@ -1,4 +1,5 @@
 @using Radzen
+@using Radzen.Blazor.Rendering
 @using System.Collections
 @using System.Linq.Dynamic.Core
 @using Microsoft.AspNetCore.Components.Forms
@@ -9,20 +10,39 @@
 @if (Visible)
 {
     <div @ref="@Element" style="@($"{Style};display:inline-block;")" @attributes="Attributes" class="@GetCssClass()" id="@GetId()">
-        <span class="rz-autocomplete" style="width:100%">
+        @if (Multiline)
+        {
+            <textarea @ref="@search" @onkeydown="@OnFilterKeyPress" value="@Value" disabled="@Disabled"
+                oninput="@OpenScript()" tabindex="@(Disabled ? "-1" : $"{TabIndex}")"  @onchange="@OnChange"
+                aria-autocomplete="list" aria-haspopup="true" autocomplete="off" role="combobox"
+                class="@InputClassList" onblur="Radzen.activeElement = null"
+                id="@Name" aria-expanded="true" placeholder="@Placeholder" />
+        }
+        else
+        {
             <input @ref="@search" @onkeydown="@OnFilterKeyPress" value="@Value" disabled="@Disabled"
-                   onfocus="@OpenScript()" onkeypress="@OpenScript()" tabindex="@TabIndex"  @onchange="@OnChange"
-                   aria-autocomplete="list" aria-haspopup="true" autocomplete="off" role="combobox"
-                   class="@getCssClasses()"
-                   type="text" id="@Name" aria-expanded="true" placeholder="@Placeholder" />
-        </span><div id="@PopupID" class="rz-autocomplete-panel" style="display:none; transform: none; box-sizing: border-box; max-height: 200px;">
+                oninput="@OpenScript()" tabindex="@(Disabled ? "-1" : $"{TabIndex}")" @onchange="@OnChange"
+                aria-autocomplete="list" aria-haspopup="true" autocomplete="off" role="combobox"
+                class="@InputClassList" onblur="Radzen.activeElement = null"
+                type="text" id="@Name" aria-expanded="true" placeholder="@Placeholder" />
+        }
+        <div id="@PopupID" class="rz-autocomplete-panel" style="@PopupStyle">
             <ul @ref="@list" class="rz-autocomplete-items rz-autocomplete-list" role="listbox">
                 @if (!string.IsNullOrEmpty(searchText) || !string.IsNullOrEmpty(customSearchText))
                 {
                     @foreach (var item in LoadData.HasDelegate ? Data != null ? Data : Enumerable.Empty<object>() : (View != null ? View : Enumerable.Empty<object>()))
                     {
-                        <li role="option" class="rz-autocomplete-list-item" @onclick="@(() => OnSelectItem(item))">
-                            <span>@PropertyAccess.GetItemOrValueFromProperty(item, TextProperty)</span>
+                        <li role="option" class="rz-autocomplete-list-item" @onclick="@(() => OnSelectItem(item))" onmousedown="Radzen.activeElement = null">
+                            <span>
+                                @if (Template != null)
+                                {
+                                    @Template(item)
+                                }
+                                else
+                                {
+                                    @PropertyAccess.GetItemOrValueFromProperty(item, TextProperty)
+                                }
+                            </span>
                         </li>
                     }
                 }
@@ -30,194 +50,3 @@
         </div>
     </div>
 }
-@code {
-    [Parameter]
-    public int MinLength { get; set; } = 1;
-
-    [Parameter]
-    public int FilterDelay { get; set; } = 500;
-
-    protected ElementReference search;
-    protected ElementReference list;
-    string customSearchText;
-
-    int selectedIndex = -1;
-
-    protected async Task OnFilterKeyPress(KeyboardEventArgs args)
-    {
-        var items = (LoadData.HasDelegate ? Data != null ? Data : Enumerable.Empty<object>() : (View != null ? View : Enumerable.Empty<object>())).OfType<object>();
-
-        var key = args.Code != null ? args.Code : args.Key;
-
-        if (key == "ArrowDown" || key == "ArrowUp")
-        {
-            try
-            {
-                selectedIndex = await JSRuntime.InvokeAsync<int>("Radzen.focusListItem", search, list, key == "ArrowDown", selectedIndex);
-            }
-            catch (Exception)
-            {
-                //
-            }
-        }
-        else if (key == "Enter")
-        {
-            if (selectedIndex >= 0 && selectedIndex <= items.Count() - 1)
-            {
-                await OnSelectItem(items.ElementAt(selectedIndex));
-                selectedIndex = -1;
-            }
-        }
-        else if (key == "Escape")
-        {
-            await JSRuntime.InvokeVoidAsync("Radzen.closePopup", PopupID);
-        }
-        else if(key != "Tab")
-        {
-            selectedIndex = -1;
-
-            Debounce(DebounceFilter, FilterDelay);
-        }
-    }
-
-    async Task DebounceFilter()
-    {
-        var value = await JSRuntime.InvokeAsync<string>("Radzen.getInputValue", search);
-
-        if (value.Length < MinLength)
-            return;
-
-        if (!LoadData.HasDelegate)
-        {
-            searchText = value;
-            await InvokeAsync(() => { StateHasChanged(); });
-        }
-        else
-        {
-            customSearchText = value;
-            await InvokeAsync(() => { LoadData.InvokeAsync(new Radzen.LoadDataArgs() { Filter = customSearchText }); });
-        }
-    }
-
-    private string PopupID
-    {
-        get
-        {
-            return $"popup{UniqueID}";
-        }
-    }
-
-    private async Task OnSelectItem(object item)
-    {
-        await JSRuntime.InvokeVoidAsync("Radzen.closePopup", PopupID);
-
-        await SelectItem(item);
-    }
-
-    protected override IQueryable Query
-    {
-        get
-        {
-            return Data != null && !string.IsNullOrEmpty(searchText) ? Data.AsQueryable() : null;
-        }
-    }
-
-    protected override IEnumerable View
-    {
-        get
-        {
-            if (Query != null)
-            {
-                string filterCaseSensitivityOperator = FilterCaseSensitivity == FilterCaseSensitivity.CaseInsensitive ? ".ToLower()" : "";
-
-                return Query.Where($"{TextProperty}{filterCaseSensitivityOperator}.{Enum.GetName(typeof(StringFilterOperator), FilterOperator)}(@0)",
-                    FilterCaseSensitivity == FilterCaseSensitivity.CaseInsensitive ? searchText.ToLower() : searchText);
-            }
-
-            return null;
-        }
-    }
-
-    protected async System.Threading.Tasks.Task OnChange(ChangeEventArgs args)
-    {
-        Value = args.Value;
-
-        await ValueChanged.InvokeAsync($"{Value}");
-        if (FieldIdentifier.FieldName != null) { EditContext?.NotifyFieldChanged(FieldIdentifier); }
-        await Change.InvokeAsync(Value);
-    }
-
-    async System.Threading.Tasks.Task SelectItem(object item)
-    {
-        if (!string.IsNullOrEmpty(TextProperty))
-        {
-            Value = PropertyAccess.GetItemOrValueFromProperty(item, TextProperty);
-        }
-        else
-        {
-            Value = item;
-        }
-
-        await ValueChanged.InvokeAsync($"{Value}");
-        if (FieldIdentifier.FieldName != null) { EditContext?.NotifyFieldChanged(FieldIdentifier); }
-        await Change.InvokeAsync(Value);
-
-        StateHasChanged();
-    }
-
-    private string getCssClasses()
-    {
-        return $"rz-inputtext rz-autocomplete-input{(Disabled ? " rz-state-disabled" : "")}";
-    }
-
-    private string OpenScript()
-    {
-        if (Disabled)
-        {
-            return string.Empty;
-        }
-
-        return $"Radzen.openPopup(this.parentNode, '{PopupID}', true)";
-    }
-
-    protected override string GetComponentCssClass()
-    {
-        var fieldCssClass = FieldIdentifier.FieldName != null ? EditContext?.FieldCssClass(FieldIdentifier) : "";
-
-        return $"{base.GetComponentCssClass()} {fieldCssClass}";
-    }
-
-    public override void Dispose()
-    {
-        base.Dispose();
-
-        JSRuntime.InvokeVoidAsync("Radzen.destroyPopup", PopupID);
-    }
-
-    private bool firstRender = true;
-
-    protected override Task OnAfterRenderAsync(bool firstRender)
-    {
-        this.firstRender = firstRender;
-
-        return base.OnAfterRenderAsync(firstRender);
-    }
-
-    public override async Task SetParametersAsync(ParameterView parameters)
-    {
-        var shouldClose = false;
-
-        if (parameters.DidParameterChange(nameof(Visible), Visible))
-        {
-            var visible = parameters.GetValueOrDefault<bool>(nameof(Visible));
-            shouldClose = !visible;
-        }
-
-        await base.SetParametersAsync(parameters);
-
-        if (shouldClose && !firstRender)
-        {
-            await JSRuntime.InvokeVoidAsync("Radzen.destroyPopup", PopupID);
-        }
-    }
-}

Radzen.Blazor/RadzenAutoComplete.razor.cs

@@ -0,0 +1,276 @@
+using Radzen;
+using Radzen.Blazor.Rendering;
+using System.Collections;
+using System.Linq.Dynamic.Core;
+using Microsoft.AspNetCore.Components.Forms;
+using Microsoft.JSInterop;
+using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Web;
+using System.Linq;
+using System;
+using System.Threading.Tasks;
+
+namespace Radzen.Blazor
+{
+    /// <summary>
+    /// RadzenAutoComplete component.
+    /// </summary>
+    /// <example>
+    /// <code>
+    /// &lt;RadzenAutoComplete Data=@customers TextProperty="CompanyName" Change=@(args => Console.WriteLine($"Selected text: {args}")) /&gt;
+    /// </code>
+    /// </example>
+    public partial class RadzenAutoComplete : DataBoundFormComponent<string>
+    {
+        /// <summary>
+        /// Gets or sets a value indicating whether this <see cref="RadzenAutoComplete"/> is multiline.
+        /// </summary>
+        /// <value><c>true</c> if multiline; otherwise, <c>false</c>.</value>
+        [Parameter]
+        public bool Multiline { get; set; }
+
+        /// <summary>
+        /// Gets or sets the Popup height.
+        /// </summary>
+        /// <value>The number Popup height.</value>
+        [Parameter]
+        public string PopupStyle { get; set; } = "display:none; transform: none; box-sizing: border-box; max-height: 200px;";
+
+        /// <summary>
+        /// Gets or sets the template.
+        /// </summary>
+        /// <value>The template.</value>
+        [Parameter]
+        public RenderFragment<dynamic> Template { get; set; }
+
+        /// <summary>
+        /// Gets or sets the minimum length.
+        /// </summary>
+        /// <value>The minimum length.</value>
+        [Parameter]
+        public int MinLength { get; set; } = 1;
+
+        /// <summary>
+        /// Gets or sets the filter delay.
+        /// </summary>
+        /// <value>The filter delay.</value>
+        [Parameter]
+        public int FilterDelay { get; set; } = 500;
+
+        /// <summary>
+        /// Gets search input reference.
+        /// </summary>
+        protected ElementReference search;
+
+        /// <summary>
+        /// Gets list element reference.
+        /// </summary>
+        protected ElementReference list;
+
+        string customSearchText;
+        int selectedIndex = -1;
+
+        /// <summary>
+        /// Handles the <see cref="E:FilterKeyPress" /> event.
+        /// </summary>
+        /// <param name="args">The <see cref="KeyboardEventArgs"/> instance containing the event data.</param>
+        protected async Task OnFilterKeyPress(KeyboardEventArgs args)
+        {
+            var items = (LoadData.HasDelegate ? Data != null ? Data : Enumerable.Empty<object>() : (View != null ? View : Enumerable.Empty<object>())).OfType<object>();
+
+            var key = args.Code != null ? args.Code : args.Key;
+
+            if (key == "ArrowDown" || key == "ArrowUp")
+            {
+                try
+                {
+                    selectedIndex = await JSRuntime.InvokeAsync<int>("Radzen.focusListItem", search, list, key == "ArrowDown", selectedIndex);
+                }
+                catch (Exception)
+                {
+                    //
+                }
+            }
+            else if (key == "Enter")
+            {
+                if (selectedIndex >= 0 && selectedIndex <= items.Count() - 1)
+                {
+                    await OnSelectItem(items.ElementAt(selectedIndex));
+                    selectedIndex = -1;
+                }
+            }
+            else if (key == "Escape" || key == "Tab")
+            {
+                await JSRuntime.InvokeVoidAsync("Radzen.closePopup", PopupID);
+            }
+            else
+            {
+                selectedIndex = -1;
+
+                Debounce(DebounceFilter, FilterDelay);
+            }
+        }
+
+        async Task DebounceFilter()
+        {
+            var value = await JSRuntime.InvokeAsync<string>("Radzen.getInputValue", search);
+
+            if (value.Length < MinLength)
+                return;
+
+            if (!LoadData.HasDelegate)
+            {
+                searchText = value;
+                await InvokeAsync(() => { StateHasChanged(); });
+            }
+            else
+            {
+                customSearchText = value;
+                await InvokeAsync(() => { LoadData.InvokeAsync(new Radzen.LoadDataArgs() { Filter = customSearchText }); });
+            }
+        }
+
+        private string PopupID
+        {
+            get
+            {
+                return $"popup{UniqueID}";
+            }
+        }
+
+        private async Task OnSelectItem(object item)
+        {
+            await JSRuntime.InvokeVoidAsync("Radzen.closePopup", PopupID);
+
+            await SelectItem(item);
+        }
+
+        /// <summary>
+        /// Gets the IQueryable.
+        /// </summary>
+        /// <value>The IQueryable.</value>
+        protected override IQueryable Query
+        {
+            get
+            {
+                return Data != null && !string.IsNullOrEmpty(searchText) ? Data.AsQueryable() : null;
+            }
+        }
+
+        /// <summary>
+        /// Gets the view - the Query with filtering applied.
+        /// </summary>
+        /// <value>The view.</value>
+        protected override IEnumerable View
+        {
+            get
+            {
+                if (Query != null)
+                {
+                    string filterCaseSensitivityOperator = FilterCaseSensitivity == FilterCaseSensitivity.CaseInsensitive ? ".ToLower()" : "";
+
+                    string textProperty = string.IsNullOrEmpty(TextProperty) ? string.Empty : $".{TextProperty}";
+
+                    return Query.Where($"o=>o{textProperty}{filterCaseSensitivityOperator}.{Enum.GetName(typeof(StringFilterOperator), FilterOperator)}(@0)",
+                        FilterCaseSensitivity == FilterCaseSensitivity.CaseInsensitive ? searchText.ToLower() : searchText);
+                }
+
+                return null;
+            }
+        }
+
+        /// <summary>
+        /// Handles the <see cref="E:Change" /> event.
+        /// </summary>
+        /// <param name="args">The <see cref="ChangeEventArgs"/> instance containing the event data.</param>
+        protected async System.Threading.Tasks.Task OnChange(ChangeEventArgs args)
+        {
+            Value = args.Value;
+
+            await ValueChanged.InvokeAsync($"{Value}");
+            if (FieldIdentifier.FieldName != null) { EditContext?.NotifyFieldChanged(FieldIdentifier); }
+            await Change.InvokeAsync(Value);
+        }
+
+        async System.Threading.Tasks.Task SelectItem(object item)
+        {
+            if (!string.IsNullOrEmpty(TextProperty))
+            {
+                Value = PropertyAccess.GetItemOrValueFromProperty(item, TextProperty);
+            }
+            else
+            {
+                Value = item;
+            }
+
+            await ValueChanged.InvokeAsync($"{Value}");
+            if (FieldIdentifier.FieldName != null) { EditContext?.NotifyFieldChanged(FieldIdentifier); }
+            await Change.InvokeAsync(Value);
+
+            StateHasChanged();
+        }
+
+        ClassList InputClassList => ClassList.Create("rz-inputtext rz-autocomplete-input")
+                                             .AddDisabled(Disabled);
+
+        private string OpenScript()
+        {
+            if (Disabled)
+            {
+                return string.Empty;
+            }
+
+            return $"Radzen.openPopup(this.parentNode, '{PopupID}', true)";
+        }
+
+        /// <inheritdoc />
+        protected override string GetComponentCssClass()
+        {
+            return GetClassList("rz-autocomplete").ToString();
+        }
+
+        /// <inheritdoc />
+        public override void Dispose()
+        {
+            base.Dispose();
+
+            if (IsJSRuntimeAvailable)
+            {
+                JSRuntime.InvokeVoidAsync("Radzen.destroyPopup", PopupID);
+            }
+        }
+
+        private bool firstRender = true;
+
+        /// <summary>
+        /// Called on after render asynchronous.
+        /// </summary>
+        /// <param name="firstRender">if set to <c>true</c> is first render.</param>
+        /// <returns>Task.</returns>
+        protected override Task OnAfterRenderAsync(bool firstRender)
+        {
+            this.firstRender = firstRender;
+
+            return base.OnAfterRenderAsync(firstRender);
+        }
+
+        /// <inheritdoc />
+        public override async Task SetParametersAsync(ParameterView parameters)
+        {
+            var shouldClose = false;
+
+            if (parameters.DidParameterChange(nameof(Visible), Visible))
+            {
+                var visible = parameters.GetValueOrDefault<bool>(nameof(Visible));
+                shouldClose = !visible;
+            }
+
+            await base.SetParametersAsync(parameters);
+
+            if (shouldClose && !firstRender)
+            {
+                await JSRuntime.InvokeVoidAsync("Radzen.destroyPopup", PopupID);
+            }
+        }
+    }
+}

Radzen.Blazor/RadzenAxisTitle.cs

@@ -0,0 +1,44 @@
+using Microsoft.AspNetCore.Components;
+
+namespace Radzen.Blazor
+{
+    /// <summary>
+    /// Represents the title configuration of a <see cref="AxisBase" />.
+    /// </summary>
+    public class RadzenAxisTitle : RadzenChartComponentBase
+    {
+        /// <summary>
+        /// Gets or sets the text displayed by the title.
+        /// </summary>
+        /// <value>The text.</value>
+        [Parameter]
+        public string Text { get; set; }
+
+        /// <summary>
+        /// Sets the axis with this configuration applies to.
+        /// </summary>
+        /// <value>The axis.</value>
+        [CascadingParameter]
+        public AxisBase Axis
+        {
+            set
+            {
+                value.Title = this;
+            }
+        }
+
+        internal double Size
+        {
+            get
+            {
+                return 16 * 0.875;
+            }
+        }
+
+        /// <inheritdoc />
+        protected override bool ShouldRefreshChart(ParameterView parameters)
+        {
+            return DidParameterChange(parameters, nameof(Text), Text);
+        }
+    }
+}

Radzen.Blazor/RadzenAxisTitle.razor

@@ -1,28 +0,0 @@
-@inherits RadzenChartComponentBase
-
-@code {
-    [Parameter]
-    public string Text { get; set; }
-
-    [CascadingParameter]
-    public AxisBase Axis
-    {
-        set
-        {
-            value.Title = this;
-        }
-    }
-
-    internal double Size
-    {
-        get
-        {
-            return 16 * 0.875;
-        }
-    }
-
-    protected override bool ShouldRefreshChart(ParameterView parameters)
-    {
-        return DidParameterChange(parameters, nameof(Text), Text);
-    }
-}

Radzen.Blazor/RadzenBadge.razor

@@ -0,0 +1,14 @@
+@inherits RadzenComponent
+@if (Visible)
+{
+<span @ref="@Element" style="@Style" @attributes="Attributes" class="@GetCssClass()" id="@GetId()">
+    @if (ChildContent != null)
+    {
+        @ChildContent
+    }
+    else
+    {
+        @Text
+    }
+</span>
+}

Radzen.Blazor/RadzenBadge.razor.cs

@@ -0,0 +1,76 @@
+using Microsoft.AspNetCore.Components;
+using System.Collections.Generic;
+
+namespace Radzen.Blazor
+{
+    /// <summary>
+    /// RadzenBadge component.
+    /// </summary>
+    /// <example>
+    /// <code>
+    /// &lt;RadzenBadge BadgeStyle="BadgeStyle.Primary" Text="Primary" /&gt;
+    /// </code>
+    /// </example>
+    public partial class RadzenBadge : RadzenComponent
+    {
+        /// <inheritdoc />
+        protected override string GetComponentCssClass()
+        {
+            var classList = new List<string>();
+
+            classList.Add("rz-badge");
+            classList.Add($"rz-badge-{BadgeStyle.ToString().ToLowerInvariant()}");
+            classList.Add($"rz-variant-{Variant.ToString().ToLowerInvariant()}");
+            classList.Add($"rz-shade-{Shade.ToString().ToLowerInvariant()}");
+
+            if (IsPill)
+            {
+                classList.Add("rz-badge-pill");
+            }
+
+            return string.Join(" ", classList);
+        }
+
+        /// <summary>
+        /// Gets or sets the child content.
+        /// </summary>
+        /// <value>The child content.</value>
+        [Parameter]
+        public RenderFragment ChildContent { get; set; }
+
+        /// <summary>
+        /// Gets or sets the text.
+        /// </summary>
+        /// <value>The text.</value>
+        [Parameter]
+        public string Text { get; set; }
+
+        /// <summary>
+        /// Gets or sets the badge style.
+        /// </summary>
+        /// <value>The badge style.</value>
+        [Parameter]
+        public BadgeStyle BadgeStyle { get; set; }
+
+        /// <summary>
+        /// Gets or sets the badge variant.
+        /// </summary>
+        /// <value>The badge variant.</value>
+        [Parameter]
+        public Variant Variant { get; set; } = Variant.Filled;
+
+         /// <summary>
+        /// Gets or sets the badge shade color.
+        /// </summary>
+        /// <value>The badge shade color.</value>
+        [Parameter]
+        public Shade Shade { get; set; } = Shade.Default;
+
+        /// <summary>
+        /// Gets or sets a value indicating whether this instance is pill.
+        /// </summary>
+        /// <value><c>true</c> if this instance is pill; otherwise, <c>false</c>.</value>
+        [Parameter]
+        public bool IsPill { get; set; }
+    }
+}

Radzen.Blazor/RadzenBarOptions.cs

@@ -0,0 +1,45 @@
+using Microsoft.AspNetCore.Components;
+
+namespace Radzen.Blazor
+{
+    /// <summary>
+    /// Common configuration of <see cref="RadzenBarSeries{TItem}" />.
+    /// </summary>
+    public partial class RadzenBarOptions : RadzenChartComponentBase
+    {
+        /// <summary>
+        /// Gets or sets the border radius of the bars. 
+        /// </summary>
+        /// <value>The radius. Values greater than <c>0</c> make rounded corners.</value>
+        [Parameter]
+        public double Radius { get; set; }
+
+        /// <summary>
+        /// Gets or sets the margin between bars.
+        /// </summary>
+        /// <value>The margin. By default set to <c>10</c></value>
+        [Parameter]
+        public double Margin { get; set; } = 10;
+
+        /// <summary>
+        /// Gets or sets the height of all bars in pixels. By default it is automatically calculated depending on the chart height.
+        /// </summary>
+        /// <value>The pixel height of the bar. By default set to <c>null</c></value>
+        [Parameter]
+        public double? Height { get; set;}
+
+        /// <inheritdoc />
+        protected override void Initialize()
+        {
+            Chart.BarOptions = this;
+        }
+
+        /// <inheritdoc />
+        protected override bool ShouldRefreshChart(ParameterView parameters)
+        {
+            return DidParameterChange(parameters, nameof(Radius), Radius) || 
+                   DidParameterChange(parameters, nameof(Height), Height) ||
+                   DidParameterChange(parameters, nameof(Margin), Margin);
+        }
+    }
+}

Radzen.Blazor/RadzenBarOptions.razor

@@ -1,18 +0,0 @@
-@inherits RadzenChartComponentBase
-@code {
-    [Parameter]
-    public double Radius { get; set; }
-
-    [Parameter]
-    public double Margin { get; set; } = 10;
-
-    protected override void Initialize()
-    {
-        Chart.BarOptions = this;
-    }
-
-    protected override bool ShouldRefreshChart(ParameterView parameters)
-    {
-        return DidParameterChange(parameters, nameof(Radius), Radius) || DidParameterChange(parameters, nameof(Margin), Margin);
-    }
-}

Radzen.Blazor/RadzenBarSeries.razor

@@ -10,136 +10,6 @@
 </CascadingValue>
 
 @code {
-   [Parameter]
-   public string Fill { get; set; }
-
-   [Parameter]
-   public string Stroke { get; set; }
-
-   [Parameter]
-   public double StrokeWidth { get; set; }
-
-   [Parameter]
-   public LineType LineType { get; set; }
-
-   public override string Color
-   {
-       get
-       {
-           return Fill;
-       }
-   }
-
-    public override ScaleBase TransformCategoryScale(ScaleBase scale)
-    {
-        return base.TransformValueScale(scale);
-    }
-
-    public override ScaleBase TransformValueScale(ScaleBase scale)
-    {
-        return base.TransformCategoryScale(scale);
-    }
-
-   private IList<IChartSeries> BarSeries
-   {
-        get
-        {
-            return Chart.Series.Where(series => series is IChartBarSeries).Cast<IChartSeries>().ToList();
-        }
-   }
-
-   private IList<IChartSeries> VisibleBarSeries
-   {
-       get
-       {
-           return BarSeries.Where(series => series.Visible).ToList();
-       }
-   }
-
-   private double BandHeight
-   {
-       get
-       {
-            var availableHeight = Chart.ValueScale.OutputSize; // - (Chart.ValueAxis.Padding * 2);
-            var bands = VisibleBarSeries.Cast<IChartBarSeries>().Max(series => series.Count) + 2;
-            return availableHeight / bands;
-       }
-   }
-
-   int IChartBarSeries.Count
-   {
-       get
-       {
-           return Items.Count;
-       }
-   }
-
-   public override bool Contains(double x, double y)
-   {
-       return DataAt(x, y) != null;
-   }
-
-   protected override double TooltipX(TItem item)
-   {
-        var value = Chart.CategoryScale.Compose(Value);
-        var x = value(item);
-
-        return x;
-   }        
-
-   protected override string TooltipValue(TItem item)
-   {
-       return Chart.ValueAxis.Format(Chart.CategoryScale, Chart.CategoryScale.Value(Value(item)));
-   }
-    protected override string TooltipTitle(TItem item)
-    {
-        var category = Category(Chart.ValueScale);
-        return Chart.CategoryAxis.Format(Chart.ValueScale, Chart.ValueScale.Value(category(item)));
-    }
-
-   public override object DataAt(double x, double y)
-   {
-        var value = ComposeValue(Chart.CategoryScale);
-        var category = ComposeCategory(Chart.ValueScale);
-        var ticks = Chart.CategoryScale.Ticks(Chart.ValueAxis.TickDistance);
-        var x0 = Chart.CategoryScale.Scale(Math.Max(0, ticks.Start));
-
-        var barSeries = VisibleBarSeries;
-        var index = barSeries.IndexOf(this);
-        var padding = Chart.BarOptions.Margin;
-        var bandHeight = BandHeight;
-        var height = bandHeight / barSeries.Count() - padding + padding / barSeries.Count();
-
-        foreach(var data in Items)
-        {
-            var startY = category(data) - bandHeight / 2 + index * height + index * padding;
-            var endY = startY + height;
-            var dataX = value(data);
-            var startX = Math.Min(dataX, x0);
-            var endX = Math.Max(dataX, x0);
-
-            if (startX <= x && x <= endX && startY <= y && y <= endY)
-            {
-                return data;
-            }
-        }
-
-        return null;
-    }
-
-    protected override double TooltipY(TItem item)
-    {
-       var category = ComposeCategory(Chart.ValueScale);
-       var barSeries = VisibleBarSeries;
-       var index = barSeries.IndexOf(this);
-       var padding = Chart.BarOptions.Margin;
-       var bandHeight = BandHeight;
-       var height = bandHeight / barSeries.Count() - padding + padding / barSeries.Count();
-       var y = category(item) - bandHeight / 2 + index * height + index * padding;
-
-       return y + height / 2;
-    }
-
    public override RenderFragment Render(ScaleBase categoryScale, ScaleBase valueScale)
    {
         var value = ComposeValue(categoryScale);
@@ -177,8 +47,10 @@
                 {
                     path = $"M {x0.ToInvariantString()} {y.ToInvariantString()} L {(x+radius).ToInvariantString()} {y.ToInvariantString()} A {r} {r} 0 0 0 {x.ToInvariantString()} {(y+radius).ToInvariantString()} L {x.ToInvariantString()} {(y+height-radius).ToInvariantString()} A {r} {r} 0 0 0 {(x+radius).ToInvariantString()} {(y + height).ToInvariantString()} L {x0.ToInvariantString()} {(y+height).ToInvariantString()} Z";
                 }
+                var fill = PickColor(Items.IndexOf(data), Fills, Fill);
+                var stroke = PickColor(Items.IndexOf(data), Strokes, Stroke);
 
-                <Path @key="@path" D="@path" Stroke="@Stroke" StrokeWidth="@StrokeWidth" Fill="@Fill" LineType="@LineType" Style="@style" />
+                <Path @key="@path" D="@path" Stroke="@stroke" StrokeWidth="@StrokeWidth" Fill="@fill" LineType="@LineType" Style="@style" />
             }
         </g>;
     }

Radzen.Blazor/RadzenBarSeries.razor.cs

@@ -0,0 +1,238 @@
+using Microsoft.AspNetCore.Components;
+using Radzen.Blazor.Rendering;
+using System;
+using System.Collections.Generic;
+using System.Linq;
+
+namespace Radzen.Blazor
+{
+    /// <summary>
+    /// Renders bar series in <see cref="RadzenChart" />.
+    /// </summary>
+    /// <typeparam name="TItem">The type of the series data item.</typeparam>
+    public partial class RadzenBarSeries<TItem> : CartesianSeries<TItem>, IChartBarSeries
+    {
+        /// <summary>
+        /// Specifies the fill (background color) of the bar series.
+        /// </summary>
+        /// <value>The fill.</value>
+        [Parameter]
+        public string Fill { get; set; }
+
+        /// <summary>
+        /// Specifies a list of colors that will be used to set the individual bar backgrounds.
+        /// </summary>
+        /// <value>The fills.</value>
+        [Parameter]
+        public IEnumerable<string> Fills { get; set; }
+
+        /// <summary>
+        /// Specifies the stroke (border color) of the bar series.
+        /// </summary>
+        /// <value>The stroke.</value>
+        [Parameter]
+        public string Stroke { get; set; }
+
+        /// <summary>
+        /// Specifies a list of colors that will be used to set the individual bar borders.
+        /// </summary>
+        /// <value>The strokes.</value>
+        [Parameter]
+        public IEnumerable<string> Strokes { get; set; }
+
+        /// <summary>
+        /// Gets or sets the width of the stroke (border).
+        /// </summary>
+        /// <value>The width of the stroke.</value>
+        [Parameter]
+        public double StrokeWidth { get; set; }
+
+        /// <summary>
+        /// Gets or sets the type of the line used to render the bar border.
+        /// </summary>
+        /// <value>The type of the line.</value>
+        [Parameter]
+        public LineType LineType { get; set; }
+
+        /// <inheritdoc />
+        public override string Color
+        {
+            get
+            {
+                return Fill;
+            }
+        }
+
+        /// <inheritdoc />
+        public override ScaleBase TransformCategoryScale(ScaleBase scale)
+        {
+            return base.TransformValueScale(scale);
+        }
+
+        /// <inheritdoc />
+        public override ScaleBase TransformValueScale(ScaleBase scale)
+        {
+            return base.TransformCategoryScale(scale);
+        }
+
+        /// <inheritdoc />
+        protected override IList<object> GetCategories()
+        {
+            return base.GetCategories().Reverse().ToList();
+        }
+
+        private IList<IChartSeries> BarSeries
+        {
+            get
+            {
+                return Chart.Series.Where(series => series is IChartBarSeries).Cast<IChartSeries>().ToList();
+            }
+        }
+
+        private IList<IChartSeries> VisibleBarSeries
+        {
+            get
+            {
+                return BarSeries.Where(series => series.Visible).ToList();
+            }
+        }
+
+        /// <inheritdoc />
+        protected override string TooltipStyle(TItem item)
+        {
+            var style = base.TooltipStyle(item);
+
+            var index = Items.IndexOf(item);
+
+            if (index >= 0)
+            {
+                var color = PickColor(index, Fills, Fill);
+
+                if (color != null)
+                {
+                    style = $"{style}; border-color: {color};";
+                }
+            }
+
+            return style;
+        }
+
+        private double BandHeight
+        {
+            get
+            {
+                var barSeries = VisibleBarSeries;
+
+                if (Chart.BarOptions.Height.HasValue)
+                {
+                    return Chart.BarOptions.Height.Value * barSeries.Count;
+                }
+                else
+                {
+                    var availableHeight = Chart.ValueScale.OutputSize; // - (Chart.ValueAxis.Padding * 2);
+                    var bands = barSeries.Cast<IChartBarSeries>().Max(series => series.Count) + 2;
+                    return availableHeight / bands;
+                }
+            }
+        }
+
+        int IChartBarSeries.Count
+        {
+            get
+            {
+                return Items.Count;
+            }
+        }
+
+        /// <inheritdoc />
+        public override bool Contains(double x, double y, double tolerance)
+        {
+            return DataAt(x, y) != null;
+        }
+
+        /// <inheritdoc />
+        internal override double TooltipX(TItem item)
+        {
+            var value = Chart.CategoryScale.Compose(Value);
+            var x = value(item);
+
+            return x;
+        }
+
+        /// <inheritdoc />
+        protected override string TooltipValue(TItem item)
+        {
+            return Chart.ValueAxis.Format(Chart.CategoryScale, Chart.CategoryScale.Value(Value(item)));
+        }
+
+        /// <inheritdoc />
+        protected override string TooltipTitle(TItem item)
+        {
+            var category = Category(Chart.ValueScale);
+            return Chart.CategoryAxis.Format(Chart.ValueScale, Chart.ValueScale.Value(category(item)));
+        }
+
+        /// <inheritdoc />
+        public override object DataAt(double x, double y)
+        {
+            var value = ComposeValue(Chart.CategoryScale);
+            var category = ComposeCategory(Chart.ValueScale);
+            var ticks = Chart.CategoryScale.Ticks(Chart.ValueAxis.TickDistance);
+            var x0 = Chart.CategoryScale.Scale(Math.Max(0, ticks.Start));
+
+            var barSeries = VisibleBarSeries;
+            var index = barSeries.IndexOf(this);
+            var padding = Chart.BarOptions.Margin;
+            var bandHeight = BandHeight;
+            var height = bandHeight / barSeries.Count() - padding + padding / barSeries.Count();
+
+            foreach (var data in Items)
+            {
+                var startY = category(data) - bandHeight / 2 + index * height + index * padding;
+                var endY = startY + height;
+                var dataX = value(data);
+                var startX = Math.Min(dataX, x0);
+                var endX = Math.Max(dataX, x0);
+
+                if (startX <= x && x <= endX && startY <= y && y <= endY)
+                {
+                    return data;
+                }
+            }
+
+            return null;
+        }
+
+        /// <inheritdoc />
+        internal override double TooltipY(TItem item)
+        {
+            var category = ComposeCategory(Chart.ValueScale);
+            var barSeries = VisibleBarSeries;
+            var index = barSeries.IndexOf(this);
+            var padding = Chart.BarOptions.Margin;
+            var bandHeight = BandHeight;
+            var height = bandHeight / barSeries.Count() - padding + padding / barSeries.Count();
+            var y = category(item) - bandHeight / 2 + index * height + index * padding;
+
+            return y + height / 2;
+        }
+
+        /// <inheritdoc />
+        public override IEnumerable<ChartDataLabel> GetDataLabels(double offsetX, double offsetY)
+        {
+            var list = new List<ChartDataLabel>();
+            
+            foreach (var d in Data)
+            {
+                list.Add(new ChartDataLabel 
+                { 
+                    Position = new Point() { X = TooltipX(d) + offsetX + 8, Y = TooltipY(d) + offsetY },
+                    TextAnchor = "start",
+                    Text = Chart.ValueAxis.Format(Chart.CategoryScale, Value(d))
+                });
+            }
+
+            return list;
+        }
+    }
+}

Radzen.Blazor/RadzenBody.razor

@@ -6,41 +6,3 @@
         @ChildContent
     </div>
 }
-@code {
-    [Parameter]
-    public override string Style { get; set; } = "margin-top: 51px; margin-bottom: 57px; margin-left:250px;";
-
-    protected override string GetComponentCssClass()
-    {
-        return "body";
-    }
-
-    public void Toggle()
-    {
-        Expanded = !Expanded;
-
-        StateHasChanged();
-    }
-
-    protected string GetStyle()
-    {
-        var marginLeft = 250;
-
-        if (!string.IsNullOrEmpty(Style))
-        {
-            var marginLeftStyle = Style.Split(';').Where(i => i.Split(':')[0].Contains("margin-left")).FirstOrDefault();
-            if (!string.IsNullOrEmpty(marginLeftStyle) && marginLeftStyle.Contains("px"))
-            {
-                marginLeft = int.Parse(marginLeftStyle.Split(':')[1].Trim().Replace("px", "").Split('.')[0].Trim());
-            }
-        }
-
-        return $"{Style}; margin-left: {(Expanded ? 0 : marginLeft)}px";
-    }
-
-    [Parameter]
-    public bool Expanded { get; set; } = false;
-
-    [Parameter]
-    public EventCallback<bool> ExpandedChanged { get; set; }
-}

Radzen.Blazor/RadzenBody.razor.cs

@@ -0,0 +1,126 @@
+using Microsoft.AspNetCore.Components;
+using System.Linq;
+using Radzen.Blazor.Rendering;
+using System.Threading.Tasks;
+using Microsoft.AspNetCore.Components.Routing;
+using Microsoft.JSInterop;
+
+namespace Radzen.Blazor
+{
+    /// <summary>
+    /// RadzenBody component.
+    /// </summary>
+    public partial class RadzenBody : RadzenComponentWithChildren
+    {
+        private const string DefaultStyle = "margin-top: 51px; margin-bottom: 57px; margin-left:250px;";
+
+        /// <summary>
+        /// Gets or sets the style.
+        /// </summary>
+        /// <value>The style.</value>
+        [Parameter]
+        public override string Style { get; set; } = DefaultStyle;
+
+        /// <inheritdoc />
+        protected override string GetComponentCssClass()
+        {
+            var classList = ClassList.Create("rz-body")
+                                     .Add("body")
+                                     .Add("body-expanded", Expanded);
+                                     
+            return classList.ToString();
+        }
+
+        /// <summary>
+        /// Toggles this instance width and left margin.
+        /// </summary>
+        public void Toggle()
+        {
+            Expanded = !Expanded;
+
+            StateHasChanged();
+        }
+
+        /// <summary>
+        /// The <see cref="RadzenLayout" /> this component is nested in.
+        /// </summary>
+        [CascadingParameter]
+        public RadzenLayout Layout { get; set; }
+
+        /// <summary>
+        /// Gets the style.
+        /// </summary>
+        /// <returns>System.String.</returns>
+        protected string GetStyle()
+        {
+            if (Layout == null)
+            {
+                var marginLeft = 250;
+                var style = Style;
+
+                if (!string.IsNullOrEmpty(Style))
+                {
+                    var marginLeftStyle = Style.Split(';').Where(i => i.Split(':')[0].Contains("margin-left")).FirstOrDefault();
+                    if (!string.IsNullOrEmpty(marginLeftStyle) && marginLeftStyle.Contains("px"))
+                    {
+                        marginLeft = int.Parse(marginLeftStyle.Split(':')[1].Trim().Replace("px", "").Split('.')[0].Trim());
+                    }
+                }
+
+                return $"{Style}; margin-left: {(Expanded ? 0 : marginLeft)}px";
+            }
+            else
+            {
+                var style = Style;
+
+                if (!string.IsNullOrEmpty(style))
+                {
+                    style = style.Replace(DefaultStyle, "");
+                }
+
+                return $"{style}";
+            }
+        }
+
+        /// <summary>
+        /// Gets or sets a value indicating whether this <see cref="RadzenBody"/> is expanded.
+        /// </summary>
+        /// <value><c>true</c> if expanded; otherwise, <c>false</c>.</value>
+        [Parameter]
+        public bool Expanded { get; set; } = false;
+
+        /// <summary>
+        /// Gets or sets a callback raised when the component is expanded or collapsed.
+        /// </summary>
+        /// <value>The expanded changed callback.</value>
+        [Parameter]
+        public EventCallback<bool> ExpandedChanged { get; set; }
+
+        [Inject]
+        NavigationManager NavigationManager { get; set; }
+
+        /// <inheritdoc />
+        protected override Task OnInitializedAsync()
+        {
+            NavigationManager.LocationChanged += OnLocationChanged;
+
+            return base.OnInitializedAsync();
+        }
+
+        private void OnLocationChanged(object sender, LocationChangedEventArgs e)
+        {
+            if (IsJSRuntimeAvailable && Layout != null)
+            {
+                JSRuntime.InvokeVoidAsync("eval", $"document.getElementById('{GetId()}').scrollTop = 0");
+            }
+        }
+
+        /// <inheritdoc />
+        public override void Dispose()
+        {
+            NavigationManager.LocationChanged -= OnLocationChanged;
+
+            base.Dispose();
+        }
+    }
+}

Radzen.Blazor/RadzenBreadCrumb.razor

@@ -0,0 +1,13 @@
+@inherits RadzenComponentWithChildren
+
+<CascadingValue Value="@Template">
+@if (Visible)
+{
+  <div class="@GetCssClass()" style="@Style" @attributes="@Attributes" id="@GetId()">
+    @if (ChildContent != null)
+    {
+        @ChildContent
+    }
+  </div>
+}
+</CascadingValue>