v24.2.3 is released

config.json

@@ -5,7 +5,7 @@
     "styleDependency": ["ej2"],
     "github": ["/source/**/*.{css,ts,html,json}", "!/source/**/*.{d.ts,ngfactory.ts,ngstyle.ts,ngsummary.json}", "./styles/images{,/**}", "./styles/{index.css,highlight.css}", "./styles/*.scss", "./dist/zone.min.js", "/source/**/images{,/**}", "/source/common/cldr-data{,/**}", "./index.html", "./favicon.ico", "package.json", "tsconfig-aot.json", "webpack.config.js", "license"],
     "publishSamples": ["./output/**/*.*"],
-    "releaseVersion": "24.1.41",
+    "releaseVersion": "24.2.3",
     "platform": "angular",
     "customNames": [
         "listview",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ej2-angular-samples",
-  "version": "24.1.41",
+  "version": "24.2.3",
   "private": true,
   "dependencies": {
     "@angular/animations": "^15.1.0",
@@ -57,13 +57,14 @@
     "@angular/cli": "~15.1.4",
     "@angular/compiler-cli": "^15.1.0",
     "@types/jasmine": "~4.3.0",
+    "@types/codemirror": "^0.0.56",
     "child_process": "^1.0.2",
     "codemirror": "^5.37.0",
     "elasticlunr": "0.9.5",
     "fuse.js": "^3.2.0",
     "gulp": "^4.0.2",
-    "gulp-s3-upload": "1.6.6",
     "gulp-gzip": "1.4.2",
+    "gulp-s3-upload": "1.6.6",
     "jasmine-core": "~4.5.0",
     "karma": "~6.4.0",
     "karma-chrome-launcher": "~3.1.0",

src/app/diagram/annotations.html

@@ -1,4 +1,5 @@
 <style>
+    /* Annotation alignment pattern style */
     .diagram-annotations .image-pattern-style {
         background-color: white;
         background-size: contain;
@@ -89,34 +90,6 @@
         content: "\e716";
     }
 
-    .diagram-annotations .material .e-bold::before {
-        content: "\e707";
-    }
-
-    .diagram-annotations .material .e-italic::before {
-        content: "\e70b";
-    }
-
-    .diagram-annotations .material .e-underline::before {
-        content: "\e702";
-    }
-
-    .diagram-annotations .bootstrap .e-bold::before {
-        content: "\e71f";
-    }
-
-    .diagram-annotations .bootstrap .e-italic::before {
-        content: "\e723";
-    }
-
-    .diagram-annotations .bootstrap .e-underline::before {
-        content: "\e71a";
-    }
-
-    .diagram-annotations .e-btn {
-        box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0), 0 2px 2px 0 rgba(0, 0, 0, 0), 0 1px 5px 0 rgba(0, 0, 0, 0);
-    }
-
     .diagram-annotations .e-bigger .e-btn.e-small.e-icon-btn {
         padding: 0px;
     }

src/app/diagram/commands.component.css

@@ -1,56 +1,4 @@
-.sb-mobile-palette {
-    width:240px;
-    height:100%;
-    float:left;
-}
-
-.sb-mobile-palette-bar {
-    display: none;
-}
-
-.sb-mobile-diagram {
-    width:calc(100% - 242px);
-    height: 100%;
-    float: left;
-}
-
-@media (max-width: 550px) {
-
-    .sb-mobile-palette {
-        z-index: 19;
-        position: absolute;
-        display: none;
-        transition: transform 300ms linear, visibility 0s linear 300ms;
-        width:39%;
-        height:100%;
-    }
-
-    .sb-mobile-palette-bar {
-        display: block;
-        width: 100%;
-        background:#fafafa;
-        padding: 10px 10px;
-        border:0.5px solid #e0e0e0;
-        min-height: 40px;
-    }
-
-    .sb-mobile-diagram {
-        width: 100%;
-        height: 100%;
-        float: left;
-        left: 0px;
-    }
-
-    #palette-icon {
-        font-size: 20px; 
-    }
-}
-
-.sb-mobile-palette-open {
-    position: absolute;
-    display: block;
-    right: 15px;
-}
+
 
 @font-face {
     font-family: 'e-ddb-icons1';
@@ -169,30 +117,3 @@
     content: "\e725";
 }
 
