Merge pull request #809 from Syncfusion-Content/hotfix/hotfix-v29.1.33

DOCINFRA-2341_merged_using_automation

Author: SyncfusionBuild

ej2-angular/ai-assistview/accessibility.md

@@ -73,4 +73,4 @@ The AI AssistView component's accessibility levels are ensured through an [acces
 
 ## See also
 
-* [Accessibility in Syncfusion Angular components](../common/accessibility)
+* [Accessibility in Syncfusion<sup style="font-size:70%">&reg;</sup> Angular components](../common/accessibility)

ej2-angular/ai-assistview/getting-started.md

@@ -41,17 +41,17 @@ ng new my-app
 cd my-app
 ```
 
-## Installing Syncfusion AI AssistView package
+## Installing Syncfusion<sup style="font-size:70%">&reg;</sup> AI AssistView package
 
-Syncfusion packages are distributed in npm as `@syncfusion` scoped packages. You can get all the Angular Syncfusion package from npm [link]( https://www.npmjs.com/search?q=%40syncfusion%2Fej2-angular- ).
+Syncfusion<sup style="font-size:70%">&reg;</sup> packages are distributed in npm as `@syncfusion` scoped packages. You can get all the Angular Syncfusion<sup style="font-size:70%">&reg;</sup> package from npm [link]( https://www.npmjs.com/search?q=%40syncfusion%2Fej2-angular- ).
 
-Currently, Syncfusion provides two types of package structures for Angular components,
+Currently, Syncfusion<sup style="font-size:70%">&reg;</sup> provides two types of package structures for Angular components,
 1. Ivy library distribution package [format](https://v17.angular.io/guide/angular-package-format)
 2. Angular compatibility compiler(Angular’s legacy compilation and rendering pipeline) package.
 
 ### Ivy library distribution package
 
-Syncfusion Angular packages(`>=20.2.36`) has been moved to the Ivy distribution to support the Angular [Ivy](https://docs.angular.lat/guide/ivy) rendering engine and the package are compatible with Angular version 12 and above. To download the package use the below command.
+Syncfusion<sup style="font-size:70%">&reg;</sup> Angular packages(`>=20.2.36`) has been moved to the Ivy distribution to support the Angular [Ivy](https://docs.angular.lat/guide/ivy) rendering engine and the package are compatible with Angular version 12 and above. To download the package use the below command.
 
 Add [`@syncfusion/ej2-angular-interactive-chat`](https://www.npmjs.com/package/@syncfusion/ej2-angular-interactive-chat/v/27.1.48) package to the application.
 
@@ -61,7 +61,7 @@ npm install @syncfusion/ej2-angular-interactive-chat --save
 
 ### Angular compatibility compiled package(ngcc)
 
-For Angular version below 12, you can use the legacy (ngcc) package of the Syncfusion Angular components. To download the `ngcc` package use the below.
+For Angular version below 12, you can use the legacy (ngcc) package of the Syncfusion<sup style="font-size:70%">&reg;</sup> Angular components. To download the `ngcc` package use the below.
 
 Add [`@syncfusion/ej2-angular-interactive-chat@ngcc`](https://www.npmjs.com/package/@syncfusion/ej2-angular-interactive-chat/v/27.1.48-ngcc) package to the application.
 

ej2-angular/chat-ui/accessibility.md

@@ -77,4 +77,4 @@ The Chat UI component's accessibility levels are ensured through an [accessibili
 
 ## See also
 
-* [Accessibility in Syncfusion components](../common/accessibility)
+* [Accessibility in Syncfusion<sup style="font-size:70%">&reg;</sup> components](../common/accessibility)

ej2-angular/chat-ui/getting-started.md

@@ -43,17 +43,17 @@ ng new my-app
 cd my-app
 ```
 
-## Installing Syncfusion Chat UI package
+## Installing Syncfusion<sup style="font-size:70%">&reg;</sup> Chat UI package
 
