[HxSearchBox] Search icon missaligned when used with label #487

BlazorAppTest/Pages/HxSearchBoxTest.razor

@@ -1,6 +1,12 @@
 @page "/HxSearchBoxTest"
 
-<HxSearchBox DataProvider="ProvideSearchResults" ItemTitleSelector="(i) => i.Title" ItemSubtitleSelector="(i) => i.Subtitle" ItemIconSelector="(i) => i.Icon" TItem="SearchBoxItem" >
+<HxSearchBox DataProvider="ProvideSearchResults" Label="Search" ItemTitleSelector="(i) => i.Title" ItemSubtitleSelector="(i) => i.Subtitle" ItemIconSelector="(i) => i.Icon" TItem="SearchBoxItem" >
+    <DefaultContentTemplate>
+        <div class="small py-2 px-3 text-muted">Search for Mouse, Table or Door...</div>
+    </DefaultContentTemplate>
+</HxSearchBox>
+
+<HxSearchBox DataProvider="ProvideSearchResults" Label="Floating Label" Placeholder="Floating Label" LabelType="LabelType.Floating" ItemTitleSelector="(i) => i.Title" ItemSubtitleSelector="(i) => i.Subtitle" ItemIconSelector="(i) => i.Icon" TItem="SearchBoxItem" >
     <DefaultContentTemplate>
         <div class="small py-2 px-3 text-muted">Search for Mouse, Table or Door...</div>
     </DefaultContentTemplate>
@@ -9,6 +15,35 @@
     </NotFoundTemplate>
 </HxSearchBox>
 
