v20.1.47 is released

config.json

@@ -147,6 +147,11 @@
 		"multiline",
 		"sys",
 		"realtime",
-		"binding"
+		"binding",
+		"insert-emoticons",
+		"online-html-editor",
+		"form-validator",
+		"signature",
+		"multiline-textbox"
 	]
 }

index.html

@@ -192,6 +192,14 @@
             </div>
             <div id='theme-switcher-popup' class='sb-theme-popup'>
                 <ul id="themelist" class="options" role="list">
+                    <li class="e-list" id="fluent" role="listitem">
+                        <span class='sb-icons sb-theme-select sb-icon-icon-selection'></span>
+                        <span class="switch-text">Fluent</span>
+                    </li>
+                    <li class="e-list" id="fluent-dark" role="listitem">
+                        <span class='sb-icons sb-theme-select sb-icon-icon-selection'></span>
+                        <span class="switch-text">Fluent Dark</span>
+                    </li>
                     <li class="e-list" id="bootstrap5" role="listitem">
                         <span class='sb-icons sb-theme-select sb-icon-icon-selection'></span>
                         <span class="switch-text">Bootstrap v5</span>
@@ -256,6 +264,8 @@
                         </div>
                         <div class='setting-content  setting-theme-change'>
                             <select id='sb-setting-theme' class='sb-setting-theme-select'>
+                                <option value="fluent">Fluent</option>
+                                <option value="fluent-dark">Fluent Dark</option>
                                 <option value="bootstrap5">Bootstrap v5</option>
                                 <option value="bootstrap5-dark">Bootstrap v5 Dark</option>
                                 <option value="tailwind">Tailwind CSS</option>
@@ -411,7 +421,7 @@
                         <div class="row">
                             <div class="col-sm-12">
                                 <div class="col-sm-12">
-                                    <div id="ad-banner-head" class="ad-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">

package.json

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

sampleOrder.json

@@ -233,6 +233,16 @@
             "api": "API"
         }
     },
+    "carousel": {
+        "ControlName": "Carousel",
+        "Samples": {
+            "default": "Default Functionalities",
+            "templates": "Templates",
+            "datasource-binding": "DataSource Binding",
+            "custom-animation": "Custom Animation",
+            "keyboard-navigation": "Keyboard Navigation"
+        }
+    },
     "circular-gauge": {
         "ControlName": "Circular Gauge",
         "Samples": {

src/accordion/keyboard-interaction.html

@@ -0,0 +1,63 @@
+<div class="control-section">
+    <div class="control_wrapper accordion-control-section">
+        <div id='Accordion_keyboard_interaction'></div>
+    </div>
+</div>
+<div id="action-description">
+    <p>
+        This demo showcases the keyboard shortcuts applicable on <code>Accordion</code>.
+    </p>
+</div>
+<div id="description">
+    <i>Below key combinations can be used in Accordion to initiate various actions.</i>
+    <ul>
+        <li>
+            <b>Focus</b>
+            <ul>
+                <li>
+                    <span class="key-class"><kbd>Alt</kbd> + <kbd>J</kbd></span>
+                    <span> - Focuses on the first component of the demo.</span>
+                </li>
+                <li>
+                    <span class="key-class"><kbd>Home</kbd></span>
+                    <span> - Focus the first Accordion header.</span>
+                </li>
+                <li>
+                    <span class="key-class"><kbd>End</kbd></span>
+                    <span> - Focus the last Accordion header.</span>
+                </li>
+                <li>
+                    <span class="key-class"><kbd>Down arrow</kbd></span>
+                    <span> - Focus the next Accordion header.</span>
+                </li>
+                <li>
+                    <span class="key-class"><kbd>Up arrow</kbd></span>
+                    <span> - Focus the previous Accordion header.</span>
+                </li>
+            </ul>
+        </li>
+        <li>
+            <b>Expand and Collapse</b>
+            <ul>
+                <li>
+                    <span class="key-class"><kbd>Enter</kbd> or <kbd>Space</kbd></span>
+                    <span> - Expand and collapse when the focus is on the Accordion header.</span>
+                </li>
+            </ul>
+        </li>
+    </ul>
+</div>
+<style>
+    .accordion-control-section {
+        margin: 0 10% 0 10%;
+    }
+    @media screen and (max-width: 768px) {
+        .accordion-control-section {
+            margin: 0;
+        }
+    }
+    .key-class {
+        display: inline-block;
+        width: 130px;
+    }
+</style>

src/accordion/keyboard-interaction.ts

@@ -0,0 +1,19 @@
+import { loadCultureFiles } from '../common/culture-loader';
+/**
+ * Accordion Keyboard Interaction Sample
+ */
+ import { Accordion } from '@syncfusion/ej2-navigations';
+
+ (window as any).default = (): void => {
+    loadCultureFiles();
+     // tslint:disable:max-line-length
+     let acrdnObj: Accordion = new Accordion({      //Initialize Accordion component
+        items : [
+            { header: 'ASP.NET', expanded: true, content: 'Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services. ASP.NET pages execute on the server and generate markup such as HTML, WML, or XML that is sent to a desktop or mobile browser. ASP.NET pages use a compiled,event-driven programming model that improves performance and enables the separation of application logic and user interface.' },
+            { header: 'ASP.NET MVC', content : 'The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller. The ASP.NET MVC framework provides an alternative to the ASP.NET Web Forms pattern for creating Web applications. The ASP.NET MVC framework is a lightweight, highly testable presentation framework that (as with Web Forms-based applications) is integrated with existing ASP.NET features, such as master pages and membership-based authentication.' },
+            { header: 'JavaScript', content: 'JavaScript (JS) is an interpreted computer programming language.It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed.More recently, however, it has become common in both game development and the creation of desktop applications.' }
+        ]
+     });
+     // tslint:enable:max-line-length
+     acrdnObj.appendTo('#Accordion_keyboard_interaction');      //Render initialized Accordion component
+ };

src/accordion/right-to-left.ts

@@ -1,11 +1,9 @@
-import { loadCultureFiles } from '../common/culture-loader';
 /**
  * Accordion RTL Sample
  */
 import { Accordion } from '@syncfusion/ej2-navigations';
 
-(window as any).default = (): void => {
+(window as any).default = () => {
-    loadCultureFiles();
     //Initialize Accordion component
     let acrdnObj: Accordion = new Accordion({
         enableRtl: true,

src/accordion/sample.json

@@ -24,6 +24,13 @@
             "category": "Accordion",
             "description":"The sample demonstrates how to represent pane headers with an icon in Accordion control which populates from items collection in TypeScript platform.",
             "api": {"AccordionItem": ["iconCss"] }
+        },
+        {
+            "url": "keyboard-interaction",
+            "name": "Keyboard Interaction",
+            "category": "Accordion",
+            "description":"The sample showcases the keyboard shortcuts applicable on Accordion control in TypeScript platform.",
+            "api": {"AccordionItem": ["header", "content", "expanded"], "Accordion":["items"] }
         }
     ]
 }

src/auto-complete/grouping-icon.html

@@ -53,7 +53,8 @@
     }
     .material-dark .e-list-icon,
     .bootstrap5-dark .e-list-icon,
-    .tailwind-dark .e-list-icon {
+    .tailwind-dark .e-list-icon,
+    .fluent-dark .e-list-icon {
         color: #fff;
     }
 

src/auto-complete/template.html

@@ -61,6 +61,40 @@
         background-color: #000;
     }
 
+    .fluent-dark .header {
+        background: #252423;
+        color: #2899F5;
+    }
+
+    .bootstrap5-dark .header {
+        background: #343A40;
+        color: #7B848D;
+    }
+
+    .fluent .header{
+         color: #2899F5;
+    }
+
+    .tailwind-dark .header {
+        background: #374151;
+        color: rgb(255, 255, 255);
+    }
+
+    .material-dark .header {
+        background: rgb(66, 66, 66);
+        color: rgb(255, 255, 255);
+    }
+
+    .fabric-dark .header {
+        background: rgb(40, 39, 39);
+        color: rgb(255, 255, 255);
+    }
+
+    .bootstrap-dark .header {
+        background: rgb(49, 49, 49);
+        color: rgb(255, 255, 255);
+    }
+
     .bootstrap .header {
         background-color: #f5f5f5;
         border-bottom: 1px solid #ccc;

src/breadcrumb/address-bar.html

@@ -88,6 +88,18 @@
         float: right;
         margin: 5px 2px 5px 0;
     }
+
+    .fluent .e-custom-breadcrumb .e-menu-wrapper ul .e-menu-item .e-caret,
+    .fluent-dark .e-custom-breadcrumb .e-menu-wrapper ul .e-menu-item .e-caret
+    {
+        right: 2px;
+    }
+
+    .e-bigger .fluent .e-custom-breadcrumb .e-menu-wrapper ul .e-menu-item .e-caret,
+    .e-bigger .fluent-dark .e-custom-breadcrumb .e-menu-wrapper ul .e-menu-item .e-caret
+    {
+        right: 1px;
+    }
 </style>
 <!-- custom code end -->
 <style>

src/breadcrumb/sample.json

@@ -3,7 +3,6 @@
     "directory": "breadcrumb",
     "category": "Navigation",
     "ftName" :"breadcrumb",
-    "type": "update",
     "samples": [
         {
             "url": "default",
@@ -16,7 +15,6 @@
             "url": "bind-to-location",
             "name": "Bind to Location",
             "category": "Breadcrumb",
-            "type": "update",
             "api":{"Breadcrumb":["url"]},
             "description": "This example demonstrates the binding of current url location to the items and items based on static url of Syncfusion JavaScript Breadcrumb component."
         },
@@ -31,7 +29,6 @@
             "url": "overflow-modes",
             "name": "Overflow Modes",
             "category": "Breadcrumb",
-            "type": "new",
             "api":{ "Breadcrumb":["items", "width", "overflowMode"], "BreadcrumbItem": ["text", "url"] },
             "description": "This example demonstrates different types of overflow mode such as Menu, Wrap, Collapsed, Scroll, and None in the Syncfusion JavaScript Breadcrumb component."
         },

src/breadcrumb/template-and-customization.html

@@ -399,12 +399,12 @@
         content: "\e7ce";
     }
     .bootstrap5 .e-arrow:before,
-    .bootstrap5-dark .e-arrow:before {
+    .bootstrap5-dark .e-arrow:before,
-        content: "\e7f9";
+    .fluent .e-arrow:before,
-    }
+    .fluent-dark .e-arrow:before,
     .tailwind .e-arrow:before,
     .tailwind-dark .e-arrow:before {
-        content: "\e7a8";
+        content: "\e7f9";
     }
 
     .e-folder:before {

src/button/progress-button.html

@@ -152,12 +152,70 @@
         content: '\e702';
     }
 
-    #roundbtn .e-play-icon {
+    .material #roundbtn .e-play-icon, .material-dark #roundbtn .e-play-icon {
-        margin-top: -2px;
+        margin-top: 0px;
+        margin-left: 4px; 
+    }
+    .e-bigger.material #roundbtn .e-play-icon,
+    .e-bigger.material-dark #roundbtn .e-play-icon {
+        margin-top: 0;
+        margin-left: 3px; 
+    }
+    .e-bigger.fluent #roundbtn .e-play-icon,
+    .e-bigger.fluent-dark #roundbtn .e-play-icon
+    {
+        margin-top: -7px;
+        margin-left: 5px; 
     }
 
-    .material #roundbtn .e-play-icon {
+    .e-bigger.bootstrap5 #roundbtn .e-play-icon,
-        margin-top: 0;
+    .e-bigger.bootstrap5-dark #roundbtn .e-play-icon {
+        margin-top: -6px;
+        margin-left: 4px;
+    }
+    
+    .fluent #roundbtn .e-play-icon,
+    .fluent-dark #roundbtn .e-play-icon,
+    .bootstrap5 #roundbtn .e-play-icon,
+    .bootstrap5-dark #roundbtn .e-play-icon {
+        margin-top: -4px;
+        margin-left: 3px; 
+    } 
+
+    .tailwind #roundbtn .e-play-icon,
+    .tailwind-dark #roundbtn .e-play-icon {
+        margin-top: -3px;
+        margin-left: 3px;
+    }
+    .fabric #roundbtn .e-play-icon,
+    .fabric-dark #roundbtn .e-play-icon,
+    .highcontrast #roundbtn .e-play-icon {
+        margin-top: 0px;
+        margin-left: 3px;
+    }
+
+    .e-bigger .fabric #roundbtn .e-play-icon, 
+    .e-bigger .fabric-dark #roundbtn .e-play-icon {
+        margin-top: -2px;
+        margin-left: 1px;
+    }
+
+    .bootstrap4 #roundbtn .e-play-icon,
+    .bootstrap4-dark #roundbtn .e-play-icon
+    .e-bigger .bootstrap4 #roundbtn .e-play-icon,
+    .e-bigger .bootstrap4-dark #roundbtn .e-play-icon {
+        margin-top: 1px;
+        margin-left: 4px;
+    }
+
+    .e-bigger.tailwind #roundbtn .e-play-icon,
+    .e-bigger.tailwind-dark #roundbtn .e-play-icon,
+    .bootstrap #roundbtn .e-play-icon,
+    .bootstrap-dark #roundbtn .e-play-icon,
+    .e-bigger.bootstrap #roundbtn .e-play-icon,
+    .e-bigger.bootstrap-dark #roundbtn .e-play-icon{
+        margin-top: -2px;
+        margin-left: 3px;
     }
 
 </style>

src/calendar/date-range.html

@@ -32,6 +32,13 @@
         max-width: 300px;
         margin: 0 auto;
     }
+    
+    body.fluent-dark #date_label,
+    body.bootstrap5-dark #date_label,
+    body.tailwind-dark #date_label,
+    body.material-dark #date_label,
+    body.fabric-dark #date_label,
+    body.bootstrap-dark #date_label,
     body.highcontrast #date_label {
         color: white;
     } 

src/calendar/default.html

@@ -32,7 +32,14 @@
         max-width: 300px;
         margin: 0 auto;
     }
-    body.highcontrast #date_label {
+  
+    body.fluent-dark #date_label,
+    body.bootstrap5-dark #date_label,
+    body.tailwind-dark #date_label,
+    body.material-dark #date_label,
+    body.fabric-dark #date_label,
+    body.bootstrap-dark #date_label,
+    body.highcontrast #date_label  {
         color: white;
     } 
 </style>

src/calendar/disabled.html

@@ -32,6 +32,13 @@
         max-width: 300px;
         margin: 0 auto;
     }
+    
+    body.fluent-dark #date_label,
+    body.bootstrap5-dark #date_label,
+    body.tailwind-dark #date_label,
+    body.material-dark #date_label,
+    body.fabric-dark #date_label,
+    body.bootstrap-dark #date_label,
     body.highcontrast #date_label {
         color: white;
     } 

src/calendar/islamic-calendar.html

@@ -34,6 +34,16 @@
         max-width: 300px;
         margin: 0 auto;
     }
