Date Dropdown Component Added

README.md

@@ -113,6 +113,7 @@ public partial class Index
 - [Checkbox](#checkbox)
 - [Chip](#chip)
 - [Content Header](#content-header) **(since v0.3.3)**
+- [Date Dropdown](#date-dropdown)
 - [Date Picker](#date-picker)
 - [Date Time Picker](#date-time-picker)
 - [Divider](#divider)
@@ -720,6 +721,35 @@ chart1.InitialChart(object1);
 </ContentHeader>
 ```
 
+## Date Dropdown
+```razor
+<DateDropdown Id="datedropdown1" DateRangeId="last-7" Format="MM/dd/yyyy" DateRangeOptions="_dateRangeOptions" DateRangeChangeEvent="Callback"></DateDropdown>
+```
+```csharp
+    readonly DateDropdownOption[] _dateRangeOptions =
+{
+    new()
+    {
+        Id = "last-7",
+        Label = "Last 7 days",
+        From = DateTime.Today.AddDays(-7).ToString("MM/dd/yyyy"),
+        To = DateTime.Today.ToString("MM/dd/yyyy")
+    },
+    new()
+    {
+        Id = "today",
+        Label = "Today",
+        From = DateTime.Today.ToString("MM/dd/yyyy"),
+        To = DateTime.Today.ToString("MM/dd/yyyy")
+    }
+};
+
+private void Callback(DateDropdownResponse selectedDateDropdown)
+{
+    Console.WriteLine(selectedDateDropdown.Id);
+}
+```
+
 ## Date picker
 
 ```razor

SiemensIXBlazor/Components/DateDropdown/DateDropdown.razor

@@ -0,0 +1,24 @@
+@namespace SiemensIXBlazor.Components
+@using Microsoft.JSInterop
+
+@inject IJSRuntime JsRuntime
+@inherits IXBaseComponent
+
+<ix-date-dropdown
+    @attributes="UserAttributes"
+    style="@Style"
+    class="@Class"
+    id="@Id"
+    custom-range-allowed="@CustomRangeAllowed"
+    date-range-id="@DateRangeId"
+    format="@Format"
+    from="@From"
+    i18n-custom-item="@I18NCustomItem"
+    i18n-done="@I18NDone"
+    i18n-no-range="@I18NNoRange"
+    max-date="@MaxDate"
+    min-date="@MinDate"
+    range="@Range"
+    to="@To">
+
+</ix-date-dropdown>

SiemensIXBlazor/Components/DateDropdown/DateDropdown.razor.cs

@@ -0,0 +1,81 @@
+using System.Text.Json;
+using Microsoft.AspNetCore.Components;
+using Microsoft.JSInterop;
+using Newtonsoft.Json;
+using Newtonsoft.Json.Linq;
+using Newtonsoft.Json.Serialization;
+using SiemensIXBlazor.Interops;
+using SiemensIXBlazor.Objects.DateDropdown;
+
+namespace SiemensIXBlazor.Components;
+
+public partial class DateDropdown
+{
+    private BaseInterop _interop = null!;
+    private Lazy<Task<IJSObjectReference>>? _moduleTask;
+
+    [Parameter][EditorRequired] public string Id { get; set; } = string.Empty;
+
+    [Parameter] public bool CustomRangeAllowed { get; set; } = true;
+
+    [Parameter] public string DateRangeId { get; set; } = "custom";
+
+    [Parameter] public EventCallback<string> DateRangeIdChanged { get; set; }
+
+    [Parameter] public DateDropdownOption[]? DateRangeOptions { get; set; }
+
+    [Parameter] public string Format { get; set; } = "yyyy/LL/dd";
+
+    [Parameter] public string? From { get; set; }
+
+    [Parameter] public string I18NCustomItem { get; set; } = "Custom...";
+
+    [Parameter] public string I18NDone { get; set; } = "Done";
+
+    [Parameter] public string I18NNoRange { get; set; } = "No range set";
+
+    [Parameter] public string? MaxDate { get; set; }
+
+    [Parameter] public string? MinDate { get; set; }
+
+    [Parameter] public bool Range { get; set; } = true;
+
+    [Parameter] public string? To { get; set; }
+
+    [Parameter] public EventCallback<DateDropdownResponse> DateRangeChangeEvent { get; set; }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            await InitialParameterAsync("setDateRangeOptions", DateRangeOptions);
+            _interop = new BaseInterop(JsRuntime);
+
+            await _interop.AddEventListener(this, Id, "dateRangeChange", "DateRangeChange");
+        }
+    }
+
+    private async Task InitialParameterAsync(string functionName, object? param)
+    {
+        _moduleTask = new Lazy<Task<IJSObjectReference>>(() => JsRuntime.InvokeAsync<IJSObjectReference>(
+            "import", "./_content/SiemensIXBlazor/js/interops/dateDropdownInterop.js").AsTask());
+
+        var dateRangeOptions = JsonConvert.SerializeObject(param, new JsonSerializerSettings
+        {
+            ContractResolver = new CamelCasePropertyNamesContractResolver()
+        });
+
+        var module = await _moduleTask.Value;
+        if (module != null) await module.InvokeVoidAsync(functionName, Id, dateRangeOptions);
+    }
+
+    [JSInvokable]
+    public async void DateRangeChange(JsonElement data)
+    {
+        var jsonDataText = data.GetRawText();
+        var jsonData = JObject.Parse(jsonDataText)
+            .ToObject<DateDropdownResponse>();
+
+        await DateRangeChangeEvent.InvokeAsync(jsonData);
+    }
+}

SiemensIXBlazor/Objects/DateDropdown/DateDropdownOption.cs

@@ -0,0 +1,15 @@
+using Newtonsoft.Json;
+
+namespace SiemensIXBlazor.Objects.DateDropdown;
+
+public class
+    DateDropdownOption
+{
+    [JsonProperty("id")] public string Id { get; set; } = null!;
+
+    [JsonProperty("label")] public string Label { get; set; } = null!;
+
+    [JsonProperty("from")] public string? From { get; set; }
+
+    [JsonProperty("to")] public string? To { get; set; }
+}

SiemensIXBlazor/Objects/DateDropdown/DateDropdownResponse.cs

@@ -0,0 +1,15 @@
+using System.Text.Json.Serialization;
+
+namespace SiemensIXBlazor.Objects.DateDropdown;
+
+public class DateDropdownResponse
+{
+    [JsonPropertyName("id")]
+    public string Id { get; set; } = null!;
+
+    [JsonPropertyName("from")]
+    public string? From { get; set; }
+
+    [JsonPropertyName("to")]
+    public string? To { get; set; }
+}

SiemensIXBlazor/wwwroot/js/interops/dateDropdownInterop.js

@@ -0,0 +1,9 @@
+export function setDateRangeOptions(id, dateRangeOptions) {
+    try {
+        const element = document.getElementById(id);
+        element.dateRangeOptions = JSON.parse(dateRangeOptions);
+    }
+    catch (err) {
+        console.error(err)
+    }
+}