+<HxSearchBox DataProvider="ProvideSearchResults" ItemTitleSelector="(i) => i.Title" ItemSubtitleSelector="(i) => i.Subtitle" ItemIconSelector="(i) => i.Icon" TItem="SearchBoxItem" InputGroupEndText="Test End" InputGroupStartText="Test Start" >
+    <DefaultContentTemplate>
+        <div class="small py-2 px-3 text-muted">Search for Mouse, Table or Door...</div>
+    </DefaultContentTemplate>
+</HxSearchBox>
+
+<HxSearchBox DataProvider="ProvideSearchResults" ItemTitleSelector="(i) => i.Title" ItemSubtitleSelector="(i) => i.Subtitle" ItemIconSelector="(i) => i.Icon" TItem="SearchBoxItem" >
+    <InputGroupStartTemplate>
+        <HxButton Color="ThemeColor.Light" Text="Start" />
+    </InputGroupStartTemplate>
+    <InputGroupEndTemplate>
+        <HxButton Color="ThemeColor.Light" Text="End" />
+    </InputGroupEndTemplate>
+    <DefaultContentTemplate>
+        <div class="small py-2 px-3 text-muted">Search for Mouse, Table or Door...</div>
+    </DefaultContentTemplate>
+    <NotFoundTemplate>
+        <div class="p-4 text-muted">
+            Not found.
+        </div>
+    </NotFoundTemplate>
+</HxSearchBox>
+
+<HxSearchBox DataProvider="ProvideSearchResults" Label="Search" ItemTitleSelector="(i) => i.Title" ItemSubtitleSelector="(i) => i.Subtitle" ItemIconSelector="(i) => i.Icon" TItem="SearchBoxItem" InputGroupEndText="Test End" InputGroupStartText="Test Start" >
+    <DefaultContentTemplate>
+        <div class="small py-2 px-3 text-muted">Search for Mouse, Table or Door...</div>
+    </DefaultContentTemplate>
+</HxSearchBox>
+
 @code {
     List<SearchBoxItem> Data { get; set; } = new()
     {

Havit.Blazor.Components.Web.Bootstrap.Documentation/Pages/Components/HxSearchBoxDoc/HxSearchBox_Demo.razor

@@ -1,61 +1,62 @@
 <HxSearchBox DataProvider="ProvideSearchResults"
-             TItem="SearchBoxItem"
-             ItemTitleSelector="i => i.Title"
-             ItemSubtitleSelector="i => i.Subtitle"
-             ItemIconSelector="i => i.Icon"
-             Placeholder="Search"
-             OnItemSelected="OnItemSelected"
-             OnTextQueryTriggered="OnTextQueryTriggered">
-    <DefaultContentTemplate>
-        <div class="p-2 text-muted">Search for Mouse, Table or Door...</div>
-    </DefaultContentTemplate>
-    <NotFoundTemplate>
-        <div class="small py-2 px-3 text-muted"><HxIcon CssClass="me-2" Icon="BootstrapIcon.EmojiFrown"/>Sorry, I did not find that...</div>
-    </NotFoundTemplate>
+			 Label="Example"
+			 TItem="SearchBoxItem"
+			 ItemTitleSelector="i => i.Title"
+			 ItemSubtitleSelector="i => i.Subtitle"
+			 ItemIconSelector="i => i.Icon"
+			 Placeholder="Search"
+			 OnItemSelected="OnItemSelected"
+			 OnTextQueryTriggered="OnTextQueryTriggered">
+	<DefaultContentTemplate>
+		<div class="p-2 text-muted">Search for Mouse, Table or Door...</div>
+	</DefaultContentTemplate>
+	<NotFoundTemplate>
+		<div class="small py-2 px-3 text-muted"><HxIcon CssClass="me-2" Icon="BootstrapIcon.EmojiFrown" />Sorry, I did not find that...</div>
+	</NotFoundTemplate>
 </HxSearchBox>
 
 <p class="mt-3">
-    Last selected item: @selectedItem?.Title<br/>
-    Last triggered text-query: @triggeredTextQuery<br />
+	Last selected item: @selectedItem?.Title<br />
+	Last triggered text-query: @triggeredTextQuery<br />
 </p>
 
 @code {
-    private SearchBoxItem selectedItem;
-    private string triggeredTextQuery;
-
-    List<SearchBoxItem> Data { get; set; } = new()
-    {
-        new() { Title = "Table", Subtitle = "50 000", Icon = BootstrapIcon.Table },
-        new() { Title = "Mouse", Subtitle = "400", Icon = BootstrapIcon.Mouse },
-        new() { Title = "Door", Subtitle = "1000", Icon = BootstrapIcon.DoorClosed },
-        new() { Title = "Big table", Subtitle = "9 000", Icon = BootstrapIcon.Table },
-        new() { Title = "Small table", Subtitle = "7 200", Icon = BootstrapIcon.Table }
-    };
-
-    private void OnItemSelected(SearchBoxItem item)
-    {
-        selectedItem = item;
-    }
-
-    private void OnTextQueryTriggered(string text)
-    {
-        triggeredTextQuery = text;
-    }
-
-    private async Task<SearchBoxDataProviderResult<SearchBoxItem>> ProvideSearchResults(SearchBoxDataProviderRequest request)
-    {
-        await Task.Delay(400); // imitate slower server API
-
-        return new()
-        {
-            Data = Data.Where(i => i.Title.Contains(request.UserInput, StringComparison.OrdinalIgnoreCase))
-        };
-    }
-
-    internal class SearchBoxItem
-    {
-        public string Title { get; set; }
-        public string Subtitle { get; set; }
-        public BootstrapIcon Icon { get; set; }
-    }
+	private SearchBoxItem selectedItem;
+	private string triggeredTextQuery;
+
+	List<SearchBoxItem> Data { get; set; } = new()
+	{
+		new() { Title = "Table", Subtitle = "50 000", Icon = BootstrapIcon.Table },
+		new() { Title = "Mouse", Subtitle = "400", Icon = BootstrapIcon.Mouse },
+		new() { Title = "Door", Subtitle = "1000", Icon = BootstrapIcon.DoorClosed },
+		new() { Title = "Big table", Subtitle = "9 000", Icon = BootstrapIcon.Table },
+		new() { Title = "Small table", Subtitle = "7 200", Icon = BootstrapIcon.Table }
+	};
+
+	private void OnItemSelected(SearchBoxItem item)
+	{
+		selectedItem = item;
+	}
+
+	private void OnTextQueryTriggered(string text)
+	{
+		triggeredTextQuery = text;
+	}
+
+	private async Task<SearchBoxDataProviderResult<SearchBoxItem>> ProvideSearchResults(SearchBoxDataProviderRequest request)
+	{
+		await Task.Delay(400); // imitate slower server API
+
+		return new()
+			{
+				Data = Data.Where(i => i.Title.Contains(request.UserInput, StringComparison.OrdinalIgnoreCase))
+			};
+	}
+
+	internal class SearchBoxItem
+	{
+		public string Title { get; set; }
+		public string Subtitle { get; set; }
+		public BootstrapIcon Icon { get; set; }
+	}
 }

Havit.Blazor.Components.Web.Bootstrap/Forms/SearchBox/HxSearchBox.razor

@@ -13,44 +13,44 @@
                                  OnHidden="HandleDropdownMenuHidden"
                                  id="@dropdownToggleElementId">
 
-            <div class="position-relative">
-                @if (!string.IsNullOrEmpty(Label))
+            @if (!string.IsNullOrEmpty(Label) && LabelType == Havit.Blazor.Components.Web.Bootstrap.LabelType.Regular)
+            {
+                <label class="form-label">@Label</label>
+            }
+            <div class="@CssClassHelper.Combine(
+                            "position-relative",
+                            (HasInputGroups ? "input-group" : null),
+                            (LabelType == Havit.Blazor.Components.Web.Bootstrap.LabelType.Floating) ? "form-floating" : null,
+                            InputSizeEffective.AsInputGroupCssClass(),
+                            InputGroupCssClass)">
+
+                @if (InputGroupStartText is not null)
                 {
-                    <label class="form-label">@Label</label>
+                    <span class="input-group-text">@InputGroupStartText</span>
                 }
-                <span class="@CssClassHelper.Combine(
-                                (HasInputGroupsEffective ? "input-group" : null),
-                                (LabelType == Havit.Blazor.Components.Web.Bootstrap.LabelType.Floating) ? "form-floating" : null,
-                                InputSizeEffective.AsInputGroupCssClass(),
-                                InputGroupCssClass)">
-
-                    @if (InputGroupStartText is not null)
-                    {
-                        <span class="input-group-text">@InputGroupStartText</span>
-                    }
 
