948920: Need to resolve merge conflict file

ej2-react-toc.html

@@ -722,8 +722,10 @@
 <li><a href="/ej2-react/data/getting-started">Getting Started</a></li>
 <li><a href="/ej2-react/data/data-binding">Data Binding</a></li>
 <li><a href="/ej2-react/data/adaptors">Adaptors</a></li>
+<li><a href="/ej2-react/data/cache">Cache</a></li>
 <li><a href="/ej2-react/data/querying">Querying</a></li>
 <li><a href="/ej2-react/data/manipulation">CRUD Data operations</a></li>
+<li><a href="/ej2-react/data/applying-middleware-logic">Applying Middleware Logic</a></li>
 <li><a href="/ej2-react/data/how-to">How To</a></li>
 </ul>
 </li><li>
@@ -1554,28 +1556,28 @@
 <li><a href="/ej2-react/image-editor/end-user-capabilities">End User Capabilities</a></li>
 <li><a href="/ej2-react/image-editor/open-save">Open and Save</a></li>
 <li><a href="/ej2-react/image-editor/selection-cropping">Selection and Cropping</a></li>
-<li><a href="/ej2-react/image-editor/annotation">Annotation</a></li>
 <li><a href="/ej2-react/image-editor/transform">Transform</a></li>
-<li><a href="/ej2-react/image-editor/toolbar">Toolbar</a></li>
+<li><a href="/ej2-react/image-editor/annotation">Annotation</a></li>
+<li><a href="/ej2-react/image-editor/z-order">Z-Order</a></li>
 <li><a href="/ej2-react/image-editor/quick-access">Quick Access Toolbar</a></li>
-<li><a href="/ej2-react/image-editor/undo-redo">Undo and Redo</a></li>
-<li><a href="/ej2-react/image-editor/filter">Filter</a></li>
 <li><a href="/ej2-react/image-editor/finetune">Finetune</a></li>
-<li><a href="/ej2-react/image-editor/resize">Resize</a></li>
+<li><a href="/ej2-react/image-editor/filter">Filter</a></li>
 <li><a href="/ej2-react/image-editor/frame">Frame</a></li>
-<li><a href="/ej2-react/image-editor/z-order">Z-Order</a></li>
+<li><a href="/ej2-react/image-editor/resize">Resize</a></li>
 <li><a href="/ej2-react/image-editor/redact">Redact</a></li>
+<li><a href="/ej2-react/image-editor/undo-redo">Undo Redo</a></li>
 <li><a href="/ej2-react/image-editor/image-restrictions">Image Restrictions</a></li>
+<li><a href="/ej2-react/image-editor/toolbar">Toolbar</a></li>
 <li><a href="/ej2-react/image-editor/localization">Localization</a></li>
+<li><a href="/ej2-react/image-editor/accessibility">Accessibility</a></li>
 <li>How To
     <ul>
+        <li><a href="/ej2-react/image-editor/how-to/reset">Reset an image</a></li>
         <li><a href="/ej2-react/image-editor/how-to/clear-image">Clear an Image</a></li>
         <li><a href="/ej2-react/image-editor/how-to/render-dialog">Render Dialog in Image Editor</a></li>
-        <li><a href="/ej2-react/image-editor/how-to/reset">Reset an image</a></li>
     </ul>
 </li>
 <li><a href="https://ej2.syncfusion.com/react/documentation/api/image-editor/">API Reference</a></li>
-<li><a href="/ej2-react/image-editor/accessibility">Accessibility</a></li>
 </ul>
 </li><li>
 InplaceEditor
@@ -2556,6 +2558,19 @@
 <li><a href="/ej2-react/sparkline/ej1-api-migration">Migration from Essential JS 1</a></li>
 <li><a href="https://ej2.syncfusion.com/react/documentation/api/sparkline/">API Reference</a></li>
 </ul>