-.e-file-select-wrap {
-    display: none;
-}
-
-.e-btn,
-.e-css.e-btn {
-    background-color: transparent;
-    border-color: transparent;
-}
-
-.bootstrap5 .e-btn,
-.e-css.e-btn {
-    color: #333;
-}
-
-.bootstrap4 .e-btn,
-.e-css.e-btn {
-    color: #333;
-}
-
-.bootstrap5 .e-btn:hover {
-    color: #fff;
-}
-
-.bootstrap4 .e-btn:hover {
-    color: #fff;
-}

src/app/diagram/complex-hierarchical-tree.component.ts

@@ -6,7 +6,7 @@ import {
 } from '@syncfusion/ej2-diagrams';
 import { DataManager } from '@syncfusion/ej2-data';
 import { ChangeEventArgs as NumericChangeEventArgs } from '@syncfusion/ej2-inputs';
-import * as Data from './diagram-data.json';
+import {multiParentData} from './overview-data';
 import { ChangeEventArgs as CheckBoxChangeEventArgs } from '@syncfusion/ej2-buttons';
 Diagram.Inject(DataBinding, ComplexHierarchicalTree,LineDistribution);
 
@@ -36,7 +36,7 @@ export class ComplexHierarchicalTreeDiagramComponent {
     };
     public data: Object = {
         id: 'Name', parentId: 'ReportingPerson',
-        dataSource: new DataManager((Data as any).multiParentData),
+        dataSource: new DataManager(multiParentData),
         //binds the external data with node
         doBinding: (nodeModel: NodeModel, data: DataInfo, diagram: Diagram) => {
             /* tslint:disable:no-string-literal */
@@ -98,12 +98,12 @@ export class ComplexHierarchicalTreeDiagramComponent {
         }
     };
 
-    public onmarginLeftChange(args: NumericChangeEventArgs): void {
+    public onMarginLeftChange(args: NumericChangeEventArgs): void {
         this.diagram.layout.margin.left = args.value;
         this.diagram.dataBind();
     }
 
-    public onmarginTopChange(args: NumericChangeEventArgs): void {
+    public onMarginTopChange(args: NumericChangeEventArgs): void {
         this.diagram.layout.margin.top = args.value;
         this.diagram.dataBind();
     }

src/app/diagram/complex-hierarchical-tree.html

@@ -82,15 +82,15 @@
                     <div style="display: table-cell; vertical-align: middle ">Margin X</div>
                 </div>
                 <div class="col-xs-7 ">
-                    <ejs-numerictextbox id='mleft' [value]="10" format='n0' step="1" (change)='onmarginLeftChange($event)'></ejs-numerictextbox>
+                    <ejs-numerictextbox id='mleft' [value]="10" format='n0' step="1" (change)='onMarginLeftChange($event)'></ejs-numerictextbox>
                 </div>
             </div>
             <div class="row sb-child-row">
                 <div style="display: table;height: 35px; padding-left: 0px " class="col-xs-5 ">
                     <div style="display: table-cell; vertical-align: middle ">Margin Y</div>
                 </div>
                 <div class="col-xs-7 ">
-                    <ejs-numerictextbox id='mtop' [value]="50" format='n0' step="1" (change)='onmarginTopChange($event)'></ejs-numerictextbox>
+                    <ejs-numerictextbox id='mtop' [value]="50" format='n0' step="1" (change)='onMarginTopChange($event)'></ejs-numerictextbox>
                 </div>
             </div>
             <div class="row sb-child-row">

src/app/diagram/connectors.html

@@ -1,4 +1,5 @@
 <style scoped>
+    /* Connector type change style in property panel*/
     .diagram-connectors .image-pattern-style {
         background-color: white;
         background-size: contain;
@@ -25,10 +26,6 @@
         font-weight: 500;
     }
 
-    .diagram-connectors .e-checkbox-wrapper .e-label {
-        font-size: 12px;
-    }
-
     .diagram-connectors .col-xs-6 {
         padding-left: 0px;
         padding-right: 0px;
@@ -38,13 +35,6 @@
         border-color: #006CE6;
         border-width: 2px;
     }
-    .e-colorpicker-wrapper .e-split-btn-wrapper .e-split-colorpicker.e-split-btn .e-selected-color .e-split-preview{
-        width: 100px!important;
-        margin-left: -40px!important;
-    }
-    .e-colorpicker-wrapper .e-split-btn-wrapper .e-split-colorpicker.e-split-btn{
-        width: 110px!important;
-    }
 
     label{
         display: inline-block;

src/app/diagram/constraints.component.css

@@ -1,103 +1,13 @@
-.sb-mobile-palette {
-    width:240px;
-    height:100%;
-    float:left;
-}
-
-.sb-mobile-palette-bar {
-    display: none;
-}
-
-.sb-mobile-diagram {
-    width:calc(100% - 242px);
-    height: 100%;
-    float: left;
-}
 
+/* To align property panel*/
 #properties_Container{
-    /* background: #e3e3e3; */
+
     float: left;
     height: 600px;
     margin-top: 30px;
     }
 
-@media (max-width: 550px) {
-
-    .sb-mobile-palette {
-        z-index: 19;
-        position: absolute;
-        display: none;
-        transition: transform 300ms linear, visibility 0s linear 300ms;
-        width:39%;
-        height:100%;
-    }
-
-    .sb-mobile-palette-bar {
-        display: block;
-        width: 100%;
-        background:#fafafa;
-        padding: 10px 10px;
-        border:0.5px solid #e0e0e0;
-        min-height: 40px;
-    }
-
-    .sb-mobile-diagram {
-        width: 100%;
-        height: 100%;
-        float: left;
-        left: 0px;
-    }
-
-    #palette-icon {
-        font-size: 20px; 
-    }
-}
-
-.sb-mobile-palette-open {
-    position: absolute;
-    display: block;
-    right: 15px;
-}
-
-@font-face {
-    font-family: 'e-ddb-icons1';
-    src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMj1tSfIAAAEoAAAAVmNtYXDnEOdVAAABiAAAADZnbHlmdC1P4gAAAcgAAAAwaGVhZBJhohMAAADQAAAANmhoZWEIVQQDAAAArAAAACRobXR4CAAAAAAAAYAAAAAIbG9jYQAYAAAAAAHAAAAABm1heHABDgAUAAABCAAAACBuYW1lm+wy9gAAAfgAAAK1cG9zdLnsYngAAASwAAAAMAABAAAEAAAAAFwEAAAAAAAD+AABAAAAAAAAAAAAAAAAAAAAAgABAAAAAQAAgNcenF8PPPUACwQAAAAAANelrs4AAAAA16WuzgAAAAAD+AN6AAAACAACAAAAAAAAAAEAAAACAAgAAgAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQQAAZAABQAAAokCzAAAAI8CiQLMAAAB6wAyAQgAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA5wDnAAQAAAAAXAQAAAAAAAABAAAAAAAABAAAAAQAAAAAAAACAAAAAwAAABQAAwABAAAAFAAEACIAAAAEAAQAAQAA5wD//wAA5wD//wAAAAEABAAAAAEAAAAAAAAAGAAAAAIAAAAAA/gDegACAAcAACUhCQEhATUhAQQC9P6G/YoBMQFF/YqGAjf+hgH0QwAAAAAAEgDeAAEAAAAAAAAAAQAAAAEAAAAAAAEAEwABAAEAAAAAAAIABwAUAAEAAAAAAAMAEwAbAAEAAAAAAAQAEwAuAAEAAAAAAAUACwBBAAEAAAAAAAYAEwBMAAEAAAAAAAoALABfAAEAAAAAAAsAEgCLAAMAAQQJAAAAAgCdAAMAAQQJAAEAJgCfAAMAAQQJAAIADgDFAAMAAQQJAAMAJgDTAAMAAQQJAAQAJgD5AAMAAQQJAAUAFgEfAAMAAQQJAAYAJgE1AAMAAQQJAAoAWAFbAAMAAQQJAAsAJAGzIERpYWdyYW1fU2hhcGVzX0ZPTlRSZWd1bGFyRGlhZ3JhbV9TaGFwZXNfRk9OVERpYWdyYW1fU2hhcGVzX0ZPTlRWZXJzaW9uIDEuMERpYWdyYW1fU2hhcGVzX0ZPTlRGb250IGdlbmVyYXRlZCB1c2luZyBTeW5jZnVzaW9uIE1ldHJvIFN0dWRpb3d3dy5zeW5jZnVzaW9uLmNvbQAgAEQAaQBhAGcAcgBhAG0AXwBTAGgAYQBwAGUAcwBfAEYATwBOAFQAUgBlAGcAdQBsAGEAcgBEAGkAYQBnAHIAYQBtAF8AUwBoAGEAcABlAHMAXwBGAE8ATgBUAEQAaQBhAGcAcgBhAG0AXwBTAGgAYQBwAGUAcwBfAEYATwBOAFQAVgBlAHIAcwBpAG8AbgAgADEALgAwAEQAaQBhAGcAcgBhAG0AXwBTAGgAYQBwAGUAcwBfAEYATwBOAFQARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAdQBzAGkAbgBnACAAUwB5AG4AYwBmAHUAcwBpAG8AbgAgAE0AZQB0AHIAbwAgAFMAdAB1AGQAaQBvAHcAdwB3AC4AcwB5AG4AYwBmAHUAcwBpAG8AbgAuAGMAbwBtAAAAAAIAAAAAAAAACgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgECAQMABlNoYXBlcwAA) format('truetype');
-    font-weight: normal;
-    font-style: normal;
-}
-.e-ddb-icons1 {
-    font-family: 'e-ddb-icons1';
-    speak: none;
-    font-size: 16px;
-    font-style: normal;
-    font-weight: normal;
-    font-variant: normal;
-    text-transform: none;
-    line-height: 1;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-}
 
-.e-toggle-palette::before {
-    content: "\e700"
-}
-
-.image-pattern-style {
-    background-color: white;
-    background-size: contain;
-    background-repeat: no-repeat;
-    height: 45px;
-    width: calc((100% - 13px) / 3);
-    cursor: pointer;
-    border: 1px solid #D5D5D5;
-    background-position: center;
-    float: left;
-}
-
-.image-pattern-style:hover {
-    border-color: gray;
-    border-width: 2px;
-}
 
 .row {
     margin-left: 0px;
@@ -109,16 +19,9 @@
     font-weight: 500;
 }
 
-.e-checkbox-wrapper .e-label {
-    font-size: 12px;
-}
 
 .col-xs-6 {
     padding-left: 0px;
     padding-right: 0px;
 }
 
-.e-selected-style {
-    border-color: #006CE6;
-    border-width: 2px;
-}

src/app/diagram/custom-shapes.html

@@ -24,7 +24,7 @@
                                     <p id="rangeDate" class="chart-value">Jun 1 - Dec 1</p>
                                 </div>
                             <div id="pieChart" style="height:100%; width:49%; overflow:hidden;float:left;" margin="20px"> 
-                                <ejs-accumulationchart style='display: block;' #pie id="total-expense" #pie width='100%' height='350px'
+                                <ejs-accumulationchart style='display: block;' #pie id="total-expense" width='100%' height='350px'
                                 enableSmartLabels=true [legendSettings]='acclegendSettings'
                                 (textRender)='onTextRender($event)' (animationComplete)='onAnimateCompleted($event)'
                                 (loaded)='acconChartLoaded($event)'>

src/app/diagram/data-binding-with-treeview.component.ts

@@ -295,7 +295,7 @@ import { TreeViewComponent } from '@syncfusion/ej2-angular-navigations';
  }
 
  public add() {
-     let nodeId;
+     let nodeId:string;
      if (this.diagram.selectedItems.nodes.length > 0) {
          nodeId = this.diagram.selectedItems.nodes[0].id;
          this.addNode(nodeId);
@@ -304,7 +304,7 @@ import { TreeViewComponent } from '@syncfusion/ej2-angular-navigations';
          this.addNode(nodeId);
      }
  }
- public addNode(nodeId) {
+ public addNode(nodeId:string) {
      this.targetNodeId = nodeId ? nodeId : this.treeview.selectedNodes[0];
      let tempData = this.data1.filter((a: any) => a.Id === this.targetNodeId);
      (tempData[0] as any).hasChild = true;