v27.1.58 is released

syncfusion · Nov 5, 2024 · d012c10 · d012c10
1 parent 35d2ab5
commit d012c10
Show file tree

Hide file tree

Showing 406 changed files with 20,073 additions and 454 deletions.
diff --git a/controls/barcodegenerator/CHANGELOG.md b/controls/barcodegenerator/CHANGELOG.md
@@ -2,7 +2,7 @@
 
 ## [Unreleased]
 
-## 27.1.57 (2024-10-29)
+## 27.1.58 (2024-11-05)
 
 ### Barcode
 

diff --git a/controls/base/CHANGELOG.md b/controls/base/CHANGELOG.md
@@ -2,7 +2,7 @@
 
 ## [Unreleased]
 
-## 27.1.57 (2024-10-29)
+## 27.1.58 (2024-11-05)
 
 ### Common
 

diff --git a/controls/buttons/CHANGELOG.md b/controls/buttons/CHANGELOG.md
@@ -2,6 +2,14 @@
 
 ## [Unreleased]
 
+## 27.1.58 (2024-11-05)
+
+### Checkbox
+
+#### Bug Fixes
+
+- `#F95768`- The issue with "Checkbox not getting checked while using `usestate` in react" has been resolved.
+
 ## 27.1.53 (2024-10-15)
 
 ### Checkbox

diff --git a/controls/buttons/spec/check-box.spec.ts b/controls/buttons/spec/check-box.spec.ts
@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { createCheckBox } from './../src/common/common';
+import { ChangeEventArgs, createCheckBox } from './../src/common/common';
 import { CheckBox } from './../src/check-box/check-box';
 import { createElement, EventHandler, attributes, enableRipple } from '@syncfusion/ej2-base';
 import { profile , inMB, getMemoryProfile } from './common.spec';
