Integrated latest changes at 12-03-2024 10:30:09 PM

Author: SyncfusionBuild

ej2-angular-toc.html

@@ -3059,6 +3059,7 @@
         <li><a href="/ej2-angular/uploader/form-support">Form Support</a></li>
         <li><a href="/ej2-angular/uploader/template">Template</a></li>
         <li><a href="/ej2-angular/uploader/localization">Localization</a></li>
+        <li><a href="/ej2-angular/uploader/jwt-authentication">JWT Authentication</a></li>
         <li><a href="/ej2-angular/uploader/accessibility">Accessibility</a></li>
         <li><a href="/ej2-angular/uploader/style-appearance">Style and Appearance</a></li>
         <li>How To

ej2-angular/code-snippet/diagram/commands/grouping-cs1/src/app.component.ts

@@ -10,7 +10,7 @@ import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
     standalone: true,
     selector: "app-container",
     template: `<label>( CTRL + G ) </label><button (click)="group()">Group</button>
-   <label>( CTRL + Shift + G) </label> <button (click)="unGroup()">Un Group</button>
+   <label>( CTRL + Shift + U) </label> <button (click)="unGroup()">Un Group</button>
     <ejs-diagram #diagram id="diagram" width="100%" height="580px" [getNodeDefaults] ='getNodeDefaults' >
         <e-nodes>
             <e-node id='node1' [offsetX]=100 [offsetY]=100>

ej2-angular/code-snippet/diagram/layers/layers-cs5/src/app.component.ts

@@ -9,6 +9,7 @@ providers: [ ],
 standalone: true,
     selector: "app-container",
     template: `
+    <button (click)="removeLayer()">removeLayer</button>
     <ejs-diagram #diagram id="diagram" width="100%" height="580px" [layers]="layers">
     <e-nodes>
             <e-node id='node1' [width]=100 [height]=100 [offsetX]=100 [offsetY]=100 >
@@ -24,8 +25,7 @@ standalone: true,
                 </e-node-annotations>
             </e-node>
     </e-nodes>
