v22.2.5 is released

2023-07-27 15:11:19 +00:00 · 2023-07-27 15:11:19 +00:00 · 26dabb8996
--- 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
--- 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",
--- 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);
--- a/components/base/styles/material3-dark.scss
+++ b/components/base/styles/material3-dark.scss
@ -0,0 +1 @@
+@import 'ej2-base/styles/material3-dark-definition.scss';
--- a/components/base/styles/material3.scss
+++ b/components/base/styles/material3.scss
@ -0,0 +1 @@
+@import 'ej2-base/styles/material3-definition.scss';
--- a/components/base/umd-deploy/styles/bootstrap-dark.scss
+++ b/components/base/umd-deploy/styles/bootstrap-dark.scss
--- a/components/base/umd-deploy/styles/bootstrap.scss
+++ b/components/base/umd-deploy/styles/bootstrap.scss
--- a/components/base/umd-deploy/styles/bootstrap4.scss
+++ b/components/base/umd-deploy/styles/bootstrap4.scss
--- a/components/base/umd-deploy/styles/bootstrap5-dark.scss
+++ b/components/base/umd-deploy/styles/bootstrap5-dark.scss
--- a/components/base/umd-deploy/styles/bootstrap5.scss
+++ b/components/base/umd-deploy/styles/bootstrap5.scss
--- a/components/base/umd-deploy/styles/fabric-dark.scss
+++ b/components/base/umd-deploy/styles/fabric-dark.scss
--- a/components/base/umd-deploy/styles/fabric.scss
+++ b/components/base/umd-deploy/styles/fabric.scss
--- a/components/base/umd-deploy/styles/fluent-dark.scss
+++ b/components/base/umd-deploy/styles/fluent-dark.scss
--- a/components/base/umd-deploy/styles/fluent.scss
+++ b/components/base/umd-deploy/styles/fluent.scss
--- a/components/base/umd-deploy/styles/highcontrast-light.scss
+++ b/components/base/umd-deploy/styles/highcontrast-light.scss
--- a/components/base/umd-deploy/styles/highcontrast.scss
+++ b/components/base/umd-deploy/styles/highcontrast.scss
--- a/components/base/umd-deploy/styles/material-dark.scss
+++ b/components/base/umd-deploy/styles/material-dark.scss
--- a/components/base/umd-deploy/styles/material.scss
+++ b/components/base/umd-deploy/styles/material.scss
--- a/components/base/umd-deploy/styles/tailwind-dark.scss
+++ b/components/base/umd-deploy/styles/tailwind-dark.scss
--- a/components/base/umd-deploy/styles/tailwind.scss
+++ b/components/base/umd-deploy/styles/tailwind.scss
--- 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
--- 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",
--- 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()
--- a/components/buttons/styles/button/material3-dark.scss
+++ 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';
--- a/components/buttons/styles/button/material3.scss
+++ 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';
--- a/components/buttons/styles/check-box/material3-dark.scss
+++ 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';
--- a/components/buttons/styles/check-box/material3.scss
+++ 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';
--- a/components/buttons/styles/chips/material3-dark.scss
+++ 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';
--- a/components/buttons/styles/chips/material3.scss
+++ 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';
--- a/components/buttons/styles/floating-action-button/material3-dark.scss
+++ 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';
--- a/components/buttons/styles/floating-action-button/material3.scss
+++ 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';
--- a/components/buttons/styles/material3-dark.scss
+++ 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';
--- a/components/buttons/styles/material3.scss
+++ 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';
--- a/components/buttons/styles/radio-button/material3-dark.scss
+++ 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';
--- a/components/buttons/styles/radio-button/material3.scss
+++ 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';
--- a/components/buttons/styles/speed-dial/material3-dark.scss
+++ 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';
--- a/components/buttons/styles/speed-dial/material3.scss
+++ 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';
--- a/components/buttons/styles/switch/material3-dark.scss
+++ 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';
--- a/components/buttons/styles/switch/material3.scss
+++ 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';
--- 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
--- 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",
--- 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'];

--- 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'];

