v22.1.39 is released

components/base/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 ## [Unreleased]
 
+## 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

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",

components/base/src/template.ts

@@ -2,15 +2,15 @@ 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
  */
 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;

components/base/styles/material3-dark.scss

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

components/base/styles/material3.scss

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

components/buttons/CHANGELOG.md

@@ -2,49 +2,65 @@
 
 ## [Unreleased]
 
-## 21.2.3 (2023-05-03)
+## 22.1.39 (2023-07-18)
 
-### Switch
+### Speed Dial
 
 #### Bug Fixes
 
-- `#I456259` - provided the `role` attribute support to `htmlAttributes` property of switch component.
+- `#I478092` - Enhanced the component's functionality, by introducing the `isPrimary` property to specify whether it is a primary button or not.
 
-## 21.1.37 (2023-03-29)
+## 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
 
-- `#I436942` - The issue with "Validation rule not display properly when we use Checkbox within form validator" has been resolved.
+- `#F182133` - The issue with "Correcting Ripple element is not destroyed properly while clicking on radio button component" has been resolved.
 
-### Chip
+## 21.2.6 (2023-05-23)
 
-#### New Features
+### RadioButton
 
-- `#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.
+#### Bug Fixes
 
-### Floating Action Button `Preview`
+- `#I463728` - The issue with "Provide the boolean value support for radio button while using the v-model property in VUE platform" has been resolved.
 
-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.
+## 21.2.5 (2023-05-16)
 
+### RadioButton
 
-- **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.
+#### Bug Fixes
 
-### Speed Dial `Preview`
+- `#F182133` - The issue with "Ripple element is not destroyed properly while clicking on radio button component" has been resolved.
 
-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.
+## 21.2.3 (2023-05-03)
 
+### Switch
 
-- **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.
+#### Bug Fixes
+
+- `#I456259` - provided the `role` attribute support to `htmlAttributes` property of switch component.
+
+## 21.1.37 (2023-03-29)
+
+### Checkbox
+
+#### Bug Fixes
+
+- `#I436942` - The issue with "Validation rule not display properly when we use Checkbox within form validator" has been resolved.
 
 ## 21.1.35 (2023-03-23)
 
@@ -493,6 +509,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

components/buttons/package.json

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

components/buttons/src/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,13 +42,15 @@ 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()
     public itemTemplate: any;
     /** 
      * Defines a template content for popup of SpeedDial.
      * @default ''
+     * @asptype string
      */
     @ContentChild('popupTemplate')
     @Template()

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

components/buttons/styles/button/material3.scss

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

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

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

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

components/buttons/styles/chips/material3.scss

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

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

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

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

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

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

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

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

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

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

components/buttons/styles/switch/material3.scss

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

components/calendars/CHANGELOG.md

@@ -2,33 +2,25 @@
 
 ## [Unreleased]
 
-## 21.1.41 (2023-04-18)
+## 21.1.34 (2023-06-21)
 
 ### DatePicker
 
-#### Bug Fixes
-
-- `#453318` - Issue with "Placeholder text not get displayed on initial render with strict mode true case of the datepicker component."
+#### Features
 
-## 21.1.38 (2023-04-04)
+- Added support for full screen calendar in mobile mode with landscape and portrait orientations. Enable the feature by setting fullScreenMode property to true.
 
-### DatePicker
-
-#### Bug Fixes
+### DateRangePicker
 
-- `#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.
+#### Features
 
-- `#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

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",

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

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

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

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

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

components/calendars/styles/calendar/material3.scss

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

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

components/calendars/styles/datepicker/material3.scss

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

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

components/calendars/styles/daterangepicker/material3.scss

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

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

components/calendars/styles/datetimepicker/material3.scss

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

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

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

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

components/calendars/styles/timepicker/material3.scss

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