+</li><li>
+    Speech To Text
+    <ul>
+        <li><a href="/ej2-react/speech-to-text/getting-started">Getting Started</a></li>
+        <li><a href="/ej2-react/speech-to-text/speech-recognition">Speech recognition</a></li>
+        <li><a href="/ej2-react/speech-to-text/appearance">Appearance</a></li>
+        <li><a href="/ej2-react/speech-to-text/globalization">Globalization</a></li>
+        <li><a href="/ej2-react/speech-to-text/accessibility">Accessibility</a></li>
+        <li><a href="/ej2-react/speech-to-text/security">Security concerns</a></li>
+        <li><a href="/ej2-react/speech-to-text/methods">Methods</a></li>
+        <li><a href="/ej2-react/speech-to-text/events">Events</a></li>
+        <li><a href="https://ej2.syncfusion.com/react/documentation/api/speech-to-text/">API Reference</a></li>
+    </ul>
 </li><li>
 SpeedDial
 <ul>

ej2-react/bullet-chart/getting-started.md

@@ -120,7 +120,7 @@ These modules should be injected to the `services` section as follows,
 {% tabs %}
 {% highlight js tabtitle="index.jsx" %}
 
-import { BulletChartComponent, BulletTooltip } from "@syncfusion/ej2-react-charts";
+import { BulletChartComponent, BulletTooltip, Inject } from "@syncfusion/ej2-react-charts";
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 

ej2-react/code-snippet/3d-chart/getting-started/getting-started-cs2/app/index.jsx