--- 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'];

--- 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'];

--- a/components/calendars/styles/calendar/material3-dark.scss
+++ 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';
--- a/components/calendars/styles/calendar/material3.scss
+++ 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';
--- a/components/calendars/styles/datepicker/material3-dark.scss
+++ 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';
--- a/components/calendars/styles/datepicker/material3.scss
+++ 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';
--- a/components/calendars/styles/daterangepicker/material3-dark.scss
+++ 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';
--- a/components/calendars/styles/daterangepicker/material3.scss
+++ 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';
--- a/components/calendars/styles/datetimepicker/material3-dark.scss
+++ 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';
--- a/components/calendars/styles/datetimepicker/material3.scss
+++ 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';
--- a/components/calendars/styles/material3-dark.scss
+++ 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';
--- a/components/calendars/styles/material3.scss
+++ 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';
--- a/components/calendars/styles/timepicker/material3-dark.scss
+++ 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';
--- a/components/calendars/styles/timepicker/material3.scss
+++ 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';
--- 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
--- 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",
--- 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
--- 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
--- 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'];

--- 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
--- 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",
--- 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()
--- 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
--- 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",
--- 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()
--- 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 
--- a/components/diagrams/styles/diagram/material3-dark.scss
+++ 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';
--- a/components/diagrams/styles/diagram/material3.scss
+++ 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';
--- a/components/diagrams/styles/material3-dark.scss
+++ b/components/diagrams/styles/material3-dark.scss
@ -0,0 +1,2 @@
+
+@import 'diagram/material3-dark.scss';
--- a/components/diagrams/styles/material3.scss
+++ b/components/diagrams/styles/material3.scss
@ -0,0 +1,2 @@
+
+@import 'diagram/material3.scss';
--- 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.
+
--- 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",
--- a/components/documenteditor/styles/document-editor-container/material3-dark.scss
+++ 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';
--- a/components/documenteditor/styles/document-editor-container/material3.scss
+++ 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';
--- a/components/documenteditor/styles/document-editor/material3-dark.scss
+++ 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';
--- a/components/documenteditor/styles/document-editor/material3.scss
+++ 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';
--- a/components/documenteditor/styles/material3-dark.scss
+++ b/components/documenteditor/styles/material3-dark.scss
@ -0,0 +1,3 @@
+
+@import 'document-editor/material3-dark.scss';
+@import 'document-editor-container/material3-dark.scss';
--- a/components/documenteditor/styles/material3.scss
+++ b/components/documenteditor/styles/material3.scss
@ -0,0 +1,3 @@
+
+@import 'document-editor/material3.scss';
+@import 'document-editor-container/material3.scss';
--- 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
--- 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.
+&copy; Copyright 2023 Syncfusion, Inc. All Rights Reserved. The Syncfusion Essential Studio license and copyright applies to this distribution.
--- 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",
--- 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')
--- 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')
--- 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')
--- 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()
--- 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')
--- 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()
--- 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()
--- a/components/dropdowns/styles/auto-complete/material3-dark.scss
+++ 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';
--- a/components/dropdowns/styles/auto-complete/material3.scss
+++ 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';
--- a/components/dropdowns/styles/combo-box/material3-dark.scss
+++ 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';
--- a/components/dropdowns/styles/combo-box/material3.scss
+++ 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';
--- a/components/dropdowns/styles/drop-down-base/material3-dark.scss
+++ 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';
--- a/components/dropdowns/styles/drop-down-base/material3.scss
+++ 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';
--- a/components/dropdowns/styles/drop-down-list/material3-dark.scss
+++ 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';
--- a/components/dropdowns/styles/drop-down-list/material3.scss
+++ 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';
--- a/components/dropdowns/styles/drop-down-tree/material3-dark.scss
+++ 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';
--- a/Показать больше
+++ b/Показать больше
				`@ -0,0 +1 @@`
				`@import 'ej2-base/styles/material3-dark-definition.scss';`
				`@ -0,0 +1 @@`
				`@import 'ej2-base/styles/material3-definition.scss';`