+
+    body.fluent-dark #date_label,
+    body.bootstrap5-dark #date_label,
+    body.tailwind-dark #date_label,
+    body.material-dark #date_label,
+    body.fabric-dark #date_label,
+    body.bootstrap-dark #date_label
+    body.highcontrast #date_label {
+        color: white;
+    } 
     
     /* custom code start*/
     .e-customStyle span.e-icons.highlight {
@@ -76,7 +86,8 @@
     .fabric-dark .sf-icon-cup:before,
     .bootstrap-dark .sf-icon-cup:before,
     .bootstrap5-dark .sf-icon-cup:before,
-    .tailwind-dark .sf-icon-cup:before {
+    .tailwind-dark .sf-icon-cup:before,
+    .fluent-dark .sf-icon-cup:before {
         color: #ff7500;
     }
 
@@ -85,7 +96,8 @@
     .fabric-dark .sf-icon-start:before,
     .bootstrap-dark .sf-icon-start:before,
     .bootstrap5-dark .sf-icon-start:before,
-    .tailwind-dark .sf-icon-start:before {
+    .tailwind-dark .sf-icon-start:before,
+    .fluent-dark .sf-icon-start:before {
         color: #ff7500;
     }
 
@@ -103,10 +115,6 @@
     .e-customStyle.e-calendar .e-content span.daycell {
         font-weight: bold;
     }
-
-    body.highcontrast #date_label {
-        color: white;
-    }
     
     /* custom code start*/
 

src/calendar/month-picker.html

@@ -34,8 +34,14 @@
         margin: 0 auto;
     }
 
+    body.fluent-dark #date_label,
+    body.bootstrap5-dark #date_label,
+    body.tailwind-dark #date_label,
+    body.material-dark #date_label,
+    body.fabric-dark #date_label,
+    body.bootstrap-dark #date_label,
     body.highcontrast #date_label {
         color: white;
-    }
+    } 
 </style>
 <!-- custom code end-->

src/calendar/multi-selection.html

@@ -60,8 +60,19 @@
     .fabric-dark .content-value,
     .bootstrap-dark .content-value,
     .bootstrap5-dark .content-value,
-    .tailwind-dark .content-value {
+    .tailwind-dark .content-value,
+    .fluent-dark .content-value {
         border: 1px solid rgb(150, 150, 150);
     }
+    
+    body.fluent-dark #date_label,
+    body.bootstrap5-dark #date_label,
+    body.tailwind-dark #date_label,
+    body.material-dark #date_label,
+    body.fabric-dark #date_label,
+    body.bootstrap-dark #date_label,
+    body.highcontrast #date_label {
+        color: white;
+    } 
 </style>
 <!-- custom code end-->

src/calendar/special-dates.html

@@ -70,7 +70,9 @@
     .bootstrap5-dark .e-customStyle span.e-icons.highlight,
     .bootstrap5-dark .e-customStyle span.e-icons.highlight:before,
     .tailwind-dark .e-customStyle span.e-icons.highlight,
-    .tailwind-dark .e-customStyle span.e-icons.highlight:before {
+    .tailwind-dark .e-customStyle span.e-icons.highlight:before,
+    .fluent-dark .e-customStyle span.e-icons.highlight,
+    .fluent-dark .e-customStyle span.e-icons.highlight:before {
         color: #ff7500;
     }
 
@@ -110,6 +112,12 @@
         font-weight: bold;
     }
 
+    body.fluent-dark #date_label,
+    body.bootstrap5-dark #date_label,
+    body.tailwind-dark #date_label,
+    body.material-dark #date_label,
+    body.fabric-dark #date_label,
+    body.bootstrap-dark #date_label,
     body.highcontrast #date_label {
         color: white;
     }

src/card/flip.html

@@ -108,9 +108,7 @@
     }
 
     .card-control-section.flip_card_layout #card_flip.e-card .e-front .e-card-header-caption .e-card-header-title,
-    .card-control-section.flip_card_layout #card_flip_profile.e-card .e-front .e-card-header-caption .e-card-header-title,
     .card-control-section.flip_card_layout #card_flip.e-card .e-front .e-card-header-caption .e-card-sub-title,
-    .card-control-section.flip_card_layout #card_flip_profile.e-card .e-front .e-card-header-caption .e-card-sub-title,
     .card-control-section.flip_card_layout #card_flip.e-card .e-card-actions button,
     .card-control-section.flip_card_layout #card_flip_profile.e-card .e-card-actions button {
         color: #000;
@@ -148,6 +146,13 @@
         height: 300px;
         justify-content: flex-end;
     }
+    
+    .e-bigger .bootstrap5 .card-control-section.flip_card_layout #card_flip.e-card, 
+    .e-bigger .bootstrap5 .card-control-section.flip_card_layout #card_flip_profile.e-card,
+    .e-bigger .bootstrap5-dark .card-control-section.flip_card_layout #card_flip.e-card, 
+    .e-bigger .bootstrap5-dark .card-control-section.flip_card_layout #card_flip_profile.e-card {
+        height: 350px;
+    }
 
     .tailwind-dark .card-control-section.flip_card_layout #card_flip.e-card,
     .tailwind-dark .card-control-section.flip_card_layout #card_flip_profile.e-card {
@@ -259,4 +264,4 @@
             max-width: 870px;
         }
     }
-</style>
+</style>

src/card/horizontal.html

@@ -4,7 +4,7 @@
             <div class="row card-layout">
                 <div class="col-xs-6 col-sm-6 col-lg-6 col-md-6">
                     <!-- Horizontal Card Layout for iphone-X Product -->
-                    <div tabindex="0" class="e-card e-card-horizontal e-product" style="height:420px" id="horizontal_phone_product">
+                    <div tabindex="0" class="e-card e-card-horizontal e-product" id="horizontal_phone_product">
                         <div class="e-card-stacked">
                             <div class="e-card-header">
                                 <div class="e-card-header-caption">
@@ -107,13 +107,23 @@
 </div>
 <style>
     /* Horizontal Card Layout Customization */
-
+    .e-card-horizontal.e-product {
+        height: 420px;
+    }
+    
+    .e-bigger.fluent .e-card-horizontal.e-product,
+    .e-bigger.fluent-dark .e-card-horizontal.e-product {
+        height: 480px;
+    }
+    img {
+        height: 100%
+    }
     .card-control-section.horizontal_card_layout #horizontal_phone_product .e-card-stacked {
         justify-content: flex-start;
     }
 
     .card-control-section.horizontal_card_layout #horizontal_phone_product .e-card-actions button:last-child {
-        margin-left: 20px;
+        margin-left: 8px;
     }
 
     .card-control-section.horizontal_card_layout .e-card.e-card-horizontal.e-product .e-card-stacked> :first-child,
@@ -210,4 +220,4 @@
             width: 80%;
         }
     }
-</style>
+</style>

src/card/reveal.html

@@ -222,12 +222,10 @@
         font-size: 12px;
     }
 
+    .fluent .card-control-section.reveal_card_layout .e-card .e-collapse:before,
+    .fluent-dark .card-control-section.reveal_card_layout .e-card .e-collapse:before,
     .tailwind .card-control-section.reveal_card_layout .e-card .e-collapse:before,
-    .tailwind-dark .card-control-section.reveal_card_layout .e-card .e-collapse:before{
+    .tailwind-dark .card-control-section.reveal_card_layout .e-card .e-collapse:before,
-        content: "\e771";
-        font-size: 12px;
-    }
-
     .bootstrap5 .card-control-section.reveal_card_layout .e-card .e-collapse:before,
     .bootstrap5-dark .card-control-section.reveal_card_layout .e-card .e-collapse:before{
         content: "\e7e7";
@@ -245,11 +243,10 @@
         content: "\e984";
     }
 
+    .fluent .card-control-section.reveal_card_layout .e-card .e-reveal-icon:before,
+    .fluent-dark .card-control-section.reveal_card_layout .e-card .e-reveal-icon:before,
     .tailwind .card-control-section.reveal_card_layout .e-card .e-reveal-icon:before,
-    .tailwind-dark .card-control-section.reveal_card_layout .e-card .e-reveal-icon:before{
+    .tailwind-dark .card-control-section.reveal_card_layout .e-card .e-reveal-icon:before,
-        content: "\e76f";
-    }
-    
     .bootstrap5 .card-control-section.reveal_card_layout .e-card .e-reveal-icon:before,
     .bootstrap5-dark .card-control-section.reveal_card_layout .e-card .e-reveal-icon:before {
     	content: "\e71c";
@@ -274,4 +271,4 @@
             margin: auto;
         }
     }
-</style>
+</style>

src/card/swipeable.html

@@ -5,7 +5,7 @@
                 <div class="col-xs-6 col-sm-6 col-lg-6 col-md-6" id="horizontal_product">
                     <!-- Swipe Card Layout  -->
                     <div tabindex="0" class="e-card e-card-horizontal">
-                        <img src='./src/card/images/newyork.png' style="height:214px" alt='newyork'/>
+                        <img src='./src/card/images/newyork.png' alt='newyork'/>
                         <div class='e-card-stacked'>
                             <div class="e-card-content" style="height: 175px">
                                 New York City has been described as the cultural, financial, and media capital of the world, and exerts a significant impact
@@ -25,7 +25,7 @@
                         </div>
                     </div>
                     <div tabindex="0" class="e-card e-card-horizontal">
-                        <img src='./src/card/images/malaysia.png' style="height:214px" alt='malaysia'/>
+                        <img src='./src/card/images/malaysia.png' alt='malaysia'/>
                         <div class='e-card-stacked'>
                             <div class="e-card-content" style="height: 175px">
                                 Malaysia is one of the Southeast Asian countries, on a peninsula of the Asian continent, to a certain extent; it can be recognized
@@ -45,7 +45,7 @@
                         </div>
                     </div>
                     <div tabindex="0" class="e-card e-card-horizontal">
-                        <img src='./src/card/images/eiffeltower.png' style="height:214px" alt='eiffeltower'/>
+                        <img src='./src/card/images/eiffeltower.png' alt='eiffeltower'/>
                         <div class='e-card-stacked'>
                             <div class="e-card-content" style="height: 175px">
                                 The Eiffel Tower is acknowledged as the universal symbol of Paris and France. It was originally designed by Émile Nouguier
@@ -65,7 +65,7 @@
                         </div>
                     </div>
                     <div tabindex="0" class="e-card e-card-horizontal">
-                        <img src='./src/card/images/sydney.png' style="height:214px" alt='sydney'/>
+                        <img src='./src/card/images/sydney.png' alt='sydney'/>
                         <div class='e-card-stacked'>
                             <div class="e-card-content" style="height: 175px">
                                 Sydney is a city on the east coast of Australia. Sydney is the capital city of New South Wales. About four million people
@@ -347,4 +347,4 @@
             max-width: 870px;
         }
     }
-</style>
+</style>

src/carousel/api.html

@@ -0,0 +1,127 @@
+<div class="control-section api-carousel-section">
+    <div class="col-lg-9 content-wrapper">
+        <div class="carousel-sample">
+            <div id="carousel"></div>
+        </div>
+    </div>
+    <div class="col-lg-3 property-section">
+        <div id="property" class='property-panel-table' title="Properties">
+            <table id="property" title="Properties" style="width: 100%">
+                <tbody>
+                    <tr>
+                        <td>Enable Autoplay</td>
+                        <td>
+                            <input id="autoPlay" type="checkbox" />
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>Infinite Looping</td>
+                        <td>
+                            <input id="loop" type="checkbox" />
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>Show Indicators</td>
+                        <td>
+                            <input id="showIndicators" type="checkbox" />
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>Show Play Button</td>
+                        <td>
+                            <input id="showPlayButton" type="checkbox" />
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>Show Arrows</td>
+                        <td>
+                            <select id="showButtons" class="form-control">
+                                <option value="Hidden">Hidden</option>
+                                <option value="Visible" selected>Visible</option>
+                                <option value="VisibleOnHover">On Hover</option>
+                            </select>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>Slide Interval</td>
+                        <td>
+                            <select id="interval" class="form-control">
+                                <option value="3000" selected>3 seconds</option>
+                                <option value="5000">5 seconds</option>
+                                <option value="7000">7 seconds</option>
+                            </select>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+</div>
+<style>
+    .api-carousel-section .carousel-sample {
+        margin: 0 auto 2em;
+        max-width: 500px;
+        height: 300px;
+    }
+
+    .api-carousel-section .property-panel-table td {
+        margin: 0;
+        padding-bottom: 1em;
+    }
+
+    .api-carousel .e-carousel-items .e-carousel-item .img-container {
+        height: 100%;
+    }
+
+    .api-carousel .e-carousel-items .e-carousel-item .img-container .img-caption {
+        color: rgba(255, 255, 255);
+        font-style: oblique;
+        font-size: 1.5rem;
+        margin: 0;
+        left: 1.5rem;
+        position: absolute;
+        text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
+        top: 1.5rem;
+    }
+</style>
+<script type="text/x-template" id="itemTemplate1">
+    <figure class="img-container">
+        <img src="src/carousel/images/bridge.jpg" alt="bridge" style="height:100%;width:100%;" />
+        <figcaption class="img-caption">Showing 1 of 5</figcaption>
+    </figure>
+</script>
+<script type="text/x-template" id="itemTemplate2">
+    <figure class="img-container">
+        <img src="src/carousel/images/trees.jpg" alt="spring_trees" style="height:100%;width:100%;" />
+        <figcaption class="img-caption">Showing 2 of 5</figcaption>
+    </figure>
+</script>
+<script type="text/x-template" id="itemTemplate3">
+    <figure class="img-container">
+        <img src="src/carousel/images/waterfall.jpg" alt="waterfall" style="height:100%;width:100%;" />
+        <figcaption class="img-caption">Showing 3 of 5</figcaption>
+    </figure>
+</script>
+<script type="text/x-template" id="itemTemplate4">
+    <figure class="img-container">
+        <img src="src/carousel/images/sea.jpg" alt="sea" style="height:100%;width:100%;" />
+        <figcaption class="img-caption">Showing 4 of 5</figcaption>
+    </figure>
+</script>
+<script type="text/x-template" id="itemTemplate5">
+    <figure class="img-container">
+        <img src="src/carousel/images/rocks.jpeg" alt="rocks" style="height:100%;width:100%;" />
+        <figcaption class="img-caption">Showing 5 of 5</figcaption>
+    </figure>
+</script>
+<div id="action-description">
+    <p>This sample demonstrates the properties available in the <b>JavaScript Carousel</b> component.</p>
+</div>
+<div id="description">
+    <p>In this demo, you can manually change the properties of the <code>JavaScript Carousel</code> component like
+        <code>autoPlay</code>, <code>buttonsVisibility</code>, <code>showIndicators</code>,
+        <code>interval</code>, <code>showPlayButton</code>, <code>loop</code> using the property panel.
+    </p>
+    <p>More information about the properties available in the Carousel component can be found in this <a target='_blank'
+            href="https://ej2.syncfusion.com/documentation/api/carousel/">documentation section</a>.</p>
+</div>

src/carousel/api.ts

