v25.1.35 is released

Author: pipeline

README.md

@@ -0,0 +1,25 @@
+# Syncfusion Typescript Control Demo Samples
+
+Welcome to the demo samples repository for Syncfusion Typescript Controls! This repository contains a collection of sample applications showcasing the usage of various Syncfusion Controls in a Typescript environment.
+
+## Prerequisites
+
+- [Node.js](https://nodejs.org/en) -  `v16+`
+
+## Run the samples
+
+To run the sample applications locally, follow these steps
+
+1. Install the required dependencies using npm
+
+```bash
+npm install
+```
+
+2. Start the development server using gulp
+
+```bash
+gulp serve
+```
+
+3. Open your web browser and navigate to the specified localhost address to view the samples.

config.json

@@ -178,7 +178,7 @@
 		"signature",
 		"multiline-textbox",
 		null,
-		"workflow-editor",
+		"textarea",
 		null
 	]
 }

index.html

@@ -16,9 +16,8 @@
     <!-- End Google Tag Manager -->
     <meta charset="utf-8" />
     <title>Essential JS 2</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="description" content="Explore and learn Syncfusion JavaScript UI controls library using large collection of feature-wise examples for each components." />
-    <meta http-equiv="x-ua-compatible" content="ie=edge">
     <meta name="author" content="Syncfusion" />
     <link rel="shortcut icon" href="favicon.ico" />
     <link rel="manifest" href="./manifest.webmanifest">
@@ -56,7 +55,7 @@
     <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-W8WD8WN" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div hidden id="sync-analytics" data-queue="EJ2 - JavaScript - Demos"></div>
-    <aside id='left-sidebar'>
+    <aside id='left-sidebar' role="complementary" aria-labelledby="sb-toggle-left">
         <div class='sb-left-pane e-view'>
             <div class="sb-left-pane-header">
                 <div class="sb-header-top">
@@ -66,12 +65,12 @@
                     </div>
                 </div>
             </div>
-            <div class="sb-home" onclick="document.getElementById('sb-home').click()">
+            <div class="sb-home" role="button" tabindex="0" aria-label="Essential JS2 home page" onclick="document.getElementById('sb-home').click()">
                 <div class="sb-home-link sb-icons sb-icon-Home"></div>
                 <div class="sb-home-text">
                     <span>HOME</span>
                 </div>
-                <a id="sb-home" href="https://ej2.syncfusion.com/home/" aria-label="Sample home page"></a>
+                <a id="sb-home" href="https://ej2.syncfusion.com/home/" aria-label="Essential JS2 home page"></a>
             </div>
             <div class='sb-control-navigation'>
                 <div id="controlTree" class='e-view'></div>
@@ -111,13 +110,13 @@
         <div id='sample-header' class="sb-header e-view" role="banner">
             <div class='sb-header-left sb-left sb-table'>
                 <div class='sb-header-item sb-table-cell'>
-                    <div id="sb-toggle-left" role="button" tabindex="0" class="sb-slide-nav sb-icons toggle-active sb-icon-Hamburger" aria-label="toggle all controls navigation"
-                        title='toggle leftpane'></div>
+                    <div id="sb-toggle-left" role="button" tabindex="0" class="sb-slide-nav sb-icons toggle-active sb-icon-Hamburger" aria-label="Toggle all controls navigation" aria-controls="left-sidebar"
+                        title='toggle left pane'></div>
                 </div>
                 <div class='sb-header-item sb-table-cell'>
                     <div id='sb-header-text' class='e-sb-header-text'>
                         <span class='sb-header-text-left'>Essential Studio for</span>
-                        <span class='sb-header-text-right'>JavaScript</span>
+                        <span class='sb-header-text-right'  role="button" tabindex="0">JavaScript</span>
                     </div>
                 </div>
                 <div class='sb-header-item sb-table-cell sb-lang-toggler-wrapper'>
@@ -137,13 +136,13 @@
                             <span class="sb-header-text-left">CHOOSE THEME</span>
                         </div>
                         <div class="sb-theme-switcher-wrapper">
