Merge branch 'development' into 957498-SmartComponents

Author: ArunKumar-SF3979

blazor-toc.html

@@ -105,6 +105,9 @@
 			<li>
 				<a href="/blazor/getting-started/license-key/how-to-register-in-a-razor-class-library">Register License Key in a Razor Class Library Application</a>
 			</li>
+			<li>
+				<a href="/blazor/getting-started/license-key/how-to-register-syncfusion-license-securely-in-blazor-wasm-app">How to Register Syncfusion License Key Securely in Blazor WASM App?</a>
+			</li>
 			<li>
 				<a href="/blazor/getting-started/license-key/CI-license-validation">How to Validate Syncfusion License Key In CI Services?</a>
 			</li>

blazor/common/how-to/add-blazor-component-to-the-toolbox.md

@@ -9,22 +9,23 @@ documentation: ug
 
 # How to add Syncfusion Component to the toolbox in Blazor Application
 
-This section explains how to add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component to the toolbox. To customize the Visual Studio Toolbox for Blazor, which by default shows HTML components and Bootstrap snippets, you can open the Toolbox by pressing `Ctrl+Alt+X` or navigating to **View → Toolbox** in the menu.
+This section provides step-by-step guidance on how to add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components to the Visual Studio Toolbox. By default, the Toolbox displays HTML elements and Bootstrap snippets. To customize it for Blazor development, open the Toolbox by pressing `Ctrl + Alt + X` or by navigating to **View → Toolbox** from the top menu.
 
 To include Syncfusion components for Blazor in the Toolbox, follow these steps:
 
-1. Right-click anywhere in the Toolbox window and choose Add Tab from the context menu. Enter a name for the new tab, such as Syncfusion Blazor Components, and press Enter to create it.
+1. Right-click anywhere within the Visual Studio Toolbox window, select **Add Tab** from the context menu. Enter a name for the new tab such as Syncfusion Blazor Components and press Enter to create it.
 
 ![Add new tab in toolbox](images/new-tab-toolbox.png)
 
-2. In a code editor, write or paste a code snippet for a Blazor component, such as a Syncfusion Calendar. Highlight the code, then drag and drop it into the newly created tab in the Toolbox.
+2. In the code editor, **write or paste a Blazor component snippet**, such as the Syncfusion SfCalendar. Once the code is in place, **select the entire code snippet**, then **drag and drop it** into the newly created tab in the Visual Studio Toolbox.
 
 ![Add code snippet to toolbox](images/add-snippet.gif)
 
-3. The Toolbox will automatically assign a name to the item based on the code snippet. You can rename it to something more descriptive, like **SfCalendar**, for better clarity.
+3. Once the code snippet is added, the Toolbox will automatically assign it a default name based on the snippet content.
+To improve clarity, right-click the item, select **Rename**, and enter a more descriptive name—such as **SfCalendar**.
 
 ![Update name](images/update-name.png)
 
-4. Once added, you can drag the component from the Toolbox directly into your code editor for use in your Blazor project.
+4. After adding the component to the Toolbox, simply **drag the component from the Toolbox into your code editor** to seamlessly use it into your Blazor project.
 
-![Drag component to editor](images/drag-component.gif)
+![Drag component to editor](images/drag-component.gif)

blazor/getting-started/license-key/how-to-register-syncfusion-license-securely-in-blazor-wasm-app.md

