v28.1.36 is released

Author: pipeline

controls/barcodegenerator/CHANGELOG.md

@@ -2,7 +2,7 @@
 
 ## [Unreleased]
 
-## 28.1.35 (2024-12-18)
+## 28.1.36 (2024-12-24)
 
 ### Barcode
 

controls/buttons/CHANGELOG.md

@@ -2,13 +2,21 @@
 
 ## [Unreleased]
 
-## 28.1.35 (2024-12-18)
+## 28.1.36 (2024-12-24)
+
+### Switch
+
+#### Bug Fixes
+
+- `#I664001`- The issue with "Form reset functionality does not work properly for the switch component when it is in a disabled state" has been resolved.
+
+## 28.1.33 (2024-12-12)
 
 ### Switch
 
 #### Features
 
-- The Switch component now includes a `beforeChange` event, allowing users to intercept and manage state changes before they occur, such as for validation or cancellation.
+- The Switch component now includes a `beforeChange` event, which enables users to intercept and manage state changes before they occur. This feature supports custom logic, such as validation or cancellation, thereby offering greater flexibility.
 
 ### Chip
 

controls/buttons/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@syncfusion/ej2-buttons",
-	"version": "18.64.1",
+	"version": "28.1.33",
 	"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/spec/switch.spec.ts

@@ -612,7 +612,47 @@ describe('Switch', () => {
             specSwitch = new Switch({ enablePersistence: undefined }, '#specSwitch');
             expect(specSwitch.htmlAttributes).toEqual({});
         });
+    });
 
+    describe('Form reset behavior testing', () => {
+        let formElement: HTMLFormElement;
+        beforeEach(() => {
+            formElement = createElement('form', {
+                id: 'form'
+            }) as HTMLFormElement;
+            document.body.appendChild(formElement);
+        });
+        afterEach(() => {
+            formElement.remove();
+        });
+        it('Form reset should reset switches even when some are disabled', () => {
+            const switches: { [key: string]: Switch } = {};
+            [1, 2, 3, 4].forEach((item) => {
+                const input = createElement('input', { id: `element${item}`, type: 'checkbox' } as any);
+              formElement.appendChild(input);
+              switches[`element${item}`] = new Switch({ onLabel: 'On', offLabel: 'Off' }, `#element${item}`);
+            });
+            const data = {
+              element1: 1,
+              element2: 0,
+              element3: 0,
+              element4: 1
+            };
+            [1, 2, 3, 4].forEach((item) => {
+              const attr = `element${item}` as keyof typeof data;
+              switches[attr].checked = true;
+              switches[attr].disabled = data[attr] === 0;
+            });
+            formElement.reset();
+            [1, 2, 3, 4].forEach((item) => {
+              const attr = `element${item}` as keyof typeof data;
+              // Ensure checked state is reset
+              expect(switches[attr].checked).toBeFalsy();
+              // Check if switch is disabled or not
+              expect(switches[attr].disabled).toBe(data[attr] === 0);
+            });
+          });
     });
 });
 
+

controls/buttons/src/switch/switch.ts

@@ -188,6 +188,9 @@ export class Switch extends Component<HTMLInputElement> implements INotifyProper
         if (!this.disabled) {
             this.unWireEvents();
         }
