v20.2.36 is released

Author: pipeline

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