@@ -0,0 +1,48 @@
+---
+layout: post
+title: How to Register Syncfusion License Key Securely in Blazor WASM App?
+description: Learn how to securely register a Syncfusion license key in your Blazor WebAssembly (WASM) application.
+platform: Blazor
+component: Common
+documentation: ug
+---
+
+# Secure Registration of Syncfusion License Keys in Blazor WebAssembly Applications
+
+Securely managing license keys in Blazor WebAssembly (WASM) applications is essential to prevent unauthorized access and ensure compliance. Registering a license key in the `Program.cs` file exposes it in the browser through DLLs, creating security risks.
+
+## Recommended Solution: Use Licensed NuGet Packages
+
+Syncfusion recommends using licensed NuGet packages, distributed with the licensed Blazor Product in Volume and Service Pack (SP) releases. These packages eliminate the need to register the license key in the application code.
+
+### Benefits of Using Licensed NuGet Packages
+
+- **Enhanced Security:** Prevents license key exposure in the browser.
+- **Simplified Deployment:** Removes the need for manual license key registration.
+
+## Reference: Syncfusion Blazor Web Installer User Guide
+
+Refer to the Syncfusion documentation to download and install the licensed Blazor Product:
+
+- [Download Instructions](https://blazor.syncfusion.com/documentation/installation/web-installer/how-to-download)
+- [Installation Guide](https://blazor.syncfusion.com/documentation/installation/web-installer/how-to-install)
+
+These steps ensure secure and compliant Blazor WASM applications, preventing license key exposure.
+
+## Using Licensed NuGet Packages
+
+Build your Blazor WASM application using licensed NuGet packages from these sources:
+
+- **Local Folder:** Store packages locally and configure your project for restoration.
+- **Private Repository Manager:** Host and manage packages using a private NuGet repository manager like Nexus.
+
+## Securely manage Syncfusion license keys using Azure Key Vault
+
+You can integrate Azure Key Vault into your application to retrieve the license key at runtime, ensuring it is never exposed in the browser or stored in the client-side code.
+
+For enhanced security, especially in cloud-hosted environments, store and access license keys securely using Azure Key Vault. This method keeps sensitive information out of your source code and configuration files.
+
+Integrate Azure Key Vault to retrieve the license key at runtime, preventing browser exposure or storage in client-side code.
+
+For detailed steps, refer to:
+[Securely Store and Use Syncfusion License Keys in Azure Key Vault](https://help.syncfusion.com/common/essential-studio/licensing/licensing-faq/how-to-securely-store-and-use-syncfusion-license-keys-in-azure-key-vault)

blazor/getting-started/maui-blazor-web-app.md

@@ -14,15 +14,15 @@ This section explains how to create and run the first .NET Multi-platform Blazor
 
 ## What is .NET MAUI Blazor Hybrid and Web App?
 
-.NET MAUI Blazor Web App is a hybrid application that leverages a Razor Class Library (RCL) to define reusable Blazor components. These components are shared between a Blazor WebAssembly or Server app and a .NET MAUI Blazor app. This setup allows developers to create a unified web-based UI and reuse it across mobile, desktop, and browser platforms.
+[.NET MAUI Blazor Web App](https://learn.microsoft.com/en-us/aspnet/core/blazor/hybrid/tutorials/maui-blazor-web-app?view=aspnetcore-9.0) is a hybrid application that leverages a Razor Class Library (RCL) to define reusable Blazor components. These components are shared between a Blazor WebAssembly or Server app and a .NET MAUI Blazor app. This setup allows developers to create a unified web-based UI and **reuse it across mobile, desktop, and browser platforms**.
 
 By sharing UI components between native and web apps, this approach ensures consistent user experiences, promotes maximum code reuse, and simplifies maintenance for applications that target multiple environments.
 
-Visual Studio provides **.NET MAUI Blazor Hybrid and Web App** template to create .NET MAUI Blazor Hybrid app with a Blazor Web App.
+Visual Studio provides **[.NET MAUI Blazor Hybrid and Web App](https://learn.microsoft.com/en-us/aspnet/core/blazor/hybrid/tutorials/maui-blazor-web-app?view=aspnetcore-9.0)** template to create .NET MAUI Blazor Hybrid app with a Blazor Web App.
 
 ## Prerequisites
 
-* .NET SDK 9.0 (Latest .NET SDK 9.0.101 or above)
+* .NET SDK 9.0 and later.
 
 * The latest preview of Visual Studio 2022 17.3 or above, with required workloads:
    * [Mobile development with .NET](https://learn.microsoft.com/en-us/dotnet/maui/get-started/installation?tabs=vswin)
@@ -36,7 +36,7 @@ You can create a **.NET MAUI Blazor Hybrid and Blazor Web App** using Visual Stu
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Calendars and Themes NuGet in the App
 
-Here's an example of how to add **Blazor Calendar** component in the app's shared folder, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same.
+Here's an example of how to add **Blazor Calendar component in the app's shared folder**, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same.
 
 {% tabs %}
 {% highlight C# tabtitle="Package Manager" %}
@@ -95,9 +95,15 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A
 <head>
     ....
     <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
-    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
 </head>
+
+<body>
+    ....
+    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
+</body>
+
 ```
+
 N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application.
 
 ## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component

blazor/pdfviewer-2/annotation/free-text-annotation.md

@@ -324,6 +324,30 @@ The following example demonstrates how to load, edit, and save custom fonts in F
 
 [View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Annotations/FreeText/Custom%20Font%20Support%20For%20FreeText%20Annotation).
 
+To ensure proper and seamless execution when using Google API fonts in the PDF Viewer component, it's essential to load these fonts into the sample application as well. This is particularly important because FreeText annotations are rendered directly onto the canvas, making it mandatory to have the fonts available in the sample for accurate rendering.
+
+The following example illustrates how to load custom fonts in FreeText annotations using fonts from Google Fonts or other external sources.
+
+```cshtml
+<script>
+    window.addEventListener('DOMContentLoaded', () => {
+        var fontFamily = ["Allura, Tangerine, Sacramento, Inspiration"];
+        for (var fontIndex=0; fontIndex<fontFamily.length; fontIndex++)
+        {
+            document.fonts.load(`16px ${fontFamily[fontIndex]}`).then(() => {
+                console.log(`Font "${fontFamily[fontIndex]}" loaded successfully.`);
+            }).catch(err => {
+                console.error(`Failed to load font "${font}":`, err);
+            });
+        }
+    });
+</script>
+```
+
+>**Note:** If external fonts are not properly loaded in the environment, it may lead to slight inconsistencies when importing and rendering free text annotations using those custom fonts. This issue typically occurs only with fonts that are referenced externally, such as those loaded from web-based sources.
+
+[View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Annotations/FreeText/Load%20Custom%20Font%20From%20External%20Links).
+
 ## See also
 
 * [How to delete the annotation programmatically](./text-markup-annotation#delete-annotation-programmatically)