DOCINFRA-2341_merged_using_automation

ej2-angular-toc.html

@@ -2943,7 +2943,7 @@
     </ul>
  </li> <li>Release Notes
                 <ul>
-				<li>2024 Volume 2 - 26.*<ul><li>Weekly Release<ul><li><a href="/ej2-angular/release-notes/26.2.5">26.2.5</a></li><li><a href="/ej2-angular/release-notes/26.1.42">26.1.42</a></li><li><a href="/ej2-angular/release-notes/26.1.41">26.1.41</a></li><li><a href="/ej2-angular/release-notes/26.1.40">26.1.40</a></li><li><a href="/ej2-angular/release-notes/26.1.39">26.1.39</a></li><li><a href="/ej2-angular/release-notes/26.1.38">26.1.38</a></li></ul></li><li><a href="/ej2-angular/release-notes/26.2.4">26.2.4 Service Pack Release</a></li><li><a href="/ej2-angular/release-notes/26.1.35">26.1.35 Main Release</a></li></ul></li><li>2024 Volume 1 - 25.*<ul><li>Weekly Release<ul><li><a href="/ej2-angular/release-notes/25.2.7">25.2.7</a></li><li><a href="/ej2-angular/release-notes/25.2.6">25.2.6</a></li><li><a href="/ej2-angular/release-notes/25.2.5">25.2.5</a></li><li><a href="/ej2-angular/release-notes/25.2.4">25.2.4</a></li><li><a href="/ej2-angular/release-notes/25.1.42">25.1.42</a></li><li><a href="/ej2-angular/release-notes/25.1.41">25.1.41</a></li><li><a href="/ej2-angular/release-notes/25.1.40">25.1.40</a></li><li><a href="/ej2-angular/release-notes/25.1.39">25.1.39</a></li><li><a href="/ej2-angular/release-notes/25.1.38">25.1.38</a></li><li><a href="/ej2-angular/release-notes/25.1.37">25.1.37</a></li></ul></li><li><a href="/ej2-angular/release-notes/25.2.3">25.2.3 Service Pack Release</a></li><li><a href="/ej2-angular/release-notes/25.1.35">25.1.35 Main Release</a></li></ul></li>
+				<li>2024 Volume 2 - 26.*<ul><li>Weekly Release<ul><li><a href="/ej2-angular/release-notes/26.2.7">26.2.7</a></li><li><a href="/ej2-angular/release-notes/26.2.5">26.2.5</a></li><li><a href="/ej2-angular/release-notes/26.1.42">26.1.42</a></li><li><a href="/ej2-angular/release-notes/26.1.41">26.1.41</a></li><li><a href="/ej2-angular/release-notes/26.1.40">26.1.40</a></li><li><a href="/ej2-angular/release-notes/26.1.39">26.1.39</a></li><li><a href="/ej2-angular/release-notes/26.1.38">26.1.38</a></li></ul></li><li><a href="/ej2-angular/release-notes/26.2.4">26.2.4 Service Pack Release</a></li><li><a href="/ej2-angular/release-notes/26.1.35">26.1.35 Main Release</a></li></ul></li><li>2024 Volume 1 - 25.*<ul><li>Weekly Release<ul><li><a href="/ej2-angular/release-notes/25.2.7">25.2.7</a></li><li><a href="/ej2-angular/release-notes/25.2.6">25.2.6</a></li><li><a href="/ej2-angular/release-notes/25.2.5">25.2.5</a></li><li><a href="/ej2-angular/release-notes/25.2.4">25.2.4</a></li><li><a href="/ej2-angular/release-notes/25.1.42">25.1.42</a></li><li><a href="/ej2-angular/release-notes/25.1.41">25.1.41</a></li><li><a href="/ej2-angular/release-notes/25.1.40">25.1.40</a></li><li><a href="/ej2-angular/release-notes/25.1.39">25.1.39</a></li><li><a href="/ej2-angular/release-notes/25.1.38">25.1.38</a></li><li><a href="/ej2-angular/release-notes/25.1.37">25.1.37</a></li></ul></li><li><a href="/ej2-angular/release-notes/25.2.3">25.2.3 Service Pack Release</a></li><li><a href="/ej2-angular/release-notes/25.1.35">25.1.35 Main Release</a></li></ul></li>
 				<li>2023 Volume 4 - 24.*<ul><li>Weekly Release<ul><li><a href="/ej2-angular/release-notes/24.2.9">24.2.9</a></li><li><a href="/ej2-angular/release-notes/24.2.8">24.2.8</a></li><li><a href="/ej2-angular/release-notes/24.2.7">24.2.7</a></li><li><a href="/ej2-angular/release-notes/24.2.6">24.2.6</a></li><li><a href="/ej2-angular/release-notes/24.2.5">24.2.5</a></li><li><a href="/ej2-angular/release-notes/24.2.4">24.2.4</a></li><li><a href="/ej2-angular/release-notes/24.1.47">24.1.47</a></li><li><a href="/ej2-angular/release-notes/24.1.46">24.1.46</a></li><li><a href="/ej2-angular/release-notes/24.1.45">24.1.45</a></li><li><a href="/ej2-angular/release-notes/24.1.44">24.1.44</a></li><li><a href="/ej2-angular/release-notes/24.1.43">24.1.43</a></li></ul></li>				<li><a href="/ej2-angular/release-notes/24.2.3">24.2.3 Service Pack Release</a></li>
 				<li><a href="/ej2-angular/release-notes/24.1.41">24.1.41 Main Release</a></li></ul></li>
 				<li>2023 Volume 3 - 23.*<ul><li> Weekly Release<ul><li><a href="/ej2-angular/release-notes/23.2.7">23.2.7</a></li><li><a href="/ej2-angular/release-notes/23.2.6">23.2.6</a></li><li><a href="/ej2-angular/release-notes/23.2.5">23.2.5</a></li><li><a href="/ej2-angular/release-notes/23.1.44">23.1.44</a></li><li><a href="/ej2-angular/release-notes/23.1.43">23.1.43</a></li><li><a href="/ej2-angular/release-notes/23.1.42">23.1.42</a></li><li><a href="/ej2-angular/release-notes/23.1.41">23.1.41</a></li><li><a href="/ej2-angular/release-notes/23.1.40">23.1.40</a></li><li><a href="/ej2-angular/release-notes/23.1.39">23.1.39</a></li><li><a href="/ej2-angular/release-notes/23.1.38">23.1.38</a></li></ul></li>

