Merge branch 'master' into master

components/barcodegenerator/styles/barcode/material3-dark.scss

@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/definition/material3-dark.scss';
+@import 'ej2-barcode-generator/styles/barcode/material3-dark.scss';

components/barcodegenerator/styles/barcode/material3.scss

@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/definition/material3.scss';
+@import 'ej2-barcode-generator/styles/barcode/material3.scss';

components/barcodegenerator/styles/material3-dark.scss

@@ -0,0 +1,2 @@
+
+@import 'barcode/material3-dark.scss';

components/barcodegenerator/styles/material3.scss

@@ -0,0 +1,2 @@
+
+@import 'barcode/material3.scss';

components/base/CHANGELOG.md

@@ -2,13 +2,16 @@
 
 ## [Unreleased]
 
-## 22.2.5 (2023-07-27)
+## 23.1.36 (2023-09-15)
 
 ### Common
 
 #### Bug Fixes
 
-- `#I473940` - DropdownList Item Template not initially rendered for `OnPush` strategy.
+- `#I486549` - Provided `clearTemplates` support for `Accordion` Component.
+- `#F45098` - Resolved the `Complex Directives` property changes not being applied properly.
+- `#I496453` - Resolved the `Template` binding not working properly in Form Base.
+- `#I473932` - Resolved the `Angular Form` states not working properly for the `OnPush` strategy.
 
 ## 22.1.34 (2023-06-21)
 

components/base/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@syncfusion/ej2-angular-base",
-	"version": "22.2.5",
+	"version": "23.1.36",
 	"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/releasenotes/README.md

