v22.2.8 is released

controls/buttons/CHANGELOG.md

@@ -2,7 +2,15 @@
 
 ## [Unreleased]
 
-## 22.2.7 (2023-08-02)
+## 22.2.8 (2023-08-08)
+
+### Checkbox
+
+#### Bug Fixes
+
+- `#I488474` - The issue with "Hovering the checkbox checked items of checkbox is unchecked while using RTL mode" has been resolved.
+
+## 22.2.5 (2023-07-27)
 
 ### Checkbox
 

controls/buttons/package.json

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

controls/buttons/styles/check-box/_layout.scss

@@ -259,8 +259,10 @@
 
       &:hover {
         @if $skin-name != 'FluentUI' {
-          background-color: $cbox-hover-bgcolor;
-          border-color: $cbox-hover-border-color;
+          &.e-check {
+            background-color: $cbox-checkmark-hover-bgcolor;
+            border-color: $cbox-checkmark-hover-border-color;
+          }
         }
         @if $skin-name == 'FluentUI' {
           &:not(.e-check),

controls/buttons/styles/check-box/_theme.scss

@@ -281,7 +281,7 @@
                 color: $cbox-icon-color;
               }
             }
-            @if $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5' {
+            @if $skin-name == 'bootstrap4' or $skin-name == 'tailwind' {
               background-color: $cbox-checkmark-hover-bgcolor;
               border-color: $cbox-checkmark-hover-border-color;
             }

controls/calendars/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 ## [Unreleased]
 
+## 22.2.8 (2023-08-08)
+
+### TimePicker
+
+#### Features
+
+- `#I480992` - Added support for configuring server time zone settings to the component. The `serverTimezoneOffset` property can now be used to set the pre-bound value based on the time zone provided to the component.
+
 ## 21.1.34 (2023-06-21)
 
 ### DatePicker

controls/calendars/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@syncfusion/ej2-calendars",
-	"version": "22.1.38",
+	"version": "22.2.5",
 	"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.",
 	"author": "Syncfusion Inc.",
 	"license": "SEE LICENSE IN license",

controls/calendars/src/datepicker/datepicker.ts

