v28.1.36 is released

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);
-                }
             }
         }
     }

controls/calendars/src/timepicker/timepicker.ts

@@ -2661,18 +2661,18 @@ export class TimePicker extends Component<HTMLElement> implements IInput {
                     addClass([this.inputWrapper.container], FOCUS);
                     EventHandler.add(document, 'mousedown touchstart', this.documentClickHandler, this);
                     this.setOverlayIndex(this.mobileTimePopupWrap, this.popupObj.element, this.modal, Browser.isDevice as any);
+                    if (Browser.isDevice) {
+                        const dlgOverlay: HTMLElement = this.createElement('div', { className: 'e-dlg-overlay'});
+                        dlgOverlay.style.zIndex = (this.zIndex - 1).toString();
+                        this.mobileTimePopupWrap.appendChild(dlgOverlay);
+                    }
                 } else {
                     this.popupObj.destroy();
                     this.popupWrapper = this.listTag = undefined;
                     this.liCollections = this.timeCollections = this.disableItemCollection = [];
                     this.popupObj = null;
                 }
             });
-            if (Browser.isDevice) {
-                const dlgOverlay: HTMLElement = this.createElement('div', { className: 'e-dlg-overlay'});
-                dlgOverlay.style.zIndex = (this.zIndex - 1).toString();
-                this.mobileTimePopupWrap.appendChild(dlgOverlay);
-            }
         }
     }
     /* eslint-enable valid-jsdoc, jsdoc/require-param */

controls/charts/CHANGELOG.md

@@ -2,6 +2,17 @@
 
 ## [Unreleased]
 
+## 28.1.36 (2024-12-24)
+
+### Chart
+
+#### Bug Fixes
+
+- `#I665246` - Now, the chart point click and double-click events are working properly in the waterfall chart.
+- `#I662191` - Now, zooming is restricted for the mouse wheel, similar to selection zoom.
+- `#I666272` - Now, the y-axis range is set properly for the waterfall series.
+- `#I666317` - The exceptions that occurred during React Jest testing have been resolved.
+
 ## 28.1.35 (2024-12-18)
 
 ### Chart

controls/charts/package.json

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

