v22.2.8 is released

Author: pipeline

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) {