@@ -0,0 +1,73 @@
+import { loadCultureFiles } from '../common/culture-loader';
+import { CarouselButtonVisibility, Carousel } from '@syncfusion/ej2-navigations';
+import { DropDownList, ChangeEventArgs } from '@syncfusion/ej2-dropdowns';
+import { Switch } from '@syncfusion/ej2-buttons';
+
+(window as any).default = (): void => {
+    loadCultureFiles();
+
+   const carouselObj: Carousel = new Carousel({
+      cssClass: 'api-carousel',
+      interval: 3000,
+      items: [
+         { template: '#itemTemplate1' },
+         { template: '#itemTemplate2' },
+         { template: '#itemTemplate3' },
+         { template: '#itemTemplate4' },
+         { template: '#itemTemplate5' }
+      ],
+   });
+   carouselObj.appendTo('#carousel');
+
+   const showButtons: DropDownList = new DropDownList({
+      change: (args: ChangeEventArgs) => {
+         carouselObj.buttonsVisibility = args.value as CarouselButtonVisibility;
+         carouselObj.dataBind();
+      }
+   });
+   showButtons.appendTo('#showButtons');
+
+   const interval: DropDownList = new DropDownList({
+      change: (args: ChangeEventArgs) => {
+         carouselObj.interval = args.value as number;
+         carouselObj.dataBind();
+      }
+   });
+   interval.appendTo('#interval');
+
+   const showIndicators: Switch = new Switch({
+      checked: true,
+      change: function (args) {
+         carouselObj.showIndicators = args.checked;
+         carouselObj.dataBind();
+      }
+   });
+   showIndicators.appendTo('#showIndicators');
+
+   const showPlayButton: Switch = new Switch({
+      checked: false,
+      change: function (args) {
+         carouselObj.showPlayButton = args.checked;
+         carouselObj.dataBind();
+      }
+   });
+   showPlayButton.appendTo('#showPlayButton');
+
+   const autoPlay: Switch = new Switch({
+      checked: true,
+      change: function (args) {
+         carouselObj.autoPlay = args.checked;
+         carouselObj.dataBind();
+      }
+   });
+   autoPlay.appendTo('#autoPlay');
+
+   const infiniteLoop: Switch = new Switch({
+      checked: true,
+      change: function (args) {
+         carouselObj.loop = args.checked;
+         carouselObj.dataBind();
+      }
+   });
+   infiniteLoop.appendTo('#loop');
+};

src/carousel/data-binding.html

@@ -0,0 +1,86 @@
+<script type="text/x-template" id="productTemplate">
+    <div class="card">
+        <img src=${ImgPath} class="card-img-top" alt=${Title} style="height:210px;width:100%;" />
+        <div class="card-body" style="padding:1rem;">
+            <h5 class="card-title">${Title}</h5>
+            <p class="card-text">${Content}</p>
+        </div>
+    </div>
+</script>
+<style type="text/css">
+    .db-carousel-section .carousel-sample {
+        border: 1px solid #e5e5e5;
+        border-radius: 0.5em;
+        margin: 0 auto 2em;
+        max-width: 420px;
+        height: 420px;
+    }
+
+    .db-carousel {
+        background-color: inherit;
+        border-radius: 0.5em;
+    }
+
+    .db-carousel .e-carousel-items .e-carousel-item .card-title,
+    .db-carousel .e-carousel-items .e-carousel-item .card-text {
+        opacity: 0;
+        text-align: justify;
+        transform: translateY(20px);
+    }
+
+    .db-carousel .e-carousel-items .e-carousel-item.e-active .card-title,
+    .db-carousel .e-carousel-items .e-carousel-item.e-active .card-text {
+        opacity: 1;
+        transform: translateY(0px);
+    }
+
+    .db-carousel .e-carousel-items .e-carousel-item .card-title {
+        font-size: 20px;
+        transition: transform 0.4s ease 0.2s;
+    }
+
+    .db-carousel .e-carousel-items .e-carousel-item .card-text {
+        font-size: 14px;
+        transition: transform 0.4s ease 0.2s;
+    }
+
+    .db-carousel .e-carousel-indicators {
+        height: 3em;
+    }
+
+    .db-carousel .e-carousel-indicators .e-indicator-bar .e-indicator div {
+        background-color: #e7e7e7;
+    }
+
+    @media screen and (max-width: 480px) {
+        .db-carousel-section .carousel-sample {
+            width: 100%;
+            height: 440px;
+        }
+    }
+</style>
+<div class="control-section db-carousel-section">
+    <div class="col-lg-12 content-wrapper">
+        <div class="carousel-sample">
+            <div id="carousel"></div>
+        </div>
+    </div>
+</div>
+<div id="action-description">
+    <p>
+        This sample demonstrates the basic rendering of the <strong>JavaScript Carousel</strong> component by binding
+        <code>dataSource</code> property.
+    </p>
+</div>
+<div id="description">
+    <p>
+        In this demo, products and its details available in our Syncfusion has been shown as slide show. The data to the
+        JavaScript Carousel component is bound using <code>dataSource</code> property. Also, <code>itemTemplate</code> is
+        used to customize the slides of the carousel.
+    </p>
+    <p>
+        More information about dataSource binding to the JavaScript Carousel component can be found in this
+        <a target='_blank' href="https://ej2.syncfusion.com/documentation/carousel/getting-started/">
+            documentation section</a>.
+    </p>
+</div>

src/carousel/data-binding.ts

@@ -0,0 +1,41 @@
+import { loadCultureFiles } from '../common/culture-loader';
+import { Carousel } from '@syncfusion/ej2-navigations';
+
+(window as any).default = (): void => {
+    loadCultureFiles();
+
+    const productDetails: Record<string, string | number>[] = [
+        {
+            ID: 1,
+            Title: 'San Francisco',
+            Content: 'San Francisco, officially the City and County of San Francisco, is a cultural, commercial, and financial center in the U.S. state of California. Located in Northern California, San Francisco is the 17th most populous city proper in the United States, and the fourth most populous in California.',
+            ImgPath: 'src/carousel/images/san-francisco.jpg',
+            URL: 'https://en.wikipedia.org/wiki/San_Francisco'
+        }, {
+            ID: 2,
+            Title: 'London',
+            Content: 'London, the capital of England and the United Kingdom, is a 21st-century city with history stretching back to Roman times. At its centre stand the imposing Houses of Parliament, the iconic ‘Big Ben’ clock tower and Westminster Abbey, site of British monarch coronations.',
+            ImgPath: 'src/carousel/images/london.jpg',
+            URL: 'https://en.wikipedia.org/wiki/London'
+        }, {
+            ID: 3,
+            Title: 'Tokyo',
+            Content: 'Tokyo, Japan’s busy capital, mixes the ultramodern and the traditional, from neon-lit skyscrapers to historic temples. The opulent Meiji Shinto Shrine is known for its towering gate and surrounding woods. The Imperial Palace sits amid large public gardens.',
+            ImgPath: 'src/carousel/images/tokyo.jpg',
+            URL: 'https://en.wikipedia.org/wiki/Tokyo'
+        }, {
+            ID: 4,
+            Title: 'Moscow',
+            Content: 'Moscow, on the Moskva River in western Russia, is the nation’s cosmopolitan capital. In its historic core is the Kremlin, a complex that’s home to the president and tsarist treasures in the Armoury. Outside its walls is Red Square, Russia`s symbolic center.',
+            ImgPath: 'src/carousel/images/moscow.jpg',
+            URL: 'https://en.wikipedia.org/wiki/Moscow'
+        }
+    ];
+    const carouselObj: Carousel = new Carousel({
+        cssClass: 'db-carousel',
+        dataSource: productDetails,
+        itemTemplate: '#productTemplate',
+        buttonsVisibility: 'Hidden'
+    });
+    carouselObj.appendTo(document.getElementById('carousel'));
+};

src/carousel/default.html

@@ -0,0 +1,42 @@
+<div class="control-section default-carousel-section">
+    <div class="col-lg-12 content-wrapper">
+        <div class="carousel-sample">
+            <div id="carousel"></div>
+        </div>
+    </div>
+</div>
+<style>
+    .default-carousel-section .carousel-sample {
+        margin: 0 auto 2em;
+        max-width: 500px;
+        height: 300px;
+    }
+
+    .default-carousel .e-carousel-items .e-carousel-item .img-container {
+        height: 100%;
+    }
+
+    .default-carousel .e-carousel-items .e-carousel-item .img-caption {
+        bottom: 4em;
+        color: #fff;
+        font-size: 12pt;
+        height: 2em;
+        position: relative;
+        padding: 0.3em 1em;
+        text-align: center;
+        width: 100%;
+    }
+</style>
+<div id="action-description">
+    <p>This sample demonstrates the basic rendering of the <b>JavaScript Carousel</b> component with
+        </code>items</code>. </p>
+</div>
+<div id="description">
+    <p>The <code>JavaScript Carousel</code> component is commonly used as a slideshow of images and contents. In this
+        demo, simple
+        slideshow of natural images has been showcased with the help of <code>items</code> property.</p>
+    <p>By default, the slide will be changed automatically with the interval of <b>5 seconds.</b> You can also manually
+        change the slide items using previous and next icons.</p>
+    <p>More information about Carousel component can be found in this <a target='_blank'
+            href="https://ej2.syncfusion.com/documentation/carousel/getting-started/">documentation section</a>.</p>
+</div>

src/carousel/default.ts

@@ -0,0 +1,18 @@
+import { loadCultureFiles } from '../common/culture-loader';
+import { Carousel } from '@syncfusion/ej2-navigations';
+
+(window as any).default = (): void => {
+    loadCultureFiles();
+
+    const carouselObj: Carousel = new Carousel({
+        cssClass: 'default-carousel',
+        items: [
+            { template: '<figure class="img-container"><img src="src/carousel/images/bridge.jpg" alt="bridge" style="height:100%;width:100%;" /><figcaption class="img-caption">Golden Gate Bridge, San Francisco</figcaption></figure>' },
+            { template: '<figure class="img-container"><img src="src/carousel/images/trees.jpg" alt="spring_trees" style="height:100%;width:100%;" /><figcaption class="img-caption">Spring Flower Trees</figcaption></figure>' },
+            { template: '<figure class="img-container"><img src="src/carousel/images/waterfall.jpg" alt="waterfall" style="height:100%;width:100%;" /><figcaption class="img-caption">Oddadalen Waterfalls, Norway</figcaption></figure>' },
+            { template: '<figure class="img-container"><img src="src/carousel/images/sea.jpg" alt="sea" style="height:100%;width:100%;" /><figcaption class="img-caption">Anse Source d`Argent, Seychelles</figcaption></figure>' },
+            { template: '<figure class="img-container"><img src="src/carousel/images/rocks.jpeg" alt="rocks" style="height:100%;width:100%;" /><figcaption class="img-caption">Stonehenge, England</figcaption></figure>' }
+        ]
+    });
+    carouselObj.appendTo('#carousel');
+};

src/carousel/keyboard-navigation.html