-    </ejs-diagram>
-    <button (click)="removeLayer()">removeLayer</button>`,
+    </ejs-diagram>`,
     encapsulation: ViewEncapsulation.None
 })
 export class AppComponent {

ej2-angular/code-snippet/diagram/layers/layers-cs6/src/app.component.ts

@@ -9,6 +9,7 @@ providers: [ ],
 standalone: true,
     selector: "app-container",
     template: `
+    <button (click)="moveObjects()">moveObjects</button>
     <ejs-diagram #diagram id="diagram" width="100%" height="580px" [layers]="layers">
     <e-nodes>
             <e-node id='node1' [width]=100 [height]=100 [offsetX]=100 [offsetY]=100 >
@@ -30,8 +31,7 @@ standalone: true,
                 </e-node-annotations>
             </e-node>
     </e-nodes>
-    </ejs-diagram>
-    <button (click)="moveObjects()">moveObjects</button>`,
+    </ejs-diagram>`,
     encapsulation: ViewEncapsulation.None
 })
 export class AppComponent {
@@ -59,5 +59,6 @@ export class AppComponent {
      */
      moveObjects() {
         (this.diagram as any).moveObjects(['node1'], 'layer2');
+        console.log(this.layers);
     }
 }

ej2-angular/code-snippet/diagram/layers/layers-cs7/src/app.component.ts

@@ -9,6 +9,8 @@ providers: [ ],
 standalone: true,
     selector: "app-container",
     template: `
+    <button (click)="bringLayerForward()">bringLayerForward</button>
+    <button (click)="sendLayerBackward()">sendLayerBackward</button>
     <ejs-diagram #diagram id="diagram" width="100%" height="580px" [layers]="layers">
     <e-nodes>
             <e-node id='node1' [width]=100 [height]=100 [offsetX]=100 [offsetY]=100 >
@@ -30,9 +32,7 @@ standalone: true,
                 </e-node-annotations>
             </e-node>
     </e-nodes>
-    </ejs-diagram>
-    <button (click)="bringLayerForward()">bringLayerForward</button>
-    <button (click)="sendLayerBackward()">sendLayerBackward</button>`,
+    </ejs-diagram>`,
     encapsulation: ViewEncapsulation.None
 })
 export class AppComponent {

ej2-angular/code-snippet/diagram/layers/layers-cs8/src/app.component.ts

@@ -9,6 +9,7 @@ providers: [ ],
 standalone: true,
     selector: "app-container",
     template: `
+    <button (click)="clonelayer()">clonelayer</button>
     <ejs-diagram #diagram id="diagram" width="100%" height="580px" [layers]="layers">
     <e-nodes>
             <e-node id='node1' [width]=100 [height]=100 [offsetX]=100 [offsetY]=100 >
@@ -30,8 +31,7 @@ standalone: true,
                 </e-node-annotations>
             </e-node>
     </e-nodes>
-    </ejs-diagram>
-    <button (click)="clonelayer()">clonelayer</button>`,
+    </ejs-diagram>`,
     encapsulation: ViewEncapsulation.None
 })
 export class AppComponent {

ej2-angular/code-snippet/diagram/nodes/node-expandAndCollapse-cs1/src/app.component.ts

@@ -64,7 +64,7 @@ export class AppComponent {
       (obj.expandIcon = {
         height: 15,
         width: 15,
-        shape: 'Plus',
+        shape: 'Minus',
         fill: 'lightgray',
         offset: {
           x: 0.5,
@@ -77,7 +77,7 @@ export class AppComponent {
     };
     obj.collapseIcon.height = 15;
     obj.collapseIcon.width = 15;
-    obj.collapseIcon.shape = 'Minus';
+    obj.collapseIcon.shape = 'Plus';
     obj.borderColor = 'white';
     obj.backgroundColor = '#6BA5D7';
     obj.borderWidth = 1;

ej2-angular/code-snippet/diagram/nodes/node-expandAndCollapse-cs2/src/app.component.ts

@@ -62,7 +62,7 @@ export class AppComponent {
     (obj.height = 40),
       (obj.width = 100),
       (obj.expandIcon = {
-        shape: 'ArrowDown',
+        shape: 'ArrowUp',
         width: 20,
         height: 20,
         fill: 'red',
@@ -80,7 +80,7 @@ export class AppComponent {
         x: 0.5,
         y: 0.85,
       },
-      shape: 'ArrowUp',
+      shape: 'ArrowDown',
       width: 20,
       height: 20,
       fill: 'green',
@@ -91,7 +91,6 @@ export class AppComponent {
     };
     obj.collapseIcon.height = 15;
     obj.collapseIcon.width = 15;
-    obj.collapseIcon.shape = 'Minus';
     obj.borderColor = 'white';
     obj.backgroundColor = '#6BA5D7';
     obj.borderWidth = 1;

ej2-angular/code-snippet/diagram/ports/add-cs1/src/app.component.ts

@@ -10,12 +10,12 @@ providers: [ ],
 standalone: true,
   selector: "app-container",
   // specifies the template string for the diagram component
-  template: `<ejs-diagram #diagram id="diagram" width="100%" height="580px" >
+  template: `<button (click)='addPort()'>AddPort</button>
+    <ejs-diagram #diagram id="diagram" width="100%" height="580px" >
         <e-nodes>
             <e-node id='node1' [offsetX]=250 [offsetY]=250 [width]=100 [height]=100></e-node>
         </e-nodes>
-    </ejs-diagram>
-    <button (click)='addPort()'>AddPort</button>`
+    </ejs-diagram>`
 })
 export class AppComponent {
     @ViewChild("diagram")

ej2-angular/code-snippet/diagram/ports/connectionPort/src/app.component.ts

@@ -9,7 +9,8 @@ imports: [
 providers: [ ],
 standalone: true,
     selector: "app-container",
-    template: `<ejs-diagram #diagram id="diagram" width="100%" height="580px" >
+    template: `<button (click)='portDirection()'>Update Port Direction</button>
+    <ejs-diagram #diagram id="diagram" width="100%" height="580px" >
         <e-nodes>
             <e-node id='node1' [offsetX]=200 [offsetY]=300 [width]=100 [height]=100 [ports]='port1'>
             </e-node>
@@ -20,8 +21,7 @@ standalone: true,
             <e-connector id='connector' type='Orthogonal' sourceID='node1' sourcePortID='port1' targetID='node2' targetPortID='port2'>
             </e-connector>
         </e-connectors>
-    </ejs-diagram>
-    <button (click)='portDirection()'>Update Port Direction</button>`,
+    </ejs-diagram>`,
     encapsulation: ViewEncapsulation.None
 })
 export class AppComponent {

ej2-angular/code-snippet/diagram/ports/edges-cs1/src/app.component.ts

@@ -9,7 +9,9 @@ imports: [
 providers: [ ],
 standalone: true,
     selector: "app-container",
-    template: `<ejs-diagram #diagram id="diagram" width="100%" height="580px">
+    template: `<button (click)='getInEdges()'>Get InEdges</button>
+    <button (click)='getOutEdges()'>Get OutEdges</button>
+    <ejs-diagram #diagram id="diagram" width="100%" height="580px">
         <e-nodes>
             <e-node id='node1' [offsetX]=250 [offsetY]=250 [width]=100 [height]=100 [ports]='port1'>
             </e-node>
@@ -22,9 +24,7 @@ standalone: true,
             <e-connector id='connector2' type='Orthogonal' sourceID='node2' sourcePortID='port4' targetID='node1' targetPortID='port2'>
             </e-connector>
         </e-connectors>
-    </ejs-diagram>
-    <button (click)='getInEdges()'>Get InEdges</button>
-    <button (click)='getOutEdges()'>Get OutEdges</button>`,
+    </ejs-diagram>`,
     encapsulation: ViewEncapsulation.None
 })
 export class AppComponent {

ej2-angular/code-snippet/diagram/ports/node-cs1/src/app.component.ts

@@ -10,12 +10,12 @@ providers: [ ],
 standalone: true,
   selector: "app-container",
   // specifies the template string for the diagram component
-  template: `<ejs-diagram #diagram id="diagram" width="100%" height="580px" >
+  template: `<button (click)='updatePorts()'>Update Ports</button>
+    <ejs-diagram #diagram id="diagram" width="100%" height="580px" >
         <e-nodes>
             <e-node id='node1' [offsetX]=150 [offsetY]=150 [width]=100 [height]=100 [ports]='ports'></e-node>
         </e-nodes>
-    </ejs-diagram>
-    <button (click)='updatePorts()'>Update Ports</button>`
+    </ejs-diagram>`
 })
 export class AppComponent {
     @ViewChild("diagram")

ej2-angular/code-snippet/diagram/ports/remove-cs1/src/app.component.ts

@@ -10,12 +10,12 @@ providers: [ ],
 standalone: true,
   selector: "app-container",
   // specifies the template string for the diagram component
-  template: `<ejs-diagram #diagram id="diagram" width="100%" height="580px" >
+  template: `<button (click)='removePorts()'>Remove Ports</button>
+    <ejs-diagram #diagram id="diagram" width="100%" height="580px" >
         <e-nodes>
             <e-node id='node1' [offsetX]=250 [offsetY]=250 [width]=100 [height]=100 [ports]='ports'></e-node>
         </e-nodes>
-    </ejs-diagram>
-    <button (click)='removePorts()'>Remove Ports</button>`
+    </ejs-diagram>`
 })
 export class AppComponent {
     @ViewChild("diagram")

ej2-angular/code-snippet/tab/dynamic-tab-cs1/src/app.component.ts

@@ -37,8 +37,7 @@ export class AppComponent {
       @ViewChild('element') tabInstance?: TabComponent;
 
     public totalItems?: number;
-    public headerText: Object = [{ 'text': 'Tab1' }, { 'iconCss': 'e-add-icon' }];
-
+    public headerText: { text?: string, iconCss?: string }[] = [{ 'text': 'Tab1' }, { 'iconCss': 'e-add-icon' }];
     public tabCreated(): void {
         let tooltip: Tooltip = new Tooltip({
             content: 'Add Tab'

ej2-angular/diagram/images/minSize-MaxSizeGif.gif

@@ -10,12 +10,12 @@
 <meta name="author" content="Syncfusion">
     <style>#loader{color:#008cff;height:40px;width:30%;position:absolute;top:45%;left:45%}#wrapper{width:250px;margin:0 auto}</style><link href="index.css" rel="stylesheet" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="index.css"></noscript>
     <!-- Here we have used CDN links for our preview purpose  -->
-<style>@import"https://fonts.googleapis.com/css?family=Roboto:400,500,700"</style><link rel="stylesheet" href="styles.4a9b6c6cb4c38c4a.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="styles.4a9b6c6cb4c38c4a.css"></noscript></head>
+<style>@import"https://fonts.googleapis.com/css?family=Roboto:400,500,700"</style><link rel="stylesheet" href="styles.7c8fa4f5dbbaac6b.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="styles.7c8fa4f5dbbaac6b.css"></noscript></head>
 <body>
     <div id="wrapper" style="margin-top: 20px">
         <app-root> 
             <div id="loader">LOADING....</div>
         </app-root>
     </div>
-<script src="runtime.cf3bdadb8fd8abdc.js" type="module"></script><script src="main.35005b000e4290ee.js" type="module"></script></body>
+<script src="runtime.cf3bdadb8fd8abdc.js" type="module"></script><script src="main.d23860425fb20c59.js" type="module"></script></body>
 </html>

ej2-angular/samples/multiselect/getting-started-cs10/index.html

@@ -10,12 +10,12 @@
 <meta name="author" content="Syncfusion">
     <style>#loader{color:#008cff;height:40px;width:30%;position:absolute;top:45%;left:45%}#wrapper{width:250px;margin:0 auto}</style><link href="index.css" rel="stylesheet" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="index.css"></noscript>
     <!-- Here we have used CDN links for our preview purpose  -->
-<style>@import"https://fonts.googleapis.com/css?family=Roboto:400,500,700"</style><link rel="stylesheet" href="styles.4a9b6c6cb4c38c4a.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="styles.4a9b6c6cb4c38c4a.css"></noscript></head>
+<style>@import"https://fonts.googleapis.com/css?family=Roboto:400,500,700"</style><link rel="stylesheet" href="styles.7c8fa4f5dbbaac6b.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="styles.7c8fa4f5dbbaac6b.css"></noscript></head>
 <body>
     <div id="wrapper" style="margin-top: 20px">
         <app-root> 
             <div id="loader">LOADING....</div>
         </app-root>
     </div>
-<script src="runtime.cf3bdadb8fd8abdc.js" type="module"></script><script src="main.cf922da9fede0901.js" type="module"></script></body>
+<script src="runtime.cf3bdadb8fd8abdc.js" type="module"></script><script src="main.9f4625d897908fff.js" type="module"></script></body>
 </html>

ej2-angular/samples/multiselect/getting-started-cs10/main.35005b000e4290ee.js

@@ -10,12 +10,12 @@
 <meta name="author" content="Syncfusion">
     <style>#loader{color:#008cff;height:40px;width:30%;position:absolute;top:45%;left:45%}#wrapper{width:250px;margin:0 auto}</style><link href="index.css" rel="stylesheet" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="index.css"></noscript>
     <!-- Here we have used CDN links for our preview purpose  -->
-<style>@import"https://fonts.googleapis.com/css?family=Roboto:400,500,700"</style><link rel="stylesheet" href="styles.4a9b6c6cb4c38c4a.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="styles.4a9b6c6cb4c38c4a.css"></noscript></head>
+<style>@import"https://fonts.googleapis.com/css?family=Roboto:400,500,700"</style><link rel="stylesheet" href="styles.7c8fa4f5dbbaac6b.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="styles.7c8fa4f5dbbaac6b.css"></noscript></head>
 <body>
     <div id="wrapper" style="margin-top: 20px">
         <app-root> 
             <div id="loader">LOADING....</div>
         </app-root>
     </div>
-<script src="runtime.cf3bdadb8fd8abdc.js" type="module"></script><script src="main.35c64c9fbc7c231b.js" type="module"></script></body>
+<script src="runtime.cf3bdadb8fd8abdc.js" type="module"></script><script src="main.377b790582036a91.js" type="module"></script></body>
 </html>

ej2-angular/samples/multiselect/getting-started-cs10/main.d23860425fb20c59.js

@@ -10,12 +10,12 @@
 <meta name="author" content="Syncfusion">
     <style>#loader{color:#008cff;height:40px;width:30%;position:absolute;top:45%;left:45%}#wrapper{width:250px;margin:0 auto}</style><link href="index.css" rel="stylesheet" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="index.css"></noscript>
     <!-- Here we have used CDN links for our preview purpose  -->
-<style>@import"https://fonts.googleapis.com/css?family=Roboto:400,500,700"</style><link rel="stylesheet" href="styles.4a9b6c6cb4c38c4a.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="styles.4a9b6c6cb4c38c4a.css"></noscript></head>
+<style>@import"https://fonts.googleapis.com/css?family=Roboto:400,500,700"</style><link rel="stylesheet" href="styles.7c8fa4f5dbbaac6b.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="styles.7c8fa4f5dbbaac6b.css"></noscript></head>
 <body>
     <div id="wrapper" style="margin-top: 20px">
         <app-root> 
             <div id="loader">LOADING....</div>
         </app-root>
     </div>
-<script src="runtime.cf3bdadb8fd8abdc.js" type="module"></script><script src="main.4910e14ada36579e.js" type="module"></script></body>
+<script src="runtime.cf3bdadb8fd8abdc.js" type="module"></script><script src="main.71f959b8986e4131.js" type="module"></script></body>
 </html>

ej2-angular/samples/multiselect/getting-started-cs10/styles.4a9b6c6cb4c38c4a.css

@@ -15,33 +15,3 @@
     width: 350px;
     margin: 0 auto;
 }
-
-#treeparent {
-    display: block;
-    max-width: 350px;
-    max-height: 350px;
-    margin: auto;
-    overflow: auto;
-}
-.accordiontree .e-list-item.e-level-1 > .e-fullrow, .accordiontree .e-list-item.e-level-1.e-active > .e-fullrow,  .accordiontree .e-list-item.e-level-1.e-hover > .e-fullrow , .accordiontree .e-list-item.e-level-1 > .e-fullrow, .accordiontree .e-list-item.e-level-1.e-active.e-hover > .e-fullrow {
-    background-color: darkslateblue;
-    border-color: darkslateblue;
-}
-
-.accordiontree .e-list-item.e-level-1 > .e-text-content .e-list-text, .accordiontree .e-list-item.e-level-1.e-active > .e-text-content .e-list-text,  .accordiontree .e-list-item.e-level-1.e-hover > .e-text-content .e-list-text,  .accordiontree .e-list-item.e-level-1.e-active.e-hover > .e-text-content .e-list-text {
-    color: white;
-    font-size: 16px;
-} 
-.accordiontree .e-list-item.e-level- .e-icons.e-icon-collapsible, .accordiontree .e-list-item.e-level-1 .e-icons.e-icon-collapsible,.accordiontree .e-list-item.e-level-1 .e-icon-expandable {
-    display: none
-}
-
-.accordiontree .e-list-item.e-level-2 > .e-fullrow, .accordiontree .e-list-item.e-level-2.e-active > .e-fullrow,  .accordiontree .e-list-item.e-level-2.e-hover > .e-fullrow , .accordiontree .e-list-item.e-level-2 > .e-fullrow, .accordiontree .e-list-item.e-level-2.e-active.e-hover > .e-fullrow {
-    background-color: white;
-    border-color: white;
-}
-
-.accordiontree .e-list-item.e-level-2 > .e-text-content .e-list-text, .accordiontree .e-list-item.e-level-2.e-active > .e-text-content .e-list-text,  .accordiontree .e-list-item.e-level-2.e-hover > .e-text-content .e-list-text,  .accordiontree .e-list-item.e-level-2.e-active.e-hover > .e-text-content .e-list-text {
-    color: blue;
-    font-size: 14px;
-} 

ej2-angular/samples/multiselect/getting-started-cs10/styles.7c8fa4f5dbbaac6b.css

@@ -9,12 +9,12 @@
 <link href="https://cdn.syncfusion.com/ej2/24.1.41/material.css" rel="stylesheet">
 <meta name="author" content="Syncfusion">
     <style>#loader{color:#008cff;height:40px;width:30%;position:absolute;top:45%;left:45%}#wrapper{width:350px;margin:0 auto}</style><link href="index.css" rel="stylesheet" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="index.css"></noscript>
-<style>@import"https://fonts.googleapis.com/css?family=Roboto:400,500,700"</style><link rel="stylesheet" href="styles.ffaa5f3e36e0d3b8.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="styles.ffaa5f3e36e0d3b8.css"></noscript></head>
+<style>@import"https://fonts.googleapis.com/css?family=Roboto:400,500,700"</style><link rel="stylesheet" href="styles.975f2cbeba8f9272.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="styles.975f2cbeba8f9272.css"></noscript></head>
 <body>
     <div id="wrapper" style="margin-top: 20px">
         <app-container>
             <div id="loader">LOADING....</div>
         </app-container>
     </div>
-<script src="runtime.cf3bdadb8fd8abdc.js" type="module"></script><script src="main.504e738ff8f5587a.js" type="module"></script></body>
+<script src="runtime.cf3bdadb8fd8abdc.js" type="module"></script><script src="main.147444e55b33ee59.js" type="module"></script></body>
 </html>

ej2-angular/samples/multiselect/getting-started-cs7/index.html

@@ -16,12 +16,3 @@
     margin: 0 auto;
 }
 
-#treeparent {
-    display: block;
-    max-width: 350px;
-    max-height: 350px;
-    margin: auto;
-    overflow: auto;
-    border: 1px solid #dddddd;
-    border-radius: 3px;
-}

ej2-angular/samples/multiselect/getting-started-cs7/main.9f4625d897908fff.js

@@ -9,12 +9,12 @@
 <link href="https://cdn.syncfusion.com/ej2/24.1.41/material.css" rel="stylesheet">
 <meta name="author" content="Syncfusion">
     <style>#loader{color:#008cff;height:40px;width:30%;position:absolute;top:45%;left:45%}#wrapper{width:350px;margin:0 auto}</style><link href="index.css" rel="stylesheet" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="index.css"></noscript>
-<style>@import"https://fonts.googleapis.com/css?family=Roboto:400,500,700"</style><link rel="stylesheet" href="styles.ffaa5f3e36e0d3b8.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="styles.ffaa5f3e36e0d3b8.css"></noscript></head>
+<style>@import"https://fonts.googleapis.com/css?family=Roboto:400,500,700"</style><link rel="stylesheet" href="styles.4ab3094a4a56e270.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="styles.4ab3094a4a56e270.css"></noscript></head>
 <body>
     <div id="wrapper" style="margin-top: 20px">
         <app-container>
             <div id="loader">LOADING....</div>
         </app-container>
     </div>
-<script src="runtime.cf3bdadb8fd8abdc.js" type="module"></script><script src="main.501bda0451d6a0a1.js" type="module"></script></body>
+<script src="runtime.cf3bdadb8fd8abdc.js" type="module"></script><script src="main.be6ff26fd2a55f06.js" type="module"></script></body>
 </html>