ej2-angular/Release-notes/26.2.7.md

@@ -0,0 +1,16 @@
+---
+title: Essential Studio for Angular Weekly Release Release Notes  
+description: Essential Studio for Angular Weekly Release Release Notes  
+platform: ej2-angular
+documentation: ug
+---
+
+# Essential Studio for Angular  Release Notes  
+
+{% include release-info.html date="July 30, 2024"  version="v26.2.7" %}
+
+{% directory path: _includes/release-notes/v26.2.7 %}
+
+{% include {{file.url}} %}
+
+{% enddirectory %}

ej2-angular/barcode/qrcodegenerator.md

@@ -72,4 +72,38 @@ In barcode generators You can customize the barcode text by using display text p
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "page.domainurl/samples/barcode/qrcode/text-cs1" %}
+{% previewsample "page.domainurl/samples/barcode/qrcode/text-cs1" %}
+
+## Enhancing QR Codes with Icons
+
+The EJ2 Barcode Generator now lets you add a [`logo`](https://ej2.syncfusion.com/angular/documentation/api/barcode/qRCodeLogo/) or icon to your QR codes, boosting their visual appeal, clarity, and even security. Adding a recognizable icon can make it easier for users to identify the source and can help prevent tampering .
+
+### Supported Image Sources
+
+The [`imageSource`](https://ej2.syncfusion.com/angular/documentation/api/barcode/qRCodeLogo/#imagesource) property of the `QRCodeLogo` class supports the following image sources:
+
+- **Local image path**: Specify the path to the image file relative to your project's root directory (e.g., `images/syncfusion.png`) or as an absolute path (e.g., `/assets/icons/logo.svg`).
+- **Remote image URL**: Provide the web address of the image file (e.g., `https://example.com/image.jpg`).
+- **Base64 encoded image data**: Embed the image data directly in the code using a Base64-encoded string (e.g., `data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...`).
+
+### Logo Dimensions
+
+The [`width`](https://ej2.syncfusion.com/angular/documentation/api/barcode/qRCodeLogo/#width) and [`height`](https://ej2.syncfusion.com/angular/documentation/api/barcode/qRCodeLogo/#height) properties of the `QRCodeLogo` class define the dimensions of the logo in pixels. If not specified, both default to 30% of the QR code’s size. The maximum allowed size is 30% of the QR code’s dimensions to ensure optimal readability.
+
+**Note:** Always test the readability of your QR code after adding a logo. Depending on the logo size and QR code content, you might need to adjust the [`errorCorrectionLevel`](https://ej2.syncfusion.com/angular/documentation/api/barcode/errorCorrectionLevel/) property of the `QRCodeGenerator` to `"Medium"` or `"High"` for better reliability.
+
+The following image illustrates QR code with logo:
+
+![logo](images/logo.png)
+
+{% tabs %}
+{% highlight ts tabtitle="app.component.ts" %}
+{% include code-snippet/barcode/qrcode/logo-cs1/src/app.component.ts %}
+{% endhighlight %}
+
+{% highlight ts tabtitle="main.ts" %}
+{% include code-snippet/barcode/qrcode/logo-cs1/src/main.ts %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/samples/barcode/qrcode/logo-cs1" %}

ej2-angular/code-snippet/barcode/qrcode/logo-cs1/angular.json

@@ -0,0 +1,76 @@
+{
+    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+    "version": 1,
+    "newProjectRoot": "projects",
+    "projects": {
+      "syncfusion-component": {
+        "projectType": "application",
+        "schematics": {},
+        "root": "",
+        "sourceRoot": "src",
+        "prefix": "app",
+        "architect": {
+          "build": {
+            "builder": "@angular-devkit/build-angular:browser",
+            "options": {
+              "outputPath": "dist",
+              "index": "index.html",
+              "main": "src/main.ts",
+              "tsConfig": "tsconfig.json",
+              "styles": [
+                "src/styles.css"
+              ],
+              "assets": [
+                {
+                  "glob": "*.css",
+                  "input": "",
+                  "output": ""
+                }
+              ]
+            },
+            "configurations": {
+              "production": {
+                "budgets": [
+                  {
+                    "type": "initial",
+                    "maximumWarning": "500kb",
+                    "maximumError": "10mb"
+                  },
+                  {
+                    "type": "anyComponentStyle",
+                    "maximumWarning": "2kb",
+                    "maximumError": "4kb"
+                  }
+                ],
+                "outputHashing": "all"
+              },
+              "development": {
+                "buildOptimizer": false,
+                "optimization": false,
+                "vendorChunk": true,
+                "extractLicenses": false,
+                "sourceMap": true,
+                "namedChunks": true
+              }
+            },
+            "defaultConfiguration": "production"
+          },
+          "serve": {
+            "builder": "@angular-devkit/build-angular:dev-server",
+            "configurations": {
+              "production": {
+                "buildTarget": "syncfusion-component:build:production"
+              },
+              "development": {
+                "buildTarget": "syncfusion-component:build:development"
+              }
+            },
+            "defaultConfiguration": "development"
+          }
+        }
+      }
+    },
+    "cli": {
+      "analytics": false
+    }
+  }

ej2-angular/code-snippet/barcode/qrcode/logo-cs1/index.css

@@ -0,0 +1,22 @@
+#loader {
+    color: #008cff;
+    font-family:  'Helvetica Neue','calibiri';
+    font-size:16px;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+}
+.animation {
+    background: #333333;
+    border: 1px solid #cecece;
+    box-sizing: border-box;
+    height: 100px;
+    width: 100px;
+}
+
+#chart-container {
+    display: block;
+    height: 350px;
+}

ej2-angular/code-snippet/barcode/qrcode/logo-cs1/index.html

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>EJ2 Animation</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Typescript UI Controls" />
+
+<meta name="author" content="Syncfusion" />
+    <link href="index.css" rel="stylesheet" />
+    <style>
+        #diagram {
+            display: block;
+        }
+        .barcodeStyle {
+            height: 150px;
+            width: 200px;
+            padding-left: 40%;
+            padding-top: 9%;
+        }
+    </style>
+</head>
+<body style="margin-top: 125px">
+    <div class='barcodeStyle'>
+        <app-container>
+            <div id='loader'>Loading....</div>
+        </app-container>
+    </div>
+</body>
+</html>

ej2-angular/code-snippet/barcode/qrcode/logo-cs1/package.json

@@ -0,0 +1,41 @@
+{
+    "name": "syncfusion-component",
+    "version": "0.0.0",
+    "scripts": {
+      "ng": "ng",
+      "start": "ng serve",
+      "build": "ng build",
+      "watch": "ng build --watch --configuration development",
+      "test": "ng test"
+    },
+    "private": true,
+    "dependencies": {
+      "@angular/core": "17.1.2",
+      "@angular/platform-browser": "17.1.2",
+      "@angular/platform-browser-dynamic": "17.1.2",
+      "@syncfusion/ej2-angular-barcode-generator": "*",
+      "@syncfusion/ej2-angular-base": "*",
+      "@angular/animations": "17.1.2",
+      "@angular/common": "17.1.2",
+      "@angular/compiler": "17.1.2",
+      "@angular/forms": "17.1.2",
+      "@angular/router": "17.1.2",
+      "moment": "2.29.4",
+      "rxjs": "7.8.0",
+      "tslib": "2.3.0",
+      "zone.js": "0.14.3"
+    },
+    "devDependencies": {
+      "@angular-devkit/build-angular": "17.1.2",
+      "@angular/cli": "17.1.2",
+      "@angular/compiler-cli": "17.1.2",
+      "@types/jasmine": "4.3.0",
+      "jasmine-core": "4.5.0",
+      "karma": "6.4.0",
+      "karma-chrome-launcher": "3.1.0",
+      "karma-coverage": "2.2.0",
+      "karma-jasmine": "5.1.0",
+      "karma-jasmine-html-reporter": "2.0.0",
+      "typescript": "5.3.3"
+    }
+  }

ej2-angular/code-snippet/barcode/qrcode/logo-cs1/src/app.component.ts

@@ -0,0 +1,32 @@
+import { NgModule } from '@angular/core'
+import { BrowserModule } from '@angular/platform-browser'
+import { BarcodeGeneratorAllModule,QRCodeGeneratorAllModule,DataMatrixGeneratorAllModule } from '@syncfusion/ej2-angular-barcode-generator'
+
+
+
+import { Component ,ViewChild} from "@angular/core";
+import { BarcodeGeneratorComponent  } from '@syncfusion/ej2-angular-barcode-generator';
+
+@Component({
+imports: [
+          BarcodeGeneratorAllModule, QRCodeGeneratorAllModule ,DataMatrixGeneratorAllModule 
+    ],
+
+providers: [ ],
+standalone: true,
+  selector: "app-container",
+  // specifies the template string for the barcode generator component
+  template: `<ejs-qrcodegenerator style="display: block;"  #barcode id="barcode" width="200px" height="150px" [logo] = 'logo' mode="SVG" value="Syncfusion"></ejs-qrcodegenerator>`
+})
+  export class AppComponent {
+    // @ViewChild('barcode')
+    @ViewChild('logo')
+    public logo?: any;
+    ngOnInit(): void {  
+      this.logo = {
+        imageSource:'https://www.syncfusion.com/web-stories/wp-content/uploads/sites/2/2022/02/cropped-Syncfusion-logo.png'
+      }
+    }
+  }
+
+

ej2-angular/code-snippet/barcode/qrcode/logo-cs1/src/main.ts

@@ -0,0 +1,4 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { AppComponent } from './app.component';
+import 'zone.js';
+bootstrapApplication(AppComponent).catch((err) => console.error(err));

ej2-angular/code-snippet/barcode/qrcode/logo-cs1/src/styles.css

@@ -0,0 +1,4 @@
+
+
+@import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-barcode-generator/styles/material.css';

ej2-angular/code-snippet/barcode/qrcode/logo-cs1/tsconfig.json

@@ -0,0 +1,32 @@
+{
+    "compileOnSave": false,
+    "compilerOptions": {
+      "baseUrl": "./",
+      "outDir": "./dist/out-tsc",
+      "forceConsistentCasingInFileNames": true,
+      "strict": true,
+      "noImplicitOverride": true,
+      "noPropertyAccessFromIndexSignature": true,
+      "noImplicitReturns": true,
+      "noFallthroughCasesInSwitch": true,
+      "sourceMap": true,
+      "declaration": false,
+      "downlevelIteration": true,
+      "experimentalDecorators": true,
+      "moduleResolution": "node",
+      "importHelpers": true,
+      "target": "ES2022",
+      "module": "ES2022",
+      "useDefineForClassFields": false,
+      "lib": [
+        "ES2022",
+        "dom"
+      ]
+    },
+    "angularCompilerOptions": {
+      "enableI18nLegacyMessageIdFormat": false,
+      "strictInjectionParameters": true,
+      "strictInputAccessModifiers": true,
+      "strictTemplates": true
+    }
+  }