@@ -14,7 +14,7 @@ export let data = [
 ];
 
 function App() {
-    return <Chart3DComponent id='charts' style={{ textAlign: "center" }} primaryXAxis={{
+    return (<Chart3DComponent id='charts' style={{ textAlign: "center" }} primaryXAxis={{
         valueType: 'Category',
         labelRotation: -45,
         labelPlacement: 'BetweenTicks'
@@ -28,7 +28,7 @@ function App() {
             <Chart3DSeriesDirective dataSource={data} xName='x' yName='y' type='Column'>
             </Chart3DSeriesDirective>
         </Chart3DSeriesCollectionDirective>
-    </Chart3DComponent>;
+    </Chart3DComponent>)
 }
 ;
 export default App;

ej2-react/code-snippet/3d-chart/getting-started/getting-started-cs2/app/index.tsx

@@ -17,7 +17,7 @@ export let data: any[] = [
 
 
 function App() {
-  return <Chart3DComponent id='charts' style={{ textAlign: "center" }} primaryXAxis={{
+  return (<Chart3DComponent id='charts' style={{ textAlign: "center" }} primaryXAxis={{
     valueType: 'Category',
     labelRotation: -45,
     labelPlacement: 'BetweenTicks'
@@ -31,7 +31,7 @@ function App() {
         <Chart3DSeriesDirective dataSource={data} xName='x' yName='y' type='Column'>
         </Chart3DSeriesDirective>
     </Chart3DSeriesCollectionDirective>
-</Chart3DComponent>
+</Chart3DComponent>)
 };
 export default App;
 ReactDOM.render(<App />, document.getElementById("charts"));

ej2-react/code-snippet/3d-chart/getting-started/getting-started-cs3/app/index.jsx

@@ -14,7 +14,7 @@ export let data = [
 ];
 
 function App() {
-    return <Chart3DComponent id='charts' style={{ textAlign: "center" }} primaryXAxis={{
+    return (<Chart3DComponent id='charts' style={{ textAlign: "center" }} primaryXAxis={{
         valueType: 'Category',
         labelRotation: -45,
         labelPlacement: 'BetweenTicks'
@@ -28,7 +28,7 @@ function App() {
             <Chart3DSeriesDirective dataSource={data} xName='x' yName='y' type='Column'>
             </Chart3DSeriesDirective>
         </Chart3DSeriesCollectionDirective>
-    </Chart3DComponent>;
+    </Chart3DComponent>);
 }
 ;
 export default App;

ej2-react/code-snippet/3d-chart/getting-started/getting-started-cs3/app/index.tsx

@@ -17,7 +17,7 @@ export let data: any[] = [
 
 
 function App() {
-  return <Chart3DComponent id='charts' style={{ textAlign: "center" }} primaryXAxis={{
+  return (<Chart3DComponent id='charts' style={{ textAlign: "center" }} primaryXAxis={{
     valueType: 'Category',
     labelRotation: -45,
     labelPlacement: 'BetweenTicks'
@@ -31,7 +31,7 @@ function App() {
         <Chart3DSeriesDirective dataSource={data} xName='x' yName='y' type='Column'>
         </Chart3DSeriesDirective>
     </Chart3DSeriesCollectionDirective>
-</Chart3DComponent>
+</Chart3DComponent>)
 };
 export default App;
 ReactDOM.render(<App />, document.getElementById("charts"));

ej2-react/code-snippet/3d-chart/getting-started/getting-started-cs4/app/index.jsx

@@ -14,7 +14,7 @@ export let data = [
 ];
 
 function App() {
-    return <Chart3DComponent id='charts' style={{ textAlign: "center" }} primaryXAxis={{
+    return (<Chart3DComponent id='charts' style={{ textAlign: "center" }} primaryXAxis={{
         valueType: 'Category',
         labelRotation: -45,
         labelPlacement: 'BetweenTicks'
@@ -28,7 +28,7 @@ function App() {
             <Chart3DSeriesDirective dataSource={data} xName='x' name='Sales' yName='y' type='Column'>
             </Chart3DSeriesDirective>
         </Chart3DSeriesCollectionDirective>
-    </Chart3DComponent>;
+    </Chart3DComponent>);
 }
 ;
 export default App;

ej2-react/code-snippet/3d-chart/getting-started/getting-started-cs4/app/index.tsx

@@ -17,7 +17,7 @@ export let data: any[] = [
 
 
 function App() {
-  return <Chart3DComponent id='charts' style={{ textAlign: "center" }} primaryXAxis={{
+  return (<Chart3DComponent id='charts' style={{ textAlign: "center" }} primaryXAxis={{
     valueType: 'Category',
     labelRotation: -45,
     labelPlacement: 'BetweenTicks'
@@ -31,7 +31,7 @@ function App() {
         <Chart3DSeriesDirective dataSource={data} xName='x' name='Sales' yName='y' type='Column'>
         </Chart3DSeriesDirective>
     </Chart3DSeriesCollectionDirective>
-</Chart3DComponent>
+</Chart3DComponent>)
 };
 export default App;
 ReactDOM.render(<App />, document.getElementById("charts"));

ej2-react/code-snippet/3d-chart/getting-started/getting-started-cs5/app/index.jsx

@@ -14,7 +14,7 @@ export let data = [
 ];
 
 function App() {
-    return <Chart3DComponent id='charts' style={{ textAlign: "center" }} primaryXAxis={{
+    return (<Chart3DComponent id='charts' style={{ textAlign: "center" }} primaryXAxis={{
         valueType: 'Category',
         labelRotation: -45,
         labelPlacement: 'BetweenTicks'
@@ -28,7 +28,7 @@ function App() {
             <Chart3DSeriesDirective dataSource={data} dataLabel={{ visible: true}} xName='x' name='Sales' yName='y' type='Column'>
             </Chart3DSeriesDirective>
         </Chart3DSeriesCollectionDirective>
-    </Chart3DComponent>;
+    </Chart3DComponent>);
 }
 ;
 export default App;

ej2-react/code-snippet/3d-chart/getting-started/getting-started-cs5/app/index.tsx

@@ -17,7 +17,7 @@ export let data: any[] = [
 
 
 function App() {
-  return <Chart3DComponent id='charts' style={{ textAlign: "center" }} primaryXAxis={{
+  return (<Chart3DComponent id='charts' style={{ textAlign: "center" }} primaryXAxis={{
     valueType: 'Category',
     labelRotation: -45,
     labelPlacement: 'BetweenTicks'
@@ -31,7 +31,7 @@ function App() {
         <Chart3DSeriesDirective dataLabel={{ visible: true }} dataSource={data} xName='x' name='Sales' yName='y' type='Column'>
         </Chart3DSeriesDirective>
     </Chart3DSeriesCollectionDirective>
-</Chart3DComponent>
+</Chart3DComponent>)
 };
 export default App;
 ReactDOM.render(<App />, document.getElementById("charts"));

ej2-react/code-snippet/3d-chart/getting-started/getting-started-cs6/app/index.jsx

@@ -14,7 +14,7 @@ export let data = [
 ];
 
 function App() {
-    return <Chart3DComponent id='charts' style={{ textAlign: "center" }} primaryXAxis={{
+    return (<Chart3DComponent id='charts' style={{ textAlign: "center" }} primaryXAxis={{
         valueType: 'Category',
         labelRotation: -45,
         labelPlacement: 'BetweenTicks'
@@ -28,7 +28,7 @@ function App() {
             <Chart3DSeriesDirective dataSource={data} xName='x' name='Sales' yName='y' type='Column'>
             </Chart3DSeriesDirective>
         </Chart3DSeriesCollectionDirective>
-    </Chart3DComponent>;
+    </Chart3DComponent>);
 }
 ;
 export default App;

ej2-react/code-snippet/3d-chart/getting-started/getting-started-cs6/app/index.tsx

@@ -17,7 +17,7 @@ export let data: any[] = [
 
 
 function App() {
-  return <Chart3DComponent id='charts' style={{ textAlign: "center" }} primaryXAxis={{
+  return (<Chart3DComponent id='charts' style={{ textAlign: "center" }} primaryXAxis={{
     valueType: 'Category',
     labelRotation: -45,
     labelPlacement: 'BetweenTicks'
@@ -31,7 +31,7 @@ function App() {
         <Chart3DSeriesDirective dataSource={data} xName='x' name='Sales' yName='y' type='Column'>
         </Chart3DSeriesDirective>
     </Chart3DSeriesCollectionDirective>
-</Chart3DComponent>
+</Chart3DComponent>)
 };
 export default App;
 ReactDOM.render(<App />, document.getElementById("charts"));

ej2-react/code-snippet/bullet-chart/getting-started/datasource-cs1/app/index.jsx

@@ -10,7 +10,7 @@ function App() {
         { value: 400, target: 380 },
         { value: 500, target: 480 },
     ];
-    return (<BulletChartComponent id='Revenue' style={{ textAlign: "center" }} animation={{ enable: false }} valueField='value' targetField='target' minimum={0} maximum={300} interval={50} dataSource={data}>
+    return (<BulletChartComponent id='Revenue' style={{ textAlign: "center" }} animation={{ enable: false }} valueField='value' targetField='target' minimum={0} maximum={500} interval={50} dataSource={data}>
             </BulletChartComponent>);
 }
 ;

ej2-react/code-snippet/bullet-chart/getting-started/datasource-cs1/app/index.tsx

@@ -22,7 +22,7 @@ function App() {
                         valueField='value'
                         targetField='target'
                         minimum={0}
-                        maximum={300}
+                        maximum={500}
                         interval={50}
                         dataSource={data}>
             </BulletChartComponent>);

ej2-react/code-snippet/chat-ui/header/template/systemjs.config.js

@@ -33,6 +33,7 @@ System.config({
         "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js",
         "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js",
         "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js",
+        "@syncfusion/ej2-react-splitbuttons": "syncfusion:ej2-react-splitbuttons/dist/ej2-react-splitbuttons.umd.min.js",
         "react-dom": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js",
         "react": "https://unpkg.com/react@18.2.0/umd/react.production.min.js",
     },

ej2-react/code-snippet/diagram/connectors/AvoidLineOverlappings/app/index.jsx

@@ -0,0 +1,74 @@
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { Diagram, DiagramComponent, LineRouting, AvoidLineOverlapping, Snapping, DiagramConstraints, PortVisibility } from "@syncfusion/ej2-react-diagrams";
+
+Diagram.Inject(LineRouting, AvoidLineOverlapping, Snapping);
+
+let orData = 'M21.7,76.5L21.7,76.5c6.4-18.1,6.4-37.8,0-55.9l0-0.1h1.6c21.5,0,41.7,10.4,54.2,28l0,0l0,0  c-12.5,17.6-32.7,28-54.2,28H21.7z M99.5,48.5l-22,0 M0,31.5h25 M0,65.5h25';
+let andData = 'M21.5,20.5h28a28,28,0,0,1,28,28v0a28,28,0,0,1-28,28h-28a0,0,0,0,1,0,0v-56a0,0,0,0,1,0,0Z M78,48.5 L 100,48.5Z M0,32.5 L 21.4,32.5Z M0,65.5 L 21.4,65.5Z';
+let notData = 'M75.5,50.5l-52,28v-56L75.5,50.5z M81.5,50.5h18 M1.5,50.5h22 M78.5,47.5c-1.7,0-3,1.3-3,3s1.3,3,3,3s3-1.3,3-3  S80.2,47.5,78.5,47.5z';
+
+let orPort = [
+    { id: 'Or_port1', offset: { x: 0.01, y: 0.1963 }, visibility: PortVisibility.Visible, style: { fill: 'black' }, shape: 'Circle' }, { id: 'Or_port2', offset: { x: 0.26, y: 0.5 } },
+    { id: 'Or_port3', offset: { x: 0.01, y: 0.805 }, visibility: PortVisibility.Visible, style: { fill: 'black' }, shape: 'Circle' }, { id: 'Or_port4', offset: { x: 0.99, y: 0.5 }, visibility: PortVisibility.Visible, style: { fill: 'black' }, shape: 'Circle' }
+];
+let andPort = [
+    { id: 'And_port1', offset: { x: 0.01, y: 0.215 }, visibility: PortVisibility.Visible, style: { fill: 'black' }, shape: 'Circle' }, { id: 'And_port2', offset: { x: 0.22, y: 0.5 } },
+    { id: 'And_port3', offset: { x: 0.01, y: 0.805 }, visibility: PortVisibility.Visible, style: { fill: 'black' }, shape: 'Circle' }, { id: 'And_port4', offset: { x: 0.99, y: 0.5 }, visibility: PortVisibility.Visible, style: { fill: 'black' }, shape: 'Circle' }
+];
+let notPort = [
+    { id: 'Not_port1', offset: { x: 0.01, y: 0.5 }, visibility: PortVisibility.Visible, style: { fill: 'black' }, shape: 'Circle' }, { id: 'Not_port2', offset: { x: 0.99, y: 0.5 }, visibility: PortVisibility.Visible, style: { fill: 'black' }, shape: 'Circle' }
+];
+let nodes = [
+    { id: 'switch', offsetX: 80, offsetY: 50, width: 50, height: 50, ports: [{ id: 'port1', offset: { x: 1, y: 0.5 }, visibility: PortVisibility.Visible, style: { fill: 'black' }, shape: 'Circle' }], annotations: [{ content: 'A' }] },
+    { id: 'Push', offsetX: 80, offsetY: 150, width: 50, height: 50, ports: [{ id: 'port1', offset: { x: 1, y: 0.5 }, visibility: PortVisibility.Visible, style: { fill: 'black' }, shape: 'Circle' }], annotations: [{ content: 'B' }] },
+    { id: 'clock', offsetX: 80, offsetY: 250, width: 50, height: 50, ports: [{ id: 'port1', offset: { x: 1, y: 0.5 }, visibility: PortVisibility.Visible, style: { fill: 'black' }, shape: 'Circle' }], annotations: [{ content: 'C' }] },
+    { id: 'switch2', offsetX: 80, offsetY: 350, width: 50, height: 50, ports: [{ id: 'port1', offset: { x: 1, y: 0.5 }, visibility: PortVisibility.Visible, style: { fill: 'black' }, shape: 'Circle' }], annotations: [{ content: 'D' }] },
+
+    { id: 'AND21', offsetX: 200, offsetY: 100, width: 60, height: 40, shape: { type: 'Path', data: andData }, ports: andPort },
+    { id: 'OR22', offsetX: 200, offsetY: 200, width: 60, height: 40, shape: { type: 'Path', data: orData }, ports: orPort },
+    { id: 'AND23', offsetX: 200, offsetY: 300, width: 60, height: 40, shape: { type: 'Path', data: andData }, ports: andPort },
+
+    { id: 'AND31', offsetX: 300, offsetY: 250, width: 60, height: 40, shape: { type: 'Path', data: andData }, ports: andPort },
+
+    { id: 'OR41', offsetX: 400, offsetY: 150, width: 60, height: 40, shape: { type: 'Path', data: orData }, ports: orPort },
+    { id: 'NOT42', offsetX: 400, offsetY: 350, width: 60, height: 40, shape: { type: 'Path', data: notData }, ports: notPort },
+
+    {
+        id: 'Exor5', ports: orPort, offsetX: 500, offsetY: 250, width: 60, height: 40,
+        shape: {
+            type: 'Path', data: 'M21.7,76.5L21.7,76.5c6.4-18.1,6.4-37.8,0-55.9l0-0.1h1.6c21.5,0,41.7,10.4,54.2,28l0,0l0,0  c-12.5,17.6-32.7,28-54.2,28H21.7z M73.4,48.5L73.4,48.5 M17.5,76.8L17.5,76.8c6.7-18.2,6.7-38.1,0-56.3l0-0.1 M77.5,48.5h22   M0,32.5h21 M0,65.5h21'
+        },
+    },
+
+    { id: 'bulb', offsetX: 600, offsetY: 150, width: 50, height: 50, ports: [{ id: 'bulbPort', offset: { x: 0.5, y: 1 }, visibility: PortVisibility.Visible, style: { fill: 'black' }, shape: 'Circle' }], annotations: [{ content: 'Out' }] }
+];
+let connectors = [
+    { id: 'ExOr-Output', sourceID: 'Exor5', targetID: 'bulb', sourcePortID: 'Or_port4', targetPortID: 'bulbPort', type: 'Orthogonal' },
+    { id: '4-ExOr1', sourceID: 'OR41', targetID: 'Exor5', sourcePortID: 'Or_port4', targetPortID: 'Or_port1', type: 'Orthogonal' },
+    { id: '4-ExOr2', sourceID: 'NOT42', targetID: 'Exor5', sourcePortID: 'Not_port2', targetPortID: 'Or_port3', type: 'Orthogonal' },
+    { id: '3-AND-OR', sourceID: 'AND31', targetID: 'OR41', sourcePortID: 'And_port4', targetPortID: 'Or_port3', type: 'Orthogonal' },
+    { id: '2AND1-4AND1', sourceID: 'AND21', targetID: 'OR41', sourcePortID: 'And_port4', targetPortID: 'Or_port1', type: 'Orthogonal' },
+    { id: '2OR2-3AND', sourceID: 'OR22', targetID: 'AND31', sourcePortID: 'Or_port4', targetPortID: 'And_port1', type: 'Orthogonal' },
+    { id: '2AND3-3AND', sourceID: 'AND23', targetID: 'AND31', sourcePortID: 'And_port4', targetPortID: 'And_port3', type: 'Orthogonal' },
+
+    { id: 'switch-Not42', sourceID: 'switch', targetID: 'NOT42', sourcePortID: 'port1', targetPortID: 'Not_port1', type: 'Orthogonal' },
+
+    { id: 'Push-AND21', sourceID: 'Push', targetID: 'AND21', sourcePortID: 'port1', targetPortID: 'And_port3', type: 'Orthogonal' },
+    { id: 'Push-OR22', sourceID: 'Push', targetID: 'OR22', sourcePortID: 'port1', targetPortID: 'Or_port1', type: 'Orthogonal' },
+    { id: 'Push-AND23', sourceID: 'Push', targetID: 'AND23', sourcePortID: 'port1', targetPortID: 'And_port1', type: 'Orthogonal' },
+
+    { id: 'clock-OR22', sourceID: 'clock', targetID: 'OR22', sourcePortID: 'port1', targetPortID: 'Or_port3', type: 'Orthogonal' },
+    { id: 'clock-AND23', sourceID: 'clock', targetID: 'AND23', sourcePortID: 'port1', targetPortID: 'And_port3', type: 'Orthogonal' },
+
+    { id: 'switch2-And21', sourceID: 'switch2', targetID: 'AND21', sourcePortID: 'port1', targetPortID: 'And_port1', type: 'Orthogonal' },
+];
+function App() {
+    return (<DiagramComponent id="diagram" width={'100%'} height={'700px'} nodes={nodes} connectors={connectors} rulerSettings={{ showRulers: true }}
+        constraints={DiagramConstraints.Default | DiagramConstraints.LineRouting | DiagramConstraints.AvoidLineOverlapping}
+        getConnectorDefaults={(connector) => {
+            connector.cornerRadius = 5; return connector;
+        }} />);
+}
+const root = ReactDOM.createRoot(document.getElementById('container'));
+root.render(<App />);