Apply BitDateRangePicker improvements (#12867)

src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePickerClassStyles.cs

@@ -57,6 +57,21 @@ public class BitDateRangePickerClassStyles
     /// </summary>
     public string? Group { get; set; }
 
+    /// <summary>
+    /// Custom CSS classes/styles for the presets' container of the BitDateRangePicker.
+    /// </summary>
+    public string? PresetsContainer { get; set; }
+
+    /// <summary>
+    /// Custom CSS classes/styles for each preset button of the BitDateRangePicker.
+    /// </summary>
+    public string? PresetButton { get; set; }
+
+    /// <summary>
+    /// Custom CSS classes/styles for the currently selected preset button of the BitDateRangePicker.
+    /// </summary>
+    public string? SelectedPresetButton { get; set; }
+
     /// <summary>
     /// Custom CSS classes/styles for the day-picker's wrapper of the BitDateRangePicker.
     /// </summary>
@@ -127,16 +142,26 @@ public class BitDateRangePickerClassStyles
     /// </summary>
     public string? NextMonthNavIcon { get; set; }
 
+    /// <summary>
+    /// Custom CSS classes/styles for the days grid of the BitDateRangePicker.
+    /// </summary>
+    public string? DaysGrid { get; set; }
+
     /// <summary>
     /// Custom CSS classes/styles for the header row of the days of the BitDateRangePicker.
     /// </summary>
     public string? DaysHeaderRow { get; set; }
 
     /// <summary>
-    /// Custom CSS classes/styles for the header of the week numbers of the BitDateRangePicker.
+    /// Custom CSS classes/styles for the header cell of the week numbers column of the BitDateRangePicker.
     /// </summary>
     public string? WeekNumbersHeader { get; set; }
 
+    /// <summary>
+    /// Custom CSS classes/styles for each day of the week header cell of the BitDateRangePicker.
+    /// </summary>
+    public string? WeekDayHeader { get; set; }
+
     /// <summary>
     /// Custom CSS classes/styles for each row of the days of the BitDateRangePicker.
     /// </summary>
@@ -152,6 +177,16 @@ public class BitDateRangePickerClassStyles
     /// </summary>
     public string? DayButton { get; set; }
 
+    /// <summary>
+    /// Custom CSS classes/styles for the highlighted day buttons of the BitDateRangePicker.
+    /// </summary>
+    public string? HighlightedDayButton { get; set; }
+
+    /// <summary>
+    /// Custom CSS classes/styles for the day buttons inside the prospective range being hovered in the BitDateRangePicker.
+    /// </summary>
+    public string? HoveredDayButtons { get; set; }
+
     /// <summary>
     /// Custom CSS classes/styles for today day button of the BitDateRangePicker.
     /// </summary>

src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePickerPreset.cs

@@ -0,0 +1,45 @@
+namespace Bit.BlazorUI;
+
+/// <summary>
+/// Represents a shortcut that fills the BitDateRangePicker with a predefined range (e.g. "Last 7 days").
+/// </summary>
+public class BitDateRangePickerPreset
+{
+    /// <summary>
+    /// The text of the preset's button.
+    /// </summary>
+    public required string Text { get; set; }
+
+    /// <summary>
+    /// The range applied when the preset is selected.
+    /// <see cref="ValueProvider"/> takes precedence over this when both are set.
+    /// </summary>
+    public BitDateRangePickerValue? Value { get; set; }
+
+    /// <summary>
+    /// Custom function providing the range applied when the preset is selected.
+    /// Unlike <see cref="Value"/> it is evaluated on each selection, which keeps relative
+    /// ranges (e.g. "Last 7 days") correct no matter how long the page has been open.
+    /// </summary>
+    public Func<BitDateRangePickerValue?>? ValueProvider { get; set; }
+
+    /// <summary>
+    /// Whether the preset's button is enabled.
+    /// </summary>
+    public bool IsEnabled { get; set; } = true;
+
+    /// <summary>
+    /// The title of the preset's button (tooltip).
+    /// </summary>
+    public string? Title { get; set; }
+
+    /// <summary>
+    /// Custom CSS class for the preset's button.
+    /// </summary>
+    public string? Class { get; set; }
+
+    /// <summary>
+    /// Custom CSS style for the preset's button.
+    /// </summary>
+    public string? Style { get; set; }
+}

src/BlazorUI/Bit.BlazorUI/Scripts/Calendars.ts

@@ -17,7 +17,7 @@ namespace BitBlazorUI {
                 if (Calendars._navKeys.indexOf(e.key) === -1) return;
 
                 const target = e.target as HTMLElement | null;
-                if (!target || !target.closest('.bit-cal-dbt')) return;
+                if (!target || !target.closest('.bit-cal-dbt, .bit-dtrp-dbt')) return;
 
                 e.preventDefault();
             };