diff --git a/components/base/CHANGELOG.md b/components/base/CHANGELOG.md
index 98b868bb..f42d6756 100644
--- a/components/base/CHANGELOG.md
+++ b/components/base/CHANGELOG.md
@@ -2,6 +2,22 @@
 
 ## [Unreleased]
 
+## 22.2.5 (2023-07-27)
+
+### Common
+
+#### Bug Fixes
+
+- `#I473940` - DropdownList Item Template not initially rendered for `OnPush` strategy.
+
+## 22.1.34 (2023-06-21)
+
+### Common
+
+#### New Features
+
+- Provided the TypeScript 5 compatible support for the Angular components.
+
 ## 21.1.41 (2023-04-18)
 
 ### Common
diff --git a/components/base/package.json b/components/base/package.json
index 4da30c73..f48fbce7 100644
--- a/components/base/package.json
+++ b/components/base/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@syncfusion/ej2-angular-base",
-	"version": "21.2.3",
+	"version": "22.1.34",
 	"description": "A common package of Essential JS 2 base Angular libraries, methods and class definitions",
 	"author": "Syncfusion Inc.",
 	"license": "SEE LICENSE IN license",
diff --git a/components/base/src/template.ts b/components/base/src/template.ts
index 8871dc14..e7dfed31 100644
--- a/components/base/src/template.ts
+++ b/components/base/src/template.ts
@@ -2,7 +2,7 @@ import { ViewContainerRef, EmbeddedViewRef, ElementRef, TemplateRef } from '@ang
 import { setTemplateEngine, getTemplateEngine } from '@syncfusion/ej2-base';
 import { setValue, getValue } from '@syncfusion/ej2-base';
 
-let stringCompiler: (template: string, helper?: object) => (data: Object | JSON) => string = getTemplateEngine();
+let stringCompiler: (template: string | Function, helper?: object) => (data: Object | JSON) => string = getTemplateEngine();
 
 /**
  * Angular Template Compiler
@@ -10,7 +10,7 @@ let stringCompiler: (template: string, helper?: object) => (data: Object | JSON)
 export function compile(templateEle: AngularElementType, helper?: Object):
 //tslint:disable-next-line
     (data: Object | JSON, component?: any, propName?: any) => Object {
-    if (typeof templateEle === 'string') {
+    if (typeof templateEle === 'string' || (typeof templateEle === 'function' && (templateEle as Function).prototype && (templateEle as Function).prototype.CSPTemplate)) {
         return stringCompiler(templateEle, helper);
     } else {
         let contRef: ViewContainerRef = templateEle.elementRef.nativeElement._viewContainerRef;
@@ -21,11 +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);
-            if (getValue('currentInstance.element.nodeName', conRef) === 'EJS-MENTION') {
-                viewRef.detectChanges();
-            } else {
-                viewRef.markForCheck();
-            }
+            viewRef.detectChanges();
             /* istanbul ignore next */
             let viewCollection: { [key: string]: EmbeddedViewRef<Object>[] } = (component && component.registeredTemplate) ?
                 component.registeredTemplate : getValue('currentInstance.registeredTemplate', conRef);
diff --git a/components/base/styles/material3-dark.scss b/components/base/styles/material3-dark.scss
new file mode 100644
index 00000000..66b7886a
--- /dev/null
+++ b/components/base/styles/material3-dark.scss
@@ -0,0 +1 @@
+@import 'ej2-base/styles/material3-dark-definition.scss';
diff --git a/components/base/styles/material3.scss b/components/base/styles/material3.scss
new file mode 100644
index 00000000..a73d2846
--- /dev/null
+++ b/components/base/styles/material3.scss
@@ -0,0 +1 @@
+@import 'ej2-base/styles/material3-definition.scss';
diff --git a/components/base/umd-deploy/styles/bootstrap-dark.scss b/components/base/umd-deploy/styles/bootstrap-dark.scss
deleted file mode 100644
index 03115aff..00000000
Binary files a/components/base/umd-deploy/styles/bootstrap-dark.scss and /dev/null differ
diff --git a/components/base/umd-deploy/styles/bootstrap.scss b/components/base/umd-deploy/styles/bootstrap.scss
deleted file mode 100644
index a2d30bc1..00000000
Binary files a/components/base/umd-deploy/styles/bootstrap.scss and /dev/null differ
diff --git a/components/base/umd-deploy/styles/bootstrap4.scss b/components/base/umd-deploy/styles/bootstrap4.scss
deleted file mode 100644
index 3481709d..00000000
Binary files a/components/base/umd-deploy/styles/bootstrap4.scss and /dev/null differ
diff --git a/components/base/umd-deploy/styles/bootstrap5-dark.scss b/components/base/umd-deploy/styles/bootstrap5-dark.scss
deleted file mode 100644
index 65a5bdfe..00000000
Binary files a/components/base/umd-deploy/styles/bootstrap5-dark.scss and /dev/null differ
diff --git a/components/base/umd-deploy/styles/bootstrap5.scss b/components/base/umd-deploy/styles/bootstrap5.scss
deleted file mode 100644
index 762ea80b..00000000
Binary files a/components/base/umd-deploy/styles/bootstrap5.scss and /dev/null differ
diff --git a/components/base/umd-deploy/styles/fabric-dark.scss b/components/base/umd-deploy/styles/fabric-dark.scss
deleted file mode 100644
index 840b0628..00000000
Binary files a/components/base/umd-deploy/styles/fabric-dark.scss and /dev/null differ
diff --git a/components/base/umd-deploy/styles/fabric.scss b/components/base/umd-deploy/styles/fabric.scss
deleted file mode 100644
index 480d6ffd..00000000
Binary files a/components/base/umd-deploy/styles/fabric.scss and /dev/null differ
diff --git a/components/base/umd-deploy/styles/fluent-dark.scss b/components/base/umd-deploy/styles/fluent-dark.scss
deleted file mode 100644
index 83d4a5b7..00000000
Binary files a/components/base/umd-deploy/styles/fluent-dark.scss and /dev/null differ
diff --git a/components/base/umd-deploy/styles/fluent.scss b/components/base/umd-deploy/styles/fluent.scss
deleted file mode 100644
index 5fb32546..00000000
Binary files a/components/base/umd-deploy/styles/fluent.scss and /dev/null differ
diff --git a/components/base/umd-deploy/styles/highcontrast-light.scss b/components/base/umd-deploy/styles/highcontrast-light.scss
deleted file mode 100644
index 78a3a420..00000000
Binary files a/components/base/umd-deploy/styles/highcontrast-light.scss and /dev/null differ
diff --git a/components/base/umd-deploy/styles/highcontrast.scss b/components/base/umd-deploy/styles/highcontrast.scss
deleted file mode 100644
index fd62ca66..00000000
Binary files a/components/base/umd-deploy/styles/highcontrast.scss and /dev/null differ
diff --git a/components/base/umd-deploy/styles/material-dark.scss b/components/base/umd-deploy/styles/material-dark.scss
deleted file mode 100644
index e6504027..00000000
Binary files a/components/base/umd-deploy/styles/material-dark.scss and /dev/null differ
diff --git a/components/base/umd-deploy/styles/material.scss b/components/base/umd-deploy/styles/material.scss
deleted file mode 100644
index 076cadb5..00000000
Binary files a/components/base/umd-deploy/styles/material.scss and /dev/null differ
diff --git a/components/base/umd-deploy/styles/tailwind-dark.scss b/components/base/umd-deploy/styles/tailwind-dark.scss
deleted file mode 100644
index 7c435d47..00000000
Binary files a/components/base/umd-deploy/styles/tailwind-dark.scss and /dev/null differ
diff --git a/components/base/umd-deploy/styles/tailwind.scss b/components/base/umd-deploy/styles/tailwind.scss
deleted file mode 100644
index 33b64a2c..00000000
Binary files a/components/base/umd-deploy/styles/tailwind.scss and /dev/null differ
diff --git a/components/buttons/CHANGELOG.md b/components/buttons/CHANGELOG.md
index 913e4b5e..88e2a505 100644
--- a/components/buttons/CHANGELOG.md
+++ b/components/buttons/CHANGELOG.md
@@ -2,6 +2,58 @@
 
 ## [Unreleased]
 
+## 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
@@ -18,34 +70,6 @@
 
 - `#I436942` - The issue with "Validation rule not display properly when we use Checkbox within form validator" has been resolved.
 
-### 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.
-
-### 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.
-
 ## 21.1.35 (2023-03-23)
 
 ### Checkbox
@@ -493,6 +517,14 @@ 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
diff --git a/components/buttons/package.json b/components/buttons/package.json
index faf24184..b7555c6c 100644
--- a/components/buttons/package.json
+++ b/components/buttons/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@syncfusion/ej2-angular-buttons",
-	"version": "21.2.3",
+	"version": "22.1.39",
 	"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",
diff --git a/components/buttons/src/speed-dial/speeddial.component.ts b/components/buttons/src/speed-dial/speeddial.component.ts
index a392b1cd..04104b62 100644
--- a/components/buttons/src/speed-dial/speeddial.component.ts
+++ b/components/buttons/src/speed-dial/speeddial.component.ts
@@ -4,7 +4,7 @@ import { SpeedDial } from '@syncfusion/ej2-buttons';
 import { Template } from '@syncfusion/ej2-angular-base';
 import { SpeedDialItemsDirective } from './items.directive';
 
-export const inputs: string[] = ['animation','closeIconCss','content','cssClass','direction','disabled','enablePersistence','enableRtl','iconPosition','itemTemplate','items','locale','modal','mode','openIconCss','opensOnHover','popupTemplate','position','radialSettings','target','visible'];
+export const inputs: string[] = ['animation','closeIconCss','content','cssClass','direction','disabled','enablePersistence','enableRtl','iconPosition','isPrimary','itemTemplate','items','locale','modal','mode','openIconCss','opensOnHover','popupTemplate','position','radialSettings','target','visible'];
 export const outputs: string[] = ['beforeClose','beforeItemRender','beforeOpen','clicked','created','onClose','onOpen','visibleChange'];
 export const twoWays: string[] = ['visible'];
 
@@ -42,6 +42,7 @@ export class SpeedDialComponent extends SpeedDial implements IComponentBase {
      * Defines the template content for the speed dial item. 
      * {% codeBlock src='speeddial/itemTemplate/index.md' %}{% endcodeBlock %}
      * @default ''
+     * @asptype string
      */
     @ContentChild('itemTemplate')
     @Template()
@@ -49,6 +50,7 @@ export class SpeedDialComponent extends SpeedDial implements IComponentBase {
     /** 
      * Defines a template content for popup of SpeedDial.
      * @default ''
+     * @asptype string
      */
     @ContentChild('popupTemplate')
     @Template()
diff --git a/components/buttons/styles/button/material3-dark.scss b/components/buttons/styles/button/material3-dark.scss
new file mode 100644
index 00000000..ea932c60
--- /dev/null
+++ b/components/buttons/styles/button/material3-dark.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-dark-definition.scss';
+@import 'ej2-buttons/styles/button/material3-dark.scss';
diff --git a/components/buttons/styles/button/material3.scss b/components/buttons/styles/button/material3.scss
new file mode 100644
index 00000000..e77bd00e
--- /dev/null
+++ b/components/buttons/styles/button/material3.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-definition.scss';
+@import 'ej2-buttons/styles/button/material3.scss';
diff --git a/components/buttons/styles/check-box/material3-dark.scss b/components/buttons/styles/check-box/material3-dark.scss
new file mode 100644
index 00000000..c669ea2b
--- /dev/null
+++ b/components/buttons/styles/check-box/material3-dark.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-dark-definition.scss';
+@import 'ej2-buttons/styles/check-box/material3-dark.scss';
diff --git a/components/buttons/styles/check-box/material3.scss b/components/buttons/styles/check-box/material3.scss
new file mode 100644
index 00000000..810cc2b4
--- /dev/null
+++ b/components/buttons/styles/check-box/material3.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-definition.scss';
+@import 'ej2-buttons/styles/check-box/material3.scss';
diff --git a/components/buttons/styles/chips/material3-dark.scss b/components/buttons/styles/chips/material3-dark.scss
new file mode 100644
index 00000000..887be30f
--- /dev/null
+++ b/components/buttons/styles/chips/material3-dark.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-dark-definition.scss';
+@import 'ej2-buttons/styles/chips/material3-dark.scss';
diff --git a/components/buttons/styles/chips/material3.scss b/components/buttons/styles/chips/material3.scss
new file mode 100644
index 00000000..f4fa3c59
--- /dev/null
+++ b/components/buttons/styles/chips/material3.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-definition.scss';
+@import 'ej2-buttons/styles/chips/material3.scss';
diff --git a/components/buttons/styles/floating-action-button/material3-dark.scss b/components/buttons/styles/floating-action-button/material3-dark.scss
new file mode 100644
index 00000000..85765e92
--- /dev/null
+++ b/components/buttons/styles/floating-action-button/material3-dark.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-dark-definition.scss';
+@import 'ej2-buttons/styles/floating-action-button/material3-dark.scss';
diff --git a/components/buttons/styles/floating-action-button/material3.scss b/components/buttons/styles/floating-action-button/material3.scss
new file mode 100644
index 00000000..26d2c364
--- /dev/null
+++ b/components/buttons/styles/floating-action-button/material3.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-definition.scss';
+@import 'ej2-buttons/styles/floating-action-button/material3.scss';
diff --git a/components/buttons/styles/material3-dark.scss b/components/buttons/styles/material3-dark.scss
new file mode 100644
index 00000000..24158e51
--- /dev/null
+++ b/components/buttons/styles/material3-dark.scss
@@ -0,0 +1,8 @@
+
+@import 'button/material3-dark.scss';
+@import 'check-box/material3-dark.scss';
+@import 'radio-button/material3-dark.scss';
+@import 'switch/material3-dark.scss';
+@import 'chips/material3-dark.scss';
+@import 'floating-action-button/material3-dark.scss';
+@import 'speed-dial/material3-dark.scss';
diff --git a/components/buttons/styles/material3.scss b/components/buttons/styles/material3.scss
new file mode 100644
index 00000000..2dc484bd
--- /dev/null
+++ b/components/buttons/styles/material3.scss
@@ -0,0 +1,8 @@
+
+@import 'button/material3.scss';
+@import 'check-box/material3.scss';
+@import 'radio-button/material3.scss';
+@import 'switch/material3.scss';
+@import 'chips/material3.scss';
+@import 'floating-action-button/material3.scss';
+@import 'speed-dial/material3.scss';
diff --git a/components/buttons/styles/radio-button/material3-dark.scss b/components/buttons/styles/radio-button/material3-dark.scss
new file mode 100644
index 00000000..76bb8cbc
--- /dev/null
+++ b/components/buttons/styles/radio-button/material3-dark.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-dark-definition.scss';
+@import 'ej2-buttons/styles/radio-button/material3-dark.scss';
diff --git a/components/buttons/styles/radio-button/material3.scss b/components/buttons/styles/radio-button/material3.scss
new file mode 100644
index 00000000..8a0cf45f
--- /dev/null
+++ b/components/buttons/styles/radio-button/material3.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-definition.scss';
+@import 'ej2-buttons/styles/radio-button/material3.scss';
diff --git a/components/buttons/styles/speed-dial/material3-dark.scss b/components/buttons/styles/speed-dial/material3-dark.scss
new file mode 100644
index 00000000..e0b24b72
--- /dev/null
+++ b/components/buttons/styles/speed-dial/material3-dark.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-dark-definition.scss';
+@import 'ej2-buttons/styles/speed-dial/material3-dark.scss';
diff --git a/components/buttons/styles/speed-dial/material3.scss b/components/buttons/styles/speed-dial/material3.scss
new file mode 100644
index 00000000..3c0df723
--- /dev/null
+++ b/components/buttons/styles/speed-dial/material3.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-definition.scss';
+@import 'ej2-buttons/styles/speed-dial/material3.scss';
diff --git a/components/buttons/styles/switch/material3-dark.scss b/components/buttons/styles/switch/material3-dark.scss
new file mode 100644
index 00000000..12e1db59
--- /dev/null
+++ b/components/buttons/styles/switch/material3-dark.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-dark-definition.scss';
+@import 'ej2-buttons/styles/switch/material3-dark.scss';
diff --git a/components/buttons/styles/switch/material3.scss b/components/buttons/styles/switch/material3.scss
new file mode 100644
index 00000000..12db0973
--- /dev/null
+++ b/components/buttons/styles/switch/material3.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-definition.scss';
+@import 'ej2-buttons/styles/switch/material3.scss';
diff --git a/components/calendars/CHANGELOG.md b/components/calendars/CHANGELOG.md
index 3a6e5a2c..4238f7af 100644
--- a/components/calendars/CHANGELOG.md
+++ b/components/calendars/CHANGELOG.md
@@ -2,33 +2,25 @@
 
 ## [Unreleased]
 
-## 21.1.41 (2023-04-18)
+## 21.1.34 (2023-06-21)
 
 ### DatePicker
 
-#### Bug Fixes
+#### Features
 
-- `#453318` - Issue with "Placeholder text not get displayed on initial render with strict mode true case of the datepicker component."
+- Added support for full screen calendar in mobile mode with landscape and portrait orientations. Enable the feature by setting fullScreenMode property to true.
 
-## 21.1.38 (2023-04-04)
+### DateRangePicker
 
-### DatePicker
+#### Features
 
-#### Bug Fixes
-
-- `#SF-446512` - Issue with "The mask placeholder not shown while bind with null value in ng-model" has been resolved.
-- `#SF-447843` - Issue with "after the form is reset, mask placeholder is not shown in the UI" has been resolved.
-- `#FB41541` - Resolved the issue where the change event was not triggering on the initial time when binding the component with strict mode.
-
-- `#SF-446512` - Issue with "The mask placeholder not shown while bind with null value in ng-model" has been resolved.
-- `#SF-447843` - Issue with "after the form is reset, mask placeholder is not shown in the UI" has been resolved.
-- `#I450686` - Resolved issue with "Script error thrown in datepicker when we render inside the schedule component".
+- Added support for full screen calendar in mobile mode with landscape and portrait orientations. Enable the feature by setting fullScreenMode property to true.
 
 ### DateTimePicker
 
-#### Bug Fixes
+#### Features
 
-- `#FB41541` - Resolved the issue where the change event was not triggering on the initial time when binding the component with strict mode.
+- 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)
 
@@ -1245,6 +1237,20 @@ 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
diff --git a/components/calendars/package.json b/components/calendars/package.json
index 068da721..2b92e975 100644
--- a/components/calendars/package.json
+++ b/components/calendars/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@syncfusion/ej2-angular-calendars",
-	"version": "21.1.41",
+	"version": "22.1.38",
 	"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",
diff --git a/components/calendars/src/datepicker/datepicker.component.ts b/components/calendars/src/datepicker/datepicker.component.ts
index 74d4b075..82b07df6 100644
--- a/components/calendars/src/datepicker/datepicker.component.ts
+++ b/components/calendars/src/datepicker/datepicker.component.ts
@@ -5,7 +5,7 @@ import { DatePicker } from '@syncfusion/ej2-calendars';
 
 
 
-export const inputs: string[] = ['allowEdit','calendarMode','cssClass','dayHeaderFormat','depth','enableMask','enablePersistence','enableRtl','enabled','firstDayOfWeek','floatLabelType','format','htmlAttributes','isMultiSelection','keyConfigs','locale','maskPlaceholder','max','min','openOnFocus','placeholder','readonly','serverTimezoneOffset','showClearButton','showTodayButton','start','strictMode','value','values','weekNumber','weekRule','width','zIndex'];
+export const inputs: string[] = ['allowEdit','calendarMode','cssClass','dayHeaderFormat','depth','enableMask','enablePersistence','enableRtl','enabled','firstDayOfWeek','floatLabelType','format','fullScreenMode','htmlAttributes','isMultiSelection','keyConfigs','locale','maskPlaceholder','max','min','openOnFocus','placeholder','readonly','serverTimezoneOffset','showClearButton','showTodayButton','start','strictMode','value','values','weekNumber','weekRule','width','zIndex'];
 export const outputs: string[] = ['blur','change','cleared','close','created','destroyed','focus','navigated','open','renderDayCell','valueChange'];
 export const twoWays: string[] = ['value'];
 
diff --git a/components/calendars/src/daterangepicker/daterangepicker.component.ts b/components/calendars/src/daterangepicker/daterangepicker.component.ts
index 83b02241..79d1ff5a 100644
--- a/components/calendars/src/daterangepicker/daterangepicker.component.ts
+++ b/components/calendars/src/daterangepicker/daterangepicker.component.ts
@@ -5,7 +5,7 @@ import { DateRangePicker } from '@syncfusion/ej2-calendars';
 import { Template } from '@syncfusion/ej2-angular-base';
 import { PresetsDirective } from './presets.directive';
 
-export const inputs: string[] = ['allowEdit','calendarMode','cssClass','dayHeaderFormat','depth','enablePersistence','enableRtl','enabled','endDate','firstDayOfWeek','floatLabelType','format','htmlAttributes','keyConfigs','locale','max','maxDays','min','minDays','openOnFocus','placeholder','presets','readonly','separator','serverTimezoneOffset','showClearButton','start','startDate','strictMode','value','weekNumber','weekRule','width','zIndex'];
+export const inputs: string[] = ['allowEdit','calendarMode','cssClass','dayHeaderFormat','depth','enablePersistence','enableRtl','enabled','endDate','firstDayOfWeek','floatLabelType','format','fullScreenMode','htmlAttributes','keyConfigs','locale','max','maxDays','min','minDays','openOnFocus','placeholder','presets','readonly','separator','serverTimezoneOffset','showClearButton','start','startDate','strictMode','value','weekNumber','weekRule','width','zIndex'];
 export const outputs: string[] = ['blur','change','cleared','close','created','destroyed','focus','navigated','open','renderDayCell','select','startDateChange','endDateChange','valueChange'];
 export const twoWays: string[] = ['startDate', 'endDate', 'value'];
 
diff --git a/components/calendars/src/datetimepicker/datetimepicker.component.ts b/components/calendars/src/datetimepicker/datetimepicker.component.ts
index 23050b4d..f81652e5 100644
--- a/components/calendars/src/datetimepicker/datetimepicker.component.ts
+++ b/components/calendars/src/datetimepicker/datetimepicker.component.ts
@@ -5,7 +5,7 @@ import { DateTimePicker } from '@syncfusion/ej2-calendars';
 
 
 
-export const inputs: string[] = ['allowEdit','calendarMode','cssClass','dayHeaderFormat','depth','enableMask','enablePersistence','enableRtl','enabled','firstDayOfWeek','floatLabelType','format','htmlAttributes','isMultiSelection','keyConfigs','locale','maskPlaceholder','max','min','openOnFocus','placeholder','readonly','scrollTo','serverTimezoneOffset','showClearButton','showTodayButton','start','step','strictMode','timeFormat','value','values','weekNumber','weekRule','width','zIndex'];
+export const inputs: string[] = ['allowEdit','calendarMode','cssClass','dayHeaderFormat','depth','enableMask','enablePersistence','enableRtl','enabled','firstDayOfWeek','floatLabelType','format','fullScreenMode','htmlAttributes','isMultiSelection','keyConfigs','locale','maskPlaceholder','max','min','openOnFocus','placeholder','readonly','scrollTo','serverTimezoneOffset','showClearButton','showTodayButton','start','step','strictMode','timeFormat','value','values','weekNumber','weekRule','width','zIndex'];
 export const outputs: string[] = ['blur','change','cleared','close','created','destroyed','focus','navigated','open','renderDayCell','valueChange'];
 export const twoWays: string[] = ['value'];
 
diff --git a/components/calendars/src/timepicker/timepicker.component.ts b/components/calendars/src/timepicker/timepicker.component.ts
index 4c23e5cc..6beef573 100644
--- a/components/calendars/src/timepicker/timepicker.component.ts
+++ b/components/calendars/src/timepicker/timepicker.component.ts
@@ -5,7 +5,7 @@ import { TimePicker } from '@syncfusion/ej2-calendars';
 
 
 
-export const inputs: string[] = ['allowEdit','cssClass','enableMask','enablePersistence','enableRtl','enabled','floatLabelType','format','htmlAttributes','keyConfigs','locale','maskPlaceholder','max','min','openOnFocus','placeholder','readonly','scrollTo','showClearButton','step','strictMode','value','width','zIndex'];
+export const inputs: string[] = ['allowEdit','cssClass','enableMask','enablePersistence','enableRtl','enabled','floatLabelType','format','fullScreenMode','htmlAttributes','keyConfigs','locale','maskPlaceholder','max','min','openOnFocus','placeholder','readonly','scrollTo','showClearButton','step','strictMode','value','width','zIndex'];
 export const outputs: string[] = ['blur','change','cleared','close','created','destroyed','focus','itemRender','open','valueChange'];
 export const twoWays: string[] = ['value'];
 
diff --git a/components/calendars/styles/calendar/material3-dark.scss b/components/calendars/styles/calendar/material3-dark.scss
new file mode 100644
index 00000000..dff1e7a2
--- /dev/null
+++ b/components/calendars/styles/calendar/material3-dark.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-dark-definition.scss';
+@import 'ej2-calendars/styles/calendar/material3-dark.scss';
diff --git a/components/calendars/styles/calendar/material3.scss b/components/calendars/styles/calendar/material3.scss
new file mode 100644
index 00000000..226cc68f
--- /dev/null
+++ b/components/calendars/styles/calendar/material3.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-definition.scss';
+@import 'ej2-calendars/styles/calendar/material3.scss';
diff --git a/components/calendars/styles/datepicker/material3-dark.scss b/components/calendars/styles/datepicker/material3-dark.scss
new file mode 100644
index 00000000..d52c4874
--- /dev/null
+++ b/components/calendars/styles/datepicker/material3-dark.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-dark-definition.scss';
+@import 'ej2-calendars/styles/datepicker/material3-dark.scss';
diff --git a/components/calendars/styles/datepicker/material3.scss b/components/calendars/styles/datepicker/material3.scss
new file mode 100644
index 00000000..f02589ac
--- /dev/null
+++ b/components/calendars/styles/datepicker/material3.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-definition.scss';
+@import 'ej2-calendars/styles/datepicker/material3.scss';
diff --git a/components/calendars/styles/daterangepicker/material3-dark.scss b/components/calendars/styles/daterangepicker/material3-dark.scss
new file mode 100644
index 00000000..ed3eb22a
--- /dev/null
+++ b/components/calendars/styles/daterangepicker/material3-dark.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-dark-definition.scss';
+@import 'ej2-calendars/styles/daterangepicker/material3-dark.scss';
diff --git a/components/calendars/styles/daterangepicker/material3.scss b/components/calendars/styles/daterangepicker/material3.scss
new file mode 100644
index 00000000..db1124b0
--- /dev/null
+++ b/components/calendars/styles/daterangepicker/material3.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-definition.scss';
+@import 'ej2-calendars/styles/daterangepicker/material3.scss';
diff --git a/components/calendars/styles/datetimepicker/material3-dark.scss b/components/calendars/styles/datetimepicker/material3-dark.scss
new file mode 100644
index 00000000..034cc0cd
--- /dev/null
+++ b/components/calendars/styles/datetimepicker/material3-dark.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-dark-definition.scss';
+@import 'ej2-calendars/styles/datetimepicker/material3-dark.scss';
diff --git a/components/calendars/styles/datetimepicker/material3.scss b/components/calendars/styles/datetimepicker/material3.scss
new file mode 100644
index 00000000..33eee340
--- /dev/null
+++ b/components/calendars/styles/datetimepicker/material3.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-definition.scss';
+@import 'ej2-calendars/styles/datetimepicker/material3.scss';
diff --git a/components/calendars/styles/material3-dark.scss b/components/calendars/styles/material3-dark.scss
new file mode 100644
index 00000000..7cd1b631
--- /dev/null
+++ b/components/calendars/styles/material3-dark.scss
@@ -0,0 +1,6 @@
+
+@import 'calendar/material3-dark.scss';
+@import 'timepicker/material3-dark.scss';
+@import 'datepicker/material3-dark.scss';
+@import 'daterangepicker/material3-dark.scss';
+@import 'datetimepicker/material3-dark.scss';
diff --git a/components/calendars/styles/material3.scss b/components/calendars/styles/material3.scss
new file mode 100644
index 00000000..03e64162
--- /dev/null
+++ b/components/calendars/styles/material3.scss
@@ -0,0 +1,6 @@
+
+@import 'calendar/material3.scss';
+@import 'timepicker/material3.scss';
+@import 'datepicker/material3.scss';
+@import 'daterangepicker/material3.scss';
+@import 'datetimepicker/material3.scss';
diff --git a/components/calendars/styles/timepicker/material3-dark.scss b/components/calendars/styles/timepicker/material3-dark.scss
new file mode 100644
index 00000000..b2e4cf95
--- /dev/null
+++ b/components/calendars/styles/timepicker/material3-dark.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-dark-definition.scss';
+@import 'ej2-calendars/styles/timepicker/material3-dark.scss';
diff --git a/components/calendars/styles/timepicker/material3.scss b/components/calendars/styles/timepicker/material3.scss
new file mode 100644
index 00000000..d7435dc0
--- /dev/null
+++ b/components/calendars/styles/timepicker/material3.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-definition.scss';
+@import 'ej2-calendars/styles/timepicker/material3.scss';
diff --git a/components/charts/CHANGELOG.md b/components/charts/CHANGELOG.md
index 3a7be643..076612c4 100644
--- a/components/charts/CHANGELOG.md
+++ b/components/charts/CHANGELOG.md
@@ -2,6 +2,157 @@
 
 ## [Unreleased]
 
+## 22.2.5 (2023-07-27)
+
+### Chart
+
+#### Bug Fixes
+
+- `#I477552` - Fixed an issue where the column was overlapping with the axis line.
+- `#I477506` - Fixed an issue where the trendline was not changing when updating its properties.
+- `#I475454` - Now UseGroupingSeparator is working in accumulation tooltip.
+- `#F183277` - Fixed an issue where range color mapping was not working when using two series.
+- `#I479131` - Fixed the issue of data label cropping when setting the value as the minimum.
+- `#I479171` - Fixed an issue where the range values of the scroll bar were not proper.
+- `#I471081` - Now, stripline is proper when the width is changed.
+
+## 22.1.39 (2023-07-18)
+
+### Chart
+
+#### Bug Fixes
+
+- `#I474743` - Fixed issue where chart type did not change when updated using the "type" attribute.
+- `#I473789` - Fixed an issue where the chart was not getting rendered in PhantomJS.
+- `#I473845` - Resolved an issue where axis labels were not rendering correctly during export and initial render.
+- `#I478252` - Improved the accessibility of the legend.
+- `#I478253` - Updated the accessibility text in the chart container.
+- `#I481747` - Now, the double axis labels are correct when the culture is set to 'it'.
+
+## 22.1.38 (2023-07-11)
+
+### Chart
+
+#### Bug Fixes
+
+- `#I475437` - Resolved issue where crosshair intersection point was not properly displayed.
+- `#I463171` - Resolved issue where column width was not properly displayed.
+
+## 22.1.37 (2023-07-04)
+
+### Chart
+
+#### Bug Fixes
+
+- `#I464403` - Fixed an issue where the dash array in segmented stripline was not working properly.
+- `#I473748` - Fixed issue where the chart was not being rendered when a null value was given as the series name.
+- `#I474198` - Fixed an issue where the x axis label was not displayed correctly.
+- `#I474198` - Fixed an issue where the first label was getting cut off when the edgeLabelPlacement was set to 'shift'.
+
+## 22.1.36 (2023-06-28)
+
+### Chart
+
+#### Bug Fixes
+
+- `#F182477` - Resolved the issue where the X axis displayed all values even when an interval of 1 and only one data point was provided.
+- `#I471069` - Fixed an issue where multiple axes were not displaying properly when using large records of data.
+- `#I461357` - Fixed issue with selection not working when using zoom settings.
+
+## 22.1.34 (2023-06-21)
+
+### Chart
+
+#### New Features
+
+- `#I461049` - Provided support to display a zoom toolbar for the chart on initial load, which allows user to zoom in on the chart.
+- `#I439527` - Provided support for a cross-shaped marker to the data points in the chart.
+- `#I283789` - Provided support to position the chart title to the left, right, or bottom of the chart.
+- `#I286744` - It is now possible to customize the axis scroll bar by changing its color and height, and disable zooming in the scrollbar.
+- `#I386094` - Improved the axis label placement after line break.
+- `#I428708` - Provided distinct markers shape for each series in the chart.
+- `#I404448` - It is now possible to customize the Pareto axis and line in terms of marker, width, dash array, and color.
+
+#### Breaking Changes
+
+- To differentiate between marker shapes in the `ChartShape` enumeration, the existing Cross shape has been replaced with Plus, while a new enumeration, Cross, has been added for the cross shape.
+
+#### Bug Fixes
+
+- `#I467459` - The legend is now rendering properly when resizing the chart.
+- `#F182605` - The multicolored line series chart is now rendering properly while using `isInversed` in the primary Y-axis.
+- `#I467459` - Now, the axis labels are rotating properly in the canvas mode.
+
+### Stock Chart
+
+#### Breaking Changes
+
+- By default, the series type and trendline dropdowns have been removed from the stock chart period selector. However, you can still add them to the list upon request or as needed. This modification provides a cleaner interface and reduces clutter in the stock chart period selector.
+- By default, the tooltip for the range selector in the stock chart has been removed. Instead, the tooltip will now appear only when you move the slider.
+- The print option has been removed from the period selector because it is already available in the export dropdown. This modification provides a cleaner interface and reduces clutter in the stock chart's period selector.
+
+## 21.2.10 (2023-06-13)
+
+### Chart
+
+#### Bug Fixes
+
+`#I451537` - Spline is now proper for negative points without specify the range.
+
+
+## 21.2.9 (2023-06-06)
+
+### Chart
+
+#### Bug Fixes
+
+- `#F182216` - Fixed the issue where the data label was hidden.
+- `#I464403` - Fixed an issue where strip line text was getting cut off when it was too long.
+
+## 21.2.8 (2023-05-30)
+
+### Chart
+
+#### Bug Fixes
+
+- `#F181551` - The tooltip now displays the percentage of each stacking group.
+- `#F182191` - Now, tooltip values are displayed correctly when no data is given for the data point in a series.
+- `#I461357` - Now, zooming and selection are working properly when using both at the same time.
+- `#I452148` - The issue of the y-axis label overlap has been fixed.
+- `#I464813` - Fixed MinorGridLine to be visible even when the width is not set for MajorTickLine.
+- `#I463171` - Fixed issue where column width was not being set properly.
+- `#I462090` - Fixed an issue where startFromAxis was not working correctly for stripLine.
+
+## 21.2.6 (2023-05-23)
+
+### Chart
+
+#### Bug Fixes
+
+- `#F182033` - The marker is now proper while zooming the chart.
+
+## 21.2.5 (2023-05-16)
+
+### Chart
+
+#### Bug Fixes
+
+- `#F181976` - Now the tooltip is proper when using two axes in a chart.
+- `#I451537` - Now, the axis label value is correct when an interval is not given.
+- `#I451537` - Fixed an issue where the axis label was not displaying correctly.
+- `#I451537` - Now, the secondary axis label will be correctly displayed without an interval.
+- `#I452395` - Fixed an issue where the y-axis axis label was displaying double values.
+- `#I452390` - Fixed the issue where the axis label was being trimmed despite the shift given to the edgeLabelPlacement.
+
+## 21.2.4 (2023-05-09)
+
+### Chart
+
+#### Bug Fixes
+
+- `#I457088` - Fixed the console error thrown on clicking on the legend.
+- `#I459170` - Now the accumulation data label is visible when using a template.
+
 ## 21.2.3 (2023-05-03)
 
 ### Chart
diff --git a/components/charts/package.json b/components/charts/package.json
index a6f248b7..ca31a1ab 100644
--- a/components/charts/package.json
+++ b/components/charts/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@syncfusion/ej2-angular-charts",
-	"version": "21.2.3",
+	"version": "22.1.39",
 	"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",
diff --git a/components/charts/src/chart/series.directive.ts b/components/charts/src/chart/series.directive.ts
index 186aeffc..54c5b536 100644
--- a/components/charts/src/chart/series.directive.ts
+++ b/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', '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', '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
@@ -68,7 +68,7 @@ export class SeriesDirective extends ComplexBase<SeriesDirective> {
     /** 
      * This property is used in financial charts to visualize the price movements in stock. 
      * It defines the color of the candle/point, when the opening price is less than the closing price.
-     * @default '#2ecd71'
+     * @default null
      */
     public bearFillColor: any;
     /** 
@@ -92,7 +92,7 @@ export class SeriesDirective extends ComplexBase<SeriesDirective> {
     /** 
      * This property is used in financial charts to visualize the price movements in stock. 
      * It defines the color of the candle/point, when the opening price is higher than the closing price.
-     * @default '#e74c3d'
+     * @default null
      */
     public bullFillColor: any;
     /** 
@@ -289,6 +289,10 @@ export class SeriesDirective extends ComplexBase<SeriesDirective> {
      * @default ''
      */
     public open: any;
+    /** 
+     * Options for customizing the pareto line series.
+     */
+    public paretoOptions: any;
     /** 
      * The DataSource field that contains the color value of point 
      * It is applicable for series
diff --git a/components/charts/src/chart/striplines.directive.ts b/components/charts/src/chart/striplines.directive.ts
index 1af6c6d7..c9a6e6ec 100644
--- a/components/charts/src/chart/striplines.directive.ts
+++ b/components/charts/src/chart/striplines.directive.ts
@@ -3,7 +3,7 @@ import { ComplexBase, ArrayBase, setValue } from '@syncfusion/ej2-angular-base';
 
 
 
-let input: string[] = ['border', 'color', 'dashArray', 'end', 'horizontalAlignment', 'isRepeat', 'isSegmented', 'opacity', 'repeatEvery', 'repeatUntil', 'rotation', 'segmentAxisName', 'segmentEnd', 'segmentStart', 'size', 'sizeType', 'start', 'startFromAxis', 'text', 'textStyle', 'verticalAlignment', 'visible', 'zIndex'];
+let input: string[] = ['border', 'color', 'dashArray', 'end', 'horizontalAlignment', 'imageUrl', 'isRepeat', 'isSegmented', 'opacity', 'repeatEvery', 'repeatUntil', 'rotation', 'segmentAxisName', 'segmentEnd', 'segmentStart', 'size', 'sizeType', 'start', 'startFromAxis', 'text', 'textStyle', 'verticalAlignment', 'visible', 'zIndex'];
 let outputs: string[] = [];
 /**
  * StripLine Directive
@@ -57,6 +57,11 @@ export class StripLineDirective extends ComplexBase<StripLineDirective> {
      * @default 'Middle'
      */
     public horizontalAlignment: any;
+    /** 
+     * The URL of the background image for the strip line.
+     * @default ''
+     */
+    public imageUrl: any;
     /** 
      * isRepeat value of the strip line.
      * @default false
diff --git a/components/charts/src/range-navigator/rangenavigator.component.ts b/components/charts/src/range-navigator/rangenavigator.component.ts
index f1c1c10f..d6eb12cd 100644
--- a/components/charts/src/range-navigator/rangenavigator.component.ts
+++ b/components/charts/src/range-navigator/rangenavigator.component.ts
@@ -4,7 +4,7 @@ import { RangeNavigator } from '@syncfusion/ej2-charts';
 import { Template } from '@syncfusion/ej2-angular-base';
 import { RangenavigatorSeriesCollectionDirective } from './series.directive';
 
-export const inputs: string[] = ['allowIntervalData','allowSnapping','animationDuration','background','dataSource','disableRangeSelector','enableDeferredUpdate','enableGrouping','enablePersistence','enableRtl','groupBy','height','interval','intervalType','labelFormat','labelIntersectAction','labelPosition','labelStyle','locale','logBase','majorGridLines','majorTickLines','margin','maximum','minimum','navigatorBorder','navigatorStyleSettings','periodSelectorSettings','query','secondaryLabelAlignment','series','skeleton','skeletonType','theme','tickPosition','tooltip','useGroupingSeparator','value','valueType','width','xName','yName'];
+export const inputs: string[] = ['allowIntervalData','allowSnapping','animationDuration','background','dataSource','disableRangeSelector','enableDeferredUpdate','enableGrouping','enablePersistence','enableRtl','groupBy','height','interval','intervalType','labelFormat','labelIntersectAction','labelPlacement','labelPosition','labelStyle','locale','logBase','majorGridLines','majorTickLines','margin','maximum','minimum','navigatorBorder','navigatorStyleSettings','periodSelectorSettings','query','secondaryLabelAlignment','series','skeleton','skeletonType','theme','tickPosition','tooltip','useGroupingSeparator','value','valueType','width','xName','yName'];
 export const outputs: string[] = ['beforePrint','beforeResize','changed','labelRender','load','loaded','resized','selectorRender','tooltipRender','dataSourceChange'];
 export const twoWays: string[] = ['dataSource'];
 
diff --git a/components/circulargauge/CHANGELOG.md b/components/circulargauge/CHANGELOG.md
index 5032032b..d0189953 100644
--- a/components/circulargauge/CHANGELOG.md
+++ b/components/circulargauge/CHANGELOG.md
@@ -5,7 +5,7 @@
 
 ## [Unreleased]
 
-## 21.1.35 (2023-03-23)
+## 21.1.37 (2023-03-29)
 
 ### Circular Gauge
 
@@ -403,14 +403,6 @@ customized.
 - **User Interaction** - Supports interactive features like tooltip and pointer drag and drop.
 
 
-## 21.1.38 (2023-04-04)
-
-### Circular Gauge
-
-#### New Features
-
-- `#I416334` - The entire circular gauge, including the tooltip and legend, can now be rendered in the right-to-left (RTL) direction, which may be useful in some cultures.
-
 ## 19.4.38 (2021-12-17)
 
 ### CircularGauge
diff --git a/components/circulargauge/package.json b/components/circulargauge/package.json
index 570884a3..c3934811 100644
--- a/components/circulargauge/package.json
+++ b/components/circulargauge/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@syncfusion/ej2-angular-circulargauge",
-	"version": "21.2.3",
+	"version": "16.41.8",
 	"description": "Essential JS 2 CircularGauge Components for Angular",
 	"author": "Syncfusion Inc.",
 	"license": "SEE LICENSE IN license",
diff --git a/components/circulargauge/src/circular-gauge/annotations.directive.ts b/components/circulargauge/src/circular-gauge/annotations.directive.ts
index 00c29ac9..afbe5e8f 100644
--- a/components/circulargauge/src/circular-gauge/annotations.directive.ts
+++ b/components/circulargauge/src/circular-gauge/annotations.directive.ts
@@ -56,6 +56,7 @@ export class AnnotationDirective extends ComplexBase<AnnotationDirective> {
     /** 
      * Sets and gets the content of the annotation. This property accepts the HTML string or id of the custom element.
      * @default null
+     * @asptype string
      */
     @ContentChild('content')
     @Template()
diff --git a/components/diagrams/CHANGELOG.md b/components/diagrams/CHANGELOG.md
index 5a56dec6..082a99f8 100644
--- a/components/diagrams/CHANGELOG.md
+++ b/components/diagrams/CHANGELOG.md
@@ -2,6 +2,95 @@
 
 ## [Unreleased]
 
+## 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)
+
+### Diagram
+
+#### Bug Fixes
+
+- `#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.
+
+## 22.1.34 (2023-06-21)
+
+### Diagram
+
+#### New Features
+
+- `#F152758` - Added tooltip support for ports.
+- `#I420267` - Added tooltip support for symbols in the symbol palette.
+- `#I32153` - Provided vertical orientation for mind maps.
+- `#I392082` - Added functionality to load diagrams from EJ1 to EJ2.
+- `#I327078` - Provided support to customize the expand and collapse icons.
+
+## 21.2.9 (2023-06-06)
+
+### Diagram
+
+#### Bug Fixes
+
+- `#I463138` - Now, Scroll bar is updated properly without flickering while scrolling the diagram using touchpad.
+- `#I464508` - The DOM Exception will no longer thrown while adding group node dynamically with multiple layers.
+
+## 21.2.8 (2023-05-30)
+
+### Diagram
+
+#### Bug Fixes
+
+- `#I461020` - The undefined Exception will No longer thrown while dragging Swimlane after performing undo/redo on swimlane child nodes.
+- `#I462780` - Now, Nodes are updated properly while zoom out diagram in canvas mode.
+
+## 21.2.6 (2023-05-23)
+
+### Diagram
+
+#### Bug Fixes
+
+- `#I464229` -  Now, Complex hierarchical tree layout is working fine while injecting line distribution.
+
+## 21.2.5 (2023-05-16)
+
+### Diagram
+
+#### Bug Fixes
+
+- `#I456104` -  Now, swimlane child nodes are selectable after save and load.
+
+## 21.2.4 (2023-05-09)
+
+### Diagram
+
+#### Bug Fixes
+
+- `#I456288` - Now, scroller updated properly when we move nodes outside viewport.
+- `#I458205` - Now, bezier connector annotation alignment is working properly.
+- `#I456037` - Now, while hovering the port with single select and ZoomPan constraints drawing tool enabled.
+
 ## 21.2.3 (2023-05-03)
 
 ### Diagram
diff --git a/components/diagrams/package.json b/components/diagrams/package.json
index 10f409c5..6add0728 100644
--- a/components/diagrams/package.json
+++ b/components/diagrams/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@syncfusion/ej2-angular-diagrams",
-	"version": "21.2.3",
+	"version": "22.1.38",
 	"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",
diff --git a/components/diagrams/src/diagram/diagram.component.ts b/components/diagrams/src/diagram/diagram.component.ts
index 60e1c3e7..681ad669 100644
--- a/components/diagrams/src/diagram/diagram.component.ts
+++ b/components/diagrams/src/diagram/diagram.component.ts
@@ -84,6 +84,7 @@ export class DiagramComponent extends Diagram implements IComponentBase {
     /** 
      * Customizes the annotation template
      * @default undefined
+     * @asptype string
      */
     @ContentChild('annotationTemplate')
     @Template()
@@ -91,6 +92,7 @@ export class DiagramComponent extends Diagram implements IComponentBase {
     /** 
      * Customizes the node template
      * @default undefined
+     * @asptype string
      */
     @ContentChild('nodeTemplate')
     @Template()
@@ -98,6 +100,7 @@ export class DiagramComponent extends Diagram implements IComponentBase {
     /** 
      * This property represents the template content of a user handle. The user can define any HTML element as a template.
      * @default undefined
+     * @asptype string
      */
     @ContentChild('userHandleTemplate')
     @Template()
diff --git a/components/diagrams/src/diagram/ports.directive.ts b/components/diagrams/src/diagram/ports.directive.ts
index 63a4eb04..587ccbc9 100644
--- a/components/diagrams/src/diagram/ports.directive.ts
+++ b/components/diagrams/src/diagram/ports.directive.ts
@@ -3,7 +3,7 @@ import { ComplexBase, ArrayBase, setValue } from '@syncfusion/ej2-angular-base';
 
 
 
-let input: string[] = ['addInfo', 'constraints', 'height', 'horizontalAlignment', 'id', 'inEdges', 'margin', 'offset', 'outEdges', 'pathData', 'shape', 'style', 'verticalAlignment', 'visibility', 'width'];
+let input: string[] = ['addInfo', 'constraints', 'height', 'horizontalAlignment', 'id', 'inEdges', 'margin', 'offset', 'outEdges', 'pathData', 'shape', 'style', 'tooltip', 'verticalAlignment', 'visibility', 'width'];
 let outputs: string[] = [];
 /**
  * Nodes Directive
@@ -106,6 +106,11 @@ export class PortDirective extends ComplexBase<PortDirective> {
      * @default {}
      */
     public style: any;
+    /** 
+     * defines the tooltip for the Ports
+     * @default new DiagramToolTip();
+     */
+    public tooltip: any;
     /** 
      * Sets the vertical alignment of the port with respect to its immediate parent(node/connector) 
      * * Stretch - Stretches the diagram element throughout its immediate parent 
diff --git a/components/diagrams/styles/diagram/material3-dark.scss b/components/diagrams/styles/diagram/material3-dark.scss
new file mode 100644
index 00000000..54a8cabb
--- /dev/null
+++ b/components/diagrams/styles/diagram/material3-dark.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-dark-definition.scss';
+@import 'ej2-diagrams/styles/diagram/material3-dark.scss';
diff --git a/components/diagrams/styles/diagram/material3.scss b/components/diagrams/styles/diagram/material3.scss
new file mode 100644
index 00000000..3b600835
--- /dev/null
+++ b/components/diagrams/styles/diagram/material3.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-definition.scss';
+@import 'ej2-diagrams/styles/diagram/material3.scss';
diff --git a/components/diagrams/styles/material3-dark.scss b/components/diagrams/styles/material3-dark.scss
new file mode 100644
index 00000000..9cb1fc19
--- /dev/null
+++ b/components/diagrams/styles/material3-dark.scss
@@ -0,0 +1,2 @@
+
+@import 'diagram/material3-dark.scss';
diff --git a/components/diagrams/styles/material3.scss b/components/diagrams/styles/material3.scss
new file mode 100644
index 00000000..d053c969
--- /dev/null
+++ b/components/diagrams/styles/material3.scss
@@ -0,0 +1,2 @@
+
+@import 'diagram/material3.scss';
diff --git a/components/documenteditor/CHANGELOG.md b/components/documenteditor/CHANGELOG.md
index 1f807dab..c0f5e372 100644
--- a/components/documenteditor/CHANGELOG.md
+++ b/components/documenteditor/CHANGELOG.md
@@ -2,6 +2,167 @@
 
 ## [Unreleased]
 
+## 22.2.5 (2023-07-27)
+
+### Document Editor
+
+#### Bug Fixes
+
+- `#I475597` - Now, show alert Message while entering invalid hyperlink address.
+- `#I473464` - Resolved the Toolbar disappear issue while destroy and re-append container instance.
+- `#I478156` - Resolved the text cut issue while highlighting selected text
+
+#### Breaking Changes
+
+- By default, the `enableOptimizedSpellCheck` property is set to `false`. However, when you enable the `enableSpellCheck` property, the `enableOptimizedSpellCheck` is automatically enabled as well.
+
+## 22.1.39 (2023-07-18)
+
+### Document Editor
+
+#### Bug Fixes
+
+- `#I476853` - Resolved the script error while pasting content when enable track changes.
+- `#I475577` - Now, text inserted correctly when setting column as left, right.
+- `#I478156` - Resolved the exception throw while SaveAsBlobAsync and load in blazor.
+- `#I477929` - Fixed the issue in header rendering.
+- `#I476855` - Resolved the script error is thrown when deleting the tracked content.
+- `#I461189` - Fixed the paste issue in Footnote content.
+- `#I477905` - Resolved the Comments not highlighting issue.
+- `#I477735` - Now, Properties pane has proper focus while moving mouse from the properties.
+
+## 22.1.38 (2023-07-11)
+
+### Document Editor
+
+#### Bug Fixes
+
+- `#I476430`, `#I475526` - Resolved the control freeze issue when inserting an image inside the table.
+- `#I475535` - Fixed the wrong image rendering while pasting.
+- `#I475151` - Resolved the time delay issue while editing the document.
+- `#I471381` - Fixed the shape layout issue when do enter before the table.
+- `#I477735` - Now, the properties pane has focus while moving the mouse from the properties.
+- `#F182887` - Resolved the table missing issue while importing.
+- `#I477569` - Fixed the formatting pane issue with Material 3 theme.
+
+## 22.1.37 (2023-07-04)
+
+### Document Editor
+
+#### Bug Fixes
+
+- `#I472778` - Fixed Console error occurred while managing options in the footer and header.
+- `#I470576` - Table is now rendered properly without content overlapping issue.
+- `#I471848` - The cell merging now working properly.
+- `#I470071` - Resolved the Editor Stuck while giving comment.
+- `#I469081` - Fixed the script error when delete the resize table.
+
+## 22.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.
+
+## 21.2.10 (2023-06-13)
+
+### Document Editor
+
+#### Bug Fixes
+
+- `#I470779` - Resolved the script error when inserting comments while restrict editing is enabled.
+- `#I467632` - Resolved the Script error is thrown when opening a document after performing FindAllAsync.
+- `#I444469`, `#I467461` - Resolved the Script error occurs when opening a document.
+- `#I467769` - Print widow now closed properly after closing the parent window.
+
+## 21.2.9 (2023-06-06)
+
+### Document Editor
+
+#### Bug Fixes
+
+- `#I454822` - Resolved the issue occurred when performing the pasting functionality.
+- `#I455887` - Resolved the Editor height is increased issue when selecting or inserting text.
+- `#I461390` - Resolved the Endnote/footnote number inconsistency.
+- `#F182256` - Table cell border now applying properly.
+- `#I458144` - Now, Docx exporting properly.
+- `#I464522` - Resolved the issue in bookmark removal when deleting table.
+- `#I466742` - Resolved the text selection issue while retrieving the selected text.
+
+## 21.2.8 (2023-05-30)
+
+### Document Editor
+
+#### Bug Fixes
+
+- `#I454919` - ShowComment API is now working properly.
+- `#FB43366` - when track changes is enabled, chinese letters are now properly rendered.
+- `#I457517` - Resolved script error occurred when removing the content.
+- `#I454821` - Resolved the issue with document parsing in the Tika server.
+- `#I457688` - Resolved the selected content removing issue.
+- `#I457853` - Select all content is now removed properly.
+- `#I458134` - Table is now rendered properly without overlapping issue.
+- `#I459215` - Resolved Black color chart appearance while exporting as Docx.
+- `#I459220` - Resolved the component hanging issue on loading a document.
+- `#I459229` - Delete/backspace is now working for RTL last content.
+- `#I461305` - Resolved the style issue while pasting content from office 365.
+- `#I453980` - When opening the exported document with chart in Document Editor is not throwing an error.
+- `#I459906` - Header/Footer class is now added while converting docx/SFDT into HTML.
+- `#F182457` - Resolved the style issue while pasting content from office 365.
+
+## 21.2.6 (2023-05-23)
+
+### Document Editor
+
+#### Bug Fixes
+
+- `#I455945` - Resolved the issue in Shape position.
+- `#I457467` - Now, getStyle() API will return the paragraph format.
+- `#I454858` - Resolved the image missing issue in footer.
+- `#I451667` - Horizontal scroll bar is not update properly based on cursor position.
+- `#I457039` - Resolved the console error while giving accept all.
+- `#I453407` - Resolved the script error when loading the document with smileys.
+
+#### New Features
+
+- `#I448978` - Added preservation support for text wrapping break.
+- `#F179297` - Added navigation support between the multiple comments in a single line while clicking the comment icon.
+- `#I433546` - Added support to show start and end markers for restricted range.
+- `#I450206` - Added support to restrict maximum number of columns when creating a table.
+
+## 21.2.5 (2023-05-16)
+
+### Document Editor
+
+#### Bug Fixes
+
+- `#I449912` - Resolved layout issue while opening document.
+- `#I450342` - Resolved the wrong Font issue while opening a document.
+- `#I458331` - Resolved the paragraph combine issue when insert and delete comment.
+- `#I458334` - Cursor position issue is resolved when shift enter key is pressed.
+- `#I449581` - Resolved the script error when loading the track changes document with author field empty
+- `#I452303` - Layout issue is now not occurred when editing the document.
+- `#I452150` - Resolved the hanging issue when opening the attached document.
+- `#I453495` - Resolved the Overlapping issue when we do enter/page break before the shape.
+- `#I453196` - Resolved the issue in when perform undo action for Arabic content
+- `#I454659` - Resolved the issue occurred when performing track changes for Arabic content.
+- `#I449049` - A performance issue is resolved when typing inside the table.
+
+## 21.2.4 (2023-05-09)
+
+### Document Editor
+
+#### Bug Fixes
+
+- `#I451421` - Resolved the issue with list indentation.
+- `#I450834` - Resolved the Script issue while opening SFDT.
+- `#I452243` - Resolved the issue with modifying the style in existing styles.
+- `#I449324` - Resolved the issue occurred while exporting the document in the .docx format.
+
 ## 21.2.3 (2023-05-03)
 
 ### Document Editor
@@ -3347,3 +3508,14 @@ 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.
+
diff --git a/components/documenteditor/package.json b/components/documenteditor/package.json
index ec02ea2e..c2495583 100644
--- a/components/documenteditor/package.json
+++ b/components/documenteditor/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@syncfusion/ej2-angular-documenteditor",
-	"version": "21.1.41",
+	"version": "22.1.39",
 	"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",
diff --git a/components/documenteditor/styles/document-editor-container/material3-dark.scss b/components/documenteditor/styles/document-editor-container/material3-dark.scss
new file mode 100644
index 00000000..88849c3e
--- /dev/null
+++ b/components/documenteditor/styles/document-editor-container/material3-dark.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-dark-definition.scss';
+@import 'ej2-documenteditor/styles/document-editor-container/material3-dark.scss';
diff --git a/components/documenteditor/styles/document-editor-container/material3.scss b/components/documenteditor/styles/document-editor-container/material3.scss
new file mode 100644
index 00000000..da5f4cb6
--- /dev/null
+++ b/components/documenteditor/styles/document-editor-container/material3.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-definition.scss';
+@import 'ej2-documenteditor/styles/document-editor-container/material3.scss';
diff --git a/components/documenteditor/styles/document-editor/material3-dark.scss b/components/documenteditor/styles/document-editor/material3-dark.scss
new file mode 100644
index 00000000..9e22e68b
--- /dev/null
+++ b/components/documenteditor/styles/document-editor/material3-dark.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-dark-definition.scss';
+@import 'ej2-documenteditor/styles/document-editor/material3-dark.scss';
diff --git a/components/documenteditor/styles/document-editor/material3.scss b/components/documenteditor/styles/document-editor/material3.scss
new file mode 100644
index 00000000..2a1da931
--- /dev/null
+++ b/components/documenteditor/styles/document-editor/material3.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-definition.scss';
+@import 'ej2-documenteditor/styles/document-editor/material3.scss';
diff --git a/components/documenteditor/styles/material3-dark.scss b/components/documenteditor/styles/material3-dark.scss
new file mode 100644
index 00000000..125e5ef8
--- /dev/null
+++ b/components/documenteditor/styles/material3-dark.scss
@@ -0,0 +1,3 @@
+
+@import 'document-editor/material3-dark.scss';
+@import 'document-editor-container/material3-dark.scss';
diff --git a/components/documenteditor/styles/material3.scss b/components/documenteditor/styles/material3.scss
new file mode 100644
index 00000000..f8229b30
--- /dev/null
+++ b/components/documenteditor/styles/material3.scss
@@ -0,0 +1,3 @@
+
+@import 'document-editor/material3.scss';
+@import 'document-editor-container/material3.scss';
diff --git a/components/dropdowns/CHANGELOG.md b/components/dropdowns/CHANGELOG.md
index 45cc0349..5f92df86 100644
--- a/components/dropdowns/CHANGELOG.md
+++ b/components/dropdowns/CHANGELOG.md
@@ -2,6 +2,123 @@
 
 ## [Unreleased]
 
+## 22.2.5 (2023-07-27)
+
+### Dropdown Tree
+
+#### Bug Fixes
+
+- `#I481958` - The issue with "Child nodes are not rendering while mapping id with object value" has been resolved.
+
+## 22.1.39 (2023-07-18)
+
+### ListBox
+
+#### Bug Fixes
+
+- `#I473804` - Issue with "Scroll goes down while dragging the list item when we placed the listbox within popup" has been resolved.
+
+### MultiSelect
+
+#### Bug Fixes
+
+- `#I480443` - Fixed console error that occurred when opening the multiselect in mobile mode
+
+## 22.1.37 (2023-07-04)
+
+### DropdownList
+
+#### Bug Fixes
+
+- `#I472623` - Resolved an issue when the window is resizing the popup position is misaligned
+- `#I467885` - Resolved an issue where the change event was not triggered for dynamically created TextBox after dropdown component was destroyed.
+
+### MultiSelect
+
+#### Bug fixes
+
+- `#F182529` - Resolved the issue with "Component locale noRecordsTemplate not working individually".
+
+## 22.1.36 (2023-06-28)
+
+### ListBox
+
+#### Bug Fixes
+
+- `#I473804` - Issue with "Scroll goes down while dragging the list item when we placed the listbox within popup" has been resolved.
+
+## 21.2.10 (2023-06-13)
+
+### ListBox
+
+#### Bug Fixes
+
+- `#F43705` - Issue with "Dropping selected items does not work correctly while enabling the checkbox in listbox component." has been resolved.
+- `#I462373` - Issue with "Double quotes value not submitted while using the listbox component within the form." has been resolved.
+
+### MultiSelect
+
+#### Bug Fixes
+
+- `#I467953` - Issue with "Query construct incorrectly when preselect the value second time beyond the data source value" has been resolved.
+
+### DropDownList
+
+#### Bug Fixes
+
+- `I469452` - Issue with "A console error is thrown when the datasource value field has a null value in the dropdown list" has been resolved.
+
+## 21.2.8 (2023-05-30)
+
+### ListBox
+
+#### Bug Fixes
+
+- `#I462373` - Issue with "Double quotes value not submitted while using the listbox component within the form." has been resolved.
+
+### AutoComplete
+
+#### Bug Fixes
+
+- `#I460876` - Issue with "The header and footer template are not working" has been resolved.
+
+## 21.2.6 (2023-05-23)
+
+### MultiSelect
+
+#### Bug Fixes
+
+- `#I451885` - Resolved the performance issue when multiselect component is rendered with large number of data.
+
+### DropDownList
+
+#### Bug Fixes
+
+- `I460077` - Issue with "The popup is not closing properly when the focus is moved between two dropdowns" has been resolved.
+
+## 21.2.5 (2023-05-16)
+
+### ListBox
+
+#### Bug Fixes
+
+- `#I461307` - Issue with "No Records Template not renders properly when we set the default string in listbox" has been resolved.
+
+### ComboBox
+
+#### Bug Fixes
+
+- `#I452948` - "The memory leak issue detected in the combobox component within the detach element tab of the Edge browser" has been resolved.
+
+## 21.2.4 (2023-05-09)
+
+### ListBox
+
+#### Bug Fixes
+
+- `#I453746` - Issue with "Selected items not focusing properly in listbox while using selectItems method" has been resolved.
+- `#I461307` - Issue with "No Records Template not renders properly when we set the default string in listbox" has been resolved.
+
 ## 21.2.3 (2023-05-03)
 
 ### ListBox
@@ -24,13 +141,6 @@
 
 - `#I451965` - While performing filtering multiple times, the checked node state is cleared in the Dropdown Tree component has been resolved.
 
-### MultiSelect
-
-#### Bug Fixes
-
-- `I451885` - The issue of being "unable to clear the value when 1000 data is bound to the multiselect component" has been resolved.
-- `I451655` - Issue with "Script error thrown when type text before open the popup using slow 3G" has been resolved.
-
 ## 21.1.39 (2023-04-11)
 
 ### ListBox
@@ -40,12 +150,6 @@
 - `#F181131` - Issue with "No Record Found text disappears while hovering the drag item on list box without drop" has been resolved.
 - `#F181311` - Issue with "Scrolling is not working while drag and drop the list box with item Template" has been resolved.
 
-### MultiSelect
-
-#### Bug Fixes
-
-- `I454326` - The issue of "Browser hanging when focusing on the multiselect component in checkbox mode" has been resolved.
-
 ## 21.1.38 (2023-04-04)
 
 ### Dropdown Tree
@@ -83,12 +187,6 @@
 
 - `#I397894` - The issue "aria-label added on input element instead of wrapper element while adding the aria-label by using Html Attribute property" has been resolved.
 
-### ComboBox
-
-#### Bug Fixes
-
-- `#I435138` - Issue with "NVDA reader does not announces the aria-label text when added through Html Attribute" has been resolved.
-
 ## 20.3.47 (2022-09-29)
 
 ### Mention
@@ -2175,6 +2273,14 @@ DropDownList component contains a list of predefined values from which a single
 - **Accessibility** - Provided with built-in accessibility support which helps to access all the DropDownList component features through the keyboard, screen readers, or other assistive technology devices.
 
 
+## 22.1.34 (2023-06-21)
+
+### MultiSelect
+
+#### Bug fixes
+
+- `#I463710` - The issue with "select all" not being accessible via keyboard and the focus being moved to the filter input after selecting a list item in checkbox mode has been resolved.
+
 ## 19.4.38 (2021-12-17)
 
 ### ComboBox
diff --git a/components/dropdowns/README.md b/components/dropdowns/README.md
index ac136fa1..a4640eeb 100644
--- a/components/dropdowns/README.md
+++ b/components/dropdowns/README.md
@@ -1,119 +1,217 @@
-# ej2-angular-dropdowns
+# Angular DropDowns Components
 
 Superset of HTML select box contains specific features such as data binding, grouping, sorting, filtering, and templates.
 
-![Dropdowns](https://ej2.syncfusion.com/products/images/dropdowns/readme.gif)
+## What's Included in the Angular DropDown Package
 
->Note: This is a commercial product and requires a paid license for possession or use. Syncfusion’s licensed software, including this component, is subject to the terms and conditions of Syncfusion's EULA (https://www.syncfusion.com/eula/es/). To acquire a license, you can purchase one at https://www.syncfusion.com/sales/products or start a free 30-day trial here (https://www.syncfusion.com/account/manage-trials/start-trials).
+The Angular DropDown package includes the following list of components.
 
->A free community license (https://www.syncfusion.com/products/communitylicense) is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers..
+### Angular DropDownList
 
-## 1. Setup To install this package and its dependent packages, use the following command
+The [Angular DropdownList](https://www.syncfusion.com/angular-components/angular-dropdown-list?utm_source=npm&utm_medium=listing&utm_campaign=angular-dropdown-npm) component is a quick replacement of the HTML select tags. It has a rich appearance and allows users to select a single value that is non-editable from a list of predefined values.
 
-Use the following command to install drop-down components and its dependent packages
+<p align="center">
+    <a href="https://ej2.syncfusion.com/angular/documentation/drop-down-list/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=angular-dropdown-npm">Getting Started</a> .
+    <a href="https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-dropdown-npm#/material/drop-down-list/default">Online demos</a> .
+    <a href="https://www.syncfusion.com/angular-components/angular-dropdown-list?utm_source=npm&utm_medium=listing&utm_campaign=angular-dropdown-npm">Learn more</a>
+</p>
+
+<p align="center">
+<img alt="Angular DropDownList Component" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/angular/angular-dropdownlist.png">
+</p>
+
+#### Key features
+
+* [Data binding](https://ej2.syncfusion.com/angular/demos/#/material/drop-down-list/data-binding) - Binds and accesses the list of items from the local or server-side data source.
+* [Grouping](https://ej2.syncfusion.com/angular/demos/#/material/drop-down-list/grouping-icon) - Groups the logically related items under a single or specific category.
+* [Sorting](https://ej2.syncfusion.com/angular/documentation/api/drop-down-list#sortorder) - Sorts the list items in alphabetical order (either ascending or descending).
+* [Filtering](https://ej2.syncfusion.com/angular/demos/#/material/drop-down-list/filtering) - Filters the list items based on a character typed in the search box.
+* [Templates](https://ej2.syncfusion.com/angular/demos/#/material/drop-down-list/template) - Customizes the list items, selected value, header, footer, category group header, and no records content.
+* [Accessibility](https://ej2.syncfusion.com/angular/documentation/drop-down-list/accessibility) - Provided with built-in accessibility support used to access all the DropDownList component features using keyboard, screen readers, or other assistive technology devices.
+
+### Angular DropDownTree
+
+The [Angular DropDownTree](https://www.syncfusion.com/angular-components/angular-dropdown-tree?utm_source=npm&utm_medium=listing&utm_campaign=angular-dropdown-npm) component is a textbox control that allows the user to select single or multiple values from hierarchical data in a tree-like structure. It has several out-of-the-box features, such as data binding, check boxes, templates, UI customization, accessibility, and preselected values.
+
+<p align="center">
+    <a href="https://ej2.syncfusion.com/angular/documentation/drop-down-tree/getting-started?utm_source=npm&utm_medium=listing&utm_campaign=angular-dropdown-npm">Getting Started</a> .
+    <a href="https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-dropdown-npm#/material/drop-down-tree/default">Online demos</a> .
+    <a href="https://www.syncfusion.com/angular-components/angular-dropdown-tree?utm_source=npm&utm_medium=listing&utm_campaign=angular-dropdown-npm">Learn more</a>
+</p>
+
+<p align="center">
+<img alt="Angular DropDownTree Component" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/angular/angular-dropdowntree.png">
+</p>
+
+#### Key features
+
+* [Data binding](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-dropdown-npm#/material/drop-down-tree/local-data) - Binds and accesses the list of items from the local or remote data source.
+* [Checkbox](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-dropdown-npm#/material/drop-down-tree/checkbox) - Built-in support for checkboxes, allowing users to select single or multiple items.
+* [Template](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-dropdown-npm#/material/drop-down-tree/template) - To change the appearance of the selection pop-up for tree items, plus the header and footer of the pop-up tree.
+* [Filtering](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-dropdown-npm#/material/drop-down-tree/filtering) - Filters the list items based on a character typed in the search box.
+
+### Angular Mention
+
+The [Angular Mention](https://www.syncfusion.com/angular-components/angular-mention?utm_source=npm&utm_medium=listing&utm_campaign=angular-dropdown-npm) component is an autocomplete-like control to tag or select a user/group from the suggestion list. The control opens the suggestion list when a user starts typing with the character ‘@’ in popular social media sites such as Facebook, Twitter, and more. It supports several out-of-the-box features: Data binding, grouping, UI customization, accessibility, and more.
+
+<p align="center">
+    <a href="https://ej2.syncfusion.com/angular/documentation/mention/getting-started?utm_source=npm&utm_medium=listing&utm_campaign=angular-dropdown-npm">Getting Started</a> .
+    <a href="https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-dropdown-npm#/material/mention/default">Online demos</a> .
+    <a href="https://www.syncfusion.com/angular-components/angular-mention?utm_source=npm&utm_medium=listing&utm_campaign=angular-dropdown-npm">Learn more</a>
+</p>
+
+<p align="center">
+<img alt="Angular Mention Component" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/angular/angular-mention.png">
+</p>
+
+#### Key features
+
+* [Sorting](https://ej2.syncfusion.com/angular/documentation/mention/sorting?utm_source=npm&utm_medium=listing&utm_campaign=angular-dropdown-npm) - Sorts the list items in alphabetical order (either ascending or descending).
+* [Filtering](https://ej2.syncfusion.com/angular/documentation/mention/filtering-data?utm_source=npm&utm_medium=listing&utm_campaign=angular-dropdown-npm) - Filters the list items based on a character typed in the search box.
+
+### Angular ComboBox
+
+The [Angular ComboBox](https://www.syncfusion.com/angular-components/angular-combobox?utm_source=npm&utm_medium=listing&utm_campaign=angular-dropdown-npm) component is a drop-down list with editable textbox that also allows users to choose an option from a predefined pop-up list.
+
+<p align="center">
+    <a href="https://ej2.syncfusion.com/angular/documentation/combo-box/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=angular-dropdown-npm">Getting Started</a> .
+    <a href="https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-dropdown-npm#/material/combo-box/default">Online demos</a> .
+    <a href="https://www.syncfusion.com/angular-components/angular-combobox?utm_source=npm&utm_medium=listing&utm_campaign=angular-dropdown-npm">Learn more</a>
+</p>
+
+<p align="center">
+<img alt="Angular ComboBox Component" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/angular/angular-combobox.png">
+</p>
+
+#### Key features
+
+* [Data binding](https://ej2.syncfusion.com/angular/demos/#/material/combo-box/data-binding) - Binds and accesses the list of items from local or server-side data source.
+* [Custom values](https://ej2.syncfusion.com/angular/demos/#/material/combo-box/custom-value) - Sets user-defined values that is not in the pop-up list.
+* [Grouping](https://ej2.syncfusion.com/angular/demos/#/material/combo-box/grouping-icon) - Groups the logically related items under a single or specific category.
+* [Sorting](https://ej2.syncfusion.com/angular/documentation/api/combo-box#sortorder) - Sorts the list items in alphabetical order (either ascending or descending).
+* [Filtering](https://ej2.syncfusion.com/angular/demos/#/material/combo-box/filtering) - Filters the list items based on a character typed in the component.
+* [Templates](https://ej2.syncfusion.com/angular/demos/#/material/combo-box/template) - Customizes the list items, selected value, header, footer, category group header, and no records content.
+* [Accessibility](https://ej2.syncfusion.com/angular/documentation/combo-box/accessibility.html?lang=typescript) - Provided with built-in accessibility support that helps to access all the ComboBox component features using the keyboard, screen readers, or other assistive technology devices.
+
+### Angular AutoComplete
+
+The [Angular AutoComplete](https://www.syncfusion.com/angular-components/angular-autocomplete?utm_source=npm&utm_medium=listing&utm_campaign=angular-dropdown-npm) component is a textbox control that provides a list of suggestions to select from as the user types. It has several out-of-the-box features such as data binding, filtering, grouping, UI customization, accessibility, and more.
+
+<p align="center">
+    <a href="https://ej2.syncfusion.com/angular/documentation/auto-complete/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=angular-dropdown-npm">Getting Started</a> .
+    <a href="https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-dropdown-npm#/material/auto-complete/default">Online demos</a> .
+    <a href="https://www.syncfusion.com/angular-components/angular-autocomplete?utm_source=npm&utm_medium=listing&utm_campaign=angular-dropdown-npm">Learn more</a>
+</p>
+
+<p align="center">
+<img alt="Angular AutoComplete Component" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/angular/angular-autocomplete.png">
+</p>
+
+#### Key features
+
+* [Data binding](https://ej2.syncfusion.com/angular/demos/#/material/auto-complete/data-binding) - Binds and accesses the list of items from local or server-side data source.
+* [Grouping](https://ej2.syncfusion.com/angular/demos/#/material/auto-complete/grouping-icon) - Groups the logically related items under a single or specific category.
+* [Sorting](https://ej2.syncfusion.com/angular/documentation/api/auto-complete#sortorder) - Sorts the list items in alphabetical order (either ascending or descending).
+* [Highlight search](https://ej2.syncfusion.com/angular/demos/#/material/auto-complete/highlight) - Highlights the typed text in the suggestion list.
+* [Templates](https://ej2.syncfusion.com/angular/demos/#/material/auto-complete/template) - Customizes the list item, header, footer, category group header, no records, and action failure content.
+* [Accessibility](https://ej2.syncfusion.com/angular/documentation/auto-complete/accessibility) - Provided with built-in accessibility support that helps to access all the AutoComplete component features using keyboard, on-screen readers, or other assistive technology devices.
+
+### Angular MultiSelect
+
+The [Angular MultiSelect Dropdown](https://www.syncfusion.com/angular-components/angular-multiselect-dropdown?utm_source=npm&utm_medium=listing&utm_campaign=angular-dropdown-npm) component is a quick replacement for the HTML select tag for selecting multiple values. HTML MultiSelect Dropdown is a textbox control that allows the user to type or select multiple values from a list of predefined options.
+
+<p align="center">
+    <a href="https://ej2.syncfusion.com/angular/documentation/multi-select/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=angular-dropdown-npm">Getting Started</a> .
+    <a href="https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-dropdown-npm#/material/multi-select/default">Online demos</a> .
+    <a href="https://www.syncfusion.com/angular-components/angular-multiselect-dropdown?utm_source=npm&utm_medium=listing&utm_campaign=angular-dropdown-npm">Learn more</a>
+</p>
+
+<p align="center">
+<img alt="Angular MultiSelect Dropdown Component" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/angular/angular-multiselect.png">
+</p>
+
+#### Key features
+
+* [Data binding](https://ej2.syncfusion.com/angular/demos/#/material/multi-select/data-binding) - Binds and accesses the list of items from local or server-side data source.
+* [Grouping](https://ej2.syncfusion.com/angular/demos/#/material/multi-select/grouping) - Groups the logically related items under a single or specific category.
+* [Templates](https://ej2.syncfusion.com/angular/demos/#/material/multi-select/template) - Customizes the list items, selected value, header, footer, category group header, and     no records content.
+* [Sorting](https://ej2.syncfusion.com/angular/documentation/api/multi-select#sortorder) - Sorts the list items in alphabetical order (either ascending or descending).
+* [Filtering](https://ej2.syncfusion.com/angular/demos/#/material/multi-select/filtering) - Filters the list items based on a character typed in the search box.
+* [Custom value](https://ej2.syncfusion.com/angular/demos/#/material/multi-select/custom-value) - Allows users to select a new custom value.
+* [Accessibility](https://ej2.syncfusion.com/angular/documentation/multi-select/accessibility) - Provided with built-in accessibility support that helps to access all the DropDownList component features using the keyboard, screen readers, or other assistive technology devices.
+
+### Angular ListBox
+
+The [Angular ListBox](https://www.syncfusion.com/angular-components/angular-listbox?utm_source=npm&utm_medium=listing&utm_campaign=angular-dropdown-npm) component is a graphical user interface for displaying a list of items with multi-selection options. It has a rich appearance and allows users to select one or more items from the list using checkboxes or keyboard interactions.
+
+<p align="center">
+    <a href="https://ej2.syncfusion.com/angular/documentation/list-box/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=angular-dropdown-npm">Getting Started</a> .
+    <a href="https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-dropdown-npm#/material/list-box/default">Online demos</a> .
+    <a href="https://www.syncfusion.com/angular-components/angular-listbox?utm_source=npm&utm_medium=listing&utm_campaign=angular-dropdown-npm">Learn more</a>
+</p>
+
+<p align="center">
+<img alt="Angular ListBox Component" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/angular/angular-listbox.png">
+</p>
+
+#### Key features
+
+* [Data binding](https://ej2.syncfusion.com/angular/documentation/list-box/data-binding) - Binds and accesses the list of items from local or server-side data source.
+* [Dual listbox](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-dropdown-npm#/material/list-box/dual-list-box) - Allows transferring and reordering the list item between two ListBoxes.
+* [Drag and drop](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-dropdown-npm#/material/list-box/drag-and-drop) - Allows drag and drop the list item with the same/multiple ListBox.
+* [Grouping](https://ej2.syncfusion.com/angular/documentation/list-box/sorting-and-grouping#grouping) - Groups the logically related items under a single or specific category.
+* [Templates](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-dropdown-npm#/material/list-box/template) - Customizes the list items.
+* [Sorting](https://ej2.syncfusion.com/angular/documentation/list-box/sorting-and-grouping) - Sorts the list items in alphabetical order (either ascending or descending).
+* [Accessibility](https://ej2.syncfusion.com/angular/documentation/list-box/accessibility) - Provided with built-in accessibility support that helps to access all the ListBox component features using the keyboard, screen readers, or other assistive technology devices.
+
+<p align="center">
+Trusted by the world's leading companies
+  <a href="https://www.syncfusion.com/">
+    <img src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/syncfusion/syncfusion-trusted-companies.webp" alt="Syncfusion logo">
+  </a>
+</p>
+
+## Setup
+
+To install `dropdowns` and its dependent packages, use the following command.
 
 ```
 npm install @syncfusion/ej2-angular-dropdowns
 ```
 
-## 2. Components included
+## Supported frameworks
 
-* DropDownList - A textbox component that allows users to select a non-editable single value from the list of predefined values.
-    * [GettingStarted](https://ej2.syncfusion.com/angular/documentation/drop-down-list/getting-started.html)
-    * [View Online Demos](https://ej2.syncfusion.com/angular/demos/#/material/drop-down-list/default)
-    * [Product Page](https://www.syncfusion.com/products/angular/dropdownlist)
-* ComboBox - A textbox component that allows users to type a value or choose an option from the list of predefined options.
-    * [GettingStarted](https://ej2.syncfusion.com/angular/documentation/combo-box/getting-started.html)
-    * [View Online Demos](https://ej2.syncfusion.com/angular/demos/#/material/combo-box/default)
-    * [Product Page](https://www.syncfusion.com/products/angular/combobox)
-* Autocomplete - A textbox component that provides a list of suggestions to select based on the text typed by the users.
-    * [GettingStarted](https://ej2.syncfusion.com/angular/documentation/auto-complete/getting-started.html)
-    * [View Online Demos](https://ej2.syncfusion.com/angular/demos/#/material/auto-complete/default)
-    * [Product Page](https://www.syncfusion.com/products/angular/autocomplete)
-* MultiSelect - A textbox component that allows users to type or choose multiple values from the list of predefined options.
-    * [GettingStarted](https://ej2.syncfusion.com/angular/documentation/multi-select/getting-started.html)
-    * [View Online Demos](https://ej2.syncfusion.com/angular/demos/#/material/multi-select/default)
-    * [Product Page](https://www.syncfusion.com/products/angular/multiselect)
-* ListBox - ListBox is a graphical user interface component used to display a list of items. Users can select one or more items in the list using a checkbox or by keyboard selection. It supports sorting, grouping, reordering, and drag and drop of items.
-    * [GettingStarted](https://ej2.syncfusion.com/angular/documentation/list-box/getting-started)
-    * [View Online Demos](https://ej2.syncfusion.com/angular/demos/#/material/list-box/default)
-    * [Product Page](https://www.syncfusion.com/products/angular/listbox)
+DropDown components are also supports the following frameworks.
 
-## 3. Supported frameworks
+| [<img src="https://ej2.syncfusion.com/github/images/js.svg" height="50" />](https://www.syncfusion.com/javascript-ui-controls?utm_medium=listing&utm_source=github)<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[JavaScript](https://www.syncfusion.com/javascript-ui-controls?utm_medium=listing&utm_source=github)&nbsp;&nbsp;&nbsp;&nbsp; | [<img src="https://ej2.syncfusion.com/github/images/react.svg"  height="50" />](https://www.syncfusion.com/react-ui-components?utm_medium=listing&utm_source=github)<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[React](https://www.syncfusion.com/react-ui-components?utm_medium=listing&utm_source=github)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; | [<img src="https://ej2.syncfusion.com/github/images/vue.svg" height="50" />](https://www.syncfusion.com/vue-ui-components?utm_medium=listing&utm_source=github)<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[Vue](https://www.syncfusion.com/vue-ui-components?utm_medium=listing&utm_source=github)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; | [<img src="https://ej2.syncfusion.com/github/images/netcore.svg" height="50" />](https://www.syncfusion.com/aspnet-core-ui-controls?utm_medium=listing&utm_source=github)<br/>&nbsp;&nbsp;[ASP.NET&nbsp;Core](https://www.syncfusion.com/aspnet-core-ui-controls?utm_medium=listing&utm_source=github)&nbsp;&nbsp; | [<img src="https://ej2.syncfusion.com/github/images/netmvc.svg" height="50" />](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_medium=listing&utm_source=github)<br/>&nbsp;&nbsp;[ASP.NET&nbsp;MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_medium=listing&utm_source=github)&nbsp;&nbsp; | 
+| :-----: | :-----: | :-----: | :-----: | :-----: |
 
-Drop-down components also supports the following frameworks: 
-1.	[TypeScript](https://ej2.syncfusion.com/demos/#/material)
-2.	[React](https://ej2.syncfusion.com/react/demos/#/material)
-3.	[Vue.js](https://ej2.syncfusion.com/vue/demos/#/material)
-4.	[ASP.NET Core](https://ej2.syncfusion.com/aspnetcore/)
-5.	[ASP.NET MVC](https://ej2.syncfusion.com/aspnetcore/)
-6.	[JavaScript (ES5)](https://ej2.syncfusion.com/javascript/demos/#/material)
+## Showcase samples
 
-## 4. Use-case samples / Showcase samples
+* Expanse Tracker - [Source](https://github.com/syncfusion/ej2-showcase-ng-expensetracker), [Live Demo](https://ej2.syncfusion.com/showcase/angular/expensetracker/?utm_source=npm&utm_campaign=dropdown#/dashboard)
+* Loan Calculator - [Source](https://github.com/syncfusion/ej2-showcase-ng-loancalculator), [Live Demo](https://ej2.syncfusion.com/showcase/angular/loancalculator/?utm_source=npm&utm_campaign=dropdwonlist#/default)
+* Web Mail - [Source](https://github.com/syncfusion/ej2-showcase-ng-webmail), [Live Demo](https://ej2.syncfusion.com/showcase/angular/webmail/#/home)
 
-* Expanse Tracker ([Source](https://github.com/syncfusion/ej2-showcase-ng-expensetracker), [Live Demo](https://ej2.syncfusion.com/showcase/angular/expensetracker/?utm_source=npm&utm_campaign=dropdown#/dashboard))
-* Loan Calculator ([Source](https://github.com/syncfusion/ej2-showcase-ng-loancalculator), [Live Demo](https://ej2.syncfusion.com/showcase/angular/loancalculator/?utm_source=npm&utm_campaign=dropdwonlist#/default))
-* Web Mail ([Source](https://github.com/syncfusion/ej2-showcase-ng-webmail), [Live Demo](https://ej2.syncfusion.com/showcase/angular/webmail/#/home))
+## Support
 
-    
-## 5. Key features
-* DropDownList
-    * [Data binding](https://ej2.syncfusion.com/angular/demos/#/material/drop-down-list/data-binding): Binds and accesses the list of items from the local or server-side data source.
-    * [Grouping](https://ej2.syncfusion.com/angular/demos/#/material/drop-down-list/grouping-icon): Groups the logically related items under a single or specific category.
-    * [Sorting](https://ej2.syncfusion.com/angular/documentation/api/drop-down-list#sortorder): Sorts the list items in alphabetical order (either ascending or descending).
-    * [Filtering](https://ej2.syncfusion.com/angular/demos/#/material/drop-down-list/filtering): Filters the list items based on a character typed in the search box.
-    * [Templates](https://ej2.syncfusion.com/angular/demos/#/material/drop-down-list/template): Customizes the list items, selected value, header, footer, category group header, and no records content.
-    * [Accessibility](https://ej2.syncfusion.com/angular/documentation/drop-down-list/accessibility): Provided with built-in accessibility support used to access all the DropDownList component features using keyboard, screen readers, or other assistive technology devices.
+Product support is available through following mediums.
 
+* [Support ticket](https://support.syncfusion.com/support/tickets/create) - Guaranteed Response in 24 hours | Unlimited tickets | Holiday support
+* [Community forum](https://www.syncfusion.com/forums/essential-js2?utm_source=npm&utm_medium=listing&utm_campaign=angular-dropdown-npm)
+* [GitHub issues](https://github.com/syncfusion/ej2-angular-ui-components/issues/new)
+* [Request feature or report bug](https://www.syncfusion.com/feedback/angular?utm_source=npm&utm_medium=listing&utm_campaign=angular-dropdown-npm)
+* Live chat
 
-* ComboBox
-    * [Data binding](https://ej2.syncfusion.com/angular/demos/#/material/combo-box/data-binding): Binds and accesses the list of items from local or server-side data source.
-    * [Custom values](https://ej2.syncfusion.com/angular/demos/#/material/combo-box/custom-value): Sets user-defined values that is not in the pop-up list.
-    * [Grouping](https://ej2.syncfusion.com/angular/demos/#/material/combo-box/grouping-icon): Groups the logically related items under a single or specific category.
-    * [Sorting](https://ej2.syncfusion.com/angular/documentation/api/combo-box#sortorder): Sorts the list items in alphabetical order (either ascending or descending).
-    * [Filtering](https://ej2.syncfusion.com/angular/demos/#/material/combo-box/filtering): Filters the list items based on a character typed in the component.
-    * [Templates](https://ej2.syncfusion.com/angular/demos/#/material/combo-box/template): Customizes the list items, selected value, header, footer, category group header, and no records content.
-    * [Accessibility](https://ej2.syncfusion.com/angular/documentation/combo-box/accessibility.html?lang=typescript): Provided with built-in accessibility support that helps to access all the ComboBox component features using the keyboard, screen readers, or other assistive technology devices.
+## Change log 
 
+Check the changelog [here](https://github.com/syncfusion/ej2-angular-ui-components/blob/master/components/dropdowns/CHANGELOG.md). Get minor improvements and bug fixes every week to stay up to date with frequent updates.
 
-* AutoComplete
-    * [Data binding](https://ej2.syncfusion.com/angular/demos/#/material/auto-complete/data-binding): Binds and accesses the list of items from local or server-side data source.
-    * [Grouping](https://ej2.syncfusion.com/angular/demos/#/material/auto-complete/grouping-icon): Groups the logically related items under a single or specific category.
-    * [Sorting](https://ej2.syncfusion.com/angular/documentation/api/auto-complete#sortorder): Sorts the list items in alphabetical order (either ascending or descending).
-    * [Highlight search](https://ej2.syncfusion.com/angular/demos/#/material/auto-complete/highlight): Highlights the typed text in the suggestion list.
-    * [Templates](https://ej2.syncfusion.com/angular/demos/#/material/auto-complete/template): Customizes the list item, header, footer, category group header, no records, and action failure content.
-    * [Accessibility](https://ej2.syncfusion.com/angular/documentation/auto-complete/accessibility): Provided with built-in accessibility support that helps to access all the AutoComplete component features using keyboard, on-screen readers, or other assistive technology devices.
+## License and copyright
 
+> This is a commercial product and requires a paid license for possession or use. Syncfusion’s licensed software, including this component, is subject to the terms and conditions of Syncfusion's [EULA](https://www.syncfusion.com/eula/es/). To acquire a license for 80+ [Angular UI components](https://www.syncfusion.com/angular-components), you can [purchase](https://www.syncfusion.com/sales/products) or [start a free 30-day trial](https://www.syncfusion.com/account/manage-trials/start-trials).
 
-* MultiSelect
-    * [Data binding](https://ej2.syncfusion.com/angular/demos/#/material/multi-select/data-binding): Binds and accesses the list of items from local or server-side data source.
-    * [Grouping](https://ej2.syncfusion.com/angular/demos/#/material/multi-select/grouping): Groups the logically related items under a single or specific category.
-    * [Templates](https://ej2.syncfusion.com/angular/demos/#/material/multi-select/template): Customizes the list items, selected value, header, footer, category group header, and     no records content.
-    * [Sorting](https://ej2.syncfusion.com/angular/documentation/api/multi-select#sortorder): Sorts the list items in alphabetical order (either ascending or descending).
-    * [Filtering](https://ej2.syncfusion.com/angular/demos/#/material/multi-select/filtering): Filters the list items based on a character typed in the search box.
-    * [Custom value](https://ej2.syncfusion.com/angular/demos/#/material/multi-select/custom-value): Allows users to select a new custom value.
-    * [Accessibility](https://ej2.syncfusion.com/angular/documentation/multi-select/accessibility): Provided with built-in accessibility support that helps to access all the      DropDownList component features using the keyboard, screen readers, or other assistive technology devices.
+> A free community [license](https://www.syncfusion.com/products/communitylicense) is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers.
 
-* ListBox
-    * **Data binding**: Binds and accesses the list of items from local or server-side data source.
-    * **Dual ListBox**: Allows transferring and reordering the list item between two ListBoxes.
-    * **Drag and Drop**: Allows drag and drop the list item with the same/multiple ListBox.
-    * **Grouping**: Groups the logically related items under a single or specific category.
-    * **Templates**: Customizes the list items.
-    * **Sorting**: Sorts the list items in alphabetical order (either ascending or descending).
-    * **Accessibility**: Provided with built-in accessibility support that helps to access all the ListBox component features using the keyboard, screen readers, or other assistive technology devices.
+See [LICENSE FILE](https://github.com/syncfusion/ej2/blob/master/license?utm_source=npm&utm_campaign=dropdown) for more info.
 
-## 6. Support
-Product support can be obtained through the following mediums:
-* Creating incident in Syncfusion [Direct-trac](https://www.syncfusion.com/support/directtrac/incidents?utm_source=npm&utm_campaign=dropdwon) support system or [Community forum.](https://www.syncfusion.com/forums/essential-js2?utm_source=npm&utm_campaign=dropdwon)
-* New [GitHub issue.](https://github.com/syncfusion/ej2-angular-ui-components/issues/new)
-* Ask your query in Stack Overflow with tag ‘syncfusion’, ‘ej2’.
-
- 
-## 7. License 
-Check the license details [here.](https://github.com/syncfusion/ej2/blob/master/license?utm_source=npm&utm_campaign=dropdown)
-
-## 8. Change log 
- Check the changelog [here](https://github.com/syncfusion/ej2-angular-ui-components/blob/master/components/dropdowns/CHANGELOG.md)
-
-© Copyright 2019 Syncfusion, Inc. All Rights Reserved. The Syncfusion Essential Studio license and copyright applies to this distribution.
\ No newline at end of file
+&copy; Copyright 2023 Syncfusion, Inc. All Rights Reserved. The Syncfusion Essential Studio license and copyright applies to this distribution.
\ No newline at end of file
diff --git a/components/dropdowns/package.json b/components/dropdowns/package.json
index 47adcc75..3a49d01a 100644
--- a/components/dropdowns/package.json
+++ b/components/dropdowns/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@syncfusion/ej2-angular-dropdowns",
-	"version": "21.2.3",
+	"version": "22.1.39",
 	"description": "Essential JS 2 DropDown Components for Angular",
 	"author": "Syncfusion Inc.",
 	"license": "SEE LICENSE IN license",
diff --git a/components/dropdowns/src/auto-complete/autocomplete.component.ts b/components/dropdowns/src/auto-complete/autocomplete.component.ts
index 4aa814b6..5b8993e2 100644
--- a/components/dropdowns/src/auto-complete/autocomplete.component.ts
+++ b/components/dropdowns/src/auto-complete/autocomplete.component.ts
@@ -59,6 +59,7 @@ export class AutoCompleteComponent extends AutoComplete implements IComponentBas
      * Accepts the template design and assigns it to the footer container of the popup list. 
      * > For more details about the available template options refer to [`Template`](../../drop-down-list/templates) documentation.
      * @default null
+     * @asptype string
      * @deprecated 
      */
     @ContentChild('footerTemplate')
@@ -68,6 +69,7 @@ export class AutoCompleteComponent extends AutoComplete implements IComponentBas
      * Accepts the template design and assigns it to the header container of the popup list. 
      * > For more details about the available template options refer to [`Template`](../../drop-down-list/templates) documentation.
      * @default null
+     * @asptype string
      * @deprecated 
      */
     @ContentChild('headerTemplate')
@@ -76,6 +78,7 @@ export class AutoCompleteComponent extends AutoComplete implements IComponentBas
     /** 
      * Accepts the template design and assigns it to the group headers present in the popup list.
      * @default null
+     * @asptype string
      * @deprecated 
      */
     @ContentChild('groupTemplate')
@@ -89,6 +92,7 @@ export class AutoCompleteComponent extends AutoComplete implements IComponentBas
      *For EX: We have expression evolution as like ES6 expression string literals.
      *     
      * @default null
+     * @asptype string
      * @deprecated 
      */
     @ContentChild('itemTemplate')
diff --git a/components/dropdowns/src/combo-box/combobox.component.ts b/components/dropdowns/src/combo-box/combobox.component.ts
index 40d01e26..0ab7c1c7 100644
--- a/components/dropdowns/src/combo-box/combobox.component.ts
+++ b/components/dropdowns/src/combo-box/combobox.component.ts
@@ -59,6 +59,7 @@ export class ComboBoxComponent extends ComboBox implements IComponentBase {
      * Accepts the template design and assigns it to the footer container of the popup list. 
      * > For more details about the available template options refer to [`Template`](../../drop-down-list/templates) documentation.
      * @default null
+     * @asptype string
      * @deprecated 
      */
     @ContentChild('footerTemplate')
@@ -68,6 +69,7 @@ export class ComboBoxComponent extends ComboBox implements IComponentBase {
      * Accepts the template design and assigns it to the header container of the popup list. 
      * > For more details about the available template options refer to [`Template`](../../drop-down-list/templates) documentation.
      * @default null
+     * @asptype string
      * @deprecated 
      */
     @ContentChild('headerTemplate')
@@ -76,6 +78,7 @@ export class ComboBoxComponent extends ComboBox implements IComponentBase {
     /** 
      * Accepts the template design and assigns it to the group headers present in the popup list.
      * @default null
+     * @asptype string
      * @deprecated 
      */
     @ContentChild('groupTemplate')
@@ -89,6 +92,7 @@ export class ComboBoxComponent extends ComboBox implements IComponentBase {
      *For EX: We have expression evolution as like ES6 expression string literals.
      *     
      * @default null
+     * @asptype string
      * @deprecated 
      */
     @ContentChild('itemTemplate')
diff --git a/components/dropdowns/src/drop-down-list/dropdownlist.component.ts b/components/dropdowns/src/drop-down-list/dropdownlist.component.ts
index 7a5add87..60065b06 100644
--- a/components/dropdowns/src/drop-down-list/dropdownlist.component.ts
+++ b/components/dropdowns/src/drop-down-list/dropdownlist.component.ts
@@ -58,6 +58,7 @@ export class DropDownListComponent extends DropDownList implements IComponentBas
      * Accepts the template design and assigns it to the footer container of the popup list. 
      * > For more details about the available template options refer to [`Template`](../../drop-down-list/templates) documentation.
      * @default null
+     * @asptype string
      */
     @ContentChild('footerTemplate')
     @Template()
@@ -66,6 +67,7 @@ export class DropDownListComponent extends DropDownList implements IComponentBas
      * Accepts the template design and assigns it to the header container of the popup list. 
      * > For more details about the available template options refer to [`Template`](../../drop-down-list/templates) documentation.
      * @default null
+     * @asptype string
      */
     @ContentChild('headerTemplate')
     @Template()
@@ -80,6 +82,7 @@ export class DropDownListComponent extends DropDownList implements IComponentBas
      *For EX: We have expression evolution as like ES6 expression string literals.
      *     
      * @default null
+     * @asptype string
      */
     @ContentChild('valueTemplate')
     @Template()
@@ -87,6 +90,7 @@ export class DropDownListComponent extends DropDownList implements IComponentBas
     /** 
      * Accepts the template design and assigns it to the group headers present in the popup list.
      * @default null
+     * @asptype string
      * @deprecated 
      */
     @ContentChild('groupTemplate')
@@ -100,6 +104,7 @@ export class DropDownListComponent extends DropDownList implements IComponentBas
      *For EX: We have expression evolution as like ES6 expression string literals.
      *     
      * @default null
+     * @asptype string
      * @deprecated 
      */
     @ContentChild('itemTemplate')
diff --git a/components/dropdowns/src/drop-down-tree/dropdowntree.component.ts b/components/dropdowns/src/drop-down-tree/dropdowntree.component.ts
index 5ee15a4c..a5439359 100644
--- a/components/dropdowns/src/drop-down-tree/dropdowntree.component.ts
+++ b/components/dropdowns/src/drop-down-tree/dropdowntree.component.ts
@@ -57,6 +57,10 @@ export class DropDownTreeComponent extends DropDownTree implements IComponentBas
      * Specifies the template that renders a customized footer container at the bottom of the pop-up list. 
      * By default, the footerTemplate will be null and there will be no footer container for the pop-up list.
      * @default null
+     * @angulartype string | object
+     * @reacttype string | function | JSX.Element
+     * @vuetype string | function
+     * @asptype string
      */
     @ContentChild('footerTemplate')
     @Template()
@@ -65,6 +69,10 @@ export class DropDownTreeComponent extends DropDownTree implements IComponentBas
      * Specifies the template that renders a customized header container at the top of the pop-up list. 
      * By default, the headerTemplate will be null and there will be no header container for the pop-up list.
      * @default null
+     * @angulartype string | object
+     * @reacttype string | function | JSX.Element
+     * @vuetype string | function
+     * @asptype string
      */
     @ContentChild('headerTemplate')
     @Template()
@@ -75,6 +83,10 @@ export class DropDownTreeComponent extends DropDownTree implements IComponentBas
      * The property accepts [template string](https://ej2.syncfusion.com/documentation/common/template-engine/) 
      * or HTML element ID holding the content.
      * @default null
+     * @angulartype string | object
+     * @reacttype string | function | JSX.Element
+     * @vuetype string | function
+     * @asptype string
      */
     @ContentChild('itemTemplate')
     @Template()
diff --git a/components/dropdowns/src/list-box/listbox.component.ts b/components/dropdowns/src/list-box/listbox.component.ts
index 81d0d3c4..7111e6c9 100644
--- a/components/dropdowns/src/list-box/listbox.component.ts
+++ b/components/dropdowns/src/list-box/listbox.component.ts
@@ -62,6 +62,7 @@ export class ListBoxComponent extends ListBox implements IComponentBase {
      *For EX: We have expression evolution as like ES6 expression string literals.
      *     
      * @default null
+     * @asptype string
      * @deprecated 
      */
     @ContentChild('itemTemplate')
diff --git a/components/dropdowns/src/mention/mention.component.ts b/components/dropdowns/src/mention/mention.component.ts
index 41550994..24d73978 100644
--- a/components/dropdowns/src/mention/mention.component.ts
+++ b/components/dropdowns/src/mention/mention.component.ts
@@ -44,6 +44,7 @@ export class MentionComponent extends Mention implements IComponentBase {
     /** 
      * Specifies the template for the selected value from the suggestion list.
      * @default null
+     * @asptype string
      */
     @ContentChild('displayTemplate')
     @Template()
@@ -58,6 +59,7 @@ export class MentionComponent extends Mention implements IComponentBase {
     /** 
      * Specifies the template for showing until data is loaded in the popup.
      * @default null
+     * @asptype string
      */
     @ContentChild('spinnerTemplate')
     @Template()
diff --git a/components/dropdowns/src/multi-select/multiselect.component.ts b/components/dropdowns/src/multi-select/multiselect.component.ts
index 3b2e229c..7ad2a820 100644
--- a/components/dropdowns/src/multi-select/multiselect.component.ts
+++ b/components/dropdowns/src/multi-select/multiselect.component.ts
@@ -65,6 +65,7 @@ export class MultiSelectComponent extends MultiSelect implements IComponentBase
      * Accepts the template design and assigns it to the footer container of the popup list. 
      * > For more details about the available template options refer to [`Template`](../../multi-select/templates) documentation.
      * @default null
+     * @asptype string
      */
     @ContentChild('footerTemplate')
     @Template()
@@ -73,6 +74,7 @@ export class MultiSelectComponent extends MultiSelect implements IComponentBase
      * Accepts the template design and assigns it to the header container of the popup list. 
      * > For more details about the available template options refer to [`Template`](../../multi-select/templates) documentation.
      * @default null
+     * @asptype string
      */
     @ContentChild('headerTemplate')
     @Template()
@@ -87,6 +89,7 @@ export class MultiSelectComponent extends MultiSelect implements IComponentBase
      *For EX: We have expression evolution as like ES6 expression string literals.
      *     
      * @default null
+     * @asptype string
      */
     @ContentChild('valueTemplate')
     @Template()
@@ -100,6 +103,7 @@ export class MultiSelectComponent extends MultiSelect implements IComponentBase
      *For EX: We have expression evolution as like ES6 expression string literals.
      *     
      * @default null
+     * @asptype string
      */
     @ContentChild('itemTemplate')
     @Template()
@@ -107,6 +111,7 @@ export class MultiSelectComponent extends MultiSelect implements IComponentBase
     /** 
      * Accepts the template design and assigns it to the group headers present in the MultiSelect popup list.
      * @default null
+     * @asptype string
      */
     @ContentChild('groupTemplate')
     @Template()
diff --git a/components/dropdowns/styles/auto-complete/material3-dark.scss b/components/dropdowns/styles/auto-complete/material3-dark.scss
new file mode 100644
index 00000000..ac120f6d
--- /dev/null
+++ b/components/dropdowns/styles/auto-complete/material3-dark.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-dark-definition.scss';
+@import 'ej2-dropdowns/styles/auto-complete/material3-dark.scss';
diff --git a/components/dropdowns/styles/auto-complete/material3.scss b/components/dropdowns/styles/auto-complete/material3.scss
new file mode 100644
index 00000000..81b5c310
--- /dev/null
+++ b/components/dropdowns/styles/auto-complete/material3.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-definition.scss';
+@import 'ej2-dropdowns/styles/auto-complete/material3.scss';
diff --git a/components/dropdowns/styles/combo-box/material3-dark.scss b/components/dropdowns/styles/combo-box/material3-dark.scss
new file mode 100644
index 00000000..fe121180
--- /dev/null
+++ b/components/dropdowns/styles/combo-box/material3-dark.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-dark-definition.scss';
+@import 'ej2-dropdowns/styles/combo-box/material3-dark.scss';
diff --git a/components/dropdowns/styles/combo-box/material3.scss b/components/dropdowns/styles/combo-box/material3.scss
new file mode 100644
index 00000000..216e44a5
--- /dev/null
+++ b/components/dropdowns/styles/combo-box/material3.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-definition.scss';
+@import 'ej2-dropdowns/styles/combo-box/material3.scss';
diff --git a/components/dropdowns/styles/drop-down-base/material3-dark.scss b/components/dropdowns/styles/drop-down-base/material3-dark.scss
new file mode 100644
index 00000000..13545d13
--- /dev/null
+++ b/components/dropdowns/styles/drop-down-base/material3-dark.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-dark-definition.scss';
+@import 'ej2-dropdowns/styles/drop-down-base/material3-dark.scss';
diff --git a/components/dropdowns/styles/drop-down-base/material3.scss b/components/dropdowns/styles/drop-down-base/material3.scss
new file mode 100644
index 00000000..ddadd363
--- /dev/null
+++ b/components/dropdowns/styles/drop-down-base/material3.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-definition.scss';
+@import 'ej2-dropdowns/styles/drop-down-base/material3.scss';
diff --git a/components/dropdowns/styles/drop-down-list/material3-dark.scss b/components/dropdowns/styles/drop-down-list/material3-dark.scss
new file mode 100644
index 00000000..c6ea40ad
--- /dev/null
+++ b/components/dropdowns/styles/drop-down-list/material3-dark.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-dark-definition.scss';
+@import 'ej2-dropdowns/styles/drop-down-list/material3-dark.scss';
diff --git a/components/dropdowns/styles/drop-down-list/material3.scss b/components/dropdowns/styles/drop-down-list/material3.scss
new file mode 100644
index 00000000..a8dbb8ec
--- /dev/null
+++ b/components/dropdowns/styles/drop-down-list/material3.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-definition.scss';
+@import 'ej2-dropdowns/styles/drop-down-list/material3.scss';
diff --git a/components/dropdowns/styles/drop-down-tree/material3-dark.scss b/components/dropdowns/styles/drop-down-tree/material3-dark.scss
new file mode 100644
index 00000000..4ab8b20c
--- /dev/null
+++ b/components/dropdowns/styles/drop-down-tree/material3-dark.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-dark-definition.scss';
+@import 'ej2-dropdowns/styles/drop-down-tree/material3-dark.scss';
diff --git a/components/dropdowns/styles/drop-down-tree/material3.scss b/components/dropdowns/styles/drop-down-tree/material3.scss
new file mode 100644
index 00000000..7945fc48
--- /dev/null
+++ b/components/dropdowns/styles/drop-down-tree/material3.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-definition.scss';
+@import 'ej2-dropdowns/styles/drop-down-tree/material3.scss';
diff --git a/components/dropdowns/styles/list-box/material3-dark.scss b/components/dropdowns/styles/list-box/material3-dark.scss
new file mode 100644
index 00000000..fedb1e40
--- /dev/null
+++ b/components/dropdowns/styles/list-box/material3-dark.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-dark-definition.scss';
+@import 'ej2-dropdowns/styles/list-box/material3-dark.scss';
diff --git a/components/dropdowns/styles/list-box/material3.scss b/components/dropdowns/styles/list-box/material3.scss
new file mode 100644
index 00000000..6abd26e5
--- /dev/null
+++ b/components/dropdowns/styles/list-box/material3.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-definition.scss';
+@import 'ej2-dropdowns/styles/list-box/material3.scss';
diff --git a/components/dropdowns/styles/material3-dark.scss b/components/dropdowns/styles/material3-dark.scss
new file mode 100644
index 00000000..4e9c7bd7
--- /dev/null
+++ b/components/dropdowns/styles/material3-dark.scss
@@ -0,0 +1,9 @@
+
+@import 'drop-down-base/material3-dark.scss';
+@import 'drop-down-list/material3-dark.scss';
+@import 'drop-down-tree/material3-dark.scss';
+@import 'combo-box/material3-dark.scss';
+@import 'auto-complete/material3-dark.scss';
+@import 'multi-select/material3-dark.scss';
+@import 'list-box/material3-dark.scss';
+@import 'mention/material3-dark.scss';
diff --git a/components/dropdowns/styles/material3.scss b/components/dropdowns/styles/material3.scss
new file mode 100644
index 00000000..09b17755
--- /dev/null
+++ b/components/dropdowns/styles/material3.scss
@@ -0,0 +1,9 @@
+
+@import 'drop-down-base/material3.scss';
+@import 'drop-down-list/material3.scss';
+@import 'drop-down-tree/material3.scss';
+@import 'combo-box/material3.scss';
+@import 'auto-complete/material3.scss';
+@import 'multi-select/material3.scss';
+@import 'list-box/material3.scss';
+@import 'mention/material3.scss';
diff --git a/components/dropdowns/styles/mention/material3-dark.scss b/components/dropdowns/styles/mention/material3-dark.scss
new file mode 100644
index 00000000..0680c3cd
--- /dev/null
+++ b/components/dropdowns/styles/mention/material3-dark.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-dark-definition.scss';
+@import 'ej2-dropdowns/styles/mention/material3-dark.scss';
diff --git a/components/dropdowns/styles/mention/material3.scss b/components/dropdowns/styles/mention/material3.scss
new file mode 100644
index 00000000..e140fffc
--- /dev/null
+++ b/components/dropdowns/styles/mention/material3.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-definition.scss';
+@import 'ej2-dropdowns/styles/mention/material3.scss';
diff --git a/components/dropdowns/styles/multi-select/material3-dark.scss b/components/dropdowns/styles/multi-select/material3-dark.scss
new file mode 100644
index 00000000..2cd01d6d
--- /dev/null
+++ b/components/dropdowns/styles/multi-select/material3-dark.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-dark-definition.scss';
+@import 'ej2-dropdowns/styles/multi-select/material3-dark.scss';
diff --git a/components/dropdowns/styles/multi-select/material3.scss b/components/dropdowns/styles/multi-select/material3.scss
new file mode 100644
index 00000000..a2c89287
--- /dev/null
+++ b/components/dropdowns/styles/multi-select/material3.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-definition.scss';
+@import 'ej2-dropdowns/styles/multi-select/material3.scss';
diff --git a/components/filemanager/CHANGELOG.md b/components/filemanager/CHANGELOG.md
index 6f5c0017..9bcb47ed 100644
--- a/components/filemanager/CHANGELOG.md
+++ b/components/filemanager/CHANGELOG.md
@@ -2,6 +2,39 @@
 
 ## [Unreleased]
 
+## 22.1.39 (2023-07-18)
+
+### File Manager
+
+#### Bug fixes
+
+- `#I472742` - The exception that occurred when using the File Manager download button multiple times in the Amazon File Provider has been resolved.
+
+## 22.1.38 (2023-07-11)
+
+### File Manager
+
+#### Bug fixes
+
+- `#I473871` - The issue with renaming folders or files in the Navigation Pane of the File Manager component has been resolved.
+
+## 22.1.34 (2023-06-21)
+
+### File Manager
+
+#### Features
+
+- Provided the `ShowItemCheckBoxes` property to control the visibility of checkboxes.
+
+## 21.2.5 (2023-05-16)
+
+### File Manager
+
+#### Bug fixes
+
+- `#I458668` - The issue, replace dialog shows when uploading the same file to different directories in File Manager with the SQL File Provider has been resolved.
+- `#I464322` - The issue with `fileOpen` event in the File Manager component has been resolved.
+
 ## 21.2.3 (2023-05-03)
 
 ### File Manager
diff --git a/components/filemanager/package.json b/components/filemanager/package.json
index 49285175..d0bdf628 100644
--- a/components/filemanager/package.json
+++ b/components/filemanager/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@syncfusion/ej2-angular-filemanager",
-	"version": "21.2.3",
+	"version": "22.1.39",
 	"description": "Essential JS 2 FileManager Component for Angular",
 	"author": "Syncfusion Inc.",
 	"license": "SEE LICENSE IN license",
diff --git a/components/filemanager/src/file-manager/filemanager.component.ts b/components/filemanager/src/file-manager/filemanager.component.ts
index 625c4f0f..98db49f0 100644
--- a/components/filemanager/src/file-manager/filemanager.component.ts
+++ b/components/filemanager/src/file-manager/filemanager.component.ts
@@ -4,7 +4,7 @@ import { FileManager } from '@syncfusion/ej2-filemanager';
 
 
 
-export const inputs: string[] = ['ajaxSettings','allowDragAndDrop','allowMultiSelection','contextMenuSettings','cssClass','detailsViewSettings','enableHtmlSanitizer','enablePersistence','enableRtl','enableVirtualization','height','locale','navigationPaneSettings','path','popupTarget','rootAliasName','searchSettings','selectedItems','showFileExtension','showHiddenItems','showThumbnail','sortBy','sortOrder','toolbarSettings','uploadSettings','view','width'];
+export const inputs: string[] = ['ajaxSettings','allowDragAndDrop','allowMultiSelection','contextMenuSettings','cssClass','detailsViewSettings','enableHtmlSanitizer','enablePersistence','enableRtl','enableVirtualization','height','locale','navigationPaneSettings','path','popupTarget','rootAliasName','searchSettings','selectedItems','showFileExtension','showHiddenItems','showItemCheckBoxes','showThumbnail','sortBy','sortOrder','toolbarSettings','uploadSettings','view','width'];
 export const outputs: string[] = ['beforeDownload','beforeImageLoad','beforePopupClose','beforePopupOpen','beforeSend','created','destroyed','failure','fileDragStart','fileDragStop','fileDragging','fileDropped','fileLoad','fileOpen','fileSelect','fileSelection','menuClick','menuOpen','popupClose','popupOpen','success','toolbarClick','toolbarCreate','uploadListCreate'];
 export const twoWays: string[] = [''];
 
diff --git a/components/filemanager/styles/file-manager/material3-dark.scss b/components/filemanager/styles/file-manager/material3-dark.scss
new file mode 100644
index 00000000..6e6d9240
--- /dev/null
+++ b/components/filemanager/styles/file-manager/material3-dark.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-dark-definition.scss';
+@import 'ej2-filemanager/styles/file-manager/material3-dark.scss';
diff --git a/components/filemanager/styles/file-manager/material3.scss b/components/filemanager/styles/file-manager/material3.scss
new file mode 100644
index 00000000..baa71c3c
--- /dev/null
+++ b/components/filemanager/styles/file-manager/material3.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-definition.scss';
+@import 'ej2-filemanager/styles/file-manager/material3.scss';
diff --git a/components/filemanager/styles/material3-dark.scss b/components/filemanager/styles/material3-dark.scss
new file mode 100644
index 00000000..5a40fb24
--- /dev/null
+++ b/components/filemanager/styles/material3-dark.scss
@@ -0,0 +1,2 @@
+
+@import 'file-manager/material3-dark.scss';
diff --git a/components/filemanager/styles/material3.scss b/components/filemanager/styles/material3.scss
new file mode 100644
index 00000000..a55f3cbf
--- /dev/null
+++ b/components/filemanager/styles/material3.scss
@@ -0,0 +1,2 @@
+
+@import 'file-manager/material3.scss';
diff --git a/components/gantt/CHANGELOG.md b/components/gantt/CHANGELOG.md
index 8cb7ead1..141f762e 100644
--- a/components/gantt/CHANGELOG.md
+++ b/components/gantt/CHANGELOG.md
@@ -2,7 +2,18 @@
 
 ## [Unreleased]
 
-## 21.2.3 (2023-05-03)
+## 22.2.5 (2023-07-27)
+
+### Gantt Chart
+
+#### Bug Fixes
+
+-`#I472635`-Using insert key highlights top row has been fixed.
+
+- `#I480002` - Can’t open task information in the context menu issue has been fixed.
+- `#I479988` - Ghosting bars left on screen after cancelling task bar drag.
+- `#I479961` - Milestone baseline moves along with the milestone issue has been fixed.
+- `#I481999` - Page refresh when using validation rules for column issue has been fixed.
 
 ### Gantt
 
@@ -10,6 +21,164 @@
 
 - `F159354` - Issue in locale text of predecessor tooltip has been fixed.
 
+## 22.1.39 (2023-07-18)
+
+### Gantt Chart
+
+#### Bug Fixes
+
+- `#I45187` - Border is changed to outline in CSS issue has been fixed.
+
+## 22.1.38 (2023-07-11)
+
+### Gantt Chart
+
+#### Bug Fixes
+
+- `#I474676` - Fit to project display wrong timeline issue has been fixed.
+- `#I472975` - Manual task predecessor not properly fetching updated offset issue has been fixed.
+- `#I471838` - White space occur when we change page size in `dataBound` event issue has been fixed.
+- `#I475099` - Context menu is not opening when the dataSource is empty.
+- `#I477253` - Inserting a task prevents scrolling to top of list.
+- `#I461924` - Issue with collapse all Toolbar Option issue has been fixed.
+- `#I475987` -Edit template is not working when the virtualization is enabled.
+
+## 22.1.37 (2023-07-04)
+
+### Gantt Chart
+
+#### Bug Fixes
+
+- `#I471925` - Cannot see a Dragged Task after Zoom In issue has been fixed.
+- `#I473517` - Incorrect taskbar render when unit is given in hour issue has been fixed.
+- `#I473451` - Segment taskbar is not rendered correctly  issue has been fixed.
+- `#I471730` - Taskbar not rendered properly based on duration issue has been fixed.
+
+## 22.1.36 (2023-06-28)
+
+### Gantt Chart
+
+#### Bug Fixes
+
+- `#I473901` - Baseline converted to milestone when task gets converted into milestone issue has been fixed.
+- `#I471926` - Console error occurs in critical path when data source is empty issue has been fixed.
+- `#I469289` - Fit to project is not working properly issue has been fixed.
+- `#I473341` - Tooltip template not working properly issue has been fixed.
+- `#I467372` - no drop icon is displayed while dropping in Gantt chart.
+- `#F182867` - Edit template for start date column not works issue has been fixed.
+- `#I470521` - Toolbar template is not working properly in react issue has been fixed.
+- `#I44322` - Row Selection behaviour occurs differently in grid and Gantt.
+
+## 22.1.34 (2023-06-21)
+
+### Gantt Chart
+
+#### Features
+
+-`#I43435` - Improved the user interface of taskbar resizing and moving actions in the Gantt Chart. Now, when users perform taskbar resizing or moving, a virtual element is displayed instead of updating the original taskbar element. This virtual element remains visible until the action is completed, providing users with a clear representation of the changes they are making. Please find the demo link [here](https://ej2.syncfusion.com/demos/#/bootstrap5/gantt/editing.html).
+
+
+#### Breaking changes
+
+- Connector lines have been changed from elements to SVG elements for UI improvement. This change has been made to enhance the user interface and provide a more visually appealing and flexible way of displaying connector lines.
+
+## 21.2.10 (2023-06-13)
+
+### Gantt Chart
+
+#### Bug Fixes
+
+- `#I459187` - Newly added record missed at the bottom in virtual scroll issue has been fixed.
+- `#I469401` - Resource names gets duplicated in right label issue has been fixed.
+- `#I464184` - Progress width not updated properly in split tasks issue has been fixed.
+- `#F182318` - Progress width not updated properly in manual tasks after zooming action issue has been fixed.
+
+- `#F182318` - Progress width not updated properly in manual tasks after zooming action issue has been fixed.
+
+## 21.2.9 (2023-06-06)
+
+### Gantt Chart
+
+#### Bug Fixes
+
+- `#I467744` - Provided support for virtual scroll in resource view multitask bar.
+- `#I464831` - Incorrect render of segments when we give end date while declaring segment in data source issue has been fixed.
+- `#I461924` - Bug Script Error throws while using Virtualization with Collapse All action.
+- `#I469496` - Start date not updated properly for predecessor connected record issue has been fixed.
+- `#I465752` - Timeline start date gets changed when we perform right resizing or progress resizing issue has been fixed.
+- `#I463593` - True type font style is not updated in the footer.
+- `#I463666` - Bug Milestones not rendering correctly in hierarchy issue has been fixed.
+- `#I463231` - Selection is not maintained when we scroll issue has been fixed.
+- `#I462836` - Taskbar not rendered properly when the dependency is connected to the bottom task issue has been fixed.
+- `#I464999` - Expand or Collapse All causes improper view in virtual scrolling issue has been fixed.
+- `#I462469` - Virtual scrolling breaks in deleting the last record issue has been fixed.
+- `#I464528` - Outdent action does not work properly issue has been fixed.
+- `#I464592` - Progress values are incorrect in parent task after performing drag drop issue has been fixed.
+
+- `#I467744` - Provided support for virtual scroll in resource view multitask bar.
+- `#I464831` - Incorrect render of segments when we give end date while declaring segment in data source issue has been fixed.
+- `#I462836` - Taskbar not rendered properly when the dependency is connected to the bottom task issue has been fixed.
+
+## 21.2.8 (2023-05-30)
+
+### Gantt Chart
+
+#### Bug Fixes
+
+- `#I461738` - Updating custom column change the end date issue has been fixed
+- `#I461564` - Editing cell followed by context menu does not work issue has been fixed
+- `#I461800` - Console error while exporting pdf error has been fixed.
+- `#I464045` - Parent dependency renders though we set `allowParentDependency` as false issue has been fixed.
+- `#I462271` - Taskbar not rendered when we use taskbar template issue has been fixed.
+- `#I460869`- Issue in Resource view wont display resource name has been fixed
+- `#I461105` - Baseline dates rendered incorrectly in without `dayWorkingTime` issue has been fixed.
+- -`#I460869`- Issue in Resource view wont display resource name has been fixed.
+
+- `#I461105` - Baseline dates rendered incorrectly in without `dayWorkingTime` issue has been fixed.
+
+## 21.2.6 (2023-05-23)
+
+### Gantt Chart
+
+#### Bug Fixes
+
+- `#I461435` - Adding and deleting record rapidly while displaying tooltip cause error has been fixed.
+- `#I461087` - Offset value getting modified incorrectly issue has been fixed.
+- `#I461778` - Misalignment in rows on Tree Grid and Gantt in virtual scroll issue has been fixed
+
+## 21.2.5 (2023-05-16)
+
+### Gantt Chart
+
+#### Bug Fixes
+
+- `#I461778` - Misalignment in rows on Tree Grid and Gantt in virtual scroll issue has been fixed
+- `#I181309` - splitter position not updating after resize issue has been fixed.
+- `#I449506` - Moving child row referencing another parent row will not move all of the descendants of that another parent row issue has been fixed.
+- `#I457803` - Offset value is not correctly updated while connecting predecessor issue has been fixed.
+- `#I449944` - Zoom out button in toolbar not enabled once after zoom in operation issue has been fixed.
+- `#I434098` - Issue while rendering resource view without child mapping has been fixed.
+
+- `#I449944` - Zoom out button in toolbar not enabled once after zoom in operation issue has been fixed.
+- `#I434098` - Issue while rendering resource view without child mapping has been fixed.
+
+## 21.2.4 (2023-05-09)
+
+### Gantt Chart
+
+#### Bug Fixes
+
+- `#I457032` - Task label not rendered properly when we render as template issue has been fixed.
+- `#I457212` - Timeline renders different in `Firefox` and `Chrome` issue has been fixed.
+- `#I456146` - Console error occur while changing task field after removing toolbar issue has been fixed.
+- `#F181579` - Style not reflected on the notes column when we perform dialog edit issue has been fixed.
+- `#I456453` - `CSS class` is not updated while changing it through `updateRecordbyId` method issue has been fixed.
+
+-`#I449944` - Zoom out is not enabled.
+
+- `#I457032` - Task label not rendered properly when we render as template issue has been fixed.
+- `#F181579` - Style not reflected on the notes column when we perform dialog edit issue has been fixed.
+
 ## 21.2.3 (2023-05-03)
 
 ### Gantt Chart
@@ -17,7 +186,7 @@
 #### Bug Fixes
 
 - `#I441205` - Two spinner appears while performing action issue has been fixed.
-- -`#I451257`- No proper template for manual milestone parent.
+- `#I451257` - No proper template for manual milestone parent.
 - `#I443041` - Gantt react performance rendering issue during initial load has been fixed.
 
 ## 21.1.41 (2023-04-18)
@@ -1717,3 +1886,12 @@
 - **Localization** - Provides inherent support to localize the UI.
 
 
+## 21.1.36 (2023-06-28)
+
+### Gantt Chart
+
+#### Bug Fixes
+
+- `#I469289` - Fit to project is not working properly issue has been fixed.
+- `#I474676` - Fit to project display wrong timeline issue has been fixed.
+
diff --git a/components/gantt/package.json b/components/gantt/package.json
index 2aa3f9f2..8cda6fbf 100644
--- a/components/gantt/package.json
+++ b/components/gantt/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@syncfusion/ej2-angular-gantt",
-	"version": "21.2.3",
+	"version": "22.1.39",
 	"description": "Essential JS 2 Gantt Component for Angular",
 	"author": "Syncfusion Inc.",
 	"license": "SEE LICENSE IN license",
diff --git a/components/gantt/src/gantt/columns.directive.ts b/components/gantt/src/gantt/columns.directive.ts
index c311451c..07f62f7f 100644
--- a/components/gantt/src/gantt/columns.directive.ts
+++ b/components/gantt/src/gantt/columns.directive.ts
@@ -196,6 +196,7 @@ export class ColumnDirective extends ComplexBase<ColumnDirective> {
      * Defines the column template that renders customized element in each cell of the column. 
      * It accepts either template string or HTML element ID.
      * @default null
+     * @asptype string
      */
     @ContentChild('template')
     @Template()
@@ -203,6 +204,7 @@ export class ColumnDirective extends ComplexBase<ColumnDirective> {
     /** 
      * Defines the header template as string or HTML element ID which is used to add customized element in the column header.
      * @default null
+     * @asptype string
      */
     @ContentChild('headerTemplate')
     @Template()
diff --git a/components/gantt/src/gantt/gantt.component.ts b/components/gantt/src/gantt/gantt.component.ts
index 34e0100a..a95b3fd8 100644
--- a/components/gantt/src/gantt/gantt.component.ts
+++ b/components/gantt/src/gantt/gantt.component.ts
@@ -109,6 +109,7 @@ export class GanttComponent extends Gantt implements IComponentBase {
     /** 
      * The parent task bar template that renders customized parent task bars from the given template.
      * @default null
+     * @asptype string
      */
     @ContentChild('parentTaskbarTemplate')
     @Template()
@@ -116,6 +117,7 @@ export class GanttComponent extends Gantt implements IComponentBase {
     /** 
      * The milestone template that renders customized milestone task from the given template.
      * @default null
+     * @asptype string
      */
     @ContentChild('milestoneTemplate')
     @Template()
@@ -123,6 +125,7 @@ export class GanttComponent extends Gantt implements IComponentBase {
     /** 
      * The task bar template that renders customized child task bars from the given template.
      * @default null
+     * @asptype string
      */
     @ContentChild('taskbarTemplate')
     @Template()
diff --git a/components/gantt/styles/gantt/material3-dark.scss b/components/gantt/styles/gantt/material3-dark.scss
new file mode 100644
index 00000000..78b3b5ef
--- /dev/null
+++ b/components/gantt/styles/gantt/material3-dark.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-dark-definition.scss';
+@import 'ej2-gantt/styles/gantt/material3-dark.scss';
diff --git a/components/gantt/styles/gantt/material3.scss b/components/gantt/styles/gantt/material3.scss
new file mode 100644
index 00000000..731902d8
--- /dev/null
+++ b/components/gantt/styles/gantt/material3.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-definition.scss';
+@import 'ej2-gantt/styles/gantt/material3.scss';
diff --git a/components/gantt/styles/material3-dark.scss b/components/gantt/styles/material3-dark.scss
new file mode 100644
index 00000000..5f0dc981
--- /dev/null
+++ b/components/gantt/styles/material3-dark.scss
@@ -0,0 +1,2 @@
+
+@import 'gantt/material3-dark.scss';
diff --git a/components/gantt/styles/material3.scss b/components/gantt/styles/material3.scss
new file mode 100644
index 00000000..655899bd
--- /dev/null
+++ b/components/gantt/styles/material3.scss
@@ -0,0 +1,2 @@
+
+@import 'gantt/material3.scss';
diff --git a/components/grids/CHANGELOG.md b/components/grids/CHANGELOG.md
index d258d962..6a42be81 100644
--- a/components/grids/CHANGELOG.md
+++ b/components/grids/CHANGELOG.md
@@ -2,52 +2,92 @@
 
 ## [Unreleased]
 
-## 21.2.3 (2023-05-03)
+## 22.2.5 (2023-07-27)
 
 ### Grid
 
-#### Bug Fixes
+#### Bug fixes
 
-- `#I432845` - Fixed the issue where `Lazylaod` grouping with aggregates was not exported properly in Angular and React platforms.
-- `#F181415` - Fixed the issue where the typing for `filterbeforeopen` event of `FilterMenu` was not set properly.
-- `#I450047` - Performance degradation on infinite scrolling with column templates has been fixed.
-- `#I455291` - The issue of being unable to edit a newly added row when the dataSource is empty and infinite scrolling is enabled has been resolved.
+- `#I477874` - The issue with the `foreignkey` column dropdown edit cell displaying incorrect values while editing different rows after scrolling has been successfully fixed when the `virtualization` feature is enabled in the grid.
+- `#I482022` - Pager information is wrong while dynamically changing the Grid width issue has been fixed.
 
-## 21.1.41 (2023-04-18)
+- `#F183077` - Wrong footer template value exported in the excel file issue has been fixed.
+- `#I477874` - The issue with the `foreignkey` column dropdown edit cell displaying incorrect values while editing different rows after scrolling has been successfully fixed when the `virtualization` feature is enabled in the grid.
+- `#I482022` - Pager information is wrong while dynamically changing the Grid width issue has been fixed.
+
+## 22.1.39 (2023-07-18)
 
 ### Grid
 
-#### Bug Fixes
+#### Bug fixes
 
-- `#I442797` - The issue of an error occurring when hovering over the search option on a filter dropdown has been resolved and fixed.
-- `#I452425` - The row selection is not working properly when virtualisation is enabled and an odd number is set as the page size has been resolved.
-- `#I455150` - The issue with the script error while opening the custom filter template in the grid filter menu feature has been resolved.
-- `#I451761` - Script error being thrown when copying an empty Grid has been resolved.
-- `#I453134` - The last edited cell is now correctly saved when the tab key is pressed from the last row cell, even when `allowAdding` is set to `false` in batch edit mode.
+- `#I477090` - Fixed an issue where inline and batch edit modes behaved differently when the `column.allowEditing` attribute was set to false.
+- `#FB45184` - The error that occurred when searching for a backslash character in the Excel filter search has been resolved.
+- `#FB44897` - Fixed the problem with the MUI Select Dropdown not functioning correctly in the Filter Template.
+- `#I467307` - Resolved the issue with Excel export where the child grids were not exported properly.
+- `#I479191` - The error that occurred when clearing the searched value after performing a search has been resolved.
+- `#I477380` - Improved the Excel export of the hierarchy grid to prevent unwanted column filters.
+- `#I472635` - Resolved the problem where the selection moved to the first row when the `newRowPosition` was set to Bottom.
 
-## 21.1.39 (2023-04-11)
+## 22.1.38 (2023-07-11)
 
 ### Grid
 
-#### Bug Fixes
+#### Bug fixes
 
-- `#I443674` - Resolved the issue where the currency format was incorrect with grid excel export.
-- `#F175708` - Fixed the issue where the change event of the textbox component was not triggered when pressing the tab key on batch edit.
-- `#I432022` - Resolved the issue where the grid was being re rendered while updating state due to the use of function type property.
-- `#I447288` - The issue of virtual scrolling not functioning correctly when rendering the Grid at the bottom of the page has been resolved.
+- `#I472819` - The problem of missing skip and take parameters in the `UrlAdaptor` when invoking a Grid refresh has been fixed.
+- `#I475522` - Script error thrown when searching for the bracket "[" in the Grid has been resolved.
+- `#I477274` - The issue where the Grid cell ellipsis was not displaying in the Firefox browser when the `rowHeight` was set has been fixed.
+- `#I446649` - Fixed the issue that prevented infinite scrolling from working properly after adding a new row.
+- `#I473827` - The issue related to parsing a date value without seconds and encountering an "invalid date" has been resolved.
+- `#I475187` - Resolved the accessibility issue with the aria-selected attribute in pager numeric items.
+- `#FB44815` - The issue where the custom dataSource was not assigned to the dropdown edit cell when using Virtualization has been resolved.
 
-## 21.1.38 (2023-04-04)
+## 22.1.37 (2023-07-04)
 
 ### Grid
 
-#### Bug Fixes
+#### Bug fixes
 
-- `#I446919` - Inconsistent date value when searching string value issue has been fixed.
-- `#I449503` - search bar clear icon not working when apply searching in programmatic way issue has been fixed.
-- `#I440720`, `#I451314` - Provided support for grid query with the custom dataSource while on pdf exporting.
-- `#I444506`  - Last row border is not applied while reordering a row to the last index issue has been resolved.
-- `#F180653`  - `rowHeight` does not work properly with Detail Template issue has been resolved.
-- `#F180026` - The issue of the last row being removed after adding a new row has been resolved when the page size is set to `ALL`.
+- `#I471572` - Fixed the issue where the Select all checkbox was disabled when using the `ResetOnRowClick` property.
+- `#I429156` - Provided the support for special characters in column field names.
+- `#I471760` - Resolved the flickering issue with grid column's `clipMode` - `EllipsisWithTooltip`.
+- `#F182956` - Fixed a typo error that occurred while setting a null value using the `setCellValue` method.
+
+- `#I471572` - Fixed the issue where the Select all checkbox was disabled when using the `ResetOnRowClick` property.
+- `#I429156` - Provided the support for special characters in column field names.
+- `#I470771` - Fixed the issue where the Custom Aggregate was not exported in the Excel document.
+- `#I471760` - Resolved the flickering issue with grid column's `clipMode` - `EllipsisWithTooltip`.
+- `#F182956` - Fixed a typo error that occurred while setting a null value using the `setCellValue` method.
+
+## 22.1.36 (2023-06-28)
+
+### Grid
+
+#### Bug fixes
+
+- `#I473934` - The issue with drag and drop within grid sample throwing a script error when pressing Enter has been resolved.
+- `#I472112` - Fixed issue with `CommandClickEventArgs` getting incorrect command column header.
+- `#I470584` - The white space issue caused by deleting the previous record has been resolved.
+- `#I471458` - The problem with the pager dropdown not working properly while cancelling paging operation has been resolved.
+
+## 22.1.34 (2023-06-21)
+
+### Grid
+
+#### Bug fixes
+
+- Improved the checkbox selection functionality by integrating Grid observable binding and incorporating support for the virtual scrolling feature.
+
+#### Features
+
+- `#I451870` - The Pager component has been enhanced to be more responsive. It now includes the ability to automatically resize itself and dynamically show or hide pager items based on the width of the Grid. Please find the demo link [here](https://ej2.syncfusion.com/demos/#/bootstrap5/grid/pager-dropdown.html).
+- `#FB31707` - Added functionality to support drag-and-drop of grid rows between different groups within the Grid. Please find the demo link [here](https://ej2.syncfusion.com/demos/#/bootstrap5/grid/drag-drop-within-grid.html).
+- `#FB6478`, `#FB5702` - Implemented support for maintaining the state of expanded grouped rows during editing actions. Please find the demo link [here](https://ej2.syncfusion.com/demos/#/bootstrap5/grid/grouping.html).
+
+- `#I451870` - The Pager component has been enhanced to be more responsive. It now includes the ability to automatically resize itself and dynamically show or hide pager items based on the width of the Grid. Please find the demo link [here](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/grid/paging).
+- `#FB31707` - Added functionality to support drag-and-drop of grid rows between different groups within the Grid. Please find the demo link [here](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/grid/drag-drop-within-grid).
+- `#FB6478`, `#FB5702` - Implemented support for maintaining the state of expanded grouped rows during editing actions. Please find the demo link [here](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/grid/grouping).
 
 ## 21.1.35 (2023-03-23)
 
diff --git a/components/grids/package.json b/components/grids/package.json
index 8cd6b58f..7530abc3 100644
--- a/components/grids/package.json
+++ b/components/grids/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@syncfusion/ej2-angular-grids",
-	"version": "21.1.41",
+	"version": "22.1.39",
 	"description": "Feature-rich JavaScript datagrid (datatable) control with built-in support for editing, filtering, grouping, paging, sorting, and exporting to Excel. for Angular",
 	"author": "Syncfusion Inc.",
 	"license": "SEE LICENSE IN license",
diff --git a/components/grids/src/grid/aggregate-columns.directive.ts b/components/grids/src/grid/aggregate-columns.directive.ts
index 7e94b050..dca6b727 100644
--- a/components/grids/src/grid/aggregate-columns.directive.ts
+++ b/components/grids/src/grid/aggregate-columns.directive.ts
@@ -88,6 +88,7 @@ export class AggregateColumnDirective extends ComplexBase<AggregateColumnDirecti
      * {% codeBlock src="grid/footer-template-api/index.ts" %}{% endcodeBlock %}
      *     
      * @default null
+     * @asptype string
      */
     @ContentChild('footerTemplate')
     @Template()
@@ -102,6 +103,7 @@ export class AggregateColumnDirective extends ComplexBase<AggregateColumnDirecti
      * {% codeBlock src="grid/group-footer-api/index.ts" %}{% endcodeBlock %}
      *     
      * @default null
+     * @asptype string
      */
     @ContentChild('groupFooterTemplate')
     @Template()
@@ -116,6 +118,7 @@ export class AggregateColumnDirective extends ComplexBase<AggregateColumnDirecti
      * {% codeBlock src="grid/group-caption-api/index.ts" %}{% endcodeBlock %}
      *     
      * @default null
+     * @asptype string
      */
     @ContentChild('groupCaptionTemplate')
     @Template()
diff --git a/components/grids/src/grid/columns.directive.ts b/components/grids/src/grid/columns.directive.ts
index 3b65691b..4c2e4341 100644
--- a/components/grids/src/grid/columns.directive.ts
+++ b/components/grids/src/grid/columns.directive.ts
@@ -440,6 +440,7 @@ export class ColumnDirective extends ComplexBase<ColumnDirective> {
      * Defines the column template that renders customized element in each cell of the column. 
      * It accepts either [template string](../../common/template-engine/) or HTML element ID.
      * @default null
+     * @asptype string
      */
     @ContentChild('template')
     @Template()
@@ -447,6 +448,7 @@ export class ColumnDirective extends ComplexBase<ColumnDirective> {
     /** 
      * Defines the column template as string or HTML element ID which is used to add customized element in the column header.
      * @default null
+     * @asptype string
      */
     @ContentChild('headerTemplate')
     @Template()
diff --git a/components/grids/src/grid/grid.component.ts b/components/grids/src/grid/grid.component.ts
index 8b89eda9..4afb4d88 100644
--- a/components/grids/src/grid/grid.component.ts
+++ b/components/grids/src/grid/grid.component.ts
@@ -121,6 +121,7 @@ export class GridComponent extends Grid implements IComponentBase {
      * > Check the [`Row Template`](../../grid/row/) customization.
      *     
      * @default ''
+     * @asptype string
      */
     @ContentChild('rowTemplate')
     @Template()
@@ -133,6 +134,7 @@ export class GridComponent extends Grid implements IComponentBase {
      *{% codeBlock src="grid/detail-template-api/index.ts" %}{% endcodeBlock %}
      *     
      * @default ''
+     * @asptype string
      */
     @ContentChild('detailTemplate')
     @Template()
@@ -140,6 +142,7 @@ export class GridComponent extends Grid implements IComponentBase {
     /** 
      * It used to render toolbar template
      * @default null
+     * @asptype string
      */
     @ContentChild('toolbarTemplate')
     @Template()
@@ -147,6 +150,7 @@ export class GridComponent extends Grid implements IComponentBase {
     /** 
      * It used to render pager template
      * @default null
+     * @asptype string
      */
     @ContentChild('pagerTemplate')
     @Template()
diff --git a/components/grids/src/grid/stacked-column.directive.ts b/components/grids/src/grid/stacked-column.directive.ts
index b00d0d4f..6f4d12cd 100644
--- a/components/grids/src/grid/stacked-column.directive.ts
+++ b/components/grids/src/grid/stacked-column.directive.ts
@@ -444,6 +444,7 @@ export class StackedColumnDirective extends ComplexBase<StackedColumnDirective>
      * Defines the column template that renders customized element in each cell of the column. 
      * It accepts either [template string](../../common/template-engine/) or HTML element ID.
      * @default null
+     * @asptype string
      */
     @ContentChild('template')
     @Template()
@@ -451,6 +452,7 @@ export class StackedColumnDirective extends ComplexBase<StackedColumnDirective>
     /** 
      * Defines the column template as string or HTML element ID which is used to add customized element in the column header.
      * @default null
+     * @asptype string
      */
     @ContentChild('headerTemplate')
     @Template()
diff --git a/components/grids/src/pager/pager.component.ts b/components/grids/src/pager/pager.component.ts
index 9d528499..bddcf7ed 100644
--- a/components/grids/src/pager/pager.component.ts
+++ b/components/grids/src/pager/pager.component.ts
@@ -40,6 +40,7 @@ export class PagerComponent extends Pager implements IComponentBase {
     /** 
      *  Defines the template as string or HTML element ID which renders customized elements in pager instead of default elements.
      * @default null
+     * @asptype string
      */
     @ContentChild('template')
     @Template()
diff --git a/components/grids/styles/excel-filter/material3-dark.scss b/components/grids/styles/excel-filter/material3-dark.scss
new file mode 100644
index 00000000..3b4b4527
--- /dev/null
+++ b/components/grids/styles/excel-filter/material3-dark.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-dark-definition.scss';
+@import 'ej2-grids/styles/excel-filter/material3-dark.scss';
diff --git a/components/grids/styles/excel-filter/material3.scss b/components/grids/styles/excel-filter/material3.scss
new file mode 100644
index 00000000..d227c5c7
--- /dev/null
+++ b/components/grids/styles/excel-filter/material3.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-definition.scss';
+@import 'ej2-grids/styles/excel-filter/material3.scss';
diff --git a/components/grids/styles/grid/material3-dark.scss b/components/grids/styles/grid/material3-dark.scss
new file mode 100644
index 00000000..64037090
--- /dev/null
+++ b/components/grids/styles/grid/material3-dark.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-dark-definition.scss';
+@import 'ej2-grids/styles/grid/material3-dark.scss';
diff --git a/components/grids/styles/grid/material3.scss b/components/grids/styles/grid/material3.scss
new file mode 100644
index 00000000..9390e44e
--- /dev/null
+++ b/components/grids/styles/grid/material3.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-definition.scss';
+@import 'ej2-grids/styles/grid/material3.scss';
diff --git a/components/grids/styles/material3-dark.scss b/components/grids/styles/material3-dark.scss
new file mode 100644
index 00000000..18529e70
--- /dev/null
+++ b/components/grids/styles/material3-dark.scss
@@ -0,0 +1,3 @@
+
+@import 'excel-filter/material3-dark.scss';
+@import 'grid/material3-dark.scss';
diff --git a/components/grids/styles/material3.scss b/components/grids/styles/material3.scss
new file mode 100644
index 00000000..9f74573d
--- /dev/null
+++ b/components/grids/styles/material3.scss
@@ -0,0 +1,3 @@
+
+@import 'excel-filter/material3.scss';
+@import 'grid/material3.scss';
diff --git a/components/heatmap/CHANGELOG.md b/components/heatmap/CHANGELOG.md
index 7b5452f0..5c48aee9 100644
--- a/components/heatmap/CHANGELOG.md
+++ b/components/heatmap/CHANGELOG.md
@@ -2,7 +2,32 @@
 
 ## [Unreleased]
 
-## 21.2.3 (2023-05-03)
+## 22.2.5 (2023-07-27)
+
+### Heatmap
+
+#### New Features
+
+- `#I437878` - The `cellDoubleClick` event is now available for use to initiate an event when a double click action is done over the HeatMap cells.
+- `#I438083` - When the axis label exceeds the available region, it can be wrapped or trimmed using the `textOverflow` property in the x-axis and y-axis.
+
+## 21.2.8 (2023-05-30)
+
+### HeatMap
+
+#### Bug fixes
+
+- `#F182203` - The data points in the JSON data will now be properly mapped in the HeatMap using the cell adapter with `maximum` and `minimum` properties set in the x-axis.
+
+## 21.2.4 (2023-05-09)
+
+### Heatmap
+
+#### Bug fixes
+
+- `#I456795` - The extra text element in the HeatMap component's DOM has now been properly removed.
+
+## 21.1.41 (2023-04-18)
 
 ### Heatmap
 
diff --git a/components/heatmap/package.json b/components/heatmap/package.json
index f21f8da9..daf8fb48 100644
--- a/components/heatmap/package.json
+++ b/components/heatmap/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@syncfusion/ej2-angular-heatmap",
-	"version": "21.1.37",
+	"version": "18.14.3",
 	"description": "Feature rich data visulization control used to visualize the matrix data where the individual values are represented as colors for Angular",
 	"author": "Syncfusion Inc.",
 	"license": "SEE LICENSE IN license",
diff --git a/components/heatmap/src/heatmap/heatmap.component.ts b/components/heatmap/src/heatmap/heatmap.component.ts
index 75662800..739ce21c 100644
--- a/components/heatmap/src/heatmap/heatmap.component.ts
+++ b/components/heatmap/src/heatmap/heatmap.component.ts
@@ -5,7 +5,7 @@ import { HeatMap } from '@syncfusion/ej2-heatmap';
 
 
 export const inputs: string[] = ['allowSelection','backgroundColor','cellSettings','dataSource','dataSourceSettings','enableMultiSelect','enablePersistence','enableRtl','height','legendSettings','locale','margin','paletteSettings','renderingMode','showTooltip','theme','titleSettings','tooltipSettings','width','xAxis','yAxis'];
-export const outputs: string[] = ['cellClick','cellRender','cellSelected','created','legendRender','load','loaded','resized','tooltipRender'];
+export const outputs: string[] = ['cellClick','cellDoubleClick','cellRender','cellSelected','created','legendRender','load','loaded','resized','tooltipRender'];
 export const twoWays: string[] = [''];
 
 /**
@@ -30,6 +30,7 @@ export class HeatMapComponent extends HeatMap implements IComponentBase {
     public context : any;
     public tagObjects: any;
 	cellClick: any;
+	cellDoubleClick: any;
 	cellRender: any;
 	cellSelected: any;
 	created: any;
diff --git a/components/imageeditor/CHANGELOG.md b/components/imageeditor/CHANGELOG.md
index b500e226..0a536c16 100644
--- a/components/imageeditor/CHANGELOG.md
+++ b/components/imageeditor/CHANGELOG.md
@@ -2,15 +2,47 @@
 
 ## [Unreleased]
 
-## 21.2.3 (2023-05-03)
+## 22.2.5 (2023-07-27)
 
 ### Image Editor
 
 #### Bug Fixes
 
-- Issue with "Flaggable Enum not working properly in ASPCORE" has been resolved.
+- Issue with "Path size not proper after saving" has been resolved.
 
-## 21.1.41 (2023-04-18)
+## 22.1.39 (2023-07-18)
+
+### Image Editor
+
+#### Bug Fixes
+
+- Issue with "Circle cropped image is not saved properly" has been resolved.
+
+## 22.1.38 (2023-07-11)
+
+### Image Editor
+
+#### Bug Fixes
+
+- Issue with "Image not drawn properly after opening image as ImageData" has been resolved.
+
+## 22.1.37 (2023-07-04)
+
+### Image Editor
+
+#### Bug Fixes
+
+- Issue with "Touch events are not un-wired properly while destroying control" has been resolved.
+
+## 22.1.36 (2023-06-28)
+
+### Image Editor
+
+#### Bug Fixes
+
+- Issue with "Refreshing the Image Editor dimension while resizing" has been resolved.
+
+## 22.1.34 (2023-06-21)
 
 ### Image Editor
 
@@ -18,6 +50,16 @@
 
 - Issue with "GetImageData method returns low resolution data" has been resolved.
 
+#### Features
+
+- Provided support for path annotations allowing users to annotate specific paths or routes within a document or graphical representation.
+- Provided support for arrow annotations allowing users to easily indicate direction or flow within their content.
+- Provided quick access toolbar support which improve accessibility when working with shapes. It automatically appears when shapes are selected, providing convenient access to commonly used tools and options.
+
+#### Breaking Changes
+
+- Previously, the "ShapeChanging" event was triggered for both shape modifications and selection customizations. However, a new event called "SelectionChanging" has been introduced specifically for selection customizations.
+
 ## 21.1.39 (2023-04-11)
 
 ### Image Editor
diff --git a/components/imageeditor/package.json b/components/imageeditor/package.json
index bb10b5f3..5daa1814 100644
--- a/components/imageeditor/package.json
+++ b/components/imageeditor/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@syncfusion/ej2-angular-image-editor",
-	"version": "21.2.3",
+	"version": "22.1.39",
 	"description": "Essential JS 2 ImageEditor for Angular",
 	"author": "Syncfusion Inc.",
 	"license": "SEE LICENSE IN license",
diff --git a/components/imageeditor/src/image-editor/imageeditor.component.ts b/components/imageeditor/src/image-editor/imageeditor.component.ts
index 21aca5e2..8b9d2cf7 100644
--- a/components/imageeditor/src/image-editor/imageeditor.component.ts
+++ b/components/imageeditor/src/image-editor/imageeditor.component.ts
@@ -4,8 +4,8 @@ import { ImageEditor } from '@syncfusion/ej2-image-editor';
 import { Template } from '@syncfusion/ej2-angular-base';
 
 
-export const inputs: string[] = ['allowUndoRedo','cssClass','disabled','enablePersistence','enableRtl','finetuneSettings','height','isReadOnly','locale','quickAccessToolbarTemplate','showQuickAccessToolbar','theme','toolbar','toolbarTemplate','width','zoomSettings'];
-export const outputs: string[] = ['beforeSave','click','created','cropping','destroyed','fileOpened','finetuneValueChanging','flipping','imageFiltering','panning','quickAccessToolbarOpening','rotating','saved','shapeChanging','toolbarCreated','toolbarItemClicked','toolbarUpdating','zooming'];
+export const inputs: string[] = ['allowUndoRedo','cssClass','disabled','enablePersistence','enableRtl','finetuneSettings','height','isReadOnly','locale','quickAccessToolbarTemplate','selectionSettings','showQuickAccessToolbar','theme','toolbar','toolbarTemplate','width','zoomSettings'];
+export const outputs: string[] = ['beforeSave','click','created','cropping','destroyed','fileOpened','finetuneValueChanging','flipping','imageFiltering','panning','quickAccessToolbarItemClick','quickAccessToolbarOpen','rotating','saved','selectionChanging','shapeChanging','toolbarCreated','toolbarItemClicked','toolbarUpdating','zooming'];
 export const twoWays: string[] = [''];
 
 /**
@@ -38,9 +38,11 @@ export class ImageEditorComponent extends ImageEditor implements IComponentBase
 	flipping: any;
 	imageFiltering: any;
 	panning: any;
-	quickAccessToolbarOpening: any;
+	quickAccessToolbarItemClick: any;
+	quickAccessToolbarOpen: any;
 	rotating: any;
 	saved: any;
+	selectionChanging: any;
 	shapeChanging: any;
 	toolbarCreated: any;
 	toolbarItemClicked: any;
@@ -51,10 +53,13 @@ export class ImageEditorComponent extends ImageEditor implements IComponentBase
     /** 
      * Specifies a custom template for the toolbar of an image editor control. 
      * A string that specifies a custom template for the toolbar of the image editor. If this property is defined, the 'toolbar' property will not have any effect.
+     * 
+     * {% codeBlock src='image-editor/toolbarTemplate/index.md' %}{% endcodeBlock %}
+     *     
      * @remarks Use this property if you want to customize the entire toolbar in your own way. The template should be a string that contains the HTML markup for the custom toolbar.
 
      * @default null
-{% codeBlock src='image-editor/toolbarTemplate/index.md' %}{% endcodeBlock %}
+     * @asptype string
 
 
      */
diff --git a/components/imageeditor/styles/image-editor/material3-dark.scss b/components/imageeditor/styles/image-editor/material3-dark.scss
new file mode 100644
index 00000000..b607b0e7
--- /dev/null
+++ b/components/imageeditor/styles/image-editor/material3-dark.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-dark-definition.scss';
+@import 'ej2-image-editor/styles/image-editor/material3-dark.scss';
diff --git a/components/imageeditor/styles/image-editor/material3.scss b/components/imageeditor/styles/image-editor/material3.scss
new file mode 100644
index 00000000..b217b9d2
--- /dev/null
+++ b/components/imageeditor/styles/image-editor/material3.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-definition.scss';
+@import 'ej2-image-editor/styles/image-editor/material3.scss';
diff --git a/components/imageeditor/styles/material3-dark.scss b/components/imageeditor/styles/material3-dark.scss
new file mode 100644
index 00000000..ce5d7128
--- /dev/null
+++ b/components/imageeditor/styles/material3-dark.scss
@@ -0,0 +1,2 @@
+
+@import 'image-editor/material3-dark.scss';
diff --git a/components/imageeditor/styles/material3.scss b/components/imageeditor/styles/material3.scss
new file mode 100644
index 00000000..3f3d82ae
--- /dev/null
+++ b/components/imageeditor/styles/material3.scss
@@ -0,0 +1,2 @@
+
+@import 'image-editor/material3.scss';
diff --git a/components/inplaceeditor/CHANGELOG.md b/components/inplaceeditor/CHANGELOG.md
index 3ea6451b..dad3feca 100644
--- a/components/inplaceeditor/CHANGELOG.md
+++ b/components/inplaceeditor/CHANGELOG.md
@@ -2,6 +2,14 @@
 
 ## [Unreleased]
 
+## 22.1.36 (2023-06-28)
+
+### In-place Editor
+
+#### Bug Fixes
+
+- `#FB182978` - Resolved an issue Hidden save and cancel icons when focused on using tab key navigation.
+
 ## 20.4.54 (2023-03-14)
 
 ### In-place Editor
diff --git a/components/inplaceeditor/package.json b/components/inplaceeditor/package.json
index 0f77e0f2..3a194f78 100644
--- a/components/inplaceeditor/package.json
+++ b/components/inplaceeditor/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@syncfusion/ej2-angular-inplace-editor",
-	"version": "21.1.37",
+	"version": "22.1.36",
 	"description": "A package of Essential JS 2 Inplace editor components, which is used to edit and update the value dynamically in server. for Angular",
 	"author": "Syncfusion Inc.",
 	"license": "SEE LICENSE IN license",
diff --git a/components/inplaceeditor/src/inplace-editor/inplaceeditor.component.ts b/components/inplaceeditor/src/inplace-editor/inplaceeditor.component.ts
index dbf58816..5648f791 100644
--- a/components/inplaceeditor/src/inplace-editor/inplaceeditor.component.ts
+++ b/components/inplaceeditor/src/inplace-editor/inplaceeditor.component.ts
@@ -59,6 +59,7 @@ export class InPlaceEditorComponent extends InPlaceEditor implements IComponentB
      *     
      * @default ''
      * @blazortype string
+     * @asptype string
      */
     @ContentChild('template')
     @Template()
diff --git a/components/inplaceeditor/styles/inplace-editor/material3-dark.scss b/components/inplaceeditor/styles/inplace-editor/material3-dark.scss
new file mode 100644
index 00000000..af4094cd
--- /dev/null
+++ b/components/inplaceeditor/styles/inplace-editor/material3-dark.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-dark-definition.scss';
+@import 'ej2-inplace-editor/styles/inplace-editor/material3-dark.scss';
diff --git a/components/inplaceeditor/styles/inplace-editor/material3.scss b/components/inplaceeditor/styles/inplace-editor/material3.scss
new file mode 100644
index 00000000..5b248832
--- /dev/null
+++ b/components/inplaceeditor/styles/inplace-editor/material3.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-definition.scss';
+@import 'ej2-inplace-editor/styles/inplace-editor/material3.scss';
diff --git a/components/inplaceeditor/styles/material3-dark.scss b/components/inplaceeditor/styles/material3-dark.scss
new file mode 100644
index 00000000..83bdd119
--- /dev/null
+++ b/components/inplaceeditor/styles/material3-dark.scss
@@ -0,0 +1,2 @@
+
+@import 'inplace-editor/material3-dark.scss';
diff --git a/components/inplaceeditor/styles/material3.scss b/components/inplaceeditor/styles/material3.scss
new file mode 100644
index 00000000..3db7c1a1
--- /dev/null
+++ b/components/inplaceeditor/styles/material3.scss
@@ -0,0 +1,2 @@
+
+@import 'inplace-editor/material3.scss';
diff --git a/components/inputs/CHANGELOG.md b/components/inputs/CHANGELOG.md
index 290533a0..26cb7e4f 100644
--- a/components/inputs/CHANGELOG.md
+++ b/components/inputs/CHANGELOG.md
@@ -2,14 +2,75 @@
 
 ## [Unreleased]
 
-## 21.2.3 (2023-05-03)
+## 22.2.5 (2023-07-27)
+
+### Signature
+
+#### New Features
+
+- `#F183395` - Provide the support to draw text in specific places in draw public method of the signature component.
+
+## 22.1.38 (2023-07-11)
+
+### Uploader
+
+#### Bug Fixes
+
+- `#I460888` - Issue with "console error occurs when we render the toast in the `beforeUpload` event of the uploader" has been resolved.
+
+- `#I476742` - Fixed the issue with the File Uploader Drag and drop functionality.
+
+## 22.1.34 (2023-06-21)
+
+### NumericTextbox
+
+#### Bug Fixes
+
+- Issue with "Unwanted calls for CalculateWidth method" has been resolved.
+
+### TextBox
+
+#### New Features
+
+- Provided clear icon support for Multiline Textbox, allowing users to easily clear the contents of the textarea with a single click.
+
+### FormValidator
+
+#### New Features
+
+- Provided support for validating multiple date formats using a form validator.
+- Provided support for placing validation messages outside the component for all Syncfusion Form Components.
 
 ### NumericTextBox
 
 #### Bug Fixes
 
-- `#F181652` - The issue of "ng model value not being updated properly when we use min and max value" has been resolved.
-- `#I455470` - The issue of "Numeric textbox name attribute not being updated with respect to the ID value in Angular" has been resolved
+- `#F170722` - Issue with "change event doesn't trigger while modifying the value using `setValue` method inside reactive form" is resolved.
+
+## 21.2.9 (2023-06-06)
+
+### ColorPicker
+
+#### Bug Fixes
+
+- Facing exception when mode switching from color palette to color picker has been resolved.
+- Color picker value is not getting reset for transparent case.
+
+## 21.2.8 (2023-05-30)
+
+### ColorPicker
+
+#### Bug Fixes
+
+- Issue with keyboard navigation has been resolved.
+
+## 21.2.6 (2023-05-23)
+
+### Uploader
+
+#### Bug Fixes
+
+- `#I460888` - Issue with "Console error occurs when deleting files after data load" has been resolved.
 
 ## 21.1.38 (2023-04-04)
 
@@ -27,11 +88,20 @@
 
 - `#I433821` - Correcting the signature scaling issue while resizing the web browser has been resolved.
 
-### NumericTextBox
+## 20.4.38 (2022-12-21)
 
-#### Bug Fixes
+### Rating
 
-- `#F170722` - Issue with "change event doesn't trigger while modifying the value using `setValue` method inside reactive form" is resolved.
+**Key features**:
+
+
+The Rating component lets the user provide a star rating or view other people’s ratings on a numeric scale for any service provided, such as for movies, applications, or products.
+
+
+- **Precision** - Different precision modes to provide more accurate rating.
+- **Tooltip and Label** - Provide more expressive rating with tooltip and label.
+- **Template** - Support to customize the rating item to heart, svg or any content that precisely match our unique needs.
+- **Accessibility** - The Rating provides built-in compliance with the `WAI-ARIA` specifications and it is achieved through attributes.
 
 ## 19.4.38 (2021-12-17)
 
@@ -1288,13 +1358,13 @@ MaskedTextBox allows the user to enter the valid input only based on the provide
 - **Accessibility** - provides built-in accessibility support which helps to access all the MaskedTextBox component features through keyboard, on-screen readers, or other assistive technology devices.
 
 
-## 21.1.39 (2023-04-11)
+## 22.1.39 (2023-07-18)
 
 ### Uploader
 
 #### Bug Fixes
 
-- `#I436425` - The issue of 'Uploader Id being duplicated only when the uploader is rendered inside a form element' has been resolved.
+- `#I477415` - Fixed the error "File name is not allowed" that was being thrown when attempting to upload a file with a UTF-8 filename on the Uploader.
 
 ## 19.3.47 (2021-10-26)
 
diff --git a/components/inputs/package.json b/components/inputs/package.json
index 6d7d2453..a13ad68a 100644
--- a/components/inputs/package.json
+++ b/components/inputs/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@syncfusion/ej2-angular-inputs",
-	"version": "21.1.39",
+	"version": "22.1.39",
 	"description": "A package of Essential JS 2 input components such as Textbox, Color-picker, Masked-textbox, Numeric-textbox, Slider, Upload, and Form-validator that is used to get input from the users. for Angular",
 	"author": "Syncfusion Inc.",
 	"license": "SEE LICENSE IN license",
diff --git a/components/inputs/src/rating/rating.component.ts b/components/inputs/src/rating/rating.component.ts
index 6ab37e0b..6ca6e265 100644
--- a/components/inputs/src/rating/rating.component.ts
+++ b/components/inputs/src/rating/rating.component.ts
@@ -50,6 +50,7 @@ export class RatingComponent extends Rating implements IComponentBase {
      * {% codeBlock src='rating/fullTemplate/index.md' %}{% endcodeBlock %}
      *     
      * @default ''
+     * @asptype string
      */
     @ContentChild('fullTemplate')
     @Template()
@@ -57,6 +58,7 @@ export class RatingComponent extends Rating implements IComponentBase {
     /** 
      * Defines the template that defines the appearance of each un-rated item in a rating component.
      * @default ''
+     * @asptype string
      */
     @ContentChild('emptyTemplate')
     @Template()
@@ -68,6 +70,7 @@ export class RatingComponent extends Rating implements IComponentBase {
      * {% codeBlock src='rating/tooltipTemplate/index.md' %}{% endcodeBlock %}
      *     
      * @default ''
+     * @asptype string
      */
     @ContentChild('tooltipTemplate')
     @Template()
@@ -78,6 +81,7 @@ export class RatingComponent extends Rating implements IComponentBase {
      * {% codeBlock src='rating/labelTemplate/index.md' %}{% endcodeBlock %}
      *     
      * @default ''
+     * @asptype string
      */
     @ContentChild('labelTemplate')
     @Template()
diff --git a/components/inputs/src/uploader/uploader.component.ts b/components/inputs/src/uploader/uploader.component.ts
index ccd7f2b6..815fb28e 100644
--- a/components/inputs/src/uploader/uploader.component.ts
+++ b/components/inputs/src/uploader/uploader.component.ts
@@ -65,6 +65,7 @@ export class UploaderComponent extends Uploader implements IComponentBase {
      * > For more information, refer to the [template](../../uploader/template/) section from the documentation.
      *     
      * @default null
+     * @asptype string
      */
     @ContentChild('template')
     @Template()
diff --git a/components/inputs/styles/color-picker/material3-dark.scss b/components/inputs/styles/color-picker/material3-dark.scss
new file mode 100644
index 00000000..8ae627fa
--- /dev/null
+++ b/components/inputs/styles/color-picker/material3-dark.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-dark-definition.scss';
+@import 'ej2-inputs/styles/color-picker/material3-dark.scss';
diff --git a/components/inputs/styles/color-picker/material3.scss b/components/inputs/styles/color-picker/material3.scss
new file mode 100644
index 00000000..44006131
--- /dev/null
+++ b/components/inputs/styles/color-picker/material3.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-definition.scss';
+@import 'ej2-inputs/styles/color-picker/material3.scss';
diff --git a/components/inputs/styles/input/material3-dark.scss b/components/inputs/styles/input/material3-dark.scss
new file mode 100644
index 00000000..8d376640
--- /dev/null
+++ b/components/inputs/styles/input/material3-dark.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-dark-definition.scss';
+@import 'ej2-inputs/styles/input/material3-dark.scss';
diff --git a/components/inputs/styles/input/material3.scss b/components/inputs/styles/input/material3.scss
new file mode 100644
index 00000000..e31a9eea
--- /dev/null
+++ b/components/inputs/styles/input/material3.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-definition.scss';
+@import 'ej2-inputs/styles/input/material3.scss';
diff --git a/components/inputs/styles/maskedtextbox/material3-dark.scss b/components/inputs/styles/maskedtextbox/material3-dark.scss
new file mode 100644
index 00000000..c44570fd
--- /dev/null
+++ b/components/inputs/styles/maskedtextbox/material3-dark.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-dark-definition.scss';
+@import 'ej2-inputs/styles/maskedtextbox/material3-dark.scss';
diff --git a/components/inputs/styles/maskedtextbox/material3.scss b/components/inputs/styles/maskedtextbox/material3.scss
new file mode 100644
index 00000000..8fc2eb5c
--- /dev/null
+++ b/components/inputs/styles/maskedtextbox/material3.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-definition.scss';
+@import 'ej2-inputs/styles/maskedtextbox/material3.scss';
diff --git a/components/inputs/styles/material3-dark.scss b/components/inputs/styles/material3-dark.scss
new file mode 100644
index 00000000..f9cfbd1a
--- /dev/null
+++ b/components/inputs/styles/material3-dark.scss
@@ -0,0 +1,10 @@
+
+@import 'signature/material3-dark.scss';
+@import 'input/material3-dark.scss';
+@import 'numerictextbox/material3-dark.scss';
+@import 'maskedtextbox/material3-dark.scss';
+@import 'slider/material3-dark.scss';
+@import 'textbox/material3-dark.scss';
+@import 'uploader/material3-dark.scss';
+@import 'color-picker/material3-dark.scss';
+@import 'rating/material3-dark.scss';
diff --git a/components/inputs/styles/material3.scss b/components/inputs/styles/material3.scss
new file mode 100644
index 00000000..77f70e88
--- /dev/null
+++ b/components/inputs/styles/material3.scss
@@ -0,0 +1,10 @@
+
+@import 'signature/material3.scss';
+@import 'input/material3.scss';
+@import 'numerictextbox/material3.scss';
+@import 'maskedtextbox/material3.scss';
+@import 'slider/material3.scss';
+@import 'textbox/material3.scss';
+@import 'uploader/material3.scss';
+@import 'color-picker/material3.scss';
+@import 'rating/material3.scss';
diff --git a/components/inputs/styles/numerictextbox/material3-dark.scss b/components/inputs/styles/numerictextbox/material3-dark.scss
new file mode 100644
index 00000000..7f6fd403
--- /dev/null
+++ b/components/inputs/styles/numerictextbox/material3-dark.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-dark-definition.scss';
+@import 'ej2-inputs/styles/numerictextbox/material3-dark.scss';
diff --git a/components/inputs/styles/numerictextbox/material3.scss b/components/inputs/styles/numerictextbox/material3.scss
new file mode 100644
index 00000000..1d468ffb
--- /dev/null
+++ b/components/inputs/styles/numerictextbox/material3.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-definition.scss';
+@import 'ej2-inputs/styles/numerictextbox/material3.scss';
diff --git a/components/inputs/styles/rating/material3-dark.scss b/components/inputs/styles/rating/material3-dark.scss
new file mode 100644
index 00000000..5199dfc5
--- /dev/null
+++ b/components/inputs/styles/rating/material3-dark.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-dark-definition.scss';
+@import 'ej2-inputs/styles/rating/material3-dark.scss';
diff --git a/components/inputs/styles/rating/material3.scss b/components/inputs/styles/rating/material3.scss
new file mode 100644
index 00000000..863f8f9e
--- /dev/null
+++ b/components/inputs/styles/rating/material3.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-definition.scss';
+@import 'ej2-inputs/styles/rating/material3.scss';
diff --git a/components/inputs/styles/signature/material3-dark.scss b/components/inputs/styles/signature/material3-dark.scss
new file mode 100644
index 00000000..dd2bc92a
--- /dev/null
+++ b/components/inputs/styles/signature/material3-dark.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-dark-definition.scss';
+@import 'ej2-inputs/styles/signature/material3-dark.scss';
diff --git a/components/inputs/styles/signature/material3.scss b/components/inputs/styles/signature/material3.scss
new file mode 100644
index 00000000..df64c277
--- /dev/null
+++ b/components/inputs/styles/signature/material3.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-definition.scss';
+@import 'ej2-inputs/styles/signature/material3.scss';
diff --git a/components/inputs/styles/slider/material3-dark.scss b/components/inputs/styles/slider/material3-dark.scss
new file mode 100644
index 00000000..be8bbd2d
--- /dev/null
+++ b/components/inputs/styles/slider/material3-dark.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-dark-definition.scss';
+@import 'ej2-inputs/styles/slider/material3-dark.scss';
diff --git a/components/inputs/styles/slider/material3.scss b/components/inputs/styles/slider/material3.scss
new file mode 100644
index 00000000..c15ee8ed
--- /dev/null
+++ b/components/inputs/styles/slider/material3.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-definition.scss';
+@import 'ej2-inputs/styles/slider/material3.scss';
diff --git a/components/inputs/styles/textbox/material3-dark.scss b/components/inputs/styles/textbox/material3-dark.scss
new file mode 100644
index 00000000..3303ec74
--- /dev/null
+++ b/components/inputs/styles/textbox/material3-dark.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-dark-definition.scss';
+@import 'ej2-inputs/styles/textbox/material3-dark.scss';
diff --git a/components/inputs/styles/textbox/material3.scss b/components/inputs/styles/textbox/material3.scss
new file mode 100644
index 00000000..8c805568
--- /dev/null
+++ b/components/inputs/styles/textbox/material3.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-definition.scss';
+@import 'ej2-inputs/styles/textbox/material3.scss';
diff --git a/components/inputs/styles/uploader/material3-dark.scss b/components/inputs/styles/uploader/material3-dark.scss
new file mode 100644
index 00000000..6fdaeb51
--- /dev/null
+++ b/components/inputs/styles/uploader/material3-dark.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-dark-definition.scss';
+@import 'ej2-inputs/styles/uploader/material3-dark.scss';
diff --git a/components/inputs/styles/uploader/material3.scss b/components/inputs/styles/uploader/material3.scss
new file mode 100644
index 00000000..1cbb5a9c
--- /dev/null
+++ b/components/inputs/styles/uploader/material3.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-definition.scss';
+@import 'ej2-inputs/styles/uploader/material3.scss';
diff --git a/components/kanban/CHANGELOG.md b/components/kanban/CHANGELOG.md
index 28458534..76f5f1e1 100644
--- a/components/kanban/CHANGELOG.md
+++ b/components/kanban/CHANGELOG.md
@@ -2,6 +2,22 @@
 
 ## [Unreleased]
 
+## 22.1.38 (2023-07-11)
+
+### Kanban
+
+#### Bug Fixes
+
+- `#I476520`, `#I477525` - Now, dragging and dropping a card into an empty column works properly.
+
+## 22.1.34 (2023-06-21)
+
+### Kanban
+
+#### New Features
+
+- **Virtual Scrolling**: This feature allows users to load data on demand when scrolling through columns for a smoother experience with large datasets.
+
 ## 21.1.39 (2023-04-11)
 
 ### Kanban
diff --git a/components/kanban/package.json b/components/kanban/package.json
index be6c703d..076ca140 100644
--- a/components/kanban/package.json
+++ b/components/kanban/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@syncfusion/ej2-angular-kanban",
-	"version": "21.1.39",
+	"version": "22.1.38",
 	"description": "The Kanban board is an efficient way to visualize the workflow at each stage along its path to completion. The most important features available are Swim lane, filtering, and editing. for Angular",
 	"author": "Syncfusion Inc.",
 	"license": "SEE LICENSE IN license",
diff --git a/components/kanban/src/kanban/columns.directive.ts b/components/kanban/src/kanban/columns.directive.ts
index 5f632c09..b9f0db07 100644
--- a/components/kanban/src/kanban/columns.directive.ts
+++ b/components/kanban/src/kanban/columns.directive.ts
@@ -91,6 +91,7 @@ export class ColumnDirective extends ComplexBase<ColumnDirective> {
     /** 
      * Defines the column template
      * @default null
+     * @asptype string
      */
     @ContentChild('template')
     @Template()
diff --git a/components/kanban/src/kanban/kanban.component.ts b/components/kanban/src/kanban/kanban.component.ts
index 7109bdf6..637a06f2 100644
--- a/components/kanban/src/kanban/kanban.component.ts
+++ b/components/kanban/src/kanban/kanban.component.ts
@@ -5,7 +5,7 @@ import { Template } from '@syncfusion/ej2-angular-base';
 import { ColumnsDirective } from './columns.directive';
 import { StackedHeadersDirective } from './stackedheaders.directive';
 
-export const inputs: string[] = ['allowDragAndDrop','allowKeyboard','cardSettings','columns','constraintType','cssClass','dataSource','dialogSettings','enableHtmlSanitizer','enablePersistence','enableRtl','enableTooltip','externalDropId','height','keyField','locale','query','showEmptyColumn','sortSettings','stackedHeaders','swimlaneSettings','tooltipTemplate','width'];
+export const inputs: string[] = ['allowDragAndDrop','allowKeyboard','cardHeight','cardSettings','columns','constraintType','cssClass','dataSource','dialogSettings','enableHtmlSanitizer','enablePersistence','enableRtl','enableTooltip','enableVirtualization','externalDropId','height','keyField','locale','query','showEmptyColumn','sortSettings','stackedHeaders','swimlaneSettings','tooltipTemplate','width'];
 export const outputs: string[] = ['actionBegin','actionComplete','actionFailure','cardClick','cardDoubleClick','cardRendered','created','dataBinding','dataBound','dataSourceChanged','dataStateChange','dialogClose','dialogOpen','drag','dragStart','dragStop','queryCellInfo'];
 export const twoWays: string[] = [''];
 
@@ -53,6 +53,7 @@ export class KanbanComponent extends Kanban implements IComponentBase {
     /** 
      * Defines the template content to card’s tooltip. The property works by enabling the ‘enableTooltip’ property.
      * @default null
+     * @asptype string
      */
     @ContentChild('tooltipTemplate')
     @Template()
diff --git a/components/kanban/styles/kanban/material3-dark.scss b/components/kanban/styles/kanban/material3-dark.scss
new file mode 100644
index 00000000..3066ed0a
--- /dev/null
+++ b/components/kanban/styles/kanban/material3-dark.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-dark-definition.scss';
+@import 'ej2-kanban/styles/kanban/material3-dark.scss';
diff --git a/components/kanban/styles/kanban/material3.scss b/components/kanban/styles/kanban/material3.scss
new file mode 100644
index 00000000..76f0c73b
--- /dev/null
+++ b/components/kanban/styles/kanban/material3.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-definition.scss';
+@import 'ej2-kanban/styles/kanban/material3.scss';
diff --git a/components/kanban/styles/material3-dark.scss b/components/kanban/styles/material3-dark.scss
new file mode 100644
index 00000000..d6382a6a
--- /dev/null
+++ b/components/kanban/styles/material3-dark.scss
@@ -0,0 +1,2 @@
+
+@import 'kanban/material3-dark.scss';
diff --git a/components/kanban/styles/material3.scss b/components/kanban/styles/material3.scss
new file mode 100644
index 00000000..00d5a766
--- /dev/null
+++ b/components/kanban/styles/material3.scss
@@ -0,0 +1,2 @@
+
+@import 'kanban/material3.scss';
diff --git a/components/layouts/CHANGELOG.md b/components/layouts/CHANGELOG.md
index 64e3a20a..3d9aa75a 100644
--- a/components/layouts/CHANGELOG.md
+++ b/components/layouts/CHANGELOG.md
@@ -2,6 +2,45 @@
 
 ## [Unreleased]
 
+## 22.1.37 (2023-07-04)
+
+### Splitter
+
+#### Bug Fixes
+
+- `#I466016` -  The issue with "The Horizontal pane does not retain its size when the window is resized" has been resolved.
+- `#I466016` -  The issue with "When including pane background colour, the Splitter resize button disappears" has been resolved.
+
+## 22.1.36 (2023-06-28)
+
+### Dashboard Layout
+
+#### Bug Fixes
+
+- `#I474181` - The issue with Dashboard Layout component while setting panels in row 1 and none at row 0 has been resolved.
+
+## 21.2.9 (2023-06-06)
+
+### Dashboard Layout
+
+#### Bug Fixes
+
+- `#F182339` - Resolved the panel overlapping issue, when resize it after continuously performing drag and drop actions in Dashboard Layout component.
+
+### Splitter
+
+#### Bug Fixes
+
+- `#I463883` -  The issue of "updating the pane setting dynamically with the same value despite manually resizing the pane" has been resolved.
+
+## 21.2.6 (2023-05-23)
+
+### Splitter
+
+#### Bug Fixes
+
+- `#I451526` -  The issue with the "Pane resizing would not works properly" has been resolved.
+
 ## 20.4.48 (2023-02-01)
 
 ### Splitter
diff --git a/components/layouts/package.json b/components/layouts/package.json
index 884ddf75..d179b58f 100644
--- a/components/layouts/package.json
+++ b/components/layouts/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@syncfusion/ej2-angular-layouts",
-	"version": "21.2.3",
+	"version": "22.1.37",
 	"description": "A package of Essential JS 2 layout pure CSS components such as card and avatar. The card is used as small container to show content in specific structure, whereas the avatars are icons, initials or figures representing particular person. for Angular",
 	"author": "Syncfusion Inc.",
 	"license": "SEE LICENSE IN license",
diff --git a/components/layouts/src/dashboard-layout/panels.directive.ts b/components/layouts/src/dashboard-layout/panels.directive.ts
index bfc5a4b3..7315cdfe 100644
--- a/components/layouts/src/dashboard-layout/panels.directive.ts
+++ b/components/layouts/src/dashboard-layout/panels.directive.ts
@@ -98,12 +98,14 @@ export class PanelDirective extends ComplexBase<PanelDirective> {
     public zIndex: any;
     /** 
      * Defines the template value that should be displayed as the panel's header.
+     * @asptype string
      */
     @ContentChild('header')
     @Template()
     public header: any;
     /** 
      * Defines the template value that should be displayed as the panel's content.
+     * @asptype string
      */
     @ContentChild('content')
     @Template()
diff --git a/components/layouts/styles/avatar/material3-dark.scss b/components/layouts/styles/avatar/material3-dark.scss
new file mode 100644
index 00000000..d4e5e547
--- /dev/null
+++ b/components/layouts/styles/avatar/material3-dark.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-dark-definition.scss';
+@import 'ej2-layouts/styles/avatar/material3-dark.scss';
diff --git a/components/layouts/styles/avatar/material3.scss b/components/layouts/styles/avatar/material3.scss
new file mode 100644
index 00000000..e2981201
--- /dev/null
+++ b/components/layouts/styles/avatar/material3.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-definition.scss';
+@import 'ej2-layouts/styles/avatar/material3.scss';
diff --git a/components/layouts/styles/card/material3-dark.scss b/components/layouts/styles/card/material3-dark.scss
new file mode 100644
index 00000000..bbfad545
--- /dev/null
+++ b/components/layouts/styles/card/material3-dark.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-dark-definition.scss';
+@import 'ej2-layouts/styles/card/material3-dark.scss';
diff --git a/components/layouts/styles/card/material3.scss b/components/layouts/styles/card/material3.scss
new file mode 100644
index 00000000..cc2e69ff
--- /dev/null
+++ b/components/layouts/styles/card/material3.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-definition.scss';
+@import 'ej2-layouts/styles/card/material3.scss';
diff --git a/components/layouts/styles/dashboard-layout/material3-dark.scss b/components/layouts/styles/dashboard-layout/material3-dark.scss
new file mode 100644
index 00000000..7a9f4bec
--- /dev/null
+++ b/components/layouts/styles/dashboard-layout/material3-dark.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-dark-definition.scss';
+@import 'ej2-layouts/styles/dashboard-layout/material3-dark.scss';
diff --git a/components/layouts/styles/dashboard-layout/material3.scss b/components/layouts/styles/dashboard-layout/material3.scss
new file mode 100644
index 00000000..47e1f9a2
--- /dev/null
+++ b/components/layouts/styles/dashboard-layout/material3.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-definition.scss';
+@import 'ej2-layouts/styles/dashboard-layout/material3.scss';
diff --git a/components/layouts/styles/material3-dark.scss b/components/layouts/styles/material3-dark.scss
new file mode 100644
index 00000000..4d2123b8
--- /dev/null
+++ b/components/layouts/styles/material3-dark.scss
@@ -0,0 +1,5 @@
+
+@import 'avatar/material3-dark.scss';
+@import 'card/material3-dark.scss';
+@import 'splitter/material3-dark.scss';
+@import 'dashboard-layout/material3-dark.scss';
diff --git a/components/layouts/styles/material3.scss b/components/layouts/styles/material3.scss
new file mode 100644
index 00000000..a9e8436a
--- /dev/null
+++ b/components/layouts/styles/material3.scss
@@ -0,0 +1,5 @@
+
+@import 'avatar/material3.scss';
+@import 'card/material3.scss';
+@import 'splitter/material3.scss';
+@import 'dashboard-layout/material3.scss';
diff --git a/components/layouts/styles/splitter/material3-dark.scss b/components/layouts/styles/splitter/material3-dark.scss
new file mode 100644
index 00000000..510d54c7
--- /dev/null
+++ b/components/layouts/styles/splitter/material3-dark.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-dark-definition.scss';
+@import 'ej2-layouts/styles/splitter/material3-dark.scss';
diff --git a/components/layouts/styles/splitter/material3.scss b/components/layouts/styles/splitter/material3.scss
new file mode 100644
index 00000000..bf24c09c
--- /dev/null
+++ b/components/layouts/styles/splitter/material3.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-definition.scss';
+@import 'ej2-layouts/styles/splitter/material3.scss';
diff --git a/components/lineargauge/package.json b/components/lineargauge/package.json
index 5cdc27ad..a4b48c92 100644
--- a/components/lineargauge/package.json
+++ b/components/lineargauge/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@syncfusion/ej2-angular-lineargauge",
-	"version": "21.1.35",
+	"version": "22.1.34",
 	"description": "Essential JS 2 LinearGauge Components for Angular",
 	"author": "Syncfusion Inc.",
 	"license": "SEE LICENSE IN license",
diff --git a/components/lineargauge/src/linear-gauge/annotations.directive.ts b/components/lineargauge/src/linear-gauge/annotations.directive.ts
index 79ddd462..1b522fcc 100644
--- a/components/lineargauge/src/linear-gauge/annotations.directive.ts
+++ b/components/lineargauge/src/linear-gauge/annotations.directive.ts
@@ -68,6 +68,7 @@ export class AnnotationDirective extends ComplexBase<AnnotationDirective> {
     /** 
      * Sets and gets the content for the annotation.
      * @default ''
+     * @asptype string
      */
     @ContentChild('content')
     @Template()
diff --git a/components/lists/CHANGELOG.md b/components/lists/CHANGELOG.md
index 9cd94c23..03bf7040 100644
--- a/components/lists/CHANGELOG.md
+++ b/components/lists/CHANGELOG.md
@@ -2,6 +2,30 @@
 
 ## [Unreleased]
 
+## 22.1.34 (2023-06-21)
+
+### ListView
+
+#### Bug Fixes
+
+- `#I463091` - Resolved the CSS override issue of `e-content` class name with other components and changed the `e-content` class name into `e-list-container`.
+
+## 21.2.9 (2023-06-06)
+
+### ListView
+
+#### Bug Fixes
+
+- `#I466565` - The console error in the nested ListView component sample has been resolved.
+
+## 21.2.6 (2023-05-23)
+
+### ListBox
+
+#### Bug Fixes
+
+- `#I461648` - Issue with "Drag and drop on mobile browsers, it unable to drag an element to the topmost place in list box component" has been resolved.
+
 ## 21.1.41 (2023-04-18)
 
 ### ListBox
diff --git a/components/lists/package.json b/components/lists/package.json
index b4e64298..571cd7ff 100644
--- a/components/lists/package.json
+++ b/components/lists/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@syncfusion/ej2-angular-lists",
-	"version": "21.1.41",
+	"version": "22.1.34",
 	"description": "The listview control allows you to select an item or multiple items from a list-like interface and represents the data in interactive hierarchical structure across different layouts or views. for Angular",
 	"author": "Syncfusion Inc.",
 	"license": "SEE LICENSE IN license",
diff --git a/components/lists/src/list-view/listview.component.ts b/components/lists/src/list-view/listview.component.ts
index e27f1b72..a3cd058d 100644
--- a/components/lists/src/list-view/listview.component.ts
+++ b/components/lists/src/list-view/listview.component.ts
@@ -40,6 +40,9 @@ export class ListViewComponent extends ListView implements IComponentBase {
      * {% codeBlock src='listview/template/index.md' %}{% endcodeBlock %}
      *     
      * @default null
+     * @angulartype string | object
+     * @reacttype string | function | JSX.Element
+     * @vuetype string | function
      * @deprecated 
      */
     @ContentChild('template')
@@ -51,6 +54,9 @@ export class ListViewComponent extends ListView implements IComponentBase {
      * {% codeBlock src="listview/groupTemplate/index.md" %}{% endcodeBlock %}
      *     
      * @default null
+     * @angulartype string | object
+     * @reacttype string | function | JSX.Element
+     * @vuetype string | function
      * @deprecated 
      */
     @ContentChild('groupTemplate')
@@ -62,6 +68,9 @@ export class ListViewComponent extends ListView implements IComponentBase {
      * {% codeBlock src="listview/headerTemplate/index.md" %}{% endcodeBlock %}
      *     
      * @default null
+     * @angulartype string | object
+     * @reacttype string | function | JSX.Element
+     * @vuetype string | function
      * @deprecated 
      */
     @ContentChild('headerTemplate')
diff --git a/components/lists/styles/list-view/material3-dark.scss b/components/lists/styles/list-view/material3-dark.scss
new file mode 100644
index 00000000..fcbf1274
--- /dev/null
+++ b/components/lists/styles/list-view/material3-dark.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-dark-definition.scss';
+@import 'ej2-lists/styles/list-view/material3-dark.scss';
diff --git a/components/lists/styles/list-view/material3.scss b/components/lists/styles/list-view/material3.scss
new file mode 100644
index 00000000..e7fa9e53
--- /dev/null
+++ b/components/lists/styles/list-view/material3.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-definition.scss';
+@import 'ej2-lists/styles/list-view/material3.scss';
diff --git a/components/lists/styles/material3-dark.scss b/components/lists/styles/material3-dark.scss
new file mode 100644
index 00000000..ec19d105
--- /dev/null
+++ b/components/lists/styles/material3-dark.scss
@@ -0,0 +1,3 @@
+
+@import 'list-view/material3-dark.scss';
+@import 'sortable/material3-dark.scss';
diff --git a/components/lists/styles/material3.scss b/components/lists/styles/material3.scss
new file mode 100644
index 00000000..211ee517
--- /dev/null
+++ b/components/lists/styles/material3.scss
@@ -0,0 +1,3 @@
+
+@import 'list-view/material3.scss';
+@import 'sortable/material3.scss';
diff --git a/components/lists/styles/sortable/material3-dark.scss b/components/lists/styles/sortable/material3-dark.scss
new file mode 100644
index 00000000..baf0ec09
--- /dev/null
+++ b/components/lists/styles/sortable/material3-dark.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-dark-definition.scss';
+@import 'ej2-lists/styles/sortable/material3-dark.scss';
diff --git a/components/lists/styles/sortable/material3.scss b/components/lists/styles/sortable/material3.scss
new file mode 100644
index 00000000..0a37c930
--- /dev/null
+++ b/components/lists/styles/sortable/material3.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-definition.scss';
+@import 'ej2-lists/styles/sortable/material3.scss';
diff --git a/components/maps/CHANGELOG.md b/components/maps/CHANGELOG.md
index a04c4d74..1b1c01d1 100644
--- a/components/maps/CHANGELOG.md
+++ b/components/maps/CHANGELOG.md
@@ -11,23 +11,15 @@
 
 ## [Unreleased]
 
-## 21.1.41 (2023-04-18)
-
-### Maps
-
-#### Bug fixes
-
-- `#I441762` - The position of the data labels will now be proper when the `geometryType` is set as **Normal**.
-
-## 21.1.38 (2023-04-04)
+## 22.2.5 (2023-07-27)
 
 ### Maps
 
 #### Bug Fixes
 
-- `#I425592` - The marker rendered in the custom map can now be dragged and dropped in the desired location based on the requirement.
+- `#I482286` - When the page containing the Maps, which is placed in the dashboard, is switched dynamically, script errors are no longer thrown.
 
-## 21.1.35 (2023-03-23)
+## 22.1.34 (2023-06-21)
 
 ### Maps
 
diff --git a/components/maps/package.json b/components/maps/package.json
index 110a6187..abad18b4 100644
--- a/components/maps/package.json
+++ b/components/maps/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@syncfusion/ej2-angular-maps",
-	"version": "21.2.3",
+	"version": "22.1.34",
 	"description": "The Maps component is used to visualize the geographical data and represent the statistical data of a particular geographical area on earth with user interactivity, and provides various customizing options for Angular",
 	"author": "Syncfusion Inc.",
 	"license": "SEE LICENSE IN license",
diff --git a/components/maps/src/maps/annotations.directive.ts b/components/maps/src/maps/annotations.directive.ts
index d6686399..88504818 100644
--- a/components/maps/src/maps/annotations.directive.ts
+++ b/components/maps/src/maps/annotations.directive.ts
@@ -54,6 +54,7 @@ export class AnnotationDirective extends ComplexBase<AnnotationDirective> {
     /** 
      * Gets or sets the content for the annotation in maps.
      * @default ''
+     * @asptype string
      */
     @ContentChild('content')
     @Template()
diff --git a/components/maps/src/maps/markersettings.directive.ts b/components/maps/src/maps/markersettings.directive.ts
index 9f75a5bb..2fb490df 100644
--- a/components/maps/src/maps/markersettings.directive.ts
+++ b/components/maps/src/maps/markersettings.directive.ts
@@ -156,6 +156,7 @@ export class MarkerDirective extends ComplexBase<MarkerDirective> {
     /** 
      * Gets or sets the template for the marker to render custom elements.
      * @default null
+     * @asptype string
      */
     @ContentChild('template')
     @Template()
diff --git a/components/navigations/CHANGELOG.md b/components/navigations/CHANGELOG.md
index 827e1a18..2a64e97e 100644
--- a/components/navigations/CHANGELOG.md
+++ b/components/navigations/CHANGELOG.md
@@ -2,6 +2,136 @@
 
 ## [Unreleased]
 
+## 22.2.5 (2023-07-27)
+
+### Tab
+
+#### Bug Fixes
+
+- `#I45423` - The issue with where the Tab control was throwing a script error when opened in Internet Explorer 11 has been resolved.
+
+### ContextMenu
+
+#### Bug Fixes
+
+- `#I483247` - The issue with "Context Menu not working in IE 11" has been resolved.
+- `#I484122` - The issue with "Context menu closed while scroll within the sub menu of context menu.
+
+## 22.1.39 (2023-07-18)
+
+### Carousel
+
+#### Bug Fixes
+
+- `#I480096` - An issue with the indicators are not updated while dynamically changing the data source of the Carousel has been fixed.
+
+### Menu
+
+#### Bug Fixes
+
+- `#F158513` - The issue with "hideItems method not working properly in angular menu component" has been resolved.
+
+## 22.1.38 (2023-07-11)
+
+### Toolbar
+
+#### Bug Fixes
+
+- `#I477752` - An issue with alignment while mobile orientation change has been fixed.
+
+## 22.1.36 (2023-06-28)
+
+### Tab
+
+#### Bug Fixes
+
+- `#I469389` - Provided `preventFocus` parameter in `selected` event to prevent focus on Tab header focus on selection.
+
+## 22.1.34 (2023-06-21)
+
+### Carousel
+
+#### New Features
+
+- `#FB36950` - Provided support to change slides using swipe or drag gestures, improving the usability and accessibility of the component on phones and tablets.
+- Provided indicator customization options, such as `default`, `dynamic`, `progress` and `fraction`.
+
+## 21.2.9 (2023-06-06)
+
+### Menu
+
+#### Bug Fixes
+
+- `#I466216` - The issue with "hideItems and enableItems method not working properly when we placed more than one menu component in single page" has been resolved.
+
+### Tab
+
+#### Bug Fixes
+
+- `#I464872` - Resolved the issue where the Home or End key interaction was not working properly if the first and last tabs were hidden or disabled.
+
+### Toolbar
+
+#### Bug Fixes
+
+- `#I461446`, `#I468087` - An issue with toolbar items reorder issue when resize in extended and popup overflow mode has been fixed.
+
+## 21.2.8 (2023-05-30)
+
+### ContextMenu
+
+#### Bug Fixes
+
+- `#I829933` - The issue with "hideItems method of context menu not working properly for sub menu item" has been resolved.
+
+### TreeView
+
+#### Bug fixes
+
+- `#I457872` - Resolved the issue where customized theme styles were not correctly applied for active node text of TreeView component.
+
+## 21.2.6 (2023-05-23)
+
+### Accordion
+
+#### Bug Fixes
+
+- `#I461717` - An issue with the accordion old templates is not cleared after the property change has been fixed.
+
+## 21.2.5 (2023-05-16)
+
+### TreeView
+
+#### Bug fixes
+
+- `#I459316` - Now the nodeExpanding event triggers for addNodes method based on the value of preventExpand argument.
+- `#I450146` - Provided the horizontal scroll support for the TreeView component in mobile mode.
+
+### Tab
+
+#### Bug Fixes
+
+- `#I459687` - An issue with the "Drag and drop is not working in the tab after setting `args.cancel` to true in the `dragStart` event" has been fixed.
+
+## 21.2.4 (2023-05-09)
+
+### ContextMenu
+
+#### New Features
+
+- `#I458989` - Provided the new parameter target to `beforeOpen` event argument of context menu component.
+
+#### Bug Fixes
+
+- `#I461864` - The issue with "Error is not handled gracefully in context menu enableItems method" has been resolved.
+
+### Tab
+
+#### Bug Fixes
+
+- `#I458102` - An issue where the tab header did not update with dynamic data when the tab directives were rendered as HTML elements has been fixed.
+- `#I457021` - The issue where the `data-id` attribute was being removed from tab items upon property change has been fixed.
+
 ## 21.2.3 (2023-05-03)
 
 ### Toolbar
diff --git a/components/navigations/package.json b/components/navigations/package.json
index 498445ae..ca8ca2d9 100644
--- a/components/navigations/package.json
+++ b/components/navigations/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@syncfusion/ej2-angular-navigations",
-	"version": "21.1.39",
+	"version": "22.1.39",
 	"description": "A package of Essential JS 2 navigation components such as Tree-view, Tab, Toolbar, Context-menu, and Accordion which is used to navigate from one page to another for Angular",
 	"author": "Syncfusion Inc.",
 	"license": "SEE LICENSE IN license",
diff --git a/components/navigations/src/accordion/accordion.component.ts b/components/navigations/src/accordion/accordion.component.ts
index 43cd34d3..a5fd4731 100644
--- a/components/navigations/src/accordion/accordion.component.ts
+++ b/components/navigations/src/accordion/accordion.component.ts
@@ -39,6 +39,10 @@ export class AccordionComponent extends Accordion implements IComponentBase {
     /** 
      * Specifies the header title template option for accordion items.
      * @default null
+     * @angulartype string | object
+     * @reacttype string | function | JSX.Element
+     * @vuetype string | function
+     * @asptype string
      */
     @ContentChild('headerTemplate')
     @Template()
@@ -46,6 +50,10 @@ export class AccordionComponent extends Accordion implements IComponentBase {
     /** 
      * Specifies the template option for accordion items.
      * @default null
+     * @angulartype string | object
+     * @reacttype string | function | JSX.Element
+     * @vuetype string | function
+     * @asptype string
      */
     @ContentChild('itemTemplate')
     @Template()
diff --git a/components/navigations/src/breadcrumb/breadcrumb.component.ts b/components/navigations/src/breadcrumb/breadcrumb.component.ts
index 48d5432b..7a3563c5 100644
--- a/components/navigations/src/breadcrumb/breadcrumb.component.ts
+++ b/components/navigations/src/breadcrumb/breadcrumb.component.ts
@@ -37,6 +37,7 @@ export class BreadcrumbComponent extends Breadcrumb implements IComponentBase {
     /** 
      * Specifies the separator template for Breadcrumb.
      * @default '/'
+     * @asptype string
      */
     @ContentChild('separatorTemplate')
     @Template()
@@ -44,6 +45,7 @@ export class BreadcrumbComponent extends Breadcrumb implements IComponentBase {
     /** 
      * Specifies the template for Breadcrumb item.
      * @default null
+     * @asptype string
      */
     @ContentChild('itemTemplate')
     @Template()
diff --git a/components/navigations/src/carousel/carousel.component.ts b/components/navigations/src/carousel/carousel.component.ts
index f7b19fc4..8d42bc47 100644
--- a/components/navigations/src/carousel/carousel.component.ts
+++ b/components/navigations/src/carousel/carousel.component.ts
@@ -4,7 +4,7 @@ import { Carousel } from '@syncfusion/ej2-navigations';
 import { Template } from '@syncfusion/ej2-angular-base';
 import { CarouselItemsDirective } from './items.directive';
 
-export const inputs: string[] = ['animationEffect','autoPlay','buttonsVisibility','cssClass','dataSource','enablePersistence','enableRtl','enableTouchSwipe','height','htmlAttributes','indicatorsTemplate','interval','itemTemplate','items','locale','loop','nextButtonTemplate','partialVisible','pauseOnHover','playButtonTemplate','previousButtonTemplate','selectedIndex','showIndicators','showPlayButton','width'];
+export const inputs: string[] = ['animationEffect','autoPlay','buttonsVisibility','cssClass','dataSource','enablePersistence','enableRtl','enableTouchSwipe','height','htmlAttributes','indicatorsTemplate','indicatorsType','interval','itemTemplate','items','locale','loop','nextButtonTemplate','partialVisible','pauseOnHover','playButtonTemplate','previousButtonTemplate','selectedIndex','showIndicators','showPlayButton','swipeMode','width'];
 export const outputs: string[] = ['slideChanged','slideChanging','selectedIndexChange'];
 export const twoWays: string[] = ['selectedIndex'];
 
@@ -36,6 +36,10 @@ export class CarouselComponent extends Carousel implements IComponentBase {
     /** 
      * Accepts the template for indicator buttons.
      * @default null
+     * @angulartype string | object
+     * @reacttype string | function | JSX.Element
+     * @vuetype string | function
+     * @asptype string
      */
     @ContentChild('indicatorsTemplate')
     @Template()
@@ -43,6 +47,10 @@ export class CarouselComponent extends Carousel implements IComponentBase {
     /** 
      * Accepts the template for next navigation button.
      * @default null
+     * @angulartype string | object
+     * @reacttype string | function | JSX.Element
+     * @vuetype string | function
+     * @asptype string
      */
     @ContentChild('nextButtonTemplate')
     @Template()
@@ -50,6 +58,10 @@ export class CarouselComponent extends Carousel implements IComponentBase {
     /** 
      * Accepts the template for previous navigation button.
      * @default null
+     * @angulartype string | object
+     * @reacttype string | function | JSX.Element
+     * @vuetype string | function
+     * @asptype string
      */
     @ContentChild('previousButtonTemplate')
     @Template()
@@ -57,6 +69,10 @@ export class CarouselComponent extends Carousel implements IComponentBase {
     /** 
      * Accepts the template for play/pause button.
      * @default null
+     * @angulartype string | object
+     * @reacttype string | function | JSX.Element
+     * @vuetype string | function
+     * @asptype string
      */
     @ContentChild('playButtonTemplate')
     @Template()
@@ -64,6 +80,10 @@ export class CarouselComponent extends Carousel implements IComponentBase {
     /** 
      * Specifies the template option for carousel items.
      * @default null
+     * @angulartype string | object
+     * @reacttype string | function | JSX.Element
+     * @vuetype string | function
+     * @asptype string
      */
     @ContentChild('itemTemplate')
     @Template()
diff --git a/components/navigations/src/carousel/items.directive.ts b/components/navigations/src/carousel/items.directive.ts
index 0eeff137..a23a8ecf 100644
--- a/components/navigations/src/carousel/items.directive.ts
+++ b/components/navigations/src/carousel/items.directive.ts
@@ -48,6 +48,10 @@ export class CarouselItemDirective extends ComplexBase<CarouselItemDirective> {
     /** 
      * Accepts the template for individual carousel item.
      * @default null
+     * @angulartype string | object
+     * @reacttype string | function | JSX.Element
+     * @vuetype string | function
+     * @asptype string
      */
     @ContentChild('template')
     @Template()
diff --git a/components/navigations/src/menu/menu.component.ts b/components/navigations/src/menu/menu.component.ts
index 5f67db55..cf3a7e05 100644
--- a/components/navigations/src/menu/menu.component.ts
+++ b/components/navigations/src/menu/menu.component.ts
@@ -40,6 +40,7 @@ export class MenuComponent extends Menu implements IComponentBase {
     /** 
      * Specifies the template for Menu item.
      * @default null
+     * @asptype string
      */
     @ContentChild('template')
     @Template()
diff --git a/components/navigations/src/tab/items.directive.ts b/components/navigations/src/tab/items.directive.ts
index f5e33cf7..fd93c938 100644
--- a/components/navigations/src/tab/items.directive.ts
+++ b/components/navigations/src/tab/items.directive.ts
@@ -65,6 +65,10 @@ export class TabItemDirective extends ComplexBase<TabItemDirective> {
     /** 
      * Specifies the content of Tab item, that is displayed when concern item header is selected.
      * @default ''
+     * @angulartype string | object
+     * @reacttype string | function | JSX.Element
+     * @vuetype string | function
+     * @asptype string
      */
     @ContentChild('content')
     @Template()
@@ -75,6 +79,10 @@ export class TabItemDirective extends ComplexBase<TabItemDirective> {
     /** 
      * Specifies the header text of Tab item.
      * @default null
+     * @angulartype string | object
+     * @reacttype string | function | JSX.Element
+     * @vuetype string | function
+     * @asptype string
      */
     @ContentChild('headerTemplate')
     @Template()
diff --git a/components/navigations/src/toolbar/items.directive.ts b/components/navigations/src/toolbar/items.directive.ts
index 6e26250d..b2c1df16 100644
--- a/components/navigations/src/toolbar/items.directive.ts
+++ b/components/navigations/src/toolbar/items.directive.ts
@@ -48,6 +48,7 @@ export class ItemDirective extends ComplexBase<ItemDirective> {
      * * `Right`: To align commands to the right side of the Toolbar. 
      * 
      * @default "Left"
+     * @asppopulatedefaultvalue 
      */
     public align: any;
     /** 
@@ -138,6 +139,10 @@ export class ItemDirective extends ComplexBase<ItemDirective> {
      * Specifies the HTML element/element ID as a string that can be added as a Toolbar command. 
      * 
      * @default ""
+     * @angulartype string | object
+     * @reacttype string | function | JSX.Element
+     * @vuetype string | function
+     * @asptype string
      */
     @ContentChild('template')
     @Template()
diff --git a/components/navigations/src/treeview/treeview.component.ts b/components/navigations/src/treeview/treeview.component.ts
index 4a6ba8b6..dbfb2a60 100644
--- a/components/navigations/src/treeview/treeview.component.ts
+++ b/components/navigations/src/treeview/treeview.component.ts
@@ -59,6 +59,10 @@ export class TreeViewComponent extends TreeView implements IComponentBase {
      * or HTML element ID holding the content. For more information on template concept, refer to 
      * [Template](../../treeview/template/).
      * @default null
+     * @angulartype string | object
+     * @reacttype string | function | JSX.Element
+     * @vuetype string | function
+     * @asptype string
      */
     @ContentChild('nodeTemplate')
     @Template()
diff --git a/components/navigations/styles/accordion/material3-dark.scss b/components/navigations/styles/accordion/material3-dark.scss
new file mode 100644
index 00000000..c5bc1bf8
--- /dev/null
+++ b/components/navigations/styles/accordion/material3-dark.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-dark-definition.scss';
+@import 'ej2-navigations/styles/accordion/material3-dark.scss';
diff --git a/components/navigations/styles/accordion/material3.scss b/components/navigations/styles/accordion/material3.scss
new file mode 100644
index 00000000..cd6ea36e
--- /dev/null
+++ b/components/navigations/styles/accordion/material3.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-definition.scss';
+@import 'ej2-navigations/styles/accordion/material3.scss';
diff --git a/components/navigations/styles/appbar/material3-dark.scss b/components/navigations/styles/appbar/material3-dark.scss
new file mode 100644
index 00000000..971b8e6c
--- /dev/null
+++ b/components/navigations/styles/appbar/material3-dark.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-dark-definition.scss';
+@import 'ej2-navigations/styles/appbar/material3-dark.scss';
diff --git a/components/navigations/styles/appbar/material3.scss b/components/navigations/styles/appbar/material3.scss
new file mode 100644
index 00000000..e7b1598e
--- /dev/null
+++ b/components/navigations/styles/appbar/material3.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-definition.scss';
+@import 'ej2-navigations/styles/appbar/material3.scss';
diff --git a/components/navigations/styles/breadcrumb/material3-dark.scss b/components/navigations/styles/breadcrumb/material3-dark.scss
new file mode 100644
index 00000000..707d63cc
--- /dev/null
+++ b/components/navigations/styles/breadcrumb/material3-dark.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-dark-definition.scss';
+@import 'ej2-navigations/styles/breadcrumb/material3-dark.scss';
diff --git a/components/navigations/styles/breadcrumb/material3.scss b/components/navigations/styles/breadcrumb/material3.scss
new file mode 100644
index 00000000..463ae617
--- /dev/null
+++ b/components/navigations/styles/breadcrumb/material3.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-definition.scss';
+@import 'ej2-navigations/styles/breadcrumb/material3.scss';
diff --git a/components/navigations/styles/carousel/material3-dark.scss b/components/navigations/styles/carousel/material3-dark.scss
new file mode 100644
index 00000000..ae5bfc95
--- /dev/null
+++ b/components/navigations/styles/carousel/material3-dark.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-dark-definition.scss';
+@import 'ej2-navigations/styles/carousel/material3-dark.scss';
diff --git a/components/navigations/styles/carousel/material3.scss b/components/navigations/styles/carousel/material3.scss
new file mode 100644
index 00000000..63da24d3
--- /dev/null
+++ b/components/navigations/styles/carousel/material3.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-definition.scss';
+@import 'ej2-navigations/styles/carousel/material3.scss';
diff --git a/components/navigations/styles/context-menu/material3-dark.scss b/components/navigations/styles/context-menu/material3-dark.scss
new file mode 100644
index 00000000..0297a549
--- /dev/null
+++ b/components/navigations/styles/context-menu/material3-dark.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-dark-definition.scss';
+@import 'ej2-navigations/styles/context-menu/material3-dark.scss';
diff --git a/components/navigations/styles/context-menu/material3.scss b/components/navigations/styles/context-menu/material3.scss
new file mode 100644
index 00000000..7eebc01f
--- /dev/null
+++ b/components/navigations/styles/context-menu/material3.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-definition.scss';
+@import 'ej2-navigations/styles/context-menu/material3.scss';
diff --git a/components/navigations/styles/h-scroll/material3-dark.scss b/components/navigations/styles/h-scroll/material3-dark.scss
new file mode 100644
index 00000000..7d2b816c
--- /dev/null
+++ b/components/navigations/styles/h-scroll/material3-dark.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-dark-definition.scss';
+@import 'ej2-navigations/styles/h-scroll/material3-dark.scss';
diff --git a/components/navigations/styles/h-scroll/material3.scss b/components/navigations/styles/h-scroll/material3.scss
new file mode 100644
index 00000000..197e31d7
--- /dev/null
+++ b/components/navigations/styles/h-scroll/material3.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-definition.scss';
+@import 'ej2-navigations/styles/h-scroll/material3.scss';
diff --git a/components/navigations/styles/material3-dark.scss b/components/navigations/styles/material3-dark.scss
new file mode 100644
index 00000000..e79aea61
--- /dev/null
+++ b/components/navigations/styles/material3-dark.scss
@@ -0,0 +1,14 @@
+
+@import 'pager/material3-dark.scss';
+@import 'h-scroll/material3-dark.scss';
+@import 'v-scroll/material3-dark.scss';
+@import 'toolbar/material3-dark.scss';
+@import 'accordion/material3-dark.scss';
+@import 'carousel/material3-dark.scss';
+@import 'context-menu/material3-dark.scss';
+@import 'tab/material3-dark.scss';
+@import 'treeview/material3-dark.scss';
+@import 'sidebar/material3-dark.scss';
+@import 'menu/material3-dark.scss';
+@import 'breadcrumb/material3-dark.scss';
+@import 'appbar/material3-dark.scss';
diff --git a/components/navigations/styles/material3.scss b/components/navigations/styles/material3.scss
new file mode 100644
index 00000000..372e4336
--- /dev/null
+++ b/components/navigations/styles/material3.scss
@@ -0,0 +1,14 @@
+
+@import 'pager/material3.scss';
+@import 'h-scroll/material3.scss';
+@import 'v-scroll/material3.scss';
+@import 'toolbar/material3.scss';
+@import 'accordion/material3.scss';
+@import 'carousel/material3.scss';
+@import 'context-menu/material3.scss';
+@import 'tab/material3.scss';
+@import 'treeview/material3.scss';
+@import 'sidebar/material3.scss';
+@import 'menu/material3.scss';
+@import 'breadcrumb/material3.scss';
+@import 'appbar/material3.scss';
diff --git a/components/navigations/styles/menu/material3-dark.scss b/components/navigations/styles/menu/material3-dark.scss
new file mode 100644
index 00000000..d0572035
--- /dev/null
+++ b/components/navigations/styles/menu/material3-dark.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-dark-definition.scss';
+@import 'ej2-navigations/styles/menu/material3-dark.scss';
diff --git a/components/navigations/styles/menu/material3.scss b/components/navigations/styles/menu/material3.scss
new file mode 100644
index 00000000..affb51b8
--- /dev/null
+++ b/components/navigations/styles/menu/material3.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-definition.scss';
+@import 'ej2-navigations/styles/menu/material3.scss';
diff --git a/components/navigations/styles/pager/material3-dark.scss b/components/navigations/styles/pager/material3-dark.scss
new file mode 100644
index 00000000..5cc2ffe1
--- /dev/null
+++ b/components/navigations/styles/pager/material3-dark.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-dark-definition.scss';
+@import 'ej2-navigations/styles/pager/material3-dark.scss';
diff --git a/components/navigations/styles/pager/material3.scss b/components/navigations/styles/pager/material3.scss
new file mode 100644
index 00000000..dd2804db
--- /dev/null
+++ b/components/navigations/styles/pager/material3.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-definition.scss';
+@import 'ej2-navigations/styles/pager/material3.scss';
diff --git a/components/navigations/styles/sidebar/material3-dark.scss b/components/navigations/styles/sidebar/material3-dark.scss
new file mode 100644
index 00000000..90cfad59
--- /dev/null
+++ b/components/navigations/styles/sidebar/material3-dark.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-dark-definition.scss';
+@import 'ej2-navigations/styles/sidebar/material3-dark.scss';
diff --git a/components/navigations/styles/sidebar/material3.scss b/components/navigations/styles/sidebar/material3.scss
new file mode 100644
index 00000000..e5499396
--- /dev/null
+++ b/components/navigations/styles/sidebar/material3.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-definition.scss';
+@import 'ej2-navigations/styles/sidebar/material3.scss';
diff --git a/components/navigations/styles/tab/material3-dark.scss b/components/navigations/styles/tab/material3-dark.scss
new file mode 100644
index 00000000..3a512848
--- /dev/null
+++ b/components/navigations/styles/tab/material3-dark.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-dark-definition.scss';
+@import 'ej2-navigations/styles/tab/material3-dark.scss';
diff --git a/components/navigations/styles/tab/material3.scss b/components/navigations/styles/tab/material3.scss
new file mode 100644
index 00000000..8615bdee
--- /dev/null
+++ b/components/navigations/styles/tab/material3.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-definition.scss';
+@import 'ej2-navigations/styles/tab/material3.scss';
diff --git a/components/navigations/styles/toolbar/material3-dark.scss b/components/navigations/styles/toolbar/material3-dark.scss
new file mode 100644
index 00000000..f1680622
--- /dev/null
+++ b/components/navigations/styles/toolbar/material3-dark.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-dark-definition.scss';
+@import 'ej2-navigations/styles/toolbar/material3-dark.scss';
diff --git a/components/navigations/styles/toolbar/material3.scss b/components/navigations/styles/toolbar/material3.scss
new file mode 100644
index 00000000..fba3b256
--- /dev/null
+++ b/components/navigations/styles/toolbar/material3.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-definition.scss';
+@import 'ej2-navigations/styles/toolbar/material3.scss';
diff --git a/components/navigations/styles/treeview/material3-dark.scss b/components/navigations/styles/treeview/material3-dark.scss
new file mode 100644
index 00000000..9e30e9fc
--- /dev/null
+++ b/components/navigations/styles/treeview/material3-dark.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-dark-definition.scss';
+@import 'ej2-navigations/styles/treeview/material3-dark.scss';
diff --git a/components/navigations/styles/treeview/material3.scss b/components/navigations/styles/treeview/material3.scss
new file mode 100644
index 00000000..55127311
--- /dev/null
+++ b/components/navigations/styles/treeview/material3.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-definition.scss';
+@import 'ej2-navigations/styles/treeview/material3.scss';
diff --git a/components/navigations/styles/v-scroll/material3-dark.scss b/components/navigations/styles/v-scroll/material3-dark.scss
new file mode 100644
index 00000000..cbef8389
--- /dev/null
+++ b/components/navigations/styles/v-scroll/material3-dark.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-dark-definition.scss';
+@import 'ej2-navigations/styles/v-scroll/material3-dark.scss';
diff --git a/components/navigations/styles/v-scroll/material3.scss b/components/navigations/styles/v-scroll/material3.scss
new file mode 100644
index 00000000..4651fd39
--- /dev/null
+++ b/components/navigations/styles/v-scroll/material3.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-definition.scss';
+@import 'ej2-navigations/styles/v-scroll/material3.scss';
diff --git a/components/notifications/CHANGELOG.md b/components/notifications/CHANGELOG.md
index 000779d4..1b51d867 100644
--- a/components/notifications/CHANGELOG.md
+++ b/components/notifications/CHANGELOG.md
@@ -2,14 +2,6 @@
 
 ## [Unreleased]
 
-## 21.1.35 (2023-03-23)
-
-### Message
-
-#### Bug Fixes
-
-- The issue with the "React state change value is now reflected in the React `Message` component content template" has been resolved.
-
 ## 20.3.47 (2022-09-29)
 
 ### Message
diff --git a/components/notifications/package.json b/components/notifications/package.json
index 86d93d7a..88ed9777 100644
--- a/components/notifications/package.json
+++ b/components/notifications/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@syncfusion/ej2-angular-notifications",
-	"version": "21.1.37",
+	"version": "22.1.34",
 	"description": "A package of Essential JS 2 notification components such as Toast and Badge which used to notify important information to end-users. for Angular",
 	"author": "Syncfusion Inc.",
 	"license": "SEE LICENSE IN license",
diff --git a/components/notifications/src/message/message.component.ts b/components/notifications/src/message/message.component.ts
index f9d2f31a..276fdba9 100644
--- a/components/notifications/src/message/message.component.ts
+++ b/components/notifications/src/message/message.component.ts
@@ -36,6 +36,10 @@ export class MessageComponent extends Message implements IComponentBase {
     /** 
      * Specifies the content to be displayed in the Message component. It can be a paragraph, a list, or any other HTML element.
      * @default null
+     * @angulartype string | object
+     * @reacttype string | function | JSX.Element
+     * @vuetype string | function
+     * @asptype string
      */
     @ContentChild('content')
     @Template()
diff --git a/components/notifications/src/toast/toast.component.ts b/components/notifications/src/toast/toast.component.ts
index 7ed112e1..774b1dbe 100644
--- a/components/notifications/src/toast/toast.component.ts
+++ b/components/notifications/src/toast/toast.component.ts
@@ -42,6 +42,7 @@ export class ToastComponent extends Toast implements IComponentBase {
      * Specifies the title to be displayed on the Toast. 
      * Accepts selectors, string values and HTML elements.
      * @default null
+     * @asptype string
      */
     @ContentChild('title')
     @Template()
@@ -51,6 +52,7 @@ export class ToastComponent extends Toast implements IComponentBase {
      * Accepts selectors, string values and HTML elements.
      * @default null
      * @blazortype string
+     * @asptype string
      */
     @ContentChild('content')
     @Template()
@@ -62,6 +64,7 @@ export class ToastComponent extends Toast implements IComponentBase {
      * {% codeBlock src='toast/template/index.md' %}{% endcodeBlock %}
      *     
      * @default null
+     * @asptype string
      */
     @ContentChild('template')
     @Template()
diff --git a/components/notifications/styles/badge/material3-dark.scss b/components/notifications/styles/badge/material3-dark.scss
new file mode 100644
index 00000000..f6529a86
--- /dev/null
+++ b/components/notifications/styles/badge/material3-dark.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-dark-definition.scss';
+@import 'ej2-notifications/styles/badge/material3-dark.scss';
diff --git a/components/notifications/styles/badge/material3.scss b/components/notifications/styles/badge/material3.scss
new file mode 100644
index 00000000..d9cec417
--- /dev/null
+++ b/components/notifications/styles/badge/material3.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-definition.scss';
+@import 'ej2-notifications/styles/badge/material3.scss';
diff --git a/components/notifications/styles/material3-dark.scss b/components/notifications/styles/material3-dark.scss
new file mode 100644
index 00000000..d396af54
--- /dev/null
+++ b/components/notifications/styles/material3-dark.scss
@@ -0,0 +1,5 @@
+
+@import 'badge/material3-dark.scss';
+@import 'toast/material3-dark.scss';
+@import 'message/material3-dark.scss';
+@import 'skeleton/material3-dark.scss';
diff --git a/components/notifications/styles/material3.scss b/components/notifications/styles/material3.scss
new file mode 100644
index 00000000..e7f6d75d
--- /dev/null
+++ b/components/notifications/styles/material3.scss
@@ -0,0 +1,5 @@
+
+@import 'badge/material3.scss';
+@import 'toast/material3.scss';
+@import 'message/material3.scss';
+@import 'skeleton/material3.scss';
diff --git a/components/notifications/styles/message/material3-dark.scss b/components/notifications/styles/message/material3-dark.scss
new file mode 100644
index 00000000..4aba8170
--- /dev/null
+++ b/components/notifications/styles/message/material3-dark.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-dark-definition.scss';
+@import 'ej2-notifications/styles/message/material3-dark.scss';
diff --git a/components/notifications/styles/message/material3.scss b/components/notifications/styles/message/material3.scss
new file mode 100644
index 00000000..d7a6ae80
--- /dev/null
+++ b/components/notifications/styles/message/material3.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-definition.scss';
+@import 'ej2-notifications/styles/message/material3.scss';
diff --git a/components/notifications/styles/skeleton/material3-dark.scss b/components/notifications/styles/skeleton/material3-dark.scss
new file mode 100644
index 00000000..37108235
--- /dev/null
+++ b/components/notifications/styles/skeleton/material3-dark.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-dark-definition.scss';
+@import 'ej2-notifications/styles/skeleton/material3-dark.scss';
diff --git a/components/notifications/styles/skeleton/material3.scss b/components/notifications/styles/skeleton/material3.scss
new file mode 100644
index 00000000..792a8c25
--- /dev/null
+++ b/components/notifications/styles/skeleton/material3.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-definition.scss';
+@import 'ej2-notifications/styles/skeleton/material3.scss';
diff --git a/components/notifications/styles/toast/material3-dark.scss b/components/notifications/styles/toast/material3-dark.scss
new file mode 100644
index 00000000..12b7ce65
--- /dev/null
+++ b/components/notifications/styles/toast/material3-dark.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-dark-definition.scss';
+@import 'ej2-notifications/styles/toast/material3-dark.scss';
diff --git a/components/notifications/styles/toast/material3.scss b/components/notifications/styles/toast/material3.scss
new file mode 100644
index 00000000..c0624397
--- /dev/null
+++ b/components/notifications/styles/toast/material3.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-definition.scss';
+@import 'ej2-notifications/styles/toast/material3.scss';
diff --git a/components/pdfviewer/CHANGELOG.md b/components/pdfviewer/CHANGELOG.md
index de78b91a..c8cdc201 100644
--- a/components/pdfviewer/CHANGELOG.md
+++ b/components/pdfviewer/CHANGELOG.md
@@ -2,6 +2,140 @@
 
 ## [Unreleased]
 
+## 22.2.5 (2023-07-27)
+
+### PDF Viewer
+
+#### Bug Fixes
+
+- `#I481075` - Now, the link navigation is working properly in the provided document.
+- `#I481233` - Now, the selected value of the dropdown field is properly preserved in the downloaded document when we programmatically set the form fields to be read-only.
+- `#I479497` - Now, the annotations are locked properly when setting the isLock true in annotationSetting.
+
+## 22.1.39 (2023-07-18)
+
+### PDF Viewer
+
+#### Bug Fixes
+
+- `#I476124` - Now, able to cut, copy and paste the comments on the comment panel using keyboard shortcuts.
+- `#I475392` - Now, `Ctrl + Z` does not removes the entire comment text while editing the comment.
+- `#I478671` - Now, annotations have been rendered and no script error occurred while loading the given document by setting the enableMeasureAnnotation to false.
+- `#I464868` - Now, we can automatically select the placeholder text in the comment panel for the FreeText annotation without having to set the defaultText in freeTextSettings.
+- `#I480522` - Now, the deleted imported annotations do not appear when we resize the PDF Viewer.
+- `#F182930` - Now, the script error no longer occurs when updating the values for the signature and initial fields that have the same name, which are found in pages that are not being rendered.
+- `#I477780` - Now, we are able to add the annotations properly using the add annotation API.
+
+## 22.1.38 (2023-07-11)
+
+### PDF Viewer
+
+#### Bug Fixes
+
+- `#I476114` - Now, the text selection is properly preserved in the comment panel for text markup annotation.
+- `#I470260` - Now, the signature content prints properly in the printed outputs.
+- `#I475929` - Now, the annotation's isReadonly behavior is working properly when the allowedInteractions set to Select and the isLock property is set to true.
+
+## 22.1.37 (2023-07-04)
+
+### PDF Viewer
+
+#### Bug Fixes
+
+- `#I473387` - Now, the fontStyle object is properly preserved in the annotationSelect event argument if we apply strikeout after underline.
+- `#I472962` - Now, the isStrikeout property is properly preserved in the annotationSelect event argument when applying the underline programmatically.
+- `#I470103` - Now, the ink annotation mode is maintained when resizing the PDF Viewer container.
+- `#I473639` - Now, the ink annotation is preserved in the downloaded document when session storage exceeds in the application.
+- `#I473865` - Now, the content of the typed Handwritten signature position is properly preserved in downloaded document.
+
+## 22.1.36 (2023-06-28)
+
+### PDF Viewer
+
+#### New Features
+
+- `#I832710` - Now, we can restrict the file download of export annotation and form fields.
+
+#### Bug Fixes
+
+- `#I470152` - Now, when making the form fields read-only, the background color is visible.
+- `#I473505` - Now, the PDF pages are rendered properly for the provided PDF file.
+- `#I472797` - Now, the wrap box for free text annotation automatically updates when changing the font size if the autofit property is set to true.
+- `#I473873` - Now, the content of the typed handwritten signature is properly preserved in the saved document.
+
+## 22.1.34 (2023-06-21)
+
+### PDF Viewer
+
+#### Bug Fixes
+
+- `#I464829` - Now, we can select text in the comment panel using the mouse cursor.
+- `#I464868` - Now, the default placeholder text is automatically selected when the comment text box for free text annotation is in focus.
+- `#I430769` - Now, when the document is reloaded, exported, or imported into the PDF viewer, the order of the annotations is preserved.
+- `#I472757` - Now, the custom Stamp is not removed when downloading the document after undo and redo.
+
+#### New Features
+
+- `#I426363`, `F180068` – Provided the support for value property in the radio button and checkbox field.
+- `#I448261` – Exposed the API to load the number of pages on the initial loading.
+
+## 21.2.9 (2023-06-06)
+
+### PDF Viewer
+
+#### Bug Fixes
+
+- `#I464832` - Now, we can able to edit the first comment of the text markup annotation.
+- `#I464832` - Now, the words within the comments are split for readability.
+- `#I464992` - Now, enabling the form designer toolbar programmatically activates the form designer mode.
+- `#I466770` - Now, able to edit the free text annotation content programmatically and the content does not change while exporting.
+- `#I465319` - Now, adding a free text annotation shows its content once in the comment panel.
+- `#I464819` - Now, web service not listening does not occur when loading the provided PDF file.
+
+## 21.2.8 (2023-05-30)
+
+### PDF Viewer
+
+#### Bug Fixes
+
+- `#I464823` - Now, able to edit the annotation comments when cursor is placed in the textbox.
+- `#I464868` - Now, when double-clicking the free text annotation comment, the comment is focused.
+- `#I438900` - Now, double tap zooming is working after signing the signature field.
+- `#I438900` - Now, double tap zooming is working on iOS devices even if annotation module is not injected.
+- `#I467181` - Now, the tab key is working when we add PDF Viewer and input elements in the same page.
+- `#I467222` - Now, the `triggerAnnotationPropChange` event is not triggered multiple times when adding the free text annotation programmatically.
+- `#I464511` - Now, the content of the free text annotation does not changes when we click outside of it.
+- `#I463293` - Now, the form fields are placed properly while zoom in or zoom out in mobile device.
+
+## 21.2.5 (2023-05-16)
+
+### PDF Viewer
+
+#### Bug Fixes
+
+- `#I460490` - Now, the signature style is saved when we save the typed signature option.
+- `#I460513` - Now, the exception does not occur when downloading the provided PDF file.
+- `#I459487` - Now, the script error does not occur when importing the values programmatically.
+- `#I461544` - Now, scrolling the multiline textbox field works when we set it to read-only.
+- `#I462652` - Now, the form field validation works properly for non-rendered pages.
+- `#I460704` - Now, the script error does not occur when pressing the delete key.
+
+## 21.2.4 (2023-05-09)
+
+### PDF Viewer
+
+#### New Features
+
+- `#I426363`, `F180068` – Provided support for value property in the radio button and checkbox field.
+
+#### Bug Fixes
+
+- `#I456051` - Now, the stamp annotations are displayed correctly in the provided document.
+- `#I452436` - Now, the radio button and checkbox are added properly.
+- `#I403367` - Now, underlining and text selection are working properly in the provided document.
+- `#I456864` - Now, the download performance has been enhanced when downloading the provided document.
+- `#I458313` - Now, the add annotation API working fine when the annotation object is given as input.
+
 ## 21.2.3 (2023-05-03)
 
 ### PDF Viewer
diff --git a/components/pdfviewer/README.md b/components/pdfviewer/README.md
index 96f915db..90d96fa3 100644
--- a/components/pdfviewer/README.md
+++ b/components/pdfviewer/README.md
@@ -158,7 +158,7 @@ Product support is available through the following mediums.
 
 ## Changelog
 
-Check the changelog [here](https://github.com/syncfusion/ej2-pdfviewer/blob/master/CHANGELOG.md?utm_source=npm&utm_medium=listing&utm_campaign=angular-pdf-viewer-npm). Get minor improvements and bug fixes every week to stay up to date with frequent updates.
+Check the changelog [here](https://github.com/syncfusion/ej2-angular-ui-components/blob/master/components/pdfviewer/CHANGELOG.md?utm_source=npm&utm_medium=listing&utm_campaign=angular-pdf-viewer-npm). Get minor improvements and bug fixes every week to stay up to date with frequent updates.
 
 ## License and copyright
 
diff --git a/components/pdfviewer/package.json b/components/pdfviewer/package.json
index 2c1157cf..f3ed3dcf 100644
--- a/components/pdfviewer/package.json
+++ b/components/pdfviewer/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@syncfusion/ej2-angular-pdfviewer",
-	"version": "21.2.3",
+	"version": "22.1.39",
 	"description": "Essential JS 2 PDF viewer Component for Angular",
 	"author": "Syncfusion Inc.",
 	"license": "SEE LICENSE IN license",
diff --git a/components/pdfviewer/src/pdfviewer/pdfviewer.component.ts b/components/pdfviewer/src/pdfviewer/pdfviewer.component.ts
index 5db7d846..92268b3b 100644
--- a/components/pdfviewer/src/pdfviewer/pdfviewer.component.ts
+++ b/components/pdfviewer/src/pdfviewer/pdfviewer.component.ts
@@ -4,7 +4,7 @@ import { PdfViewer } from '@syncfusion/ej2-pdfviewer';
 
 
 
-export const inputs: string[] = ['DropdownFieldSettings','ajaxRequestSettings','annotationSelectorSettings','annotationSettings','annotations','areaSettings','arrowSettings','checkBoxFieldSettings','circleSettings','contextMenuOption','contextMenuSettings','currentPageNumber','customStamp','customStampSettings','dateTimeFormat','designerMode','disableContextMenuItems','distanceSettings','documentPath','downloadFileName','drawingObject','enableAccessibilityTags','enableAnnotation','enableAnnotationToolbar','enableAutoComplete','enableBookmark','enableBookmarkStyles','enableCommentPanel','enableDesktopMode','enableDownload','enableFormDesigner','enableFormDesignerToolbar','enableFormFields','enableFormFieldsValidation','enableFreeText','enableHandwrittenSignature','enableHyperlink','enableImportAnnotationMeasurement','enableInkAnnotation','enableMagnification','enableMeasureAnnotation','enableMultiLineOverlap','enableMultiPageAnnotation','enableNavigation','enableNavigationToolbar','enablePersistence','enablePinchZoom','enablePrint','enablePrintRotation','enableRtl','enableShapeAnnotation','enableShapeLabel','enableStampAnnotations','enableStickyNotesAnnotation','enableTextMarkupAnnotation','enableTextMarkupResizer','enableTextSearch','enableTextSelection','enableThumbnail','enableToolbar','enableZoomOptimization','exportAnnotationFileName','formFieldCollections','formFields','freeTextSettings','handWrittenSignatureSettings','height','hideEmptyDigitalSignatureFields','hideSaveSignature','highlightSettings','hyperlinkOpenState','initialDialogSettings','initialFieldSettings','initialRenderPages','inkAnnotationSettings','interactionMode','isAnnotationToolbarOpen','isAnnotationToolbarVisible','isBookmarkPanelOpen','isCommandPanelOpen','isDocumentEdited','isExtractText','isFormDesignerToolbarVisible','isFormFieldDocument','isInitialFieldToolbarSelection','isMaintainSelection','isSignatureEditable','isThumbnailViewOpen','isValidFreeText','lineSettings','listBoxFieldSettings','locale','measurementSettings','pageCount','passwordFieldSettings','perimeterSettings','polygonSettings','printMode','radioButtonFieldSettings','radiusSettings','rectangleSettings','restrictZoomRequest','retryCount','retryStatusCodes','scrollSettings','selectedItems','serverActionSettings','serviceUrl','shapeLabelSettings','showDigitalSignatureAppearance','showNotificationDialog','signatureDialogSettings','signatureFieldSettings','signatureFitMode','stampSettings','stickyNotesSettings','strikethroughSettings','textFieldSettings','textSearchColorSettings','tileRenderingSettings','toolbarSettings','underlineSettings','volumeSettings','width','zoomMode','zoomValue'];
+export const inputs: string[] = ['DropdownFieldSettings','ajaxRequestSettings','annotationSelectorSettings','annotationSettings','annotations','areaSettings','arrowSettings','checkBoxFieldSettings','circleSettings','contextMenuOption','contextMenuSettings','currentPageNumber','customStamp','customStampSettings','dateTimeFormat','designerMode','disableContextMenuItems','distanceSettings','documentPath','downloadFileName','drawingObject','enableAccessibilityTags','enableAnnotation','enableAnnotationToolbar','enableAutoComplete','enableBookmark','enableBookmarkStyles','enableCommentPanel','enableDesktopMode','enableDownload','enableFormDesigner','enableFormDesignerToolbar','enableFormFields','enableFormFieldsValidation','enableFreeText','enableHandwrittenSignature','enableHyperlink','enableImportAnnotationMeasurement','enableInkAnnotation','enableMagnification','enableMeasureAnnotation','enableMultiLineOverlap','enableMultiPageAnnotation','enableNavigation','enableNavigationToolbar','enablePersistence','enablePinchZoom','enablePrint','enablePrintRotation','enableRtl','enableShapeAnnotation','enableShapeLabel','enableStampAnnotations','enableStickyNotesAnnotation','enableTextMarkupAnnotation','enableTextMarkupResizer','enableTextSearch','enableTextSelection','enableThumbnail','enableToolbar','enableZoomOptimization','exportAnnotationFileName','formFieldCollections','formFields','freeTextSettings','handWrittenSignatureSettings','height','hideEmptyDigitalSignatureFields','hideSaveSignature','highlightSettings','hyperlinkOpenState','initialDialogSettings','initialFieldSettings','initialRenderPages','inkAnnotationSettings','interactionMode','isAnnotationToolbarOpen','isAnnotationToolbarVisible','isBookmarkPanelOpen','isCommandPanelOpen','isDocumentEdited','isExtractText','isFormDesignerToolbarVisible','isFormFieldDocument','isInitialFieldToolbarSelection','isMaintainSelection','isSignatureEditable','isThumbnailViewOpen','isValidFreeText','lineSettings','listBoxFieldSettings','locale','measurementSettings','pageCount','passwordFieldSettings','perimeterSettings','polygonSettings','printMode','radioButtonFieldSettings','radiusSettings','rectangleSettings','restrictZoomRequest','retryCount','retryStatusCodes','retryTimeout','scrollSettings','selectedItems','serverActionSettings','serviceUrl','shapeLabelSettings','showDigitalSignatureAppearance','showNotificationDialog','signatureDialogSettings','signatureFieldSettings','signatureFitMode','stampSettings','stickyNotesSettings','strikethroughSettings','textFieldSettings','textSearchColorSettings','tileRenderingSettings','toolbarSettings','underlineSettings','volumeSettings','width','zoomMode','zoomValue'];
 export const outputs: string[] = ['addSignature','ajaxRequestFailed','ajaxRequestInitiate','ajaxRequestSuccess','annotationAdd','annotationDoubleClick','annotationMouseLeave','annotationMouseover','annotationMove','annotationMoving','annotationPropertiesChange','annotationRemove','annotationResize','annotationSelect','annotationUnSelect','beforeAddFreeText','bookmarkClick','buttonFieldClick','commentAdd','commentDelete','commentEdit','commentSelect','commentStatusChanged','created','documentLoad','documentLoadFailed','documentUnload','downloadEnd','downloadStart','exportFailed','exportStart','exportSuccess','extractTextCompleted','formFieldAdd','formFieldClick','formFieldDoubleClick','formFieldFocusOut','formFieldMouseLeave','formFieldMouseover','formFieldMove','formFieldPropertiesChange','formFieldRemove','formFieldResize','formFieldSelect','formFieldUnselect','hyperlinkClick','hyperlinkMouseOver','importFailed','importStart','importSuccess','moveSignature','pageChange','pageClick','pageMouseover','printEnd','printStart','removeSignature','resizeSignature','signaturePropertiesChange','signatureSelect','textSearchComplete','textSearchHighlight','textSearchStart','textSelectionEnd','textSelectionStart','thumbnailClick','validateFormFields','zoomChange'];
 export const twoWays: string[] = [];
 
diff --git a/components/pdfviewer/styles/material3-dark.scss b/components/pdfviewer/styles/material3-dark.scss
new file mode 100644
index 00000000..0ff9ef5f
--- /dev/null
+++ b/components/pdfviewer/styles/material3-dark.scss
@@ -0,0 +1,2 @@
+
+@import 'pdfviewer/material3-dark.scss';
diff --git a/components/pdfviewer/styles/material3.scss b/components/pdfviewer/styles/material3.scss
new file mode 100644
index 00000000..a8968a75
--- /dev/null
+++ b/components/pdfviewer/styles/material3.scss
@@ -0,0 +1,2 @@
+
+@import 'pdfviewer/material3.scss';
diff --git a/components/pdfviewer/styles/pdfviewer/material3-dark.scss b/components/pdfviewer/styles/pdfviewer/material3-dark.scss
new file mode 100644
index 00000000..91e5c48f
--- /dev/null
+++ b/components/pdfviewer/styles/pdfviewer/material3-dark.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-dark-definition.scss';
+@import 'ej2-pdfviewer/styles/pdfviewer/material3-dark.scss';
diff --git a/components/pdfviewer/styles/pdfviewer/material3.scss b/components/pdfviewer/styles/pdfviewer/material3.scss
new file mode 100644
index 00000000..f724df5f
--- /dev/null
+++ b/components/pdfviewer/styles/pdfviewer/material3.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-definition.scss';
+@import 'ej2-pdfviewer/styles/pdfviewer/material3.scss';
diff --git a/components/pivotview/CHANGELOG.md b/components/pivotview/CHANGELOG.md
index 1b57ac57..e0f099f6 100644
--- a/components/pivotview/CHANGELOG.md
+++ b/components/pivotview/CHANGELOG.md
@@ -2,53 +2,41 @@
 
 ## [Unreleased]
 
-## 21.2.3 (2023-05-03)
+## 22.2.5 (2023-07-27)
 
 ### Pivot Table
 
 #### Bug fixes
 
-- `#I453038` - Drill operations now work properly while adding attribute hierarchy to the pivot table.
+- `I471218` - The value sort icon in the pivot table is now properly positioned with larger column text.
+- `F183271` - When defer layout update is enabled, the pivot table now renders properly with the pivot chart.
+- `I463929` - When enabling virtualization dynamically at runtime, the pivot table will now render properly.
 
 #### New features
 
-- `#I398184` - Based on export properties, the pivot table will now export automatically utilizing engine export option support while using for toolbar options.
-- `#I442424` - The field list UI now supports setting the default sort order via the `load` event.
-- `#I436727` - While the data source is empty, the field list UI has been rendered with an empty layout.
+- `I398184` - Provided support to customize the column width when exporting the pivot table to a PDF document.
 
-## 21.1.41 (2023-04-18)
+## 22.1.39 (2023-07-18)
 
 ### Pivot Table
 
 #### Bug fixes
 
-- `#I454110` - Pivot Table now works properly when conditional formatting is applied without a measure.
+- `#F183090` - Columns can now be hidden specifically with an OLAP data source.
 
-## 21.1.39 (2023-04-11)
+## 22.1.36 (2023-06-28)
 
 ### Pivot Table
 
 #### Bug fixes
 
-- `#I450857` - When virtualization is enabled, the Pivot Table with OLAP data now exports to an Excel document properly.
+- `#I473176` - The issue with the spinner not being properly hidden on the pivot table when the drillthrough popup was closed with server-side engine has now been resolved.
+- `#I461804` - When we bind fields from the same hierarchy, drill down/up will now work properly in the pivot table with an OLAP data.
 
-## 21.1.37 (2023-03-29)
+## 22.1.34 (2023-06-21)
 
 ### Pivot Table
 
-#### Breaking changes
-
-- The property type of [`toolbar`](https://ej2.syncfusion.com/documentation/api/pivotview#toolbar) has been changed from `(ToolbarItems | ItemModel)[]` to `ToolbarItems[] | ItemModel[]`.
-- In the server side controller, the imported namespace name has been changed from `Syncfusion.Blazor.PivotView` to `Syncfusion.EJ2.Pivot`.
-
-## 21.1.35 (2023-03-23)
-
-### Pivot Table
-
-#### Bug Fixes
-
-- `#I437267` - During initial rendering, the spinner will now be properly displayed in the pivot table.
-
 #### New Features
 
 - `#F165214` - Provided paging support in server side engine that allows to break and display large amounts of data page by page.
@@ -56,11 +44,11 @@
 
 #### Breaking Changes
 
-- The property type `pivotValues` has been changed from `IPivotValues` to `IAxisSet[][]`.
+- The property type `PivotValues` has been changed from `IPivotValues` to `IAxisSet[][]`.
 
 | Property Name | Description | Previous Type | Current Type | 
 |---|---|---|---|
-| pivotValues | It holds the collection of cell information that has been populated from the engine on the basis of the given pivot report to render the component as table and chart. | IPivotValues | IAxisSet[][] | 
+| `pivotValues` | It holds the collection of cell information that has been populated from the engine on the basis of the given pivot report to render the component as table and chart. | `IPivotValues` | `IAxisSet[][]` | 
 
 ## 20.4.38 (2022-12-21)
 
@@ -85,7 +73,7 @@
 
 | Previous | Now | 
 |---|---|
-| showMemberSeries | showPointColorByMembers | 
+| `showMemberSeries` | `showPointColorByMembers` | 
 
 - The `chartExport` method parameters for the pivot table have now been changed.
 
@@ -94,9 +82,9 @@
 
 | Parameter | Type | Description | 
 |---|---|---|
-| type | ExportType | Defines the export type. | 
+| type | `ExportType` | Defines the export type. | 
 | fileName | string | Defines file name of export document. | 
-| orientation | PdfPageOrientation | Defines the page orientation on pdf export(0 for Portrait mode, 1 for Landscape mode). | 
+| orientation | `PdfPageOrientation` | Defines the page orientation on pdf export(0 for Portrait mode, 1 for Landscape mode). | 
 | width | number | Defines width of the export document. | 
 | height | number | Defines width of the export document. | 
 
@@ -105,11 +93,11 @@
 
 | Parameter | Type | Description | 
 |---|---|---|
-| type | ExportType | Defines the export type. | 
-| pdfExportProperties | PdfExportProperties | Allows to define the chart's export properties such as file name, orientation, width and height. | 
-| isMultipleExport | boolean | Allows to export multiple tables and charts into a single PDF document. | 
-| pdfDoc | Object | Allows the export of an external PDF document along with current PDF document. | 
-| isBlob | boolean | Allows the PDF document to be saved as blob data. | 
+| type | `ExportType` | Defines the export type. | 
+| `pdfExportProperties` | `PdfExportProperties` | Allows to define the chart's export properties such as file name, orientation, width and height. | 
+| `isMultipleExport` | boolean | Allows to export multiple tables and charts into a single PDF document. | 
+| `pdfDoc` | Object | Allows the export of an external PDF document along with current PDF document. | 
+| `isBlob` | boolean | Allows the PDF document to be saved as blob data. | 
 
 ## 20.3.59 (2022-11-29)
 
@@ -139,7 +127,7 @@
 
 #### Bug Fixes
 
-- The drillthrough feature now works properly with alphanumeric data.
+- The `drillthrough` feature now works properly with alphanumeric data.
 
 ## 20.3.49 (2022-10-11)
 
diff --git a/components/pivotview/package.json b/components/pivotview/package.json
index 0b233026..6d8bca42 100644
--- a/components/pivotview/package.json
+++ b/components/pivotview/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@syncfusion/ej2-angular-pivotview",
-	"version": "21.2.3",
+	"version": "22.1.39",
 	"description": "The pivot grid, or pivot table, is used to visualize large sets of relational data in a cross-tabular format, similar to an Excel pivot table. for Angular",
 	"author": "Syncfusion Inc.",
 	"license": "SEE LICENSE IN license",
diff --git a/components/pivotview/src/pivotfieldlist/pivotfieldlist.component.ts b/components/pivotview/src/pivotfieldlist/pivotfieldlist.component.ts
index d654d0eb..22fb310d 100644
--- a/components/pivotview/src/pivotfieldlist/pivotfieldlist.component.ts
+++ b/components/pivotview/src/pivotfieldlist/pivotfieldlist.component.ts
@@ -5,7 +5,7 @@ import { PivotFieldList } from '@syncfusion/ej2-pivotview';
 
 
 export const inputs: string[] = ['aggregateTypes','allowCalculatedField','allowDeferLayoutUpdate','cssClass','currencyCode','dataSourceSettings','enableFieldSearching','enableHtmlSanitizer','enablePersistence','enableRtl','loadOnDemandInMemberEditor','locale','maxNodeLimitInMemberEditor','renderMode','showValuesButton','spinnerTemplate','target'];
-export const outputs: string[] = ['actionBegin','actionComplete','actionFailure','aggregateCellInfo','aggregateMenuOpen','beforeServiceInvoke','calculatedFieldCreate','created','dataBound','destroyed','enginePopulated','enginePopulating','fieldDragStart','fieldDrop','fieldRemove','load','memberEditorOpen','memberFiltering','onFieldDropped','onHeadersSort'];
+export const outputs: string[] = ['actionBegin','actionComplete','actionFailure','afterServiceInvoke','aggregateCellInfo','aggregateMenuOpen','beforeServiceInvoke','calculatedFieldCreate','created','dataBound','destroyed','enginePopulated','enginePopulating','fieldDragStart','fieldDrop','fieldRemove','load','memberEditorOpen','memberFiltering','onFieldDropped','onHeadersSort'];
 export const twoWays: string[] = [];
 
 /**
@@ -31,6 +31,7 @@ export class PivotFieldListComponent extends PivotFieldList implements IComponen
 	actionBegin: any;
 	actionComplete: any;
 	actionFailure: any;
+	afterServiceInvoke: any;
 	aggregateCellInfo: any;
 	aggregateMenuOpen: any;
 	beforeServiceInvoke: any;
diff --git a/components/pivotview/src/pivotview/pivotview.component.ts b/components/pivotview/src/pivotview/pivotview.component.ts
index faede9fc..8ef90225 100644
--- a/components/pivotview/src/pivotview/pivotview.component.ts
+++ b/components/pivotview/src/pivotview/pivotview.component.ts
@@ -5,7 +5,7 @@ import { Template } from '@syncfusion/ej2-angular-base';
 
 
 export const inputs: string[] = ['aggregateTypes','allowCalculatedField','allowConditionalFormatting','allowDataCompression','allowDeferLayoutUpdate','allowDrillThrough','allowExcelExport','allowGrouping','allowNumberFormatting','allowPdfExport','cellTemplate','chartSettings','chartTypes','cssClass','dataSourceSettings','displayOption','editSettings','enableFieldSearching','enableHtmlSanitizer','enablePaging','enablePersistence','enableRtl','enableValueSorting','enableVirtualization','exportAllPages','gridSettings','groupingBarSettings','height','hyperlinkSettings','loadOnDemandInMemberEditor','locale','maxNodeLimitInMemberEditor','maxRowsInDrillThrough','pageSettings','pagerSettings','pivotValues','showFieldList','showGroupingBar','showToolbar','showTooltip','showValuesButton','spinnerTemplate','toolbar','toolbarTemplate','tooltipTemplate','width'];
-export const outputs: string[] = ['actionBegin','actionComplete','actionFailure','aggregateCellInfo','aggregateMenuOpen','beforeExport','beforeServiceInvoke','beginDrillThrough','calculatedFieldCreate','cellClick','cellSelected','cellSelecting','chartSeriesCreated','conditionalFormatting','created','dataBound','destroyed','drill','drillThrough','editCompleted','enginePopulated','enginePopulating','exportComplete','fetchReport','fieldDragStart','fieldDrop','fieldListRefreshed','fieldRemove','hyperlinkCellClick','load','loadReport','memberEditorOpen','memberFiltering','newReport','numberFormatting','onFieldDropped','onHeadersSort','onPdfCellRender','removeReport','renameReport','saveReport','toolbarClick','toolbarRender'];
+export const outputs: string[] = ['actionBegin','actionComplete','actionFailure','afterServiceInvoke','aggregateCellInfo','aggregateMenuOpen','beforeExport','beforeServiceInvoke','beginDrillThrough','calculatedFieldCreate','cellClick','cellSelected','cellSelecting','chartSeriesCreated','conditionalFormatting','created','dataBound','destroyed','drill','drillThrough','editCompleted','enginePopulated','enginePopulating','exportComplete','fetchReport','fieldDragStart','fieldDrop','fieldListRefreshed','fieldRemove','hyperlinkCellClick','load','loadReport','memberEditorOpen','memberFiltering','newReport','numberFormatting','onFieldDropped','onHeadersSort','onPdfCellRender','removeReport','renameReport','saveReport','toolbarClick','toolbarRender'];
 export const twoWays: string[] = [];
 
 /**
@@ -31,6 +31,7 @@ export class PivotViewComponent extends PivotView implements IComponentBase {
 	actionBegin: any;
 	actionComplete: any;
 	actionFailure: any;
+	afterServiceInvoke: any;
 	aggregateCellInfo: any;
 	aggregateMenuOpen: any;
 	beforeExport: any;
@@ -77,6 +78,7 @@ export class PivotViewComponent extends PivotView implements IComponentBase {
      * Allows the table cell elements to be customized with either an HTML string or the element’s ID, 
      * that can be used to add additional HTML elements with custom formats to the cell elements that are displayed in the pivot table.
      * @default null
+     * @asptype string
      */
     @ContentChild('cellTemplate')
     @Template()
@@ -85,6 +87,7 @@ export class PivotViewComponent extends PivotView implements IComponentBase {
      * Allows the tooltip element to be customized with either an HTML string or the element’s ID, 
      * can be used to displayed with custom formats either by mouse hovering or by touch in the pivot table.
      * @default null
+     * @asptype string
      */
     @ContentChild('tooltipTemplate')
     @Template()
diff --git a/components/pivotview/styles/material3-dark.scss b/components/pivotview/styles/material3-dark.scss
new file mode 100644
index 00000000..9874346f
--- /dev/null
+++ b/components/pivotview/styles/material3-dark.scss
@@ -0,0 +1,3 @@
+
+@import 'pivotview/material3-dark.scss';
+@import 'pivotfieldlist/material3-dark.scss';
diff --git a/components/pivotview/styles/material3.scss b/components/pivotview/styles/material3.scss
new file mode 100644
index 00000000..af100727
--- /dev/null
+++ b/components/pivotview/styles/material3.scss
@@ -0,0 +1,3 @@
+
+@import 'pivotview/material3.scss';
+@import 'pivotfieldlist/material3.scss';
diff --git a/components/pivotview/styles/pivotfieldlist/material3-dark.scss b/components/pivotview/styles/pivotfieldlist/material3-dark.scss
new file mode 100644
index 00000000..b64db1b1
--- /dev/null
+++ b/components/pivotview/styles/pivotfieldlist/material3-dark.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-dark-definition.scss';
+@import 'ej2-pivotview/styles/pivotfieldlist/material3-dark.scss';
diff --git a/components/pivotview/styles/pivotfieldlist/material3.scss b/components/pivotview/styles/pivotfieldlist/material3.scss
new file mode 100644
index 00000000..68530f86
--- /dev/null
+++ b/components/pivotview/styles/pivotfieldlist/material3.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-definition.scss';
+@import 'ej2-pivotview/styles/pivotfieldlist/material3.scss';
diff --git a/components/pivotview/styles/pivotview/material3-dark.scss b/components/pivotview/styles/pivotview/material3-dark.scss
new file mode 100644
index 00000000..e1999af7
--- /dev/null
+++ b/components/pivotview/styles/pivotview/material3-dark.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-dark-definition.scss';
+@import 'ej2-pivotview/styles/pivotview/material3-dark.scss';
diff --git a/components/pivotview/styles/pivotview/material3.scss b/components/pivotview/styles/pivotview/material3.scss
new file mode 100644
index 00000000..d8d0228e
--- /dev/null
+++ b/components/pivotview/styles/pivotview/material3.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-definition.scss';
+@import 'ej2-pivotview/styles/pivotview/material3.scss';
diff --git a/components/popups/CHANGELOG.md b/components/popups/CHANGELOG.md
index 33a9bc25..c725a122 100644
--- a/components/popups/CHANGELOG.md
+++ b/components/popups/CHANGELOG.md
@@ -2,6 +2,44 @@
 
 ## [Unreleased]
 
+## 22.2.5 (2023-07-27)
+
+### Tooltip
+
+#### Bug Fixes
+
+- `#I473286` - Resolved the incorrect positioning of Tooltip when page is scaled.
+
+## 22.1.38 (2023-07-11)
+
+### Tooltip
+
+#### Bug Fixes
+
+- `#I477278` - The issue, when enabling the sticky mode the Tooltip component does not stick to its target when page is scrolled has been resolved.
+
+### Dialog
+
+#### Bug Fixes
+
+- `#182546` - Issue with "Dialog is outside the target element when we set dialog position at bottom" has been resolved.
+
+## 22.1.36 (2023-06-28)
+
+### Tooltip
+
+#### Bug Fixes
+
+- `#I466814` - The Tooltip fit alignment issue when hovering over the last element has been resolved
+
+## 21.2.10 (2023-06-13)
+
+### Tooltip
+
+#### Bug Fixes
+
+- `#I466814` - The Tooltip alignment issue when hovering over the last element has been resolved.
+
 ## 21.2.3 (2023-05-03)
 
 ### Tooltip
diff --git a/components/popups/package.json b/components/popups/package.json
index cd19dff7..7eb8c082 100644
--- a/components/popups/package.json
+++ b/components/popups/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@syncfusion/ej2-angular-popups",
-	"version": "21.2.3",
+	"version": "22.1.38",
 	"description": "A package of Essential JS 2 popup components such as Dialog and Tooltip that is used to display information or messages in separate pop-ups. for Angular",
 	"author": "Syncfusion Inc.",
 	"license": "SEE LICENSE IN license",
diff --git a/components/popups/src/dialog/dialog.component.ts b/components/popups/src/dialog/dialog.component.ts
index 52861c11..79904439 100644
--- a/components/popups/src/dialog/dialog.component.ts
+++ b/components/popups/src/dialog/dialog.component.ts
@@ -55,6 +55,7 @@ export class DialogComponent extends Dialog implements IComponentBase {
      *     
      * @default ''
      * @blazortype string
+     * @asptype string
      */
     @ContentChild('footerTemplate')
     @Template()
@@ -64,6 +65,7 @@ export class DialogComponent extends Dialog implements IComponentBase {
      * This is optional property and the dialog can be displayed without header, if the header property is null.
      * @default ''
      * @blazortype string
+     * @asptype string
      */
     @ContentChild('header')
     @Template()
@@ -79,6 +81,7 @@ export class DialogComponent extends Dialog implements IComponentBase {
      *     
      * @default ''
      * @blazortype string
+     * @asptype string
      */
     @ContentChild('content')
     @Template()
diff --git a/components/popups/src/tooltip/tooltip.component.ts b/components/popups/src/tooltip/tooltip.component.ts
index 805d4d37..208f4d42 100644
--- a/components/popups/src/tooltip/tooltip.component.ts
+++ b/components/popups/src/tooltip/tooltip.component.ts
@@ -44,8 +44,8 @@ export class TooltipComponent extends Tooltip implements IComponentBase {
      *  to know more about this property with demo.
      * 
      * {% codeBlock src="tooltip/content-api/index.ts" %}{% endcodeBlock %}
-     *
      *     
+     * @asptype string
      */
     @ContentChild('content')
     @Template()
diff --git a/components/popups/styles/dialog/material3-dark.scss b/components/popups/styles/dialog/material3-dark.scss
new file mode 100644
index 00000000..34e9f923
--- /dev/null
+++ b/components/popups/styles/dialog/material3-dark.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-dark-definition.scss';
+@import 'ej2-popups/styles/dialog/material3-dark.scss';
diff --git a/components/popups/styles/dialog/material3.scss b/components/popups/styles/dialog/material3.scss
new file mode 100644
index 00000000..76d92a12
--- /dev/null
+++ b/components/popups/styles/dialog/material3.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-definition.scss';
+@import 'ej2-popups/styles/dialog/material3.scss';
diff --git a/components/popups/styles/material3-dark.scss b/components/popups/styles/material3-dark.scss
new file mode 100644
index 00000000..bfe1c16e
--- /dev/null
+++ b/components/popups/styles/material3-dark.scss
@@ -0,0 +1,5 @@
+
+@import 'dialog/material3-dark.scss';
+@import 'popup/material3-dark.scss';
+@import 'tooltip/material3-dark.scss';
+@import 'spinner/material3-dark.scss';
diff --git a/components/popups/styles/material3.scss b/components/popups/styles/material3.scss
new file mode 100644
index 00000000..83e701f9
--- /dev/null
+++ b/components/popups/styles/material3.scss
@@ -0,0 +1,5 @@
+
+@import 'dialog/material3.scss';
+@import 'popup/material3.scss';
+@import 'tooltip/material3.scss';
+@import 'spinner/material3.scss';
diff --git a/components/popups/styles/popup/material3-dark.scss b/components/popups/styles/popup/material3-dark.scss
new file mode 100644
index 00000000..73cc4dbb
--- /dev/null
+++ b/components/popups/styles/popup/material3-dark.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-dark-definition.scss';
+@import 'ej2-popups/styles/popup/material3-dark.scss';
diff --git a/components/popups/styles/popup/material3.scss b/components/popups/styles/popup/material3.scss
new file mode 100644
index 00000000..3c4328cc
--- /dev/null
+++ b/components/popups/styles/popup/material3.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-definition.scss';
+@import 'ej2-popups/styles/popup/material3.scss';
diff --git a/components/popups/styles/spinner/material3-dark.scss b/components/popups/styles/spinner/material3-dark.scss
new file mode 100644
index 00000000..0e74abac
--- /dev/null
+++ b/components/popups/styles/spinner/material3-dark.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-dark-definition.scss';
+@import 'ej2-popups/styles/spinner/material3-dark.scss';
diff --git a/components/popups/styles/spinner/material3.scss b/components/popups/styles/spinner/material3.scss
new file mode 100644
index 00000000..3a91263c
--- /dev/null
+++ b/components/popups/styles/spinner/material3.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-definition.scss';
+@import 'ej2-popups/styles/spinner/material3.scss';
diff --git a/components/popups/styles/tooltip/material3-dark.scss b/components/popups/styles/tooltip/material3-dark.scss
new file mode 100644
index 00000000..4ff6b127
--- /dev/null
+++ b/components/popups/styles/tooltip/material3-dark.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-dark-definition.scss';
+@import 'ej2-popups/styles/tooltip/material3-dark.scss';
diff --git a/components/popups/styles/tooltip/material3.scss b/components/popups/styles/tooltip/material3.scss
new file mode 100644
index 00000000..6fe72c81
--- /dev/null
+++ b/components/popups/styles/tooltip/material3.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-definition.scss';
+@import 'ej2-popups/styles/tooltip/material3.scss';
diff --git a/components/progressbar/CHANGELOG.md b/components/progressbar/CHANGELOG.md
index 9b3ce029..31e78520 100644
--- a/components/progressbar/CHANGELOG.md
+++ b/components/progressbar/CHANGELOG.md
@@ -2,6 +2,14 @@
 
 ## [Unreleased]
 
+## 22.1.36 (2023-06-28)
+
+### ProgressBar
+
+#### Bug Fixes
+
+- `#I470963` - Fixed an issue where the progress bar displaying an extra segment at the end.
+
 ## 21.1.37 (2023-03-29)
 
 ### ProgressBar
diff --git a/components/progressbar/package.json b/components/progressbar/package.json
index a83d38e1..d2292f18 100644
--- a/components/progressbar/package.json
+++ b/components/progressbar/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@syncfusion/ej2-angular-progressbar",
-	"version": "21.1.37",
+	"version": "21.1.36",
 	"description": "Essential JS 2 ProgressBar Component for Angular",
 	"author": "Syncfusion Inc.",
 	"license": "SEE LICENSE IN license",
diff --git a/components/querybuilder/CHANGELOG.md b/components/querybuilder/CHANGELOG.md
index 76cb0f04..9641339a 100644
--- a/components/querybuilder/CHANGELOG.md
+++ b/components/querybuilder/CHANGELOG.md
@@ -2,15 +2,23 @@
 
 ## [Unreleased]
 
-## 21.1.37 (2023-03-29)
+## 22.2.5 (2023-07-27)
 
 ### QueryBuilder
 
 #### Bug Fixes
 
-- `#I448219` - Issue with Query builder validation not shown using `validateFields` method and scroll the page has been fixed.
+- `#I469225` - Resolved the Dropdown tree field selection related issue in the query builder.
 
-## 21.1.35 (2023-03-23)
+## 22.1.37 (2023-07-04)
+
+### QueryBuilder
+
+#### Bug Fixes
+
+- `#I44054` - Resolved the issue where importing SQL queries containing special characters.
+
+## 22.1.34 (2023-06-21)
 
 ### QueryBuilder
 
diff --git a/components/querybuilder/package.json b/components/querybuilder/package.json
index 1f3c8c97..fbfe4de4 100644
--- a/components/querybuilder/package.json
+++ b/components/querybuilder/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@syncfusion/ej2-angular-querybuilder",
-	"version": "21.1.37",
+	"version": "22.1.37",
 	"description": "Essential JS 2 QueryBuilder for Angular",
 	"author": "Syncfusion Inc.",
 	"license": "SEE LICENSE IN license",
diff --git a/components/querybuilder/src/query-builder/columns.directive.ts b/components/querybuilder/src/query-builder/columns.directive.ts
index 397feeb1..69f8d3ed 100644
--- a/components/querybuilder/src/query-builder/columns.directive.ts
+++ b/components/querybuilder/src/query-builder/columns.directive.ts
@@ -91,6 +91,7 @@ export class ColumnDirective extends ComplexBase<ColumnDirective> {
     /** 
      * Specifies the rule template for the field with any other widgets.
      * @default null
+     * @asptype string
      */
     @ContentChild('ruleTemplate')
     @Template()
@@ -98,6 +99,7 @@ export class ColumnDirective extends ComplexBase<ColumnDirective> {
     /** 
      * Specifies the template for value field such as slider or any other widgets.
      * @default null
+     * @asptype string
      */
     @ContentChild('template')
     @Template()
diff --git a/components/querybuilder/src/query-builder/querybuilder.component.ts b/components/querybuilder/src/query-builder/querybuilder.component.ts
index 6f203cb7..d96c3e22 100644
--- a/components/querybuilder/src/query-builder/querybuilder.component.ts
+++ b/components/querybuilder/src/query-builder/querybuilder.component.ts
@@ -39,6 +39,7 @@ export class QueryBuilderComponent extends QueryBuilder implements IComponentBas
     /** 
      * Specifies the template for the header with any other widgets.
      * @default null
+     * @asptype string
      */
     @ContentChild('headerTemplate')
     @Template()
diff --git a/components/querybuilder/styles/material3-dark.scss b/components/querybuilder/styles/material3-dark.scss
new file mode 100644
index 00000000..41ef0ec4
--- /dev/null
+++ b/components/querybuilder/styles/material3-dark.scss
@@ -0,0 +1,2 @@
+
+@import 'query-builder/material3-dark.scss';
diff --git a/components/querybuilder/styles/material3.scss b/components/querybuilder/styles/material3.scss
new file mode 100644
index 00000000..eb2873e7
--- /dev/null
+++ b/components/querybuilder/styles/material3.scss
@@ -0,0 +1,2 @@
+
+@import 'query-builder/material3.scss';
diff --git a/components/querybuilder/styles/query-builder/material3-dark.scss b/components/querybuilder/styles/query-builder/material3-dark.scss
new file mode 100644
index 00000000..e743649b
--- /dev/null
+++ b/components/querybuilder/styles/query-builder/material3-dark.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-dark-definition.scss';
+@import 'ej2-querybuilder/styles/query-builder/material3-dark.scss';
diff --git a/components/querybuilder/styles/query-builder/material3.scss b/components/querybuilder/styles/query-builder/material3.scss
new file mode 100644
index 00000000..d26ffaa6
--- /dev/null
+++ b/components/querybuilder/styles/query-builder/material3.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-definition.scss';
+@import 'ej2-querybuilder/styles/query-builder/material3.scss';
diff --git a/components/ribbon/CHANGELOG.md b/components/ribbon/CHANGELOG.md
index 75d20f3a..560e7138 100644
--- a/components/ribbon/CHANGELOG.md
+++ b/components/ribbon/CHANGELOG.md
@@ -2,6 +2,15 @@
 
 ## [Unreleased]
 
+## 22.2.5 (2023-07-27)
+
+### Ribbon
+
+#### Bug Fixes
+
+- Now, the issue with Ribbon tooltip position is resolved.
+- Now, the issue with Ribbon tooltip cssClass not added properly is resolved.
+
 ## 21.1.35 (2023-03-23)
 
 ### Ribbon
diff --git a/components/ribbon/package.json b/components/ribbon/package.json
index 151fff48..8f4fb129 100644
--- a/components/ribbon/package.json
+++ b/components/ribbon/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@syncfusion/ej2-angular-ribbon",
-	"version": "21.2.3",
+	"version": "22.1.34",
 	"description": "Essential JS 2 Component for Angular",
 	"author": "Syncfusion Inc.",
 	"license": "SEE LICENSE IN license",
diff --git a/components/ribbon/styles/material3-dark.scss b/components/ribbon/styles/material3-dark.scss
new file mode 100644
index 00000000..1c026297
--- /dev/null
+++ b/components/ribbon/styles/material3-dark.scss
@@ -0,0 +1,2 @@
+
+@import 'ribbon/material3-dark.scss';
diff --git a/components/ribbon/styles/material3.scss b/components/ribbon/styles/material3.scss
new file mode 100644
index 00000000..a2b29f49
--- /dev/null
+++ b/components/ribbon/styles/material3.scss
@@ -0,0 +1,2 @@
+
+@import 'ribbon/material3.scss';
diff --git a/components/ribbon/styles/ribbon/material3-dark.scss b/components/ribbon/styles/ribbon/material3-dark.scss
new file mode 100644
index 00000000..7acbccb3
--- /dev/null
+++ b/components/ribbon/styles/ribbon/material3-dark.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-dark-definition.scss';
+@import 'ej2-ribbon/styles/ribbon/material3-dark.scss';
diff --git a/components/ribbon/styles/ribbon/material3.scss b/components/ribbon/styles/ribbon/material3.scss
new file mode 100644
index 00000000..c5d609d2
--- /dev/null
+++ b/components/ribbon/styles/ribbon/material3.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-definition.scss';
+@import 'ej2-ribbon/styles/ribbon/material3.scss';
diff --git a/components/richtexteditor/CHANGELOG.md b/components/richtexteditor/CHANGELOG.md
index d5f8a41d..def46ae0 100644
--- a/components/richtexteditor/CHANGELOG.md
+++ b/components/richtexteditor/CHANGELOG.md
@@ -2,6 +2,110 @@
 
 ## [Unreleased]
 
+## 22.2.5 (2023-07-27)
+
+### RichTextEditor
+
+#### Bug Fixes
+
+- `#I465794` - Now, pasting the content from MS Word works properly without any console errors in the Rich Text Editor.
+- `#I477643` - Now, resizing the last column in the table works properly after copying and pasting the content from MS Word in the Rich Text Editor.
+
+## 22.1.39 (2023-07-18)
+
+### RichTextEditor
+
+#### Bug Fixes
+
+- `#I482404`, `#I467318` - Now, pasting the content along with images from MS Word works properly in the Rich Text Editor.
+
+## 22.1.38 (2023-07-11)
+
+### RichTextEditor
+
+#### Bug Fixes
+
+- `#I472020` - Now, pasting content from MS Word with an image inside the table into the Rich Text Editor works properly.
+
+## 22.1.36 (2023-06-28)
+
+### RichTextEditor
+
+#### Bug Fixes
+
+- `#F181123` - Now, resizing the table and resizing the columns in the table work properly in the Rich Text Editor.
+- `#I473523` - Fixed the issue where column resizing was not working properly in the Rich Text Editor component.
+
+## 22.1.34 (2023-06-21)
+
+### RichTextEditor
+
+#### New Features
+
+- **Format Painter**: This feature allows users to quickly copy and apply formatting from one section of the selected text to another using keyboard shortcuts or a toolbar button.
+- **Emoji Picker**: This feature allows users to insert an emoji into their content by easily browsing or searching using the search option and selecting from a wide range of emojis. The emoji picker can also be accessed by pressing the colon `:` key in the editor.
+
+#### Bug Fixes
+
+- `#I471317` - Now, applying list format with an empty starting line works properly in the Rich Text Editor.
+- `#I456729` - Now, copying and pasting the list contents from MS Word works properly in the Rich Text Editor.
+- `#I469435` - Now, pressing backspace key works properly when `Mention` is used inside the Rich Text Editor.
+
+## 21.2.10 (2023-06-13)
+
+### RichTextEditor
+
+#### Bug Fixes
+
+- `#I465794` - Now, the bulleted list format is aligned properly when pasted from MS Word into the Rich Text Editor.
+- `#I468056` - Now, the table quick toolbar popup position can be changed properly in the Rich Text Editor.
+- `#I467318` - Now, pasting the content alone with the image from MS Word works properly in the Rich Text Editor.
+
+## 21.2.9 (2023-06-06)
+
+### RichTextEditor
+
+#### Bug Fixes
+
+- `#I458845` - Now, entering any value at the end of the content in the Rich Text Editor works properly.
+
+## 21.2.8 (2023-05-30)
+
+### RichTextEditor
+
+#### Bug Fixes
+
+- `#I464428` - Now, the underline and strikethrough toolbar status are updated properly after pasting the content.
+
+## 21.2.6 (2023-05-23)
+
+### RichTextEditor
+
+#### Bug Fixes
+
+- `#I456729` - Now, the table row delete works properly even after cell merging is done in the table in the Rich Text Editor.
+- `#I456729` - Now, the multilevel lists are aligned properly when pasting the list content from MS Word into the Rich Text Editor.
+- `#I459516` - Now, when using the backspace key in Rich Text Editor, the random spaces will not be removed.
+- `#I449973` - Now, when inserting the Mention list into the Rich Text Editor using the `Tab` key, the mention character will no longer appear.
+
+## 21.2.5 (2023-05-16)
+
+### RichTextEditor
+
+#### Bug Fixes
+
+- `#I456729` - Now, pasting the content alone with images from MS Word works properly in the Rich Text Editor.
+- `#I420916` - Now, RichTextEditor is in RTL mode, the direction of the toolbar items has changed properly.
+
+## 21.2.4 (2023-05-09)
+
+### RichTextEditor
+
+#### Bug Fixes
+
+- `#I439501` - Now, when pasting the list content from MS Word, the roman number list formats are aligned properly.
+- `#I456849` - Now, when the image is loaded from the Rich Text Editor value the resizing works properly.
+
 ## 21.1.41 (2023-04-18)
 
 ### RichTextEditor
diff --git a/components/richtexteditor/package.json b/components/richtexteditor/package.json
index bb916b1e..dd88cc50 100644
--- a/components/richtexteditor/package.json
+++ b/components/richtexteditor/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@syncfusion/ej2-angular-richtexteditor",
-	"version": "21.2.3",
+	"version": "22.1.39",
 	"description": "Essential JS 2 RichTextEditor component for Angular",
 	"author": "Syncfusion Inc.",
 	"license": "SEE LICENSE IN license",
diff --git a/components/richtexteditor/src/index.ts b/components/richtexteditor/src/index.ts
index 8cf5bb2c..fd8af1e1 100644
--- a/components/richtexteditor/src/index.ts
+++ b/components/richtexteditor/src/index.ts
@@ -1,4 +1,4 @@
 export { RichTextEditorComponent} from './rich-text-editor/richtexteditor.component';
 export { RichTextEditorModule } from './rich-text-editor/richtexteditor.module';
-export { RichTextEditorAllModule, ToolbarService, LinkService, ImageService, AudioService, VideoService, CountService, QuickToolbarService, HtmlEditorService, MarkdownEditorService, TableService, PasteCleanupService, ResizeService, FileManagerService, FormatPainterService } from './rich-text-editor/richtexteditor-all.module';
+export { RichTextEditorAllModule, ToolbarService, LinkService, ImageService, AudioService, VideoService, CountService, QuickToolbarService, HtmlEditorService, MarkdownEditorService, TableService, PasteCleanupService, ResizeService, FileManagerService, FormatPainterService, EmojiPickerService } from './rich-text-editor/richtexteditor-all.module';
 export * from '@syncfusion/ej2-richtexteditor';
\ No newline at end of file
diff --git a/components/richtexteditor/src/rich-text-editor/index.ts b/components/richtexteditor/src/rich-text-editor/index.ts
index 5b4d2ee8..f6226e10 100644
--- a/components/richtexteditor/src/rich-text-editor/index.ts
+++ b/components/richtexteditor/src/rich-text-editor/index.ts
@@ -1,3 +1,3 @@
 export { RichTextEditorComponent} from './richtexteditor.component';
 export { RichTextEditorModule } from './richtexteditor.module';
-export { RichTextEditorAllModule, ToolbarService, LinkService, ImageService, AudioService, VideoService, CountService, QuickToolbarService, HtmlEditorService, MarkdownEditorService, TableService, PasteCleanupService, ResizeService, FileManagerService, FormatPainterService } from './richtexteditor-all.module';
\ No newline at end of file
+export { RichTextEditorAllModule, ToolbarService, LinkService, ImageService, AudioService, VideoService, CountService, QuickToolbarService, HtmlEditorService, MarkdownEditorService, TableService, PasteCleanupService, ResizeService, FileManagerService, FormatPainterService, EmojiPickerService } from './richtexteditor-all.module';
\ No newline at end of file
diff --git a/components/richtexteditor/src/rich-text-editor/richtexteditor-all.module.ts b/components/richtexteditor/src/rich-text-editor/richtexteditor-all.module.ts
index 0d4a2cde..ccd0186a 100644
--- a/components/richtexteditor/src/rich-text-editor/richtexteditor-all.module.ts
+++ b/components/richtexteditor/src/rich-text-editor/richtexteditor-all.module.ts
@@ -2,7 +2,7 @@ import { NgModule, ValueProvider } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RichTextEditorComponent } from './richtexteditor.component';
 import { RichTextEditorModule } from './richtexteditor.module';
-import {Toolbar, Link, Image, Audio, Video, Count, QuickToolbar, HtmlEditor, MarkdownEditor, Table, PasteCleanup, Resize, FileManager, FormatPainter} from '@syncfusion/ej2-richtexteditor'
+import {Toolbar, Link, Image, Audio, Video, Count, QuickToolbar, HtmlEditor, MarkdownEditor, Table, PasteCleanup, Resize, FileManager, FormatPainter, EmojiPicker} from '@syncfusion/ej2-richtexteditor'
 
 
 export const ToolbarService: ValueProvider = { provide: 'RichTextEditorToolbar', useValue: Toolbar};
@@ -19,6 +19,7 @@ export const PasteCleanupService: ValueProvider = { provide: 'RichTextEditorPast
 export const ResizeService: ValueProvider = { provide: 'RichTextEditorResize', useValue: Resize};
 export const FileManagerService: ValueProvider = { provide: 'RichTextEditorFileManager', useValue: FileManager};
 export const FormatPainterService: ValueProvider = { provide: 'RichTextEditorFormatPainter', useValue: FormatPainter};
+export const EmojiPickerService: ValueProvider = { provide: 'RichTextEditorEmojiPicker', useValue: EmojiPicker};
 
 /**
  * NgModule definition for the RichTextEditor component with providers.
@@ -42,7 +43,8 @@ export const FormatPainterService: ValueProvider = { provide: 'RichTextEditorFor
         PasteCleanupService,
         ResizeService,
         FileManagerService,
-        FormatPainterService
+        FormatPainterService,
+        EmojiPickerService
     ]
 })
 export class RichTextEditorAllModule { }
\ No newline at end of file
diff --git a/components/richtexteditor/src/rich-text-editor/richtexteditor.component.ts b/components/richtexteditor/src/rich-text-editor/richtexteditor.component.ts
index c7d6cfa4..e320bf78 100644
--- a/components/richtexteditor/src/rich-text-editor/richtexteditor.component.ts
+++ b/components/richtexteditor/src/rich-text-editor/richtexteditor.component.ts
@@ -5,7 +5,7 @@ import { RichTextEditor } from '@syncfusion/ej2-richtexteditor';
 import { Template } from '@syncfusion/ej2-angular-base';
 
 
-export const inputs: string[] = ['autoSaveOnIdle','backgroundColor','bulletFormatList','cssClass','editorMode','enableAutoUrl','enableHtmlEncode','enableHtmlSanitizer','enablePersistence','enableResize','enableRtl','enableTabKey','enableXhtml','enabled','enterKey','fileManagerSettings','floatingToolbarOffset','fontColor','fontFamily','fontSize','format','formatPainterSettings','formatter','height','htmlAttributes','iframeSettings','inlineMode','insertAudioSettings','insertImageSettings','insertVideoSettings','keyConfig','locale','maxLength','numberFormatList','pasteCleanupSettings','placeholder','quickToolbarSettings','readonly','saveInterval','shiftEnterKey','showCharCount','showTooltip','tableSettings','toolbarSettings','undoRedoSteps','undoRedoTimer','value','valueTemplate','width'];
+export const inputs: string[] = ['autoSaveOnIdle','backgroundColor','bulletFormatList','cssClass','editorMode','emojiPickerSettings','enableAutoUrl','enableHtmlEncode','enableHtmlSanitizer','enablePersistence','enableResize','enableRtl','enableTabKey','enableXhtml','enabled','enterKey','fileManagerSettings','floatingToolbarOffset','fontColor','fontFamily','fontSize','format','formatPainterSettings','formatter','height','htmlAttributes','iframeSettings','inlineMode','insertAudioSettings','insertImageSettings','insertVideoSettings','keyConfig','locale','maxLength','numberFormatList','pasteCleanupSettings','placeholder','quickToolbarSettings','readonly','saveInterval','shiftEnterKey','showCharCount','showTooltip','tableSettings','toolbarSettings','undoRedoSteps','undoRedoTimer','value','valueTemplate','width'];
 export const outputs: string[] = ['actionBegin','actionComplete','afterImageDelete','afterMediaDelete','afterPasteCleanup','beforeDialogClose','beforeDialogOpen','beforeFileUpload','beforeImageDrop','beforeImageUpload','beforePasteCleanup','beforeQuickToolbarOpen','beforeSanitizeHtml','blur','change','created','destroyed','dialogClose','dialogOpen','fileRemoving','fileSelected','fileUploadFailed','fileUploadSuccess','fileUploading','focus','imageRemoving','imageSelected','imageUploadFailed','imageUploadSuccess','imageUploading','quickToolbarClose','quickToolbarOpen','resizeStart','resizeStop','resizing','toolbarClick','toolbarStatusUpdate','updatedToolbarStatus','valueChange'];
 export const twoWays: string[] = ['value'];
 
@@ -86,6 +86,7 @@ export class RichTextEditorComponent extends RichTextEditor implements IComponen
      * {% codeBlock src='rich-text-editor/value-template/index.md' %}{% endcodeBlock %}
      *     
      * @default null
+     * @asptype string
      */
     @ContentChild('valueTemplate')
     @Template()
@@ -180,6 +181,12 @@ export class RichTextEditorComponent extends RichTextEditor implements IComponen
                     this.injectedModules.push(mod)
                 }
             } catch { }
+
        try {
+                let mod = this.injector.get('RichTextEditorEmojiPicker');
+                if(this.injectedModules.indexOf(mod) === -1) {
+                    this.injectedModules.push(mod)
+                }
+            } catch { }
 
         this.registerEvents(outputs);
         this.addTwoWay.call(this, twoWays);
diff --git a/components/richtexteditor/styles/material3-dark.scss b/components/richtexteditor/styles/material3-dark.scss
new file mode 100644
index 00000000..c0afb55b
--- /dev/null
+++ b/components/richtexteditor/styles/material3-dark.scss
@@ -0,0 +1,2 @@
+
+@import 'rich-text-editor/material3-dark.scss';
diff --git a/components/richtexteditor/styles/material3.scss b/components/richtexteditor/styles/material3.scss
new file mode 100644
index 00000000..6b39bf18
--- /dev/null
+++ b/components/richtexteditor/styles/material3.scss
@@ -0,0 +1,2 @@
+
+@import 'rich-text-editor/material3.scss';
diff --git a/components/richtexteditor/styles/rich-text-editor/material3-dark.scss b/components/richtexteditor/styles/rich-text-editor/material3-dark.scss
new file mode 100644
index 00000000..4af130b2
--- /dev/null
+++ b/components/richtexteditor/styles/rich-text-editor/material3-dark.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-dark-definition.scss';
+@import 'ej2-richtexteditor/styles/rich-text-editor/material3-dark.scss';
diff --git a/components/richtexteditor/styles/rich-text-editor/material3.scss b/components/richtexteditor/styles/rich-text-editor/material3.scss
new file mode 100644
index 00000000..c01fc357
--- /dev/null
+++ b/components/richtexteditor/styles/rich-text-editor/material3.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-definition.scss';
+@import 'ej2-richtexteditor/styles/rich-text-editor/material3.scss';
diff --git a/components/schedule/CHANGELOG.md b/components/schedule/CHANGELOG.md
index 7144599d..60798b72 100644
--- a/components/schedule/CHANGELOG.md
+++ b/components/schedule/CHANGELOG.md
@@ -2,6 +2,77 @@
 
 ## [Unreleased]
 
+## 22.2.5 (2023-07-27)
+
+### Schedule
+
+- `#F45166` - An issue with "Role not inside the required context" accessibility issue in the Schedule component's recurrence editor has been fixed.
+- `#F44742` - The issue of duplicate events being created after changing the recurrence of certain events has been fixed.
+- `#I478902` - Performance issue in calculating scrollbar width has been fixed.
+
+## 22.1.38 (2023-07-11)
+
+### Schedule
+
+- `#F182714` - An issue with Escape key will prevent the cell selection when `allowInline` property enabled has been fixed.
+
+## 22.1.34 (2023-06-21)
+
+### Schedule
+
+#### New Features
+
+- `#I438319` - Provided an option to customize the recurrence end type which allows users to tailor the recurrence editor to their unique needs and preferences.
+
+#### Bug fixes
+
+- `F182696` - An issue with Keyboard scroll behaviour not working has been fixed.
+- `I470178` - An issue with Edit occurrence appointment not rescheduled properly and shows occurrence alert has been fixed.
+- `#I182714` -  Resolved the issue where pressing the `Escape` key while navigating the scheduler with the keyboard would return to the previously selected cell.
+
+## 21.2.10 (2023-06-13)
+
+### Schedule
+
+#### Bug fixes
+
+- `#I464944` - An issue with time indicator rendered in wrong position when `startHour` and `endHour` property applied has been fixed.
+
+## 21.2.9 (2023-06-06)
+
+### Schedule
+
+#### Bug fixes
+
+- `#I461489` - An issue with the dragging appointment is flickering on the topmost region has been fixed.
+- `#I464535` - Fixed an issue where the visible date header name in the Schedule did not match the aria-label name, leading to discrepancies in the accessibility checker.
+- `#I459642` - An issue with Appointment end date is wrong in `popupOpenEventArgs` has been fixed.
+
+## 21.2.6 (2023-05-23)
+
+### Schedule
+
+#### Bug fixes
+
+- `#I459507` - An issue with the following events option not being displayed while editing the edited occurrence of the recurrence series has been fixed.
+
+## 21.2.5 (2023-05-16)
+
+### Schedule
+
+#### Bug fixes
+
+- `#I459154` - An issue with Schedule performance while rendering large set all-day appointments in vertical views has been fixed.
+
+## 21.2.4 (2023-05-09)
+
+### Schedule
+
+#### Bug fixes
+
+- `#I457705` - An issue with appointment not dropped on target cell when start and end time is same has been fixed.
+- `#I457928` - An issue with the appointment misalignment has been fixed.
+
 ## 21.1.41 (2023-04-18)
 
 ### Schedule
diff --git a/components/schedule/package.json b/components/schedule/package.json
index 5ab98c4b..04e52d32 100644
--- a/components/schedule/package.json
+++ b/components/schedule/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@syncfusion/ej2-angular-schedule",
-	"version": "21.1.41",
+	"version": "22.1.38",
 	"description": "Flexible scheduling library with more built-in features and enhanced customization options similar to outlook and google calendar, allowing the users to plan and manage their appointments with efficient data-binding support. for Angular",
 	"author": "Syncfusion Inc.",
 	"license": "SEE LICENSE IN license",
diff --git a/components/schedule/src/recurrence-editor/recurrenceeditor.component.ts b/components/schedule/src/recurrence-editor/recurrenceeditor.component.ts
index fd15b84d..f5dc843a 100644
--- a/components/schedule/src/recurrence-editor/recurrenceeditor.component.ts
+++ b/components/schedule/src/recurrence-editor/recurrenceeditor.component.ts
@@ -4,7 +4,7 @@ import { RecurrenceEditor } from '@syncfusion/ej2-schedule';
 
 
 
-export const inputs: string[] = ['calendarMode','cssClass','dateFormat','enablePersistence','enableRtl','firstDayOfWeek','frequencies','locale','maxDate','minDate','selectedType','startDate','value'];
+export const inputs: string[] = ['calendarMode','cssClass','dateFormat','enablePersistence','enableRtl','endTypes','firstDayOfWeek','frequencies','locale','maxDate','minDate','selectedType','startDate','value'];
 export const outputs: string[] = ['change'];
 export const twoWays: string[] = [];
 
diff --git a/components/schedule/src/schedule/headerrows.directive.ts b/components/schedule/src/schedule/headerrows.directive.ts
index 1cf11afd..6cac79e1 100644
--- a/components/schedule/src/schedule/headerrows.directive.ts
+++ b/components/schedule/src/schedule/headerrows.directive.ts
@@ -45,6 +45,10 @@ export class HeaderRowDirective extends ComplexBase<HeaderRowDirective> {
      *  content and parse it appropriately before displaying it onto the header cells. The field that 
      *  can be accessed via this template is `date`.
      * @default null
+     * @angulartype string | object
+     * @reacttype string | function | JSX.Element
+     * @vuetype string | function
+     * @asptype string
      */
     @ContentChild('template')
     @Template()
diff --git a/components/schedule/src/schedule/schedule.component.ts b/components/schedule/src/schedule/schedule.component.ts
index dcc86d23..7e53f76e 100644
--- a/components/schedule/src/schedule/schedule.component.ts
+++ b/components/schedule/src/schedule/schedule.component.ts
@@ -69,6 +69,10 @@ export class ScheduleComponent extends Schedule implements IComponentBase {
      * {% codeBlock src='schedule/dateHeaderTemplate/index.md' %}{% endcodeBlock %}
      *     
      * @default null
+     * @angulartype string | object
+     * @reacttype string | function | JSX.Element
+     * @vuetype string | function
+     * @asptype string
      */
     @ContentChild('dateHeaderTemplate')
     @Template()
@@ -76,6 +80,10 @@ export class ScheduleComponent extends Schedule implements IComponentBase {
     /** 
      * It accepts either the string or HTMLElement as template design content and parse it appropriately before displaying it onto the header date range.
      * @default null
+     * @angulartype string | object
+     * @reacttype string | function | JSX.Element
+     * @vuetype string | function
+     * @asptype string
      */
     @ContentChild('dateRangeTemplate')
     @Template()
@@ -87,6 +95,10 @@ export class ScheduleComponent extends Schedule implements IComponentBase {
      * {% codeBlock src='schedule/dayHeaderTemplate/index.md' %}{% endcodeBlock %}
      *     
      * @default null
+     * @angulartype string | object
+     * @reacttype string | function | JSX.Element
+     * @vuetype string | function
+     * @asptype string
      */
     @ContentChild('dayHeaderTemplate')
     @Template()
@@ -104,6 +116,10 @@ export class ScheduleComponent extends Schedule implements IComponentBase {
      *{% codeBlock src='schedule/cellTemplate/index.md' %}{% endcodeBlock %}
      *     
      * @default null
+     * @angulartype string | object
+     * @reacttype string | function | JSX.Element
+     * @vuetype string | function
+     * @asptype string
      */
     @ContentChild('cellTemplate')
     @Template()
@@ -115,6 +131,10 @@ export class ScheduleComponent extends Schedule implements IComponentBase {
      * {% codeBlock src='schedule/cellHeaderTemplate/index.md' %}{% endcodeBlock %}
      *     
      * @default null
+     * @angulartype string | object
+     * @reacttype string | function | JSX.Element
+     * @vuetype string | function
+     * @asptype string
      */
     @ContentChild('cellHeaderTemplate')
     @Template()
@@ -132,6 +152,10 @@ export class ScheduleComponent extends Schedule implements IComponentBase {
      * {% codeBlock src='schedule/editorTemplate/index.md' %}{% endcodeBlock %}
      *     
      * @default null
+     * @angulartype string | object
+     * @reacttype string | function | JSX.Element
+     * @vuetype string | function
+     * @asptype string
      */
     @ContentChild('editorTemplate')
     @Template()
@@ -143,6 +167,10 @@ export class ScheduleComponent extends Schedule implements IComponentBase {
      * {% codeBlock src='schedule/monthHeaderTemplate/index.md' %}{% endcodeBlock %}
      *     
      * @default null
+     * @angulartype string | object
+     * @reacttype string | function | JSX.Element
+     * @vuetype string | function
+     * @asptype string
      */
     @ContentChild('monthHeaderTemplate')
     @Template()
@@ -165,6 +193,10 @@ export class ScheduleComponent extends Schedule implements IComponentBase {
      *{% codeBlock src='schedule/resourceHeaderTemplate/index.md' %}{% endcodeBlock %}
      *     
      * @default null
+     * @angulartype string | object
+     * @reacttype string | function | JSX.Element
+     * @vuetype string | function
+     * @asptype string
      */
     @ContentChild('resourceHeaderTemplate')
     @Template()
@@ -178,6 +210,10 @@ export class ScheduleComponent extends Schedule implements IComponentBase {
      *{% codeBlock src='schedule/headerIndentTemplate/index.md' %}{% endcodeBlock %}
      *     
      * @default null
+     * @angulartype string | object
+     * @reacttype string | function | JSX.Element
+     * @vuetype string | function
+     * @asptype string
      */
     @ContentChild('headerIndentTemplate')
     @Template()
diff --git a/components/schedule/src/schedule/views.directive.ts b/components/schedule/src/schedule/views.directive.ts
index ac79e319..a0ae7b2d 100644
--- a/components/schedule/src/schedule/views.directive.ts
+++ b/components/schedule/src/schedule/views.directive.ts
@@ -189,6 +189,7 @@ export class ViewDirective extends ComplexBase<ViewDirective> {
      *  date header cells. The field that can be accessed via this template is `date`. 
      *  It gets applied only to the view objects on which it is defined.
      * @default null
+     * @asptype string
      */
     @ContentChild('dateHeaderTemplate')
     @Template()
@@ -196,6 +197,10 @@ export class ViewDirective extends ComplexBase<ViewDirective> {
     /** 
      * It accepts either the string or HTMLElement as template design content and parse it appropriately before displaying it onto the header date range.
      * @default null
+     * @angulartype string | object
+     * @reacttype string | function | JSX.Element
+     * @vuetype string | function
+     * @asptype string
      */
     @ContentChild('dateRangeTemplate')
     @Template()
@@ -205,6 +210,10 @@ export class ViewDirective extends ComplexBase<ViewDirective> {
      *  Year view day cell header. 
      *  This template is only applicable for year view header cells.
      * @default null
+     * @angulartype string | object
+     * @reacttype string | function | JSX.Element
+     * @vuetype string | function
+     * @asptype string
      */
     @ContentChild('dayHeaderTemplate')
     @Template()
@@ -214,6 +223,10 @@ export class ViewDirective extends ComplexBase<ViewDirective> {
      *  month date cells. 
      *  This template is only applicable for month view day cells.
      * @default null
+     * @angulartype string | object
+     * @reacttype string | function | JSX.Element
+     * @vuetype string | function
+     * @asptype string
      */
     @ContentChild('cellHeaderTemplate')
     @Template()
@@ -223,6 +236,10 @@ export class ViewDirective extends ComplexBase<ViewDirective> {
      *  template accepts either the string or HTMLElement as template design and then the parsed design is displayed onto the work cells. 
      *  The field accessible via template is `date`. It gets applied only to the view objects on which it is defined.
      * @default null
+     * @angulartype string | object
+     * @reacttype string | function | JSX.Element
+     * @vuetype string | function
+     * @asptype string
      */
     @ContentChild('cellTemplate')
     @Template()
@@ -233,6 +250,10 @@ export class ViewDirective extends ComplexBase<ViewDirective> {
      *  It is similar to that of the `template` option available within the `eventSettings` property, 
      *  whereas it will get applied only on the events of the view to which it is currently being defined.
      * @default null
+     * @angulartype string | object
+     * @reacttype string | function | JSX.Element
+     * @vuetype string | function
+     * @asptype string
      */
     @ContentChild('eventTemplate')
     @Template()
@@ -242,6 +263,10 @@ export class ViewDirective extends ComplexBase<ViewDirective> {
      *  Year view day cell header. 
      *  This template is only applicable for year view header cells.
      * @default null
+     * @angulartype string | object
+     * @reacttype string | function | JSX.Element
+     * @vuetype string | function
+     * @asptype string
      */
     @ContentChild('monthHeaderTemplate')
     @Template()
@@ -252,6 +277,10 @@ export class ViewDirective extends ComplexBase<ViewDirective> {
      *  All the resource fields mapped within resources can be accessed within this template code. 
      *  It gets applied only to the view objects on which it is defined.
      * @default null
+     * @angulartype string | object
+     * @reacttype string | function | JSX.Element
+     * @vuetype string | function
+     * @asptype string
      */
     @ContentChild('resourceHeaderTemplate')
     @Template()
@@ -261,6 +290,10 @@ export class ViewDirective extends ComplexBase<ViewDirective> {
      *  template accepts either the string or HTMLElement as template design and then the parsed design is displayed onto the header indent cell. 
      *  It gets applied only to the view objects on which it is defined.
      * @default null
+     * @angulartype string | object
+     * @reacttype string | function | JSX.Element
+     * @vuetype string | function
+     * @asptype string
      */
     @ContentChild('headerIndentTemplate')
     @Template()
diff --git a/components/schedule/styles/material3-dark.scss b/components/schedule/styles/material3-dark.scss
new file mode 100644
index 00000000..e5166983
--- /dev/null
+++ b/components/schedule/styles/material3-dark.scss
@@ -0,0 +1,3 @@
+
+@import 'schedule/material3-dark.scss';
+@import 'recurrence-editor/material3-dark.scss';
diff --git a/components/schedule/styles/material3.scss b/components/schedule/styles/material3.scss
new file mode 100644
index 00000000..1670a9df
--- /dev/null
+++ b/components/schedule/styles/material3.scss
@@ -0,0 +1,3 @@
+
+@import 'schedule/material3.scss';
+@import 'recurrence-editor/material3.scss';
diff --git a/components/schedule/styles/recurrence-editor/material3-dark.scss b/components/schedule/styles/recurrence-editor/material3-dark.scss
new file mode 100644
index 00000000..37dbaab9
--- /dev/null
+++ b/components/schedule/styles/recurrence-editor/material3-dark.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-dark-definition.scss';
+@import 'ej2-schedule/styles/recurrence-editor/material3-dark.scss';
diff --git a/components/schedule/styles/recurrence-editor/material3.scss b/components/schedule/styles/recurrence-editor/material3.scss
new file mode 100644
index 00000000..b7a1e610
--- /dev/null
+++ b/components/schedule/styles/recurrence-editor/material3.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-definition.scss';
+@import 'ej2-schedule/styles/recurrence-editor/material3.scss';
diff --git a/components/schedule/styles/schedule/material3-dark.scss b/components/schedule/styles/schedule/material3-dark.scss
new file mode 100644
index 00000000..36a7dc97
--- /dev/null
+++ b/components/schedule/styles/schedule/material3-dark.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-dark-definition.scss';
+@import 'ej2-schedule/styles/schedule/material3-dark.scss';
diff --git a/components/schedule/styles/schedule/material3.scss b/components/schedule/styles/schedule/material3.scss
new file mode 100644
index 00000000..5e1caa5a
--- /dev/null
+++ b/components/schedule/styles/schedule/material3.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-definition.scss';
+@import 'ej2-schedule/styles/schedule/material3.scss';
diff --git a/components/splitbuttons/CHANGELOG.md b/components/splitbuttons/CHANGELOG.md
index 7aa20172..621694f0 100644
--- a/components/splitbuttons/CHANGELOG.md
+++ b/components/splitbuttons/CHANGELOG.md
@@ -2,7 +2,15 @@
 
 ## [Unreleased]
 
-## 21.1.41 (2023-04-18)
+## 22.1.37 (2023-07-04)
+
+### SplitButton
+
+#### Bug Fixes
+
+- `#I464857` - Issue in Script error When we selecting SplitButton using keyboard interaction has been resolved.
+
+## 22.1.34 (2023-06-21)
 
 ### DropDownButton
 
diff --git a/components/splitbuttons/package.json b/components/splitbuttons/package.json
index b90f92ba..1697bf56 100644
--- a/components/splitbuttons/package.json
+++ b/components/splitbuttons/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@syncfusion/ej2-angular-splitbuttons",
-	"version": "21.1.41",
+	"version": "22.1.37",
 	"description": "A package of feature-rich Essential JS 2 components such as DropDownButton, SplitButton, ProgressButton and ButtonGroup. for Angular",
 	"author": "Syncfusion Inc.",
 	"license": "SEE LICENSE IN license",
diff --git a/components/splitbuttons/styles/button-group/material3-dark.scss b/components/splitbuttons/styles/button-group/material3-dark.scss
new file mode 100644
index 00000000..fd22e472
--- /dev/null
+++ b/components/splitbuttons/styles/button-group/material3-dark.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-dark-definition.scss';
+@import 'ej2-splitbuttons/styles/button-group/material3-dark.scss';
diff --git a/components/splitbuttons/styles/button-group/material3.scss b/components/splitbuttons/styles/button-group/material3.scss
new file mode 100644
index 00000000..017385f6
--- /dev/null
+++ b/components/splitbuttons/styles/button-group/material3.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-definition.scss';
+@import 'ej2-splitbuttons/styles/button-group/material3.scss';
diff --git a/components/splitbuttons/styles/drop-down-button/material3-dark.scss b/components/splitbuttons/styles/drop-down-button/material3-dark.scss
new file mode 100644
index 00000000..765b5027
--- /dev/null
+++ b/components/splitbuttons/styles/drop-down-button/material3-dark.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-dark-definition.scss';
+@import 'ej2-splitbuttons/styles/drop-down-button/material3-dark.scss';
diff --git a/components/splitbuttons/styles/drop-down-button/material3.scss b/components/splitbuttons/styles/drop-down-button/material3.scss
new file mode 100644
index 00000000..c326567a
--- /dev/null
+++ b/components/splitbuttons/styles/drop-down-button/material3.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-definition.scss';
+@import 'ej2-splitbuttons/styles/drop-down-button/material3.scss';
diff --git a/components/splitbuttons/styles/material3-dark.scss b/components/splitbuttons/styles/material3-dark.scss
new file mode 100644
index 00000000..74fa99da
--- /dev/null
+++ b/components/splitbuttons/styles/material3-dark.scss
@@ -0,0 +1,5 @@
+
+@import 'drop-down-button/material3-dark.scss';
+@import 'split-button/material3-dark.scss';
+@import 'button-group/material3-dark.scss';
+@import 'progress-button/material3-dark.scss';
diff --git a/components/splitbuttons/styles/material3.scss b/components/splitbuttons/styles/material3.scss
new file mode 100644
index 00000000..5ae21a8f
--- /dev/null
+++ b/components/splitbuttons/styles/material3.scss
@@ -0,0 +1,5 @@
+
+@import 'drop-down-button/material3.scss';
+@import 'split-button/material3.scss';
+@import 'button-group/material3.scss';
+@import 'progress-button/material3.scss';
diff --git a/components/splitbuttons/styles/progress-button/material3-dark.scss b/components/splitbuttons/styles/progress-button/material3-dark.scss
new file mode 100644
index 00000000..6ccc0209
--- /dev/null
+++ b/components/splitbuttons/styles/progress-button/material3-dark.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-dark-definition.scss';
+@import 'ej2-splitbuttons/styles/progress-button/material3-dark.scss';
diff --git a/components/splitbuttons/styles/progress-button/material3.scss b/components/splitbuttons/styles/progress-button/material3.scss
new file mode 100644
index 00000000..630118a2
--- /dev/null
+++ b/components/splitbuttons/styles/progress-button/material3.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-definition.scss';
+@import 'ej2-splitbuttons/styles/progress-button/material3.scss';
diff --git a/components/splitbuttons/styles/split-button/material3-dark.scss b/components/splitbuttons/styles/split-button/material3-dark.scss
new file mode 100644
index 00000000..3e49ea1b
--- /dev/null
+++ b/components/splitbuttons/styles/split-button/material3-dark.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-dark-definition.scss';
+@import 'ej2-splitbuttons/styles/split-button/material3-dark.scss';
diff --git a/components/splitbuttons/styles/split-button/material3.scss b/components/splitbuttons/styles/split-button/material3.scss
new file mode 100644
index 00000000..0caf89a8
--- /dev/null
+++ b/components/splitbuttons/styles/split-button/material3.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-definition.scss';
+@import 'ej2-splitbuttons/styles/split-button/material3.scss';
diff --git a/components/spreadsheet/CHANGELOG.md b/components/spreadsheet/CHANGELOG.md
index cae2e87f..6976fb33 100644
--- a/components/spreadsheet/CHANGELOG.md
+++ b/components/spreadsheet/CHANGELOG.md
@@ -2,6 +2,43 @@
 
 ## [Unreleased]
 
+## 22.2.5 (2023-07-27)
+
+### Spreadsheet
+
+#### Bug Fixes
+
+- `#I479603` - Issue with "hyperlink opens two browser tabs while clicking on the hyperlink applied cells" has been resolved.
+- `#I483683` - Issue with "an exception is thrown when copying content from a text file and pasting it into a cell" has been resolved.
+- `#I837732` - Issue with "chart does not render properly while importing data using the `openFromJson` method with many spreadsheets on the same page" has been resolved.
+
+## 22.1.37 (2023-07-04)
+
+### Spreadsheet
+
+#### Bug Fixes
+
+- `#I472639` - Issue with "merged cells become mixed up with one another while scrolling over the frozen column applied sheet" has been resolved.
+
+## 22.1.34 (2023-06-21)
+
+### Spreadsheet
+
+#### Features
+
+- `#F181385` - Now, you can insert the `line chart` with or without `marker` on the sheet.
+
+## 21.2.8 (2023-05-30)
+
+### Spreadsheet
+
+#### Bug Fixes
+
+- `#I462789` - Issue with "formula calculation is not updated properly when cells contain the decimal values" has been resolved.
+
+- `#I460838` - Issue with "an exception occurs during export when a sheet contains an online image" has been resolved.
+- `#I462900` - Issue with "when using custom format to display zero as a dash, it doesn't work properly" has been resolved.
+
 ## 21.2.3 (2023-05-03)
 
 ### Spreadsheet
@@ -1264,6 +1301,14 @@ The Spreadsheet is an user interactive component to organize and analyze data in
 - **Accessibility:** Provides with built-in accessibility support which helps to access all the spreadsheet component features using the keyboard, screen readers, or other assistive technology devices.
 
 
+## 21.2.9 (2023-06-06)
+
+### Spreadsheet
+
+#### Bug Fixes
+
+- `#I830604` - Issue with "defined name address is not properly changed after inserting a row or column" has been resolved.
+
 ## 21.1.35 (2023-03-23)
 
 ### Spreadsheet
diff --git a/components/spreadsheet/package.json b/components/spreadsheet/package.json
index 5314d7f3..e39aa299 100644
--- a/components/spreadsheet/package.json
+++ b/components/spreadsheet/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@syncfusion/ej2-angular-spreadsheet",
-	"version": "21.1.41",
+	"version": "22.1.37",
 	"description": "Feature-rich JavaScript Spreadsheet (Excel) control with built-in support for selection, editing, formatting, importing and exporting to Excel for Angular",
 	"author": "Syncfusion Inc.",
 	"license": "SEE LICENSE IN license",
diff --git a/components/spreadsheet/src/spreadsheet/chart.directive.ts b/components/spreadsheet/src/spreadsheet/chart.directive.ts
index 6c4b3b4b..ba6147e8 100644
--- a/components/spreadsheet/src/spreadsheet/chart.directive.ts
+++ b/components/spreadsheet/src/spreadsheet/chart.directive.ts
@@ -3,7 +3,7 @@ import { ComplexBase, ArrayBase, setValue } from '@syncfusion/ej2-angular-base';
 
 
 
-let input: string[] = ['dataLabelSettings', 'height', 'id', 'isSeriesInRows', 'legendSettings', 'primaryXAxis', 'primaryYAxis', 'range', 'theme', 'title', 'type', 'width'];
+let input: string[] = ['dataLabelSettings', 'height', 'id', 'isSeriesInRows', 'legendSettings', 'markerSettings', 'primaryXAxis', 'primaryYAxis', 'range', 'theme', 'title', 'type', 'width'];
 let outputs: string[] = [];
 
 @Directive({
@@ -49,6 +49,11 @@ export class ChartDirective extends ComplexBase<ChartDirective> {
      * @default {}
      */
     public legendSettings: any;
+    /** 
+     * Options to configure the marker
+     * @default {}
+     */
+    public markerSettings: any;
     /** 
      * Options to configure the horizontal axis.
      * @default {}
diff --git a/components/spreadsheet/src/spreadsheet/ranges.directive.ts b/components/spreadsheet/src/spreadsheet/ranges.directive.ts
index 5fd7dfc9..09ca867b 100644
--- a/components/spreadsheet/src/spreadsheet/ranges.directive.ts
+++ b/components/spreadsheet/src/spreadsheet/ranges.directive.ts
@@ -61,9 +61,8 @@ export class RangeDirective extends ComplexBase<RangeDirective> {
     public startCell: any;
     /** 
      * Template helps to compiles the given HTML String (or HTML Element ID) into HtML Element and append to the Cell.
-     * 
-     *  @default ''
-     *     
+     * @default ''
+     * @asptype string
      */
     @ContentChild('template')
     @Template()
diff --git a/components/spreadsheet/styles/material3-dark.scss b/components/spreadsheet/styles/material3-dark.scss
new file mode 100644
index 00000000..445d42a1
--- /dev/null
+++ b/components/spreadsheet/styles/material3-dark.scss
@@ -0,0 +1,3 @@
+
+@import 'spreadsheet/material3-dark.scss';
+@import 'spreadsheet-ribbon/material3-dark.scss';
diff --git a/components/spreadsheet/styles/material3.scss b/components/spreadsheet/styles/material3.scss
new file mode 100644
index 00000000..58e44488
--- /dev/null
+++ b/components/spreadsheet/styles/material3.scss
@@ -0,0 +1,3 @@
+
+@import 'spreadsheet/material3.scss';
+@import 'spreadsheet-ribbon/material3.scss';
diff --git a/components/spreadsheet/styles/spreadsheet-ribbon/material3-dark.scss b/components/spreadsheet/styles/spreadsheet-ribbon/material3-dark.scss
new file mode 100644
index 00000000..c8ccfa34
--- /dev/null
+++ b/components/spreadsheet/styles/spreadsheet-ribbon/material3-dark.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-dark-definition.scss';
+@import 'ej2-spreadsheet/styles/spreadsheet-ribbon/material3-dark.scss';
diff --git a/components/spreadsheet/styles/spreadsheet-ribbon/material3.scss b/components/spreadsheet/styles/spreadsheet-ribbon/material3.scss
new file mode 100644
index 00000000..0c671eb2
--- /dev/null
+++ b/components/spreadsheet/styles/spreadsheet-ribbon/material3.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-definition.scss';
+@import 'ej2-spreadsheet/styles/spreadsheet-ribbon/material3.scss';
diff --git a/components/spreadsheet/styles/spreadsheet/material3-dark.scss b/components/spreadsheet/styles/spreadsheet/material3-dark.scss
new file mode 100644
index 00000000..37713109
--- /dev/null
+++ b/components/spreadsheet/styles/spreadsheet/material3-dark.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-dark-definition.scss';
+@import 'ej2-spreadsheet/styles/spreadsheet/material3-dark.scss';
diff --git a/components/spreadsheet/styles/spreadsheet/material3.scss b/components/spreadsheet/styles/spreadsheet/material3.scss
new file mode 100644
index 00000000..3adf4fd3
--- /dev/null
+++ b/components/spreadsheet/styles/spreadsheet/material3.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-definition.scss';
+@import 'ej2-spreadsheet/styles/spreadsheet/material3.scss';
diff --git a/components/treegrid/CHANGELOG.md b/components/treegrid/CHANGELOG.md
index 3a941fde..b3275829 100644
--- a/components/treegrid/CHANGELOG.md
+++ b/components/treegrid/CHANGELOG.md
@@ -2,48 +2,63 @@
 
 ## [Unreleased]
 
-## 21.2.3 (2023-05-03)
+## 22.1.39 (2023-07-18)
 
 ### Tree Grid
 
+#### Bug fixes
+
+- `#I478636`, `#F183159` - Fixed the issue where an unwanted tooltip was being displayed in the checkbox column feature.
+
+## 22.1.38 (2023-07-11)
+
+### Tree Grid
+
+#### Bug fixes
+
+- `#I471838` - Fixed a bug in the virtualization feature that caused a white space issue when changing the page size using the `databound` event.
+- `#I459187` - Fixed an issue where a white space would occur when deleting a parent record in virtualization.
+- `#F182900` - Fixed the issue where the newly added form was placed incorrectly when selecting two records and performing an add action.
+
 #### Bug Fixes
 
-- `#I440455`, `#F180980` - Resolved the issue where the data source was not being rendered in the row template sample.
+- `#F182900` - Fixed the issue where the newly added form was placed incorrectly when selecting two records and performing an add action.
 
-## 21.1.41 (2023-04-18)
+## 22.1.37 (2023-07-04)
 
 ### Tree Grid
 
+#### Bug fixes
+
+- `#I461924`, `#I473131` - Resolved the collapsed event multiple times triggered issue in virtualization enabled samples.
+- `#I471838` - Resolved white space issue occurred in virtualization feature when changing the page size using databound event.
+
+## 22.1.36 (2023-06-28)
+
+### Tree Grid
+
+#### Bug fixes
+
+- `#I469071` - Fixed issue where scrolling down using the scroll bar would cause some records to not be displayed and scrolling using the mouse would repeat some records in virtualization.
+- `#F182421` - Fixed an issue where the stacked column was not functioning properly when resizing was enabled in the treegrid.
+- `#I182710` - Fixed an issue where the child aggregates row would display in the current view records.
+
 #### Bug Fixes
 
-- `#I448090` - The excel filtering dialog box has been fixed to display the data source after filtering a column.
-- `#I414166` - Virtualization has been resolved when enabling it in the load event.
+- `#I182710` - Fixed an issue where the child aggregates row would display in the current view records.
 
-## 21.1.38 (2023-04-04)
+## 22.1.34 (2023-06-21)
 
 ### Tree Grid
 
-#### Bug Fixes
+#### Features
 
-- `#I407372`, `#I449067`, `#I424805` - Fixed console error when dragging and dropping a record and then pressing the tab key.
-- `#I441661` - Fixed incorrect checkbox selection update after selecting a record and collapsing in checkboxOnly mode.
-- `#I449191` - Fixed incorrect cell index selection in the getSelectedRowCellIndexes method when collapsing a record.
-- `#I442710` - Resolved issue of row dropping at the bottom segment (with the last record) not working properly.
-- `#I444506` - Resolved issue of last row border not being added when reordering a row to the last index.
+- Provided support for inline editing with virtualization enabled. Please find the demo [here](https://ej2.syncfusion.com/demos/#/bootstrap5/tree-grid/virtual-scrolling.html).
+- `#I323425`, `#I332700`, `#I344742`, `#I375307` - Provided support for frozen column with virtualization enabled.
 
-- `#I407372`, `#I449067`, `#I424805` - Fixed console error when dragging and dropping a record and then pressing the tab key.
-
-## 21.1.35 (2023-03-23)
-
-### Tree Grid
-
-#### Breaking Changes
-
-- Unnecessary role attributes for Tree Grid row cell and header elements have been removed to enhance accessibility standards.
-- The `td` element for `e-detailcell` in [detail element](https://ej2.syncfusion.com/documentation/treegrid/row/detail-template/) has been only changed from a `td` element to the `th` element to enhance accessibility standards.
-
-- Unnecessary role attributes for Tree Grid row cell and header elements have been removed to enhance accessibility standards.
-- The `td` element for `e-detailcell` in [detail element](https://ej2.syncfusion.com/angular/documentation/treegrid/row/detail-template) has been only changed from a `td` element to the `th` element to enhance accessibility standards.
+- Provided support for inline editing with virtualization enabled. Please find the demo [here](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/treegrid/virtual-scrolling).
+- `#I323425`, `#I332700`, `#I344742`, `#I375307` - Provided support for frozen column with virtualization enabled.
+- `#F166825` - Provided support for infinite scrolling with observable binding.
 
 ## 20.2.36 (2022-06-30)
 
diff --git a/components/treegrid/package.json b/components/treegrid/package.json
index 0e27be61..3f3f0d8e 100644
--- a/components/treegrid/package.json
+++ b/components/treegrid/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@syncfusion/ej2-angular-treegrid",
-	"version": "21.2.3",
+	"version": "22.1.39",
 	"description": "Essential JS 2 TreeGrid Component for Angular",
 	"author": "Syncfusion Inc.",
 	"license": "SEE LICENSE IN license",
diff --git a/components/treegrid/src/index.ts b/components/treegrid/src/index.ts
index b7824f06..483a30d8 100644
--- a/components/treegrid/src/index.ts
+++ b/components/treegrid/src/index.ts
@@ -1,3 +1,4 @@
+export {StackedColumnDirective,StackedColumnsDirective} from './treegrid/stacked-column.directive';
 export {ColumnDirective,ColumnsDirective} from './treegrid/columns.directive';
 export {AggregateColumnDirective,AggregateColumnsDirective} from './treegrid/aggregate-columns.directive';
 export {AggregateDirective,AggregatesDirective} from './treegrid/aggregates.directive';
diff --git a/components/treegrid/src/treegrid/aggregate-columns.directive.ts b/components/treegrid/src/treegrid/aggregate-columns.directive.ts
index a18493c9..f72f4663 100644
--- a/components/treegrid/src/treegrid/aggregate-columns.directive.ts
+++ b/components/treegrid/src/treegrid/aggregate-columns.directive.ts
@@ -88,6 +88,8 @@ export class AggregateColumnDirective extends ComplexBase<AggregateColumnDirecti
      * {% codeBlock src="grid/footer-template-api/index.ts" %}{% endcodeBlock %}
      *     
      * @default null
+     * @asptype string
+
      */
     @ContentChild('footerTemplate')
     @Template()
diff --git a/components/treegrid/src/treegrid/columns.directive.ts b/components/treegrid/src/treegrid/columns.directive.ts
index 163b19d4..fa051b9b 100644
--- a/components/treegrid/src/treegrid/columns.directive.ts
+++ b/components/treegrid/src/treegrid/columns.directive.ts
@@ -1,7 +1,7 @@
 import { Directive, ViewContainerRef, ContentChildren, ContentChild } from '@angular/core';
 import { ComplexBase, ArrayBase, setValue } from '@syncfusion/ej2-angular-base';
 import { Template } from '@syncfusion/ej2-angular-base';
-
+import { StackedColumnsDirective } from './stacked-column.directive';
 
 let input: string[] = ['allowEditing', 'allowFiltering', 'allowReordering', 'allowResizing', 'allowSorting', 'clipMode', 'columns', 'commands', 'customAttributes', 'defaultValue', 'disableHtmlEncode', 'displayAsCheckBox', 'edit', 'editTemplate', 'editType', 'field', 'filter', 'filterBarTemplate', 'filterTemplate', 'format', 'formatter', 'freeze', 'headerTemplate', 'headerText', 'headerTextAlign', 'hideAtMedia', 'isFrozen', 'isIdentity', 'isPrimaryKey', 'lockColumn', 'maxWidth', 'minWidth', 'showCheckbox', 'showColumnMenu', 'showInColumnChooser', 'sortComparer', 'template', 'textAlign', 'type', 'uid', 'validationRules', 'valueAccessor', 'visible', 'width'];
 let outputs: string[] = [];
@@ -22,14 +22,14 @@ let outputs: string[] = [];
     inputs: input,
     outputs: outputs,    
     queries: {
-
+        childColumns: new ContentChild(StackedColumnsDirective)
     }
 })
 export class ColumnDirective extends ComplexBase<ColumnDirective> {
     public directivePropList: any;
 	
-
-
+    public childColumns: any;
+    public tags: string[] = ['columns'];
     /** 
      * Defines the data type of the column.
      * @default null
@@ -324,6 +324,7 @@ export class ColumnDirective extends ComplexBase<ColumnDirective> {
      * Defines the column template that renders customized element in each cell of the column. 
      * It accepts either [template string](https://ej2.syncfusion.com/documentation/common/template-engine/) or HTML element ID.
      * @default null
+     * @asptype string
      */
     @ContentChild('template')
     @Template()
@@ -331,6 +332,7 @@ export class ColumnDirective extends ComplexBase<ColumnDirective> {
     /** 
      * Defines the header template as string or HTML element ID which is used to add customized element in the column header.
      * @default null
+     * @asptype string
      */
     @ContentChild('headerTemplate')
     @Template()
diff --git a/components/treegrid/src/treegrid/index.ts b/components/treegrid/src/treegrid/index.ts
index b8ac8e53..0adbbb64 100644
--- a/components/treegrid/src/treegrid/index.ts
+++ b/components/treegrid/src/treegrid/index.ts
@@ -1,3 +1,4 @@
+export {StackedColumnDirective,StackedColumnsDirective} from './stacked-column.directive';
 export {ColumnDirective,ColumnsDirective} from './columns.directive';
 export {AggregateColumnDirective,AggregateColumnsDirective} from './aggregate-columns.directive';
 export {AggregateDirective,AggregatesDirective} from './aggregates.directive';
diff --git a/components/treegrid/src/treegrid/stacked-column.directive.ts b/components/treegrid/src/treegrid/stacked-column.directive.ts
new file mode 100644
index 00000000..a0123c66
--- /dev/null
+++ b/components/treegrid/src/treegrid/stacked-column.directive.ts
@@ -0,0 +1,389 @@
+import { Directive, ViewContainerRef, ContentChildren, ContentChild } from '@angular/core';
+import { ComplexBase, ArrayBase, setValue } from '@syncfusion/ej2-angular-base';
+import { Template } from '@syncfusion/ej2-angular-base';
+
+
+let input: string[] = ['allowEditing', 'allowFiltering', 'allowReordering', 'allowResizing', 'allowSorting', 'clipMode', 'columns', 'commands', 'customAttributes', 'defaultValue', 'disableHtmlEncode', 'displayAsCheckBox', 'edit', 'editTemplate', 'editType', 'field', 'filter', 'filterBarTemplate', 'filterTemplate', 'format', 'formatter', 'freeze', 'headerTemplate', 'headerText', 'headerTextAlign', 'hideAtMedia', 'isFrozen', 'isIdentity', 'isPrimaryKey', 'lockColumn', 'maxWidth', 'minWidth', 'showCheckbox', 'showColumnMenu', 'showInColumnChooser', 'sortComparer', 'template', 'textAlign', 'type', 'uid', 'validationRules', 'valueAccessor', 'visible', 'width'];
+let outputs: string[] = [];
+/**
+ * `e-stacked-column` directive represent the stacked column of the Angular TreeGrid.
+ * It must be contained in a StackedColumns component(`e-stacked-columns`). 
+ * ```html
+ * <ejs-treegrid [dataSource]='data' allowPaging='true' allowSorting='true'> 
+ *   <e-columns>
+ *     <e-column field='ID' width='100'></e-column>
+ *     <e-column headerText='Details' width='100'>
+ *       <e-stacked-columns>
+ *         <e-stacked-column field='Name' width='140'></e-stacked-column>
+ *       </e-stacked-columns>
+ *     </e-column>
+ *   </e-columns>
+ * </ejs-treegrid>
+ * ```
+ */
+@Directive({
+    selector: 'ejs-treegrid>e-columns>e-column>e-stacked-columns>e-stacked-column',
+    inputs: input,
+    outputs: outputs,    
+    queries: {
+
+    }
+})
+export class StackedColumnDirective extends ComplexBase<StackedColumnDirective> {
+    public directivePropList: any;
+	
+
+
+    /** 
+     * Defines the data type of the column.
+     * @default null
+     */
+    public type: any;
+    /** 
+     * If `allowEditing` set to false, then it disables editing of a particular column. 
+     * By default all columns are editable.
+     * @default true
+     */
+    public allowEditing: any;
+    /** 
+     * If `allowFiltering` set to false, then it disables filtering option and filter bar element of a particular column. 
+     * By default all columns are filterable.
+     * @default true
+     */
+    public allowFiltering: any;
+    /** 
+     * If `allowReordering` set to false, then it disables reorder of a particular column. 
+     * By default all columns can be reorder.
+     * @default true
+     */
+    public allowReordering: any;
+    /** 
+     * If `allowResizing` set to false, it disables resize option of a particular column.
+     * @default true
+     */
+    public allowResizing: any;
+    /** 
+     * If `allowSorting` set to false, then it disables sorting option of a particular column. 
+     * By default all columns are sortable.
+     * @default true
+     */
+    public allowSorting: any;
+    /** 
+     * Defines the cell content's overflow mode. The available modes are 
+     *  
+     * also it will display tooltip while hover on ellipsis applied cell.
+     * @default Syncfusion.EJ2.Grids.ClipMode.Ellipsis
+     * @isenumeration true
+     * @asptype Syncfusion.EJ2.Grids.ClipMode
+     */
+    public clipMode: any;
+    /** 
+     * Used to render multiple header rows(stacked headers) on TreeGrid header.
+     * @default null
+     */
+    public columns: any;
+    /** 
+     * `commands` provides an option to display command buttons in every cell. 
+     * The available built-in command buttons are 
+     * * Edit - Edit the record. 
+     * * Delete - Delete the record. 
+     * * Save - Save the record. 
+     * * Cancel - Cancel the edit state.
+     * 
+     * The following code example implements the custom command column.
+     *```html
+     *<style type="text/css" class="cssStyles">
+     *.details-icon:before
+     *{
+     *   content:"\e74d";
+     *}
+     *</style>
+     *<div id="TreeGrid"></div>
+     *```
+     *```typescript
+     *var gridObj = new TreeGrid({
+     *datasource: window.gridData,
+     *columns : [
+     * { field: 'CustomerID', headerText: 'Customer ID' },
+     * { field: 'CustomerName', headerText: 'Customer Name' },
+     * {commands: [{buttonOption:{content: 'Details', click: onClick, cssClass: details-icon}}], headerText: 'Customer Details'}
+     *]
+     *gridObj.appendTo("#TreeGrid");
+     *```
+     *     
+     * @default null
+     */
+    public commands: any;
+    /** 
+     * The CSS styles and attributes of the content cells of a particular column can be customized.
+     * @default null
+     */
+    public customAttributes: any;
+    /** 
+     * Defines default values for the component when adding a new record to the TreeGrid.
+     * @default null
+     */
+    public defaultValue: any;
+    /** 
+     * If `disableHtmlEncode` is set to true, it encodes the HTML of the header and content cells.
+     * @default true
+     */
+    public disableHtmlEncode: any;
+    /** 
+     * If `displayAsCheckBox` is set to true, it displays the column value as a check box instead of Boolean value.
+     * @default false
+     */
+    public displayAsCheckBox: any;
+    /** 
+     * Defines the `IEditCell` object to customize default edit cell.
+     * @default {}
+     */
+    public edit: any;
+    /** 
+     * Defines the type of component for editing.
+     * @default 'stringedit'
+     */
+    public editType: any;
+    /** 
+     * Defines the field name of column which is mapped with mapping name of DataSource. 
+     * The bounded columns can be sort, filter etc., 
+     * The `field` name must be a valid JavaScript identifier, 
+     * the first character must be an alphabet and should not contain spaces and special characters.
+     * @default 'undefined'
+     */
+    public field: any;
+    /** 
+     *  Defines the filter options to customize filtering for the particular column.
+     * 
+     *  @default null
+     *     
+     */
+    public filter: any;
+    /** 
+     * The `filterBarTemplate` is used to add a custom component instead of default input component for filter bar. 
+     * It have create and read functions. 
+     * * create: It is used for creating custom components. 
+     * * read: It is used to perform custom filter action.
+     * 
+     * ```html
+     *<div id="TreeGrid"></div>
+     *```
+     *```typescript
+     *let gridObj: TreeGrid = new TreeGrid({
+     *dataSource: filterData,
+     *columns: [
+     *  { field: 'OrderID', headerText: 'Order ID' },
+     *  {
+     *     field: 'EmployeeID', filterBarTemplate: {
+     *        create: (args: { element: Element, column: Column }) => {
+     *             let input: HTMLInputElement = document.createElement('input');
+     *             input.id = 'EmployeeID';
+     *             input.type = 'text';
+     *             return input;
+     *        },
+     *        write: (args: { element: Element, column: Column }) => {
+     *            args.element.addEventListener('input', args.column.filterBarTemplate.read as EventListener);
+     *        },
+     *        read: (args: { element: HTMLInputElement, columnIndex: number, column: Column }) => {
+     *            gridObj.filterByColumn(args.element.id, 'equal', args.element.value);
+     *       }
+     *    }
+     * }],
+     *  allowFiltering: true
+     *});
+     *gridObj.appendTo('#TreeGrid');
+     *```
+     *     
+     * @default null
+     */
+    public filterBarTemplate: any;
+    /** 
+     * It is used to change display value with the given format and does not affect the original data. 
+     * Gets the format from the user which can be standard or custom 
+     * [`number`](https://ej2.syncfusion.com/documentation/common/internationalization/#supported-format-string) 
+     * and [`date`](https://ej2.syncfusion.com/documentation/common/internationalization/#supported-format-string-1) formats.
+     * @default null
+     * @asptype string
+     */
+    public format: any;
+    /** 
+     * Defines the method which is used to achieve custom formatting from an external function. 
+     * This function triggers before rendering of each cell.
+     * @default null
+     */
+    public formatter: any;
+    /** 
+     * Defines which side the column need to freeze
+     * @default Syncfusion.EJ2.Grids.FreezeDirection.None
+     * @isenumeration true
+     * @asptype Syncfusion.EJ2.Grids.FreezeDirection
+     */
+    public freeze: any;
+    /** 
+     * Defines the header text of column which is used to display in column header. 
+     * If `headerText` is not defined, then field name value will be assigned to header text.
+     * @default 'undefined'
+     */
+    public headerText: any;
+    /** 
+     * Define the alignment of column header which is used to align the text of column header.
+     * @default null
+     * @aspdefaultvalueignore 
+     * @isenumeration true
+     * @asptype Syncfusion.EJ2.Grids.TextAlign
+     */
+    public headerTextAlign: any;
+    /** 
+     * Column visibility can change based on [`Media Queries`](http://cssmediaqueries.com/what-are-css-media-queries.html). 
+     * `hideAtMedia` accepts only valid Media Queries.
+     * @default 'undefined'
+     */
+    public hideAtMedia: any;
+    /** 
+     * You can use this property to freeze selected columns in grid.
+     * @default false
+     */
+    public isFrozen: any;
+    /** 
+     * If `isIdentity` is set to true, then this column is considered as identity column.
+     * @default false
+     */
+    public isIdentity: any;
+    /** 
+     * If `isPrimaryKey` is set to true, considers this column as the primary key constraint.
+     * @default false
+     */
+    public isPrimaryKey: any;
+    /** 
+     * If `lockColumn` set to true, then it disables Reordering of a particular column. 
+     * The locked column will be moved to first position.
+     * @default false
+     */
+    public lockColumn: any;
+    /** 
+     * Defines the maximum width of the column in pixels or percentage, which will restrict resizing beyond this pixels or percentage.
+     * @default 'undefined'
+     */
+    public maxWidth: any;
+    /** 
+     * Defines the minimum width of the column in pixels or percentage.
+     * @default 'undefined'
+     */
+    public minWidth: any;
+    /** 
+     * If `showCheckbox` set to true, then the checkboxes will be displayed in particular column.
+     * @default false
+     */
+    public showCheckbox: any;
+    /** 
+     * If `showColumnMenu` set to false, then it disable the column menu of a particular column. 
+     * By default column menu will show for all columns
+     * @default true
+     */
+    public showColumnMenu: any;
+    /** 
+     * If `showInColumnChooser` set to false, then hide the particular column in column chooser. 
+     *  By default all columns are displayed in column Chooser.
+     * @default true
+     */
+    public showInColumnChooser: any;
+    /** 
+     * Defines the sort comparer property.
+     * @default 'undefined'
+     */
+    public sortComparer: any;
+    /** 
+     * Defines the alignment of the column in both header and content cells.
+     * @default Syncfusion.EJ2.Grids.TextAlign.Left
+     * @isenumeration true
+     * @asptype Syncfusion.EJ2.Grids.TextAlign
+     */
+    public textAlign: any;
+    /** 
+     * Gets the unique identifier value of the column. It is used to get the object.
+     * @default 'undefined'
+     */
+    public uid: any;
+    /** 
+     * Defines rules to validate data before creating and updating.
+     * @default null
+     */
+    public validationRules: any;
+    /** 
+     * Defines the method used to apply custom cell values from external function and display this on each cell rendered.
+     * @default null
+     */
+    public valueAccessor: any;
+    /** 
+     * If `visible` is set to false, hides the particular column. By default, columns are displayed.
+     * @default true
+     */
+    public visible: any;
+    /** 
+     * Defines the width of the column in pixels or percentage.
+     * @default 'undefined'
+     */
+    public width: any;
+    /** 
+     * Defines the column template that renders customized element in each cell of the column. 
+     * It accepts either [template string](https://ej2.syncfusion.com/documentation/common/template-engine/) or HTML element ID.
+     * @default null
+     * @asptype string
+     */
+    @ContentChild('template')
+    @Template()
+    public template: any;
+    /** 
+     * Defines the header template as string or HTML element ID which is used to add customized element in the column header.
+     * @default null
+     * @asptype string
+     */
+    @ContentChild('headerTemplate')
+    @Template()
+    public headerTemplate: any;
+    @ContentChild('filterItemTemplate')
+    @Template()
+    public filter_itemTemplate: any;
+    /** 
+     * Defines the filter template/UI that is used as filter for a particular column. 
+     * It accepts either template string or HTML element ID.
+     * @aspignore 
+     */
+    @ContentChild('filterTemplate')
+    @Template()
+    public filterTemplate: any;
+    @ContentChild('commandsTemplate')
+    @Template()
+    public commandsTemplate: any;
+    /** 
+     * Defines the cell edit template that used as editor for a particular column. 
+     * It accepts either template string or HTML element ID.
+     * @aspignore 
+     */
+    @ContentChild('editTemplate')
+    @Template()
+    public editTemplate: any;
+
+    constructor(private viewContainerRef:ViewContainerRef) {
+        super();
+        setValue('currentInstance', this, this.viewContainerRef);
+        this.registerEvents(outputs);
+        this.directivePropList = input;
+    }
+}
+
+/**
+ * StackedColumn Array Directive
+ * @private
+ */
+@Directive({
+    selector: 'ejs-treegrid>e-columns>e-column>e-stacked-columns',
+    queries: {
+        children: new ContentChildren(StackedColumnDirective)
+    },
+})
+export class StackedColumnsDirective extends ArrayBase<StackedColumnsDirective> {
+    constructor() {
+        super('columns');
+    }
+}
\ No newline at end of file
diff --git a/components/treegrid/src/treegrid/treegrid-all.module.ts b/components/treegrid/src/treegrid/treegrid-all.module.ts
index 53a80914..80495748 100644
--- a/components/treegrid/src/treegrid/treegrid-all.module.ts
+++ b/components/treegrid/src/treegrid/treegrid-all.module.ts
@@ -1,5 +1,6 @@
 import { NgModule, ValueProvider } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { StackedColumnDirective, StackedColumnsDirective } from './stacked-column.directive';
 import { ColumnDirective, ColumnsDirective } from './columns.directive';
 import { AggregateColumnDirective, AggregateColumnsDirective } from './aggregate-columns.directive';
 import { AggregateDirective, AggregatesDirective } from './aggregates.directive';
diff --git a/components/treegrid/src/treegrid/treegrid.component.ts b/components/treegrid/src/treegrid/treegrid.component.ts
index 32a592af..11b1d564 100644
--- a/components/treegrid/src/treegrid/treegrid.component.ts
+++ b/components/treegrid/src/treegrid/treegrid.component.ts
@@ -113,6 +113,7 @@ export class TreeGridComponent extends TreeGrid implements IComponentBase {
      * 
      * > Check the [`Row Template`](../../treegrid/row) customization.
      *     
+     * @asptype string
      */
     @ContentChild('rowTemplate')
     @Template()
@@ -122,8 +123,8 @@ export class TreeGridComponent extends TreeGrid implements IComponentBase {
      * 
      * > It accepts either the [template string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)
      *or the HTML element ID.
-     *
      *     
+     * @asptype string
      */
     @ContentChild('detailTemplate')
     @Template()
diff --git a/components/treegrid/src/treegrid/treegrid.module.ts b/components/treegrid/src/treegrid/treegrid.module.ts
index af56740e..1e00dc05 100644
--- a/components/treegrid/src/treegrid/treegrid.module.ts
+++ b/components/treegrid/src/treegrid/treegrid.module.ts
@@ -1,5 +1,6 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { StackedColumnDirective, StackedColumnsDirective } from './stacked-column.directive';
 import { ColumnDirective, ColumnsDirective } from './columns.directive';
 import { AggregateColumnDirective, AggregateColumnsDirective } from './aggregate-columns.directive';
 import { AggregateDirective, AggregatesDirective } from './aggregates.directive';
@@ -12,6 +13,8 @@ import { TreeGridComponent } from './treegrid.component';
     imports: [CommonModule],
     declarations: [
         TreeGridComponent,
+        StackedColumnDirective,
+        StackedColumnsDirective,
         ColumnDirective,
         ColumnsDirective,
         AggregateColumnDirective,
@@ -21,6 +24,8 @@ import { TreeGridComponent } from './treegrid.component';
     ],
     exports: [
         TreeGridComponent,
+        StackedColumnDirective,
+        StackedColumnsDirective,
         ColumnDirective,
         ColumnsDirective,
         AggregateColumnDirective,
diff --git a/components/treegrid/styles/material3-dark.scss b/components/treegrid/styles/material3-dark.scss
new file mode 100644
index 00000000..4ecab0cc
--- /dev/null
+++ b/components/treegrid/styles/material3-dark.scss
@@ -0,0 +1,2 @@
+
+@import 'treegrid/material3-dark.scss';
diff --git a/components/treegrid/styles/material3.scss b/components/treegrid/styles/material3.scss
new file mode 100644
index 00000000..3e31b1ba
--- /dev/null
+++ b/components/treegrid/styles/material3.scss
@@ -0,0 +1,2 @@
+
+@import 'treegrid/material3.scss';
diff --git a/components/treegrid/styles/treegrid/material3-dark.scss b/components/treegrid/styles/treegrid/material3-dark.scss
new file mode 100644
index 00000000..605150dc
--- /dev/null
+++ b/components/treegrid/styles/treegrid/material3-dark.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-dark-definition.scss';
+@import 'ej2-treegrid/styles/treegrid/material3-dark.scss';
diff --git a/components/treegrid/styles/treegrid/material3.scss b/components/treegrid/styles/treegrid/material3.scss
new file mode 100644
index 00000000..5bd160e5
--- /dev/null
+++ b/components/treegrid/styles/treegrid/material3.scss
@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-definition.scss';
+@import 'ej2-treegrid/styles/treegrid/material3.scss';
diff --git a/components/treemap/CHANGELOG.md b/components/treemap/CHANGELOG.md
index ed1a0bc9..b7fd177d 100644
--- a/components/treemap/CHANGELOG.md
+++ b/components/treemap/CHANGELOG.md
@@ -11,6 +11,14 @@
 
 ## [Unreleased]
 
+## 22.2.5 (2023-07-27)
+
+### TreeMap
+
+#### Bug fixes
+
+- Print will now work properly in themes such as Material 3, Fluent, and others.
+
 ## 18.2.44 (2020-07-07)
 
 ### TreeMap
diff --git a/components/treemap/package.json b/components/treemap/package.json
index e318330c..0d0db508 100644
--- a/components/treemap/package.json
+++ b/components/treemap/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@syncfusion/ej2-angular-treemap",
-	"version": "21.2.3",
+	"version": "21.1.36",
 	"description": "Essential JS 2 TreeMap Components for Angular",
 	"author": "Syncfusion Inc.",
 	"license": "SEE LICENSE IN license",
diff --git a/components/treemap/src/treemap/levels.directive.ts b/components/treemap/src/treemap/levels.directive.ts
index 6b3fb629..f2ef022f 100644
--- a/components/treemap/src/treemap/levels.directive.ts
+++ b/components/treemap/src/treemap/levels.directive.ts
@@ -97,6 +97,7 @@ export class LevelDirective extends ComplexBase<LevelDirective> {
     /** 
      * Sets and gets the template for header in the treemap.
      * @default null
+     * @asptype string
      */
     @ContentChild('headerTemplate')
     @Template()