@@ -0,0 +1,281 @@
+<div class="control-section keyboard-carousel-section">
+  <div class="col-lg-12 content-wrapper">
+    <div class="carousel-sample">
+      <div id="carousel"></div>
+    </div>
+    <div id='source_link'>Source: &nbsp;
+      <table>
+        <tr>
+          <td>
+            <a href="https://en.wikipedia.org/" target='_blank'>https://en.wikipedia.org/</a>
+          </td>
+        </tr>
+      </table>
+    </div>
+  </div>
+</div>
+<style>
+  .keyboard-carousel-section .carousel-sample {
+    background-color: #f5f9fd;
+    border-radius: 1.5em;
+    margin: 0 auto 2em;
+    max-width: 80%;
+    height: 500px;
+  }
+
+  .kb-carousel .e-carousel-items .e-carousel-item .product-container {
+    align-items: center;
+    display: flex;
+    height: 100%;
+    justify-content: center;
+    padding: 1em;
+  }
+
+  .kb-carousel .e-carousel-items .e-carousel-item .product-container .heading {
+    font-size: 1.5em;
+    color: #1a1a1a;
+    letter-spacing: 0;
+    font-weight: 500;
+    margin: 1rem 0 1.6rem;
+  }
+
+  .kb-carousel .e-carousel-items .e-carousel-item .product-container .description {
+    font-size: 1.5rem;
+    color: #1a1a1a;
+    letter-spacing: 0.2px;
+    line-height: 2.7rem;
+    padding: 0 0 5rem;
+    text-align: justify;
+  }
+
+  .kb-carousel .e-carousel-items .e-carousel-item .product-container .description a {
+    text-decoration: underline;
+  }
+
+  .kb-carousel .e-carousel-navigators .e-previous .e-btn:not(:disabled) .e-btn-icon,
+  .kb-carousel .e-carousel-navigators .e-next .e-btn:not(:disabled) .e-btn-icon,
+  .kb-carousel .e-carousel-navigators .e-play-pause .e-btn:not(:disabled) .e-btn-icon {
+    color: #4d8fe4;
+    font-size: 1.5rem;
+    line-height: normal;
+  }
+
+  .kb-carousel .e-carousel-navigators .e-play-pause .e-btn {
+    height: 5rem;
+    width: 5rem;
+  }
+
+  .kb-carousel .e-carousel-navigators .e-play-pause .e-btn:not(:disabled) .e-btn-icon {
+    font-size: 2.4rem;
+  }
+
+  .kb-carousel .e-carousel-navigators .e-previous .e-btn:not(:disabled):hover,
+  .kb-carousel .e-carousel-navigators .e-next .e-btn:not(:disabled):hover,
+  .kb-carousel .e-carousel-navigators .e-play-pause .e-btn:not(:disabled):hover,
+  .kb-carousel .e-carousel-navigators .e-previous .e-btn:not(:disabled):focus,
+  .kb-carousel .e-carousel-navigators .e-next .e-btn:not(:disabled):focus,
+  .kb-carousel .e-carousel-navigators .e-play-pause .e-btn:not(:disabled):focus,
+  .kb-carousel .e-carousel-navigators .e-previous .e-btn:not(:disabled):active,
+  .kb-carousel .e-carousel-navigators .e-next .e-btn:not(:disabled):active,
+  .kb-carousel .e-carousel-navigators .e-play-pause .e-btn:not(:disabled):active {
+    background-color: #d2e3f8;
+  }
+
+  .kb-carousel .e-carousel-indicators .e-indicator-bar .e-indicator div {
+    background-color: #e5e5e5;
+    border: 0px !important;
+  }
+
+  .kb-carousel .e-carousel-indicators .e-indicator-bar.e-active .e-indicator div {
+    background-color: #4d8fe4 !important;
+  }
+
+  @media screen and (max-width: 480px) {
+    .keyboard-carousel-section .carousel-sample {
+      max-height: 400px;
+      max-width: 100%;
+    }
+
+    .kb-carousel .e-carousel-items .e-carousel-item .product-container .description {
+      font-size: 1.25rem;
+    }
+
+    .kb-carousel .e-carousel-items .e-carousel-item .product-container .image-container {
+      display: none;
+    }
+  }
+
+  #source_link {
+    float: right;
+    margin-right: 10px;
+  }
+
+  .bootstrap5-dark .keyboard-carousel-section .carousel-sample,
+  .fluent-dark .keyboard-carousel-section .carousel-sample,
+  .tailwind-dark .keyboard-carousel-section .carousel-sample,
+  .material-dark .keyboard-carousel-section .carousel-sample,
+  .fabric-dark .keyboard-carousel-section .carousel-sample,
+  .bootstrap-dark .keyboard-carousel-section .carousel-sample,
+  .highcontrast .keyboard-carousel-section .carousel-sample {
+    background-color: #26292E;
+  }
+
+  .bootstrap5-dark .kb-carousel .e-carousel-items .e-carousel-item .product-container .heading,
+  .fluent-dark .kb-carousel .e-carousel-items .e-carousel-item .product-container .heading,
+  .tailwind-dark .kb-carousel .e-carousel-items .e-carousel-item .product-container .heading,
+  .material-dark .kb-carousel .e-carousel-items .e-carousel-item .product-container .heading,
+  .fabric-dark .kb-carousel .e-carousel-items .e-carousel-item .product-container .heading,
+  .bootstrap-dark .kb-carousel .e-carousel-items .e-carousel-item .product-container .heading,
+  .highcontrast .kb-carousel .e-carousel-items .e-carousel-item .product-container .heading {
+    color: #bbbbbb;
+  }
+
+  .bootstrap5-dark .kb-carousel .e-carousel-items .e-carousel-item .product-container .description,
+  .fluent-dark .kb-carousel .e-carousel-items .e-carousel-item .product-container .description,
+  .tailwind-dark .kb-carousel .e-carousel-items .e-carousel-item .product-container .description,
+  .material-dark .kb-carousel .e-carousel-items .e-carousel-item .product-container .description,
+  .fabric-dark .kb-carousel .e-carousel-items .e-carousel-item .product-container .description,
+  .bootstrap-dark .kb-carousel .e-carousel-items .e-carousel-item .product-container .description,
+  .highcontrast .kb-carousel .e-carousel-items .e-carousel-item .product-container .description {
+    color: #9f9f9f
+  }
+
+  .bootstrap5-dark .kb-carousel .e-carousel-navigators .e-btn:not(:disabled):hover,
+  .bootstrap5-dark .kb-carousel .e-carousel-navigators .e-btn:not(:disabled):focus,
+  .fluent-dark .kb-carousel .e-carousel-navigators .e-btn:not(:disabled):hover,
+  .fluent-dark .kb-carousel .e-carousel-navigators .e-btn:not(:disabled):focus,
+  .tailwind-dark .kb-carousel .e-carousel-navigators .e-btn:not(:disabled):hover,
+  .tailwind-dark .kb-carousel .e-carousel-navigators .e-btn:not(:disabled):focus,
+  .material-dark .kb-carousel .e-carousel-navigators .e-btn:not(:disabled):hover,
+  .material-dark .kb-carousel .e-carousel-navigators .e-btn:not(:disabled):focus,
+  .fabric-dark .kb-carousel .e-carousel-navigators .e-btn:not(:disabled):hover,
+  .fabric-dark .kb-carousel .e-carousel-navigators .e-btn:not(:disabled):focus,
+  .bootstrap-dark .kb-carousel .e-carousel-navigators .e-btn:not(:disabled):hover,
+  .bootstrap-dark .kb-carousel .e-carousel-navigators .e-btn:not(:disabled):focus,
+  .highcontrast .kb-carousel .e-carousel-navigators .e-btn:not(:disabled):hover,
+  .highcontrast .kb-carousel .e-carousel-navigators .e-btn:not(:disabled):focus {
+    background-color: #4e4e4e;
+  }
+
+  .bootstrap5-dark .kb-carousel .e-carousel-navigators .e-btn:not(:disabled) .e-btn-icon,
+  .fluent-dark .kb-carousel .e-carousel-navigators .e-btn:not(:disabled) .e-btn-icon,
+  .tailwind-dark .kb-carousel .e-carousel-navigators .e-btn:not(:disabled) .e-btn-icon,
+  .material-dark .kb-carousel .e-carousel-navigators .e-btn:not(:disabled) .e-btn-icon,
+  .fabric-dark .kb-carousel .e-carousel-navigators .e-btn:not(:disabled) .e-btn-icon,
+  .bootstrap-dark .kb-carousel .e-carousel-navigators .e-btn:not(:disabled) .e-btn-icon,
+  .highcontrast .kb-carousel .e-carousel-navigators .e-btn:not(:disabled) .e-btn-icon {
+    color: #dfdfdf;
+  }
+
+  .bootstrap5-dark .kb-carousel .e-carousel-indicators .e-indicator-bar .e-indicator div,
+  .fluent-dark .kb-carousel .e-carousel-indicators .e-indicator-bar .e-indicator div,
+  .tailwind-dark .kb-carousel .e-carousel-indicators .e-indicator-bar .e-indicator div,
+  .material-dark .kb-carousel .e-carousel-indicators .e-indicator-bar .e-indicator div,
+  .fabric-dark .kb-carousel .e-carousel-indicators .e-indicator-bar .e-indicator div,
+  .bootstrap-dark .kb-carousel .e-carousel-indicators .e-indicator-bar .e-indicator div,
+  .highcontrast .kb-carousel .e-carousel-indicators .e-indicator-bar .e-indicator div {
+    background-color: #626262;
+  }
+
+  .kb-carousel .e-carousel-indicators {
+    margin: 16px;
+  }
+
+  .kb-carousel .e-carousel-navigators .e-play-pause span.e-play-icon {
+    margin-left: 4px;
+    margin-top: 2px;
+  }
+</style>
+<script type="text/x-template" id="itemTemplate1">
+  <div class="product-container">
+      <div class="col-sm-5 component-container">
+        <div class="heading">San Francisco</div>
+        <div class="description">
+          San Francisco, officially the City and County of San Francisco, is a cultural, commercial, and financial center in the U.S. state of California.
+        </div>
+        <a class="demo" href="https://en.wikipedia.org/wiki/San_Francisco"
+          target="_blank">READ MORE</a>
+      </div>
+      <div class="col-sm-5 image-container">
+        <picture>
+          <img style="width:100%; height:100%" src="src/carousel/images/san-francisco.jpg" alt="San Francisco" />
+        </picture>
+      </div>
+    </div>
+</script>
+<script type="text/x-template" id="itemTemplate2">
+  <div class="product-container">
+      <div class="col-sm-5 component-container">
+        <div class="heading">London</div>
+        <div class="description">
+          London, the capital of England and the United Kingdom, is a 21st-century city with history stretching back to Roman times. At its centre stand the imposing Houses of Parliament, the iconic ‘Big Ben’ clock tower and Westminster Abbey, site of British monarch coronations.
+        </div>
+        <a class="demo"
+          href="https://en.wikipedia.org/wiki/London"
+          target="_blank">READ MORE</a>
+      </div>
+      <div class="col-sm-5 image-container">
+        <picture>
+          <img style="width:100%; height:100%" src="src/carousel/images/london.jpg" alt="London" />
+        </picture>
+      </div>
+    </div>
+</script>
+<script type="text/x-template" id="itemTemplate3">
+  <div class="product-container">
+      <div class="col-sm-5 component-container">
+        <div class="heading">Tokyo</div>
+        <div class="description">
+          Tokyo, Japan’s busy capital, mixes the ultramodern and the traditional, from neon-lit skyscrapers to historic temples. The opulent Meiji Shinto Shrine is known for its towering gate and surrounding woods. The Imperial Palace sits amid large public gardens.
+        </div>
+        <a class="demo" href="https://en.wikipedia.org/wiki/Tokyo"
+          target="_blank">READ MORE</a>
+      </div>
+      <div class="col-sm-5 image-container">
+        <picture>
+          <img style="width:100%; height:100%" src="src/carousel/images/tokyo.jpg" alt="Tokyo" />
+        </picture>
+      </div>
+    </div>
+</script>
+<script type="text/x-template" id="itemTemplate4">
+  <div class="product-container">
+      <div class="col-sm-5 component-container">
+        <div class="heading">Moscow</div>
+        <div class="description">
+          Moscow, on the Moskva River in western Russia, is the nation’s cosmopolitan capital. In its historic core is the Kremlin, a complex that’s home to the president and tsarist treasures in the Armoury. Outside its walls is Red Square, Russia's symbolic center.
+        </div>
+        <a class="demo" href="https://en.wikipedia.org/wiki/Moscow"
+          target="_blank">READ MORE</a>
+      </div>
+      <div class="col-sm-5 image-container">
+        <picture>
+          <img style="width:100%; height:100%" src="src/carousel/images/moscow.jpg" alt="Moscow" />
+        </picture>
+      </div>
+    </div>
+</script>
+<div id="action-description">
+  <p>
+    This sample demonstrates the keyboard interactions with the <strong>JavaScript Carousel</strong> component.
+  </p>
+</div>
+<div id="description">
+  <p>
+    The <code>JavaScript Carousel</code> component can be interacted with keyboard navigation. Below key combinations
+    can be used in Carousel to initiate various actions.
+  </p>
+  <ul>
+    <li><b>Alt + J</b> keys to focus the carousel component (done at application end).</li>
+    <li><b>Arrows</b> keys to navigate between slides.</li>
+    <li><b>Home</b> to navigate to the first slide.</li>
+    <li><b>End</b> to navigate to the last slide.</li>
+    <li><b>Space</b> to play/pause the slide transitions.</li>
+    <li><b>Enter</b> to perform the respective action on its focus.</li>
+  </ul>
+  <p>
+    More information about accessbilities of JavaScript Carousel component can be found in this
+    <a target="_blank" href="https://ej2.syncfusion.com/documentation/carousel/getting-started/">
+      documentation</a> section.
+  </p>
+</div>

src/carousel/keyboard-navigation.ts

@@ -0,0 +1,25 @@
+import { loadCultureFiles } from '../common/culture-loader';
+import { Carousel } from '@syncfusion/ej2-navigations';
+
+(window as any).default = (): void => {
+    loadCultureFiles();
+
+    const carouselObj: Carousel = new Carousel({
+        autoPlay: false,
+        cssClass: 'kb-carousel',
+        items: [
+            { template: '#itemTemplate1' },
+            { template: '#itemTemplate2' },
+            { template: '#itemTemplate3' },
+            { template: '#itemTemplate4' }
+        ],
+        showPlayButton: true
+    });
+    carouselObj.appendTo('#carousel');
+    //Focus the Carousel Control (alt+j) key combination
+    document.body.addEventListener('keydown', (e: KeyboardEvent) => {
+        if (e.altKey && e.keyCode === 74 && carouselObj.element) {
+            carouselObj.element.focus();
+        }
+    });
+};

src/carousel/overview.html