@@ -428,6 +428,7 @@ describe('CheckBox', () => {
         let formElement: HTMLFormElement;
         let cbox: CheckBox;
         let cbox1: CheckBox;
+        let cbox3: CheckBox;
 
         beforeEach(() => {
 
@@ -455,6 +456,14 @@ describe('CheckBox', () => {
                 checkbox.checked = true; // Set the checkbox to checked
                 checkbox.dataBind();
             });
+
+            let button = document.createElement('button');
+            button.setAttribute('id', 'cbox3');
+            document.body.appendChild(button);
+            button.addEventListener('click', () => {
+                cbox3.checked = !cbox3.checked;
+                cbox3.dataBind();
+            });
         })
 
         afterEach(() => {
@@ -521,6 +530,25 @@ describe('CheckBox', () => {
             expect(checkbox.element.checked).toBe(false);
             checkbox.isVue = false;
         });
+
+        it('95768-Checkbox not getting checked while using usestate', () => {
+            let isChecked = false;
+            cbox3 = new CheckBox({
+                checked: isChecked,
+                change: (e: ChangeEventArgs) => {
+                    isChecked = e.checked;
+                    checkbox.dataBind();
+                }
+            }, '#checkbox3');
+            let button = document.querySelector('#cbox3') as HTMLButtonElement;
+            button.click();
+            expect(cbox3.checked).toBeTruthy();
+            expect(cbox3.element.checked).toBe(true);
+            button = document.querySelector('#cbox3') as HTMLButtonElement;
+            button.click();
+            expect(cbox3.checked).toBeFalsy();
+            expect(cbox3.element.checked).toBe(false);
+        });
     });
 
     describe('Notify Html Attributes property changes of', () => {

diff --git a/controls/buttons/src/check-box/check-box.ts b/controls/buttons/src/check-box/check-box.ts
@@ -221,6 +221,7 @@ export class CheckBox extends Component<HTMLInputElement> implements INotifyProp
 
     private clickHandler(event: Event): void {
         if ((event.target as HTMLElement).tagName === 'INPUT' && this.clickTriggered) {
+            this.changeState(this.checked ? 'check' : 'uncheck');
             this.clickTriggered = false;
             return;
         }

diff --git a/controls/charts/CHANGELOG.md b/controls/charts/CHANGELOG.md
@@ -2,6 +2,21 @@
 
 ## [Unreleased]
 
+## 27.1.58 (2024-11-05)
+
+### Chart
+
+#### Bug Fixes
+
+- `#F188458` - Now the page scroll remains the same after clearing the series.
+- `#I647466` - The zoom settings properties are now properly updated on data binding.
+
+### Accumulation Chart
+
+#### Bug Fixes
+
+- `I917094` - The series property now updates correctly on data binding.
+
 ## 27.1.57 (2024-10-29)
 
 ### Chart

diff --git a/controls/charts/package.json b/controls/charts/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@syncfusion/ej2-charts",
-	"version": "27.1.55",
+	"version": "27.1.57",
 	"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",

diff --git a/controls/charts/spec/chart/series/stacking-bar.spec.ts b/controls/charts/spec/chart/series/stacking-bar.spec.ts
@@ -1171,6 +1171,18 @@ describe('Chart Control', () => {
             chartObj.loaded = loaded;
             chartObj.refresh();
         });
+        it('Stacking bar - with transposed true and column width in pixel', (done: Function) => {
+            loaded = (args: Object): void => {
+                let legendElement = document.getElementById('Stackingbarcontainer_chart_legend_text_0');
+                trigger.clickEvent(legendElement);
+                expect(legendElement !== null).toBe(true);
+                done();
+            };
+            chartObj.loaded = loaded;
+            chartObj.series[0].columnWidthInPixel = 15;
+            chartObj.isTransposed = true;
+            chartObj.refresh();
+        });
     });
     it('memory leak', () => {
         profile.sample();

diff --git a/controls/charts/src/accumulation-chart/accumulation.ts b/controls/charts/src/accumulation-chart/accumulation.ts
@@ -2456,6 +2456,7 @@ export class AccumulationChart extends Component<HTMLElement> implements INotify
                         }
                     }
                     if (seriesRefresh) {
+                        this.calculateVisibleSeries();
                         this.processData(false); update.refreshBounds = true;
                     }
                 }

diff --git a/controls/charts/src/chart/axis/cartesian-panel.ts b/controls/charts/src/chart/axis/cartesian-panel.ts
@@ -542,6 +542,9 @@ export class CartesianAxisLayoutPanel {
      */
     private renderScrollbar(chart: Chart, axis: Axis): void {
         const isZoomed: boolean = isNullOrUndefined(chart.zoomModule) ? false : chart.zoomModule.isZoomed;
+        if (!axis.zoomingScrollBar) {
+            chart.scrollBarModule.injectTo(axis, chart);
+        }
         if (((isZoomed && (axis.zoomFactor < 1 || axis.zoomPosition > 0)) || (axis.scrollbarSettings.enable &&
             (axis.zoomFactor <= 1 || axis.zoomPosition >= 0))) &&
             (!axis.zoomingScrollBar.isScrollUI)) {
@@ -551,7 +554,8 @@ export class CartesianAxisLayoutPanel {
                 );
             }
             appendChildElement(false, chart.scrollElement, axis.zoomingScrollBar.render(true), true);
-        } else if (axis.zoomFactor === 1 && axis.zoomPosition === 0 && axis.zoomingScrollBar.svgObject && !axis.scrollbarSettings.enable) {
+        } else if (axis.zoomFactor === 1 && axis.zoomPosition === 0 && axis.zoomingScrollBar.svgObject &&
+            !axis.scrollbarSettings.enable) {
             axis.zoomingScrollBar.destroy();
         } else if (axis.zoomingScrollBar.svgObject) {
             (axis.zoomingScrollBar.svgObject as SVGElement).style.top = (axis.isAxisOpposedPosition && axis.orientation === 'Horizontal' ? -16 : 0)

diff --git a/controls/charts/src/chart/chart.ts b/controls/charts/src/chart/chart.ts
@@ -2874,7 +2874,9 @@ export class Chart extends Component<HTMLElement> implements INotifyPropertyChan
 
     public clearSeries(): void {
         this.series = [];
+        const scrollTop: number = window.pageYOffset || document.documentElement.scrollTop;
         this.refresh();
+        window.scrollTo(0, scrollTop);
     }
 
     /**

diff --git a/controls/charts/src/chart/series/stacking-bar-series.ts b/controls/charts/src/chart/series/stacking-bar-series.ts
@@ -51,10 +51,17 @@ export class StackingBarSeries extends ColumnBase {
             this.rect = this.getRectangle(pointStack.xValue + sideBySideInfo.start, (!series.visible && series.isLegendClicked) ?
                 startvalue : stackedValue.endValues[pointStack.index], pointStack.xValue + sideBySideInfo.end, (!series.visible
                     && series.isLegendClicked) ? startvalue : stackedValue.startValues[pointStack.index], series);
-            this.rect.height = series.columnWidthInPixel ? series.columnWidthInPixel : this.rect.height;
-            this.rect.y = series.columnWidthInPixel ? this.rect.y - (series.columnWidthInPixel / 2) : this.rect.y;
-            const argsData: IPointRenderEventArgs = this.triggerEvent(series, pointStack, series.interior, { width: series.visible ?
-                series.border.width : 0, color: series.visible ? series.border.color : '' });
+            if (series.chart.isTransposed && series.columnWidthInPixel) {
+                this.rect.width = series.columnWidthInPixel ? series.columnWidthInPixel : this.rect.height;
+                this.rect.x -= series.columnWidthInPixel / 2;
+            }
+            else {
+                this.rect.height = series.columnWidthInPixel ? series.columnWidthInPixel : this.rect.height;
+            }
+            this.rect.y = series.columnWidthInPixel ? series.chart.isTransposed ? this.rect.y : this.rect.y -
+                (series.columnWidthInPixel / 2) : this.rect.y;
+            const argsData: IPointRenderEventArgs = this.triggerEvent(series, pointStack, series.interior,
+                                                                      { width: series.visible ? series.border.width : 0, color: series.visible ? series.border.color : '' });
             if (!argsData.cancel) {
                 this.drawRectangle(series, pointStack, this.rect, argsData);
                 this.updateSymbolLocation(pointStack, this.rect, series);

diff --git a/controls/charts/src/chart/user-interaction/zooming-toolkit.ts b/controls/charts/src/chart/user-interaction/zooming-toolkit.ts
@@ -308,7 +308,7 @@ export class Toolkit {
         }
         const chart: Chart = this.chart;
         this.enableZoomButton = false;
-        chart.redraw = chart.zoomSettings.enableAnimation;
+        chart.redraw = chart.enableCanvas ? chart.redraw : chart.zoomSettings.enableAnimation;
         if (!chart.zoomModule.isDevice) {
             remove(chart.zoomModule.toolkitElements);
         } else if (event.type === 'touchstart') {

diff --git a/controls/charts/src/common/legend/legend.ts b/controls/charts/src/common/legend/legend.ts
@@ -1290,9 +1290,7 @@ export class BaseLegend {
             textOptions.x = legendOption.location.x + (legend.shapeWidth / 2) + legend.shapePadding;
         }
         textOptions.y = legendOption.location.y + this.maxItemHeight / 4;
-        const legendTextStyle: FontModel = <FontModel>(extend({}, getValue('properties', legend.textStyle), null, true));
-        legendTextStyle.size = (chart.availableSize.width < 110 || chart.availableSize.height < 190 && !this.isBulletChartControl && this.chart.getModuleName() === 'accumulationchart') ? '8px' : legend.textStyle.size;
-        textElement(chart.renderer, textOptions, legendTextStyle, fontcolor, group, false, false, false, false,
+        textElement(chart.renderer, textOptions, legend.textStyle, fontcolor, group, false, false, false, false,
                     null, this.currentPageNumber && isCanvas ?
                         new Rect(0, -this.translatePage(isCanvas, null, this.currentPageNumber - 1, this.currentPageNumber), 0, 0) :
                         null, null, null, null, null, this.chart.themeStyle.legendLabelFont);
@@ -1346,6 +1344,8 @@ export class BaseLegend {
         const pageDown: string = this.legendID + (!this.isRtlEnable ? '_pagedown' : '_pageup');
         const symbolOption: PathOption = new PathOption(pageUp, 'transparent', 5, grayColor, 1, '', '');
         const iconSize: number = chart.availableSize.width < 110 || chart.availableSize.height < 190 ? 4 : this.pageButtonSize;
+        const legendFontSize: FontModel = <FontModel>(extend({}, getValue('properties', legend.textStyle), null, true));
+        legendFontSize.size = (chart.availableSize.width < 110 || chart.availableSize.height < 190 && !this.isBulletChartControl && this.chart.getModuleName() === 'accumulationchart') ? '8px' : legend.textStyle.size;
         // Page left arrow drawing calculation started here
         const rowCount: number = !legend.enablePages && this.isPaging && !this.isVertical && !this.isBulletChartControl ? 1 :
             (this.rowCount - 1);
@@ -1392,7 +1392,7 @@ export class BaseLegend {
             y = legend.title && this.isTop ? (bounds.y + padding + titleHeight + (iconSize / 1) + 0.5) :
                 (bounds.y + padding + iconSize + 0.5);
         }
-        const size: Size = measureText(this.totalPages + '/' + this.totalPages, legend.textStyle, this.chart.themeStyle.legendLabelFont);
+        const size: Size = measureText(this.totalPages + '/' + this.totalPages, legendFontSize, this.chart.themeStyle.legendLabelFont);
         const translateX: number = (this.isRtlEnable) ?  legend.border.width + (iconSize / 2) :
             bounds.width - (2 * (iconSize + padding) + padding + size.width);
         if (!isCanvas) {
@@ -1425,10 +1425,8 @@ export class BaseLegend {
             textOption.text = !this.isRtlEnable ? this.currentPageNumber  + '/' + this.totalNoOfPages : this.totalNoOfPages + '/' +  this.currentPageNumber;
         }
         if (legend.enablePages || this.isBulletChartControl) {
-            const legendTextStyle: FontModel = <FontModel>(extend({}, getValue('properties', legend.textStyle), null, true));
-            legendTextStyle.size = (chart.availableSize.width < 110 || chart.availableSize.height < 190 && !this.isBulletChartControl) ? '8px' : legend.textStyle.size;
             pageTextElement = textElement(
-                chart.renderer, textOption, legendTextStyle, color, paginggroup,
+                chart.renderer, textOption, legendFontSize, color, paginggroup,
                 false, false, false, false, null,
                 new Rect(translateX, 0, 0, 0), null, null, null, null, this.chart.themeStyle.legendLabelFont
             );

diff --git a/controls/circulargauge/CHANGELOG.md b/controls/circulargauge/CHANGELOG.md
@@ -4,6 +4,14 @@
 
 ## [Unreleased]
 
+## 27.1.58 (2024-11-05)
+
+### Circular Gauge
+
+#### Bug fixes
+
+`#I644577` - The target element is now correctly identified in the `gaugeMouseDown` event.
+
 ## 27.1.57 (2024-10-29)
 
 ### Circular Gauge

diff --git a/controls/circulargauge/package.json b/controls/circulargauge/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@syncfusion/ej2-circulargauge",
-	"version": "27.1.50",
+	"version": "27.1.57",
 	"description": "Essential JS 2 CircularGauge Components",
 	"author": "Syncfusion Inc.",
 	"license": "SEE LICENSE IN license",

diff --git a/controls/circulargauge/src/circular-gauge/axes/axis-renderer.ts b/controls/circulargauge/src/circular-gauge/axes/axis-renderer.ts
@@ -78,15 +78,15 @@ export class AxisRenderer {
         let startAngle: number = axis.startAngle;
         let endAngle: number = axis.endAngle;
         const color: string = axis.lineStyle.color || this.gauge.themeStyle.lineColor;
+        const pointerEvent: string = gauge.enableRangeDrag ? 'none' : 'auto';
         if (axis.lineStyle.width > 0 && this.gauge.allowComponentRender) {
             startAngle = !isCompleteAngle(startAngle, endAngle) ? startAngle : [0, endAngle = 360][0];
             appendPath(
                 new PathOption(
                     gauge.element.id + '_AxisLine_' + index, 'transparent', axis.lineStyle.width, color,
                     null, axis.lineStyle.dashArray,
                     getPathArc(gauge.midPoint, startAngle - 90, endAngle - 90, axis.currentRadius),
-                    '', gauge.allowLoadingAnimation ? 'visibility: hidden; pointer-events:none;' : 'pointer-events:none;'),
-                element, gauge
+                    '', gauge.allowLoadingAnimation ? `visibility: hidden; pointer-events:${pointerEvent};` : `pointer-events:${pointerEvent};`),                element, gauge
             );
         }
     }
@@ -103,7 +103,7 @@ export class AxisRenderer {
      */
     public drawAxisLabels(axis: Axis, index: number, element: Element, gauge: CircularGauge): void {
         const labelElement: Element = gauge.renderer.createGroup({
-            id: gauge.element.id + '_Axis_Labels_' + index, style: gauge.allowLoadingAnimation ? 'visibility: hidden;' : 'pointer-events:none;'
+            id: gauge.element.id + '_Axis_Labels_' + index, style: gauge.allowLoadingAnimation ? 'visibility: hidden;' : 'pointer-events:auto;'
         });
         const min: number = axis.visibleRange.min;
         const max: number = axis.visibleRange.max;
@@ -203,7 +203,7 @@ export class AxisRenderer {
                         style.autoAngle ? 'rotate(' + (angle + 90) + ',' + (location.x) + ',' + location.y + ')' : '', 'auto'
                     ),
                     textFont, style.useRangeColor ? getRangeColor(label.value, <Range[]>axis.ranges, color) : color,
-                    labelElement, 'pointer-events:none;'
+                    labelElement, 'pointer-events:auto;'
                 );
                 labelTextElement.setAttribute('aria-label', label.text);
                 labelTextElement.setAttribute('role', 'region');
@@ -326,7 +326,7 @@ export class AxisRenderer {
                             gauge.element.id + '_Axis_Minor_TickLine_' + index + '_' + j++, 'transparent', minorLineStyle.width,
                             isRangeColor ? getRangeColor(i, <Range[]>axis.ranges, color) : color,
                             null, minorLineStyle.dashArray, this.calculateTicks(i, <Tick>minorLineStyle, axis), '',
-                            gauge.allowLoadingAnimation ? 'visibility: hidden;pointer-events: none;' : 'pointer-events:none;'
+                            gauge.allowLoadingAnimation ? 'visibility: hidden;pointer-events: auto;' : 'pointer-events:auto;'
                         ),
                         minorTickElements, gauge
                     ) as HTMLElement;
@@ -365,7 +365,7 @@ export class AxisRenderer {
                         gauge.element.id + '_Axis_Major_TickLine_' + index + '_' + j, 'transparent', majorLineStyle.width,
                         isRangeColor ? getRangeColor(i, <Range[]>axis.ranges, color) : color,
                         null, majorLineStyle.dashArray, this.calculateTicks(i, <Tick>majorLineStyle, axis), '',
-                        gauge.allowLoadingAnimation ? 'visibility: hidden;pointer-events:none;' : 'pointer-events:none;'
+                        gauge.allowLoadingAnimation ? 'visibility: hidden;pointer-events:auto;' : 'pointer-events:auto;'
                     ),
                     majorTickElements, gauge
                 ) as HTMLElement;

diff --git a/controls/diagrams/CHANGELOG.md b/controls/diagrams/CHANGELOG.md
@@ -2,6 +2,14 @@
 
 ## [Unreleased]
 
+## 27.1.58 (2024-11-05)
+
+### Diagram
+
+#### Bug Fixes
+
+- `#I641865` - Now, the node can be moved inside the lane when the `AllowMovingOutsideLane` constraint is applied to the nodes.
+
 ## 27.1.57 (2024-10-29)
 
 ### Diagram
@@ -10,8 +18,10 @@
 
 - `#I637156` - Tooltip now displays properly on mobile devices with touch interactions.
 - `#I637207` - Nodes are now resizable via touch interactions.
-- `#I639121` - The gradient background of the node is now properly preserved when exporting the diagram as an SVG
+- `#I639121` - The gradient background of the node is now properly preserved when exporting the diagram as an SVG.
 - `#F194691` - The Position Change Event Now Triggers on Keyboard Nudging.
+- `#I642023`, `#I642126` - Multiple selected child nodes of a Swimlane can be moved to a different lane smoothly.
+- `#I642048` - Multiple selected child nodes of a Swimlane can now be properly repositioned within the same lane.
 
 ## 27.1.55 (2024-10-22)
 

diff --git a/controls/diagrams/package.json b/controls/diagrams/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@syncfusion/ej2-diagrams",
-	"version": "27.1.55",
+	"version": "27.1.57",
 	"description": "Feature-rich diagram control to create diagrams like flow charts, organizational charts, mind maps, and BPMN diagrams. Its rich feature set includes built-in shapes, editing, serializing, exporting, printing, overview, data binding, and automatic layouts.",
 	"author": "Syncfusion Inc.",
 	"license": "SEE LICENSE IN license",