+        if (this.formElement) {
+            EventHandler.remove(this.formElement, 'reset', this.formResetHandler);
+        }
         destroy(this, this.getWrapper() as Element, this.tagName);
         if (this.refreshing) {
             ['e-control', 'e-switch', 'e-lib'].forEach((key: string) => {
@@ -364,6 +367,9 @@ export class Switch extends Component<HTMLInputElement> implements INotifyProper
         if (!this.disabled) {
             this.wireEvents();
         }
+        if (this.formElement) {
+            EventHandler.add(this.formElement, 'reset', this.formResetHandler, this);
+        }
         this.renderComplete();
         this.updateHtmlAttribute();
     }
@@ -505,9 +511,6 @@ export class Switch extends Component<HTMLInputElement> implements INotifyProper
         EventHandler.add(wrapper, 'mousedown mouseup', this.rippleHandler, this);
         EventHandler.add(wrapper, 'mouseleave', this.mouseLeaveHandler, this);
         EventHandler.add(wrapper, 'touchstart touchmove touchend', this.switchMouseUp, this);
-        if (this.formElement) {
-            EventHandler.add(this.formElement, 'reset', this.formResetHandler, this);
-        }
     }
     private unWireEvents(): void {
         const wrapper: Element = this.getWrapper() as Element;
@@ -519,9 +522,6 @@ export class Switch extends Component<HTMLInputElement> implements INotifyProper
         EventHandler.remove(wrapper, 'mousedown mouseup', this.rippleHandler);
         EventHandler.remove(wrapper, 'mouseleave', this.mouseLeaveHandler);
         EventHandler.remove(wrapper, 'touchstart touchmove touchend', this.switchMouseUp);
-        if (this.formElement) {
-            EventHandler.remove(this.formElement, 'reset', this.formResetHandler);
-        }
     }
 
     /**
@@ -546,4 +546,3 @@ export class Switch extends Component<HTMLInputElement> implements INotifyProper
         this.element.focus();
     }
 }
-

controls/buttons/styles/button/_tailwind3-definition.scss

@@ -24,14 +24,14 @@ $btn-icon-font-size: $text-sm !default;
 $btn-small-icon-font-size: $text-xs !default;
 $btn-bigger-icon-font-size: $text-base !default;
 $btn-bigger-small-icon-font-size: $text-base !default;
-$btn-round-small-height: 28px !default;
-$btn-round-small-width: 28px !default;
+$btn-round-small-height: 24px !default;
+$btn-round-small-width: 24px !default;
 $btn-round-height: 32px !default;
 $btn-round-width: 32px !default;
-$btn-round-bigger-small-height: 34px !default;
-$btn-round-bigger-small-width: 34px !default;
-$btn-round-bigger-height: 38px !default;
-$btn-round-bigger-width: 38px !default;
+$btn-round-bigger-small-height: 36px !default;
+$btn-round-bigger-small-width: 36px !default;
+$btn-round-bigger-height: 40px !default;
+$btn-round-bigger-width: 40px !default;
 $btn-round-font-size: $text-sm !default;
 $btn-small-round-font-size: $text-xs !default;
 $btn-bigger-round-font-size: $text-base !default;

controls/calendars/CHANGELOG.md

@@ -2,6 +2,16 @@
 
 ## [Unreleased]
 
+## 28.1.36 (2024-12-24)
+
+### DateRangePicker
+
+#### Bug Fixes
+
+- `#I664732` - Fixed an issue where the overlay was displayed even when the popup was prevented from opening in mobile mode.
+
+- `#I664735` - Removed unnecessary conditional code for adding CSS classes based on device type.
+
 ## 19.3.46 (2021-10-19)
 
 ### TimePicker

controls/calendars/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@syncfusion/ej2-calendars",
-	"version": "18.32.5",
+	"version": "28.1.35",
 	"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

@@ -1723,6 +1723,11 @@ 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 (Browser.isDevice) {
+                        const dlgOverlay: any = this.createElement('div', { className: 'e-dlg-overlay'});
+                        dlgOverlay.style.zIndex = (this.zIndex - 1).toString();
+                        this.mobilePopupWrapper.appendChild(dlgOverlay);
+                    }
                 } else {
                     this.popupObj.destroy();
                     this.popupWrapper = this.popupObj = null;
@@ -1735,11 +1740,6 @@ export class DatePicker extends Calendar implements IInput {
                 }
                 EventHandler.add(document, 'mousedown touchstart', this.documentHandler, this);
             });
-            if (Browser.isDevice) {
-                const dlgOverlay: any = this.createElement('div', { className: 'e-dlg-overlay'});
-                dlgOverlay.style.zIndex = (this.zIndex - 1).toString();
-                this.mobilePopupWrapper.appendChild(dlgOverlay);
-            }
         }
     }
     /**

controls/calendars/src/daterangepicker/daterangepicker.ts

@@ -3633,9 +3633,6 @@ export class DateRangePicker extends CalendarBase {
 
         if (this.isMobile) {
             this.popupObj.element.classList.add(DEVICE);
-            if (!this.isMobile) {
-                this.popupObj.element.classList.add('e-bigger');
-            }
         }
         if (this.isMobile && this.isCustomWindow) {
             addClass([this.modal], [DEVICE, ROOT, 'e-range-modal']);
@@ -4556,13 +4553,13 @@ export class DateRangePicker extends CalendarBase {
                             this.popupObj.element,
                             this.modal,
                             this.isMobile || Browser.isDevice);
+                        if (Browser.isDevice) {
+                            const dlgOverlay: HTMLElement = this.createElement('div', { className: 'e-dlg-overlay' });
+                            dlgOverlay.style.zIndex = (this.zIndex - 1).toString();
+                            this.mobileRangePopupWrap.appendChild(dlgOverlay);
+                        }
                     }
                 });
-                if (Browser.isDevice) {
-                    const dlgOverlay: HTMLElement = this.createElement('div', { className: 'e-dlg-overlay'});
-                    dlgOverlay.style.zIndex = (this.zIndex - 1).toString();
-                    this.mobileRangePopupWrap.appendChild(dlgOverlay);
-                }
             }
         }
     }