-                            <span id="sb-theme-switcher" class="sb-theme-switch sb-icons sb-icon-Dropdown"></span>
+                            <span id="sb-theme-switcher" class="sb-theme-switch sb-icons sb-icon-Dropdown" role="presentation" aria-label="Theme selection"></span>
                         </div>
                     </div>
                 </div>
                 <div class='sb-header-item sb-table-cell sb-search-wrapper'>
                     <div class='sb-search-btn' id='sb-trigger-search' role="button" tabindex="0" aria-label="toggle sample search" title="Toggle sample search">
-                        <span class='sb-settings sb-icons sb-icon-Search'></span>
+                        <span class='sb-settings sb-icons sb-icon-Search' role="presentation" aria-label="Search sample"></span>
                     </div>
                 </div>
                 <div class='sb-header-item sb-table-cell sb-settings-wrapper'>
@@ -154,16 +153,16 @@
                 <div class="sb-header-item sb-table-cell  sb-header-settings sb-icons"></div>
                 <div class="sb-header-splitter sb-download-splitter"></div>
                 <div class='sb-header-item sb-table-cell sb-download-wrapper'>
-                    <a href='https://www.syncfusion.com/downloads/essential-js2' target="_blank" aria-label="Download Free Trial">
+                    <a href='https://www.syncfusion.com/downloads?tag=es-seo-ej2-javascript-demo-menu-trail' target="_blank" aria-label="Free Trial (Opens in a new window)">
                         <button id='download-now' class='sb-download-btn'>
                             <span class='sb-download-text'>FREE TRIAL</span>
                         </button>
                     </a>
-                    <a href='https://www.npmjs.com/search?q=ej2-typescript' target="_blank" aria-label="Install NPM">
+                    <!-- <a href='https://www.npmjs.com/search?q=ej2-typescript' target="_blank" aria-label="Install NPM">
                         <button class='sb-npm-btn'>
                             <img class="npm-svg" src="styles/images/NPM.svg" alt="npm icon"><span class="doc-npm-link">Install NPM</span>
                         </button>
-                    </a>
+                    </a> -->
                 </div>
             </div>
 
@@ -172,6 +171,9 @@
             <div id='sb-switcher-popup' role='navigation' class='sb-switch-popup'>
                 <ul id='switch-sb' role="list">
                     <li class='sb-current' role="listiem">JavaScript</li>
+                    <li>
+                        <a id='nextjs'>Next.js</a>
+                    </li>
                     <li role="listitem">
                         <a id='angular'>Angular</a>
                     </li>
@@ -354,8 +356,8 @@
                     </div>
                 </div>
                 <div class='sb-desktop-wrapper'>
-                    <div id='component-name' role="heading" aria-level="1" class='sb-component-name sb-rightpane-padding'>
-                        <h1 class='sb-sample-text'>Chart</h1>
+                    <div id='component-name' class='sb-component-name sb-rightpane-padding'>
+                        <h1 class='sb-sample-text' aria-level="1" role="heading">Data Grid</h1>
                     </div>
                     <div id='sample-bread-crumb' class='sb-bread-crumb sb-rightpane-padding'>
                         <div class='sb-bread-crumb-text'>
@@ -396,19 +398,6 @@ <h1 class='sb-sample-text'>Chart</h1>
                                 <div>
                                     <div class='sb-source-section'>
                                         <div id='sb-source-tab' class="">
-                                            <!-- <div id='sb-content-header' class="e-tab-header sb-content-tab-header">
-                                            <div>
-                                                <span class="sb-ts-snippet-header"></span> tsfileName </div>
-                                            <div>
-                                                <span class="sb-html-snippet-header"></span> htmlfileName </div>
-                                        </div>
-                                        <div class="e-content sb-sample-content-area">
-                                            <div>
-                                                <div id="ts-src-tab" class="ts-source-content sb-src-code javascript">ts Content</div>
-                                            </div>
-                                            <div>
-                                                <div id="html-src-tab" class="html-source-content sb-src-code xml">html Content</div>
-                                             </div> -->
                                         </div>
                                     </div>
                                 </div>
@@ -433,30 +422,30 @@ <h1 class='sb-sample-text'>Chart</h1>
                 </div>
                 <div class='description-section sb-rightpane-padding'>
                 </div>
-                <div class="banner-wrapper">
-                    <div id='banner-image' class="banner-img">
+                <div class="ad-wrapper">
+                    <div id='ad-image' class="ad-img">
                         <div class="row">
                             <div class="col-sm-12">
                                 <div class="col-sm-12">
-                                    <div id="banner-head" class="banner-header">Transform your JavaScript web apps today with Syncfusion Javascript controls</div>
+                                    <div id="ad-banner-head" class="ad-header">Transform your JavaScript web apps today with Syncfusion Javascript controls</div>
                                 </div>
                                 <div class="col-sm-12 cnt-area">
                                     <div class="content-area">
-                                        <div class="banner-cnt-pt">
-                                            <div class="banner-cnt-icon click-icon sb-icons sb-icon-icon-selection"></div>
+                                        <div class="ad-cnt-pt">
+                                            <div class="ad-cnt-icon click-icon sb-icons sb-icon-icon-selection"></div>
                                             <div class="cnt-text">80+ high-performance and responsive UI components</div>
                                         </div>
-                                        <div class="banner-cnt-pt">
-                                            <div class="banner-cnt-icon click-icon sb-icons sb-icon-icon-selection"></div>
+                                        <div class="ad-cnt-pt">
+                                            <div class="ad-cnt-icon click-icon sb-icons sb-icon-icon-selection"></div>
                                             <div class="cnt-text">Dedicated support</div>
                                         </div>
-                                        <div class="banner-cnt-pt">
-                                            <div class="banner-cnt-icon click-icon sb-icons sb-icon-icon-selection"></div>
+                                        <div class="ad-cnt-pt">
+                                            <div class="ad-cnt-icon click-icon sb-icons sb-icon-icon-selection"></div>
                                             <div class="cnt-text">Hassle-free licensing</div>
                                         </div>
                                     </div>
                                     <a style="color:#ffff;text-decoration:none;"
-                                        href="https://www.syncfusion.com/downloads/essential-js2" aria-label="Try it for free">
+                                        href="https://www.syncfusion.com/downloads?tag=es-seo-ej2-javascript-demo-ads-trail" aria-label="Try it for free (Opens in a new window)">
                                         <div class="free-trial">TRY IT FOR FREE</div>
                                     </a>
                                 </div>
@@ -468,23 +457,23 @@ <h1 class='sb-sample-text'>Chart</h1>
                 <div class="sb-footer">
                     <div class="sb-footer-left">
                         <div class="sb-footer-links">
-                            <a href="https://ej2.syncfusion.com/documentation/" target="_blank" aria-label="Documentation">
+                            <a href="https://ej2.syncfusion.com/documentation/" target="_blank" aria-label="Documentation (Opens in a new window)">
                                 <div class="sb-footer-link">Documentation</div>
                             </a>
-                            <a href="https://www.syncfusion.com/forums/essential-js2" target="_blank" aria-label="Forum link">
+                            <a href="https://www.syncfusion.com/forums/essential-js2" target="_blank" aria-label="Forum (Opens in a new window)">
                                 <div class="sb-footer-link">Forum</div>
                             </a>
-                            <a href="https://syncfusion.com/blogs" target="_blank" aria-label="Blog link">
+                            <a href="https://syncfusion.com/blogs" target="_blank" aria-label="Blog (Opens in a new window)">
                                 <div class="sb-footer-link">Blog</div>
                             </a>
-                            <a href="https://www.syncfusion.com/kb" target="_blank" aria-label="Knowledge Base">
+                            <a href="https://www.syncfusion.com/kb" target="_blank" aria-label="Knowledge Base (Opens in a new window)">
                                 <div class="sb-footer-link">Knowledge Base</div>
                             </a>
                         </div>
                         <div class="sb-footer-copyright"></div>
                     </div>
                     <div class="sb-footer-logo">
-                        <a href="https://www.syncfusion.com/" target="_blank" aria-label="Sample footer logo">
+                        <a href="https://www.syncfusion.com/" target="_blank" aria-label="Syncfusion logo">
                             <div class="sb-footer-logo-icon"></div>
                         </a>
                     </div>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@syncfusion/ej2-samples",
-  "version": "24.2.3",
+  "version": "25.1.35",
   "description": "Samples for Syncfusion Essential JS 2",
   "author": "Syncfusion Inc.",
   "license": "SEE LICENSE IN license",
@@ -52,8 +52,7 @@
     "fuse.js": "6.6.2",
     "hasher": "1.2.0",
     "marked": "5.1.2",
-    "moment-timezone": "0.5.43",
-    "tributejs": "5.1.3"
+    "moment-timezone": "0.5.43"
   },
   "devDependencies": {
     "@syncfusion/ej2-react-notifications": "*",

sampleOrder.json

@@ -20,6 +20,7 @@
             "default": "Default Functionalities",
             "grouping-icon": "Grouping and Icons",
             "data-binding": "Data Binding",
+            "object-value-binding": "Object Value Binding",
             "template": "Template",
             "highlight": "Highlight",
             "custom-filtering": "Custom Filtering",
@@ -256,6 +257,15 @@
 	  "empty-point": "Column With null and 0 values"
         }
     },
+    "circular-3d-chart": {
+        "ControlName": "3D Circular",
+        "Samples": {
+            "pie": "Pie",
+            "donut": "Donut",
+            "pie-legend": "Pie with Legend",
+            "selection": "Selection"
+        }
+    },
     "chips": {
         "ControlName": "Chips",
         "Samples": {
@@ -311,6 +321,7 @@
             "default": "Default Functionalities",
             "grouping-icon": "Grouping and Icons",
             "data-binding": "Data Binding",
+            "object-value-binding": "Object Value Binding",
             "custom-value": "Custom Value",
             "template": "Template",
             "filtering": "Filtering",
@@ -470,6 +481,7 @@
             "default": "Default Functionalities",
             "grouping-icon": "Grouping and Icons",
             "data-binding": "Data Binding",
+            "object-value-binding": "Object Value Binding",
             "template": "Template",
             "filtering": "Filtering",
             "cascading": "Cascading",
@@ -792,6 +804,7 @@
         "Samples": {
             "default": "Default Functionalities",
             "data-binding": "Data Binding",
+            "object-value-binding": "Object Value Binding",
             "grouping-icon": "Grouping",
             "template": "Template",
             "filtering": "Filtering",
@@ -1154,6 +1167,23 @@
             "multiline-textbox": "Multiline TextBox"
         }
     },
+    "textarea": {
+        "ControlName": "TextArea",
+        "Samples": {
+            "default": "Default Functionalities",
+            "floatingLabel": "Floating Label",
+            "resize": "Resize",
+            "api": "API"
+        }
+    },
+    "timeline": {
+        "ControlName": "Timeline",
+        "Samples": {
+            "default": "Default Functionalities",
+            "api": "API",
+            "template": "Template"
+        }
+    },
     "timepicker": {
         "ControlName": "TimePicker",
         "Samples": {

src/auto-complete/object-value-binding.html

@@ -0,0 +1,43 @@
+<div class="col-lg-8 control-section">
+    <div class="control-wrapper">
+        <div id="default" style='padding-top:75px;'>
+            <input type="text" id="object" tabindex="1" />
+        </div>
+    </div>
+</div>
+<div class="col-lg-4 property-section">
+    <textarea id="value" title="Properties" style="width: 100%; margin-top:90px; height: 60px;" readonly>Selected value : </textarea>
+</div>
+
+
+<div id="action-description">
+    <p>The sample showcases the functionality of object value binding in the AutoComplete component. Users can type
+        characters into the AutoComplete field and select an item from the suggestion list. The corresponding object
+        value of the selected item is then assigned to the value property. In the property panel, the <code>value</code> property of the selected item's will be displayed.</p>
+</div>
+
+<div id="description">
+    <p>The <code>AutoComplete</code> component generates a list of suggestions that match the characters typed by the
+        user. Users can then select an item from this list. Once an item is selected, its associated object value is
+        automatically assigned to the <code>value</code> property. This behavior is enabled by the
+        <code>allowObjectBinding</code> property.
+    </p>
+</div>
+<!-- custom code start -->
+
+<style>
+    .control-wrapper {
+        margin: 0 auto;
+        width: 250px;
+    }
+
+    .property-section .right-side {
+        padding-left: 10px;
+    }
+
+    .property-section .left-side {
+        padding: 5px;
+        width: 25%
+    }
+</style>
+<!-- custom code end-->