From 00a057002a69204fafd0a4fc1bf70f435eb69490 Mon Sep 17 00:00:00 2001
From: dominikcrha <crha@havit.cz>
Date: Thu, 7 Sep 2023 11:46:19 +0200
Subject: [PATCH] HxTreeViewItem - fix collapse caret orientation + better
 clickability

---
 .../TreeViews/Internal/HxTreeViewItemInternal.razor   |  8 +++-----
 .../Internal/HxTreeViewItemInternal.razor.css         | 11 ++++++++---
 2 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/Havit.Blazor.Components.Web.Bootstrap/TreeViews/Internal/HxTreeViewItemInternal.razor b/Havit.Blazor.Components.Web.Bootstrap/TreeViews/Internal/HxTreeViewItemInternal.razor
index 7988fbef0..1f416d687 100644
--- a/Havit.Blazor.Components.Web.Bootstrap/TreeViews/Internal/HxTreeViewItemInternal.razor
+++ b/Havit.Blazor.Components.Web.Bootstrap/TreeViews/Internal/HxTreeViewItemInternal.razor
@@ -18,11 +18,9 @@
 	<div class="hx-tree-view-item-expander-container">
 		@if (hasChildren)
 		{
-			<div @onclick:stopPropagation="true">
-				<HxCollapseToggleElement ElementName="div" CollapseTarget="@($"#{collapseId}")" CssClass="hx-tree-view-item-expander">
-					<HxIcon Icon="@BootstrapIcon.ChevronRight" />
-				</HxCollapseToggleElement>
-			</div>
+			<HxCollapseToggleElement ElementName="div" @onclick:stopPropagation CollapseTarget="@($"#{collapseId}")" CssClass="hx-tree-view-item-expander">
+				<HxIcon Icon="@BootstrapIcon.ChevronDown" />
+			</HxCollapseToggleElement>
 		}
 	</div>
     @if (icon != null)
diff --git a/Havit.Blazor.Components.Web.Bootstrap/TreeViews/Internal/HxTreeViewItemInternal.razor.css b/Havit.Blazor.Components.Web.Bootstrap/TreeViews/Internal/HxTreeViewItemInternal.razor.css
index 81c568a1b..5b7960f00 100644
--- a/Havit.Blazor.Components.Web.Bootstrap/TreeViews/Internal/HxTreeViewItemInternal.razor.css
+++ b/Havit.Blazor.Components.Web.Bootstrap/TreeViews/Internal/HxTreeViewItemInternal.razor.css
@@ -42,12 +42,17 @@
 }
 
 ::deep .hx-tree-view-item-expander {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 100%;
+	height: 100%;
 	transition: transform 0.15s ease-in-out;
 	transform: rotate(0deg);
-}
 
-.hx-tree-view-item-expander-container:not(.collapsed) ::deep .hx-tree-view-item-expander {
-	transform: rotate(90deg);
+	&.collapsed {
+		transform: rotate(-90deg);
+	}
 }
 
 .hx-tree-view-item-expander-container {