v19.2.47 is released

Author: pipeline

controls/base/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 ## [Unreleased]
 
+## 19.2.47 (2021-07-13)
+
+### Common
+
+- `I327143`,`I332883` - Resolved the issue with Template Compilation malfunctions when value have special character apostrophe.
+
 ## 19.1.64 (2021-05-19)
 
 ### Common

controls/base/src/animation.ts

@@ -283,7 +283,7 @@ export interface AnimationOptions extends AnimationModel {
 export function rippleEffect(element: HTMLElement, rippleOptions?: RippleOptions, done?: Function): () => void {
     let rippleModel: RippleOptions = getRippleModel(rippleOptions);
     if (rippleModel.rippleFlag === false || (rippleModel.rippleFlag === undefined && !isRippleEnabled)) {
-        return Function;
+        return (() => {});
     }
     element.setAttribute('data-ripple', 'true');
     EventHandler.add(element, 'mousedown', rippleHandler, { parent: element, rippleOptions: rippleModel });

controls/base/src/template.ts

@@ -60,7 +60,14 @@ export function compile(template: string, helper?: Object, ignorePrefix?: boolea
     let argName: string = 'data';
 
     let evalExpResult: string = evalExp(template, argName, helper, ignorePrefix);
-    let fnCode: string = `var str="${evalExpResult}"; return str;`;
+    let condtion = `if(str.match(/value='([^\/]+)'\\s/g)){
+        var check = str.match(/value='([^\/]+)'/g)[0].split('=')[1];
+        var change = check.replace(/^\'/, '\"');
+        change = change.replace(/.$/,'\"');
+        str = str.replace(check, change);
+    }`;
+    let fnCode = "var str=\"" + evalExpResult + "\";" + condtion + " return str;";
+    // let fnCode: string = `var str="${evalExpResult}"; return str;`;
 
     // tslint:disable-next-line:no-function-constructor-with-string-args
     let fn: Function = new Function(argName, fnCode);
@@ -234,4 +241,4 @@ function HandleSpecialCharArrObj(str: string, nameSpaceNew: string, keys: string
     } else {
         return str;
     }
-}
+}

controls/buttons/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 ## [Unreleased]
 
+## 19.2.47 (2021-07-13)
+
+### Checkbox
+
+#### Bug Fixes
+
+- Issue with checkbox icon on Mac OS has been resolved.
+
 ## 19.2.46 (2021-07-06)
 
 ### Chips

controls/buttons/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@syncfusion/ej2-buttons",
-	"version": "19.1.63",
+	"version": "19.2.46",
 	"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/_bootstrap4-definition.scss

@@ -50,9 +50,9 @@ $cbox-indeterminate-disabled-border-color: $primary-font !default;
 $cbox-indeterminate-disabled-color: $primary-font !default;
 $cbox-indeterminate-fontsize: 8px !default;
 $cbox-indeterminate-hover-color: $white !default;
-$cbox-indeterminate-lineheight: 13px !default;
+$cbox-indeterminate-lineheight: 1.5 !default;
 $cbox-key-focussed-bgcolor: transparent !default;
-$cbox-lineheight: 13px !default;
+$cbox-lineheight: 1.5 !default;
 $cbox-margin: 8px !default;
 $cbox-padding: 0 !default;
 $cbox-ripple-bgcolor: transparent !default;

controls/calendars/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@syncfusion/ej2-calendars",
-	"version": "17.2.48",
+	"version": "19.2.46",
 	"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/charts/CHANGELOG.md

@@ -2,12 +2,29 @@
 
 ## [Unreleased]
 
+## 19.2.47 (2021-07-13)
+
+### Chart
+
+#### Bug Fixes
+
+- `#333145` - Point selection is now working properly, when specifying the selection on load.
+- `#334269` - Range area series is now rendering properly in stock chart.
+
 ## 19.2.46 (2021-07-06)
 
 ### Chart
 
 #### Bug Fixes
 
+- `#332577` - `StepArea` gets truncated while using canvas mode issue has been fixed.
+
+## 19.2.44 (2021-06-30)
+
+### Chart
+
+#### Bug Fixes
+
 - `#331558` - Zooming working fine when the pan element not shown in toolbar.
 
 #### New Features

controls/charts/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@syncfusion/ej2-charts",
-	"version": "19.1.65",
+	"version": "19.2.46",
 	"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/src/chart/axis/multi-level-labels.ts

@@ -11,7 +11,7 @@ import { Axis } from '../axis/axis';
 import { FontModel } from '../../common/model/base-model';
 import { isNullOrUndefined } from '@syncfusion/ej2-base';
 import { textWrap, appendClipElement, appendChildElement } from '../../common/utils/helper';
-import { valueToCoefficient, textTrim, textElement } from '../../common/utils/helper';
+import { valueToCoefficient, textTrim, textElement, withInBounds } from '../../common/utils/helper';
 import { Size, measureText, TextOption, PathOption, Rect, SvgRenderer } from '@syncfusion/ej2-svg-base';
 import { MultiLevelLabels, MultiLevelCategories } from '../model/chart-base';
 import { IAxisMultiLabelRenderEventArgs, IMultiLevelLabelClickEventArgs } from '../../chart/model/chart-interface';
@@ -38,6 +38,10 @@ export class MultiLevelLabel {
     public multiElements: Element;
     /** @private */
     public labelElement: Element;
+    /** @private */
+    public multiLevelLabelRectXRegion: Rect[] = [];
+    /** @private */
+    public xLabelCollection: TextOption[] = [];
     /**
      * Constructor for the logerithmic module.
      *
@@ -170,6 +174,11 @@ export class MultiLevelLabel {
                         this.chart.renderer, options, argsData.textStyle, argsData.textStyle.color || this.chart.themeStyle.axisLabel,
                         this.labelElement, false, this.chart.redraw, true, null, null, null, null, null, this.chart.enableCanvas
                     );
+                    if (this.chart.enableCanvas) {
+                        let textSize: Size = measureText(argsData.text, argsData.textStyle);
+                        this.multiLevelLabelRectXRegion.push(new Rect(options.x, options.y, textSize.width, textSize.height));
+                        this.xLabelCollection.push(options);
+                    }
                     if (multiLevel.border.width > 0 && multiLevel.border.type !== 'WithoutBorder') {
                         pathRect = this.renderXAxisLabelBorder(
                             level, endX - startX - padding, axis, startX, startY, labelSize, options, axisRect, argsData.alignment,
@@ -511,11 +520,20 @@ export class MultiLevelLabel {
      * @private
      */
     public click(event: Event): void {
-        const targetId: string = (<HTMLElement>event.target).id;
+        let targetId: string = (<HTMLElement>event.target).id;
         const multiLevelID: string = '_Axis_MultiLevelLabel_Level_';
         let textId: string;
         let elementId: string;
         let axisIndex: number;
+        if (this.chart.enableCanvas) {
+            for (let i: number = 0; i < this.multiLevelLabelRectXRegion.length; i++) {
+                if (withInBounds(
+                    event['x'], event['y'], this.multiLevelLabelRectXRegion[i],
+                    this.multiLevelLabelRectXRegion[i].width, this.multiLevelLabelRectXRegion[i].height)) {
+                        targetId = this.xLabelCollection[i].id;
+                    }
+            }
+        }
         if (targetId.indexOf(multiLevelID) > -1) {
             textId = targetId.split(multiLevelID)[1];
             elementId = targetId.split(multiLevelID)[0];

controls/charts/src/chart/chart.ts

@@ -1928,6 +1928,10 @@ export class Chart extends Component<HTMLElement> implements INotifyPropertyChan
      */
     public renderSeries(): void {
         let visibility: boolean;
+        if (this.enableCanvas) {
+            // To clip the series rect for canvas
+            (this.renderer as CanvasRenderer).canvasClip(this.chartAxisLayoutPanel.seriesClipRect);
+        }
         for (const item of this.visibleSeries) {
             if (item.category === 'TrendLine') {
                 visibility = this.series[item.sourceIndex].trendlines[item.index].visible;
@@ -1940,8 +1944,6 @@ export class Chart extends Component<HTMLElement> implements INotifyPropertyChan
                 if (this.enableCanvas) {
                     // To render scatter and bubble series in canvas
                     this.renderCanvasSeries(item);
-                    // To clip the series rect for canvas
-                    (this.renderer as CanvasRenderer).canvasClip(this.chartAxisLayoutPanel.seriesClipRect);
                 }
                 item.renderSeries(this);
                 if (this.enableCanvas) {
@@ -3578,6 +3580,7 @@ export class Chart extends Component<HTMLElement> implements INotifyPropertyChan
      * Called internally if any of the property value changed.
      * @private
      */
+    // tslint:disable-next-line:max-func-body-length
     public onPropertyChanged(newProp: ChartModel, oldProp: ChartModel): void {
         let renderer: boolean = false;
         let refreshBounds: boolean = false;
@@ -3702,6 +3705,13 @@ export class Chart extends Component<HTMLElement> implements INotifyPropertyChan
                         renderer = true;
                         break;
                     case 'selectedDataIndexes':
+                        if (this.selectionModule) {
+                            this.selectionModule.currentMode = this.selectionMode;
+                            this.selectionModule.selectedDataIndexes = this.selectedDataIndexes as Indexes[];
+                            this.selectionModule.styleId = this.element.id + '_ej2_chart_selection';
+                            this.selectionModule.redrawSelection(this, oldProp.selectionMode, true);
+                        }
+                        break;
                     case 'selectionMode':
                         if (this.selectionModule && newProp.selectionMode && newProp.selectionMode.indexOf('Drag') === -1) {
                             this.selectionModule.currentMode = this.selectionMode;

controls/charts/src/chart/utils/get-data.ts

@@ -210,7 +210,7 @@ export class ChartData {
     public getClosest(series: Series, value: number, xvalues?: number[]): number {
         let closest: number; let data: number;
         const xData: number[] = xvalues ? xvalues : series.xData;
-        if (value >= <number>series.xMin - 0.5 && value <= <number>series.xMax + 0.5) {
+        if (value >= <number>series.xAxis.visibleRange.min && value <= <number>series.xAxis.visibleRange.max) {
             for (let i: number = 0; i < xData.length; i++) {
                 data = xData[i];
                 if (closest == null || Math.abs(data - value) < Math.abs(closest - value)) {

controls/circulargauge/CHANGELOG.md

@@ -4,6 +4,23 @@
 
 ## [Unreleased]
 
+## 19.2.47 (2021-07-13)
+
+### CircularGauge
+
+#### Bug Fixes
+
+- `#I333600` - No script errors are thrown when the same start and end values are set in the range using the `setRangeValue()` method.
+
+## 19.2.46 (2021-07-06)
+
+### CircularGauge
+
+#### Bug Fixes
+
+- `#I333600` - No script errors are thrown when the same start and end values are set in the range using the `setRangeValue()` method.
+- `#I333600` - When the `start` and `end` values of the range are set to the same value, the range's path will be correct now.
+
 ## 19.1.58 (2021-04-27)
 
 ### CircularGauge

controls/circulargauge/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@syncfusion/ej2-circulargauge",
-	"version": "17.4.39",
+	"version": "19.2.46",
 	"description": "Essential JS 2 CircularGauge Components",
 	"author": "Syncfusion Inc.",
 	"license": "SEE LICENSE IN license",

controls/circulargauge/spec/circulargauge/axes/range.spec.ts

@@ -69,7 +69,7 @@ describe('Circular-Gauge Control', () => {
         it('Checking the axis range element', (done: Function) => {
             gauge.loaded = (args: ILoadedEventArgs): void => {
                 value = document.getElementById('container_Axis_Ranges_0').childElementCount;
-                expect(value == 0).toBe(true);
+                expect(value == 1).toBe(true);
                 done();
             };
             gauge.refresh();
@@ -87,7 +87,7 @@ describe('Circular-Gauge Control', () => {
         it('Checking the axis range element with given range both positive - same', (done: Function) => {
             gauge.loaded = (args: ILoadedEventArgs): void => {
                 value = document.getElementById('container_Axis_Ranges_0').childElementCount;
-                expect(value == 0).toBe(true);
+                expect(value == 1).toBe(true);
                 done();
             };
             gauge.axes[0].ranges[0].start = 10;
@@ -327,6 +327,26 @@ describe('Circular-Gauge Control', () => {
             gauge.axes[0].ranges[1].radius = '50';
             gauge.refresh();
         });
+        it('Checking axis range start value change by setRangeValue method', (done: Function) => {
+            gauge.loaded = (args: ILoadedEventArgs): void => {
+                ele = <HTMLElement>document.getElementById('container_Axis_Ranges_0').childNodes[0];
+                let start = gauge.axes[0].ranges[0].start;
+                gauge.setRangeValue(0, 0, 10, 50);
+                expect(start !== gauge.axes[0].ranges[0].start).toBe(true);
+                done();
+            };
+            gauge.refresh();
+        });
+        it('Checking axis range end value change by setRangeValue method', (done: Function) => {
+            gauge.loaded = (args: ILoadedEventArgs): void => {
+                ele = <HTMLElement>document.getElementById('container_Axis_Ranges_0').childNodes[0];
+                let end = gauge.axes[0].ranges[0].end;
+                gauge.setRangeValue(0, 0, 10, 40);
+                expect(end !== gauge.axes[0].ranges[0].end).toBe(true);
+                done();
+            };
+            gauge.refresh();
+        });
     });
 
     describe('Checking range radius with multiple scenarios', () => {

controls/circulargauge/spec/circulargauge/axes/semi-half.spec.ts

@@ -133,7 +133,7 @@ describe('Circular-Gauge Control', () => {
         it('Checking start angle greater than 90 and end angle less than 360', (done: Function) => {
             gauge.loaded = (args: ILoadedEventArgs): void => {
                 ele = document.getElementById("container_Axis_Ranges_0");
-                expect(ele.childElementCount === 0).toBe(true);
+                expect(ele.childElementCount === 1).toBe(true);
                 done();
             };
             gauge.axes = [{

controls/circulargauge/spec/circulargauge/user-interaction/theme.spec.ts

@@ -515,7 +515,7 @@ describe('Circular-Gauge Control', () => {
         it('Axis label font family Bootstrap4 color', (): void => {
             gauge.loaded = (args: ILoadedEventArgs): void => {
                 svg = document.getElementById('container_Axis_0_Label_0');
-                expect(svg.style.fontFamily).toBe('HelveticaNeue');
+                expect(svg.style.fontFamily).toBe('Roboto');
             };
             gauge.refresh();
         });

controls/circulargauge/src/circular-gauge/axes/axis-renderer.ts

@@ -174,7 +174,7 @@ export class AxisRenderer {
             if ((i === 0 && style.hiddenLabel === 'First') || (i === (length - 1) && style.hiddenLabel === 'Last')) {
                 continue;
             }
-            style.font.fontFamily = this.gauge.themeStyle.labelFontFamily || style.font.fontFamily;
+            style.font.fontFamily = style.font.fontFamily || this.gauge.themeStyle.labelFontFamily;
             if (axis.hideIntersectingLabel && (i !== 0)) {
                 //To remove the labels which is intersecting with last label.
                 const lastlabel: boolean = ((i !== (labelCollection.length - 1)) && ((isCompleteAngle(axis.startAngle, axis.endAngle) ||
@@ -585,6 +585,11 @@ export class AxisRenderer {
                     Math.floor(startAngle), Math.ceil(endAngle), colorIndex
                 );
             }
+        } else if ((range.start === range.end) && ((range.start >= min && range.end <= max) || (range.end >= min && range.start <= max))) {
+            this.rangeAppendPathCalculation(
+                range, rangeIndex, index, startWidth, endWidth, rangeElement,
+                Math.floor(startAngle), Math.ceil(endAngle), colorIndex
+            );
         }
     }
 

controls/circulargauge/src/circular-gauge/circular-gauge.ts

@@ -470,6 +470,8 @@ export class CircularGauge extends Component<HTMLElement> implements INotifyProp
     public startValue: number;
     /** @private */
     public endValue: number;
+    /** @private */
+    private isRangeUpdate: boolean = false;
     /**
      * Render axis panel for gauge.
      *
@@ -1485,6 +1487,9 @@ export class CircularGauge extends Component<HTMLElement> implements INotifyProp
         const isClockWise: boolean = axis.direction === 'ClockWise';
         const startValue: number = Math.min(Math.max(start, axisRange.min), end);
         const endValue: number = Math.min(Math.max(start, end), axisRange.max);
+        range.start = start;
+        range.end = end;
+        this.isRangeUpdate = true;
         let startAngle: number = getAngleFromValue(startValue, axisRange.max, axisRange.min, axis.startAngle, axis.endAngle, isClockWise);
         let endAngle: number = getAngleFromValue(endValue, axisRange.max, axisRange.min, axis.startAngle, axis.endAngle, isClockWise);
         let startWidth: number;
@@ -1644,7 +1649,7 @@ export class CircularGauge extends Component<HTMLElement> implements INotifyProp
                 break;
             }
         }
-        if (!isPointerValueSame) {
+        if (!isPointerValueSame && !this.isRangeUpdate) {
             if (!refreshBounds && renderer) {
                 this.removeSvg();
                 this.renderElements();
@@ -1660,6 +1665,7 @@ export class CircularGauge extends Component<HTMLElement> implements INotifyProp
                 this.renderElements(false);
             }
         }
+        this.isRangeUpdate = false;
     }
 
     /**