From 79285d6647be52c43ced40627e3e49b726337f91 Mon Sep 17 00:00:00 2001
From: Mohammad Aminsafaei <m.aminsafaei@outlook.com>
Date: Thu, 13 Feb 2025 20:48:08 +0330
Subject: [PATCH] Show missing required asterisk in BitDateRangePicker's label
 (#9888)

---
 .../_Pickers/DateRangePicker/BitDateRangePicker.razor     | 1 +
 .../_Pickers/DateRangePicker/BitDateRangePicker.razor.cs  | 2 ++
 .../_Pickers/DateRangePicker/BitDateRangePicker.scss      | 8 ++++++++
 .../Inputs/DateRangePicker/BitDateRangePickerDemo.razor   | 2 ++
 .../DateRangePicker/BitDateRangePickerDemo.razor.cs       | 1 +
 5 files changed, 14 insertions(+)

diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/DateRangePicker/BitDateRangePicker.razor b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/DateRangePicker/BitDateRangePicker.razor
index 8ca8a6d6b0..2d551a5294 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/DateRangePicker/BitDateRangePicker.razor
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/DateRangePicker/BitDateRangePicker.razor
@@ -33,6 +33,7 @@
                        name="@Name"
                        id="@_inputId"
                        role="combobox"
+                       required="@Required"
                        tabindex="@TabIndex"
                        aria-haspopup="dialog"
                        aria-label="@AriaLabel"
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/DateRangePicker/BitDateRangePicker.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/DateRangePicker/BitDateRangePicker.razor.cs
index 9b9288a1c3..7fd60e9719 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/DateRangePicker/BitDateRangePicker.razor.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/DateRangePicker/BitDateRangePicker.razor.cs
@@ -564,6 +564,8 @@ protected override void RegisterCssClasses()
         ClassBuilder.Register(() => Standalone ? "bit-dtrp-sta" : string.Empty);
 
         ClassBuilder.Register(() => _hasFocus ? $"bit-dtrp-foc {Classes?.Focused}" : string.Empty);
+
+        ClassBuilder.Register(() => IsEnabled && Required ? "bit-dtrp-req" : string.Empty);
     }
 
     protected override void RegisterCssStyles()
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/DateRangePicker/BitDateRangePicker.scss b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/DateRangePicker/BitDateRangePicker.scss
index c2beb62215..154ab28ffa 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/DateRangePicker/BitDateRangePicker.scss
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/DateRangePicker/BitDateRangePicker.scss
@@ -791,6 +791,14 @@
     }
 }
 
+.bit-dtrp-req {
+    .bit-dtrp-lbl::after {
+        content: "*";
+        color: $clr-req;
+        margin-inline-start: spacing(0.625);
+    }
+}
+
 .bit-dtrp-res {
     @include lt-sm {
         top: 0;
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DateRangePicker/BitDateRangePickerDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DateRangePicker/BitDateRangePickerDemo.razor
index b49f30d9f5..4e47e2adf6 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DateRangePicker/BitDateRangePickerDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DateRangePicker/BitDateRangePickerDemo.razor
@@ -19,6 +19,8 @@
             <br /><br />
             <BitDateRangePicker Label="Disabled" IsEnabled="false" />
             <br /><br />
+            <BitDateRangePicker Label="Required" Required />
+            <br /><br />
             <BitDateRangePicker Label="PlaceHolder" Placeholder="Select a date range" />
             <br /><br />
             <BitDateRangePicker Label="Week numbers" ShowWeekNumbers />
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DateRangePicker/BitDateRangePickerDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DateRangePicker/BitDateRangePickerDemo.razor.cs
index 50009e1999..769fd4b328 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DateRangePicker/BitDateRangePickerDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DateRangePicker/BitDateRangePickerDemo.razor.cs
@@ -1009,6 +1009,7 @@ public partial class BitDateRangePickerDemo
     private readonly string example1RazorCode = @"
 <BitDateRangePicker Label=""Basic DateRangePicker"" />
 <BitDateRangePicker Label=""Disabled"" IsEnabled=""false"" />
+<BitDateRangePicker Label=""Required"" Required />
 <BitDateRangePicker Label=""PlaceHolder"" Placeholder=""Select a date range"" />
 <BitDateRangePicker Label=""Week numbers"" ShowWeekNumbers />
 <BitDateRangePicker Label=""Highlight months"" HighlightCurrentMonth HighlightSelectedMonth />