@@ -1091,7 +1091,7 @@ describe('Waterfall Series', () => {
             loaded = (args: Object): void => {
                 let series: HTMLElement = document.getElementById('container_Series_0_Connector_');
                 let d: string = series.getAttribute('d');
-                expect(d).toBe('M 18.31875000000001 371.5 L 314.43125 371.5 M 184.69374999999997 371.5 L 341.06874999999997 371.5 M 490.80625000000003 148.6 L 507.44374999999997 148.6 ');
+                expect(d).toBe('M 158.05624999999998 371.5 L 174.69375000000002 371.5 M 324.43125000000003 371.5 L 341.06874999999997 371.5 M 490.80625000000003 148.6 L 507.44374999999997 148.6 ');
                 done();
             };
             chart.loaded = loaded;
@@ -1101,7 +1101,7 @@ describe('Waterfall Series', () => {
             loaded = (args: Object): void => {
                 let series: HTMLElement = document.getElementById('container_Series_0_Connector_');
                 let d: string = series.getAttribute('d');
-                expect(d).toBe('M 18.31875000000001 371.5 L 314.43125 371.5 M 184.69374999999997 371.5 L 341.06874999999997 371.5 M 490.80625000000003 148.6 L 507.44374999999997 148.6 ');
+                expect(d).toBe('M 158.05624999999998 371.5 L 174.69375000000002 371.5 M 324.43125000000003 371.5 L 341.06874999999997 371.5 M 490.80625000000003 148.6 L 507.44374999999997 148.6 ');
                 done();
             };
             chart.series[0].marker.visible=true;
@@ -1112,7 +1112,7 @@ describe('Waterfall Series', () => {
             loaded = (args: Object): void => {
                 let series: HTMLElement = document.getElementById('container_Series_0_Connector_');
                 let d: string = series.getAttribute('d');
-                expect(d).toBe('M 507.44374999999997 371.5 L 490.80625000000003 371.5 M 341.06874999999997 371.5 L 324.43125000000003 371.5 M 174.69374999999997 148.6 L 158.05625000000003 148.6 ');
+                expect(d).toBe('M 647.1812500000001 371.5 L 351.06874999999997 371.5 M 480.80625000000003 371.5 L 324.43125000000003 371.5 M 174.69374999999997 148.6 L 158.05625000000003 148.6 ');
                 done();
             };
             chart.primaryXAxis.isInversed=true;

controls/charts/src/chart/series/chart-series.ts

@@ -1192,6 +1192,9 @@ export class SeriesBase extends ChildProperty<SeriesBase> {
         }
         this.updateSplineValue();
         this.updateYAxisForErrorBars();
+        if (this instanceof Series && this.type === 'Waterfall' && isNullOrUndefined(this.yAxis.minimum)) {
+            this.yMin = Math.min(...this.chart.waterfallSeriesModule.cumulativeSums);
+        }
     }
     /**
      * Calculates the errorbar and adds a range to axis if errorbar exeeds to the actual range.

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

@@ -12,6 +12,12 @@ import { animationMode } from '@syncfusion/ej2-base';
  */
 
 export class WaterfallSeries extends ColumnBase {
+    /**
+     * Store the cumulative values of each index.
+     *
+     * @private
+     */
+    public cumulativeSums: number[] = [];
 
     /**
      * Render waterfall series.
@@ -94,11 +100,15 @@ export class WaterfallSeries extends ColumnBase {
                         direction = direction.concat('M' + ' ' + y + ' ' + (series.xAxis.isInversed ? (prevRegion.y + prevRegion.height) : prevRegion.y) + ' ' +
                             'L' + ' ' + y + ' ' + (series.xAxis.isInversed ? currentYValue : (currentYValue + currentRegion.height)) + ' ');
                     } else {
+                        let connectorX: number = prevRegion.x;
                         if (beforePoint.yValue === 0) {
-                            prevRegion.x = ((prevRegion.x + prevRegion.width / 2) - (rect.width / 2));
+                            connectorX = ((connectorX + prevRegion.width / 2) + (rect.width / 2)) - prevRegion.width;
                             currentXValue = ((currentRegion.x + currentRegion.width / 2) + (rect.width / 2)) - currentRegion.width;
                         }
-                        direction = direction.concat('M' + ' ' + (series.xAxis.isInversed ? prevRegion.x : (prevRegion.x + prevRegion.width)) + ' ' + y + ' ' +
+                        if (point.yValue === 0) {
+                            currentXValue = ((currentRegion.x + currentRegion.width / 2) - (rect.width / 2));
+                        }
+                        direction = direction.concat('M' + ' ' + (series.xAxis.isInversed ? connectorX : (connectorX + prevRegion.width)) + ' ' + y + ' ' +
                             'L' + ' ' + (series.xAxis.isInversed ? (currentXValue + currentRegion.width) : currentXValue) + ' ' + y + ' ');
                     }
                 }
@@ -206,6 +216,11 @@ export class WaterfallSeries extends ColumnBase {
         const data: Object[] = json; let index: number; let sumValue : number = 0;
         const intermediateSum: number[] = series.intermediateSumIndexes;
         const sumIndex: number[] = series.sumIndexes;
+        let cumulativeSum: number = 0;
+        for (let i: number = 0; i < data.length; i++) {
+            cumulativeSum += data[i as number][series.yName] !== undefined ? data[i as number][series.yName] : 0;
+            this.cumulativeSums.push(cumulativeSum);
+        }
         if (intermediateSum !== undefined && intermediateSum.length > 0) {
             for (let i: number = 0; i < intermediateSum.length; i++) {
                 for (let j: number = 0; j < data.length; j++) {

controls/charts/src/chart/user-interaction/zooming.ts

@@ -494,8 +494,14 @@ export class Zoom {
                     if (axis.zoomPosition !== zoomPosition || axis.zoomFactor !== zoomFactor) {
                         zoomFactor = (zoomPosition + zoomFactor) > 1 ? (1 - zoomPosition) : zoomFactor;
                     }
-                    argsData.currentZoomFactor = zoomFactor;
-                    argsData.currentZoomPosition = zoomPosition;
+                    if (parseFloat(argsData.currentZoomFactor.toFixed(3)) <= 0.001) {
+                        argsData.currentZoomFactor = argsData.previousZoomFactor;
+                        argsData.currentZoomPosition = argsData.previousZoomPosition;
+                    }
+                    else {
+                        argsData.currentZoomFactor = zoomFactor;
+                        argsData.currentZoomPosition = zoomPosition;
+                    }
                 }
                 if (argsData.currentZoomFactor === argsData.previousZoomFactor &&
                     argsData.currentZoomPosition === argsData.previousZoomPosition) {

controls/charts/src/common/user-interaction/tooltip.ts

@@ -353,7 +353,7 @@ export class BaseTooltip extends ChartData {
 
     public fadeOut(data: PointData[]): void {
         const svgElement: HTMLElement = this.chart.enableCanvas ? this.getElement(this.element.id + '_tooltip_group') :
-            this.getElement(this.element.id + '_tooltip_svg');
+            this.getElement(this.element.id + '_tooltip_svg') || this.getElement(this.element.id + '_tooltipparent_template');
         const isTooltip: boolean = (svgElement && parseInt(svgElement.getAttribute('opacity'), 10) > 0);
         if (!isTooltip) {
             this.valueX = null;