DateWheelPicker Adornment Options (#516)

Author: mckaragoz

CodeBeam.MudBlazor.Extensions.Docs/Pages/Components/DateWheelPicker/Examples/DateWheelPickerExample1.razor

@@ -3,9 +3,10 @@
 
 <MudGrid>
     <MudItem xs="12" sm="8">
-        <MudDateWheelPicker @bind-Value="_date" DateView="_dateView" Editable="_editable" Label="Date" Clearable
-                            ShowToolbar="_showToolbar" ShowHeader="_showHeader" SubmitOnClose="_submitOnClose" Variant="Variant.Outlined" Color="_color" ColorTime="_colorTime"
-                            DateFormat="@_dateFormat" FixDay="_fixDay" FixMonth="_fixMonth" FixYear="_fixYear" FixHour="_fixHour" FixMinute="_fixMinute" FixSecond="_fixSecond" />
+        <MudDateWheelPicker @bind-Value="_date" DateView="_dateView" Editable="_editable" Label="Date" Clearable InputAdornment="@(_isAdornmentEnd ? Adornment.End : Adornment.Start)"
+        ShowToolbar="_showToolbar" ShowHeader="_showHeader" SubmitOnClose="_submitOnClose" Variant="Variant.Outlined" Color="_color" ColorTime="_colorTime"
+        DateFormat="@_dateFormat" FixDay="_fixDay" FixMonth="_fixMonth" FixYear="_fixYear" FixHour="_fixHour" FixMinute="_fixMinute" FixSecond="_fixSecond"
+        TransformOrigin="Origin.TopCenter" AnchorOrigin="Origin.BottomCenter" />
     </MudItem>
 
     <MudItem xs="12" sm="4">
@@ -20,6 +21,7 @@
             <MudSwitchM3 @bind-Value="_showToolbar" Color="Color.Secondary" Label="Show Toolbar" />
             <MudSwitchM3 @bind-Value="_showHeader" Color="Color.Secondary" Label="Show Header" />
             <MudSwitchM3 @bind-Value="_submitOnClose" Color="Color.Secondary" Label="Submit On Close" />
+            <MudSwitchM3 @bind-Value="_isAdornmentEnd" Label="Adornment End" Color="Color.Secondary" />
             <MudSelect @bind-Value="_color" Variant="Variant.Outlined" Label="Color">
                 @foreach (Color item in Enum.GetValues<Color>())
                 {
@@ -62,4 +64,5 @@
     bool _fixHour;
     bool _fixMinute;
     bool _fixSecond;
+    bool _isAdornmentEnd = true;
 }

CodeBeam.MudBlazor.Extensions/Components/DateWheelPicker/MudDateWheelPicker.razor

@@ -11,7 +11,7 @@
                           TextUpdateSuppression="false"
                           Value="@(Text)" Underline="@Underline"
                           Disabled="@Disabled" ReadOnly="!Editable" Error="@Error" ErrorId="@ErrorId"
-                          OnAdornmentClick="HandleAdornmentClick" AdornmentIcon="@_currentIcon" Adornment="Adornment.End"
+                          OnAdornmentClick="HandleAdornmentClick" AdornmentIcon="@InputAdornmentIcon" Adornment="@InputAdornment"
                           AdornmentColor="@AdornmentColor" IconSize="@IconSize" OnBlur="HandleOnBlur"
                           Clearable="@Clearable" OnClearButtonClick="HandleClearButtonClick"
                           @attributes="UserAttributes" />

CodeBeam.MudBlazor.Extensions/Components/DateWheelPicker/MudDateWheelPicker.razor.cs

@@ -235,7 +235,20 @@ protected override void OnInitialized()
         public int MaxHeight { get; set; } = 300;
 
         internal bool _isOpen;
-        internal string _currentIcon { get; set; } = Icons.Material.Filled.CalendarMonth;
+
+        /// <summary>
+        /// The icon displayed as adornment in input.
+        /// </summary>
+        [Parameter]
+        [Category(CategoryTypes.FormComponent.ListAppearance)]
+        public string? InputAdornmentIcon { get; set; } = Icons.Material.Filled.CalendarMonth;
+
+        /// <summary>
+        /// The adornment position in input.
+        /// </summary>
+        [Parameter]
+        [Category(CategoryTypes.FormComponent.ListAppearance)]
+        public Adornment InputAdornment { get; set; } = Adornment.End;
 
         /// <summary>
         /// Sets the anchor origin point for the popover.