v21.1.35 is released

config.json

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

index.html

@@ -432,7 +432,7 @@ <h1 class='sb-sample-text'>Chart</h1>
                                     <div class="content-area">
                                         <div class="ad-cnt-pt">
                                             <div class="ad-cnt-icon click-icon sb-icons sb-icon-icon-selection"></div>
-                                            <div class="cnt-text">65+ high-performance and responsive UI components</div>
+                                            <div class="cnt-text">80+ high-performance and responsive UI components</div>
                                         </div>
                                         <div class="ad-cnt-pt">
                                             <div class="ad-cnt-icon click-icon sb-icons sb-icon-icon-selection"></div>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@syncfusion/ej2-samples",
-  "version": "20.4.38",
+  "version": "21.1.35",
   "description": "Samples for Syncfusion Essential JS 2",
   "author": "Syncfusion Inc.",
   "license": "SEE LICENSE IN license",
@@ -50,6 +50,7 @@
     "@types/marked": "^0.3.0",
     "@types/codemirror": "0.0.56",
     "@types/es6-promise": "0.0.28",
+    "@types/node": "12.12.25",
     "hasher": "^1.2.0",
     "moment-timezone": "0.5.13",
     "tributejs": "^3.7.3"

sampleOrder.json

@@ -509,7 +509,7 @@
         }
     },
     "gantt": {
-        "ControlName": "Gantt",
+        "ControlName": "Gantt Chart",
         "Samples": {
             "default": "Default Functionalities",
             "local-data": "Local Data",
@@ -903,6 +903,14 @@
             "navigation": "Keyboard Navigations"
         }
     },
+    "ribbon": {
+        "ControlName": "Ribbon",
+        "Samples": {
+            "default":"Default Functionalities",
+            "simplified": "Simplified Mode",
+            "resize": "Ribbon Resizing"            
+        }
+    },
     "rich-text-editor": {
         "ControlName": "Rich Text Editor",
         "Samples": {
@@ -1265,4 +1273,4 @@
             "custom-drop-area": "Custom Drop Area"
         }
     }
-}
+}

src/accordion/keyboard-interaction.ts

@@ -16,4 +16,14 @@ import { loadCultureFiles } from '../common/culture-loader';
      });
      // tslint:enable:max-line-length
      acrdnObj.appendTo('#Accordion_keyboard_interaction');      //Render initialized Accordion component
+
+     //Focus the Accordion header (alt+j) key combination
+    document.body.addEventListener('keydown', (e: KeyboardEvent) => {
+        let accordionElement: HTMLElement = document.querySelector(
+            '#Accordion_keyboard_interaction .e-acrdn-header'
+        );
+        if (e.altKey && e.keyCode === 74 && accordionElement) {
+            accordionElement.focus();
+        }
+    });
  };

src/arc-gauge/default.ts