@@ -0,0 +1,338 @@
+<script type="text/x-template" id="itemTemplate">
+    <div class="card">
+        <div class="card-body">
+            <div class="card-header">
+                <div class="card-title">${title}</div>
+            </div>
+            <div class="card-content">
+                <div class="card-left-content">
+                    <div class="img-container">
+                        <img style="width:100%; height:100%" src="${imageUrl}" alt="${title}" />
+                    </div>
+                </div>
+                <div class="card-right-content">
+                    <table>
+                        <thead>
+                            <tr>
+                                <td class="card-text" colSpan="2">Product Details</td>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td>Model</td>
+                                <td>${model}</td>
+                            </tr>
+                            <tr>
+                                <td>Brand</td>
+                                <td>${brand}</td>
+                            </tr>
+                            <tr>
+                                <td>RAM</td>
+                                <td>${ram}</td>
+                            </tr>
+                            <tr>
+                                <td>ROM</td>
+                                <td>${rom}</td>
+                            </tr>
+                            <tr>
+                                <td>Platform</td>
+                                <td>${platform}</td>
+                            </tr>
+                            <tr>
+                                <td>Version</td>
+                                <td>${version}</td>
+                            </tr>
+                            <tr>
+                                <td>Launched on</td>
+                                <td>${releaseDate}</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+    </div>
+</script>
+<style type="text/css">
+    .overview-carousel-section .carousel-sample {
+        border-radius: 1rem;
+        color: #6c757d;
+        height: 400px;
+        margin: 0 auto 2em;
+        width: 600px;
+    }
+
+    .overview-carousel .e-carousel-items .e-carousel-item .card {
+        height: 100%;
+    }
+
+    .overview-carousel .e-carousel-items .e-carousel-item .card-body {
+        height: 100%;
+        padding: 1rem;
+    }
+
+    .overview-carousel .e-carousel-items .e-carousel-item .card-body .card-header {
+        align-items: center;
+        display: flex;
+        font-weight: 500;
+        height: 3rem;
+        justify-content: center;
+    }
+
+    .overview-carousel .e-carousel-items .e-carousel-item .card-body .card-header .card-title {
+        font-size: 1.5rem;
+        text-transform: uppercase;
+    }
+
+    .overview-carousel .e-carousel-items .e-carousel-item .card-body .card-content {
+        display: flex;
+        height: calc(100% - 3rem);
+    }
+
+    .overview-carousel .e-carousel-items .e-carousel-item .card-body .card-content .card-left-content,
+    .overview-carousel .e-carousel-items .e-carousel-item .card-body .card-content .card-right-content {
+        padding: 2rem;
+        width: 50%;
+    }
+
+    .overview-carousel .e-carousel-items .e-carousel-item .card-body .card-content .card-left-content .img-container {
+        background-position: center;
+        background-repeat: no-repeat;
+        background-size: contain;
+        height: 100%;
+    }
+
+    .overview-carousel .e-carousel-items .e-carousel-item .card-body .card-content .card-right-content table {
+        table-layout: fixed;
+        width: 100%;
+    }
+
+    .overview-carousel .e-carousel-items .e-carousel-item .card-body .card-content .card-right-content table td.card-text {
+        font-size: 1.4rem;
+    }
+
+    .overview-carousel .e-carousel-items .e-carousel-item .card-body .card-content .card-right-content table td {
+        padding-bottom: 1rem;
+    }
+
+    .overview-carousel .e-carousel-items .e-carousel-item .card-body .card-content .card-right-content table tr td:first-child {
+        font-weight: 500;
+    }
+
+    .carousel-content {
+        align-items: center;
+        display: flex;
+        height: 100%;
+        justify-content: center;
+    }
+
+    .carousel-content .carousel-navigations {
+        align-items: center;
+        display: flex;
+        height: 5rem;
+        justify-content: center;
+        width: 5rem;
+    }
+
+    .carousel-footer {
+        align-items: center;
+        display: flex;
+        height: 100%;
+        justify-content: center;
+    }
+
+    .carousel-footer .indicator-container,
+    .carousel-footer .button-container {
+        align-items: center;
+        display: flex;
+        height: 2rem;
+        justify-content: center;
+        gap: 0.5rem;
+    }
+
+    .carousel-footer .indicator-container .indicator {
+        border-color: inherit;
+        border-radius: 50%;
+        cursor: pointer;
+        height: 1.4rem;
+        margin: 0.5rem;
+        transition: all 0.5s ease-in-out;
+        width: 1.4rem;
+        padding: 4px;
+    }
+
+    .bootstrap5.e-bigger .carousel-footer .button-container .play-button span,
+    .bootstrap5-dark.e-bigger .carousel-footer .button-container .play-button span,
+    .fluent.e-bigger .carousel-footer .button-container .play-button span,
+    .fluent-dark.e-bigger .carousel-footer .button-container .play-button span,
+    .tailwind.e-bigger .carousel-footer .button-container .play-button span,
+    .tailwind-dark.e-bigger .carousel-footer .button-container .play-button span {
+        line-height: normal;
+    }
+
+    .carousel-footer .indicator-container .indicator.active-indicator {
+        background-color: #6c757d;
+    }
+
+    .carousel-footer .button-container {
+        padding-left: 2.4rem;
+    }
+
+    #source_link {
+        float: right;
+        margin-right: 10px;
+    }
+
+    .bootstrap-dark .overview-carousel-section .carousel-sample,
+    .bootstrap5-dark .overview-carousel-section .carousel-sample,
+    .material-dark .overview-carousel-section .carousel-sample,
+    .fabric-dark .overview-carousel-section .carousel-sample,
+    .highcontrast .overview-carousel-section .carousel-sample,
+    .tailwind-dark .overview-carousel-section .carousel-sample {
+        background-color: inherit;
+        color: inherit;
+    }
+
+    .bootstrap4 .carousel-footer .indicator-container .indicator:not(.active-indicator) {
+        background-color: transparent;
+        border-color: #6c757d;
+    }
+
+    .bootstrap-dark .carousel-footer .button-container .e-btn.e-active,
+    .bootstrap5-dark .carousel-footer .button-container .e-btn.e-active,
+    .material-dark .carousel-footer .button-container .e-btn.e-active,
+    .fabric-dark .carousel-footer .button-container .e-btn.e-active,
+    .highcontrast .carousel-footer .button-container .e-btn.e-active,
+    .tailwind-dark .carousel-footer .button-container .e-btn.e-active {
+        color: #fff;
+    }
+
+    @media screen and (max-width: 480px) {
+        .overview-carousel-section .carousel-sample {
+            width: 100%;
+        }
+
+        .overview-carousel .e-carousel-items .e-carousel-item .card-body .card-content .card-left-content {
+            padding: 2rem;
+            width: 100%;
+        }
+
+        .overview-carousel .e-carousel-items .e-carousel-item .card-body .card-content .card-right-content {
+            display: none;
+        }
+
+        #source_link {
+            margin-top: -10px;
+            margin-right: 0px;
+        }
+    }
+
+    .bootstrap5 .overview-carousel-section .carousel-sample .carousel-navigations button span,
+    .bootstrap5-dark .overview-carousel-section .carousel-sample .carousel-navigations button span,
+    .fluent .overview-carousel-section .carousel-sample .carousel-navigations button span,
+    .fluent-dark .overview-carousel-section .carousel-sample .carousel-navigations button span,
+    .tailwind .overview-carousel-section .carousel-sample .carousel-navigations button span,
+    .tailwind-dark .overview-carousel-section .carousel-sample .carousel-navigations button span {
+        font-size: 20px !important;
+        line-height: normal;
+    }
+
+    .tailwind .overview-carousel-section .carousel-sample .carousel-footer .button-container span,
+    .tailwind-dark .overview-carousel-section .carousel-sample .carousel-footer .button-container span {
+        font-size: 20px;
+    }
+
+    .bootstrap .overview-carousel-section .e-icons.e-arrow-right:before,
+    .bootstrap-dark .overview-carousel-section .e-icons.e-arrow-right:before {
+        content: "\e84d";
+    }
+
+    .bootstrap .overview-carousel-section .carousel-navigations button span,
+    .bootstrap .overview-carousel-section .carousel-footer .button-container button span {
+        color: #6c757d !important;
+    }
+</style>
+<div class="control-section overview-carousel-section">
+    <div class="col-lg-12 content-wrapper">
+        <div class="carousel-sample">
+            <div style="height:calc(100% - 4rem);">
+                <div class="carousel-content">
+                    <div class="carousel-navigations">
+                        <button id="previousBtn" title="Previous" class="carousel-navigation"></button>
+                    </div>
+                    <div id="carousel"></div>
+                    <div class="carousel-navigations">
+                        <button id="nextBtn" title="Next" class="carousel-navigation"></button>
+                    </div>
+                </div>
+            </div>
+            <div style="height:4rem;">
+                <div class="carousel-footer">
+                    <div class="indicator-container">
+                        <button id="indicatorBtnOne" class="indicator active-indicator"></button>
+                        <button id="indicatorBtnTwo" class="indicator"></button>
+                        <button id="indicatorBtnThree" class="indicator"></button>
+                        <button id="indicatorBtnFour" class="indicator"></button>
+                        <button id="indicatorBtnFive" class="indicator"></button>
+                    </div>
+                    <div class="button-container">
+                        <button id="playPauseBtn" class="play-button"></button>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div id='source_link'>Source: &nbsp;
+            <table>
+                <tr>
+                    <td>
+                        <a href="https://store.google.com/?hl=en-GB" target='_blank'>https://store.google.com</a>
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+                        <a href="https://www.apple.com/in/iphone-13-pro/" target='_blank'>https://www.apple.com</a>
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+                        <a href="https://www.nokia.com/phones/en_in/nokia-xr-20?sku=VMA750B9FI1CN0"
+                            target='_blank'>https://www.nokia.com</a>
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+                        <a href="https://www.oneplus.in/oneplus-9rt" target='_blank'>https://www.oneplus.in</a>
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+                        <a href="https://www.samsung.com/in/smartphones/galaxy-s21-5g/"
+                            target='_blank'>https://www.samsung.com</a>
+                    </td>
+                </tr>
+            </table>
+        </div>
+    </div>
+</div>
+<div id="action-description">
+    <p>
+        This sample demonstrates the overview of the <strong>JavaScript Carousel</strong> component and customizing it
+        with external navigators.
+    </p>
+</div>
+<div id="description">
+    <p>
+        The <code>JavaScript Carousel</code> component is commonly used as a slideshow of images and contents. In this
+        demo, the external navigators and indicators are rendered outside the carousel by hiding the default
+        navigators and indicators using <code>buttonsVisibility</code> and <code>showIndicators</code> properties.
+        The slide items are rendered using <code>dataSource</code> and customized using <code>itemTemplate</code>.
+    </p>
+    <p>
+        The external navigation of slide items is handled using public methods <code>prev</code> and <code>next</code>
+        and changing <code>selectedIndex</code> property.
+    </p>
+    <p>
+        More information about JavaScript Carousel component can be found in this <a target='_blank'
+            href="https://ej2.syncfusion.com/documentation/carousel/getting-started/">documentation section</a>.
+    </p>
+</div>

src/carousel/overview.ts

@@ -0,0 +1,61 @@
+import { loadCultureFiles } from '../common/culture-loader';
+import { Carousel } from '@syncfusion/ej2-navigations';
+import { Button } from '@syncfusion/ej2-buttons';
+import { addClass, removeClass, createElement } from '@syncfusion/ej2-base';
+
+(window as any).default = (): void => {
+    loadCultureFiles();
+
+    const carouselData = [
+        { imageUrl: 'src/carousel/images/google-pixel-6-pro.png', title: 'Google Pixel', model: 'Pixel 6 Pro', brand: 'Google', releaseDate: 'Oct 28, 2021', ram: '12GB', rom: '128GB', platform: 'Android', version: 12 },
+        { imageUrl: 'src/carousel/images/iphone-13-pro.png', title: 'iPhone', model: 'iPhone 13 Pro', brand: 'Apple', releaseDate: 'Sept 14, 2021', ram: '4GB', rom: '128GB', platform: 'iOS', version: 15 },
+        { imageUrl: 'src/carousel/images/nokia-xr-20.png', title: 'Nokia', model: 'XR-20', brand: 'Nokia', releaseDate: 'Oct 30, 2021', ram: '6GB', rom: '128GB', platform: 'Android', version: 11 },
+        { imageUrl: 'src/carousel/images/one-plus-9-pro.png', title: 'OnePlus', model: 'OP9 Pro', brand: 'OnePlus', releaseDate: 'March 23, 2021', ram: '8GB', rom: '128GB', platform: 'OxygenOS based on Android', version: 11 },
+        { imageUrl: 'src/carousel/images/samsung-s21-fe.png', title: 'Samsung', model: 'S21 FE', brand: 'Samsung', releaseDate: 'Jan 27, 2021', ram: '8GB', rom: '128GB', platform: 'Samsung One UI 4.0 based on Android', version: 12 }
+    ];
+    const carouselObj: Carousel = new Carousel({
+        cssClass: 'overview-carousel',
+        width: 'calc(100% - 10rem)',
+        buttonsVisibility: 'Hidden',
+        showIndicators: false,
+        dataSource: carouselData,
+        itemTemplate: '#itemTemplate',
+        slideChanging: function (args) {
+            const indicators = [].slice.call(document.querySelectorAll('.indicator'));
+            removeClass(indicators, 'active-indicator');
+            addClass([indicators[args.nextIndex]], 'active-indicator');
+        }
+    });
+    carouselObj.appendTo('#carousel');
+    const previousBtn = new Button({ cssClass: 'e-flat e-round', iconCss: 'e-icons e-arrow-left' }, '#previousBtn');
+    previousBtn.element.onclick = function () { carouselObj.prev(); };
+
+    const nextBtn = new Button({ cssClass: 'e-flat e-round', iconCss: 'e-icons e-arrow-right' }, '#nextBtn');
+    nextBtn.element.onclick = function () { carouselObj.next(); };
+
+    const playPauseBtn = new Button({ cssClass: 'e-flat e-round', iconCss: 'e-icons e-pause', isToggle: true }, '#playPauseBtn');
+    playPauseBtn.element.onclick = function () {
+        setTimeout(() => {
+            carouselObj.autoPlay = !playPauseBtn.element.classList.contains('e-active');
+            carouselObj.dataBind();
+            playPauseBtn.iconCss = playPauseBtn.element.classList.contains('e-active') ? 'e-icons e-play' : 'e-icons e-pause';
+            playPauseBtn.dataBind();
+        });
+    };
+
+    const indicatorOne = new Button({ cssClass: 'e-flat e-round' }, '#indicatorBtnOne');
+    indicatorOne.element.addEventListener('click', function () { onIndicatorClick(0) });
+    const indicatorTwo = new Button({ cssClass: 'e-flat e-round' }, '#indicatorBtnTwo');
+    indicatorTwo.element.addEventListener('click', function () { onIndicatorClick(1) });
+    const indicatorThree = new Button({ cssClass: 'e-flat e-round' }, '#indicatorBtnThree');
+    indicatorThree.element.addEventListener('click', function () { onIndicatorClick(2) });
+    const indicatorFour = new Button({ cssClass: 'e-flat e-round' }, '#indicatorBtnFour');
+    indicatorFour.element.addEventListener('click', function () { onIndicatorClick(3) });
+    const indicatorFive = new Button({ cssClass: 'e-flat e-round' }, '#indicatorBtnFive');
+    indicatorFive.element.addEventListener('click', function () { onIndicatorClick(4) });
+
+    function onIndicatorClick(index: number) {
+        carouselObj.selectedIndex = index;
+        carouselObj.dataBind();
+    }
+};

src/carousel/sample.json

@@ -0,0 +1,93 @@
+{
+    "name": "Carousel",
+    "directory": "carousel",
+    "category": "Navigation",
+    "ftName": "carousel",
+    "type": "preview",
+    "samples": [
+        {
+            "url": "default",
+            "name": "Default Functionalities",
+            "category": "Carousel",
+            "api": {
+                "Carousel": [
+                    "items"
+                ],
+                "CarouselItem": [
+                    "template"
+                ]
+            },
+            "description": "This example demonstrates the simple slide show of images using Syncfusion JavaScript Carousel component."
+        },
+        {
+            "url": "data-binding",
+            "name": "Data Binding",
+            "category": "Carousel",
+            "api": {
+                "Carousel": [
+                    "dataSource",
+                    "itemTemplate",
+                    "buttonsVisibility"
+                ]
+            },
+            "description": "This example demonstrates how to bind data and customize them by using dataSource and templates to the Syncfusion JavaScript Carousel component."
+        },
+        {
+            "url": "templates",
+            "name": "Templates",
+            "category": "Carousel",
+            "api": {
+                "Carousel": [
+                    "previousButtonTemplate",
+                    "nextButtonTemplate",
+                    "indicatorsTemplate",
+                    "items",
+                    "buttonsVisibility"
+                ],
+                "CarouselItem": [
+                    "template"
+                ],
+                "animation": [
+                    "effect"
+                ]
+            },
+            "description": "This example demonstrates the template options available in JavaScript Carousel component."
+        },
+        {
+            "url": "keyboard-navigation",
+            "name": "Keyboard Navigation",
+            "category": "Carousel",
+            "api": {
+                "Carousel": [
+                    "autoPlay",
+                    "items",
+                    "showPlayButton"
+                ],
+                "CarouselItem": [
+                    "template"
+                ]
+            },
+            "description": "This example explains the key combinations used to perform various actions in Syncfusion JavaScript Carousel component."
+        },
+        {
+            "url": "api",
+            "name": "API",
+            "category": "Carousel",
+            "api": {
+                "Carousel": [
+                    "showIndicators",
+                    "interval",
+                    "items",
+                    "autoPlay",
+                    "showPlayButton",
+                    "buttonsVisibility",
+                    "loop"
+                ],
+                "CarouselItem": [
+                    "template"
+                ]
+            },
+            "description": "This example showcase the available APIs and its functionalities in Syncfusion JavaScript Carousel component."
+        }
+    ]
+}

src/carousel/templates.html

