v17.2.41 is released

Author: pipeline

controls/base/package.json

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

controls/base/styles/common/_core.scss

@@ -27,6 +27,7 @@
 
   #{&} .e-rtl {
     direction: rtl;
+    text-align: right;
   }
 
   #{&} .e-overlay {

controls/calendars/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 ## [Unreleased]
 
+## 17.2.41 (2019-08-14)
+
+### DateRangePicker
+
+#### Bug Fixes
+
+- `#F146493` - Issue with "DateRangePicker popup not opened on the second click action in iPad devices" has been resolved.
+
 ## 17.2.36 (2019-07-24)
 
 ### DatePicker

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

@@ -2406,6 +2406,75 @@ describe('Datepicker', () => {
             expect(datepicker.popupObj).toBe(null);
         });
     });
+    describe('HTML attribute API at inital rendering and dynamic rendering', () => {
+        let datePicker: any;
+        beforeEach((): void => {
+            datePicker = undefined;
+            let ele: HTMLInputElement = <HTMLInputElement>createElement('input', { id: 'date' });
+            document.body.appendChild(ele);
+        });
+        afterEach((): void => {
+            if (datePicker) {
+                datePicker.destroy();
+            }
+            document.body.innerHTML = '';
+        });
+        it('Html attributes at initial rendering', () => {
+            datePicker = new DatePicker({ htmlAttributes:{placeholder:"Choose the date", class: "sample" } });
+            datePicker.appendTo('#date');
+            expect(datePicker.element.getAttribute('placeholder')).toBe('Choose the date');
+            expect(datePicker.inputWrapper.container.classList.contains('sample')).toBe(true);
+        });
+        it('Pass multiple attributes dynamically', () => {
+            datePicker = new DatePicker({ value: new Date("12/12/2016") });
+            datePicker.appendTo('#date');
+            datePicker.htmlAttributes = { class:"sample", readonly: "true", disabled: "true"};
+            datePicker.dataBind();
+            expect(datePicker.element.value).toBe('12/12/2016');
+            expect(datePicker.inputWrapper.container.classList.contains('sample')).toBe(true);
+            expect(datePicker.element.hasAttribute('readonly')).toBe(true);
+            expect(datePicker.element.hasAttribute('disabled')).toBe(true);
+        });
+        it('Dynamically change attributes through htmlAttributes API', () => {
+            datePicker = new DatePicker({ value: new Date("12/12/2016") });
+            datePicker.appendTo('#date');
+            datePicker.inputElement.value = "10/12/2016";
+            datePicker.htmlAttributes = { class:"sample" };
+            datePicker.dataBind();
+            expect(datePicker.element.value).toBe('10/12/2016');
+        });
+        it('Dynamically change multiple attributes through htmlAttributes API', () => {
+            datePicker = new DatePicker({ value: new Date("12/12/2019") });
+            datePicker.appendTo('#date');
+            datePicker.htmlAttributes = { class:"sample" , max:'10/20/19', min:'10/5/19'};
+            datePicker.dataBind();
+            expect(datePicker.element.value).toBe("12/12/2019");
+            expect(datePicker.element.getAttribute('max')).toBe('10/20/19');
+            expect(datePicker.element.getAttribute('min')).toBe('10/5/19');
+        });
+        it('Pass null value in htmlAttributes', () => {
+            datePicker = new DatePicker({ value: new Date("12/12/2016") });
+            datePicker.appendTo('#date');
+            datePicker.htmlAttributes = { null: "null"};
+            datePicker.dataBind();
+            expect(datePicker.element.value).toBe('12/12/2016');
+        });
+        it('Pass undefined in htmlAttributes', () => {
+            datePicker = new DatePicker({ value: new Date("12/12/2016") });
+            datePicker.appendTo('#date');
+            datePicker.htmlAttributes = { undefined: "undefined"};
+            datePicker.dataBind();
+            expect(datePicker.element.value).toBe('12/12/2016');
+        });
+        it('Pass empty value in htmlAttributes', () => {
+            datePicker = new DatePicker({ value: new Date("12/12/2016") });
+            datePicker.appendTo('#date');
+            datePicker.inputElement.value = "10/12/2016";
+            datePicker.htmlAttributes = {};
+            datePicker.dataBind();
+            expect(datePicker.element.value).toBe('10/12/2016');
+        });
+    });
     describe('keyboard events', () => {
         let datePicker: any;
         let keyEventArgs: any = {

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

@@ -4695,6 +4695,76 @@ describe('DateRangePicker', () => {
         });
     });
 
+    describe('HTML attribute API at inital rendering and dynamic rendering', () => {
+        let daterangepicker: any;
+        beforeEach((): void => {
+            daterangepicker = undefined;
+            let ele: HTMLInputElement = <HTMLInputElement>createElement('input', { id: 'daterange' });
+            document.body.appendChild(ele);
+        });
+        afterEach((): void => {
+            if (daterangepicker) {
+                daterangepicker.destroy();
+            }
+            document.body.innerHTML = '';
+        });
+        it('Html attributes at initial rendering', () => {
+            daterangepicker = new DateRangePicker({ htmlAttributes:{placeholder:"Choose a date", class: "sample" } });
+            daterangepicker.appendTo('#daterange');
+            expect(daterangepicker.element.getAttribute('placeholder')).toBe('Choose a date');
+            expect(daterangepicker.inputWrapper.container.classList.contains('sample')).toBe(true);
+        });
+        it('Pass multiple attributes dynamically', () => {
+            daterangepicker = new DateRangePicker({ startDate: new Date('4/24/2017'), endDate: new Date('8/10/2017') });
+            daterangepicker.appendTo('#daterange');
+            daterangepicker.htmlAttributes = { class:"sample", readonly: "true", disabled: "true"};
+            daterangepicker.dataBind();
+            expect(daterangepicker.element.value).toBe('4/24/2017 - 8/10/2017');
+            expect(daterangepicker.inputWrapper.container.classList.contains('sample')).toBe(true);
+            expect(daterangepicker.element.hasAttribute('readonly')).toBe(true);
+            expect(daterangepicker.element.hasAttribute('disabled')).toBe(true);
+        });
+        it('Dynamically change attributes through htmlAttributes API', () => {
+            daterangepicker = new DateRangePicker({ startDate: new Date('4/24/2017'), endDate: new Date('8/10/2017') });
+            daterangepicker.appendTo('#daterange');
+            daterangepicker.inputElement.value = "5/5/2019 - 6/10/2019";
+            daterangepicker.htmlAttributes = { class:"sample" };
+            daterangepicker.dataBind();
+            expect(daterangepicker.element.value).toBe('5/5/2019 - 6/10/2019');
+        });
+        it('Dynamically change multiple attributes through htmlAttributes API', () => {
+            daterangepicker = new DateRangePicker({ startDate: new Date('4/24/2017'), endDate: new Date('8/10/2017') });
+            daterangepicker.appendTo('#daterange');
+            daterangepicker.htmlAttributes = { class:"sample" , max:'5/15/2019', min:'6/5/2019'};
+            daterangepicker.dataBind();
+            expect(daterangepicker.element.value).toBe('4/24/2017 - 8/10/2017');
+            expect(daterangepicker.element.getAttribute('max')).toBe('5/15/2019');
+            expect(daterangepicker.element.getAttribute('min')).toBe('6/5/2019');
+        });
+        it('Pass null value in htmlAttributes', () => {
+            daterangepicker = new DateRangePicker({ startDate: new Date('4/24/2017'), endDate: new Date('8/10/2017') });
+            daterangepicker.appendTo('#daterange');
+            daterangepicker.htmlAttributes = { null: "null"};
+            daterangepicker.dataBind();
+            expect(daterangepicker.element.value).toBe('4/24/2017 - 8/10/2017');
+        });
+        it('Pass undefined in htmlAttributes', () => {
+            daterangepicker = new DateRangePicker({ startDate: new Date('4/24/2017'), endDate: new Date('8/10/2017') });
+            daterangepicker.appendTo('#daterange');
+            daterangepicker.htmlAttributes = { undefined: "undefined"};
+            daterangepicker.dataBind();
+            expect(daterangepicker.element.value).toBe('4/24/2017 - 8/10/2017');
+        });
+        it('Pass empty value in htmlAttributes', () => {
+            daterangepicker = new DateRangePicker({ startDate: new Date('4/24/2017'), endDate: new Date('8/10/2017') });
+            daterangepicker.appendTo('#daterange');
+            daterangepicker.inputElement.value = "5/5/2019 - 6/10/2019";
+            daterangepicker.htmlAttributes = {};
+            daterangepicker.dataBind();
+            expect(daterangepicker.element.value).toBe('5/5/2019 - 6/10/2019');
+        });
+    });
+
     describe('MinDays and MaxDays - Desktop', () => {
         let daterangepicker: any;
         let keyEventArgs: any = {

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

@@ -1688,7 +1688,7 @@ describe('HTML attribute API dynamic testing', () => {
         expect(datetimepicker.element.min).toBe('2/10/2018');
         expect(datetimepicker.element.max).toBe('2/25/2018');
         expect(datetimepicker.inputWrapper.container.getAttribute('title')).toBe('sample');
-        datetimepicker.htmlAttributes = { placeholder:"choose a date", readonly: "false", disabled: "", value: "4/20/2018", max: "4/25/2018", min: "4/10/2018", title:"heading"};
+        datetimepicker.htmlAttributes = { placeholder:"choose a date", readonly: "false", disabled: "false", value: "4/20/2018", max: "4/25/2018", min: "4/10/2018", title:"heading"};
         datetimepicker.dataBind();
         expect(datetimepicker.element.getAttribute('placeholder')).toBe('choose a date');
         expect(datetimepicker.element.hasAttribute('readonly')).toBe(false);
@@ -1749,7 +1749,75 @@ describe('HTML attribute API dynamic testing', () => {
             expect(document.querySelector('.e-float-text').innerHTML).toBe('choose a date');
         });
 });
-
+describe('HTML attribute API at inital rendering and dynamic rendering', () => {
+    let datetimepicker: any;
+    beforeEach((): void => {
+        datetimepicker = undefined;
+        let ele: HTMLInputElement = <HTMLInputElement>createElement('input', { id: 'datetime' });
+        document.body.appendChild(ele);
+    });
+    afterEach((): void => {
+        if (datetimepicker) {
+            datetimepicker.destroy();
+        }
+        document.body.innerHTML = '';
+    });
+    it('Html attributes at initial rendering', () => {
+        datetimepicker = new DateTimePicker({ htmlAttributes:{placeholder:"Choose a date", class: "sample" } });
+        datetimepicker.appendTo('#datetime');
+        expect(datetimepicker.element.getAttribute('placeholder')).toBe('Choose a date');
+        expect(datetimepicker.inputWrapper.container.classList.contains('sample')).toBe(true);
+    });
+    it('Pass multiple attributes dynamically', () => {
+        datetimepicker = new DateTimePicker({ value: new Date("12/12/2016 10:00") });
+        datetimepicker.appendTo('#datetime');
+        datetimepicker.htmlAttributes = { class:"sample", readonly: "true", disabled: "true"};
+        datetimepicker.dataBind();
+        expect(datetimepicker.element.value).toBe('12/12/2016 10:00 AM');
+        expect(datetimepicker.inputWrapper.container.classList.contains('sample')).toBe(true);
+        expect(datetimepicker.element.hasAttribute('readonly')).toBe(true);
+        expect(datetimepicker.element.hasAttribute('disabled')).toBe(true);
+    });
+    it('Dynamically change attributes through htmlAttributes API', () => {
+        datetimepicker = new DateTimePicker({ value: new Date("12/12/2016 10:00") });
+        datetimepicker.appendTo('#datetime');
+        datetimepicker.inputElement.value = '10/10/2016 10:00';
+        datetimepicker.htmlAttributes = { class:"sample" };
+        datetimepicker.dataBind();
+        expect(datetimepicker.element.value).toBe('10/10/2016 10:00');
+    });
+    it('Dynamically change multiple attributes through htmlAttributes API', () => {
+        datetimepicker = new DateTimePicker({ value: new Date("12/12/2016 10:00 AM") });
+        datetimepicker.appendTo('#datetime');
+        datetimepicker.htmlAttributes = { class:"sample" , max:'10/5/2016 10:00', min:'10/20/2016 10:00'};
+        datetimepicker.dataBind();
+        expect(datetimepicker.element.value).toBe('12/12/2016 10:00 AM');
+        expect(datetimepicker.element.getAttribute('max')).toBe('10/5/2016 10:00');
+        expect(datetimepicker.element.getAttribute('min')).toBe('10/20/2016 10:00');
+    });
+    it('Pass null value in htmlAttributes', () => {
+        datetimepicker = new DateTimePicker({ value: new Date("12/12/2016 10:00 AM") });
+        datetimepicker.appendTo('#datetime');
+        datetimepicker.htmlAttributes = { null: "null"};
+        datetimepicker.dataBind();
+        expect(datetimepicker.element.value).toBe('12/12/2016 10:00 AM');
+    });
+    it('Pass undefined in htmlAttributes', () => {
+        datetimepicker = new DateTimePicker({value: new Date("12/12/2016 10:00 AM") });
+        datetimepicker.appendTo('#datetime');
+        datetimepicker.htmlAttributes = { undefined: "undefined"};
+        datetimepicker.dataBind();
+        expect(datetimepicker.element.value).toBe('12/12/2016 10:00 AM');
+    });
+    it('Pass empty value in htmlAttributes', () => {
+        datetimepicker = new DateTimePicker({ value: new Date("12/12/2016 10:00") });
+        datetimepicker.appendTo('#datetime');
+        datetimepicker.inputElement.value = "12/12/2016 10:00";
+        datetimepicker.htmlAttributes = {};
+        datetimepicker.dataBind();
+        expect(datetimepicker.element.value).toBe('12/12/2016 10:00');
+    });
+});
 describe('keyboard events', () => {
     let datetimepicker: any;
     let keyEventArgs: any = {

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

@@ -2470,7 +2470,76 @@ describe('TimePicker', () => {
             expect(document.querySelector('.e-float-text').innerHTML).toBe('choose a date');
         });
     });
-    
+    describe('HTML attribute API at inital rendering and dynamic rendering', () => {
+        let timeObj: any;
+        beforeEach((): void => {
+            timeObj = undefined;
+            let ele: HTMLInputElement = <HTMLInputElement>createElement('input', { id: 'time' });
+            document.body.appendChild(ele);
+        });
+        afterEach((): void => {
+            if (timeObj) {
+                timeObj.destroy();
+            }
+            document.body.innerHTML = '';
+        });
+        it('Html attributes at initial rendering', () => {
+            timeObj = new TimePicker({ htmlAttributes:{placeholder:"Choose a time", class: "sample" } });
+            timeObj.appendTo('#time');
+            expect(timeObj.element.getAttribute('placeholder')).toBe('Choose a time');
+            expect(timeObj.inputWrapper.container.classList.contains('sample')).toBe(true);
+        });
+        it('Pass multiple attributes dynamically', () => {
+            timeObj = new TimePicker({ value: new Date("12/12/2016 1:00 AM") });
+            timeObj.appendTo('#time');
+            timeObj.htmlAttributes = { class:"sample", readonly: "true", disabled: "true"};
+            timeObj.dataBind();
+            expect(timeObj.element.value).toBe('1:00 AM');
+            expect(timeObj.inputWrapper.container.classList.contains('sample')).toBe(true);
+            expect(timeObj.element.hasAttribute('readonly')).toBe(true);
+            expect(timeObj.element.hasAttribute('disabled')).toBe(true);
+        });
+        it('Dynamically change attributes through htmlAttributes API', () => {
+            timeObj = new TimePicker({ value: new Date("12/12/2016 1:00 AM") });
+            timeObj.appendTo('#time');
+            timeObj.inputElement.value = "10/10/2016 1:00 AM";
+            timeObj.htmlAttributes = { class:"sample" };
+            timeObj.dataBind();
+            expect(timeObj.element.value).toBe('10/10/2016 1:00 AM');
+        });
+        it('Dynamically change multiple attributes through htmlAttributes API', () => {
+            timeObj = new TimePicker({ value: new Date("12/12/2016 1:00 AM") });
+            timeObj.appendTo('#time');
+            timeObj.element.value = "10/10/2016 1:00 AM";
+            timeObj.htmlAttributes = { class:"sample" , max:'10/20/2019', min:'10/5/2019'};
+            timeObj.dataBind();
+            expect(timeObj.element.value).toBe("10/10/2016 1:00 AM");
+            expect(timeObj.element.getAttribute('max')).toBe('10/20/2019');
+            expect(timeObj.element.getAttribute('min')).toBe('10/5/2019');
+        });
+        it('Pass null value in htmlAttributes', () => {
+            timeObj = new TimePicker({ value: new Date("12/12/2016 1:00 AM") });
+            timeObj.appendTo('#time');
+            timeObj.htmlAttributes = { null: "null"};
+            timeObj.dataBind();
+            expect(timeObj.element.value).toBe('1:00 AM');
+        });
+        it('Pass undefined in htmlAttributes', () => {
+            timeObj = new TimePicker({ value: new Date("12/12/2016 1:00 AM") });
+            timeObj.appendTo('#time');
+            timeObj.htmlAttributes = { undefined: "undefined"};
+            timeObj.dataBind();
+            expect(timeObj.element.value).toBe('1:00 AM');
+        });
+        it('Pass empty value in htmlAttributes', () => {
+            timeObj = new TimePicker({ value: new Date("12/12/2016 1:00 AM") });
+            timeObj.appendTo('#time');
+            timeObj.inputElement.value = "12/12/2016 1:00 AM";
+            timeObj.htmlAttributes = {};
+            timeObj.dataBind();
+            expect(timeObj.element.value).toBe('12/12/2016 1:00 AM');
+        });
+    });
 
     describe('mobile layout testing', () => {
         let ele: HTMLElement = createElement('input', { id: 'timepicker31' });