v31.2.12 is released

Author: pipeline

config.json

@@ -111,7 +111,6 @@
 		"common",
 		"sys",
 		"appbar",
-		"textarea",
-		null
+		"textarea"
 	]
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@syncfusion/ej2-javascript-samples",
-  "version": "31.2.2",
+  "version": "31.2.12",
   "description": "Examples of JavaScript (ES5) UI Controls",
   "author": "Syncfusion Inc.",
   "license": "SEE LICENSE IN license",

src/diagram/Images/angle/background.png

@@ -0,0 +1,92 @@
+<div class="angle-diagram-container">
+    <div class="control-section" style="width: 100%">
+            <div id="diagram"></div>
+        </div>
+    </div>
+    <div id="action-description">
+        <p>
+            This sample demonstrates an interactive solar panel tilt system built with the Syncfusion<sup>®</sup> EJ2 JavaScript Diagram component. Adjust the panel angle to see real-time changes in system efficiency based on the sun's position and location.
+        </p>
+    </div>
+    <div id="description">
+        <p>
+            This interactive diagram visualizes a solar panel system. The sun's path is represented by a curved connector, and users can adjust the panel's tilt angle either by direct rotation or using integrated buttons. The system provides immediate feedback through a dynamic efficiency gauge and performance messages. Users can also select different locations to observe how regional variations impact overall solar efficiency.
+        </p>
+    </div>
+</div>
+
+ <style>
+    .angle-diagram-container .e-ddl.e-input-group .e-input-group-icon, .e-ddl.e-input-group.e-control-wrapper .e-input-group-icon:hover {
+        color: #9CA3AF;
+    }
+    
+    .angle-diagram-container .e-ddl.e-input-group.e-control-wrapper .e-input {
+        color: #9CA3AF;
+        font-size: 16px;
+        font-weight : 500;
+    }
+
+    .angle-diagram-container .angle-control-section {
+        margin-bottom: 25px;
+        background: linear-gradient(145deg, #ffffff, #f8f9fa);
+        border-radius: 15px;
+        padding: 25px;
+        box-shadow: 0 5px 20px rgba(0,0,0,0.06);
+        transition: transform 0.2s ease, box-shadow 0.2s ease;
+    }
+
+    .angle-diagram-container .angle-control-label {
+        display: flex;
+        align-items: center;
+        font-weight: 600;
+        font-size: 18px;
+        color: #2c3e50;
+        margin-bottom: 15px;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+    }
+
+    .angle-diagram-container .angle-control {
+        align-items: center;
+        background: linear-gradient(145deg, #f8f9fa, #e9ecef);
+        border: 2px solid #e9ecef;
+        border-radius: 12px;
+        padding: 15px;
+        transition: all 0.3s ease;
+        height: 100px;
+    }
+
+    .angle-diagram-container .angle-display {
+        display: block;
+        text-align: center;
+        margin: 0 20px;
+    }
+
+    .angle-diagram-container .angle-value {
+        font-size: 20px;
+        font-weight: bold;
+        color: #2c3e50;
+        margin-bottom: 5px;
+    }
+
+    .angle-diagram-container .angle-description {
+        font-size: 16px;
+        color: #7f8c8d;
+        font-weight: 500;
+        margin-top: 20px;
+        margin-left: 2px;
+    }
+
+    .angle-diagram-container .efficiency-section {
+        text-align: center;
+        margin-bottom: 30px;
+        background: linear-gradient(145deg, #ffffff, #f1f3f4);
+        border-radius: 20px;
+        padding: 25px;
+        box-shadow: 0 8px 25px rgba(0,0,0,0.08);
+    }
+
+    .angle-diagram-container .e-diagram-selector {
+        stroke-width: 0;
+    }
+</style>