@@ -0,0 +1,115 @@
+<style>
+  .template-carousel-section .carousel-sample {
+    margin: 0 auto 2em;
+    max-width: 500px;
+    height: 350px;
+  }
+
+  .templateCarousel .e-carousel-items,
+  .templateCarousel .e-carousel-navigators {
+    height: calc(100% - 3rem);
+  }
+
+  .templateCarousel .e-carousel-navigators .e-previous,
+  .templateCarousel .e-carousel-navigators .e-next,
+  .templateCarousel .e-carousel-navigators .nav-btn {
+    padding: 0;
+  }
+
+  .templateCarousel .e-carousel-navigators .nav-btn:active,
+  .templateCarousel .e-carousel-navigators .nav-btn:focus,
+  .templateCarousel .e-carousel-navigators .nav-btn:hover {
+    background-color: transparent !important;
+    color: inherit;
+  }
+
+  .templateCarousel .e-carousel-navigators svg {
+    fill: none;
+    stroke: currentColor;
+    stroke-linecap: square;
+    stroke-width: 8px;
+    height: 2rem;
+    vertical-align: middle;
+    width: 2rem;
+  }
+
+  .templateCarousel .e-carousel-navigators .e-previous svg {
+    transform: rotate(180deg);
+  }
+
+  .templateCarousel .e-carousel-indicators .e-indicator-bars .e-indicator-bar .indicator {
+    background-color: #ECECEC;
+    border-radius: 0.25rem;
+    cursor: pointer;
+    height: 3.5rem;
+    margin: 0.5rem;
+    width: 5rem;
+  }
+
+  .templateCarousel .e-carousel-indicators .e-indicator-bars .e-indicator-bar.e-active .indicator {
+    background-color: #3C78EF;
+  }
+
+  @media screen and (max-width: 480px) {
+    .template-carousel-section .carousel-sample {
+      width: 100%;
+      height: 300px;
+    }
+  }
+</style>
+<script type="text/x-template" id="indicatorTemplate">
+  <div class="indicator">
+    <img src="${getThumpImage(data.index)}" alt="image" style="height:100%;width:100%;" />
+  </div>
+</script>
+<script type="text/x-template" id="itemTemplate1">
+  <figure class="img-container">
+    <img src="src/carousel/images/cardinal.png" alt="cardinal" style="height:100%;width:100%;" />
+  </figure>
+</script>
+<script type="text/x-template" id="itemTemplate2">
+  <figure class="img-container">
+    <img src="src/carousel/images/hunei.png" alt="hunei" style="height:100%;width:100%;" />
+  </figure>
+</script>
+<script type="text/x-template" id="itemTemplate3">
+  <figure class="img-container">
+    <img src="src/carousel/images/costa-rica.png" alt="costa-rica" style="height:100%;width:100%;" />
+  </figure>
+</script>
+<script type="text/x-template" id="itemTemplate4">
+  <figure class="img-container">
+    <img src="src/carousel/images/kaohsiung.png" alt="kaohsiung" style="height:100%;width:100%;" />
+  </figure>
+</script>
+<script type="text/x-template" id="itemTemplate5">
+  <figure class="img-container">
+    <img src="src/carousel/images/bee-eater.png" alt="bee-eater" style="height:100%;width:100%;" />
+  </figure>
+</script>
+<div class="control-section template-carousel-section">
+  <div class="col-lg-12 content-wrapper">
+    <div class="carousel-sample">
+      <div id="carousel"></div>
+    </div>
+  </div>
+</div>
+
+<div id="action-description">
+  <p>
+    This sample demonstrates the customization of the <strong>JavaScript Carousel</strong> component using various
+    templates.
+  </p>
+</div>
+<div id="description">
+  <p>
+    In this demo, the <code>JavaScript Carousel</code> component is customized by using the templates. The navigators
+    are customized using <code>previousButtonTemplate</code> and <code>nextButtonTemplate</code>. The indicators are
+    customized using <code>indicatorsTemplate</code>. The carousel item is customized using <code>template</code>
+    option.
+  </p>
+  <p>
+    More information about customizing JavaScript Carousel component can be found in this <a target='_blank'
+      href="https://ej2.syncfusion.com/documentation/carousel/getting-started">documentation section</a>.
+  </p>
+</div>

src/carousel/templates.ts

@@ -0,0 +1,39 @@
+import { loadCultureFiles } from '../common/culture-loader';
+import { Carousel } from '@syncfusion/ej2-navigations';
+import { Button } from '@syncfusion/ej2-buttons';
+
+(window as any).default = (): void => {
+    loadCultureFiles();
+
+    (window as TemplateFunction).getThumpImage = (index: number) => {
+        const birds: string[] = ['cardinal', 'hunei', 'costa-rica', 'kaohsiung', 'bee-eater'];
+        return `src/carousel/images/${birds[index]}.png`;
+    };
+    interface TemplateFunction extends Window {
+        getThumpImage?: Function;
+    }
+
+    const carouselObj: Carousel = new Carousel({
+        animation: {
+            effect: 'Fade'
+        },
+        cssClass: 'templateCarousel',
+        items: [
+            { template: '#itemTemplate1' },
+            { template: '#itemTemplate2' },
+            { template: '#itemTemplate3' },
+            { template: '#itemTemplate4' },
+            { template: '#itemTemplate5' },
+        ],
+        previousButtonTemplate: '<button id="previous"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" width="40" height="40"><path d="m13.5 7.01 13 13m-13 13 13-13"></path></svg></button>',
+        nextButtonTemplate: '<button id="next"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" width="40" height="40"><path d="m13.5 7.01 13 13m-13 13 13-13"></path></svg></button>',
+        indicatorsTemplate: '#indicatorTemplate'
+    });
+    carouselObj.appendTo('#carousel');
+
+    const prevBtn: Button = new Button({ cssClass: 'e-flat e-round nav-btn' });
+    prevBtn.appendTo('#previous');
+
+    const nextBtn: Button = new Button({ cssClass: 'e-flat e-round nav-btn' });
+    nextBtn.appendTo('#next');
+};

src/chart/RTL.ts

@@ -30,15 +30,15 @@ import { Browser, EmitType } from '@syncfusion/ej2-base';
         series: [
             {
                 type: 'Column', xName: 'x', width: 2, yName: 'y', name: 'Sales',
-                dataSource: [{ x: 2016, y: 1000 }, { x: 2017, y: 970}, { x: 2018, y: 1060 }, { x: 2019, y: 1030 }]
+                dataSource: [{ x: 2016, y: 1000 }, { x: 2017, y: 1170}, { x: 2018, y: 660 }, { x: 2019, y: 1030 }]
             },
             {
                 type: 'Column', xName: 'x', width: 2, yName: 'y', name: 'Expense',
-                dataSource: [{ x: 2016, y: 400 }, { x: 2017, y: 360 }, { x: 2018, y: 920 }, { x: 2019, y: 540 }]
+                dataSource: [{ x: 2016, y: 400 }, { x: 2017, y: 460 }, { x: 2018, y: 1120 }, { x: 2019, y: 540 }]
             },
             {
                 type: 'Column', xName: 'x', width: 2, yName: 'y', name: 'Profit',
-                dataSource: [{ x: 2016, y: 600 }, { x: 2017, y: 610 }, { x: 2018, y: 140 }, { x: 2019, y: 490 }]
+                dataSource: [{ x: 2016, y: 200 }, { x: 2017, y: 250 }, { x: 2018, y: 300 }, { x: 2019, y: 350 }]
             }
         ],
         //Initializing Chart title

src/chart/box-and-whisker.ts

@@ -18,6 +18,10 @@ import { EmitType } from '@syncfusion/ej2-base';
         '#c1c1c1', '#6f6fe2', '#e269ae', '#9e480e', '#997300', '#4472c4', '#70ad47', '#ffc000', '#ed7d31'];
     let bootstrapColors: string[] = ['#a16ee5', '#f7ce69', '#55a5c2', '#7ddf1e', '#ff6ea6',
         '#7953ac', '#b99b4f', '#407c92', '#5ea716', '#b91c52'];
+    let fluentColors: string[] = ['#614570', '#4C6FB1', '#CC6952', '#3F579A', '#4EA09B', '#6E7A89', '#D4515C', '#E6AF5D', '#639751',
+        '#9D4D69'];
+    let fluentDarkColors: string[] = ['#8AB113', '#2A72D5', '#43B786', '#584EC6', '#E85F9C', '#6E7A89', '#EA6266', '#EBA844', '#26BC7A', 
+        '#BC4870'];        
     let labelRender: EmitType<IPointRenderEventArgs> = (args: IPointRenderEventArgs): void => {
         let selectedTheme: string = location.hash.split('/')[1];
         selectedTheme = selectedTheme ? selectedTheme : 'Material';
@@ -25,6 +29,10 @@ import { EmitType } from '@syncfusion/ej2-base';
             args.fill = fabricColors[args.point.index % 10];
         } else if (selectedTheme === 'material') {
             args.fill = materialColors[args.point.index % 10];
+        } else if (selectedTheme === 'fluent') {
+            args.fill = fluentColors[args.point.index % 10];
+        } else if (selectedTheme === 'fluent-dark') {
+            args.fill = fluentDarkColors[args.point.index % 10];
         } else {
             args.fill = bootstrapColors[args.point.index % 10];
         }

src/chart/bubble.ts

@@ -3,7 +3,7 @@ import { Chart, BubbleSeries, Tooltip, IPointRenderEventArgs } from '@syncfusion
 import { ILoadedEventArgs, ChartTheme } from '@syncfusion/ej2-charts';
 import { EmitType } from '@syncfusion/ej2-base';
 import { Browser } from '@syncfusion/ej2-base';
-import { fabricColors, materialColors, bootstrapColors, highContrastColors } from './theme-color';
+import { fabricColors, materialColors, bootstrapColors, highContrastColors, fluentColors, fluentDarkColors } from './theme-color';
 Chart.Inject(BubbleSeries, Tooltip);
 
 let pointRender: EmitType<IPointRenderEventArgs> = (args: IPointRenderEventArgs): void => {
@@ -15,6 +15,10 @@ let pointRender: EmitType<IPointRenderEventArgs> = (args: IPointRenderEventArgs)
         args.fill = materialColors[args.point.index % 10];
     } else if (selectedTheme === 'highcontrast') {
         args.fill = highContrastColors[args.point.index % 10];
+    } else if (selectedTheme === 'fluent') {
+        args.fill = fluentColors[args.point.index % 10];
+    } else if (selectedTheme === 'fluent-dark') {
+        args.fill = fluentDarkColors[args.point.index % 10];
     } else {
         args.fill = bootstrapColors[args.point.index % 10];
     }

src/chart/candle-stick.ts

@@ -1,7 +1,7 @@
 import { loadCultureFiles } from '../common/culture-loader';
 import {
     ChartTheme, Chart, CandleSeries, Category, Tooltip, ILoadedEventArgs, DateTime, Zoom, Logarithmic, ColumnSeries,
-    Crosshair, StripLine, IAxisLabelRenderEventArgs, ITooltipRenderEventArgs
+    Crosshair, StripLine, IAxisLabelRenderEventArgs, ISharedTooltipRenderEventArgs
 } from '@syncfusion/ej2-charts';
 import { IPointRenderEventArgs } from '@syncfusion/ej2-charts';
 import { Browser, Ajax } from '@syncfusion/ej2-base';
@@ -44,9 +44,9 @@ this.renderChart = (chartData: Object[]): void => {
                         xName: 'x', low: 'low', high: 'high', open: 'open', close: 'close', name: 'Apple Inc',
                     }
                 ], tooltip: { enable: true, shared: true },
