v17.1.47 is released

Author: pipeline

controls/base/CHANGELOG.md

@@ -1,6 +1,6 @@
 {
 	"name": "@syncfusion/ej2-base",
-	"version": "17.1.41",
+	"version": "17.1.43",
 	"description": "A common package of Essential JS 2 base libraries, methods and class definitions",
 	"author": "Syncfusion Inc.",
 	"license": "SEE LICENSE IN license",

controls/base/dist/ej2-base.umd.min.js

@@ -4,12 +4,12 @@ import { IntlBase as base } from './intl-base';
 import { isUndefined, throwError, getValue } from '../util';
 import { HijriParser } from '../hijri-parser';
 import { isNullOrUndefined } from '../util';
-const abbreviateRegexGlobal: RegExp = /\/MMMMM|MMMM|MMM|a|LLL|EEEEE|EEEE|E|K|ccc|G+|z+/gi;
+const abbreviateRegexGlobal: RegExp = /\/MMMMM|MMMM|MMM|a|LLL|EEEEE|EEEE|E|K|cccc|ccc|G+|z+/gi;
 const standalone: string = 'stand-alone';
 const weekdayKey: string[] = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'];
 export const basicPatterns: string[] = ['short', 'medium', 'long', 'full'];
 /**
- * Interface for Date Format Options Module.
+ * Interface for Date Format Options Modules.
  * @private
  */
 export interface FormatOptions {

controls/base/dist/ej2-base.umd.min.js.map

@@ -5059,7 +5059,9 @@ var DateRangePicker = /** @__PURE__ @class */ (function (_super) {
                         this.endValue = endDate;
                         this.setValue();
                         this.refreshControl();
-                        this.changeTrigger(e);
+                        if (value !== this.previousEleValue) {
+                            this.changeTrigger(e);
+                        }
                         if (!this.preventBlur && document.activeElement !== this.inputElement) {
                             this.preventFocus = false;
                             var blurArguments = {

controls/base/dist/es6/ej2-base.es2015.js

@@ -8310,6 +8310,84 @@ describe('DateRangePicker', () => {
             expect(daterangepicker.inputWrapper.container.classList.contains('e-input-focus')).toBe(false);
         });
     });
+    describe('Change event Testing', () => {
+        let daterangepicker: any;
+        let startValue: Date;
+        let endValue: Date;
+        let changeCount: number = 0;
+        beforeEach(() => {
+            let ele: HTMLElement = <HTMLElement>createElement('input', { id: 'date' });
+            document.body.appendChild(ele);
+        });
+        afterEach(() => {
+            if (daterangepicker) {
+                daterangepicker.destroy();
+            }
+            document.body.innerHTML = '';
+            changeCount = 0;
+        });
+        
+        it('Format is MM yyyy', function () {
+            daterangepicker = new DateRangePicker({ 
+                format : "MM yyyy",
+                change : function onChange() {
+                changeCount++;
+            } });
+            daterangepicker.appendTo('#date');
+            if (!daterangepicker.isPopupOpen()) {
+                <HTMLElement>(daterangepicker.inputWrapper.buttons[0]).dispatchEvent(clickEvent);
+            }
+            let startEle: HTMLElement = <HTMLElement>(daterangepicker.popupObj.element.querySelectorAll('.e-left-calendar.e-calendar td')[10]);
+            let endEle: HTMLElement = <HTMLElement>(daterangepicker.popupObj.element.querySelectorAll('.e-right-calendar.e-calendar td')[10]);
+            startValue = daterangepicker.getIdValue(null, startEle);
+            endValue = daterangepicker.getIdValue(null, endEle);
+            (startEle).dispatchEvent(clickEvent);
+            (endEle).dispatchEvent(clickEvent);
+            <HTMLElement>(daterangepicker.applyButton.element).click();
+            daterangepicker.inputBlurHandler();
+            expect(changeCount).toBe(1);
+        });
+        it('Format is M yyyy', function () {
+            daterangepicker = new DateRangePicker({ 
+                format : "M yyyy",
+                change : function onChange() {
+                changeCount++;
+            } });
+            daterangepicker.appendTo('#date');
+            if (!daterangepicker.isPopupOpen()) {
+                <HTMLElement>(daterangepicker.inputWrapper.buttons[0]).dispatchEvent(clickEvent);
+            }
+            let startEle: HTMLElement = <HTMLElement>(daterangepicker.popupObj.element.querySelectorAll('.e-left-calendar.e-calendar td')[10]);
+            let endEle: HTMLElement = <HTMLElement>(daterangepicker.popupObj.element.querySelectorAll('.e-right-calendar.e-calendar td')[10]);
+            startValue = daterangepicker.getIdValue(null, startEle);
+            endValue = daterangepicker.getIdValue(null, endEle);
+            (startEle).dispatchEvent(clickEvent);
+            (endEle).dispatchEvent(clickEvent);
+            <HTMLElement>(daterangepicker.applyButton.element).click();
+            daterangepicker.inputBlurHandler();
+            expect(changeCount).toBe(1);
+        });
+        it('Format is yyyy MM', function () {
+            daterangepicker = new DateRangePicker({ 
+                format : "yyyy MM",
+                change : function onChange() {
+                changeCount++;
+            } });
+            daterangepicker.appendTo('#date');
+            if (!daterangepicker.isPopupOpen()) {
+                <HTMLElement>(daterangepicker.inputWrapper.buttons[0]).dispatchEvent(clickEvent);
+            }
+            let startEle: HTMLElement = <HTMLElement>(daterangepicker.popupObj.element.querySelectorAll('.e-left-calendar.e-calendar td')[10]);
+            let endEle: HTMLElement = <HTMLElement>(daterangepicker.popupObj.element.querySelectorAll('.e-right-calendar.e-calendar td')[10]);
+            startValue = daterangepicker.getIdValue(null, startEle);
+            endValue = daterangepicker.getIdValue(null, endEle);
+            (startEle).dispatchEvent(clickEvent);
+            (endEle).dispatchEvent(clickEvent);
+            <HTMLElement>(daterangepicker.applyButton.element).click();
+            daterangepicker.inputBlurHandler();
+            expect(changeCount).toBe(1);
+        });
+    });
 });
 interface CalendarElement {
     leftCalTitle: HTMLElement;

controls/base/dist/es6/ej2-base.es2015.js.map

@@ -1219,7 +1219,9 @@ export class DateRangePicker extends CalendarBase {
                         this.endValue = endDate;
                         this.setValue();
                         this.refreshControl();
-                        this.changeTrigger(e);
+                        if (value !== this.previousEleValue) {
+                            this.changeTrigger(e);
+                        }
                         if (!this.preventBlur && document.activeElement !== this.inputElement) {
                             this.preventFocus = false;
                             let blurArguments: BlurEventArgs = {

controls/base/dist/es6/ej2-base.es5.js

@@ -5581,6 +5581,9 @@ __decorate$4([
 __decorate$4([
     Property(1)
 ], Series.prototype, "opacity", void 0);
+__decorate$4([
+    Property(0)
+], Series.prototype, "zOrder", void 0);
 __decorate$4([
     Property('Line')
 ], Series.prototype, "type", void 0);
@@ -7322,20 +7325,22 @@ let Chart = class Chart extends Component {
     }
     calculateVisibleSeries() {
         let series;
+        let seriesCollection;
         this.visibleSeries = [];
         let colors = this.palettes.length ? this.palettes : getSeriesColor(this.theme);
         let count = colors.length;
-        for (let i = 0, len = this.series.length; i < len; i++) {
-            series = this.series[i];
+        seriesCollection = this.series.sort((a, b) => { return a.zOrder - b.zOrder; });
+        for (let i = 0, len = seriesCollection.length; i < len; i++) {
+            series = seriesCollection[i];
             // for y axis label issue during chart navigation
-            series.category = this.series[0].type === 'Pareto' ? 'Pareto' : 'Series';
+            series.category = seriesCollection[0].type === 'Pareto' ? 'Pareto' : 'Series';
             series.index = i;
             series.interior = series.fill || colors[i % count];
             switch (series.type) {
                 case 'Bar':
                 case 'StackingBar':
                 case 'StackingBar100':
-                    if (this.series[0].type.indexOf('Bar') === -1) {
+                    if (seriesCollection[0].type.indexOf('Bar') === -1) {
                         continue;
                     }
                     break;
@@ -7355,13 +7360,13 @@ let Chart = class Chart extends Component {
                     this.paretoSeriesModule.initSeries(series, this);
                     continue;
                 default:
-                    if (this.chartAreaType === 'PolarRadar' || this.series[0].type.indexOf('Bar') > -1) {
+                    if (this.chartAreaType === 'PolarRadar' || seriesCollection[0].type.indexOf('Bar') > -1) {
                         continue;
                     }
                     break;
             }
             this.visibleSeries.push(series);
-            this.series[i] = series;
+            seriesCollection[i] = series;
         }
     }
     renderTitle() {

controls/base/dist/es6/ej2-base.es5.js.map

@@ -5906,6 +5906,9 @@ var Series = /** @__PURE__ @class */ (function (_super) {
     __decorate$4([
         Property(1)
     ], Series.prototype, "opacity", void 0);
+    __decorate$4([
+        Property(0)
+    ], Series.prototype, "zOrder", void 0);
     __decorate$4([
         Property('Line')
     ], Series.prototype, "type", void 0);
@@ -7781,20 +7784,22 @@ var Chart = /** @__PURE__ @class */ (function (_super) {
     };
     Chart.prototype.calculateVisibleSeries = function () {
         var series;
+        var seriesCollection;
         this.visibleSeries = [];
         var colors = this.palettes.length ? this.palettes : getSeriesColor(this.theme);
         var count = colors.length;
-        for (var i = 0, len = this.series.length; i < len; i++) {
-            series = this.series[i];
+        seriesCollection = this.series.sort(function (a, b) { return a.zOrder - b.zOrder; });
+        for (var i = 0, len = seriesCollection.length; i < len; i++) {
+            series = seriesCollection[i];
             // for y axis label issue during chart navigation
-            series.category = this.series[0].type === 'Pareto' ? 'Pareto' : 'Series';
+            series.category = seriesCollection[0].type === 'Pareto' ? 'Pareto' : 'Series';
             series.index = i;
             series.interior = series.fill || colors[i % count];
             switch (series.type) {
                 case 'Bar':
                 case 'StackingBar':
                 case 'StackingBar100':
-                    if (this.series[0].type.indexOf('Bar') === -1) {
+                    if (seriesCollection[0].type.indexOf('Bar') === -1) {
                         continue;
                     }
                     break;
@@ -7814,13 +7819,13 @@ var Chart = /** @__PURE__ @class */ (function (_super) {
                     this.paretoSeriesModule.initSeries(series, this);
                     continue;
                 default:
-                    if (this.chartAreaType === 'PolarRadar' || this.series[0].type.indexOf('Bar') > -1) {
+                    if (this.chartAreaType === 'PolarRadar' || seriesCollection[0].type.indexOf('Bar') > -1) {
                         continue;
                     }
                     break;
             }
             this.visibleSeries.push(series);
-            this.series[i] = series;
+            seriesCollection[i] = series;
         }
     };
     Chart.prototype.renderTitle = function () {

controls/base/dist/global/ej2-base.min.js

@@ -1691,20 +1691,22 @@ export class Chart extends Component<HTMLElement> implements INotifyPropertyChan
 
     private calculateVisibleSeries(): void {
         let series: Series;
+        let seriesCollection: SeriesModel[];
         this.visibleSeries = [];
         let colors: string[] = this.palettes.length ? this.palettes : getSeriesColor(this.theme);
         let count: number = colors.length;
-        for (let i: number = 0, len: number = this.series.length; i < len; i++) {
-            series = <Series>this.series[i];
+        seriesCollection = this.series.sort((a: SeriesModel, b: SeriesModel) => { return a.zOrder - b.zOrder; });
+        for (let i: number = 0, len: number = seriesCollection.length; i < len; i++) {
+            series = <Series>seriesCollection[i];
             // for y axis label issue during chart navigation
-            series.category = this.series[0].type === 'Pareto' ? 'Pareto' : 'Series';
+            series.category = seriesCollection[0].type === 'Pareto' ? 'Pareto' : 'Series';
             series.index = i;
             series.interior = series.fill || colors[i % count];
             switch (series.type) {
                 case 'Bar':
                 case 'StackingBar':
                 case 'StackingBar100':
-                    if (this.series[0].type.indexOf('Bar') === -1) {
+                    if (seriesCollection[0].type.indexOf('Bar') === -1) {
                         continue;
                     } break;
                 case 'Polar':
@@ -1723,13 +1725,13 @@ export class Chart extends Component<HTMLElement> implements INotifyPropertyChan
                     this.paretoSeriesModule.initSeries(series, this);
                     continue;
                 default:
-                    if (this.chartAreaType === 'PolarRadar' || this.series[0].type.indexOf('Bar') > -1) {
+                    if (this.chartAreaType === 'PolarRadar' || seriesCollection[0].type.indexOf('Bar') > -1) {
                         continue;
                     }
                     break;
             }
             this.visibleSeries.push(series);
-            this.series[i] = series;
+            seriesCollection[i] = series;
         }
     }
 

controls/base/dist/global/ej2-base.min.js.map

@@ -745,6 +745,12 @@ export interface SeriesModel extends SeriesBaseModel{
      */
     opacity?: number;
 
+    /**
+     * The z order of the series.
+     * @default 0
+     */
+    zOrder?: number;
+
     /**
      * The type of the series are
      * * Line

controls/base/package.json

@@ -1270,6 +1270,13 @@ export class Series extends SeriesBase {
     @Property(1)
     public opacity: number;
 
+    /**
+     * The z order of the series.
+     * @default 0
+     */
+    @Property(0)
+    public zOrder: number;
+
     /**
      * The type of the series are
      * * Line

controls/base/src/intl/date-formatter.ts

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