@@ -137,7 +137,7 @@ let circulargauge: CircularGauge = new CircularGauge({
             color: '#7a7f82',
             startWidth: 1,
             endWidth: 1,
-            radius: '90%',
+            radius: '89%',
           },
           {
             start: 0,
@@ -153,7 +153,7 @@ let circulargauge: CircularGauge = new CircularGauge({
             color: '#7a7f82',
             startWidth: 1,
             endWidth: 1,
-            radius: '76%',
+            radius: '75%',
           },
           {
             start: 0,
@@ -169,7 +169,7 @@ let circulargauge: CircularGauge = new CircularGauge({
             color: '#7a7f82',
             startWidth: 1,
             endWidth: 1,
-            radius: '63%',
+            radius: '61%',
           },
           {
             start: 0,
@@ -185,7 +185,7 @@ let circulargauge: CircularGauge = new CircularGauge({
             color: '#7a7f82',
             startWidth: 1,
             endWidth: 1,
-            radius: '49%',
+            radius: '47%',
           },
           {
             start: 0,
@@ -201,7 +201,7 @@ let circulargauge: CircularGauge = new CircularGauge({
             color: '#7a7f82',
             startWidth: 1,
             endWidth: 1,
-            radius: '35%',
+            radius: '34%',
           },
         ],
         pointers: [],

src/arc-gauge/sample.json

@@ -2,34 +2,29 @@
     "name": "Arc Gauge",
     "directory": "arc-gauge",
     "category": "Data Visualization",
-    "type":"new",
     "ftName": "arcgauge",
     "samples": [
         {
             "url": "default",
             "name": "Default Functionalities",
-            "type":"new",
             "description": "This Essential JS2 Arc Gauge demo shows the gauge's basic rendering.",
             "category": "Arc Gauge"
         },
         {
             "url": "customer-satisfaction-score",
             "name": "Customer Satisfaction Score",
-            "type":"new",
             "description": "This Essential JS2 Arc Gauge demo shows how the gauge can be customized to represent a customer satisfaction score scenario.",
             "category": "Arc Gauge"
         },
         {
             "url": "key-performance-indicator",
             "name": "Key Performance Indicator",
-            "type":"new",
             "description": "This Essential JS2 Arc Gauge demo shows how the gauge can be customized to represent a key performance indicator scenario.",
             "category": "Arc Gauge"
         },
         {
             "url": "patterns",
             "name": "Patterns",
-            "type":"new",
             "description": "This Essential JS2 Arc Gauge demo shows how the gauge can be rendered in many ways to demonstrate different user interfaces by customizing its axis, range, pointer, etc.",
             "category": "Arc Gauge"
         }

src/auto-complete/data-binding.ts

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

src/auto-complete/highlight.html

@@ -40,5 +40,9 @@
         width: 50%;
         padding-left: 10px;
     }
+
+    .e-dropdownbase .e-list-item .e-highlight {
+        color: red;
+    }
 </style>
 <!-- custom code end-->

src/chart/accumulation-distribution-indicator.html

@@ -3,16 +3,15 @@
 </div>
 <div id="action-description">
     <p>
-        This sample illustrates a stock chart with candle series and an accumulation distribution indicator. Trackball shows the information about the stock and signal value of a day.
+        This sample illustrates a chart with candle series and an accumulation distribution indicator. The trackball shows information about the stock rates and signal values each day.
    </p>
 </div>
 <div id="description">
     <p>
-        In this example, you can see how to render and configure the Accumulation Distribution Indicator. You can use <code>border</code>, 
-        <code>fill</code> properties to customize the area.
+        In this example, you can see how to render and configure an accumulation distribution indicator. This uses volume and price to identify whether stock is accumulated or distributed. It also identifies divergences between the stock price and volume flow.
     </p>
     <p>
-        Tooltip is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.
+        <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>
     <br>
     <p style="font-weight: 500"><b>Injecting Module</b></p>
@@ -22,7 +21,7 @@
     </p>
     <p>
         More information on the Accumulation Distribution Indicator can be found in this
-        <a target="_blank" href="http://ej2.syncfusion.com/documentation/chart/api-series.html#type">documentation section</a>.
+        <a target="_blank" href="https://ej2.syncfusion.com/documentation/chart/technical-indicators/#accumulation-distribution">documentation section</a>.
     </p>
 </div>
 <style>

src/chart/accumulation-distribution-indicator.ts

@@ -4,7 +4,8 @@ import {
     Crosshair, LineSeries, AccumulationDistributionIndicator, IAxisLabelRenderEventArgs,
     StripLine, ChartTheme
 } from '@syncfusion/ej2-charts';
-import { Browser, Ajax } from '@syncfusion/ej2-base';
+import { chartValue } from './financial-data';
+import { Browser } from '@syncfusion/ej2-base';
 Chart.Inject(
     CandleSeries, Category, Tooltip, StripLine, DateTime, Zoom, Logarithmic, Crosshair, LineSeries,
     AccumulationDistributionIndicator
@@ -16,20 +17,10 @@ Chart.Inject(
 
 (window as any).default = (): void => {
     loadCultureFiles();
-    let chartData: Object[];
-    let ajax: Ajax = new Ajax('./src/chart/data-source/financial-data.json', 'GET', true);
-    ajax.send().then();
-    // Rendering Dialog on AJAX success
-    ajax.onSuccess = (data: string): void => {
-        chartData = JSON.parse(data);
-        chartData.map((data: Object) => {
-            // tslint:disable-next-line:no-string-literal
-            data['x'] = new Date(data['x']);
-        });
         let chart: Chart = new Chart({
             // Initializing the axes
             primaryXAxis: {
-                valueType: 'DateTime',
+                valueType: 'DateTime', intervalType: "Months",
                 majorGridLines: { width: 0 },
                 zoomFactor: 0.2, zoomPosition: 0.6,
                 crosshairTooltip: { enable: true }
@@ -39,13 +30,14 @@ Chart.Inject(
                 labelFormat: '${value}',
                 minimum: 50, maximum: 170,
                 plotOffset: 25,
-                interval: 30, rowIndex: 1, opposedPosition: true, lineStyle: { width: 0 }
+                interval: 30, rowIndex: 1, opposedPosition: true, lineStyle: { width: 0 },
+                majorTickLines: { width: 0 }
             },
             axes: [{
                 name: 'secondary',
                 opposedPosition: true, rowIndex: 0,
                 majorGridLines: { width: 0 }, lineStyle: { width: 0 }, minimum: -7000000000, maximum: 5000000000,
-                interval: 6000000000, majorTickLines: { width: 0 }, title: 'Accumulation Distribution',
+                interval: 6000000000, majorTickLines: { width: 0 }, title: 'Accumulation Distribution (in Billion)',
                 stripLines: [
                     {
                         start: -7000000000, end: 6000000000, text: '', color: '#6063ff', visible: true,
@@ -62,16 +54,16 @@ Chart.Inject(
             ],
             // Initializing the series
             series: [{
-                dataSource: chartData, width: 2,
-                xName: 'x', yName: 'y', low: 'low', high: 'high', close: 'close', volume: 'volume', open: 'open',
+                dataSource: chartValue, width: 2,
+                xName: 'period', yName: 'y', low: 'low', high: 'high', close: 'close', volume: 'volume', open: 'open',
                 name: 'Apple Inc', bearFillColor: '#2ecd71', bullFillColor: '#e74c3d',
                 type: 'Candle', animation: { enable: true }
             }],
 
             // Initializing the indicators
             indicators: [{
                 type: 'AccumulationDistribution', field: 'Close', seriesName: 'Apple Inc', yAxisName: 'secondary', fill: '#6063ff',
-                period: 3, animation: { enable: true }
+                period: 3
             }],
             /**
              * Initializing the zooming, crosshair and tooltip
@@ -93,11 +85,11 @@ Chart.Inject(
             axisLabelRender: (args: IAxisLabelRenderEventArgs) => {
                 if (args.axis.name === 'secondary') {
                     let value: number = Number(args.text) / 1000000000;
-                    args.text = String(value) + 'bn';
+                    args.text = String(value) + 'B';
                 }
             },
             chartArea: { border: { width: 0 } },
-            title: 'AAPL 2012-2017',
+            title: 'AAPL Stock Price 2012 - 2017',
             width: Browser.isDevice ? '100%' : '75%',
             load: (args: ILoadedEventArgs) => {
                 let selectedTheme: string = location.hash.split('/')[1];
@@ -112,4 +104,3 @@ Chart.Inject(
         chart.appendTo('#container');
     };
 
-};

src/chart/area-negative-point.html

@@ -8,9 +8,14 @@
 </div>
 <div id="description">
     <p>
-        In this example, you can see how to render an area series with negative values. Similar to line type series, but the area gets closed and filled with series color. You can use  <code><a target="_blank" href="https://ej2.syncfusion.com/documentation/api/chart/series/#border">border</a></code> and <code><a target="_blank" href="https://ej2.syncfusion.com/documentation/api/chart/series/#fill">fill</a></code> properties to customize the area. Also, the legend is enabled with the shape of the series type.
+        In this example, you can see how to render an area series with negative values. Similar to line type series, but the area gets closed and filled with series color. You can use <a target="_blank" href="https://ej2.syncfusion.com/documentation/api/chart/border/">border</a> and <a target="_blank" href="https://ej2.syncfusion.com/documentation/api/chart/seriesModel/#fill">fill</a> properties to customize the area. Also, the legend is enabled with the shape of the series type.
      </p>     
       <br>
+      <p style="font-weight: 500"><b>Injecting Module</b></p>
+        <p>
+            Chart component features are segregated into individual feature-wise modules. To use area series, we need to inject
+            <code>AreaSeries</code> module using <code>Chart.Inject(AreaSeries)</code> method.
+        </p>
         <p>
             More information on the area series can be found in this 
             <a target="_blank" href="https://ej2.syncfusion.com/documentation/chart/chart-types/#area-charts">documentation section</a>.

src/chart/area-segments.html

@@ -38,10 +38,10 @@
 </div>
 <div id="description">
     <p>
-        In this example, you can see how to render and configure the points in a particular range by using <code>MultiColoredArea</code> series. Points within the range can be configured with <code>color</code> property in ChartSegment.
+        In this example, you can see how to render and configure points in a particular range by using <code>MultiColoredArea</code> series. Points within the range can be configured with the <a target="_blank" href="https://ej2.syncfusion.com/documentation/api/chart/chartSegment/#color">color</a> property in chart segment.
     </p>
     <p>
-        Tooltip is enabled in this example, to see the tooltip in action, hover a point or tap a point in touch enabled devices.
+        The <a target="_blank" href="https://ej2.syncfusion.com/documentation/api/chart/tooltip/">tooltip</a> is enabled in this example, to see the tooltip in action, hover a point or tap a point in touch enabled devices.
     </p>
     <br>
     <p style="font-weight: 500"><b>Injecting Module</b></p>

src/chart/area.ts

@@ -57,13 +57,13 @@ import { Browser } from '@syncfusion/ej2-base';
                 y: '98%'
             },
             {
-                content: Browser.isDevice ? '<div style="font-weight: bold; color: white; font-size: 7px;">DOWNLOAD</div>' : '<div style="font-weight: bold; color: white; font-size: 9px;">DOWNLOAD</div>',
+                content: Browser.isDevice ? '<div style="font-weight: bold; color: white; font-size: 7px;">DOWNLOAD</div>' : '<div style="font-weight: bold; color: white; font-size: 11px;">DOWNLOAD</div>',
                 region: 'Series',
                 x: '85%',
-                y: '93%'
+                y: '92%'
             },
             {
-                content:  Browser.isDevice ? '<div style="font-weight: bold; color: white;font-size: 7px;">STREAMING</div>' : '<div style="font-weight: bold; color: white;font-size: 11px;">STREAMING</div>',
+                content:  Browser.isDevice ? '<div style="font-weight: bold; color: white;font-size: 7px;"></div>' : '<div style="font-weight: bold; color: white;font-size: 11px;">STREAMING</div>',
                 region: 'Series',
                 x: '93%',
                 y: '96%'

src/chart/average-true-range-indicator.html

@@ -3,16 +3,15 @@
 </div>
 <div id="action-description">
     <p>
-        This sample illustrates a stock chart with candle series and an average true range indicator. 
-        Trackball shows the information about the stock and signal value of a day.
+        This sample illustrates a chart with candle series and an average true range indicator. The trackball shows information about the stock rates and signal values of a day.
    </p>
 </div>
 <div id="description">
     <p>
-        In this example, you can see how to render and configure the Average True Range Indicator.
+        In this example, you can see how to render and configure an average true range indicator. This indicator measures the volatility of the stock by comparing the current value with the previous value.
     </p>
     <p>
-        Tooltip is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.
+        <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>
     <br>
     <p style="font-weight: 500"><b>Injecting Module</b></p>
@@ -22,7 +21,7 @@
     </p>
     <p>
         More information on the Average True Range Indicator can be found in this
-        <a target="_blank" href="http://ej2.syncfusion.com/documentation/chart/api-series.html#type">documentation section</a>.
+        <a target="_blank" href="https://ej2.syncfusion.com/documentation/chart/technical-indicators/#average-true-range-atr">documentation section</a>.
     </p>
 </div>
 <style>