-                tooltipRender: (args: ITooltipRenderEventArgs) => {
+                sharedTooltipRender: (args: ISharedTooltipRenderEventArgs) => {
-                    if (!args.series.index) {
+                    if (!args.series[0].index) {
-                        args.text = 'Volume : <b>' + getLabelText(args.text.split('<b>')[1].split('</b>')[0]) + '</b>';
+                        args.text[0] = 'Volume : <b>' + getLabelText(args.text[0].split('<b>')[1].split('</b>')[0]) + '</b>';
                     }
                 },
                 pointRender: (args: IPointRenderEventArgs) => {

src/chart/category.ts

@@ -5,7 +5,7 @@ import {
 } from '@syncfusion/ej2-charts';
 import { EmitType } from '@syncfusion/ej2-base';
 import { Browser } from '@syncfusion/ej2-base';
-import { fabricColors, materialColors, bootstrapColors, highContrastColors } from './theme-color';
+import { fabricColors, materialColors, bootstrapColors, highContrastColors, fluentColors, fluentDarkColors } from './theme-color';
 Chart.Inject(BarSeries, Category, Tooltip, DataLabel);
 
 /**
@@ -20,6 +20,10 @@ let labelRender: EmitType<IPointRenderEventArgs> = (args: IPointRenderEventArgs)
         args.fill = materialColors[args.point.index % 10];
     } else if (selectedTheme === 'highcontrast') {
         args.fill = highContrastColors[args.point.index % 10];
+    } else if (selectedTheme === 'fluent') {
+        args.fill = fluentColors[args.point.index % 10];
+    } else if (selectedTheme === 'fluent-dark') {
+        args.fill = fluentDarkColors[args.point.index % 10];
     } else {
         args.fill = bootstrapColors[args.point.index % 10];
     }

src/chart/data-label-template.html

@@ -234,4 +234,36 @@
             <span>${point.y}M </span>
         </div>
     </div>
+</script>
+<script id='Male-Fluent' type="text/x-template">
+    <div id='templateWrap' style="background-color:#614570;border-radius: 3px;">
+        <img src='src/chart/images/male.png' />
+        <div class='des' style="color:white; font-family:Roboto; font-style: medium; fontp-size:14px;padding-right:6px">
+            <span>${point.y}M </span>
+        </div>
+    </div>
+</script>
+<script id='Female-Fluent' type="text/x-template">
+    <div id='templateWrap' style="background-color:#4C6FB1;border-radius: 3px;">
+        <img src='src/chart/images/female.png' />
+        <div class='des' style="color:white; font-family:Roboto; font-style: medium; fontp-size:14px;padding-right:6px">
+            <span>${point.y}M </span>
+        </div>
+    </div>
+</script>
+<script id='Male-FluentDark' type="text/x-template">
+    <div id='templateWrap' style="background-color:#8AB113;border-radius: 3px;">
+        <img src='src/chart/images/male.png' />
+        <div class='des' style="color:white; font-family:Roboto; font-style: medium; fontp-size:14px;padding-right:6px">
+            <span>${point.y}M </span>
+        </div>
+    </div>
+</script>
+<script id='Female-FluentDark' type="text/x-template">
+    <div id='templateWrap' style="background-color:#2A72D5;border-radius: 3px;">
+        <img src='src/chart/images/female.png' />
+        <div class='des' style="color:white; font-family:Roboto; font-style: medium; fontp-size:14px;padding-right:6px">
+            <span>${point.y}M </span>
+        </div>
+    </div>
 </script>

src/chart/drill-down-pie.ts

@@ -102,11 +102,6 @@ AccumulationChart.Inject(AccumulationLegend, PieSeries, AccumulationTooltip, Acc
         textRender: (args: IAccTextRenderEventArgs) => { args.text = args.point.x + ' ' + args.point.y + ' %'; },
         tooltip: { enable: false, format: '${point.x} <br> ${point.y} %' },
         title: 'Automobile Sales by Category',
-        chartMouseMove: (args: IMouseEventArgs) => {
-            if (args.target.indexOf("container_Series_0_") > -1) {
-                document.getElementById(args.target).style.cursor = "pointer";
-            }
-        },
         load: (args: IAccLoadedEventArgs) => {
             let selectedTheme: string = location.hash.split('/')[1];
             selectedTheme = selectedTheme ? selectedTheme : 'Material';

src/chart/error-bar.ts

@@ -7,7 +7,7 @@ import {
     IPointRenderEventArgs
 } from '@syncfusion/ej2-charts';
 import { EmitType } from '@syncfusion/ej2-base';
-import { fabricColors, materialColors, bootstrapColors, highContrastColors } from './theme-color';
+import { fabricColors, materialColors, bootstrapColors, highContrastColors, fluentColors, fluentDarkColors } from './theme-color';
 Chart.Inject(ScatterSeries, Category, ErrorBar, Tooltip);
 /**
  * Sample for error bar
@@ -21,6 +21,10 @@ let pointRender: EmitType<IPointRenderEventArgs> = (args: IPointRenderEventArgs)
         args.fill = materialColors[args.point.index % 10];
     } else if (selectedTheme === 'highcontrast') {
         args.fill = highContrastColors[args.point.index % 10];
+    } else if (selectedTheme === 'fluent') {
+        args.fill = fluentColors[args.point.index % 10];
+    } else if (selectedTheme === 'fluent-dark') {
+        args.fill = fluentDarkColors[args.point.index % 10];
     } else {
         args.fill = bootstrapColors[args.point.index % 10];
     }

src/chart/export.ts

@@ -6,7 +6,7 @@ import {
 } from '@syncfusion/ej2-charts';
 Chart.Inject(ColumnSeries, Category, Legend, Export);
 import { Button } from '@syncfusion/ej2-buttons';
-import { fabricColors, materialColors, bootstrapColors, highContrastColors } from './theme-color';
+import { fabricColors, materialColors, bootstrapColors, highContrastColors, fluentColors, fluentDarkColors } from './theme-color';
 import { EmitType } from '@syncfusion/ej2-base';
 import { DropDownList } from '@syncfusion/ej2-dropdowns';
 
@@ -22,6 +22,10 @@ let labelRender: EmitType<IPointRenderEventArgs> = (args: IPointRenderEventArgs)
         args.fill = materialColors[args.point.index % 10];
     } else if (selectedTheme === 'highcontrast') {
         args.fill = highContrastColors[args.point.index % 10];
+    } else if (selectedTheme === 'fluent') {
+        args.fill = fluentColors[args.point.index % 10];
+    } else if (selectedTheme === 'fluent-dark') {
+        args.fill = fluentDarkColors[args.point.index % 10];
     } else {
         args.fill = bootstrapColors[args.point.index % 10];
     }

src/chart/inversed.ts

@@ -4,7 +4,7 @@ import {
     Tooltip, DataLabel, ILoadedEventArgs, ChartTheme
 } from '@syncfusion/ej2-charts';
 Chart.Inject(ColumnSeries, Category, Legend, Tooltip, DataLabel);
-import { fabricColors, materialColors, bootstrapColors, highContrastColors } from './theme-color';
+import { fabricColors, materialColors, bootstrapColors, highContrastColors, fluentColors, fluentDarkColors } from './theme-color';
 import { Browser, EmitType } from '@syncfusion/ej2-base';
 /**
  * Sample for invesed axis
@@ -18,6 +18,10 @@ let labelRender: EmitType<IPointRenderEventArgs> = (args: IPointRenderEventArgs)
         args.fill = materialColors[args.point.index % 10];
     } else if (selectedTheme === 'highcontrast') {
         args.fill = highContrastColors[args.point.index % 10];
+    } else if (selectedTheme === 'fluent') {
+        args.fill = fluentColors[args.point.index % 10];
+    } else if (selectedTheme === 'fluent-dark') {
+        args.fill = fluentDarkColors[args.point.index % 10];
     } else {
         args.fill = bootstrapColors[args.point.index % 10];
     }

src/chart/pie-legend.html

@@ -7,8 +7,7 @@
     </p>
 </div>
 <div id="description">
-    <p> In this example, you can see how to render doughnut chart. You can use <code>radius</code> and <code>innerRadius</code> properties to render the doughnut and also use <code>border</code>, <code>fill</code> properties to customize the point. <code>dataLabel</code> is used to represent individual data and its value.</p>
+    <p> In this example, you can see how to render doughnut chart. You can use <code>radius</code> and <code>innerRadius</code> properties to render the doughnut and also use <code>border</code>, <code>fill</code> properties to customize the point. <code>dataLabel</code> is used to represent individual data and its value. Here the legend text is wrapped using <code>textWrap</code> property.</p>
-    <p> <code>Tooltip</code> is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.</p>
         <p style="font-weight: 500">Injecting Module</p>
     <p>
         AccumulationChart component features are segregated into individual feature-wise modules. To use legend, we need to Inject

src/chart/pie-legend.ts

@@ -25,13 +25,13 @@ centerTitle.style.visibility = 'hidden';
         series: [
             {
                 dataSource: [
-                    { 'x': 'Net-tution and Fees', y: 21, text: '21%' },
+                    { 'x': 'Net-tution', y: 21, text: '21%' },
-                    { 'x': 'Self-supporting Operations', y: 21, text: '21%' },
                     { 'x': 'Private Gifts', y: 8, text: '8%' },
-                    { 'x': 'All Other', y: 8, text: '8%' },
+                    { 'x': 'All Other', y: 9, text: '9%' },
                     { 'x': 'Local Revenue', y: 4, text: '4%' },
                     { 'x': 'State Revenue', y: 21, text: '21%' },
-                    { 'x': 'Federal Revenue', y: 16, text: '16%' }
+                    { 'x': 'Federal Revenue', y: 16, text: '16%' },
+                    { 'x': 'Self-supporting Operations', y: 21, text: '21%' }
                 ],
                 xName: 'x', yName: 'y', startAngle: 0,
                 endAngle: 360, innerRadius: '40%',
@@ -43,7 +43,9 @@ centerTitle.style.visibility = 'hidden';
         ],
         legendSettings: {
             visible: true, toggleVisibility: false,
-            position: 'Right', height: '28%', width: '44%'
+            position: 'Right', height: '28%', width: '36%',
+            textWrap:'Wrap',
+            maximumLabelWidth:100,
         },
         // Triggered animation complete, text render and load event
         animationComplete: (args: IAccAnimationCompleteEventArgs) => {

src/chart/pie-radius.ts

@@ -39,9 +39,8 @@ AccumulationChart.Inject(AccumulationLegend, PieSeries, AccumulationTooltip, Acc
             visible: true,
             reverse: true
         },
-        useGroupingSeparator: true,
         // Initialize tht tooltip
-        tooltip: { enable: true },
+        tooltip: { enable: true, format: '${point.x} : <b>${point.y}</b>' },
         enableAnimation: true,
         load: (args: IAccLoadedEventArgs) => {
             let selectedTheme: string = location.hash.split('/')[1];

src/chart/print.html

@@ -68,4 +68,10 @@
     .e-view.bootstrap5 .e-print-icon::before, .e-view.bootstrap5-dark .e-print-icon::before {
         content: '\e75d';
     }
+
+    .e-view.fluent .e-print-icon::before, .e-view.fluent-dark .e-print-icon::before {
+        content: '\e75d';
+    }
+
+   
 </style>

src/chart/print.ts

@@ -5,7 +5,7 @@ import {
 } from '@syncfusion/ej2-charts';
 Chart.Inject(ColumnSeries, Category, Legend);
 import { Button } from '@syncfusion/ej2-buttons';
-import { fabricColors, materialColors, bootstrapColors, highContrastColors } from './theme-color';
+import { fabricColors, materialColors, bootstrapColors, highContrastColors, fluentColors, fluentDarkColors } from './theme-color';
 import { EmitType } from '@syncfusion/ej2-base';
 
 /**
@@ -20,6 +20,10 @@ let labelRender: EmitType<IPointRenderEventArgs> = (args: IPointRenderEventArgs)
         args.fill = materialColors[args.point.index % 10];
     } else if (selectedTheme === 'highcontrast') {
         args.fill = highContrastColors[args.point.index % 10];
+    } else if (selectedTheme === 'fluent') {
+        args.fill = fluentColors[args.point.index % 10];
+    } else if (selectedTheme === 'fluent-dark') {
+        args.fill = fluentDarkColors[args.point.index % 10];
     } else {
         args.fill = bootstrapColors[args.point.index % 10];
     }

src/chart/remote-data.ts

@@ -14,7 +14,7 @@ Chart.Inject(ColumnSeries, Category, Legend, Tooltip, DataLabel);
 let dataManager: DataManager = new DataManager({
     url: 'https://ej2services.syncfusion.com/production/web-services/api/Orders'
 });
-import { fabricColors, materialColors, bootstrapColors, highContrastColors } from './theme-color';
+import { fabricColors, materialColors, bootstrapColors, highContrastColors, fluentColors, fluentDarkColors } from './theme-color';
 let query: Query = new Query().take(5).where('Estimate', 'lessThan', 3, false);
 let labelRender: EmitType<IAxisLabelRenderEventArgs> = (args: IAxisLabelRenderEventArgs): void => {
     if (args.axis.orientation === 'Horizontal') {
@@ -39,6 +39,10 @@ let pointRender: EmitType<IPointRenderEventArgs> = (args: IPointRenderEventArgs)
         args.fill = materialColors[args.point.index % 10];
     } else if (selectedTheme === 'highcontrast') {
         args.fill = highContrastColors[args.point.index % 10];
+    } else if (selectedTheme === 'fluent') {
+        args.fill = fluentColors[args.point.index % 10];
+    } else if (selectedTheme === 'fluent-dark') {
+        args.fill = fluentDarkColors[args.point.index % 10];
     } else {
         args.fill = bootstrapColors[args.point.index % 10];
     }

src/chart/sample.json

@@ -283,7 +283,6 @@
         {
             "url": "grouped-column",
             "name": "Grouped Column",
-            "type": "new",
             "description": "This demo sample for Essential JavaScript2 Chart control demonstrates how to render and configure the grouping in column series.",
             "category": "Bar Charts",
             "api": {
@@ -802,7 +801,6 @@
         {
             "url": "pie-radius",
             "name": "Pie with Various Radius",
-            "type": "update",
             "description": "This demo sample for Essential JavaScript2 Chart control demonstrates how to render and configure the various radius pie chart.",
             "category": "Accumulation Charts",
             "api": {
@@ -853,8 +851,9 @@
             }
         },
         {
-            "url": "default-doughnut",
+            "url": "pie-legend",
             "name": "Pie with Legend",
+            "type": "update",
             "description": "This demo sample for Essential JavaScript2 Chart control demonstrates how to render and configure the legends in pie charts.",
             "category": "Accumulation Charts",
             "api": {
@@ -1282,7 +1281,6 @@
         {
             "url": "RTL",
             "name": "RTL",
-            "type": "new",
             "description": "This demo sample for Essential JavaScript2 Chart control demonstrates how to render and configure the RTL feature in chart.",
             "category": "Chart Customization",
             "api": {
@@ -1421,7 +1419,6 @@
         {
             "url": "selection",
             "name": "Selection",
-            "type": "update",
             "description": "This demo sample for Essential JavaScript2 Chart control demonstrates the selection behavior in chart.",
             "category": "User Interaction",
             "api": {

src/chart/scatter-plot.ts

@@ -17,7 +17,7 @@ Chart.Inject(ScatterSeries, Legend, Tooltip);
             minimum: 100,
             maximum: 220,
             edgeLabelPlacement: 'Shift',
-            title: 'Height in Inches'
+            title: 'Height (cm)'
         },
         chartArea: {
             border: {
@@ -35,7 +35,7 @@ Chart.Inject(ScatterSeries, Legend, Tooltip);
             lineStyle: {
                 width: 0
             },
-            title: 'Weight in Pounds',
+            title: 'Weight (kg)',
             rangePadding: 'None'
         },
 
@@ -70,7 +70,7 @@ Chart.Inject(ScatterSeries, Legend, Tooltip);
         //Initializing User Interaction Tooltip
         tooltip: {
             enable: true,
-            format: 'Weight: <b>${point.x} lbs</b> <br/> Height: <b>${point.y}"</b>'
+            format: 'Weight: <b>${point.x} kg</b> <br/> Height: <b>${point.y}cm</b>'
         },
         width: Browser.isDevice ? '100%' : '80%',
         // custom code start

src/chart/selection.html

@@ -6,14 +6,6 @@
     </div>
     <div class="col-md-4 property-section">
         <table id="property" title="Properties" style="width: 100%">
-            <tr id='' style="height: 50px">
-                <td style="width: 80%">
-                    <div> Enable Multi Selection:</div>
-                </td>
-                <td>
-                    <input type="checkbox" id="select" style="margin-top: 15px">
-                </td>
-            </tr>
             <tr style="height: 50px">
                 <td style="width: 60%">
                     <div>Selection Mode:</div>
@@ -26,6 +18,14 @@
                     </select>
                 </td>
             </tr>
+            <tr id='' style="height: 50px">
+                <td style="width: 80%">
+                    <div> Enable Multi Selection:</div>
+                </td>
+                <td>
+                    <input type="checkbox" id="select" style="margin-top: 15px">
+                </td>
+            </tr>
             <tr style="height: 50px">
                 <td style="width: 60%">
                     <div>Selection Patterns:</div>
@@ -41,14 +41,6 @@
                     </select>
                 </td>
             </tr>
-            <tr style="height: 50px">
-                <td style="width: 50%">
-                    <div> Enable Highlight:</div>
-                </td>
-                <td>
-                    <input type="checkbox" id="highlight" style="margin-top: 15px">
-                </td>
-            </tr>
             <tr style="height: 50px">
                 <td style="width: 60%">
                     <div>Highlight Color:</div>
@@ -57,6 +49,14 @@
                     <input id="color-picker" type="color">
                 </td>
             </tr>
+            <tr style="height: 50px">
+                <td style="width: 50%">
+                    <div> Enable Highlight:</div>
+                </td>
+                <td>
+                    <input type="checkbox" id="highlight" style="margin-top: 15px">
+                </td>
+            </tr>
             <tr style="height: 50px">
                 <td style="width: 60%">
                     <div>Highlight Patterns:</div>

src/chart/smart-axis-labels.ts

@@ -5,7 +5,7 @@ import {
 } from '@syncfusion/ej2-charts';
 import { DropDownList } from '@syncfusion/ej2-dropdowns';
 import { EmitType, Browser } from '@syncfusion/ej2-base';
-import { fabricColors, materialColors, bootstrapColors, highContrastColors } from './theme-color';
+import { fabricColors, materialColors, bootstrapColors, highContrastColors, fluentColors, fluentDarkColors } from './theme-color';
 import { NumericTextBox } from '@syncfusion/ej2-inputs';
 Chart.Inject(ColumnSeries, Category, DataLabel, Tooltip);
 
@@ -18,6 +18,10 @@ let labelRender: EmitType<IPointRenderEventArgs> = (args: IPointRenderEventArgs)
         args.fill = materialColors[args.point.index % 10];
     } else if (selectedTheme === 'highcontrast') {
         args.fill = highContrastColors[args.point.index % 10];
+    } else if (selectedTheme === 'fluent') {
+        args.fill = fluentColors[args.point.index % 10];
+    } else if (selectedTheme === 'fluent-dark') {
+        args.fill = fluentDarkColors[args.point.index % 10];
     } else {
         args.fill = bootstrapColors[args.point.index % 10];
     }

src/chart/theme-color.ts

@@ -8,4 +8,8 @@ export let fabricColors: string[] = ['#4472c4', '#ed7d31', '#ffc000', '#70ad47',
 export let bootstrapColors: string[] = ['#a16ee5', '#f7ce69', '#55a5c2', '#7ddf1e', '#ff6ea6',
     '#7953ac', '#b99b4f', '#407c92', '#5ea716', '#b91c52'];
 export let highContrastColors: string[] = ['#79ECE4', '#E98272', '#DFE6B6', '#C6E773', '#BA98FF',
-    '#FA83C3', '#00C27A', '#43ACEF', '#D681EF', '#D8BC6E'];
+    '#FA83C3', '#00C27A', '#43ACEF', '#D681EF', '#D8BC6E'];
+export let fluentColors: string[] = ['#614570', '#4C6FB1', '#CC6952', '#3F579A', '#4EA09B', '#6E7A89', '#D4515C', '#E6AF5D', '#639751',
+    '#9D4D69'];
+export let fluentDarkColors: string[] = ['#8AB113', '#2A72D5', '#43B786', '#584EC6', '#E85F9C', '#6E7A89', '#EA6266', '#EBA844', '#26BC7A', 
+    '#BC4870'];     

src/chart/zooming.html

@@ -19,6 +19,13 @@
         stop-color: #a16ee5;
     }
 
+    #fluent-gradient-chart stop {
+        stop-color: #614570;
+    }
+    #fluent-dark-gradient-chart stop {
+        stop-color: #8AB113;
+    }
+
     #highcontrast-gradient-chart stop {
         stop-color: #79ECE4;
     }
@@ -148,5 +155,13 @@
             <stop offset="0"></stop>
             <stop offset="1"></stop>
         </linearGradient>
+        <linearGradient id="fluent-gradient-chart" style="opacity: 0.75" class="chart-gradient" x1="0" x2="0" y1="0" y2="1">
+			<stop offset="0"></stop>
+			<stop offset="1"></stop>
+		</linearGradient>
+        <linearGradient id="fluent-dark-gradient-chart" style="opacity: 0.75" class="chart-gradient" x1="0" x2="0" y1="0" y2="1">
+			<stop offset="0"></stop>
+			<stop offset="1"></stop>
+		</linearGradient>
     </defs>
 </svg>

src/chart/zooming.ts

@@ -11,8 +11,8 @@ Chart.Inject(AreaSeries, DateTime, Legend, Zoom, ScrollBar);
  selectedTheme = selectedTheme ? selectedTheme : 'Material';
  let theme: ChartTheme = <ChartTheme>(selectedTheme.charAt(0).toUpperCase() +
  selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast');
- let themes : string[] = ['bootstrap5', 'bootstrap5dark', 'tailwind', 'tailwinddark', 'material', 'materialdark', 'bootstrap4', 'bootstrap', 'bootstrapdark', 'fabric', 'fabricdark', 'highcontrast'];
+ let themes : string[] = ['bootstrap5', 'bootstrap5dark', 'tailwind', 'tailwinddark', 'material', 'materialdark', 'bootstrap4', 'bootstrap', 'bootstrapdark', 'fabric', 'fabricdark', 'highcontrast', 'Fluent', 'FluentDark'];
- let borderColor : string[] = ['#262E0B', '#5ECB9B', '#5A61F6', '#8B5CF6', '#00bdae', '#9ECB08', '#a16ee5', '#a16ee5', '#a16ee5', '#4472c4', '#4472c4', '#79ECE4'];
+ let borderColor : string[] = ['#262E0B', '#5ECB9B', '#5A61F6', '#8B5CF6', '#00bdae', '#9ECB08', '#a16ee5', '#a16ee5', '#a16ee5', '#4472c4', '#4472c4', '#79ECE4', '#614570', '#8AB113'];
  let fill : string = 'url(#' + selectedTheme + '-gradient-chart)';
 (window as any).default = (): void => {
     loadCultureFiles();

src/circular-gauge/export.html

@@ -95,6 +95,14 @@
         content: '\e710';
     }
 
+    .e-view.fluent .e-play-icon::before, .e-view.fluent-dark .e-play-icon::before {
+        content: '\e75d';
+    }
+
+    .e-view.fluent .e-play-icon1::before, .e-view.fluent-dark .e-play-icon1::before {
+        content: '\e72e';
+    }
+
     .e-view.bootstrap .e-play-icon::before {
         content: '\ebd2';
     }

src/circular-gauge/export.ts

@@ -88,7 +88,7 @@ CircularGauge.Inject(Print, ImageExport, PdfExport);
     });
     mode.appendTo('#type');
     let exportGauge: Button = new Button({
-        iconCss: 'e-icons e-play-icon1', cssClass: 'e-flat', isPrimary: true,
+        isPrimary: true
     });
     exportGauge.appendTo('#export');
     let fileText: TextBox = new TextBox({
@@ -99,7 +99,7 @@ CircularGauge.Inject(Print, ImageExport, PdfExport);
         circulargauge.export(<ExportType>mode.value, fileName);
     };
     let printGauge: Button = new Button({
-        iconCss: 'e-icons e-play-icon', cssClass: 'e-flat', isPrimary: true,
+        isPrimary: true
     });
     printGauge.appendTo('#print');
     document.getElementById('print').onclick = () => {

src/combo-box/grouping-icon.html

@@ -51,7 +51,8 @@
     }
     .material-dark .e-list-icon,
     .bootstrap5-dark .e-list-icon,
-    .tailwind-dark .e-list-icon {
+    .tailwind-dark .e-list-icon,
+    .fluent-dark .e-list-icon {
         color: #fff;
     }
 

src/combo-box/template.html

@@ -57,6 +57,40 @@
         background-color: #000;
     }
 
+    .fluent-dark .header {
+        background: #252423;
+        color: #2899F5;
+    }
+
+    .bootstrap5-dark .header {
+        background: #343A40;
+        color: #7B848D;
+    }
+
+    .fluent .header{
+         color: #2899F5;
+    }
+
+    .tailwind-dark .header {
+        background: #374151;
+        color: rgb(255, 255, 255);
+    }
+
+    .material-dark .header {
+        background: rgb(66, 66, 66);
+        color: rgb(255, 255, 255);
+    }
+
+    .fabric-dark .header {
+        background: rgb(40, 39, 39);
+        color: rgb(255, 255, 255);
+    }
+
+    .bootstrap-dark .header {
+        background: rgb(49, 49, 49);
+        color: rgb(255, 255, 255);
+    }
+
     .bootstrap .header {
         background-color: #f5f5f5;
         border-bottom: 1px solid #ccc;

src/common/sampleOrder.json

@@ -4,7 +4,7 @@
     "Editors": ["Rich Text Editor", "DocumentEditor", "Chips", "Button", "In-place Editor"],
     "Calendars": ["Scheduler", "Gantt", "Calendar", "DatePicker", "DateRangePicker", "DateTimePicker", "TimePicker"],
     "Dropdowns": ["AutoComplete", "ComboBox", "Dropdown List", "Dropdown Tree", "MultiSelect Dropdown", "List Box"],
-    "Navigation": ["Accordion", "Breadcrumb", "Context Menu", "Menu Bar", "Sidebar", "Tabs", "Toolbar", "TreeView", "File Manager"],
+    "Navigation": ["Accordion", "Breadcrumb", "Carousel", "Context Menu", "Menu Bar", "Sidebar", "Tabs", "Toolbar", "TreeView", "File Manager"],
     "Notifications": ["Badge", "Toast", "Progress Bar"],
     "Inputs": ["Form Validation", "TextBox", "Input Mask", "Numeric Textbox", "Color Picker", "File Upload", "Range Slider", "Signature"],
     "Layout": ["Avatar", "Card", "Dialog", "ListView",  "Tooltip", "Splitter", "Dashboard Layout"],

src/dashboard-layout/predefined-layouts.html

@@ -63,39 +63,8 @@
         display: block;
     }
     
-    .bootstrap5 .e-panel .e-header-text,
+    .e-panel .e-header-text {
-    .bootstrap5-dark .e-panel .e-header-text,
+        padding: 12px 0 12px 0;
-    .tailwind .e-panel .e-header-text,
-    .tailwind-dark .e-panel .e-header-text,
-    .material .e-panel .e-header-text,
-    .bootstrap4 .e-panel .e-header-text,
-    .bootstrap .e-panel .e-header-text,
-    .bootstrap-dark .e-panel .e-header-text,
-    .fabric .e-panel .e-header-text,
-    .fabric-dark .e-panel .e-header-text,
-    .highcontrast .e-panel .e-header-text{
-        padding: 10px 0 0;
-    }
-
-    .e-bigger.bootstrap5 .e-panel .e-header-text,
-    .e-bigger.bootstrap5-dark .e-panel .e-header-text,
-    .e-bigger.tailwind .e-panel .e-header-text,
-    .e-bigger.tailwind-dark .e-panel .e-header-text {
-        padding: 2px 0 0;
-    }
-
-    .e-bigger.material .e-panel .e-header-text,
-    .e-bigger.bootstrap4 .e-panel .e-header-text,
-    .e-bigger.bootstrap .e-panel .e-header-text,
-    .e-bigger.bootstrap-dark .e-panel .e-header-text
-    {
-        padding: 8px 0 0;
-    }
-
-    .e-bigger.fabric .e-panel .e-header-text,
-    .e-bigger.fabric-dark .e-panel .e-header-text,
-    .e-bigger.highcontrast .e-panel .e-header-text {
-        padding: 6px 0 0;
     }
     
     .e-dashboardlayout.e-control .e-panel .e-panel-container .e-panel-header {

src/datepicker/date-format.ts

@@ -8,6 +8,7 @@ import { DropDownList } from '@syncfusion/ej2-dropdowns';
 (window as any).default = (): void => {
     loadCultureFiles();
     let datepicker: DatePicker = new DatePicker({
+        placeholder: "Choose a date",
         value: new Date(),
         format: 'dd-MMM-yy',
     });

src/datepicker/date-range.ts

@@ -12,6 +12,7 @@ import { DatePicker } from '@syncfusion/ej2-calendars';
     let currentMonth: number = today.getMonth();
     let currentDay: number = today.getDate();
     let datepicker: DatePicker = new DatePicker({
+        placeholder: "Choose a date",
         min: new Date(currentYear, currentMonth, 7),
         max: new Date(currentYear, currentMonth, 27),
         value: new Date(currentYear, currentMonth, 14)

src/datepicker/default.ts

@@ -6,6 +6,8 @@ import { DatePicker } from '@syncfusion/ej2-calendars';
 
 (window as any).default = (): void => {
     loadCultureFiles();
-    let datepicker: DatePicker = new DatePicker({});
+    let datepicker: DatePicker = new DatePicker({
+        placeholder: "Choose a date",
+    });
     datepicker.appendTo('#datepicker');
 };

src/datepicker/disabled.ts

@@ -7,6 +7,7 @@ import { DatePicker, RenderDayCellEventArgs } from '@syncfusion/ej2-calendars';
 (window as any).default = (): void => {
     loadCultureFiles();
     let datepicker: DatePicker = new DatePicker({
+        placeholder: "Choose a date",
         renderDayCell: disableDate
     });
     datepicker.appendTo('#datepicker');

src/datepicker/input-mask.ts

@@ -7,6 +7,7 @@ import { DatePicker, MaskedDateTime } from '@syncfusion/ej2-calendars';
 (window as any).default = (): void => {
     loadCultureFiles();
     let datepicker: DatePicker = new DatePicker({
+        placeholder: "Choose a date",
         format: "M/d/yyyy",
         enableMask: true
     });

src/datepicker/month-picker.ts

@@ -5,6 +5,6 @@ import { DatePicker } from '@syncfusion/ej2-calendars';
  */
 (window as any).default = (): void => {
     loadCultureFiles();
-    let datepicker: DatePicker = new DatePicker({ start: 'Year', depth: 'Year', format: 'MMMM y' });
+    let datepicker: DatePicker = new DatePicker({ placeholder: "Choose a date", start: 'Year', depth: 'Year', format: 'MMMM y' });
     datepicker.appendTo('#datepicker');
 };

src/datepicker/special-dates.ts

@@ -8,6 +8,7 @@ import { addClass } from '@syncfusion/ej2-base';
 (window as any).default = (): void => {
     loadCultureFiles();
     let datepicker: DatePicker = new DatePicker({
+        placeholder: "Choose a date",
         renderDayCell: customDates, value: new Date('1/13/2017'),
         cssClass: 'e-customStyle'
     });

src/daterangepicker/date-format.ts

@@ -14,6 +14,7 @@ import { FloatLabelType } from '@syncfusion/ej2-inputs';
     ];
 
     let daterangepicker: DateRangePicker = new DateRangePicker({
+        placeholder: "Select a range",
         format: 'dd\'\/\'MMM\'\/\'yy hh:mm a',
         startDate: new Date(new Date().setDate(1)),
         endDate: new Date(new Date().setDate(20))

src/daterangepicker/date-range.ts

@@ -6,6 +6,7 @@ import { DateRangePicker } from '@syncfusion/ej2-calendars';
 (window as any).default = (): void => {
     loadCultureFiles();
     let daterangepicker: DateRangePicker = new DateRangePicker({
+        placeholder: "Select a range",
         min: new Date('1/15/2017'),
         max: new Date('12/20/2017')
     });

src/daterangepicker/day-span.ts

@@ -5,6 +5,6 @@ import { DateRangePicker } from '@syncfusion/ej2-calendars';
  */
 (window as any).default = (): void => {
     loadCultureFiles();
-    let daterangepicker: DateRangePicker = new DateRangePicker({minDays: 5, maxDays: 10});
+    let daterangepicker: DateRangePicker = new DateRangePicker({ placeholder: "Select a range", minDays: 5, maxDays: 10});
     daterangepicker.appendTo('#daterangepicker');
 };

src/daterangepicker/default.ts

@@ -5,6 +5,8 @@ import { DateRangePicker } from '@syncfusion/ej2-calendars';
  */
 (window as any).default = (): void => {
     loadCultureFiles();
-    let daterangepicker: DateRangePicker = new DateRangePicker();
+    let daterangepicker: DateRangePicker = new DateRangePicker({
+        placeholder: "Select a range",
+    });
     daterangepicker.appendTo('#daterangepicker');
 };

src/daterangepicker/month-range-picker.ts

@@ -5,6 +5,6 @@ import { DateRangePicker } from '@syncfusion/ej2-calendars';
  */
 (window as any).default = (): void => {
     loadCultureFiles();
-    let daterangepicker: DateRangePicker = new DateRangePicker({ start: 'Year', depth: 'Year', format: 'MMM yyyy' });
+    let daterangepicker: DateRangePicker = new DateRangePicker({ placeholder: "Select a range", start: 'Year', depth: 'Year', format: 'MMM yyyy' });
     daterangepicker.appendTo('#daterangepicker');
 };

src/daterangepicker/presets.ts

@@ -7,6 +7,7 @@ import { DateRangePicker } from '@syncfusion/ej2-calendars';
     loadCultureFiles();
     let start: Date = new Date(new Date(new Date().setDate(new Date().getDate() - (new Date().getDay() + 7) % 7)).toDateString());
     let daterangepicker: DateRangePicker = new DateRangePicker({
+        placeholder: "Select a range",
         presets: [
             {
                 label: 'This Week',

src/datetimepicker/date-time-format.ts

@@ -8,6 +8,7 @@ import { DropDownList} from '@syncfusion/ej2-dropdowns';
 (window as any).default = (): void => {
     loadCultureFiles();
     let datetimepicker: DateTimePicker = new DateTimePicker({
+        placeholder: "Select a date and time",
         format: 'dd-MMM-yy hh:mm a',
         value: new Date()
     });

src/datetimepicker/date-time-range.ts

@@ -12,6 +12,7 @@ import { DateTimePicker } from '@syncfusion/ej2-calendars';
     let currentMonth: number = today.getMonth();
     let currentDay: number = today.getDate();
     let dateTimeInstance: DateTimePicker = new DateTimePicker({
+        placeholder: "Select a date and time",
         min: new Date(currentYear, currentMonth, 7, 10, 0, 0),
         max: new Date(currentYear, currentMonth, 27, 22, 30, 0),
         value: new Date(currentYear, currentMonth, 14, 12, 0, 0)