@@ -1349,7 +1349,7 @@ export class DatePicker extends Calendar implements IInput {
         this.popupObj = new Popup(this.popupWrapper as HTMLElement, {
             content: this.calendarElement,
             relateTo: Browser.isDevice ? document.body : this.inputWrapper.container,
-            position: Browser.isDevice ? { X: 'center', Y: 'center' } : { X: 'left', Y: 'bottom' },
+            position: Browser.isDevice ?  { X: 'center', Y: 'center' } : (this.enableRtl ? { X: 'right', Y: 'bottom' } : { X: 'left', Y: 'bottom' }),
             offsetY: OFFSETVALUE,
             targetType: 'container',
             enableRtl: this.enableRtl,
@@ -1665,7 +1665,6 @@ export class DatePicker extends Calendar implements IInput {
                     addClass(this.inputWrapper.buttons, ACTIVE);
                     this.preventArgs.appendTo.appendChild(this.popupWrapper);
                     this.popupObj.refreshPosition(this.inputElement);
-                    const popupLeft: number = parseFloat(this.popupWrapper.style.left) - (this.popupWrapper.offsetWidth - this.inputWrapper.container.offsetWidth);
                     const openAnimation: object = {
                         name: 'FadeIn',
                         duration: Browser.isDevice ? 0 : OPENDURATION
@@ -1678,9 +1677,6 @@ export class DatePicker extends Calendar implements IInput {
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     super.setOverlayIndex(this.mobilePopupWrapper, this.popupObj.element, this.modal, Browser.isDevice as any);
                     this.setAriaAttributes();
-                    if(this.enableRtl && popupLeft > 0){
-                        this.popupWrapper.style.left =  popupLeft + "px";
-                    }
                 } else {
                     this.popupObj.destroy();
                     this.popupWrapper = this.popupObj = null;

controls/calendars/src/daterangepicker/daterangepicker.ts

@@ -3509,10 +3509,6 @@ export class DateRangePicker extends CalendarBase {
                 else{
                     this.inputElement.removeAttribute('aria-activedescendant');
                 }
-                if(this.enableRtl){
-                    const popupLeft: number = parseFloat(this.popupWrapper.style.left) -(this.popupWrapper.offsetWidth - this.inputWrapper.container.offsetWidth);
-                    this.popupWrapper.style.left = popupLeft > 0 ?  popupLeft  + "px": this.popupWrapper.style.left ;
-                }
                 addClass([this.inputWrapper.buttons[0]], ACTIVE);
                 if (!this.isMobile) {
                     if (this.cancelButton) {

controls/calendars/src/timepicker/timepicker-model.d.ts

@@ -317,6 +317,16 @@ export interface TimePickerModel extends ComponentModel{
      */
     maskPlaceholder?: TimeMaskPlaceholderModel;
 
+    /**
+     * By default, the time value will be processed based on system time zone.
+     * If you want to process the initial time value using server time zone
+     * then specify the time zone value to `serverTimezoneOffset` property.
+     *
+     * @default null
+     * @deprecated
+     */
+    serverTimezoneOffset?: number;
+
     /**
      * Triggers when the value is changed.
      *

controls/calendars/src/timepicker/timepicker.ts

@@ -508,6 +508,17 @@ export class TimePicker extends Component<HTMLElement> implements IInput {
     @Property({day: 'day' , month: 'month', year: 'year', hour: 'hour', minute: 'minute', second: 'second', dayOfTheWeek: 'day of the week'})
     public maskPlaceholder: TimeMaskPlaceholderModel;
 
+    /**
+     * By default, the time value will be processed based on system time zone.
+     * If you want to process the initial time value using server time zone
+     * then specify the time zone value to `serverTimezoneOffset` property.
+     *
+     * @default null
+     * @deprecated
+     */
+    @Property(null)
+    public serverTimezoneOffset: number;
+
     /**
      * Triggers when the value is changed.
      *
@@ -632,6 +643,7 @@ export class TimePicker extends Component<HTMLElement> implements IInput {
         this.validateInterval();
         this.bindEvents();
         this.validateDisable();
+        this.setTimeZone();
         this.setValue(this.getFormattedValue(this.value));
         if (this.enableMask && !this.value && this.maskedDateValue && (this.floatLabelType === 'Always' || !this.floatLabelType || !this.placeholder)){
             this.updateInputValue(this.maskedDateValue);
@@ -648,6 +660,20 @@ export class TimePicker extends Component<HTMLElement> implements IInput {
         }
         this.renderComplete();
     }
+    protected setTimeZone(): void {
+        if (!isNullOrUndefined(this.serverTimezoneOffset) && this.value) {
+            const clientTimeZoneDiff: number = new Date().getTimezoneOffset() / 60;
+            const serverTimezoneDiff: number = this.serverTimezoneOffset;
+            let timeZoneDiff: number = serverTimezoneDiff + clientTimeZoneDiff;
+            timeZoneDiff = this.isDayLightSaving() ? timeZoneDiff-- : timeZoneDiff;
+            this.value = new Date((this.value).getTime() + (timeZoneDiff * 60 * 60 * 1000));
+        }
+    }
+    protected isDayLightSaving(): boolean {
+        const firstOffset: number = new Date(this.value.getFullYear(), 0 , 1).getTimezoneOffset();
+        const secondOffset: number = new Date(this.value.getFullYear(), 6 , 1).getTimezoneOffset();
+        return (this.value.getTimezoneOffset() < Math.max(firstOffset, secondOffset));
+    }
     private setTimeAllowEdit(): void {
         if (this.allowEdit) {
             if (!this.readonly) {

controls/charts/CHANGELOG.md

@@ -2,6 +2,16 @@
 
 ## [Unreleased]
 
+## 22.2.8 (2023-08-08)
+
+### Chart
+
+#### Bug Fixes
+
+- `#I483107` - Data editing is now working properly, along with the zoom property.
+- `#I484578` - The trendline is now rendered for the polynomial type in datetime.
+- `#I485511` - Fixed an issue where the trackball was not rendered properly in canvas mode.
+
 ## 22.2.7 (2023-08-02)
 
 ### Chart
@@ -88,6 +98,15 @@
 #### 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.
+- The font family for chart elements such as the title, axis labels, data labels, legend, tooltip, etc., has been changed based on the theme in the 2023 Volume 2 release.
+
+| Theme | Previous Font Family| New Font Family |
+| -------- | -------- | -------- |
+| Material | Segoe UI | Roboto |
+| Bootstrap 5 | Segoe UI | Helvetica  |
+| Bootstrap 4 | Segoe UI | Helvetica |
+| Bootstrap | Segoe UI | Helvetica  |
+| TailWind | Segoe UI | Inter|
 
 #### Bug Fixes
 
@@ -102,6 +121,85 @@
 - 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.
+- The font family for stock chart elements such as the title, axis labels, data labels, legend, tooltip, etc., has been changed based on the theme in the 2023 Volume 2 release.
+
+| Theme | Previous Font Family| New Font Family |
+| -------- | -------- | -------- |
+| Material | Segoe UI | Roboto |
+| Bootstrap 5 | Segoe UI | Helvetica  |
+| Bootstrap 4 | Segoe UI | Helvetica |
+| Bootstrap | Segoe UI | Helvetica  |
+| TailWind | Segoe UI | Inter|
+
+### Accumulation chart
+
+#### Breaking Changes
+
+- The font family for accumulation chart elements such as the title, data labels, legend, tooltip, etc., has been changed based on the theme in the 2023 Volume 2 release.
+
+| Theme | Previous Font Family| New Font Family |
+| -------- | -------- | -------- |
+| Material | Segoe UI | Roboto |
+| Bootstrap 5 | Segoe UI | Helvetica  |
+| Bootstrap 4 | Segoe UI | Helvetica |
+| Bootstrap | Segoe UI | Helvetica  |
+| TailWind | Segoe UI | Inter|
+
+### Bullet Chart
+
+#### Breaking Changes
+
+- The font family for bullet chart elements such as the title, labels, legend, tooltip, etc., has been changed based on the theme in the 2023 Volume 2 release.
+
+| Theme | Previous Font Family| New Font Family |
+| -------- | -------- | -------- |
+| Material | Segoe UI | Roboto |
+| Bootstrap 5 | Segoe UI | Helvetica  |
+| Bootstrap 4 | Segoe UI | Helvetica |
+| Bootstrap | Segoe UI | Helvetica  |
+| TailWind | Segoe UI | Inter|
+
+### RangeNavigator
+
+#### Breaking Changes
+
+- The font family for range navigator elements such as the axis labels, tooltip, etc., has been changed based on the theme in the 2023 Volume 2 release.
+
+| Theme | Previous Font Family| New Font Family |
+| -------- | -------- | -------- |
+| Material | Segoe UI | Roboto |
+| Bootstrap 5 | Segoe UI | Helvetica  |
+| Bootstrap 4 | Segoe UI | Helvetica |
+| Bootstrap | Segoe UI | Helvetica  |
+| TailWind | Segoe UI | Inter|
+
+### Sparkline
+
+#### Breaking Changes
+
+- The font family for sparkline elements such as the data labels, tooltip, etc., has been changed based on the theme in the 2023 Volume 2 release.
+
+| Theme | Previous Font Family| New Font Family |
+| -------- | -------- | -------- |
+| Material | Segoe UI | Roboto |
+| Bootstrap 5 | Segoe UI | Helvetica  |
+| Bootstrap 4 | Segoe UI | Helvetica |
+| Bootstrap | Segoe UI | Helvetica  |
+| TailWind | Segoe UI | Inter|
+
+### Smith Chart
+
+#### Breaking Changes
+
+- The font family for smith chart elements such as the title, data labels, legend, tooltip, etc., has been changed based on the theme in the 2023 Volume 2 release.
+
+| Theme | Previous Font Family| New Font Family |
+| -------- | -------- | -------- |
+| Material | Segoe UI | Roboto |
+| Bootstrap 5 | Segoe UI | Helvetica  |
+| Bootstrap 4 | Segoe UI | Helvetica |
+| Bootstrap | Segoe UI | Helvetica  |
+| TailWind | Segoe UI | Inter|
 
 ## 21.2.10 (2023-06-13)
 

controls/charts/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@syncfusion/ej2-charts",
-	"version": "22.2.5",
+	"version": "22.2.7",
 	"description": "Feature-rich chart control with built-in support for over 25 chart types, technical indictors, trendline, zooming, tooltip, selection, crosshair and trackball.",
 	"author": "Syncfusion Inc.",
 	"license": "SEE LICENSE IN license",

controls/charts/spec/chart/series/waterfall-series.spec.ts

@@ -684,8 +684,8 @@ describe('Waterfall Series', () => {
                 let text2: Element = group.childNodes[2] as HTMLElement;
                 expect(path.getAttribute('fill') == '#000816').toBe(true);
                 expect((<HTMLElement>text1.childNodes[0]).getAttribute('fill') == 'rgba(249, 250, 251, 1)').toBe(true);
-                expect(text1.childNodes[0].textContent.replace(/\u200E/g, '') == 'series1 Marketting and Sales ').toBe(true);
-                expect(text1.childNodes[1].textContent.replace(/\u200E/g, '') == ':').toBe(true);
+                expect(text1.childNodes[0].textContent.replace(/\u200E/g, '') == 'series1 Marketting and Sales : -607C').toBe(true);
+                expect(text1.childNodes[1].textContent.replace(/\u200E/g, '') == 'series2 Marketting and Sales : -427C').toBe(true);
                 trigger.mousemovetEvent(target, Math.ceil(x), Math.ceil(y + 50));
                 done();
             };

controls/charts/spec/chart/user-interaction/tooltip.spec.ts

@@ -112,7 +112,7 @@ describe('Chart Control', () => {  beforeAll(() => {
                 expect(path.localName == 'path').toBe(true);
                 expect(path.getAttribute('d') != '' || ' ').toBe(true);
                 expect(group.childNodes.length == 4).toBe(true);
-                expect(text1.childNodes.length == 5).toBe(true);
+                expect(text1.childNodes.length == 3).toBe(true);
                 expect(text1.textContent.replace(/\u200E/g, '') == 'ChartSeriesNameGold$2000.00 : 40').toBe(true);
                 // expect(text1.childNodes[1].textContent.replace(/\u200E/g, '') == '$2000.00 : ').toBe(true);
                 // expect(text1.childNodes[2].textContent.replace(/\u200E/g, '') == '40').toBe(true);

controls/charts/spec/chart/user-interaction/trackball.spec.ts

@@ -158,7 +158,7 @@ describe('Chart Trackball', () => {
                 expect(path.localName == 'path').toBe(true);
                 expect(path.getAttribute('d') != '' || ' ').toBe(true);
                 expect(group.childNodes.length == 4).toBe(true);
-                expect(group.childNodes[1].childNodes.length == 17).toBe(true);
+                expect(group.childNodes[1].childNodes.length == 9).toBe(true);
 
                 expect(target.getAttribute('opacity') == '0.5').toBe(true);
                 expect(document.getElementById('container_Series_1_Point_2').getAttribute('opacity') == '0.5').toBe(true);
@@ -189,7 +189,7 @@ describe('Chart Trackball', () => {
                 expect(tooltip != null).toBe(true);
                 expect(tooltip.offsetLeft > x).toBe(true);
                 let group: HTMLElement = tooltip.childNodes[0].childNodes[0] as HTMLElement;
-                expect(group.childNodes[1].childNodes.length == 13).toBe(true);
+                expect(group.childNodes[1].childNodes.length == 7).toBe(true);
                 done();
             };
             chartObj.series[2].visible = false;
@@ -221,7 +221,7 @@ describe('Chart Trackball', () => {
 
                 let group: HTMLElement = tooltip.childNodes[0].childNodes[0] as HTMLElement;
                 expect(group.childNodes[3].childNodes.length == 2).toBe(true);
-                expect(group.childNodes[1].childNodes.length == 9).toBe(true);
+                expect(group.childNodes[1].childNodes.length == 5).toBe(true);
 
                 targetElement = chartObj.element.querySelector('#container_Series_0_Point_11_Symbol') as HTMLElement;
                 y = parseFloat(targetElement.getAttribute('cy')) + parseFloat(chartArea.getAttribute('y')) + elem.offsetTop;

controls/charts/spec/pie/user-interaction/tooltip.spec.ts

@@ -137,7 +137,7 @@ describe('Tooltip checking for the pie series', () => {
             expect(path.localName == 'path').toBe(true);
             expect(path.getAttribute('d') != '' || ' ').toBe(true);
             expect(group.childNodes.length == 4).toBe(true);
-            expect(text1.childNodes.length == 5).toBe(true);
+            expect(text1.childNodes.length == 3).toBe(true);
             expect(text1.textContent.replace('\u200E', '') == 'AnimalsBald Eagle : 18').toBe(true);
             // expect(text1.childNodes[1].textContent == 'Bald Eagle ').toBe(true);
             // expect(text1.childNodes[2].textContent == '').toBe(true);
@@ -190,7 +190,7 @@ describe('Tooltip checking for the pie series', () => {
             expect(path.localName == 'path').toBe(true);
             expect(path.getAttribute('d') != '' || ' ').toBe(true);
             expect(group.childNodes.length == 4).toBe(true);
-            expect(text1.childNodes.length == 6).toBe(true);
+            expect(text1.childNodes.length == 2).toBe(true);
             expect(text1.textContent.replace(/\u200E/g, '') == 'AnimalsAnimals : Elk : 44').toBe(true);
             //expect(text1.childNodes[1].textContent == 'Animals : Elk : 44').toBe(true);          
             expect((<HTMLElement>group.childNodes[2]).getAttribute('d') != '' || ' ').toBe(true);
@@ -214,7 +214,7 @@ describe('Tooltip checking for the pie series', () => {
             expect(path.localName == 'path').toBe(true);
             expect(path.getAttribute('d') != '' || ' ').toBe(true);
             expect(group.childNodes.length == 3).toBe(true);
-            expect(text1.childNodes.length == 5).toBe(true);
+            expect(text1.childNodes.length == 1).toBe(true);
             expect(text1.textContent.replace(/\u200E/g, '') == 'Animals : Brown Bear : 30').toBe(true);
             expect((<HTMLElement>group.childNodes[2]).getAttribute('d') != '' || ' ').toBe(true);
 
@@ -367,8 +367,8 @@ describe('Checking tooltip text with useGroupSeparator is true', () => {
             segement = getElement(sliceid + 2);
             trigger.mousemoveEvent(segement, 0, 0, 200, 250);
             let tooltip: HTMLElement = document.getElementById('container_tooltip_text');
-            expect(tooltip.children[0].innerHTML).toEqual("Palletes ");
-            expect(tooltip.children[3].innerHTML).toEqual("1,377,507");
+            expect(tooltip.children[0].innerHTML).toEqual("Palletes : ");
+            expect(tooltip.children[1].innerHTML).toEqual("1,377,507");
             done();
         };
         accumulation.refresh();