V4.0 uses a service declared via DI

Author: Christophe Peugnet

.github/workflows/ci.yml

@@ -23,7 +23,7 @@ jobs:
 
       - name: Dotnet Publish
         run: 
-            dotnet publish  --configuration Release -f net8.0
+            dotnet publish  --configuration Release -f net9.0
 
       - name: Change base-tag in index.html to repo name
         run: sed -i 's/<base href="\/" \/>/<base href="\/${{ env.REPO_NAME }}\/" \/>/g' $GITHUB_WORKSPACE/$PUBLISH_FOLDER/index.html

Blazor-Color-Picker-Library/BlazorColorPicker.csproj

@@ -5,13 +5,13 @@
     <RootNamespace>BlazorColorPicker</RootNamespace>
     <Authors>Christophe Peugnet</Authors>
     <PackageIcon>icon.png</PackageIcon>
-    <Version>3.1.2</Version>
+    <Version>4.0.0</Version>
     <Description>Opens a modal palette with the Material colors for Blazor Application</Description>
     <PackageProjectUrl>https://github.com/tossnet/Blazor-Color-Picker</PackageProjectUrl>
     <RepositoryUrl>https://github.com/tossnet/Blazor-Color-Picker</RepositoryUrl>
     <RepositoryType>git</RepositoryType>
     <PackageReleaseNotes>Update nuget package</PackageReleaseNotes>
-    <Copyright>Copyright 2020-2024</Copyright>
+    <Copyright>Copyright 2020-2025</Copyright>
     <PackageTags>blazor, color, picker, material, component</PackageTags>
     <GeneratePackageOnBuild>true</GeneratePackageOnBuild>
     <AssemblyVersion>2.0.0.0</AssemblyVersion>
@@ -28,6 +28,9 @@
     </None>
   </ItemGroup>
 
+  <PropertyGroup Condition="'$(Configuration)'=='Release'">
+  	<GeneratePackageOnBuild>true</GeneratePackageOnBuild>
+  </PropertyGroup>
 
   <ItemGroup Condition="'$(TargetFramework)' == 'net8.0'">
   	<PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="8.0.11" />
@@ -38,7 +41,7 @@
   </ItemGroup>
 
   <ItemGroup Condition="'$(TargetFramework)' == 'net9.0'">
-  	<PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="9.0" />
+  	<PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="9.0.3" />
   </ItemGroup>
 
 

Blazor-Color-Picker-Library/ColorPicker.razor

@@ -1,33 +1,34 @@
-
-<div @ref="myPalette"
-     class="color-picker-modal @CssClass"
-     tabindex="0" 
-     @onkeydown="@KeyDown" >
-    <div class="color-picker-content" 
-         style="@Style">
-        @if (!string.IsNullOrEmpty(Title))
-        {
-            <div class="color-picker-header">
-                <h5 class="color-picker-title">@Title</h5>
-                <span class="color-picker-close-button" @onclick="Close">X</span>
-            </div>
-        }
-        <div class="color-picker-body">
-            <div class="color-picker-palette" style="@CustomStyle @Style">
-                @foreach (string item in colors)
-                {
-                    <div class="color-picker-case text-center" 
-                         style="background-color:@item"
-                         @onclick="() => ColorClick(item)">
-                        @if (MyColor == item)
-                        {
-                            <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24"><path d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z" /></svg>
-                        }
-                    </div>
-                }
-            </div>
-        </div>
-
-    </div>
-</div>
+@if (IsVisible)
+{
+	<div @ref="Element"
+	     class="color-picker-modal @CssClass"
+	     tabindex="0" 
+	     @onkeydown="@KeyDown" >
+	    <div class="color-picker-content" 
+	         style="@Parameters.Style">
+	        @if (!string.IsNullOrEmpty(Parameters.Title))
+	        {
+		        <div class="color-picker-header">
+		            <h5 class="color-picker-title">@Parameters.Title</h5>
+				    <span class="color-picker-close-button" @onclick="HandleCancel">X</span>
+		        </div>
+	        }
+	        <div class="color-picker-body">
+	            <div class="color-picker-palette" style="@CustomStyle @Parameters.Style">
+	                @foreach (string item in colors)
+	                {
+		                <div class="color-picker-case text-center" 
+		                     style="background-color:@item"
+		                     @onclick="() => ColorClick(item)">
+		                    @if (Parameters.ColorSelected == item)
+		                    {
+			                    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24"><path d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z" /></svg>
+		                    }
+		                </div>
+	                }
+	            </div>
+	        </div>
 
+	    </div>
+	</div>
+}