-                    @InputGroupStartTemplate
+                @InputGroupStartTemplate
 
-                    <input
-                        id="@inputId"
-                        value="@TextQuery"
-                        @oninput="(eventArgs) => HandleTextQueryValueChanged(eventArgs.Value.ToString())"
-                        @onfocus="HandleInputFocus"
-                        @onblur="HandleInputBlur"
-                        inputmode="search"
-                        enabled="@Enabled"
-                        placeholder="@Placeholder"
-                        class="@CssClassHelper.Combine("form-control", InputCssClassEffective)" />
-
-                    @InputGroupEndTemplate
+                <input
+                    id="@inputId"
+                    value="@TextQuery"
+                    @oninput="(eventArgs) => HandleTextQueryValueChanged(eventArgs.Value.ToString())"
+                    @onfocus="HandleInputFocus"
+                    @onblur="HandleInputBlur"
+                    inputmode="search"
+                    enabled="@Enabled"
+                    placeholder="@Placeholder"
+                    class="@CssClassHelper.Combine(
+                       "form-control",
+                       (!HasInputGroupEnd && HasInputGroups ? "hx-search-box-input-with-search-icon" : null),
+                       InputCssClassEffective)" />
 
-                    @if (InputGroupEndText is not null)
-                    {
-                        <span class="input-group-text">@InputGroupEndText</span>
-                    }
-                </span>
+                @if (!string.IsNullOrEmpty(Label) && LabelType == Havit.Blazor.Components.Web.Bootstrap.LabelType.Floating)
+                {
+                    <label for="@inputId">@Label</label>
+                }
 