-Syncfusion packages are distributed in npm as `@syncfusion` scoped packages. You can get all the Angular Syncfusion package from npm [link]( https://www.npmjs.com/search?q=%40syncfusion%2Fej2-angular- ).
+Syncfusion<sup style="font-size:70%">&reg;</sup> packages are distributed in npm as `@syncfusion` scoped packages. You can get all the Angular Syncfusion<sup style="font-size:70%">&reg;</sup> package from npm [link]( https://www.npmjs.com/search?q=%40syncfusion%2Fej2-angular- ).
 
-Currently, Syncfusion provides two types of package structures for Angular components,
+Currently, Syncfusion<sup style="font-size:70%">&reg;</sup> provides two types of package structures for Angular components,
 1. Ivy library distribution package [format](https://v17.angular.io/guide/angular-package-format)
 2. Angular compatibility compiler(Angular’s legacy compilation and rendering pipeline) package.
 
 ### Ivy library distribution package
 
-Syncfusion Angular packages(`>=20.2.36`) has been moved to the Ivy distribution to support the Angular [Ivy](https://docs.angular.lat/guide/ivy) rendering engine and the package are compatible with Angular version 12 and above. To download the package use the below command.
+Syncfusion<sup style="font-size:70%">&reg;</sup> Angular packages(`>=20.2.36`) has been moved to the Ivy distribution to support the Angular [Ivy](https://docs.angular.lat/guide/ivy) rendering engine and the package are compatible with Angular version 12 and above. To download the package use the below command.
 
 Add [`@syncfusion/ej2-angular-interactive-chat`](https://www.npmjs.com/package/@syncfusion/ej2-angular-interactive-chat/v/27.1.48) package to the application.
 
@@ -63,7 +63,7 @@ npm install @syncfusion/ej2-angular-interactive-chat --save
 
 ### Angular compatibility compiled package(ngcc)
 
-For Angular version below 12, you can use the legacy (ngcc) package of the Syncfusion Angular components. To download the `ngcc` package use the below.
+For Angular version below 12, you can use the legacy (ngcc) package of the Syncfusion<sup style="font-size:70%">&reg;</sup> Angular components. To download the `ngcc` package use the below.
 
 Add [`@syncfusion/ej2-angular-interactive-chat@ngcc`](https://www.npmjs.com/package/@syncfusion/ej2-angular-interactive-chat/v/27.1.48-ngcc) package to the application.
 

ej2-angular/pdfviewer/accessibility.md

@@ -8,7 +8,7 @@ documentation: ug
 domainurl: ##DomainURL##
 ---
 
-# Accessibility in Syncfusion Angular PDF Viewer components
+# Accessibility in Syncfusion<sup style="font-size:70%">&reg;</sup> Angular PDF Viewer components
 
 The PDF Viewer component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility.
 
@@ -259,4 +259,4 @@ The accessibility compliance of the PDF Viewer component is shown in the followi
 
 ## See also
 
-* [Accessibility in Syncfusion Angular components](../common/accessibility)
+* [Accessibility in Syncfusion<sup style="font-size:70%">&reg;</sup> Angular components](../common/accessibility)

ej2-angular/pdfviewer/annotation/free-text-annotation.md

@@ -351,7 +351,7 @@ Find the sample [how to move the free text annotation programmatically](https://
 
 ## Get the newly added free text annotation ID
 
-To get the ID of a newly added free text annotation in the Syncfusion PDF viewer, you can use the **annotationAdd()** event. This event is triggered whenever a new annotation is added to the PDF document, and it provides the annotationAddEventHandler object as a parameter. You can access the ID of the new annotation through the AnnotationID property of the annotationAddEventHandler object.
+To get the ID of a newly added free text annotation in the Syncfusion<sup style="font-size:70%">&reg;</sup> PDF viewer, you can use the **annotationAdd()** event. This event is triggered whenever a new annotation is added to the PDF document, and it provides the annotationAddEventHandler object as a parameter. You can access the ID of the new annotation through the AnnotationID property of the annotationAddEventHandler object.
 
 Here is an example of how you can use the **annotationAdd()** event to get the ID of a new free text annotation:
 
@@ -369,7 +369,7 @@ Find the sample [how to get the newly added free text annotation id](https://sta
 
 ## Change the content of an existing Free text annotation programmatically
 
-To change the content of an existing free text annotation in the Syncfusion PDF viewer programmatically, you can use the **editAnnotation()** method.
+To change the content of an existing free text annotation in the Syncfusion<sup style="font-size:70%">&reg;</sup> PDF viewer programmatically, you can use the **editAnnotation()** method.
 
 Here is an example of how you can use the **editAnnotation()** method to change the content of a free text annotation:
 

ej2-angular/pdfviewer/annotation/import-export-annotation.md

@@ -625,6 +625,194 @@ import { PdfViewerComponent, LinkAnnotationService, BookmarkViewService,
 
 >Run the [web service](https://github.com/SyncfusionExamples/EJ2-PDFViewer-WebServices/tree/main/ASP.NET%20Core/PdfViewerWebService_3.0) and then the angular code. Also note that, the XFDF file for importing the annotation should be placed in the location as specified in the GetDocumentPath method of the PdfViewerController.
 
+## Importing Annotation Using Base64 Data
+
+You can import annotations into the Syncfusion Angular PDF Viewer by decoding Base64-encoded JSON annotation data at runtime and passing the parsed object to the importAnnotation API, as shown in the following code snippet.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+
+import { Component, OnInit } from '@angular/core';
+import {
+  LinkAnnotationService, BookmarkViewService, MagnificationService,
+  ThumbnailViewService, ToolbarService, NavigationService,
+  TextSearchService, TextSelectionService, PrintService,
+  FormDesignerService, FormFieldsService, AnnotationService,
+  PageOrganizerService
+} from '@syncfusion/ej2-angular-pdfviewer';
+
+@Component({
+  selector: 'app-root',
+  template: `
+    <!-- Button to trigger annotation import -->
+    <button (click)="fileInput.click()">Import Annotation</button>
+
+    <!-- Hidden file input (only JSON files allowed) -->
+    <input type="file" #fileInput accept=".json" style="display:none" (change)="onFileSelected($event)" />
+
+    <!-- PDF Viewer container -->
+    <div class="content-wrapper">
+      <ejs-pdfviewer id="pdfViewer"
+        [documentPath]="document"
+        [resourceUrl]="resource"
+        style="height:640px;display:block">
+      </ejs-pdfviewer>
+    </div>
+  `,
+  // Register all necessary PDF viewer services
+  providers: [
+    LinkAnnotationService, BookmarkViewService, MagnificationService,
+    ThumbnailViewService, ToolbarService, NavigationService,
+    TextSearchService, TextSelectionService, PrintService,
+    AnnotationService, FormDesignerService, FormFieldsService, PageOrganizerService
+  ]
+})
+export class AppComponent implements OnInit {
+  // URL of the sample PDF document
+  public document: string = 'https://cdn.syncfusion.com/content/pdf/handwritten-signature.pdf';
+
+  // Syncfusion PDF viewer resource URL
+  public resource: string = 'https://cdn.syncfusion.com/ej2/28.1.33/dist/ej2-pdfviewer-lib';
+
+  ngOnInit(): void {}
+
+  /**
+   * Triggered when a file is selected from the input.
+   * Handles reading and importing the JSON annotation file.
+   */
+  onFileSelected(event: any): void {
+    const file = event.target.files[0];
+
+    // Validate that the selected file is a .json file
+    if (!file || !file.name.endsWith('.json')) {
+      alert('Please select a valid JSON file.');
+      return;
+    }
+
+    const reader = new FileReader();
+
+    // When file reading is done
+    reader.onload = (e: any) => {
+      // Extract Base64 string (after the "data:application/json;base64," part)
+      const base64String = e.target.result.split(',')[1];
+
+      // Decode Base64 to original JSON string
+      const decodedJsonString = atob(base64String);
+
+      try {
+        // Parse the JSON string into a JavaScript object
+        const annotationData = JSON.parse(decodedJsonString);
+
+        // Get reference to the PDF viewer instance
+        const viewer = (document.getElementById('pdfViewer') as any).ej2_instances[0];
+
+        // Import the parsed annotation data into the viewer
+        viewer.importAnnotation(annotationData);
+      } catch (err) {
+        // Handle errors (e.g., invalid JSON)
+        console.error('Invalid JSON file:', err);
+        alert('Failed to parse JSON.');
+      }
+    };
+
+    // Start reading the file as a data URL (Base64 encoded)
+    reader.readAsDataURL(file);
+  }
+}
+
+{% endhighlight %}
+{% highlight ts tabtitle="Server-Backed" %}
+
+import { Component, OnInit } from '@angular/core';
+import {
+  LinkAnnotationService, BookmarkViewService, MagnificationService,
+  ThumbnailViewService, ToolbarService, NavigationService,
+  TextSearchService, TextSelectionService, PrintService,
+  FormDesignerService, FormFieldsService, AnnotationService,
+  PageOrganizerService
+} from '@syncfusion/ej2-angular-pdfviewer';
+
+@Component({
+  selector: 'app-root',
+  template: `
+    <!-- Button to trigger annotation import -->
+    <button (click)="fileInput.click()">Import Annotation</button>
+
+    <!-- Hidden file input (only JSON files allowed) -->
+    <input type="file" #fileInput accept=".json" style="display:none" (change)="onFileSelected($event)" />
+
+    <!-- PDF Viewer container -->
+    <div class="content-wrapper">
+      <ejs-pdfviewer id="pdfViewer"
+        [documentPath]="document"
+        [serviceUrl]="service"
+        style="height:640px;display:block">
+      </ejs-pdfviewer>
+    </div>
+  `,
+  // Register all necessary PDF viewer services
+  providers: [
+    LinkAnnotationService, BookmarkViewService, MagnificationService,
+    ThumbnailViewService, ToolbarService, NavigationService,
+    TextSearchService, TextSelectionService, PrintService,
+    AnnotationService, FormDesignerService, FormFieldsService, PageOrganizerService
+  ]
+})
+export class AppComponent implements OnInit {
+  // URL of the sample PDF document
+  public document: string = 'https://cdn.syncfusion.com/content/pdf/handwritten-signature.pdf';
+
+  // Syncfusion PDF viewer resource URL
+  public service: string = 'https://services.syncfusion.com/angular/production/api/pdfviewer';
+
+  ngOnInit(): void {}
+
+  /**
+   * Triggered when a file is selected from the input.
+   * Handles reading and importing the JSON annotation file.
+   */
+  onFileSelected(event: any): void {
+    const file = event.target.files[0];
+
+    // Validate that the selected file is a .json file
+    if (!file || !file.name.endsWith('.json')) {
+      alert('Please select a valid JSON file.');
+      return;
+    }
+
+    const reader = new FileReader();
+
+    // When file reading is done
+    reader.onload = (e: any) => {
+      // Extract Base64 string (after the "data:application/json;base64," part)
+      const base64String = e.target.result.split(',')[1];
+
+      // Decode Base64 to original JSON string
+      const decodedJsonString = atob(base64String);
+
+      try {
+        // Parse the JSON string into a JavaScript object
+        const annotationData = JSON.parse(decodedJsonString);
+
+        // Get reference to the PDF viewer instance
+        const viewer = (document.getElementById('pdfViewer') as any).ej2_instances[0];
+
+        // Import the parsed annotation data into the viewer
+        viewer.importAnnotation(annotationData);
+      } catch (err) {
+        // Handle errors (e.g., invalid JSON)
+        console.error('Invalid JSON file:', err);
+        alert('Failed to parse JSON.');
+      }
+    };
+
+    // Start reading the file as a data URL (Base64 encoded)
+    reader.readAsDataURL(file);
+  }
+}
+{% endhighlight %}
+{% endtabs %}
+
 ## Exporting annotation from the PDF document
 
 The PDF Viewer control provides the support to export the annotations as JSON file or JSON object and XFDF file using annotation toolbar.

ej2-angular/pdfviewer/annotation/ink-annotation.md

@@ -199,7 +199,7 @@ export class AppComponent implements OnInit {
 
 ## Edit the existing Ink annotation programmatically
 
-To modify existing Ink annotation in the Syncfusion PDF viewer programmatically, you can use the **editAnnotation()** method.
+To modify existing Ink annotation in the Syncfusion<sup style="font-size:70%">&reg;</sup> PDF viewer programmatically, you can use the **editAnnotation()** method.
 
 Here is an example of how you can use the **editAnnotation()** method:
 

ej2-angular/pdfviewer/annotation/measurement-annotation.md

@@ -291,7 +291,7 @@ export class AppComponent implements OnInit {
 
 ## Edit the existing measurement annotation programmatically
 
-To modify existing measurement annotation in the Syncfusion PDF viewer programmatically, you can use the **editAnnotation()** method.
+To modify existing measurement annotation in the Syncfusion<sup style="font-size:70%">&reg;</sup> PDF viewer programmatically, you can use the **editAnnotation()** method.
 
 Here is an example of how you can use the **editAnnotation()** method:
 

ej2-angular/pdfviewer/annotation/shape-annotation.md

@@ -288,7 +288,7 @@ export class AppComponent implements OnInit {
 
 ## Edit the existing shape annotation programmatically
 
-To modify existing shape annotation in the Syncfusion PDF viewer programmatically, you can use the **editAnnotation()** method.
+To modify existing shape annotation in the Syncfusion<sup style="font-size:70%">&reg;</sup> PDF viewer programmatically, you can use the **editAnnotation()** method.
 
 Here is an example of how you can use the **editAnnotation()** method: