Updated Typescript samples

Author: Deepika5698

config.json

@@ -176,7 +176,6 @@
 		"workflow",
 		"form-validator",
 		"signature",
-		"multiline-textbox",
-		null
+		"multiline-textbox"
 	]
 }

index.html

@@ -221,13 +221,21 @@
                         <span class='sb-icons sb-theme-select sb-icon-icon-selection'></span>
                         <span class="switch-text">Tailwind CSS Dark</span>
                     </li>
-                    <li class='active' id="material" role="listitem">
+                    <li class='e-list' id="material" role="listitem">
                         <span class='sb-icons sb-theme-select sb-icon-icon-selection'></span>
                         <span class="switch-text">Material</span>
                     </li>
                     <li class="e-list" id="material-dark">
                         <span class='sb-icons sb-theme-select sb-icon-icon-selection'></span>
                         <span class="switch-text">Material Dark</span>
+                    </li>
+                     <li class='active' id="material3" role="listitem">
+                            <span class='sb-icons sb-theme-select sb-icon-icon-selection'></span>
+                            <span class="switch-text">Material 3</span>
+                      </li>
+                     <li class="e-list" id="material3-dark" role="listitem">
+                            <span class='sb-icons sb-theme-select sb-icon-icon-selection'></span>
+                            <span class="switch-text">Material 3 Dark</span>
                     </li>
                     <li id="fabric" role="listitem">
                         <span class='sb-icons sb-theme-select sb-icon-icon-selection'></span>
@@ -277,6 +285,8 @@
                                 <option value="tailwind-dark">Tailwind CSS Dark</option>
                                 <option value="material">Material</option>
                                 <option value="material-dark">Material Dark</option>
+                                <option value="material3">Material 3</option>
+                                <option value="material3-dark">Material 3 Dark</option>
                                 <option value="fabric">Fabric</option>
                                 <option value="fabric-dark">Fabric Dark</option>
                                 <option value="bootstrap4">Bootstrap v4</option>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@syncfusion/ej2-samples",
-  "version": "21.1.35",
+  "version": "22.1.34",
   "description": "Samples for Syncfusion Essential JS 2",
   "author": "Syncfusion Inc.",
   "license": "SEE LICENSE IN license",

src/accordion/sample.json

@@ -12,10 +12,10 @@
             "api": {"AccordionItem": ["header", "content", "expanded"], "Accordion":["items"] }
         },
         {
-            "url": "ajax",
-            "name": "Ajax Content",
+            "url": "fetch",
+            "name": "Fetch Content",
             "category": "Accordion",
-            "description":"The sample demonstrates how to load the content to the Accordion control from external sources using Ajax library in TypeScript platform.",
+            "description":"The sample demonstrates how to load the content to the Accordion control from external sources using Fetch library in TypeScript platform.",
             "api": {"Accordion": ["expandMode","expanding"] }
         },
         {

src/arc-gauge/key-performance-indicator.html

@@ -24,6 +24,9 @@
     </p>
 </div>
 <style>
+    #gauge_Annotations_0 {
+        line-height: 0.4;
+    }
     .triangle-up {
         width: 20;
         height: 20;

src/auto-complete/data-binding.ts

@@ -14,7 +14,7 @@ import * as data from './dataSource.json';
     let atcObj1: AutoComplete = new AutoComplete({
         // bind the DataManager instance to dataSource property
         dataSource: new DataManager({
-            url: 'https://ej2services.syncfusion.com/js/development/api/Employees',
+            url: 'https://services.syncfusion.com/js/production/api/Employees',
             adaptor: new WebApiAdaptor,
             crossDomain: true
         }),

src/auto-complete/grouping-icon.html

@@ -52,6 +52,7 @@ <h4> Icons</h4>
         color: #495057;
     }
     .material-dark .e-list-icon,
+    .material3-dark .e-list-icon,
     .bootstrap5-dark .e-list-icon,
     .tailwind-dark .e-list-icon,
     .fluent-dark .e-list-icon {

src/auto-complete/template.html

@@ -80,6 +80,7 @@
         color: rgb(255, 255, 255);
     }
 
+    .material3-dark .header,
     .material-dark .header {
         background: rgb(66, 66, 66);
         color: rgb(255, 255, 255);

src/avatar/card.html

@@ -80,10 +80,13 @@
     }
 
     .tailwind .e-custom-card .e-avatar,
+    .tailwind-dark .e-custom-card .e-avatar,
     .bootstrap5 .e-custom-card .e-avatar,
     .bootstrap5-dark .e-custom-card .e-avatar,
     .fluent .e-custom-card .e-avatar,
-    .fluent-dark .e-custom-card .e-avatar {
+    .fluent-dark .e-custom-card .e-avatar,
+    .material3 .e-custom-card .e-avatar,
+    .material3-dark .e-custom-card .e-avatar {
         height: 3em;
         width: 3em;
     }
@@ -138,6 +141,7 @@
     .bootstrap-dark .e-custom-card.e-card .avatar-content,
     .tailwind-dark .e-custom-card.e-card .avatar-content,
     .material-dark .e-custom-card.e-card .avatar-content,
+    .material3-dark .e-custom-card.e-card .avatar-content,
     .fabric-dark .e-custom-card.e-card .avatar-content,
     .bootstrap5-dark .e-custom-card.e-card .avatar-content,
     .fluent-dark .e-custom-card.e-card .avatar-content {
@@ -148,6 +152,8 @@
     .bootstrap-dark .e-custom-card.e-card .e-card-header .e-card-header-caption .e-card-sub-title,
     .tailwind-dark .e-custom-card.e-card .e-card-header .e-card-header-caption .e-card-sub-title,
     .material-dark .e-custom-card.e-card .e-card-header .e-card-header-caption .e-card-sub-title,
+    .material3-dark .e-custom-card.e-card .e-card-header .e-card-header-caption .e-card-sub-title,
+    .fluent-dark .e-custom-card.e-card .e-card-header .e-card-header-caption .e-card-sub-title,
     .fabric-dark .e-custom-card.e-card .e-card-header .e-card-header-caption .e-card-sub-title,
     .bootstrap5-dark .e-custom-card.e-card .e-card-header .e-card-header-caption .e-card-sub-title,
     .fluent-dark .e-custom-card.e-card .e-card-header .e-card-header-caption .e-card-sub-title {
@@ -158,15 +164,13 @@
     .bootstrap-dark .e-custom-card.e-card .e-card-header .e-card-header-caption .e-card-header-title,
     .tailwind-dark .e-custom-card.e-card .e-card-header .e-card-header-caption .e-card-header-title,
     .material-dark .e-custom-card.e-card .e-card-header .e-card-header-caption .e-card-header-title,
+    .material3-dark .e-custom-card.e-card .e-card-header .e-card-header-caption .e-card-header-title,
+    .fluent-dark .e-custom-card.e-card .e-card-header .e-card-header-caption .e-card-header-title,
     .fabric-dark .e-custom-card.e-card .e-card-header .e-card-header-caption .e-card-header-title,
     .bootstrap5-dark .e-custom-card.e-card .e-card-header .e-card-header-caption .e-card-header-title,
     .fluent-dark .e-custom-card.e-card .e-card-header .e-card-header-caption .e-card-header-title {
         color: rgba(255, 255, 255, 0.84);
     }
 
-    .tailwind-dark .e-avatar,
-    .bootstrap5-dark .e-avatar {
-        height: 3em;
-        width: 3em;
-    }
+
 </style>

src/avatar/listview.html

@@ -47,6 +47,9 @@
         height: 54px;
     }
 
+    .material3 #letterAvatarList .e-list-item,
+    .material3-dark #letterAvatarList .e-list-item,
+    .tailwind #letterAvatarList .e-list-item,
     body.material #letterAvatarList .e-list-item,
     body.material-dark #letterAvatarList .e-list-item {
         line-height: 50px;
@@ -56,10 +59,9 @@
         line-height: 35px;
     }
 
-    .material #letterAvatarList .e-list-header .e-text {
-        line-height: 22px;
-    }
-
+    .material3 #letterAvatarList .e-list-header .e-text,
+    .material3-dark #letterAvatarList .e-list-header .e-text,
+    .material #letterAvatarList .e-list-header .e-text,
     .fabric #letterAvatarList .e-list-header .e-text {
         line-height: 22px;
     }
@@ -79,8 +81,9 @@
         border: 0;
     }
 
+    .material3 #letterAvatarList .e-list-item,
+    .material3-dark #letterAvatarList .e-list-item,
     .tailwind #letterAvatarList .e-list-item {
-        line-height: 50px;
         padding-top: 0;
         padding-bottom: 0;
     }