v20.2.36 is released

components/base/CHANGELOG.md

@@ -2,21 +2,28 @@
 
 ## [Unreleased]
 
-## 20.1.60 (2022-06-14)
+## 20.2.36 (2022-06-30)
 
 ### Common
 
-#### Bug Fixes
+#### New Features
 
-- `I367449` - Resolved Equal length of data property changes not working.
+- Provided the TypeScript 4.7 compatible support for the Angular components.
 
-## 20.1.48 (2022-04-12)
+- Provided option to register the license key by using the `npx` command. Follow these steps to register the license using the `npx` command:
+- - Install the Syncfusion packages from npm.
+- - Add the license key either in the environment variable `SYNCFUSION_LICENSE` or in the `syncfusion-license.txt` text file.
+- - Run the command `npx syncfusion-license activate` to register the license automatically.
 
-### Common
+- `#I376821` - Provided support to compile the Sass files using [Dart Sass](https://sass-lang.com/dart-sass) instead of [node-sass](https://github.com/sass/node-sass). This change has been made since `node-sass` has been deprecated.
 
-#### Bug Fixes
+- Added support to work with Angular 14 version.
+
+- Provided the Ivy-compatible support for the Angular packages. Ivy Angular packages support Angular versions 12 and above.
+
+#### Breaking Changes
 
-- `I365879` - Component tags boolean property not updated properly in Angular 9
+- From this release, Angular packages tagged with `ngcc` will be published and maintained to provide the latest features and fixes for Angular versions 11 and below. This changes has been made since providing the Ivy-compatible support for the Angular packages. To install Angular packages that are compatible with `ngcc`, run the `npm install @syncfusion/ej2-angular-grids@ngcc` command.
 
 ## 19.1.56 (2021-04-13)
 

components/base/README.md

@@ -84,5 +84,5 @@ Check the license detail [here](https://github.com/syncfusion/ej2-angular-ui-com
 
 Check the changelog [here](https://ej2.syncfusion.com/angular/documentation/release-notes?utm_source=npm&utm_campaign=ej2-angular-base)
 
-    © Copyright 2022 Syncfusion, Inc. All Rights Reserved.
+    © Copyright 2019 Syncfusion, Inc. All Rights Reserved.
     The Syncfusion Essential Studio license and copyright applies to this distribution.

components/base/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@syncfusion/ej2-angular-base",
-	"version": "20.1.48",
+	"version": "19.7.0",
 	"description": "A common package of Essential JS 2 base Angular libraries, methods and class definitions",
 	"author": "Syncfusion Inc.",
 	"license": "SEE LICENSE IN license",

components/base/src/complex-array-base.ts

@@ -44,14 +44,8 @@ export class ComplexBase<T> {
         let templateProperties: string[] = Object.keys(this);
         for(let i = 0; i < templateProperties.length; i++) {
             var tempProp = getValue(templateProperties[i], this);
-            if (typeof tempProp === 'object' && tempProp && tempProp.elementRef) {
-                if (!getValue(templateProperties[i].indexOf('Ref') !== -1 ? templateProperties[i] : templateProperties[i] + 'Ref', this)) {
-                    setValue(templateProperties[i].indexOf('Ref') !== -1 ? templateProperties[i] : templateProperties[i] + 'Ref', tempProp, this);
-                }
-                if (getValue("viewContainerRef", this) && !getValue("_viewContainerRef", tempProp.elementRef.nativeElement) && !getValue("propName", tempProp.elementRef.nativeElement)) {
-                    setValue("_viewContainerRef", getValue("viewContainerRef", this), tempProp.elementRef.nativeElement);
-                    setValue("propName", templateProperties[i].replace("Ref", ''), tempProp.elementRef.nativeElement);
-                }
+            if (typeof tempProp === 'object' && tempProp.elementRef && !getValue(templateProperties[i]+'Ref', this)){
+                setValue(templateProperties[i]+'Ref', tempProp, this);
             }
         }
         templateProperties = Object.keys(this)
@@ -70,7 +64,7 @@ export class ComplexBase<T> {
         if (this.directivePropList) {
         for (let k: number = 0; k < this.directivePropList.length; k++) {
             let dirPropName: string = this.directivePropList[k];
-            if (propList.indexOf(dirPropName) !== -1  && (getValue(dirPropName, this) === false || getValue(dirPropName, this))) {
+            if (propList.indexOf(dirPropName) !== -1  && getValue(dirPropName, this)) {
                 setValue(dirPropName, getValue(dirPropName, this), this.propCollection);
             }
         }
@@ -217,9 +211,8 @@ export class ArrayBase<T> {
                         this.list[i].propCollection.dataSource = this.list[i].dataSource;
                         this.list[i].hasChanges = true;
                     }
-                }
-                if (childrenDataSource[i].hasChanges) {
-                    isSourceChanged = true;
+                    isSourceChanged = (JSON.stringify(this.list[i].propCollection.dataSource) !==
+                        JSON.stringify(childrenDataSource[i].propCollection.dataSource));
                 }
             }
         }

components/base/src/component-base.ts

@@ -120,19 +120,6 @@ export class ComponentBase<T> {
         }
 
         let complexTemplates: string[] = Object.keys(tempOnThis);
-        for (let i = 0; i < complexTemplates.length; i++) { 
-            var compProp = getValue(complexTemplates[i], tempOnThis);
-            if (typeof compProp === 'object' && compProp && compProp.elementRef) {
-                if (typeof compProp === 'object' && compProp && compProp.elementRef && complexTemplates[i].indexOf('_') !== -1 && complexTemplates[i].indexOf('Ref') === -1) {
-                    setValue(complexTemplates[i] + 'Ref', compProp, tempOnThis);
-                }
-                if (tempOnThis.viewContainerRef && !getValue("_viewContainerRef", compProp.elementRef.nativeElement) && !getValue("propName", compProp.elementRef.nativeElement)) {
-                    setValue("_viewContainerRef", tempOnThis.viewContainerRef, compProp.elementRef.nativeElement);
-                    setValue("propName", complexTemplates[i].replace("Ref", ''), compProp.elementRef.nativeElement);
-                }
-            }
-        }
-        complexTemplates = Object.keys(tempOnThis);
         complexTemplates = complexTemplates.filter((val: string): boolean => {
             return /Ref$/i.test(val) && /\_/i.test(val);
         });
@@ -190,7 +177,7 @@ export class ComponentBase<T> {
         // Refer Link: https://github.com/angular/angular/issues/6005
         setTimeout(() => {
             /* istanbul ignore else  */
-            if (typeof window !== 'undefined' && tempAfterViewThis.element || tempAfterViewThis.getModuleName().includes('btn')) {
+            if (typeof window !== 'undefined' && document.body.contains(tempAfterViewThis.element)) {
                 tempAfterViewThis.appendTo(tempAfterViewThis.element);
                 tempAfterViewThis.ngEle.nativeElement.style.visibility = '';
             }
@@ -202,7 +189,7 @@ export class ComponentBase<T> {
         let tempOnDestroyThis: any = isTempRef || this;
         /* istanbul ignore else  */
         setTimeout(() => {
-            if (typeof window !== 'undefined' && (tempOnDestroyThis.element.classList.contains('e-control'))) {
+            if (typeof window !== 'undefined' && document.body.contains(tempOnDestroyThis.element) && tempOnDestroyThis.element.classList.contains('e-control')) {
                 tempOnDestroyThis.destroy();
                 tempOnDestroyThis.clearTemplate(null);
                 // removing bounded events and tagobjects from component after destroy
@@ -274,7 +261,7 @@ export class ComponentBase<T> {
                     tempAfterContentThis.setProperties(propObj, tagObject.instance.isInitChanges);
                 } else {
                     /* istanbul ignore next */
-                    if ((tempAfterContentThis[tagObject.name].length !== tagObject.instance.list.length) || (/diagram|tab/.test(tempAfterContentThis.getModuleName()))) {
+                    if ((tempAfterContentThis[tagObject.name].length !== tagObject.instance.list.length) || (tempAfterContentThis.getModuleName() === 'diagram')) {
                         tempAfterContentThis[tagObject.name] = tagObject.instance.list;
                     }
                     for (let list of tagObject.instance.list) {
@@ -284,7 +271,7 @@ export class ComponentBase<T> {
                         complexTemplates = complexTemplates.filter((val: string): boolean => {
                             return /Ref$/i.test(val);
                         });
-                        if (curChild.properties && Object.keys(curChild.properties).length !== 0){
+                        if (curChild.properties && Object.keys(curChild.properties).length !== 0 && /chart/.test(tempAfterContentThis.getModuleName())){
                             for (let complexPropName of complexTemplates) {
                                 complexPropName = complexPropName.replace(/Ref/, '');
                                 curChild.properties[complexPropName] = !curChild.properties[complexPropName] ?

components/base/src/form-base.ts

@@ -77,7 +77,7 @@ export class FormBase<T> implements ControlValueAccessor {
     public twoWaySetter(newVal: Object, prop: string): void {
         let oldVal: Object = this.oldValue || getValue(prop, this.properties);
         let ele: HTMLElement = this.inputElement || this.element;
-        if (ele && oldVal === newVal && this.value === newVal &&
+        if (ele && oldVal === newVal &&
             ((<HTMLInputElement>ele).value === undefined || (<HTMLInputElement>ele).value === '')) {
             return;
         }

components/base/src/template.ts

@@ -22,6 +22,7 @@ export function compile(templateEle: AngularElementType, helper?: Object):
             let conRef: ViewContainerRef = contRef ? contRef : component.viewContainerRef;
             let viewRef: EmbeddedViewRef<Object> = conRef.createEmbeddedView(templateEle as TemplateRef<Object>, context);
             viewRef.markForCheck();
+            viewRef.detectChanges();
             /* istanbul ignore next */
             let viewCollection: { [key: string]: EmbeddedViewRef<Object>[] } = (component && component.registeredTemplate) ?
                 component.registeredTemplate : getValue('currentInstance.registeredTemplate', conRef);
@@ -78,4 +79,4 @@ export interface AngularElementType {
 }
 
 //tslint:disable-next-line
-setTemplateEngine({ compile: (compile as any) });
+setTemplateEngine({ compile: (compile as any) });

components/buttons/CHANGELOG.md

@@ -2,13 +2,13 @@
 
 ## [Unreleased]
 
-## 20.1.50 (2022-04-19)
+## 20.2.36 (2022-06-30)
 
 ### Checkbox
 
 #### Bug Fixes
 
-- `F173431` - Issue with Checkbox validation state is incorrect issue has been resolved.
+- `F379986` - The issue with "Screen reader reads checkbox field twice for tab keypress" has been resolved.
 
 ## 19.2.47 (2021-07-13)
 

components/buttons/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@syncfusion/ej2-angular-buttons",
-	"version": "20.1.55",
+	"version": "20.2.36",
 	"description": "A package of feature-rich Essential JS 2 components such as Button, CheckBox, RadioButton and Switch. for Angular",
 	"author": "Syncfusion Inc.",
 	"license": "SEE LICENSE IN license",

components/calendars/CHANGELOG.md

@@ -2,28 +2,6 @@
 
 ## [Unreleased]
 
-## 20.1.58 (2022-05-31)
-
-### DatePicker
-
-#### Bug Fixes
-
-- `#F34697` - Issue with "able to clear the input value using clear button when component in readonly mode" has been resolved.
-
-## 20.1.57 (2022-05-24)
-
-### DateRangePicker
-
-#### Bug Fixes
-
-- `#I378357` - Issue with "tab key navigation is not working between calendars" has been resolved.
-
-### DateTimePicker
-
-#### Bug Fixes
-
-- `#I373889` - Issue with "navigated to year section after typing 0 in the month section" has been resolved.
-
 ## 19.3.46 (2021-10-19)
 
 ### TimePicker

components/calendars/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@syncfusion/ej2-angular-calendars",
-	"version": "20.1.58",
+	"version": "18.29.2",
 	"description": "A complete package of date or time components with built-in features such as date formatting, inline editing, multiple (range) selection, range restriction, month and year selection, strict mode, and globalization. for Angular",
 	"author": "Syncfusion Inc.",
 	"license": "SEE LICENSE IN license",

components/charts/CHANGELOG.md

@@ -2,7 +2,19 @@
 
 ## [Unreleased]
 
-## 20.1.60 (2022-06-14)
+## 20.2.36 (2022-06-30)
+
+### Chart
+
+#### New Features
+
+- `#I362746` - Provided keyboard navigation support for interactive elements on the chart.
+- `#I353728` - Provided highlight and select support for the range and point color mapping.
+
+- `#I362746` - Provided keyboard navigation support for interactive elements on the chart.
+- `#I353728` - Provided highlight and selection support for the range and point color mapping.
+
+## 20.1.59 (2022-06-07)
 
 ### Chart
 

components/charts/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@syncfusion/ej2-angular-charts",
-	"version": "20.1.57",
+	"version": "1.173.1",
 	"description": "Feature-rich chart control with built-in support for over 25 chart types, technical indictors, trendline, zooming, tooltip, selection, crosshair and trackball. for Angular",
 	"author": "Syncfusion Inc.",
 	"license": "SEE LICENSE IN license",

components/circulargauge/CHANGELOG.md

@@ -5,22 +5,6 @@
 
 ## [Unreleased]
 
-## 20.1.60 (2022-06-14)
-
-### Circular Gauge
-
-#### New Features
-
-- `#I365344` - Dash array can now be customized in the border of the Circular Gauge.
-
-## 19.4.43 (2022-01-18)
-
-### CircularGauge
-
-#### New Features
-
-- `cancel` argument is now available in the `resized` event to restrict the resize of the control when set as `true`.
-
 ## 19.3.53 (2021-11-12)
 
 ### CircularGauge

components/circulargauge/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@syncfusion/ej2-angular-circulargauge",
-	"version": "20.1.55",
+	"version": "16.40.5",
 	"description": "Essential JS 2 CircularGauge Components for Angular",
 	"author": "Syncfusion Inc.",
 	"license": "SEE LICENSE IN license",

components/diagrams/CHANGELOG.md

@@ -2,6 +2,30 @@
 
 ## [Unreleased]
 
+## 20.2.36 (2022-06-30)
+
+### Diagram
+
+#### Bug fixes
+
+- `#I382500` - Now, the BPMN shape is changed properly at runtime.
+- `#I382496` - BPMN gateway sub type is working properly while changing it during runtime.
+- `#I383411` - Now, fill color is applied properly when changing the BPMN event at runtime.
+
+#### Features
+
+- `#I362749` - Provided option to adjust the distance between the source node and the target node of the orthogonal connection has been added.
+- `#I347713` - Support to modify connector segments thumb icon shape and style has been added.
+- `#FB31535` - Support for splitting and joining connectors has been added.
+- `#I362796` - Support to highlight selected diagram elements on multiple selections has been added
+- `#I362829` - Support to limit the connector segments while draw at run time has been added.
+- `#I362755` - Support to edit multiple bezier segments with multiple control points has been added.
+
+#### Behaviour changes
+
+- In the Bezier connector, by default, the multiple segments will be created automatically if a user doesn't define segment collections in the application.
+- In the Bezier connector, based on segment count, multiple control points will be displayed to control the smoothness of the curve
+
 ## 20.1.60 (2022-06-14)
 
 ### Diagram

components/diagrams/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@syncfusion/ej2-angular-diagrams",
-	"version": "20.1.59",
+	"version": "19.8.0",
 	"description": "Feature-rich diagram control to create diagrams like flow charts, organizational charts, mind maps, and BPMN diagrams. Its rich feature set includes built-in shapes, editing, serializing, exporting, printing, overview, data binding, and automatic layouts. for Angular",
 	"author": "Syncfusion Inc.",
 	"license": "SEE LICENSE IN license",

components/diagrams/src/diagram/connectors.directive.ts

@@ -4,7 +4,7 @@ import { ComplexBase, ArrayBase, setValue } from '@syncfusion/ej2-angular-base';
 import { ConnectorFixedUserHandlesDirective } from './connector-fixeduserhandle.directive';
 import { ConnectorAnnotationsDirective } from './connector-annotation.directive';
 
-let input: string[] = ['addInfo', 'annotations', 'bridgeSpace', 'connectionPadding', 'constraints', 'cornerRadius', 'dragSize', 'excludeFromLayout', 'fixedUserHandles', 'flip', 'flipMode', 'hitPadding', 'id', 'margin', 'previewSize', 'segments', 'shape', 'sourceDecorator', 'sourceID', 'sourcePadding', 'sourcePoint', 'sourcePortID', 'style', 'symbolInfo', 'targetDecorator', 'targetID', 'targetPadding', 'targetPoint', 'targetPortID', 'tooltip', 'type', 'visible', 'wrapper', 'zIndex'];
+let input: string[] = ['addInfo', 'annotations', 'bezierSettings', 'bridgeSpace', 'connectionPadding', 'connectorSpacing', 'constraints', 'cornerRadius', 'dragSize', 'excludeFromLayout', 'fixedUserHandles', 'flip', 'flipMode', 'hitPadding', 'id', 'margin', 'maxSegmentThumb', 'previewSize', 'segments', 'shape', 'sourceDecorator', 'sourceID', 'sourcePadding', 'sourcePoint', 'sourcePortID', 'style', 'symbolInfo', 'targetDecorator', 'targetID', 'targetPadding', 'targetPoint', 'targetPortID', 'tooltip', 'type', 'visible', 'wrapper', 'zIndex'];
 let outputs: string[] = [];
 /**
  * Connectors Directive
@@ -48,6 +48,11 @@ export class ConnectorDirective extends ComplexBase<ConnectorDirective> {
      * 
      */
     public annotations: any;
+    /** 
+     * Sets the bezier settings of editing the segments.
+     * @default null
+     */
+    public bezierSettings: any;
     /** 
      * Defines the bridgeSpace of connector
      * @default 10
@@ -58,6 +63,11 @@ export class ConnectorDirective extends ComplexBase<ConnectorDirective> {
      * @default 0
      */
     public connectionPadding: any;
+    /** 
+     * Sets the distance between source node and connector
+     * @default 13
+     */
+    public connectorSpacing: any;
     /** 
      * Defines the constraints of connector 
      * * None - Interaction of the connectors cannot be done. 
@@ -128,6 +138,11 @@ export class ConnectorDirective extends ComplexBase<ConnectorDirective> {
      * @default {}
      */
     public margin: any;
+    /** 
+     * Sets the maximum segment thumb for the connector
+     * @default null
+     */
+    public maxSegmentThumb: any;
     /** 
      * Defines the size of the symbol preview
      * @aspdefaultvalueignore 

components/diagrams/src/diagram/diagram.component.ts

@@ -7,7 +7,7 @@ import { CustomCursorsDirective } from './customcursor.directive';
 import { ConnectorsDirective } from './connectors.directive';
 import { NodesDirective } from './nodes.directive';
 
-export const inputs: string[] = ['addInfo','annotationTemplate','backgroundColor','bridgeDirection','commandManager','connectorDefaults','connectors','constraints','contextMenuSettings','customCursor','dataSourceSettings','diagramSettings','drawingObject','enablePersistence','enableRtl','getConnectorDefaults','getCustomCursor','getCustomProperty','getCustomTool','getDescription','getNodeDefaults','height','historyManager','layers','layout','locale','mode','nodeDefaults','nodeTemplate','nodes','pageSettings','rulerSettings','scrollSettings','selectedItems','serializationSettings','setNodeTemplate','snapSettings','tool','tooltip','updateSelection','userHandleTemplate','width'];
+export const inputs: string[] = ['addInfo','annotationTemplate','backgroundColor','bridgeDirection','commandManager','connectorDefaults','connectors','constraints','contextMenuSettings','customCursor','dataSourceSettings','diagramSettings','drawingObject','enableConnectorSplit','enablePersistence','enableRtl','getConnectorDefaults','getCustomCursor','getCustomProperty','getCustomTool','getDescription','getNodeDefaults','height','historyManager','layers','layout','locale','mode','nodeDefaults','nodeTemplate','nodes','pageSettings','rulerSettings','scrollSettings','segmentThumbShape','selectedItems','serializationSettings','setNodeTemplate','snapSettings','tool','tooltip','updateSelection','userHandleTemplate','width'];
 export const outputs: string[] = ['animationComplete','click','collectionChange','commandExecute','connectionChange','contextMenuBeforeItemRender','contextMenuClick','contextMenuOpen','created','dataLoaded','doubleClick','dragEnter','dragLeave','dragOver','drop','expandStateChange','fixedUserHandleClick','historyChange','historyStateChange','keyDown','keyUp','mouseEnter','mouseLeave','mouseOver','onImageLoad','onUserHandleMouseDown','onUserHandleMouseEnter','onUserHandleMouseLeave','onUserHandleMouseUp','positionChange','propertyChange','rotateChange','scrollChange','segmentCollectionChange','selectionChange','sizeChange','sourcePointChange','targetPointChange','textEdit'];
 export const twoWays: string[] = [''];