-                @if (InputGroupEndText is null && InputGroupEndTemplate is null)
+                @if (!HasInputGroupEnd)
                 {
                     if (dataProviderInProgress)
                     {
@@ -71,6 +71,13 @@
                         </div>
                     }
                 }
+
+                @InputGroupEndTemplate
+
+                @if (InputGroupEndText is not null)
+                {
+                    <span class="input-group-text">@InputGroupEndText</span>
+                }
             </div>
         </HxDropdownToggleElement>
 

Havit.Blazor.Components.Web.Bootstrap/Forms/SearchBox/HxSearchBox.razor.cs

@@ -1,4 +1,5 @@
 using Havit.Blazor.Components.Web.Bootstrap.Internal;
+using Microsoft.Extensions.Localization;
 using Microsoft.JSInterop;
 
 namespace Havit.Blazor.Components.Web.Bootstrap;
@@ -209,7 +210,9 @@ public partial class HxSearchBox<TItem> : IAsyncDisposable
 
 	[Inject] protected IJSRuntime JSRuntime { get; set; }
 
-	protected bool HasInputGroupsEffective => !String.IsNullOrWhiteSpace(InputGroupStartText) || !String.IsNullOrWhiteSpace(InputGroupEndText) || (InputGroupStartTemplate is not null) || (InputGroupEndTemplate is not null);
+	protected bool HasInputGroups => HasInputGroupStart || HasInputGroupEnd;
+	private bool HasInputGroupStart => !String.IsNullOrWhiteSpace(InputGroupStartText) || (InputGroupStartTemplate is not null);
+	private bool HasInputGroupEnd => !String.IsNullOrWhiteSpace(InputGroupEndText) || (InputGroupEndTemplate is not null);
 
 	private string dropdownToggleElementId = "hx" + Guid.NewGuid().ToString("N");
 	private string dropdownId = "hx" + Guid.NewGuid().ToString("N");
@@ -229,7 +232,6 @@ public partial class HxSearchBox<TItem> : IAsyncDisposable
 	private IJSObjectReference jsModule;
 	private DotNetObjectReference<HxSearchBox<TItem>> dotnetObjectReference;
 	private bool disposed = false;
-
 	public HxSearchBox()
 	{
 		dotnetObjectReference = DotNetObjectReference.Create(this);

Havit.Blazor.Components.Web.Bootstrap/Forms/SearchBox/HxSearchBox.razor.css

@@ -10,13 +10,18 @@
     transform: translateY(-50%);
     display: flex;
     align-items: center;
-    z-index: 1;
+    z-index: 10;
 }
 
 ::deep .hx-search-box-input-icon-end {
     right: .75rem;
 }
 
+::deep .hx-search-box-input-with-search-icon {
+    border-top-right-radius: 0.375rem !important;
+    border-bottom-right-radius: 0.375rem !important;
+}
+
 .dropdown-item:not(:active) ::deep .hx-search-box-item-title {
     color: var(--hx-search-box-item-title-color);
 }

Havit.Blazor.Grpc.Core/ProtoBufModelConfiguration.cs

@@ -25,6 +25,13 @@ public static RuntimeTypeModel RegisterApplicationContracts(this RuntimeTypeMode
 			var fieldNumber = 1;
 			foreach (var property in type.GetProperties(BindingFlags.Public | BindingFlags.Instance))
 			{
+				// protobuf-net requires the property to have a setter (can be private)
+				// by adding this check we enable support for computed get-properties (not serialized)
+				if (property.GetSetMethod(nonPublic: true) is null)
+				{
+					continue;
+				}
+
 				modelType.AddField(fieldNumber, property.Name);
 				fieldNumber++;
 			}