@@ -0,0 +1,183 @@
+# Release Notes Guidelines
+
+This section contains guidelines on naming files, sections and other document elements.
+
+> **If there is no changes in product, you don't need to mention that in Release Notes.**
+
+## Encoding Format
+
+All Release Notes files should be saved in **Encoding in UTF-8 (Without BOM)** format. You can use Notepad++ to verify the encoding.
+
+![Encoding.png](https://bitbucket.org/repo/j57Gz9/images/2199960455-Encoding.png)
+
+## Release Notes Folder Hierarchy
+
+* Platform [Folder]
+* ----ReleaseNotes [Folder]
+* --------v13.3.x.x [Folder]
+* ------------Control1.md
+* ------------Control2.md
+* ------------Control3.md
+* --------v13.4.x.x [Folder]
+* ------------Control1.md
+* ------------Control2.md
+* ------------Control3.md
+
+### How to write Release Notes?
+
+* Each release markdown files should reside under corresponding version folder in their platform.
+* Each product release notes should be created in separate file name.
+* File name should be same as the product name. 
+
+> **NOTE**: Please do not add any Front Matter information in Release Notes files.
+
+## Markdown File Structure
+
+Each markdown file should have following items.
+
+* Control Name
+* Features
+* Bug fixes
+* Braking Changes
+* Known Issues
+
+> Do not add any front matter(triple dashed line) in this markdown.
+
+### Control Name
+
+Control Name should be with prefix `##`. This will be rendered as `H2` in html file. 
+
+#### Syntax
+
+```
+## <Control-Name>
+```
+
+#### Example
+
+```
+## ejAccrodion
+```
+
+### Features
+
+* Each features should be written in unordered list. 
+* Feature header should have id in the following format `<control-name>-features`. All characters in **id should be written in lower case.**
+
+#### Syntax
+
+```
+### Features
+{:#<control-name>-features}
+
+* \#1 - Feature Info
+* \#2 - Feature Info
+* \#3 - Feature Info
+```
+
+#### Example
+
+```
+### Features
+{:#ejaccordion-features}
+
+* \#140303 - Accordion provides option to add new items dynamically by using the `addItem` method
+* \#140303 - Accordion provides option to add new items dynamically by using the `addItem` method
+* \#140303, \#140304 - Accordion provides option to add new items dynamically by using the `addItem` method
+```
+
+> **NOTE:** 
+> * In markdown `#` used to represent headers. 
+> * By default it will be converted as HTML headers. 
+> * To display the `#` in html, please use escape sequences [See above example].
+
+### Bug Fixes
+
+* Each bug fix should be written in unordered list. 
+* Bug fixes header should have id in the following format `<control-name>-bug-fixes`. All characters in **id should be written in lower case.**
+
+#### Syntax
+
+```
+### Bug fixes
+{:#<control-name-in-lower-case>-bug-fixes}
+
+* \#1 - Bug Fix
+* \#2 - Bug Fix
+* \#3 - Bug Fix
+```
+
+#### Example
+
+```
+### Bug Fixes
+{:#ejaccordion-bug-fixes}
+
+* \#140303 - Accordion provides option to add new items dynamically by using the `addItem` method
+* \#140303 - Accordion provides option to add new items dynamically by using the `addItem` method
+* \#140303, \#140304 - Accordion provides option to add new items dynamically by using the `addItem` method
+```
+
+> **NOTE:** 
+> * In markdown `#` used to represent headers. 
+> * By default it will be converted as HTML headers. 
+> * To display the `#` in html, please use escape sequences [See above example].
+
+### Breaking Changes
+
+* Each breaking changes should be written in unordered list.
+* Breaking changes header should have id in the following format `<control-name>-breaking-changes`. All characters in **id should be written in lower case.**
+
+```
+### Breaking Changes
+{:#<control-name>-breaking-changes}
+
+* * Breaking Change 1
+* * Breaking Change 2
+* * Breaking Change 3
+```
+
+#### Example
+
+```
+### Breaking Changes
+{:#ejaccordion-breaking-changes}
+
+* Now, Circular series end angle will not be adjusted based on the start angle, so the output will be like semi-circle instead of full circle. In order to render the complete circular series with customized start angle, you have to add the start angle value to end angle property now. This break will occur only if you have specified startAngle already 
+```
+
+> **NOTE:** 
+> * In markdown `#` used to represent headers. 
+> * By default it will be converted as HTML headers. 
+> * To display the `#` in html, please use escape sequences [See above example].
+
+## Incidents and Forums in Release notes
+
+We can represent the Incident ID with I and F for forums in release notes MD files 
+
+#### Example 
+
+
+```
+## ChromelessWindow
+
+### Bug Fixes
+{:#chromelesswindow-bug-fixes}
+
+* \#I336220 - When using `ShowDialog` on a `RibbonWindow`, a `NullReferenceException` will no longer occur.
+* \#F166385 - The gap between the bottom of the window and the `TaskBar` is now properly maintained.
+
+```
+
+This is published in the page : https://help.syncfusion.com/wpf/release-notes/v19.3.0.43?type=all#chromelesswindow
+
+
+## Commit
+
+Same workflow for User Guide applicable to this repository. All the changes needs to be committed in `development` branch.
+
+## Preview Changes
+
+All the changes will be included with User Guide automation and published in Staging Documentation machine.
+
+<http://115.249.201.211:9090>

components/base/src/component-base.ts

@@ -311,7 +311,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|DashboardLayout/.test(tempAfterContentThis.getModuleName()))) {
+                    if ((tempAfterContentThis[tagObject.name].length !== tagObject.instance.list.length) || (/diagram|DashboardLayout/.test(tempAfterContentThis.getModuleName()))) {
                         tempAfterContentThis[tagObject.name] = tagObject.instance.list;
                     }
                     for (let list of tagObject.instance.list) {

components/base/src/form-base.ts

@@ -1,4 +1,4 @@
-import { EventEmitter, ElementRef } from '@angular/core';
+import { EventEmitter, ElementRef, ChangeDetectorRef } from '@angular/core';
 import { getValue, setValue, isNullOrUndefined, isObject } from '@syncfusion/ej2-base';
 import { ControlValueAccessor } from '@angular/forms';
 /**
@@ -30,6 +30,7 @@ export class FormBase<T> implements ControlValueAccessor {
     public preventChange: boolean;
     public isUpdated: boolean;
     public oldValue: any;
+    public cdr: ChangeDetectorRef;
 
     public localChange(e: { value?: T, checked?: T }): void {
         //tslint:disable-next-line
@@ -61,6 +62,7 @@ export class FormBase<T> implements ControlValueAccessor {
                 }
             }
         }
+        this.cdr.markForCheck();
     }
 
     public properties: Object;
@@ -131,6 +133,7 @@ export class FormBase<T> implements ControlValueAccessor {
         // When binding Html textbox value to syncfusion textbox, change event triggered dynamically.
         // To prevent change event, trigger change in component side based on `preventChange` value
         this.preventChange = this.isFormInit ? false : true;
+        this.cdr.markForCheck();
         if (value === null) {
             return;
         }
@@ -142,6 +145,7 @@ export class FormBase<T> implements ControlValueAccessor {
         if (this.skipFromEvent !== true) {
             this.focus.emit(e);
         }
+        this.cdr.markForCheck();
     }
 
     public ngOnBlur(e: Event): void {
@@ -150,5 +154,6 @@ export class FormBase<T> implements ControlValueAccessor {
         if (this.skipFromEvent !== true) {
             this.blur.emit(e);
         }
+        this.cdr.markForCheck();
     }
 }

components/base/src/template.ts

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

components/base/src/util.ts

@@ -53,12 +53,12 @@ export function clearTemplate(_this: any, templateNames?: string[], index?: any)
             (val: string) => {
                 return (/\./g.test(val) ? false : true);
             });
-        let tabTemp: boolean = _this.getModuleName() === 'tab';
+        let tabaccordionTemp: boolean = /tab|accordion|toolbar/.test(_this.getModuleName());
         for (let registeredTemplate of (regProperties && regProperties || regTemplates)) {
             /* istanbul ignore next */
             if (index && index.length) {
                 for (let e = 0; e < index.length; e++) {
-                    if (tabTemp) {
+                    if (tabaccordionTemp) {
                         for (let m = 0; m < _this.registeredTemplate[registeredTemplate].length; m++) {
                             let value = _this.registeredTemplate[registeredTemplate][m];
                             if (value && value === index[e]) {
@@ -93,7 +93,7 @@ export function clearTemplate(_this: any, templateNames?: string[], index?: any)
                     }
                 }
             }
-            if (!tabTemp || !index) {
+            if (!tabaccordionTemp || !index) {
                 delete _this.registeredTemplate[registeredTemplate];
             }
         }

components/base/styles/bootstrap-dark.scss

@@ -1 +1 @@
-@import 'ej2-base/styles/bootstrap-dark-definition.scss';
+@import 'ej2-base/styles/definition/bootstrap-dark.scss';

components/base/styles/bootstrap.scss

@@ -1 +1 @@
-@import 'ej2-base/styles/bootstrap-definition.scss';
+@import 'ej2-base/styles/definition/bootstrap.scss';

components/base/styles/bootstrap4.scss

@@ -1 +1 @@
-@import 'ej2-base/styles/bootstrap4-definition.scss';
+@import 'ej2-base/styles/definition/bootstrap4.scss';

components/base/styles/bootstrap5-dark.scss

@@ -1 +1 @@
-@import 'ej2-base/styles/bootstrap5-dark-definition.scss';
+@import 'ej2-base/styles/definition/bootstrap5-dark.scss';

components/base/styles/bootstrap5.scss

@@ -1 +1 @@
-@import 'ej2-base/styles/bootstrap5-definition.scss';
+@import 'ej2-base/styles/definition/bootstrap5.scss';

components/base/styles/fabric-dark.scss

@@ -1 +1 @@
-@import 'ej2-base/styles/fabric-dark-definition.scss';
+@import 'ej2-base/styles/definition/fabric-dark.scss';

components/base/styles/fabric.scss

@@ -1 +1 @@
-@import 'ej2-base/styles/fabric-definition.scss';
+@import 'ej2-base/styles/definition/fabric.scss';

components/base/styles/fluent-dark.scss

@@ -1 +1 @@
-@import 'ej2-base/styles/fluent-dark-definition.scss';
+@import 'ej2-base/styles/definition/fluent-dark.scss';

components/base/styles/fluent.scss

@@ -1 +1 @@
-@import 'ej2-base/styles/fluent-definition.scss';
+@import 'ej2-base/styles/definition/fluent.scss';

components/base/styles/highcontrast-light.scss

@@ -1 +1 @@
-@import 'ej2-base/styles/highcontrast-light-definition.scss';
+@import 'ej2-base/styles/definition/highcontrast-light.scss';

components/base/styles/highcontrast.scss

@@ -1 +1 @@
-@import 'ej2-base/styles/highcontrast-definition.scss';
+@import 'ej2-base/styles/definition/highcontrast.scss';

components/base/styles/material-dark.scss

@@ -1 +1 @@
-@import 'ej2-base/styles/material-dark-definition.scss';
+@import 'ej2-base/styles/definition/material-dark.scss';

components/base/styles/material.scss

@@ -1 +1 @@
-@import 'ej2-base/styles/material-definition.scss';
+@import 'ej2-base/styles/definition/material.scss';

components/base/styles/material3-dark.scss

@@ -1 +1 @@
-@import 'ej2-base/styles/material3-dark-definition.scss';
+@import 'ej2-base/styles/definition/material3-dark.scss';

components/base/styles/material3.scss

@@ -1 +1 @@
-@import 'ej2-base/styles/material3-definition.scss';
+@import 'ej2-base/styles/definition/material3.scss';

components/base/styles/tailwind-dark.scss

@@ -1 +1 @@
-@import 'ej2-base/styles/tailwind-dark-definition.scss';
+@import 'ej2-base/styles/definition/tailwind-dark.scss';

components/base/styles/tailwind.scss

@@ -1 +1 @@
-@import 'ej2-base/styles/tailwind-definition.scss';
+@import 'ej2-base/styles/definition/tailwind.scss';

components/buttons/CHANGELOG.md

@@ -2,139 +2,13 @@
 
 ## [Unreleased]
 
-## 22.2.9 (2023-08-15)
+## 23.1.36 (2023-09-15)
 
 ### Checkbox
 
 #### Bug Fixes
 
-- `#I488474` - The issue with "Hovering the checkbox checked items of checkbox is unchecked while using RTL mode" in Bigger mode has been resolved.
-
-## 22.2.8 (2023-08-08)
-
-### Checkbox
-
-#### Bug Fixes
-
-- `#I488474` - The issue with "Hovering the checkbox checked items of checkbox is unchecked while using RTL mode" has been resolved.
-
-## 22.2.5 (2023-07-27)
-
-### Checkbox
-
-#### Bug Fixes
-
-- `#I483250` - The issue with "CheckBox not working in IE 11" has been resolved.
-
-## 22.1.39 (2023-07-18)
-
-### Speed Dial
-
-#### Bug Fixes
-
-- `#I478092` - Enhanced the component's functionality, by introducing the `isPrimary` property to specify whether it is a primary button or not.
-
-## 22.1.38 (2023-07-11)
-
-### Switch
-
-#### Bug Fixes
-
-- `#I478637` - The issue with "Change event trigger twice for key down action of switch component" has been resolved.
-
-### Checkbox
-
-- Resolved checkbox wrapper width issue.
-
-## 21.2.10 (2023-06-13)
-
-### RadioButton
-
-#### Bug Fixes
-
-- `#F182133` - The issue with "Correcting Ripple element is not destroyed properly while clicking on radio button component" has been resolved.
-
-## 21.2.6 (2023-05-23)
-
-### RadioButton
-
-#### Bug Fixes
-
-- `#I463728` - The issue with "Provide the boolean value support for radio button while using the v-model property in VUE platform" has been resolved.
-
-## 21.2.5 (2023-05-16)
-
-### RadioButton
-
-#### Bug Fixes
-
-- `#F182133` - The issue with "Ripple element is not destroyed properly while clicking on radio button component" has been resolved.
-
-## 21.2.3 (2023-05-03)
-
-### Switch
-
-#### Bug Fixes
-
-- `#I456259` - provided the `role` attribute support to `htmlAttributes` property of switch component.
-
-## 21.1.37 (2023-03-29)
-
-### Checkbox
-
-#### Bug Fixes
-
-- `#I436942` - The issue with "Validation rule not display properly when we use Checkbox within form validator" has been resolved.
-
-## 21.1.35 (2023-03-23)
-
-### Checkbox
-
-#### Bug Fixes
-
-- `#I427235` - The issue `cssClass` property not updated properly while string with a white space in the end of the property in checkbox has been fixed.
-
-### Chip
-
-#### New Features
-
-- `#I422263` - The Chip component now supports htmlAttributes, which enables users to add required attributes such as 'aria-label', 'title', 'class', and more to the Chip item.
-
-### RadioButton
-
-#### Bug Fixes
-
-- `#F40707` - Value change event triggered twice in Radio Button component has been fixed.
-
-### Switch
-
-#### Bug Fixes
-
-- `#I427994` - Provided the `htmlAttributes` support to the switch component.
-
-## 20.3.47 (2022-10-11)
-
-### Floating Action Button `Preview`
-
-The Floating Action Button (FAB) component performs the primary action that appears in front of all screen contents. It can be positioned in relation to a page or a target container.
-
-
-- **Rendering** - The FAB component can be rendered as Icon only, Icon with Label, Label only, or in a disabled state.
-- **Positioning** - Supports to place various built-in positions on the target element.
-- **Styles** - The appearance of the FAB can be customized using predefined styles.
-- **Accessibility** - The FAB provides built-in compliance with the `WAI-ARIA` specifications and it is achieved through attributes.
-
-### Speed Dial `Preview`
-
-The Speed Dial component is an extension of the floating action button that displays a list of action buttons when clicked. It is useful when there is more than one primary action for the page.
-
-
-- **Rendering** - The Speed Dial component can be rendered in two display modes: Linear and Radial.
-- **Positioning** - Supports to place various built-in positions on the target element.
-- **Styles** - The appearance of the Speed Dial can be customized using predefined styles.
-- **Template Support** - The Speed Dial component action items and popup container can also be rendered with custom templates.
-- **Modal Support** - Supports showing a modal overlay behind the Speed Dial.
-- **Accessibility** - The Speed Dial provides built-in compliance with the `WAI-ARIA` specifications and it is achieved through attributes.
+- `#I399484` - The issue with aria-checked accessibility issue in angular checkbox has been fixed.
 
 ### Switch
 
@@ -142,11 +16,17 @@ The Speed Dial component is an extension of the floating action button that disp
 
 - `#I382543` - The issue with "Checkbox value not update properly while using edit template of grid" has been resolved.
 
-### Checkbox
+### Chip
+
+#### New Features
+
+- `#I422263` - Provided the htmlAttributes support for the Chip component.
+
+### RadioButton
 
 #### Bug Fixes
 
-- `#I399484` - The issue with aria-checked accessibility issue in angular checkbox has been fixed.
+- `#F40707` - Value change event triggered twice in Radio Button component has been fixed.
 
 ## 19.2.47 (2021-07-13)
 
@@ -533,14 +413,6 @@ RadioButton is a graphical user interface element that allows to select one opti
 - **Sizes** - Provided with different sizes of RadioButton.
 
 
-## 21.1.36 (2023-06-28)
-
-### Chip
-
-#### New Features
-
-- `#I422263` - Provided the htmlAttributes support for the Chip component.
-
 ## 17.1.38 (2019-03-29)
 
 ### RadioButton

components/buttons/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@syncfusion/ej2-angular-buttons",
-	"version": "22.2.9",
+	"version": "18.64.0",
 	"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/buttons/src/check-box/checkbox.component.ts

@@ -1,4 +1,4 @@
-import { Component, ElementRef, ViewContainerRef, ValueProvider, Renderer2, Injector, ChangeDetectionStrategy, forwardRef } from '@angular/core';
+import { Component, ElementRef, ViewContainerRef, ValueProvider, Renderer2, Injector, ChangeDetectionStrategy, ChangeDetectorRef, forwardRef } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { ComponentBase, IComponentBase, applyMixins, ComponentMixins, PropertyCollectionInfo, FormBase, setValue } from '@syncfusion/ej2-angular-base';
 import { CheckBox } from '@syncfusion/ej2-buttons';
@@ -46,7 +46,7 @@ export class CheckBoxComponent extends CheckBox implements IComponentBase {
 
     public focus: any;
     public blur: any;
-    constructor(private ngEle: ElementRef, private srenderer: Renderer2, private viewContainerRef:ViewContainerRef, private injector: Injector) {
+    constructor(private ngEle: ElementRef, private srenderer: Renderer2, private viewContainerRef:ViewContainerRef, private injector: Injector, private cdr: ChangeDetectorRef) {
         super();
         this.element = this.ngEle.nativeElement;
         this.injectedModules = this.injectedModules || [];

components/buttons/src/radio-button/radiobutton.component.ts

@@ -1,4 +1,4 @@
-import { Component, ElementRef, ViewContainerRef, ValueProvider, Renderer2, Injector, ChangeDetectionStrategy, forwardRef } from '@angular/core';
+import { Component, ElementRef, ViewContainerRef, ValueProvider, Renderer2, Injector, ChangeDetectionStrategy, ChangeDetectorRef, forwardRef } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { ComponentBase, IComponentBase, applyMixins, ComponentMixins, PropertyCollectionInfo, FormBase, setValue } from '@syncfusion/ej2-angular-base';
 import { RadioButton } from '@syncfusion/ej2-buttons';
@@ -45,7 +45,7 @@ export class RadioButtonComponent extends RadioButton implements IComponentBase
 
     public focus: any;
     public blur: any;
-    constructor(private ngEle: ElementRef, private srenderer: Renderer2, private viewContainerRef:ViewContainerRef, private injector: Injector) {
+    constructor(private ngEle: ElementRef, private srenderer: Renderer2, private viewContainerRef:ViewContainerRef, private injector: Injector, private cdr: ChangeDetectorRef) {
         super();
         this.element = this.ngEle.nativeElement;
         this.injectedModules = this.injectedModules || [];

components/buttons/src/speed-dial/speeddial.component.ts

@@ -42,6 +42,9 @@ export class SpeedDialComponent extends SpeedDial implements IComponentBase {
      * Defines the template content for the speed dial item. 
      * {% codeBlock src='speeddial/itemTemplate/index.md' %}{% endcodeBlock %}
      * @default ''
+     * @angulartype string | object
+     * @reacttype string | function | JSX.Element
+     * @vuetype string | function
      * @asptype string
      */
     @ContentChild('itemTemplate')
@@ -50,6 +53,9 @@ export class SpeedDialComponent extends SpeedDial implements IComponentBase {
     /** 
      * Defines a template content for popup of SpeedDial.
      * @default ''
+     * @angulartype string | object
+     * @reacttype string | function | JSX.Element
+     * @vuetype string | function
      * @asptype string
      */
     @ContentChild('popupTemplate')

components/buttons/src/switch/switch.component.ts

@@ -1,4 +1,4 @@
-import { Component, ElementRef, ViewContainerRef, ValueProvider, Renderer2, Injector, ChangeDetectionStrategy, forwardRef } from '@angular/core';
+import { Component, ElementRef, ViewContainerRef, ValueProvider, Renderer2, Injector, ChangeDetectionStrategy, ChangeDetectorRef, forwardRef } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { ComponentBase, IComponentBase, applyMixins, ComponentMixins, PropertyCollectionInfo, FormBase, setValue } from '@syncfusion/ej2-angular-base';
 import { Switch } from '@syncfusion/ej2-buttons';
@@ -45,7 +45,7 @@ export class SwitchComponent extends Switch implements IComponentBase {
 
     public focus: any;
     public blur: any;
-    constructor(private ngEle: ElementRef, private srenderer: Renderer2, private viewContainerRef:ViewContainerRef, private injector: Injector) {
+    constructor(private ngEle: ElementRef, private srenderer: Renderer2, private viewContainerRef:ViewContainerRef, private injector: Injector, private cdr: ChangeDetectorRef) {
         super();
         this.element = this.ngEle.nativeElement;
         this.injectedModules = this.injectedModules || [];

components/buttons/styles/button/material3-dark.scss

@@ -1,2 +1,2 @@
-@import 'ej2-base/styles/material3-dark-definition.scss';
+@import 'ej2-base/styles/definition/material3-dark.scss';
 @import 'ej2-buttons/styles/button/material3-dark.scss';

components/buttons/styles/button/material3.scss

@@ -1,2 +1,2 @@
-@import 'ej2-base/styles/material3-definition.scss';
+@import 'ej2-base/styles/definition/material3.scss';
 @import 'ej2-buttons/styles/button/material3.scss';

components/buttons/styles/check-box/material3-dark.scss

@@ -1,2 +1,2 @@
-@import 'ej2-base/styles/material3-dark-definition.scss';
+@import 'ej2-base/styles/definition/material3-dark.scss';
 @import 'ej2-buttons/styles/check-box/material3-dark.scss';

components/buttons/styles/check-box/material3.scss

@@ -1,2 +1,2 @@
-@import 'ej2-base/styles/material3-definition.scss';
+@import 'ej2-base/styles/definition/material3.scss';
 @import 'ej2-buttons/styles/check-box/material3.scss';

components/buttons/styles/chips/material3-dark.scss

@@ -1,2 +1,2 @@
-@import 'ej2-base/styles/material3-dark-definition.scss';
+@import 'ej2-base/styles/definition/material3-dark.scss';
 @import 'ej2-buttons/styles/chips/material3-dark.scss';

components/buttons/styles/chips/material3.scss

@@ -1,2 +1,2 @@
-@import 'ej2-base/styles/material3-definition.scss';
+@import 'ej2-base/styles/definition/material3.scss';
 @import 'ej2-buttons/styles/chips/material3.scss';

components/buttons/styles/floating-action-button/material3-dark.scss

@@ -1,2 +1,2 @@
-@import 'ej2-base/styles/material3-dark-definition.scss';
+@import 'ej2-base/styles/definition/material3-dark.scss';
 @import 'ej2-buttons/styles/floating-action-button/material3-dark.scss';

components/buttons/styles/floating-action-button/material3.scss

@@ -1,2 +1,2 @@
-@import 'ej2-base/styles/material3-definition.scss';
+@import 'ej2-base/styles/definition/material3.scss';
 @import 'ej2-buttons/styles/floating-action-button/material3.scss';

components/buttons/styles/radio-button/material3-dark.scss

@@ -1,2 +1,2 @@
-@import 'ej2-base/styles/material3-dark-definition.scss';
+@import 'ej2-base/styles/definition/material3-dark.scss';
 @import 'ej2-buttons/styles/radio-button/material3-dark.scss';

components/buttons/styles/radio-button/material3.scss

@@ -1,2 +1,2 @@
-@import 'ej2-base/styles/material3-definition.scss';
+@import 'ej2-base/styles/definition/material3.scss';
 @import 'ej2-buttons/styles/radio-button/material3.scss';

components/buttons/styles/speed-dial/material3-dark.scss

@@ -1,2 +1,2 @@
-@import 'ej2-base/styles/material3-dark-definition.scss';
+@import 'ej2-base/styles/definition/material3-dark.scss';
 @import 'ej2-buttons/styles/speed-dial/material3-dark.scss';

components/buttons/styles/speed-dial/material3.scss

@@ -1,2 +1,2 @@
-@import 'ej2-base/styles/material3-definition.scss';
+@import 'ej2-base/styles/definition/material3.scss';
 @import 'ej2-buttons/styles/speed-dial/material3.scss';

components/buttons/styles/switch/material3-dark.scss

@@ -1,2 +1,2 @@
-@import 'ej2-base/styles/material3-dark-definition.scss';
+@import 'ej2-base/styles/definition/material3-dark.scss';
 @import 'ej2-buttons/styles/switch/material3-dark.scss';

components/buttons/styles/switch/material3.scss

@@ -1,2 +1,2 @@
-@import 'ej2-base/styles/material3-definition.scss';
+@import 'ej2-base/styles/definition/material3.scss';
 @import 'ej2-buttons/styles/switch/material3.scss';

components/calendars/CHANGELOG.md

@@ -2,58 +2,6 @@
 
 ## [Unreleased]
 
-## 22.2.11 (2023-08-29)
-
-### DateRangePicker
-
-#### Bug Fixes
-
-- `#I492075` -  Fixed an issue where the popup in the DateRangePicker Component would not close when clicking outside the component while using the Preset Ranges feature.
-
-## 22.2.10 (2023-08-22)
-
-### DateRangePicker
-
-#### Bug Fixes
-
-- `#I489129` -  Fixed an issue where the Daterangepicker popup was not opening properly on iPad devices.
-
-## 22.2.9 (2023-08-15)
-
-### DateRangePicker
-
-#### Bug Fixes
-
-- `#I486181` - Fixed an issue where the DateRangePicker popup was not opening when there was not enough space in the window.
-
-## 22.2.8 (2023-08-08)
-
-### TimePicker
-
-#### Features
-
-- `#I480992` - Added support for configuring server time zone settings to the component. The `serverTimezoneOffset` property can now be used to set the pre-bound value based on the time zone provided to the component.
-
-## 21.1.34 (2023-06-21)
-
-### DatePicker
-
-#### Features
-
-- Added support for full screen calendar in mobile mode with landscape and portrait orientations. Enable the feature by setting fullScreenMode property to true.
-
-### DateRangePicker
-
-#### Features
-
-- Added support for full screen calendar in mobile mode with landscape and portrait orientations. Enable the feature by setting fullScreenMode property to true.
-
-### DateTimePicker
-
-#### Features
-
-- Added support for full screen calendar in mobile mode with landscape and portrait orientations. Enable the feature by setting fullScreenMode property to true.
-
 ## 19.3.46 (2021-10-19)
 
 ### TimePicker
@@ -1269,20 +1217,6 @@ TimePicker component is the pre-filled dropdown list with the time values 12/24
 - **Accessibility** - Provided with built-in accessibility support which helps to access all the TimePicker component features through the keyboard, screen readers, or other assistive technology devices.
 
 
-## 22.1.38 (2023-07-11)
-
-### DatePicker
-
-#### Bug Fixes
-
-- `#I476762` - Resolved the issue with "classes e-filled and e-outline not working for mobile when fullScreenMode is enabled"
-
-### DateTimePicker
-
-#### Bug Fixes
-
-- `#I476762` - Resolved the issue with "classes e-filled and e-outline not working for mobile when fullScreenMode is enabled"
-
 ## 19.3.56 (2021-12-02)
 
 ### TimePicker

components/calendars/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@syncfusion/ej2-angular-calendars",
-	"version": "22.2.10",
+	"version": "18.30.19",
 	"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/calendars/src/calendar/calendar.component.ts

@@ -1,4 +1,4 @@
-import { Component, ElementRef, ViewContainerRef, ValueProvider, Renderer2, Injector, ChangeDetectionStrategy, forwardRef } from '@angular/core';
+import { Component, ElementRef, ViewContainerRef, ValueProvider, Renderer2, Injector, ChangeDetectionStrategy, ChangeDetectorRef, forwardRef } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { ComponentBase, IComponentBase, applyMixins, ComponentMixins, PropertyCollectionInfo, FormBase, setValue } from '@syncfusion/ej2-angular-base';
 import { Calendar } from '@syncfusion/ej2-calendars';
@@ -49,7 +49,7 @@ export class CalendarComponent extends Calendar implements IComponentBase {
 
     public focus: any;
     public blur: any;
-    constructor(private ngEle: ElementRef, private srenderer: Renderer2, private viewContainerRef:ViewContainerRef, private injector: Injector) {
+    constructor(private ngEle: ElementRef, private srenderer: Renderer2, private viewContainerRef:ViewContainerRef, private injector: Injector, private cdr: ChangeDetectorRef) {
         super();
         this.element = this.ngEle.nativeElement;
         this.injectedModules = this.injectedModules || [];

components/calendars/src/datepicker/datepicker.component.ts

@@ -1,4 +1,4 @@
-import { Component, ElementRef, ViewContainerRef, ValueProvider, Renderer2, Injector, ChangeDetectionStrategy, forwardRef } from '@angular/core';
+import { Component, ElementRef, ViewContainerRef, ValueProvider, Renderer2, Injector, ChangeDetectionStrategy, ChangeDetectorRef, forwardRef } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { ComponentBase, IComponentBase, applyMixins, ComponentMixins, PropertyCollectionInfo, FormBase, setValue } from '@syncfusion/ej2-angular-base';
 import { DatePicker } from '@syncfusion/ej2-calendars';
@@ -52,7 +52,7 @@ export class DatePickerComponent extends DatePicker implements IComponentBase {
 
 
     private skipFromEvent:boolean = true;
-    constructor(private ngEle: ElementRef, private srenderer: Renderer2, private viewContainerRef:ViewContainerRef, private injector: Injector) {
+    constructor(private ngEle: ElementRef, private srenderer: Renderer2, private viewContainerRef:ViewContainerRef, private injector: Injector, private cdr: ChangeDetectorRef) {
         super();
         this.element = this.ngEle.nativeElement;
         this.injectedModules = this.injectedModules || [];

components/calendars/src/daterangepicker/daterangepicker.component.ts

@@ -1,4 +1,4 @@
-import { Component, ElementRef, ViewContainerRef, ValueProvider, Renderer2, Injector, ChangeDetectionStrategy, forwardRef, ContentChild } from '@angular/core';
+import { Component, ElementRef, ViewContainerRef, ValueProvider, Renderer2, Injector, ChangeDetectionStrategy, ChangeDetectorRef, forwardRef, ContentChild } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { ComponentBase, IComponentBase, applyMixins, ComponentMixins, PropertyCollectionInfo, FormBase, setValue } from '@syncfusion/ej2-angular-base';
 import { DateRangePicker } from '@syncfusion/ej2-calendars';
@@ -66,7 +66,7 @@ export class DateRangePickerComponent extends DateRangePicker implements ICompon
     public end: any;
 
     private skipFromEvent:boolean = true;
-    constructor(private ngEle: ElementRef, private srenderer: Renderer2, private viewContainerRef:ViewContainerRef, private injector: Injector) {
+    constructor(private ngEle: ElementRef, private srenderer: Renderer2, private viewContainerRef:ViewContainerRef, private injector: Injector, private cdr: ChangeDetectorRef) {
         super();
         this.element = this.ngEle.nativeElement;
         this.injectedModules = this.injectedModules || [];

components/calendars/src/datetimepicker/datetimepicker.component.ts

@@ -1,4 +1,4 @@
-import { Component, ElementRef, ViewContainerRef, ValueProvider, Renderer2, Injector, ChangeDetectionStrategy, forwardRef } from '@angular/core';
+import { Component, ElementRef, ViewContainerRef, ValueProvider, Renderer2, Injector, ChangeDetectionStrategy, ChangeDetectorRef, forwardRef } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { ComponentBase, IComponentBase, applyMixins, ComponentMixins, PropertyCollectionInfo, FormBase, setValue } from '@syncfusion/ej2-angular-base';
 import { DateTimePicker } from '@syncfusion/ej2-calendars';
@@ -52,7 +52,7 @@ export class DateTimePickerComponent extends DateTimePicker implements IComponen
 
 
     private skipFromEvent:boolean = true;
-    constructor(private ngEle: ElementRef, private srenderer: Renderer2, private viewContainerRef:ViewContainerRef, private injector: Injector) {
+    constructor(private ngEle: ElementRef, private srenderer: Renderer2, private viewContainerRef:ViewContainerRef, private injector: Injector, private cdr: ChangeDetectorRef) {
         super();
         this.element = this.ngEle.nativeElement;
         this.injectedModules = this.injectedModules || [];

components/calendars/src/timepicker/timepicker.component.ts

@@ -1,4 +1,4 @@
-import { Component, ElementRef, ViewContainerRef, ValueProvider, Renderer2, Injector, ChangeDetectionStrategy, forwardRef } from '@angular/core';
+import { Component, ElementRef, ViewContainerRef, ValueProvider, Renderer2, Injector, ChangeDetectionStrategy, ChangeDetectorRef, forwardRef } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { ComponentBase, IComponentBase, applyMixins, ComponentMixins, PropertyCollectionInfo, FormBase, setValue } from '@syncfusion/ej2-angular-base';
 import { TimePicker } from '@syncfusion/ej2-calendars';
@@ -51,7 +51,7 @@ export class TimePickerComponent extends TimePicker implements IComponentBase {
 
 
     private skipFromEvent:boolean = true;
-    constructor(private ngEle: ElementRef, private srenderer: Renderer2, private viewContainerRef:ViewContainerRef, private injector: Injector) {
+    constructor(private ngEle: ElementRef, private srenderer: Renderer2, private viewContainerRef:ViewContainerRef, private injector: Injector, private cdr: ChangeDetectorRef) {
         super();
         this.element = this.ngEle.nativeElement;
         this.injectedModules = this.injectedModules || [];

components/calendars/styles/calendar/material3-dark.scss

@@ -1,2 +1,2 @@
-@import 'ej2-base/styles/material3-dark-definition.scss';
+@import 'ej2-base/styles/definition/material3-dark.scss';
 @import 'ej2-calendars/styles/calendar/material3-dark.scss';

components/calendars/styles/calendar/material3.scss

@@ -1,2 +1,2 @@
-@import 'ej2-base/styles/material3-definition.scss';
+@import 'ej2-base/styles/definition/material3.scss';
 @import 'ej2-calendars/styles/calendar/material3.scss';

components/calendars/styles/datepicker/material3-dark.scss

@@ -1,2 +1,2 @@
-@import 'ej2-base/styles/material3-dark-definition.scss';
+@import 'ej2-base/styles/definition/material3-dark.scss';
 @import 'ej2-calendars/styles/datepicker/material3-dark.scss';

components/calendars/styles/datepicker/material3.scss

@@ -1,2 +1,2 @@
-@import 'ej2-base/styles/material3-definition.scss';
+@import 'ej2-base/styles/definition/material3.scss';
 @import 'ej2-calendars/styles/datepicker/material3.scss';

components/calendars/styles/daterangepicker/material3-dark.scss

@@ -1,2 +1,2 @@
-@import 'ej2-base/styles/material3-dark-definition.scss';
+@import 'ej2-base/styles/definition/material3-dark.scss';
 @import 'ej2-calendars/styles/daterangepicker/material3-dark.scss';

components/calendars/styles/daterangepicker/material3.scss

@@ -1,2 +1,2 @@
-@import 'ej2-base/styles/material3-definition.scss';
+@import 'ej2-base/styles/definition/material3.scss';
 @import 'ej2-calendars/styles/daterangepicker/material3.scss';

components/calendars/styles/datetimepicker/material3-dark.scss

@@ -1,2 +1,2 @@
-@import 'ej2-base/styles/material3-dark-definition.scss';
+@import 'ej2-base/styles/definition/material3-dark.scss';
 @import 'ej2-calendars/styles/datetimepicker/material3-dark.scss';

components/calendars/styles/datetimepicker/material3.scss

@@ -1,2 +1,2 @@
-@import 'ej2-base/styles/material3-definition.scss';
+@import 'ej2-base/styles/definition/material3.scss';
 @import 'ej2-calendars/styles/datetimepicker/material3.scss';

components/calendars/styles/timepicker/material3-dark.scss

@@ -1,2 +1,2 @@
-@import 'ej2-base/styles/material3-dark-definition.scss';
+@import 'ej2-base/styles/definition/material3-dark.scss';
 @import 'ej2-calendars/styles/timepicker/material3-dark.scss';

components/calendars/styles/timepicker/material3.scss

@@ -1,2 +1,2 @@
-@import 'ej2-base/styles/material3-definition.scss';
+@import 'ej2-base/styles/definition/material3.scss';
 @import 'ej2-calendars/styles/timepicker/material3.scss';

components/charts/CHANGELOG.md

@@ -2,6 +2,34 @@
 
 ## [Unreleased]
 
+## 23.1.36 (2023-09-15)
+
+### Chart
+
+#### Features
+
+- `#I462095` - Provided support for using column or bar charts to display data in the form of cylindrical-shaped items.
+- `#I395116` - Provided support for synchronizing tooltips, zooming and panning, cross-hairs, highlights, and selection features across numerous charts.
+- `#I420935` - Provided support for exporting chart data to Excel in a table format.
+- `#I489636` - It is now possible to add a background and border to the chart title and subtitle.
+- `#F182191` - Provided support to hide the nearest data in tooltip when having multiple axis.
+- `#I294830` - Enhanced PDF export feature facilitates exporting charts from the web page onto multiple pages within a PDF document.
+
+### StockChart
+
+#### Features
+
+- `#I253147` - Provided support for exporting chart data to Excel in a table format.
+- New axis type `DateTimeCategory` is now available to show only business days.
+
+## 22.2.12 (2023-09-05)
+
+### Chart
+
+#### Bug Fixes
+
+- `#F184251` - Fixed an issue in axis label position when label position set to inside for bar series.
+
 ## 22.2.11 (2023-08-29)
 
 ### Accumulation chart

components/charts/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@syncfusion/ej2-angular-charts",
-	"version": "22.2.10",
+	"version": "20.13.0",
 	"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/charts/src/chart/axes.directive.ts

@@ -346,11 +346,12 @@ export class AxisDirective extends ComplexBase<AxisDirective> {
      */
     public titleStyle: any;
     /** 
-     * Specifies the type of data the axis is handling. 
-     * * Double:  Renders a numeric axis. 
-     * * DateTime: Renders a dateTime axis. 
-     * * Category: Renders a category axis. 
-     * * Logarithmic: Renders a log axis.
+     * Specifies the data types that the axis can handle: 
+     * * Double: This type is used for rendering a numeric axis to accommodate numeric data. 
+     * * DateTime: This type is utilized for rendering a date-time axis to manage date-time data. 
+     * * Category: This type is employed for rendering a category axis to manage categorical data. 
+     * * Logarithmic: This type is applied for rendering a logarithmic axis to handle a wide range of values. 
+     * * DateTimeCategory: This type is used to render a date time category axis for managing business days.
      * @default 'Double'
      * @blazortype Syncfusion.EJ2.Blazor.Charts.ValueType
      * @isenumeration true

components/charts/src/chart/series.directive.ts

@@ -4,7 +4,7 @@ import { Template } from '@syncfusion/ej2-angular-base';
 import { TrendlinesDirective } from './trendlines.directive';
 import { SegmentsDirective } from './segments.directive';
 
-let input: string[] = ['animation', 'bearFillColor', 'binInterval', 'border', 'boxPlotMode', 'bullFillColor', 'cardinalSplineTension', 'close', 'colorName', 'columnSpacing', 'columnWidth', 'columnWidthInPixel', 'connector', 'cornerRadius', 'dashArray', 'dataSource', 'dragSettings', 'drawType', 'emptyPointSettings', 'enableComplexProperty', 'enableSolidCandles', 'enableTooltip', 'errorBar', 'fill', 'groupName', 'high', 'intermediateSumIndexes', 'isClosed', 'legendImageUrl', 'legendShape', 'low', 'marker', 'maxRadius', 'minRadius', 'name', 'negativeFillColor', 'nonHighlightStyle', 'opacity', 'open', 'paretoOptions', 'pointColorMapping', 'query', 'segmentAxis', 'segments', 'selectionStyle', 'showMean', 'showNormalDistribution', 'size', 'splineType', 'stackingGroup', 'sumIndexes', 'summaryFillColor', 'tooltipFormat', 'tooltipMappingName', 'trendlines', 'type', 'unSelectedStyle', 'visible', 'volume', 'width', 'xAxisName', 'xName', 'yAxisName', 'yName', 'zOrder'];
+let input: string[] = ['animation', 'bearFillColor', 'binInterval', 'border', 'boxPlotMode', 'bullFillColor', 'cardinalSplineTension', 'close', 'colorName', 'columnFacet', 'columnSpacing', 'columnWidth', 'columnWidthInPixel', 'connector', 'cornerRadius', 'dashArray', 'dataSource', 'dragSettings', 'drawType', 'emptyPointSettings', 'enableComplexProperty', 'enableSolidCandles', 'enableTooltip', 'errorBar', 'fill', 'groupName', 'high', 'intermediateSumIndexes', 'isClosed', 'legendImageUrl', 'legendShape', 'low', 'marker', 'maxRadius', 'minRadius', 'name', 'negativeFillColor', 'nonHighlightStyle', 'opacity', 'open', 'paretoOptions', 'pointColorMapping', 'query', 'segmentAxis', 'segments', 'selectionStyle', 'showMean', 'showNormalDistribution', 'size', 'splineType', 'stackingGroup', 'sumIndexes', 'summaryFillColor', 'tooltipFormat', 'tooltipMappingName', 'trendlines', 'type', 'unSelectedStyle', 'visible', 'volume', 'width', 'xAxisName', 'xName', 'yAxisName', 'yName', 'zOrder'];
 let outputs: string[] = [];
 /**
  * Series Directive
@@ -111,6 +111,13 @@ export class SeriesDirective extends ComplexBase<SeriesDirective> {
      * It is applicable for range color mapping properly.
      */
     public colorName: any;
+    /** 
+     * Defines the shape of the data in a column and bar chart. 
+     * Rectangle: Displays the data in a column and bar chart in a rectangle shape. 
+     * Cylinder: Displays the data in a column and bar chart in a cylinder shape.
+     * @default 'Rectangle'
+     */
+    public columnFacet: any;
     /** 
      * To render the column series points with particular column spacing. It takes value from 0 - 1.
      * @default 0

components/charts/src/range-navigator/rangenavigator.component.ts

@@ -90,6 +90,12 @@ export class RangeNavigatorComponent extends RangeNavigator implements IComponen
                     this.injectedModules.push(mod)
                 }
             } catch { }
+
        try {
+                let mod = this.injector.get('ChartsDateTimeCategory');
+                if(this.injectedModules.indexOf(mod) === -1) {
+                    this.injectedModules.push(mod)
+                }
+            } catch { }
 
         this.registerEvents(outputs);
         this.addTwoWay.call(this, twoWays);

components/charts/src/stock-chart/axes.directive.ts

@@ -264,11 +264,12 @@ export class StockChartAxisDirective extends ComplexBase<StockChartAxisDirective
      */
     public titleStyle: any;
     /** 
-     * Specifies the type of data the axis is handling. 
-     * * Double:  Renders a numeric axis. 
-     * * DateTime: Renders a dateTime axis. 
-     * * Category: Renders a category axis. 
-     * * Logarithmic: Renders a log axis.
+     * Specifies the data types that the axis can handle: 
+     * * Double: This type is used for rendering a numeric axis to accommodate numeric data. 
+     * * DateTime: This type is utilized for rendering a date-time axis to manage date-time data. 
+     * * Category: This type is employed for rendering a category axis to manage categorical data. 
+     * * Logarithmic: This type is applied for rendering a logarithmic axis to handle a wide range of values. 
+     * * DateTimeCategory: This type is used to render a date time category axis for managing business days.
      * @default 'Double'
      * @blazortype Syncfusion.EJ2.Blazor.Charts.ValueType
      * @isenumeration true

components/charts/src/stock-chart/stockchart.component.ts

@@ -264,6 +264,12 @@ export class StockChartComponent extends StockChart implements IComponentBase {
                     this.injectedModules.push(mod)
                 }
             } catch { }
+
        try {
+                let mod = this.injector.get('ChartsDateTimeCategory');
+                if(this.injectedModules.indexOf(mod) === -1) {
+                    this.injectedModules.push(mod)
+                }
+            } catch { }
 
         this.registerEvents(outputs);
         this.addTwoWay.call(this, twoWays);

components/circulargauge/CHANGELOG.md

@@ -5,7 +5,7 @@
 
 ## [Unreleased]
 
-## 21.1.37 (2023-03-29)
+## 23.1.36 (2023-09-15)
 
 ### Circular Gauge
 

components/circulargauge/package.json

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

components/diagrams/CHANGELOG.md

@@ -2,79 +2,7 @@
 
 ## [Unreleased]
 
-## 22.2.11 (2023-08-29)
-
-### Diagram
-
-#### Bug Fixes
-
-- `#I477867,#I486093` - Now, Html shapes in palette are rendered properly.
-- `#F183998` - Now, When Dragging Swimlane from Palette to Diagram and Exiting Without Dropping is working properly.
-- `#F184121` - Now, BPMN nodes styles are updated properly at runtime.
-
-## 22.2.10 (2023-08-22)
-
-### Diagram
-
-#### Bug Fixes
-
-- `#I484458` - Now, order commands for dropped swimlane is working properly
-- `#I485386` - Now, Copy and paste the child nodes from group is working properly.
-- `#F182827` - Now, Swimlane child nodes are positioned properly and the exception will no longer thrown while performing delete and undo.
-
-## 22.2.9 (2023-08-15)
-
-### Diagram
-
-#### Bug Fixes
-
-- `#I486118` - Now, the orthogonal connector routing works properly when we drag connector segment.
-- `#I484774` - Now, Double click on node annotation will open the edit of invisible annotation is resolved.
-- `#I484563` - The DOM Exception will no longer thrown while removing connector with Virtualization Enabled.
-- `#I484335` - Now, highlighter rendered properly on hovering ports and nodes.
-
-## 22.2.8 (2023-08-08)
-
-### Diagram
-
-#### Bug Fixes
-
-- `#I482420` - Now, Connector draw cursor is enabled while hover the group node port.
-- `#I484353` - Now, copy paste the group node multiple times is working properly.
-
-## 22.2.7 (2023-08-02)
-
-### Diagram
-
-#### New Feature
-
-- `#I464388` - load Event to notify diagram initial render is added.
-
-#### Bug Fixes
-
--`#I477967`  - Now, symbol size does not change after dragging the symbols.
-
-
-## 22.2.5 (2023-07-27)
-
-### Diagram
-
-#### Bug Fixes
-
-- `#F-182592,#FB-45000` - scrollbar flickering issue in mac on zooming the diagram has been fixed now.
-- `#I44765` - Now, Event "Start" state triggers for single time in rotate and resize action.
-- `#I44765` - Now, Duplicate nodes and connectors are created after reset for layout type 'None' has been fixed now.
-
-## 22.1.38 (2023-07-11)
-
-### Diagram
-
-#### Bug Fixes
-
-- `#I44765` - Now, child nodes are properly rendered after deleting swimlane and performing undo action.
-- `#I473032`- Now, the orthogonal connector routing works properly when we drag connector segment.
-
-## 22.1.36 (2023-06-28)
+## 23.1.36 (2023-09-15)
 
 ### Diagram
 
@@ -82,11 +10,7 @@
 
 - `#I468711` - Now, opacity 0 get working for the image node.
 - `#I182694` - Now, UML multiplicity type ManyToMany get working for annotation label.
-- `#I467016` - Improved rendering performance for layouts with large number of nodes.
-- `#I469741` - Fixed undo redo issue with group nodes.
-- `#I471066` - Now, dragging group node from palette to diagram adds unselectable element when leaving the diagram has been fixed.
-- `#I448032` - Fixed grid lines appearing black in Safari browser.
-- `#I466480` - Improved performance while nudging large number of nodes.
+- `#I44765` - Now, child nodes are properly rendered after deleting swimlane and performing undo action.
 
 ## 22.1.34 (2023-06-21)
 

components/diagrams/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@syncfusion/ej2-angular-diagrams",
-	"version": "22.2.10",
+	"version": "23.1.36",
 	"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', 'allowNodeOverlap', '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 input: string[] = ['addInfo', 'allowNodeOverlap', 'annotations', 'bezierSettings', 'bridgeSpace', 'connectionPadding', 'connectorSpacing', 'constraints', 'cornerRadius', 'dragSize', 'excludeFromLayout', 'fixedUserHandles', 'flip', 'flipMode', 'hitPadding', 'id', 'margin', 'maxSegmentThumb', 'ports', 'previewSize', 'segmentThumbShape', 'segments', 'shape', 'sourceDecorator', 'sourceID', 'sourcePadding', 'sourcePoint', 'sourcePortID', 'style', 'symbolInfo', 'targetDecorator', 'targetID', 'targetPadding', 'targetPoint', 'targetPortID', 'tooltip', 'type', 'visible', 'wrapper', 'zIndex'];
 let outputs: string[] = [];
 /**
  * Connectors Directive
@@ -149,12 +149,36 @@ export class ConnectorDirective extends ComplexBase<ConnectorDirective> {
      * @default null
      */
     public maxSegmentThumb: any;
+    /** 
+     * Defines the behavior of connection ports
+     * @aspdefaultvalueignore 
+     * @default undefined
+     */
+    public ports: any;
     /** 
      * Defines the size of the symbol preview
      * @aspdefaultvalueignore 
      * @default undefined
      */
     public previewSize: any;
+    /** 
+     * Defines the shape for the connector segmentThumb 
+     * Rhombus - Sets the segmentThumb shape as Rhombus 
+     * Square - Sets the segmentThumb shape as Square 
+     * Rectangle - Sets the segmentThumb shape as Rectangle 
+     * Ellipse - Sets the segmentThumb shape as Ellipse 
+     * Arrow - Sets the segmentThumb shape as Arrow 
+     * Diamond - Sets the segmentThumb shape as Diamond 
+     * OpenArrow - Sets the segmentThumb shape as OpenArrow 
+     * Circle - Sets the segmentThumb shape as Circle 
+     * Fletch - Sets the segmentThumb shape as Fletch 
+     * OpenFetch - Sets the segmentThumb shape as OpenFetch 
+     * IndentedArrow - Sets the segmentThumb shape as Indented Arrow 
+     * OutdentedArrow - Sets the segmentThumb shape as Outdented Arrow 
+     * DoubleArrow - Sets the segmentThumb shape as DoubleArrow
+     * @default 'Circle'
+     */
+    public segmentThumbShape: any;
     /** 
      * Defines the segments
      * @default []

components/diagrams/styles/diagram/material3-dark.scss

@@ -1,2 +1,2 @@
-@import 'ej2-base/styles/material3-dark-definition.scss';
+@import 'ej2-base/styles/definition/material3-dark.scss';
 @import 'ej2-diagrams/styles/diagram/material3-dark.scss';

components/diagrams/styles/diagram/material3.scss

@@ -1,2 +1,2 @@
-@import 'ej2-base/styles/material3-definition.scss';
+@import 'ej2-base/styles/definition/material3.scss';
 @import 'ej2-diagrams/styles/diagram/material3.scss';

components/documenteditor/CHANGELOG.md

@@ -2,6 +2,29 @@
 
 ## [Unreleased]
 
+## 23.1.36 (2023-09-15)
+
+### Document Editor
+
+#### New Features
+
+- `#I471020` - Added support for table title and description.
+
+#### Features
+
+- `#I471020` - Added support for table title and description.
+
+## 22.2.12 (2023-09-05)
+
+### Document Editor
+
+#### Bug Fixes
+
+- `#I482661` - Auto fit table with preferred width table is layouted properly in Document editor
+- `#I458332` - Now, able to search a word & apply properties like alignment(left/right/center) inside shape.
+- `#I494044` - Resolved the exception issue while exporting a document in server side.
+- `#I485502` - Now, Date field opened properly in form filling mode.
+
 ## 22.2.11 (2023-08-29)
 
 ### Document Editor
@@ -141,12 +164,21 @@
 
 ### Document Editor
 
-#### New Features
+#### Bug Fixes
 
-- `#I397854`, `#I401771` - Added support for editing alternate text for images.
-- `#I370306`, `#I438565` - Added support for character spacing and scaling.
-- `#I273864`, `#I318326`, `#I325320`, `#I331615`, `#I339872`, `#F164047` - Added support for linking to the previous header/footer.
-- `#I445060`, `#I468741` - Added a property in the `selectionChanged` event arguments to identify whether the user has completed their selection.
+- `#I462679` - Resolved performance issue occurred when inserting Text.
+- `#F182725` - Resolved the table with border color below 1pt.
+- `#I470871` - Resolved the issue in displaying the page number in the header section.
+- `#I471871` - Resolved the drag & drop shape issue.
+- `#I464996` - Resolved the table formatting issue while undoing.
+- `#I466554` - Resolved the table unresponsive issue when backspacing.
+- `#I473944` - Resolved the font change when exporting a document in docx format.
+- `#I471205` - Resolved the issue occurred when loading a document.
+- `#FB44186` - Resolved the horizontal line appears issue in the page header.
+- `#F182850` - Resolved the issue in docx exporting.
+- `#I469096` - Resolved the loss of original text formatting while pasting.
+- `#I464759` - Resolved the issue in shape rendering.
+- `#I464934` - Resolved the issue in customize the page size after inserting next page break.
 
 ## 21.2.10 (2023-06-13)
 
@@ -3588,14 +3620,3 @@ The Document Editor component is used to create, edit, view, and print Word docu
 - Added `Syncfusion.EJ2.DocumentEditor` NuGet package that contains helper library for converting Word documents to `Syncfusion Document Text (*.sfdt)`. It supports .NET Standard 2.0 Framework.
 
 
-## 21.1.36 (2023-06-28)
-
-### Document Editor
-
-#### New Features
-
-- `#I397854`, `#I401771` - Added support for editing alternate text for images.
-- `#I370306`, `#I438565` - Added support for character spacing and scaling.
-- `#I273864`, `#I318326`, `#I325320`, `#I331615`, `#I339872`, `#F164047` - Added support for linking to the previous header/footer.
-- `#I445060`, `#I468741` - Added a property in the `selectionChanged` event arguments to identify whether the user has completed their selection.
-

components/documenteditor/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@syncfusion/ej2-angular-documenteditor",
-	"version": "22.2.10",
+	"version": "23.1.36",
 	"description": "Feature-rich document editor control with built-in support for context menu, options pane and dialogs. for Angular",
 	"author": "Syncfusion Inc.",
 	"license": "SEE LICENSE IN license",

components/documenteditor/styles/document-editor-container/material3-dark.scss

@@ -1,2 +1,2 @@
-@import 'ej2-base/styles/material3-dark-definition.scss';
+@import 'ej2-base/styles/definition/material3-dark.scss';
 @import 'ej2-documenteditor/styles/document-editor-container/material3-dark.scss';

components/documenteditor/styles/document-editor-container/material3.scss

@@ -1,2 +1,2 @@
-@import 'ej2-base/styles/material3-definition.scss';
+@import 'ej2-base/styles/definition/material3.scss';
 @import 'ej2-documenteditor/styles/document-editor-container/material3.scss';